/* The sign-in page. Deliberately the only screen with no navigation: there is
 * nothing to navigate to until the browser has an account.
 *
 * The page background and the field background named `--bg-app` and
 * `--bg-inset` until AIP-11, and tokens.css defines neither. An undefined
 * custom property is not an error the browser reports: the declaration is
 * dropped, so the page fell through to `html` and the field fell through to
 * the card, and the contrast the tests assert was not the contrast being
 * painted. Both now name the token that reproduces exactly what shipped —
 * giving the field a genuinely sunken tone is a design change, not this one. */

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg-canvas);
  color: var(--text-primary);
  padding: var(--step-4);
}

.signin { width: min(380px, 100%); }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--step-3);
  padding: var(--step-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

/* `display: flex` above outranks the browser's own `[hidden] { display: none }`,
   so the second-factor card would otherwise sit on screen from the first paint,
   asking for a code before anyone has typed a password. */
.card[hidden] { display: none; }

/* The operator's password form and the customer's Clerk widget shared this
 * card, so a descendant selector written for one landed on the other: Clerk's
 * own heading, labels and email field were being painted by the rules below,
 * which is how a dark field ended up inside Clerk's white card and unreadable
 * (AIP-103). These four are the ones with a Clerk counterpart, so they name
 * the form's own children. The customer pages have had their own stylesheet,
 * portal-auth.css, since AIP-656; the child selectors stay so a widget mounted
 * here again cannot repeat it. */
.card > h1 { font-size: 20px; }
.card .sub { color: var(--text-muted); font-size: 13px; margin-top: -6px; }
/* A full tap target, and in the page's ink rather than the link blue. */
.card .sub a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-primary);
}

.card > label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: -6px;
}

.card > input {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  min-height: 44px;
  padding: 10px var(--step-3);
  font: inherit;
  font-size: 14px;
}

/* Ink on paper, inverted: the page keeps to black, white and grey, and the
   focus outline is its one accent. Both tokens flip with the palette, so the
   button is light on the dark theme and dark on the light one. */
.card button.primary {
  margin-top: var(--step-2);
  min-height: 44px;
  padding: 10px var(--step-3);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--text-primary);
  color: var(--bg-canvas);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.card button.primary:disabled { opacity: 0.6; cursor: default; }

.card button.secondary {
  min-height: 44px;
  padding: 10px var(--step-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.card button.secondary:disabled { opacity: 0.6; cursor: default; }

/* Said in words, so no colour is needed to tell a refusal from a sent link. */
.message { min-height: 18px; font-size: 13px; color: var(--text-primary); }
/* Empty, the line still took its min-height and a gap either side in the
   card's flex column: a dead band between Password and Sign in. Out of flow
   it takes neither, and unlike display:none it stays in the accessibility
   tree, so a screen reader still announces the first refusal written into it. */
.message:empty { position: absolute; }

/* The recovery codes. Someone is copying these into a password manager by
   hand, so they get the monospaced face the rest of the platform uses for
   anything transcribed, and select whole rather than by word. */
#codes-list {
  list-style: none;
  display: grid;
  gap: var(--step-1);
  margin: 0;
  padding: var(--step-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 14px;
  user-select: all;
}