/* CarRider auth.css — login, MFA enrollment, MFA challenge, parent-consent,
 * and whitelist-bypass screens, plus the home/landing helpers that share
 * the auth-style brand mark and centred-card chrome.
 * Tokens are defined in tokens.css (loaded first via _base.html).
 * Tokens trace to docs/ux/reference/build-spec.md (Final Bell `--fb-*`).
 */

/* ── Centred auth shell ────────────────────────────────────── */
.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fb-s-6);
}

.auth-card {
  background: var(--fb-surface);
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-r-lg);
  padding: var(--fb-s-8) var(--fb-s-8);
  width: 100%;
  max-width: 400px;
  /* Flat-with-hairline only — parity lock-in §3 (no decorative drop). */
}
/* Wider variant for the self-serve profile page — the role + MFA
 * subsection sit comfortably at 480px without the form fields
 * looking cramped. */
.auth-card-wide {
  max-width: 480px;
}
/* Section divider + subhead used by /auth/profile to break the
 * editable form fields from the read-only MFA status block. */
.auth-rule {
  border: 0;
  border-top: 1px solid var(--fb-border);
  margin: var(--fb-s-6) 0 var(--fb-s-4);
}
.auth-subhead {
  font-size: 16px;
  font-weight: 600;
  color: var(--fb-text-input);
  margin: 0 0 var(--fb-s-2);
}
/* Inline secondary copy inside a label — used on /auth/profile to
 * note that the password field is only required when changing email. */
.form-hint-inline {
  font-weight: 400;
  color: var(--fb-text-muted);
  font-size: 12px;
  margin-left: var(--fb-s-2);
}

.auth-card h1 {
  font-size: 28px;
  font-weight: 600;
  color: var(--fb-text-heading);
  margin: 0 0 var(--fb-s-2);
}
/* GLEAM-040: centered helper text variant — e.g. the secret-fallback
 * intro line on mfa_enroll (always follows .qr-block). */
.lede-center {
  text-align: center;
  margin-top: var(--fb-s-3);
}

/* GLEAM-029: recovery/back-link line at the foot of auth cards. */
/* GLEAM-077: switch from --fb-text-muted (~3.1:1 on canvas) to --fb-text
 * (~6.8:1) so non-link prose in .auth-foot (e.g. MFA-reset notice on
 * mfa_challenge.html) passes WCAG 1.4.3 AA for normal text at 13px. */
.auth-foot {
  margin-top: var(--fb-s-4);
  font-size: 13px;
  text-align: center;
  color: var(--fb-text);
}
.auth-foot a {
  display: inline-block;
  min-height: 44px;
  padding: var(--fb-s-3) var(--fb-s-2);
  color: var(--fb-blue-strong); /* GLEAM-126: --fb-blue fails AA on white; --fb-blue-strong ≈4.6:1 */
  line-height: 1.55;
}
/* GLEAM-002: separator and secondary link visual hierarchy on
 * auth_invite_invalid.html (used/expired/invalid variants).
 * Separator is muted so it reads as punctuation; secondary link is
 * demoted to muted text so the primary CTA reads as primary. */
.auth-foot-sep { color: var(--fb-text-muted); margin: 0 var(--fb-s-1); }
/* specificity: 0,1,1 — matches .auth-foot a so cascade order wins (placed after) */
a.auth-foot-secondary { color: var(--fb-text-muted); }
a.auth-foot-secondary:hover { color: var(--fb-text-input); }


/* ── MFA enrollment ────────────────────────────────────────── */
.qr-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: var(--fb-s-4) 0;
}
.qr-block img {
  width: 192px;
  height: 192px;
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-r-md);
}
.secret-fallback {
  font-family: "ui-monospace", "SF Mono", Menlo, monospace;
  font-size: 13px;
  letter-spacing: 1px;
  background: var(--fb-canvas);
  padding: var(--fb-s-3);
  border-radius: var(--fb-r-md);
  color: var(--fb-text-input);
  margin-top: var(--fb-s-3);
  word-break: break-all;
  text-align: center;
}

/* ── Backup codes ───────────────────────────────────────────── */
.backup-codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fb-s-3);
  font-family: "ui-monospace", "SF Mono", Menlo, monospace;
  font-size: 14px;
  background: var(--fb-canvas);
  padding: var(--fb-s-4);
  border-radius: var(--fb-r-md);
  margin: var(--fb-s-4) 0;
}
.backup-warning,
.callout-warn {
  background: var(--fb-warn-bg);
  border: 1px solid var(--fb-warn-border);
  color: var(--fb-warn-fg);
  padding: var(--fb-s-3);
  border-radius: var(--fb-r-md);
  font-size: 13px;
  margin-bottom: var(--fb-s-4);
}

/* ── Home / landing section helpers ─────────────────────────────
 * Used by home.html — the stripped multi-role / zero-cap landing
 * surface rendered ONLY when core.home's smart-redirect cannot
 * resolve a single destination.  Admins, single-role operational
 * staff, and first-login admins with an incomplete setup wizard are
 * 302'd before this template ever renders, so the rules here are
 * narrowly scoped to the picker variant.
 *
 * .section-h2 (the "Your effective capabilities" h2 from the previous
 * landing) was removed in the homepage rebuild — the same rule used
 * to live here.  Reintroduce only with a deliberate cross-template
 * use case; admin_student_bus_assignment carries its own copy.
 */
