/*
  Contour Identity - shell and sign-in pages.

  Linked directly from _Layout.cshtml rather than folded into concat.min.css, because
  that bundle is produced by the gulp "min:css" task, which runs only from the Visual
  Studio task runner. A plain "dotnet publish" does not produce it, so anything put
  there is not guaranteed to reach a deployed server.

  Contour green (#a4d65e) is a light colour - about 1.7:1 against white, and the same
  against white text - so it is used here as a fill and as accent rules, never as text
  and never behind white text. Where something has to read as brand coloured it uses
  --brand-dark, the same hue darkened to about 6.9:1 on white. On a green fill the
  label is --ink, which is about 9.4:1.

  Everything for the sign-in pages is scoped under .auth-*, which appears nowhere else
  in this application, so none of it reaches the admin screens or the MVC grids.
*/

/*
  Sizes here are in px on purpose. Bootstrap 3 sets html { font-size: 10px }, so a rem
  inside the page is 10px while a rem in a media query still resolves against 16px -
  two different units under one name. Everything below is absolute instead.
*/

:root {
  --brand:      #a4d65e;
  --brand-dark: #3F6417;
  --brand-mid:  #93c750;
  --brand-tint: #EFF7E1;

  --ink:        #1D2419;
  --ink-muted:  #5C6656;
  --ink-faint:  #858E7E;

  --paper:      #F4F6F0;
  --surface:    #FFFFFF;
  --rule:       #DCE2D3;
  --rule-firm:  #C2CBB5;

  --danger:      #B3261E;
  --danger-tint: #FDECEA;
  --danger-rule: #F0C4BF;

  --font: "Quicksand", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* The bar's height: the brand image plus its padding. The nav is centred against
     this same value rather than against a number copied from it. */
  --bar-h: 78px;
}

/* ============================================================================
   Shell: navigation bar and footer
   ========================================================================== */

body {
  font-family: var(--font);
  color: var(--ink);
  background-color: var(--paper);
}

/* The bar keeps its brand green. Its labels are dark rather than white: white on
   this green is about 1.7:1, which is not readable. */
.navbar.contour-bar {
  min-height: var(--bar-h);
  margin-bottom: 0;
  border: 0;
  border-bottom: 1px solid rgba(29, 36, 25, .10);
  box-shadow: 0 1px 3px rgba(29, 36, 25, .12);
}

.navbar.contour-bar .navbar-brand {
  height: auto;
  padding: 9px 15px;
  display: flex;
  align-items: center;
}

.navbar.contour-bar .navbar-brand img {
  height: 60px;
  width: auto;
  display: block;
  border-radius: 4px;
}

.navbar.contour-bar .navbar-nav > li > a {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  padding: 12px 16px;
  margin: 0 2px;
  border-radius: 6px;
  transition: background-color .15s ease, color .15s ease;
}

.navbar.contour-bar .navbar-nav > li > a:hover,
.navbar.contour-bar .navbar-nav > li > a:focus {
  background-color: rgba(29, 36, 25, .10);
  color: var(--ink);
}

.navbar.contour-bar .navbar-nav > li.open > a,
.navbar.contour-bar .navbar-nav > li.open > a:hover,
.navbar.contour-bar .navbar-nav > li.open > a:focus {
  background-color: rgba(29, 36, 25, .14);
  color: var(--ink);
}

