/**
 * Auth Page Styles
 *
 * Shared across all standalone auth pages: signin, forgot-password, reset-password,
 * set-password. Auth pages use complete HTML (no shared header/footer) and import
 * site.css + this file only.
 *
 * Relies on CSS custom properties defined in site.css.
 *
 * Reuses site.css block classes: .wordmark, .form-group, .form-label, .form-input,
 * .btn, .btn--primary, .flash, .form-error-banner.
 *
 * Dark-context form styling (label color, input text/border, placeholder, select
 * chevron) is inherited from site.css via the `.surface--dark` marker class
 * composed on `.auth-card` — the marker remaps the role/control tokens
 * (--text, --field-*, --select-*) that the base .form-* rules consume, and
 * paints the card's raised surface (css-conventions.md § Theming). The
 * Exception rules in this file (input background, focus, aria-invalid border)
 * are the auth-specific deltas on top of that base.
 *
 * Breakpoints: mobile 480px
 */

/**
 * Semi-transparent colors (8-digit hex #RRGGBBAA — see coding-conventions.md):
 *   #ffffeb14  --color-text-light  ~8%   auth card edge highlight on dark surface
 * (The form-input focus ring is now the --focus role token, set in site.css per
 *  context — no longer a literal here.)
 */

/* ==========================================================================
   Layout — Full-page centering
   ========================================================================== */

body {
  background-color: var(--color-bg-dark);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* ==========================================================================
   Auth Card — centered container
   The `surface--dark` marker class (composed in markup) pulls in the
   dark-context form base styles from site.css.
   ========================================================================== */

.auth-card {
  width: 100%;
  max-width: 420px;
  background-color: var(--color-surface-dark);
  border: 1px solid #ffffeb14;
  border-radius: 0.8rem;
  padding: 2.5rem;
}

/* ==========================================================================
   Wordmark — orange brand mark linking to homepage
   Uses .wordmark base class from site.css for font-family/weight/tracking/case.
   ========================================================================== */

.auth-wordmark {
  display: block;
  font-size: var(--font-size-small);
  color: var(--color-primary);
  text-decoration: none;
  text-align: center;
  margin-bottom: 2.4rem;
}

.auth-wordmark:hover {
  color: var(--color-primary-light);
}

.auth-wordmark:focus {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 0.2rem;
}

/* ==========================================================================
   Heading
   ========================================================================== */

.auth-card__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2rem;
}

/* Subheading — optional description line beneath the page title.
   Used on /forgot-password. Reduced top gap (title already has margin-bottom)
   and explicit bottom margin to separate it from the error region below. */
.auth-subheading {
  margin-top: -0.8rem;
  margin-bottom: 1.6rem;
  font-size: var(--font-size-small);
  color: var(--text-muted);
  line-height: 1.5;
}

/* ==========================================================================
   Form — Auth-specific deltas on top of site.css `.surface--dark` base
   ========================================================================== */

/* Input background — auth uses --color-bg-dark (darker than the card surface)
   to create an inset "well" effect. site.css's `.surface--dark .form-input`
   defaults to --color-surface-dark; this override keeps the auth-card-specific
   visual treatment without re-declaring the rest of the dark-context styling. */
.auth-card .form-input {
  background-color: var(--color-bg-dark);
}

/* Focus state on auth inputs.
 *
 * The visible focus ring is the box-shadow (a solid 3px ring in the --focus color,
 * which resolves to the dark-context link orange on this .surface--dark card) plus
 * the orange border-color shift. The transparent outline is intentional —
 * Windows High Contrast Mode discards box-shadow entirely but preserves outline,
 * so this declaration is invisible under normal rendering and forced-visible
 * under HCM. Without it, HCM users have no focus indicator on auth inputs.
 * Mirrors the same pattern in site.css `.form-input:focus`. */
.auth-card .form-input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--focus);
}

/* Error state on dark card */
.auth-card .form-input[aria-invalid="true"] {
  border-color: var(--color-error-dark);
}

/* Submit button — full-width; dark-bg hover matches site.css .section--dark variant.
   Carve-out: the color values below are button chrome — deliberate pairings with the
   orange fill (mirroring the base .btn--primary in site.css), NOT context-resolved
   foreground. They intentionally stay on primitives rather than the --text role token. */
