/* ============================================================
   Auth shell — the signed-out screens (sign in, MFA, password
   reset) share one ground: an aerial base with a cadastral
   overlay, and the form card floating over its quiet side.

   Every colour here resolves from the semantic tokens, so the
   theme toggle in the header works on these screens exactly as
   it does inside the app. Light is not a washed-out dark: it is
   the printed-sheet reading of the same drawing — muted
   photograph, dark linework, white card.
   ============================================================ */

:root {
  /* Scrim: a flat tint that mutes the photograph, then a grade that
     buries the card side so type never lands on busy pixels. */
  --auth-ground: var(--page);
  --auth-tint: rgba(246,248,251,.10);
  --auth-grade: linear-gradient(90deg,
      rgba(244,246,250,.10) 0%, rgba(244,246,250,.40) 32%,
      rgba(244,246,250,.93) 60%, rgba(244,246,250,.99) 100%);
  /* Floor: darkens only where the proposition copy sits, so the rest of the
     photograph stays a photograph. */
  --auth-floor: linear-gradient(180deg,
      rgba(244,246,250,0) 32%, rgba(244,246,250,.62) 72%, rgba(244,246,250,.88) 100%);
  --auth-photo-filter: saturate(.82) brightness(1.02);

  /* Linework has to hold its own against a daylight photograph, so it runs
     heavier here than the dark theme's pale blue over navy. */
  --auth-plan-line: #16205e;
  --auth-plan-line-opacity: .9;
  --auth-plan-weight: 1.8;
  --auth-plan-subject-weight: 3.2;
  --auth-plan-accent: var(--accent-700);
  --auth-plan-fill: rgba(201,162,39,.22);

  /* The card runs OPPOSITE the ground: navy punches out of the daylight
     sheet, white out of the night. */
  --auth-card-bg: rgba(2,9,74,.93);
  --auth-card-line: rgba(255,255,255,.18);
  --auth-card-shadow: 0 24px 64px -16px rgba(2,9,74,.42);
  --auth-card-blur: blur(10px);
  --auth-card-scheme: dark;

  /* The header toggle belongs to the ground, not the card, so it keeps its
     own set — otherwise it inverts along with the card and lands white on a
     white sky. */
  --auth-chip-bg: var(--surface);
  --auth-chip-line: var(--line);
  --auth-chip-ink: var(--text-muted);
  --auth-chip-blur: none;

  --auth-meta: var(--text-muted);
  --auth-pitch-head: var(--brand-950);
  --auth-pitch-body: var(--text-muted);
  --auth-pitch-figure: var(--accent-700);
  --auth-pitch-label: var(--text-subtle);
  --auth-logo-ink: var(--brand-950);
  --auth-logo-shadow: drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 1px 1px rgba(255,255,255,.8));
}

:root[data-theme="dark"] {
  --auth-tint: rgba(7,10,24,.34);
  --auth-grade: linear-gradient(90deg,
      rgba(7,10,24,.06) 0%, rgba(7,10,24,.26) 30%,
      rgba(2,9,74,.84) 60%, rgba(2,9,74,.96) 100%);
  --auth-floor: linear-gradient(180deg,
      rgba(7,10,24,0) 30%, rgba(7,10,24,.64) 74%, rgba(7,10,24,.88) 100%);
  --auth-photo-filter: none;

  /* A brighter photograph needs slightly more line to read over it. */
  --auth-plan-line: #a6dbff;
  --auth-plan-line-opacity: .62;
  --auth-plan-weight: 1.5;
  --auth-plan-subject-weight: 2.4;
  --auth-plan-accent: var(--accent-300);
  --auth-plan-fill: rgba(230,198,90,.16);

  --auth-card-bg: #ffffff;
  --auth-card-line: #e5e7eb;
  --auth-card-shadow: 0 28px 72px -18px rgba(0,0,0,.74);
  --auth-card-blur: none;
  --auth-card-scheme: light;

  --auth-chip-bg: rgba(13,23,100,.72);
  --auth-chip-line: rgba(255,255,255,.16);
  --auth-chip-ink: #a8bcdb;
  --auth-chip-blur: blur(20px);

  --auth-meta: #a8bcdb;
  --auth-pitch-head: #ffffff;
  --auth-pitch-body: #c8d6ea;
  --auth-pitch-figure: var(--accent-300);
  --auth-pitch-label: #a8bcdb;
  --auth-logo-ink: #ffffff;
  --auth-logo-shadow: none;
}