/*
  Bootstrap floats the nav, so it sits at the top of the bar and leaves 35px of dead
  space under it - which is what made the Login / Register button look pinned up in a
  corner. The old inline stylesheet papered over this with padding-top: 3%, a figure
  that changed with the width of the window.

  The list is given the bar's own height and centres its items in it, so the alignment
  holds whatever the links or the logo are sized to.
*/
@media (min-width: 768px) {
  .navbar.contour-bar .navbar-nav {
    display: flex;
    align-items: stretch;
    height: var(--bar-h);
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Each item fills the bar's height and centres its own link inside it. The link is
     what gets the hover pill; the item being full height is what lets a dropdown,
     anchored at top: 100%, open below the bar instead of across its bottom edge.
     Floats do nothing to a flex item, so clearing it keeps the two from disagreeing. */
  .navbar.contour-bar .navbar-nav > li {
    float: none;
    display: flex;
    align-items: center;
  }
}

/* The sign-in entry point reads as the one action on the bar. */
.navbar.contour-bar .navbar-nav > li.nav-cta > a {
  background-color: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(29, 36, 25, .18);
}

.navbar.contour-bar .navbar-nav > li.nav-cta > a:hover,
.navbar.contour-bar .navbar-nav > li.nav-cta > a:focus,
.navbar.contour-bar .navbar-nav > li.nav-cta.open > a {
  background-color: #F7FBEF;
  color: var(--ink);
}

.navbar.contour-bar .dropdown-menu {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 6px;
  margin-top: 4px;
  min-width: 190px;
  box-shadow: 0 8px 20px rgba(29, 36, 25, .16);
}

.navbar.contour-bar .dropdown-menu > li > a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  padding: 9px 12px;
  border-radius: 5px;
}

.navbar.contour-bar .dropdown-menu > li > a:hover,
.navbar.contour-bar .dropdown-menu > li > a:focus {
  background-color: var(--brand-tint);
  color: var(--brand-dark);
}

.navbar.contour-bar .navbar-toggle {
  border-color: rgba(29, 36, 25, .28);
  margin-top: 17px;
  padding: 11px 10px;
}
.navbar.contour-bar .navbar-toggle:hover,
.navbar.contour-bar .navbar-toggle:focus { background-color: rgba(29, 36, 25, .10); }
.navbar.contour-bar .navbar-toggle .icon-bar { background-color: var(--ink); }

.navbar.contour-bar .navbar-collapse { border-color: rgba(29, 36, 25, .12); }

/* ---- the collapsed bar, under 768px ----------------------------------------------
   Bootstrap rewrites the navbar wholesale below this width. Inside an open hamburger it
   strips the dropdown of its background, border and shadow (bootstrap.css line 3935) and
   recolours the links to #777 (line 4150), which on this green is both flat and hard to
   read. Those rules carry four class selectors, so undoing them needs at least as many -
   hence the longer selectors here, which exist for weight rather than for meaning.
*/
@media (max-width: 767px) {
  /* Bootstrap caps a fixed navbar's drawer at 340px whatever the screen is, so on a
     phone nine menu rows scroll inside a short box and an open submenu card spills out
     of the bottom of it. The drawer gets the height of the window below the bar
     instead, and still scrolls if a menu ever outgrows that. */
  .navbar.contour-bar .navbar-collapse {
    max-height: calc(100vh - 78px);
    overflow-y: auto;
  }

  /* The signed-out menu is pull-right, which leaves it hanging in the corner of a
     full-width drawer while every other row spans it. */
  .navbar.contour-bar .navbar-nav,
  .navbar.contour-bar .navbar-nav.pull-right {
    float: none !important;
    margin: 8px 0;
    padding-top: 0;
  }

  .navbar.contour-bar .navbar-nav > li { float: none; }

  .navbar.contour-bar .navbar-nav > li > a {
    padding: 13px 16px;
    margin: 2px 0;
    border-radius: 8px;
  }

  /* In the drawer every row is a row. The white pill is for the desktop bar, where it
     is the single call to action; here it would sit on top of its own submenu card. */
  .navbar.contour-bar .navbar-nav > li.nav-cta > a {
    background-color: transparent;
    box-shadow: none;
  }
  .navbar.contour-bar .navbar-nav > li.nav-cta.open > a {
    background-color: rgba(29, 36, 25, .14);
  }

  /* The submenu becomes an indented card, so it reads as sitting inside the row above
     it rather than as three more links of the same rank. */
  .navbar.contour-bar .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin: 2px 0 6px 16px;
    padding: 5px;
    background-color: rgba(255, 255, 255, .94);
    border: 0;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(29, 36, 25, .16);
  }

  .navbar-default.contour-bar .navbar-nav .open .dropdown-menu > li > a {
    color: var(--ink);
    padding: 12px 14px;
    border-radius: 6px;
    font-weight: 500;
  }

  .navbar-default.contour-bar .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default.contour-bar .navbar-nav .open .dropdown-menu > li > a:focus {
    color: var(--brand-dark);
    background-color: var(--brand-tint);
  }

  /* The caret points down on a closed row and up on an open one, so the drawer says
     which row the card below it belongs to. */
  .navbar.contour-bar .navbar-nav > li.open > a .caret {
    border-top: 0;
    border-bottom: 4px solid;
  }
}

