/* =============================================================
   auth.css — Tier 1B (dark-canvas) auth surfaces.

   Loaded only on unauthenticated routes: login, login_setup,
   login_2fa, login_set_password, login_setup_sent. Scoped under
   `body.auth-shell` so it never leaks into Tier 2 pages.

   Audit overrides applied to the auth surface:
     - Body font is Figtree (Plus Jakarta is the Tier 2 family; auth
       gets its own override per the audit). JetBrains Mono is used
       only on labels and meta strings.
     - All colors come from the --t2-* tokens declared globally in
       tier2.css. No hardcoded hex on this surface.
     - No box-shadow on the card or any auth surface — the card uses
       a 1px subtle-gray rule border for separation instead.
     - No border-radius above 2px anywhere on this surface.

   Spec source of truth: /design-system/MASTER.md § Tier 1B (with the
   audit overrides above).
   Preview reference:    /design-system/previews/login.html.
   ============================================================= */

body.auth-shell {
  /* Body becomes a flex column with a fixed dark backdrop and a
     centered card area between topbar and footer. */
  margin: 0;
  font-family: "Figtree", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--t2-charcoal);
  background: var(--t2-dark-base);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* The procedural backdrop. Sits behind everything; aria-hidden. */
body.auth-shell #auth-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  display: block;
  background: var(--t2-dark-base);
}

/* Visually-hidden helper for screen-reader-only h1. */
body.auth-shell .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- TOPBAR ---------- */
body.auth-shell .auth-topbar {
  background: var(--t2-white);
  border-bottom: 1px solid var(--t2-subtle-gray);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.auth-shell .auth-topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--t2-charcoal);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
}
body.auth-shell .auth-topbar .brand:hover { text-decoration: none; }
body.auth-shell .auth-topbar .brand-mark {
  display: inline-block;
  width: 4px; height: 16px;
  background: var(--t2-brand-navy);
  border-radius: 1px;
}
body.auth-shell .auth-topbar .help-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--t2-brand-navy);
  padding: 12px 4px;
  margin: -12px -4px;
  text-decoration: none;
}
body.auth-shell .auth-topbar .help-link:hover { text-decoration: underline; }

/* ---------- MAIN CARD AREA ---------- */
body.auth-shell .auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}
body.auth-shell .auth-card {
  background: var(--t2-white);
  width: 100%;
  max-width: 360px;
  /* Audit: 1px rule border, no shadow, radius capped at 2px. */
  border: 1px solid var(--t2-subtle-gray);
  border-radius: 2px;
  box-shadow: none;
  padding: 36px 36px 30px;
}
body.auth-shell .auth-card--wide { max-width: 440px; }

body.auth-shell .auth-card__logo {
  display: flex;
  justify-content: center;
  margin: 0 0 22px;
}
body.auth-shell .auth-card__logo img {
  width: 100%;
  max-width: 288px;
  height: auto;
  display: block;
}

body.auth-shell .auth-card__step {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--t2-mid-gray);
  margin-bottom: 6px;
}
body.auth-shell .auth-card__title {
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--t2-charcoal);
}
body.auth-shell .auth-card__lede {
  font-size: 13px;
  color: var(--t2-mid-gray);
  margin: 0 0 22px;
  line-height: 1.5;
}

body.auth-shell .auth-flash {
  padding: 8px 12px;
  border: 1px solid var(--t2-status-red-ink);
  background: var(--t2-status-red-bg);
  color: var(--t2-status-red-ink);
  border-radius: 2px;
  font-size: 13px;
  margin-bottom: 14px;
}

body.auth-shell .auth-form { margin: 0; }

/* ---------- FORM PRIMITIVES (auth-scoped twins of t2 .field) ---------- */
body.auth-shell .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
body.auth-shell .field__label {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--t2-charcoal);
}
body.auth-shell .field__hint {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--t2-mid-gray);
  line-height: 1.4;
}
body.auth-shell .field__hint--error { color: var(--t2-status-red-ink); }
body.auth-shell .field__input {
  height: 40px;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  color: var(--t2-charcoal);
  background: var(--t2-white);
  border: 1px solid var(--t2-subtle-gray);
  border-radius: 2px;
  transition: border-color 150ms ease;
  font-family: inherit;
}
body.auth-shell .field__input:hover { border-color: var(--t2-mid-gray); }
body.auth-shell .field__input:focus {
  border-color: var(--t2-brand-navy);
  outline: none;
}