/* No stored preference: follow the OS, same as tokens.css does. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --auth-tint: rgba(7,10,24,.34);
    --auth-grade: linear-gradient(90deg,
        rgba(7,10,24,.06) 0%, rgba(7,10,24,.26) 30%,
        rgba(2,9,74,.84) 60%, rgba(2,9,74,.96) 100%);
    --auth-floor: linear-gradient(180deg,
        rgba(7,10,24,0) 30%, rgba(7,10,24,.64) 74%, rgba(7,10,24,.88) 100%);
    --auth-photo-filter: none;
    --auth-plan-line: #a6dbff;
    --auth-plan-line-opacity: .62;
    --auth-plan-weight: 1.5;
    --auth-plan-subject-weight: 2.4;
    --auth-plan-accent: var(--accent-300);
    --auth-plan-fill: rgba(230,198,90,.16);
  --auth-card-bg: #ffffff;
  --auth-card-line: #e5e7eb;
  --auth-card-shadow: 0 28px 72px -18px rgba(0,0,0,.74);
  --auth-card-blur: none;
  --auth-card-scheme: light;

  --auth-chip-bg: rgba(13,23,100,.72);
  --auth-chip-line: rgba(255,255,255,.16);
  --auth-chip-ink: #a8bcdb;
  --auth-chip-blur: blur(20px);
    --auth-meta: #a8bcdb;
    --auth-pitch-head: #ffffff;
    --auth-pitch-body: #c8d6ea;
    --auth-pitch-figure: var(--accent-300);
    --auth-pitch-label: #a8bcdb;
    --auth-logo-ink: #ffffff;
    --auth-logo-shadow: none;
  }
}

/* ---------- Ground ---------- */

.auth-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--auth-ground);
}

.auth-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--auth-photo-filter);
}

.auth-tint  { position: absolute; inset: 0; background: var(--auth-tint); }
.auth-grade { position: absolute; inset: 0; background: var(--auth-grade); }
.auth-floor { position: absolute; inset: 0; background: var(--auth-floor); }

/* The cadastral overlay tracks the photograph: `slice` crops it the same
   way `object-fit: cover` crops the image beneath, so the linework keeps
   its registration with the aerial at every window size. */
.auth-plan {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.auth-plan .plan-line   { stroke: var(--auth-plan-line); opacity: var(--auth-plan-line-opacity); stroke-width: var(--auth-plan-weight); }
.auth-plan .plan-subject{ stroke: var(--auth-plan-accent); fill: var(--auth-plan-fill); stroke-width: var(--auth-plan-subject-weight); }
.auth-plan .plan-pillar { fill: var(--auth-plan-accent); }
.auth-plan .plan-ring   { stroke: var(--auth-plan-accent); }
.auth-plan .plan-north  { fill: var(--auth-plan-accent); }

/* ---------- Header ---------- */

.auth-top {
  position: absolute; inset-inline: 0; top: 0;
  z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-8);
}
/* The supplied lockup is white artwork; painting it as a MASK rather than an
   image lets it ink navy in light and white in dark from one asset. */
.auth-logo {
  display: block;
  width: 300px;
  aspect-ratio: 700 / 164;
  background: var(--auth-logo-ink);
  filter: var(--auth-logo-shadow);
  -webkit-mask: url('../../images/state-housing-company-logo-white.png') no-repeat center / contain;
  mask: url('../../images/state-housing-company-logo-white.png') no-repeat center / contain;
}
.auth-top-actions { display: flex; align-items: center; gap: var(--space-3); }
.auth-scope {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--auth-meta);
}