/* Keyboard focus. base.css sets "outline: none !important" globally, which removes
   every focus ring in the application; these restore one for the shell and the
   sign-in pages without touching that rule. */
.navbar.contour-bar a:focus,
.navbar.contour-bar button:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(29, 36, 25, .35);
}

/* Static rather than fixed to the bottom: a fixed footer covers the last rows of a
   form on a short window, which it did on the register page. */
/* The footer used to be pinned to the bottom of the window, which covered the last
   rows of a long form. It is static now, and the content well is given the height of
   the window less the footer so a short page still pushes it to the bottom. Bootstrap
   puts every element in border-box, so the inline 104px of top padding counts inside
   this figure. */
.container.body-content { min-height: calc(100vh - 48px); }

.site-footer {
  background-color: #1C211A;
  color: #A7B09E;
  padding: 18px 0;
  font-size: 14px;
  text-align: center;
}
.site-footer a { color: var(--brand); }

/* ============================================================================
   Sign-in pages
   ========================================================================== */

.auth-shell {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 8px 0 56px;
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(29, 36, 25, .05),
              0 12px 32px rgba(29, 36, 25, .09);
  padding: 40px 44px 44px;
  width: 100%;
  max-width: 432px;
}

/* Register asks for six fields, so it is given two columns on a wide window. */
.auth-card--wide { max-width: 640px; }

.auth-head { margin-bottom: 28px; }

.auth-title {
  font-family: var(--font);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.01em;
}

/* The accent rule is where the brand green belongs: a fill, not a letterform. */
.auth-title::after {
  content: "";
  display: block;
  width: 54px;
  height: 4px;
  background-color: var(--brand);
  border-radius: 2px;
  margin-top: 12px;
}

.auth-head--center { text-align: center; }
.auth-head--center .auth-title::after { margin-left: auto; margin-right: auto; }

.auth-sub {
  font-size: 15px;
  color: var(--ink-muted);
  margin: 14px 0 0;
  line-height: 1.5;
}

/* ---- fields ---- */

.auth-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 20px;
}
@media (min-width: 640px) {
  .auth-card--wide .auth-grid { grid-template-columns: 1fr 1fr; }
  .auth-card--wide .auth-grid .auth-field--full { grid-column: 1 / -1; }
}

.auth-field { margin-bottom: 18px; }

.auth-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-muted);
  margin-bottom: 7px;
}