.section-h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--fb-text-input);
  margin: var(--fb-s-8) 0 var(--fb-s-2);
}

/* Centred picker card (≤ 480px wide per the task design spec). */
.landing-card {
  background: var(--fb-surface);
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-r-lg);
  padding: var(--fb-s-8);
  width: 100%;
  max-width: 480px;
  /* Flat-with-hairline only — parity lock-in §3 (no decorative drop). */
}
.landing-card h1 {
  font-size: 28px;
  font-weight: 600;
  color: var(--fb-text-heading);
  margin: 0 0 var(--fb-s-4);
  text-align: center;
}
.landing-cta-stack {
  display: flex;
  flex-direction: column;
  gap: var(--fb-s-3);
  margin-top: var(--fb-s-5);
}
/* Row variant — for sign-out / account CTAs that sit side-by-side rather
 * than stacked (GLEAM-066: replaces inline style on home.html). */
.landing-cta-stack--row {
  flex-direction: row;
  justify-content: center;
}
/* 64px CTA card per task design spec; primary-button styling, surface
 * label only (no description).
 * GLEAM-010: replaced fixed height:64px + line-height:64px (breaks on wrap)
 * with min-height + inline-flex so multi-line labels stay centred. */
.landing-cta {
  min-height: 64px;
  line-height: 1.2;
  padding: var(--fb-s-3) var(--fb-s-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  width: 100%;
}

/* ── Parent onboarding / consent surface ──────────────────────
 * Net-new family per docs/ux/reference/build-spec.md.  Tokens trace
 * to the austere-flat shell (white surface, hairline border, 6px
 * radius card, 14px body / 28px H1 cadence) so consent copy reads
 * as a calm, legal-document surface — NOT marketing.
 */
.parent-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center; /* GLEAM-011: changed from flex-start → center so parent surfaces anchor consistently with auth-shell */
  justify-content: center;
  padding: var(--fb-s-6); /* GLEAM-019: match auth-shell symmetric padding */
}
.parent-card {
  background: var(--fb-surface);
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-r-card); /* 6px — austere-flat card */
  padding: var(--fb-s-8);
  width: 100%;
  max-width: 720px; /* readable measure for legal copy */
  /* Flat-with-hairline only — parity lock-in §3 (no decorative drop). */
}
.parent-card h1 {
  font-size: 28px;
  font-weight: 600;
  color: var(--fb-text-heading);
  margin: 0 0 var(--fb-s-3);
  /* No display weight on legal copy per build-spec §2.5 */
}
.consent-block {
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-r-md);
  padding: var(--fb-s-5) var(--fb-s-6);
  margin: var(--fb-s-5) 0;
  max-height: 480px;
  overflow-y: auto;
  /* GLEAM-047: scroll-shadow (Lea Verou) — signals scrollable content below */
  background:
    linear-gradient(var(--fb-canvas) 30%, transparent),
    linear-gradient(transparent, var(--fb-canvas) 70%) 0 100%,
    radial-gradient(farthest-side at 50% 0, var(--fb-scroll-shadow), transparent),
    radial-gradient(farthest-side at 50% 100%, var(--fb-scroll-shadow), transparent) 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 24px, 100% 24px, 100% 6px, 100% 6px;
  background-attachment: local, local, scroll, scroll;
  background-color: var(--fb-canvas);
}
.consent-block:focus-visible {
  box-shadow: var(--fb-sh-focus-ring);
  outline: none;
}
.consent-body {
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fb-text);
  white-space: pre-wrap;
  margin: 0;
}
.consent-form { margin-top: var(--fb-s-5); }
.consent-actions {
  display: flex;
  flex-direction: column;
  gap: var(--fb-s-3);
  margin-bottom: var(--fb-s-4);
}
@media (min-width: 540px) {
  .consent-actions {
    flex-direction: row-reverse; /* primary on the right at desktop */
    justify-content: flex-start;
  }
  .consent-actions .btn-block { width: auto; min-width: 180px; }
}
.consent-decline {
  /* Decline is a legitimate choice, not a "secondary scary" button —
     keep it visually equal weight to accept.  Only the colour
     differs to signal default action without minimising the
     decline. */
  color: var(--fb-text-input);
}
.consent-version-tag {
  font-size: 12px;
  color: var(--fb-text-muted);
  margin: var(--fb-s-3) 0 0;
}
.contact-list {
  margin: 0 0 var(--fb-s-5);
  padding-left: var(--fb-s-5);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fb-text);
}
.contact-list li + li { margin-top: var(--fb-s-2); }

/* GLEAM-016: At narrow viewports the inline separator dot orphans on its
 * own line between the two foot links.  Stack links vertically and hide
 * the separator so both touch targets are clean and readable. */
@media (max-width: 540px) {
  .auth-foot {
    display: flex;
    flex-direction: column;
    gap: var(--fb-s-2);
    align-items: center;
  }
  .auth-foot-sep {
    display: none;
  }
}