.auth-card .btn--primary {
  width: 100%;
  text-align: center;
}

.auth-card .btn--primary:hover {
  background-color: var(--color-primary-light);
  color: var(--color-text-dark); /* dark ink on the orange hover fill (not theme foreground) */
}

.auth-card .btn--primary:focus {
  /* Cream outline overrides the base's dark-ink one: a dark outline would vanish on the dark card. */
  outline: 3px solid var(--color-text-light);
  outline-offset: 3px;
}

.auth-card .btn--primary:active {
  background-color: var(--color-primary);
}

/* ==========================================================================
   Error Region — uses .form-error-banner from site.css (shared class).
   ========================================================================== */

/* ==========================================================================
   Secondary Link — forgot password, back to sign in
   ========================================================================== */

/* The auth card is the dark Raised surface (--color-surface-dark #44403c). The
   brand orange --color-primary (#ff6a00) is only 3.58:1 on it (fails AA), and
   --color-primary-light (#ff8533) only 4.23:1 — so this link uses a lighter
   orange ramp scoped to the card: #ff9450 rest (4.70:1) brightening to #ffb380
   on hover (5.88:1). The repaint lightened dark Raised (#34312e → #44403c),
   which is what pushed the old values under AA. */
.auth-link-secondary {
  display: block;
  text-align: center;
  margin-top: 1.6rem;
  font-size: var(--font-size-small);
  color: #ff9450;
  text-decoration: underline;
}

.auth-link-secondary:hover {
  color: #ffb380;
}

.auth-link-secondary:focus {
  outline: 3px solid var(--color-primary); /* focus ring: 3.58:1 ≥ 3:1 UI-component minimum */
  outline-offset: 2px;
  border-radius: 0.2rem;
}

.auth-link-secondary:active {
  color: #ff9450;
}

/* ==========================================================================
   MFA Setup — QR code + manual Base32 secret (/mfa/setup)
   Setup-specific (the challenge page has no QR/secret), but kept here because
   all standalone auth pages share this stylesheet. Reuses site.css tokens:
   --font-typewriter (monospace), --color-bg-dark, --color-text-light.
   ========================================================================== */

.mfa-qr {
  margin: 0 0 1.6rem;
  text-align: center;
}

/* The QR is square but rendered server-side at a pixel size that varies with
   the encoded URI length, so it is sized in CSS (not via width/height
   attributes) to a fixed display box. height: auto preserves the square aspect
   ratio and avoids the locked-height distortion noted in coding-conventions.
   The white frame guarantees a light quiet zone so the dark card never bleeds
   into the finder patterns and breaks scanning. */
.mfa-qr__img {
  width: 200px;
  max-width: 100%;
  height: auto;
  background-color: #ffffff;
  padding: 0.8rem;
  border-radius: 0.4rem;
}

.mfa-qr__caption {
  margin-top: 0.8rem;
  font-size: var(--font-size-small);
  color: var(--text-muted);
}

.mfa-qr-fallback {
  margin: 0 0 1.6rem;
  font-size: var(--font-size-small);
  color: var(--text-muted);
  text-align: center;
}

.mfa-manual-label {
  margin: 0 0 0.4rem;
  font-size: var(--font-size-small);
  color: var(--text-muted);
  text-align: center;
}

/* Monospace secret block on a darker inset surface. word-break keeps the
   32-char Base32 string inside the card on narrow viewports. */
.mfa-secret {
  margin: 0 0 2rem;
  padding: 1rem 1.2rem;
  font-family: var(--font-typewriter);
  font-size: var(--font-size-base);
  letter-spacing: 0.15em;
  text-align: center;
  word-break: break-all;
  color: var(--text);
  background-color: var(--color-bg-dark);
  border-radius: 0.4rem;
}

/* ==========================================================================
   Responsive — 480px and below: full-width card
   ========================================================================== */

@media (max-width: 480px) {
  body {
    padding: 0;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .auth-card {
    max-width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: 2rem 1.5rem;
  }
}