.auth-card .form-control {
  height: auto;
  font-family: var(--font);
  font-size: 16px;
  color: var(--ink);
  background-color: var(--surface);
  padding: 11px 13px;
  border: 1px solid var(--rule-firm);
  border-radius: 8px;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-card .form-control::-webkit-input-placeholder { color: var(--ink-faint); }
.auth-card .form-control::-moz-placeholder          { color: var(--ink-faint); opacity: 1; }
.auth-card .form-control:-ms-input-placeholder      { color: var(--ink-faint); }
.auth-card .form-control::placeholder               { color: var(--ink-faint); }

.auth-card .form-control:focus {
  outline: none !important;
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 3px rgba(164, 214, 94, .45);
}

.auth-card .form-control[readonly] {
  background-color: #F7F8F4;
  color: var(--ink-muted);
  cursor: default;
}

/* Reveal control on the password fields. It is positioned against .auth-control,
   which wraps the input alone: anchoring it to the field instead moves it down the
   moment a validation message appears underneath. */
.auth-control { position: relative; }

.auth-control .form-control { padding-right: 52px; }

.auth-reveal {
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--ink-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
}
.auth-reveal:hover { color: var(--ink); background-color: var(--brand-tint); }
.auth-reveal:focus {
  outline: none !important;
  color: var(--ink);
  box-shadow: 0 0 0 3px rgba(164, 214, 94, .45);
}

/* ---- buttons ---- */

.auth-btn {
  display: inline-block;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.auth-btn:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(164, 214, 94, .55);
}

/* Dark label on the green fill. White on this green is about 1.7:1. */
.auth-btn--primary {
  background-color: var(--brand);
  color: var(--ink);
}
.auth-btn--primary:hover,
.auth-btn--primary:focus {
  background-color: var(--brand-mid);
  color: var(--ink);
}
.auth-btn--primary:active { background-color: #85B845; }

.auth-btn--ghost {
  background-color: var(--surface);
  border-color: var(--rule-firm);
  color: var(--ink);
}
.auth-btn--ghost:hover,
.auth-btn--ghost:focus {
  background-color: #F4F6F0;
  border-color: var(--ink-faint);
  color: var(--ink);
}

.auth-btn--block { display: block; width: 100%; }

.auth-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.auth-actions--center { justify-content: center; }

/* ---- links ---- */

.auth-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-dark);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.auth-link:hover,
.auth-link:focus { color: #2E4A11; text-decoration: underline !important; }
.auth-link:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(164, 214, 94, .45);
  border-radius: 3px;
}

.auth-foot {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  color: var(--ink-muted);
  text-align: center;
}

/* ---- messages ---- */

.auth-alert {
  background-color: var(--danger-tint);
  border: 1px solid var(--danger-rule);
  border-left: 3px solid var(--danger);
  border-radius: 8px;
  padding: 13px 15px;
  margin-bottom: 22px;
  color: #7A1A14;
  font-size: 15px;
}
.auth-alert strong { display: block; margin-bottom: 3px; color: var(--danger); }
.auth-alert ul { margin: 0; padding-left: 18px; }
.auth-alert p:last-child { margin-bottom: 0; }

.auth-card .field-validation-error,
.auth-card .text-danger {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--danger);
}

.auth-card .input-validation-error {
  border-color: var(--danger);
  background-color: #FFFCFC;
}
.auth-card .input-validation-error:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .22);
}

/* The validation tag helper marks the summary "errors" or "valid"; only the first
   should look like anything, otherwise an empty red box sits above every clean form. */
.auth-card .validation-summary-valid { display: none; }

.auth-card .validation-summary-errors,
.auth-card .alert-danger {
  background-color: var(--danger-tint);
  border: 1px solid var(--danger-rule);
  border-left: 3px solid var(--danger);
  border-radius: 8px;
  padding: 13px 16px;
  margin-bottom: 22px;
  color: #7A1A14;
  font-size: 15px;
  text-align: left;
}
.auth-card .validation-summary-errors ul,
.auth-card .alert-danger ul { margin: 0; padding-left: 18px; }
.auth-card .validation-summary-errors li,
.auth-card .alert-danger li { margin: 2px 0; }
.auth-card .alert-danger > strong { display: block; margin-bottom: 4px; color: var(--danger); }

/* _ValidationSummary wraps the summary in its own .alert-danger, so without this the
   inner element draws a second box inside the first. */
.auth-card .alert-danger .validation-summary-errors {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

/* ---- outcome pages: confirmations and errors ---- */

.auth-card--status { text-align: center; }

.auth-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background-color: var(--brand-tint);
  border: 1px solid var(--brand);
  color: var(--brand-dark);
  font-size: 24px;
  line-height: 54px;
}
.auth-mark--bad {
  background-color: var(--danger-tint);
  border-color: var(--danger-rule);
  color: var(--danger);
}