/* The toggle has to read on both the photograph and the card side. */
.auth-shell .icon-btn {
  background: var(--auth-chip-bg);
  border-color: var(--auth-chip-line);
  color: var(--auth-chip-ink);
  backdrop-filter: var(--auth-chip-blur);
}
.auth-shell .icon-btn:hover { color: var(--text); }

/* ---------- Form column ---------- */

.auth-main {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
}
.auth-col {
  grid-column: 2;
  display: grid; place-items: center;
  padding: 124px var(--space-8) var(--space-8);
}

/* ---------- Proposition ----------
   The copy the brand panel used to carry, set over the photograph instead of
   beside it. Bottom-aligned so it sits in the floor gradient, never on the
   busy middle of the frame. */
.auth-pitch {
  grid-column: 1; grid-row: 1;
  align-self: end;
  display: flex; flex-direction: column; gap: var(--space-4);
  max-width: 560px;
  padding: 0 var(--space-8) var(--space-9) calc(var(--space-8) + 4px);
}
.auth-pitch h2 {
  margin: 0;
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--auth-pitch-head);
  text-wrap: pretty;
}
.auth-pitch p {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--auth-pitch-body);
  max-width: 440px;
  text-wrap: pretty;
}
.auth-figures { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-7); margin-top: var(--space-2); }
.auth-figures > div { display: flex; flex-direction: column; gap: 3px; }
.auth-figures b {
  font-size: var(--text-2xl); font-weight: 800; line-height: 1;
  color: var(--auth-pitch-figure);
  font-variant-numeric: tabular-nums;
}
.auth-figures span {
  font-size: var(--text-xs);
  color: var(--auth-pitch-label);
  white-space: nowrap;
}
.auth-since {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--auth-pitch-label);
  margin-top: var(--space-2);
}
.auth-col > * { width: 100%; max-width: 416px; }

/* ---------- The card, and what sits inside it ---------- */

.auth-shell .card {
  background: var(--auth-card-bg);
  /* Re-resolve `color` here: text that inherits it (rather than naming a
     token itself) computed it on <body>, against the PAGE's --text, and
     redefining the token below cannot reach back and change that. */
  color: var(--text);
  border-color: var(--auth-card-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--auth-card-shadow);
  backdrop-filter: var(--auth-card-blur);
}

/* The card runs opposite the page theme, so every semantic token its
   contents read from is redefined for the card's subtree. Custom properties
   inherit, so this reaches the views' own inline `var(--shc-*)` styles as
   well — the five auth views need no markup change to follow the flip.
   `color-scheme` comes along so native controls (the select arrow, the
   checkbox) render for the card rather than for the page. */
.auth-shell .card { color-scheme: var(--auth-card-scheme); }

/* Light page → navy card: light ink. */
.auth-shell .card {
  --text: #ffffff;
  --text-muted: #c8d6ea;
  --text-subtle: #a8bcdb;
  --text-brand: var(--accent-300);
  --surface: rgba(255,255,255,.08);
  --surface-hover: rgba(255,255,255,.12);
  --surface-sunken: rgba(255,255,255,.05);
  --line: rgba(255,255,255,.22);
  --line-soft: rgba(255,255,255,.12);
  --line-strong: rgba(255,255,255,.34);
  --crit: #f79b9b; --crit-tx: #f79b9b; --crit-bg: rgba(239,95,95,.16);
  --critical: #f79b9b;
  --shc-50: rgba(255,255,255,.07);
  --shc-100: rgba(255,255,255,.16);
  --shc-700: #dbe4f4;
  --shc-600: var(--accent-300);
  --ink-900: #ffffff; --ink-700: #dbe4f4; --ink-500: #c8d6ea; --ink-400: #a8bcdb;
  --focus-ring: 0 0 0 3px rgba(230,198,90,.35);
}
/* Gold reads on navy where the brand's own blue would vanish into the card. */
.auth-shell .card .btn-primary { background: var(--accent-300); color: var(--brand-950); font-weight: 700; }
.auth-shell .card .btn-primary:hover { background: var(--accent-200); color: var(--brand-950); }

