/* The sign-in band at the top of the upload page (Stage 3 task 45's card, moved into the top bar
   by task 83, redrawn by task 88: Morgan's "make this look better" and "remove the remediate doc
   stuff on the login page"). Loaded after app.css and built from its tokens by name (--surface,
   --line, --field, --field-line, --text, --muted, --focus, --error and friends), so both colour
   schemes follow app.css. No image, font or import from anywhere: the pages' CSP allows this
   origin only.
   Signed out the page is the band and the footer. The band is a --surface strip under a --line
   edge (a tint apart from the --bg body): the brand mark, "Andronicus" and the tenant pill at
   the left; at the right, from 64 em up, the compact form on one row (Email, Password, Sign in,
   then "Create an account" and "I have an API key" as text links; labels stacked over their
   fields, never placeholders), its error line right under the row and one line under that about
   the tab. Create mode puts Confirm password (and the invite code, closed sign-up only) on a
   second row, by the break element after Password. Hints sit under their fields (the 12 to 128
   rule under Password in create mode only). Under 64 em the form takes its own row under the
   brand; at 40 rem and below one field per line, the submit full width, no horizontal scroll at
   320 px. Signed in the band is one row ending in "Signed in as" (or "Key saved") and its button.
   Contrast (WCAG 2.1 AA, measured in docs/handoffs/backend-engineer.md): labels and the address
   in --text, hints and the help line in --muted, both over 4.5:1 on --surface in both schemes;
   the input border --field-line and the focus ring --focus over 3:1 on --surface and on --field
   (1.4.11); the error line --error on --error-bg as app.css's notice is. Targets: the inputs,
   buttons and links are 2.5 rem (40 px) tall. Nothing here animates beyond app.css's 120 ms
   colour transitions, which its reduced-motion rule shortens. */

.topbar--auth {
  height: auto;
  min-height: 3.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.topbar--auth .topbar__inner {
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  height: auto;
  min-height: 3.5rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  gap: 0.5rem 1.5rem;
}
.band__brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.5rem;
}
.topbar--auth .brand {
  font-size: 1rem;
}
.topbar--auth .keyline {
  min-height: 2.5rem;
}
/* 40 px targets for every control in the band, the small buttons too */
.topbar--auth .btn,
.topbar--auth .input {
  min-height: 2.5rem;
}
.topbar--auth .btn--sm {
  padding: 0 0.75rem;
  font-size: 0.875rem;
}
/* the forms (and the noscript line above them): on their own row under the brand, at the right
   of the band from 64 em up; a column, so the form is as wide as its row and no wider */
.auth {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
@media (min-width: 64em) {
  .auth {
    flex: 1 1 auto;
    align-items: flex-end;
  }
}
/* While GET /v1/config decides which form the band shows, neither is drawn (a moment, same
   origin); without scripts the key form stays visible as before. */
.auth.is-loading {
  display: none;
}
.auth__form {
  display: grid;
  gap: 0;
  min-width: 0;
  max-width: 100%;
}
.auth__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 0.75rem;
  min-width: 0;
}
.auth__row > .field,
.auth__row > .btn,
.auth__row > .auth__switch {
  margin-bottom: 0.5rem;
}
.auth__row > .field {
  flex: 1 1 10rem;
  max-width: 13rem;
  min-width: 0;
}
.auth__row > .field--key {
  flex-basis: 18rem;
  max-width: 26rem;
}
.auth__row > .field > label {
  height: 1.25rem;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  white-space: nowrap;
}
/* the buttons and links start level with the inputs: the label's height above them */
.auth__row > .btn,
.auth__row > .auth__switch {
  flex: none;
  margin-top: 1.5rem;
}
/* create mode: the break after Password, so Confirm password starts the second row */
.auth__break {
  flex: 1 0 100%;
  height: 0;
  margin: 0;
}
/* a hint under its field: the 12 to 128 rule, the invite code's "leave it empty" */
.field__hint {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}
/* the field in error (accessibility review of task 83): its border in --error, over 3:1 on
   --surface and --field; the error line under the row stays, so colour is not the only cue */
.signin .input[aria-invalid="true"] {
  border-color: var(--error);
}
.auth__switch {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  margin: 0;
  font-size: 0.875rem;
}
.auth__switch .btn--link {
  min-height: 2.5rem;
  font-size: inherit;
}
.auth__help {
  max-width: 48rem;
  margin: 0;
  font-size: 0.8125rem;
}
/* without scripts: the line saying so, above the key form */
.auth noscript .auth__help {
  margin-bottom: 0.5rem;
}
.signin__error {
  max-width: 48rem;
  margin: 0 0 0.5rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--error-line);
  border-radius: var(--radius-sm);
  background: var(--error-bg);
  color: var(--error);
}
/* the live region while it carries a sign-in error or a mode switch (announceQuiet): said by
   assistive technology, clipped from view as .sr-only is, since the form shows the same words */
#status.notice--sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
#signin-submit.is-busy {
  cursor: progress;
}
.signin__who {
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
@media (max-width: 40rem) {
  /* one field per line on a phone, the submit full width, the links on their own row */
  .auth__row > .field,
  .auth__row > .field--key {
    flex-basis: 100%;
    max-width: none;
  }
  .auth__row > .btn[type="submit"] {
    flex: 1 1 100%;
    margin-top: 0;
  }
  .auth__row > .auth__switch {
    margin-top: 0;
  }
}