/* ---------- BUTTONS ---------- */
body.auth-shell .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  border-radius: 2px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--t2-charcoal);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease;
  font-family: inherit;
}
body.auth-shell a.btn:hover { text-decoration: none; }
body.auth-shell .btn--primary {
  background: var(--t2-brand-navy);
  color: var(--t2-white);
}
body.auth-shell .btn--primary:hover { background: var(--t2-brand-navy-hover); }
body.auth-shell .btn--secondary {
  background: var(--t2-warm-gray);
  color: var(--t2-charcoal);
}
body.auth-shell .btn--secondary:hover { background: var(--t2-warm-gray-hover); }
body.auth-shell .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- FOCUS RINGS ---------- */
body.auth-shell :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--t2-brand-navy);
  outline-offset: 2px;
}

/* ---------- FOOTER (light text on dark backdrop) ---------- */
body.auth-shell .auth-footer {
  padding: 20px 24px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 22px;
  /* Light-on-dark footer text — anchored to the cream surface token
     so the relationship to the rest of the system stays a single
     source of truth. */
  color: var(--t2-cream);
  font-size: 12px;
}
body.auth-shell .auth-footer__actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
body.auth-shell .auth-footer .footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  background: var(--t2-white);
  color: var(--t2-brand-navy);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  transition: background-color 150ms ease;
}
body.auth-shell .auth-footer .footer-btn:hover {
  background: var(--t2-cream);
  text-decoration: none;
}
body.auth-shell .auth-footer__copy {
  font-size: 11px;
  white-space: nowrap;
}

/* ---------- ROLE PICKER (login.html — native radiogroup) ----------
   Uses real <input type="radio"> inputs inside <label>s so the role
   semantics are correct (role=radio + aria-checked native, arrow-key
   navigation, focus rings). The radio is positioned over the label
   at full size so the entire pill is the click/tap target. */
body.auth-shell .role-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}
body.auth-shell .role-picker > .field__label {
  grid-column: 1 / -1;
  margin-bottom: 0;
  padding: 0;
}
body.auth-shell .role-picker__option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 12px;
  background: var(--t2-warm-gray);
  color: var(--t2-charcoal);
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: background-color 100ms ease, border-color 100ms ease;
}
body.auth-shell .role-picker__option:hover { background: var(--t2-warm-gray-hover); }
body.auth-shell .role-picker__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
body.auth-shell .role-picker__option:has(.role-picker__input:checked) {
  background: var(--t2-brand-navy);
  color: var(--t2-white);
}
body.auth-shell .role-picker__option:has(.role-picker__input:focus-visible) {
  outline: 2px solid var(--t2-brand-navy);
  outline-offset: 2px;
}

/* Password-strength segments (login_set_password). */
body.auth-shell .pw-strength {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin-top: 6px;
}
body.auth-shell .pw-strength__seg {
  height: 3px;
  background: var(--t2-subtle-gray);
  transition: background 160ms ease;
  border-radius: 2px;
}
body.auth-shell .pw-strength__seg.is-on        { background: var(--t2-status-amber-ink); }
body.auth-shell .pw-strength__seg.is-on-strong { background: var(--t2-status-green-ink); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 540px) {
  body.auth-shell .auth-topbar { padding: 12px 16px; }
  body.auth-shell .auth-main   { padding: 32px 16px; }
  body.auth-shell .auth-footer { padding: 16px 16px 20px; flex-direction: column; align-items: stretch; }
  body.auth-shell .auth-footer__actions { width: 100%; }
  body.auth-shell .auth-footer .footer-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.auth-shell *, body.auth-shell *::before, body.auth-shell *::after { transition: none !important; }
}