/* Dark page → white card: the app's light palette, restated. */
:root[data-theme="dark"] .auth-shell .card {
  --text: #111827;
  --text-muted: #4b5563;
  --text-subtle: #636b78;
  --text-brand: var(--brand-600);
  --surface: #ffffff;
  --surface-hover: rgba(17,24,39,.035);
  --surface-sunken: #f9fafc;
  --line: #e5e7eb;
  --line-soft: #eef0f3;
  --line-strong: #d1d5db;
  --crit: #d03b3b; --crit-tx: #a02525; --crit-bg: #fbe9e9;
  --critical: #d03b3b;
  --shc-50: #f5f6fb;
  --shc-100: #e6e8f2;
  --shc-700: #02094a;
  --shc-600: var(--brand-600);
  --ink-900: #111827; --ink-700: #374151; --ink-500: #4b5563; --ink-400: #636b78;
  --focus-ring: 0 0 0 3px rgba(2,9,74,.28);
}
:root[data-theme="dark"] .auth-shell .card .btn-primary { background: var(--brand-600); color: #fff; font-weight: 600; }
:root[data-theme="dark"] .auth-shell .card .btn-primary:hover { background: var(--brand-700); color: #fff; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .auth-shell .card {
    --text: #111827;
    --text-muted: #4b5563;
    --text-subtle: #636b78;
    --text-brand: var(--brand-600);
    --surface: #ffffff;
    --surface-hover: rgba(17,24,39,.035);
    --surface-sunken: #f9fafc;
    --line: #e5e7eb;
    --line-soft: #eef0f3;
    --line-strong: #d1d5db;
    --crit: #d03b3b; --crit-tx: #a02525; --crit-bg: #fbe9e9;
    --critical: #d03b3b;
    --shc-50: #f5f6fb;
    --shc-100: #e6e8f2;
    --shc-700: #02094a;
    --shc-600: var(--brand-600);
    --ink-900: #111827; --ink-700: #374151; --ink-500: #4b5563; --ink-400: #636b78;
    --focus-ring: 0 0 0 3px rgba(2,9,74,.28);
  }
  :root:not([data-theme]) .auth-shell .card .btn-primary { background: var(--brand-600); color: #fff; font-weight: 600; }
  :root:not([data-theme]) .auth-shell .card .btn-primary:hover { background: var(--brand-700); color: #fff; }
}

/* ---------- Narrow ---------- */

@media (max-width: 1040px) {
  .auth-main { grid-template-columns: minmax(0, 1fr); }
  .auth-col { grid-column: 1; }
  .auth-pitch { display: none; }
  .auth-floor { display: none; }
  /* The card is centred now, so grade top-to-bottom instead of left-to-right
     or the quiet side ends up nowhere near the form. */
  .auth-grade {
    background: linear-gradient(180deg,
        rgba(244,246,250,.62) 0%, rgba(244,246,250,.93) 34%, rgba(244,246,250,.99) 100%);
  }
  :root[data-theme="dark"] .auth-grade {
    background: linear-gradient(180deg,
        rgba(2,9,74,.42) 0%, rgba(2,9,74,.92) 34%, rgba(2,9,74,.985) 100%);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .auth-grade {
      background: linear-gradient(180deg,
          rgba(2,9,74,.42) 0%, rgba(2,9,74,.92) 34%, rgba(2,9,74,.985) 100%);
    }
  }
}

@media (max-width: 620px) {
  .auth-top { padding: var(--space-4) var(--space-5); }
  .auth-logo { width: 208px; }
  .auth-scope { display: none; }
  .auth-col { padding: 92px var(--space-5) var(--space-6); }
}

@media (prefers-reduced-motion: no-preference) {
  .auth-col > * { animation: auth-rise var(--duration-slow) var(--ease-out) both; }
}
@keyframes auth-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Password and code verification share a dedicated reading surface;
   recovery and enrolment retain their existing shell. */
.auth-login {
  --login-surface: #ffffff;
  --login-ground: #f7f8fa;
  --login-ink: #17253d;
  --login-muted: #5f6b7c;
  --login-line: #dce1e8;
  --login-soft: #f4f6f9;
  --login-accent: #896615;
  --login-grid-line: rgba(35,68,94,.06);
  background: var(--login-ground);
}
:root[data-theme="dark"] .auth-login {
  --login-surface: #132139;
  --login-ground: #081925;
  --login-grid-line: rgba(100,155,186,.07);
  --login-ink: #f1f5fc;
  --login-muted: #aab9cd;
  --login-line: #35445b;
  --login-soft: #1a2a43;
  --login-accent: #e6c65a;
}
.auth-login::before {
  content: ''; position: absolute; inset: 0 0 0 48%; pointer-events: none;
  background-image:
    repeating-linear-gradient(171deg, transparent 0 63px, var(--login-grid-line) 63px 64px),
    repeating-linear-gradient(60deg, transparent 0 81px, var(--login-grid-line) 81px 82px);
}
.login-brand-plate {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 16px; background: #fff; border: 1px solid #ffffff80;
  border-radius: 10px; box-shadow: 0 6px 24px #05142524;
}
/* The supplied lockup includes large transparent margins. Frame its artwork
   inside the plate without changing or regenerating the official asset. */
.auth-login .login-brand-plate .auth-logo {
  width: 238px; aspect-ratio: 3.5; background: #12233f;
  -webkit-mask-size: 200% auto; mask-size: 200% auto;
  -webkit-mask-position: 20% 60%; mask-position: 20% 60%;
}
.auth-login .auth-photo,
.auth-login .auth-tint,
.auth-login .auth-plan,
.auth-login .auth-grade { width: 48%; }
.auth-login .auth-photo { filter: saturate(.65); object-position: 42% center; }
.auth-login .auth-tint { background: rgba(13,31,56,.32); }
.auth-login .auth-grade { background: linear-gradient(180deg, rgba(12,29,52,.2), rgba(12,29,52,.48) 35%, #0c1d34 94%); }
.auth-login .auth-plan { opacity: .34; --auth-plan-line: #c5d6e7; --auth-plan-accent: #e6c65a; }
.auth-login .auth-floor { display: none; }
.auth-login .auth-top { padding: 34px 4%; }
.auth-login .auth-logo { width: 270px; background: #fff; filter: none; }
.auth-login .auth-scope { color: var(--login-muted); font-family: var(--font-sans); letter-spacing: .02em; }
.auth-login .icon-btn { width: 42px; height: 42px; background: var(--login-surface); color: var(--login-muted); border: 1px solid var(--login-line); }
.auth-login .auth-main { grid-template-columns: 48% 52%; min-height: 100svh; }
.auth-login .auth-col { grid-column: 2; padding: 118px 48px 34px; }
.auth-login .auth-col > * { max-width: 464px; }
.auth-login .auth-pitch { display: flex; max-width: 640px; padding: 210px 8.4% 58px; gap: 22px; }
.login-eyebrow { display: block; font-size: 11px; line-height: 1.5; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.auth-login .auth-pitch .login-eyebrow { color: #e6c65a; }
.auth-login .auth-pitch h2 { color: #fff; font-size: clamp(36px, 3.6vw, 58px); font-weight: 650; letter-spacing: -.045em; line-height: 1.12; }
.auth-login .auth-pitch h2 span { color: #e6c65a; }
.auth-login .auth-pitch > p { max-width: 420px; color: #c5d1e0; font-size: 15px; line-height: 1.8; }
.login-capabilities { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 24px 0; margin-top: 10px; border-top: 1px solid #ffffff29; }
.login-capabilities span { display: flex; align-items: center; gap: 8px; color: #d1dbea; font-size: 11px; }
.login-capabilities span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #e6c65a; }
.auth-login .auth-pitch .auth-since { color: #a9bad0; font-size: 11px; margin: 4px 0 0; }
.auth-login .login-card {
  --text: var(--login-ink); --text-muted: var(--login-muted); --text-subtle: var(--login-muted);
  --surface: var(--login-surface); --surface-sunken: var(--login-soft); --surface-hover: var(--login-soft);
  --line: var(--login-line); --line-soft: var(--login-line); --line-strong: var(--login-line);
  --crit: #ad3333; --crit-tx: #ad3333; --critical: #ad3333;
  --text-brand: var(--login-ink); --shc-700: var(--login-ink); --shc-50: var(--login-soft); --shc-100: var(--login-line);
  --focus-ring: 0 0 0 3px rgba(151,126,47,.25);
  color-scheme: light;
  color: var(--login-ink); background: var(--login-surface);
  padding: 36px 38px 26px; border: 1px solid var(--login-line); border-radius: 18px;
  box-shadow: 0 10px 40px -18px #13213925; backdrop-filter: none;
}
:root[data-theme="dark"] .auth-login .login-card { color-scheme: dark; --critical: #ffb4b4; --crit: #ffb4b4; --crit-tx: #ffb4b4; }
.auth-login .login-intro .login-eyebrow { color: var(--login-accent); margin-bottom: 10px; }
.auth-login .login-intro h1 { color: var(--login-ink); font-size: 34px; line-height: 1.2; font-weight: 650; letter-spacing: -.035em; margin: 0; }
.login-description { color: var(--login-muted); font-size: 14px; line-height: 1.7; margin-top: 10px; }
.login-form { display: flex; flex-direction: column; gap: 22px; margin-top: 28px; }
.auth-login .field { gap: 8px; }
.auth-login .field label { font-size: 13px; color: var(--login-ink); font-weight: 600; }
.auth-login .input { min-height: 48px; padding: 12px 14px; border-radius: 8px; border-color: var(--login-line); font-size: 14px; color: var(--login-ink); background: var(--login-surface); }
.auth-login .input::placeholder { color: var(--login-muted); opacity: .85; }
.auth-login .input:focus { border-color: var(--login-accent); }
.login-label-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.login-label-row a { font-size: 12px; font-weight: 600; color: var(--login-ink); }
.login-password { position: relative; }
.auth-login .login-password .input { width: 100%; padding-right: 48px; }
.login-reveal { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--login-muted); cursor: pointer; }
.login-reveal:hover { background: var(--login-soft); color: var(--login-ink); }
.login-trust { display: flex; align-items: center; gap: 10px; min-height: 24px; font-size: 12px; color: var(--login-muted); cursor: pointer; }
.login-trust input { width: 17px; height: 17px; accent-color: #28476c; }
.auth-login .login-card .login-submit { min-height: 49px; justify-content: center; gap: 12px; border-radius: 8px; background: #193858; color: #fff; font-size: 14px; font-weight: 650; box-shadow: none; }
.auth-login .login-card .login-submit:hover { background: #244c74; }
:root[data-theme="dark"] .auth-login .login-card .login-submit { background: #e6c65a; color: #132139; }
:root[data-theme="dark"] .auth-login .login-card .login-submit:hover { background: #f0d77e; }
.login-mfa { display: flex; align-items: center; gap: 12px; padding-bottom: 2px; color: var(--login-muted); }
.login-mfa svg { flex-shrink: 0; color: var(--login-accent); }
.login-mfa strong { display: block; color: var(--login-ink); font-size: 11px; font-weight: 600; }
.login-mfa p { font-size: 11px; line-height: 1.6; margin: 3px 0 0; }
.login-demo { border-top: 1px solid var(--login-line); margin-top: 24px; padding-top: 20px; }
.login-demo-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.login-demo-heading label { font-size: 12px; font-weight: 600; color: var(--login-ink); }
.login-demo-heading span { color: var(--login-muted); background: var(--login-soft); padding: 3px 7px; border-radius: 4px; font-size: 10px; }
.login-demo-controls { display: flex; gap: 8px; }
.auth-login .login-demo .input { min-width: 0; min-height: 40px; padding: 8px 28px 8px 10px; font-size: 12px; background: var(--login-soft); }
.login-demo-controls .btn { color: var(--login-ink); min-height: 40px; border: 1px solid var(--login-line); }
.auth-login .login-demo .help { font-size: 10px; line-height: 1.6; color: var(--login-muted); margin-top: 7px; }
.login-public-links { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 24px; }
.login-public-links a { display: inline-flex; align-items: center; gap: 10px; color: var(--login-ink); font-size: 12px; min-height: 32px; }
.login-public-links > span { width: 1px; height: 14px; background: var(--login-line); }
.login-public-links a span { color: var(--login-muted); }
.login-policy { text-align: center; color: var(--login-muted); font-size: 10px; margin-top: 10px; line-height: 1.7; }
.auth-login a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) and (min-width: 761px) {
  .auth-login .auth-col { padding-inline: 28px; }
  .auth-login .login-card { padding-inline: 26px; }
  .auth-login .auth-pitch { padding-inline: 9%; }
}
@media (max-width: 760px) {
  .auth-login::before { inset: 185px 0 0; }
  .auth-login .login-brand-plate { padding: 8px 10px; border-radius: 8px; }
  .auth-login .login-brand-plate .auth-logo { width: 190px; }
  .auth-login .auth-main { grid-template-columns: minmax(0, 1fr); }
  .auth-login .auth-photo, .auth-login .auth-tint, .auth-login .auth-plan, .auth-login .auth-grade { width: 100%; height: 185px; }
  .auth-login .auth-grade { background: linear-gradient(180deg, #0c1d3480, #0c1d34); }
  .auth-login .auth-top { padding: 23px 24px; }
  .auth-login .auth-logo { width: 220px; }
  .auth-login .auth-scope, .auth-login .auth-pitch { display: none; }
  .auth-login .auth-top .icon-btn { background: #ffffff14; color: #fff; border-color: #ffffff33; }
  .auth-login .auth-col { grid-column: 1; padding: 116px 22px 28px; align-items: start; }
  .auth-login .login-card { padding: 28px 26px 24px; border-radius: 14px; }
  .login-form { gap: 20px; margin-top: 24px; }
  .auth-login .login-intro h1 { color: var(--login-ink); font-size: 30px; }
  .auth-login .input { font-size: 16px; }
  .login-public-links a { min-height: 44px; }
}
@media (max-width: 380px) {
  .auth-login .auth-col { padding-inline: 14px; }
  .auth-login .login-card { padding-inline: 20px; }
  .auth-login .auth-top { padding-inline: 20px; }
  .auth-login .auth-logo { width: 200px; }
  .login-label-row { gap: 8px; }
}

/* Carry the same visual context through the second authentication step. */
.mfa-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; font-size: 10px; color: var(--login-muted); }
.mfa-progress > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mfa-progress [aria-current] { color: var(--login-accent); font-weight: 600; }
.mfa-progress .mfa-progress-line { height: 1px; flex: 1; background: var(--login-line); min-width: 12px; }
.mfa-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 22px; border: 1px solid var(--login-line); border-radius: 14px; background: var(--login-soft); color: var(--login-accent); }
.auth-login .mfa-card .login-intro h1 { font-size: 30px; line-height: 1.2; }
.auth-login .mfa-code { min-height: 64px; text-align: center; font-size: 28px; font-weight: 600; letter-spacing: .42em; text-indent: .42em; font-variant-numeric: tabular-nums; }
.mfa-code-help { font-size: 11px; line-height: 1.6; color: var(--login-muted); }
.mfa-back { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--login-ink); font-size: 12px; font-weight: 500; min-height: 34px; }
.mfa-demo { margin-top: 0; }
.mfa-demo .login-demo-heading strong { color: var(--login-ink); font-size: 12px; font-weight: 600; }
.mfa-demo-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.mfa-demo-code { font-size: 19px; letter-spacing: .15em; color: var(--login-ink); font-variant-numeric: tabular-nums; }
.mfa-demo-action .btn { min-height: 40px; padding: 8px 12px; color: var(--login-ink); border: 1px solid var(--login-line); font-size: 11px; }
.mfa-policy { margin-top: 22px; }
@media (max-width: 1100px) and (min-width: 761px), (max-width: 380px) {
  .mfa-demo-action { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .mfa-progress { margin-bottom: 22px; }
  .mfa-back { min-height: 44px; }
  .mfa-demo-action .btn { min-height: 44px; }
  .mfa-policy-break { display: none; }
}