.auth-card--status .auth-title::after { margin-left: auto; margin-right: auto; }

.auth-body {
  font-size: 16px;
  color: var(--ink-muted);
  line-height: 1.6;
  margin: 18px 0 0;
}
.auth-body a { font-weight: 600; color: var(--brand-dark); }
.auth-body a:hover { text-decoration: underline !important; }

/* A short list of reasons on an outcome page. Left aligned inside a centred card,
   because a bulleted list centred on its own is hard to read. */
.auth-reasons {
  margin: 20px 0 0;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  text-align: left;
}
.auth-reasons ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.6;
}
.auth-reasons li + li { margin-top: 10px; }

.auth-detail {
  background-color: var(--danger-tint);
  border: 1px solid var(--danger-rule);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 22px;
  color: #7A1A14;
  font-size: 15px;
  text-align: left;
  word-break: break-word;
}

/* ---- consent ---- */

.auth-card--consent { max-width: 640px; text-align: left; }

.auth-client {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}
.auth-client img {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border: 1px solid var(--rule);
  object-fit: contain;
  background: var(--surface);
  flex: none;
}

.auth-scopes {
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}
.auth-scopes-head {
  background-color: var(--brand-tint);
  border-bottom: 1px solid var(--rule);
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-dark);
}
.auth-scopes ul { list-style: none; margin: 0; padding: 0; }
.auth-scopes li { padding: 13px 16px; border-bottom: 1px solid var(--rule); }
.auth-scopes li:last-child { border-bottom: 0; }
.auth-scopes label { font-weight: 600; margin: 0; display: block; cursor: pointer; }
.auth-scopes input[type="checkbox"] { margin-right: 9px; }
.auth-scopes .auth-scope-note {
  display: block;
  margin: 5px 0 0 25px;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-muted);
}
.auth-scopes .auth-scope-required {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-faint);
  margin-left: 6px;
}

.auth-remember {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 0;
  font-weight: 600;
  cursor: pointer;
}

/* ---- touch ---- */

/*
  Apple's interface guidelines put the minimum touch target at 44x44pt, and the smaller
  iPhones are the case that matters: the inputs and buttons already clear it, but a link
  sitting in a line of text is only as tall as its text.

  The padding grows the hit area and the equal negative margin takes the space back, so
  nothing moves. Keyed on pointer: coarse rather than on width, because it is the input
  device that decides this, not the size of the window.
*/
@media (pointer: coarse) {
  /* Items inside an open dropdown, which are shorter than the bar's own links. */
  .navbar.contour-bar .dropdown-menu > li > a { padding: 12px 14px; }

  .auth-link,
  .auth-body a {
    display: inline-block;
    padding: 13px 6px;
    margin: -13px -6px;
  }

  /* An inline-block inside a sentence would otherwise sit on the text baseline and
     shift the line it is in. */
  .auth-foot .auth-link,
  .auth-body a { vertical-align: baseline; }
}

/* ---- narrow windows ---- */

@media (max-width: 544px) {
  .auth-shell { padding: 0 0 40px; }
  .auth-card {
    padding: 30px 22px 32px;
    border-radius: 12px;
  }
  .auth-title { font-size: 24px; }
  .auth-actions { flex-direction: column; align-items: stretch; }
  .auth-actions .auth-btn { width: 100%; }
  /* Full width in the stacked layout, so it takes the 44px directly rather than
     borrowing it back with a negative margin as the inline links do. */
  .auth-actions .auth-link { text-align: center; padding: 13px 0; margin: 0; display: block; }

  /* The same growth the pointer: coarse block applies, repeated here so a narrow window
     gets it too and the target does not depend on one media feature being supported. */
  .auth-foot .auth-link,
  .auth-body a {
    display: inline-block;
    padding: 13px 6px;
    margin: -13px -6px;
    vertical-align: baseline;
  }
}