/* ============================================================================
 * SHELL·SIGNIN (1130) — the shell the sign-in / sign-up screen sits in
 * ============================================================================
 * EXTRACTION, NOT A REDESIGN (brief 571, redo of wave-1 row 497 LOST on master
 * per REPORT-543 §1). The chosen design is the code that ships today: four
 * top-level rules (.auth-screen · .auth-form · .auth-foot · .auth-text-link)
 * plus three descendant compounds (.auth-screen .step-heading · .auth-screen
 * .step-heading .punc · .auth-text-link:hover) copied byte-for-byte out of
 * web/css/app.css (lines 1033–1177 at seed 913fc500). The class stem is
 * UNCHANGED — `auth` was already unique among the cards (grep 2026-09-25:
 * no other card claims it), so the app's DOM and the moved CSS carry the same
 * names.
 *
 * ONE CHASSIS, THREE SCREENS. The card owns the visual shell the auth flow
 * sits inside (web/js/views/auth.js — email step, then the 6-digit code step
 * per D-781), AND the same chassis is reused by two adjacent shell surfaces:
 *   · web/js/views/access_gate.js — the closed-beta /access-gate view
 *   · web/js/views/invite.js     — the invite-acceptance screen
 * Three emitters, one stylesheet. Moving the rules does NOT change the cascade
 * because the destination file links globally, the rules are byte-identical,
 * and the seven app.css rules they came from are deleted behind them.
 *
 * STATUS KEPT AS `todo` (Lane A). Card-mirror check 16's ENFORCED allowlist at
 * scripts/git-hooks/checks/_card-mirror.js:55 is `['draft', 'draft-final',
 * 'locked']` — a `todo` row is NOT iterated by check 16, so the HOST-CONTEXT
 * and WB-missing gates do not fire for this card. The WB page (`wb: null`) is
 * owed separately (D-736). Until that work happens the card-mirror row stands
 * for ownership only — the same convention card 1003 SHARED·EXTENT rides on.
 *
 * REVERSE-PORT DECLARATION. If this card ever moves status from `todo` to
 * `draft` (the pre-build checkpoint), this file MUST be linked from
 * web/index.html AND the seven app.css rules MUST stay deleted — the row's
 * `css` field IS the single source for the prefix, and a duplicate in
 * app.css would silently double-fire selectors on the auth screens and is the
 * exact class of defect check 16 exists to prevent.
 *
 * ── TOKEN-EXCEPTION MARKERS, FIVE TOTAL ──────────────────────────────────────
 * Three off-grid px values and two raw size-step font sizes — all preserved
 * byte-for-byte. Bypass mechanism per `_grid-snap.js:117` and
 * `25-type-role-scope.sh:18,35` (`if (line.includes('token-exception'))`).
 *   · `padding: 20px 0;`          .auth-screen            — 20px off 4px grid
 *   · `margin-top: 20px;`         .auth-screen .step-heading — 20px off 4px grid
 *   · `padding-top: 18px;`        .auth-form              — 18px off 4px grid
 *   · auth-foot uses raw size-step 13px — type-role migration owed (D-463)
 *   · auth-text-link uses raw size-step 14px — type-role migration owed (D-463)
 *
 * ── SELF-CONTAINMENT (D-470, D-511) ──────────────────────────────────────────
 * Every element this card renders gets its style explicitly under the card's
 * own root class — zero reliance on page or user-agent defaults. The
 * selectors are scoped under .auth-screen / .auth-form / .auth-foot /
 * .auth-text-link and never bleed past them. The shared chrome the auth
 * screens compose against (.step-heading, .label, .input, .btn, .error, …)
 * is owned by other cards / app.css and stays there.
 * ============================================================================ */

.auth-screen {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 80px);
  min-height: calc(100dvh - 80px);
  padding: 20px 0; /* token-exception */ /* shipped — 20px off the 4px grid (D-511); a ruling owed, not taken */
}

/* auth.js + access_gate.js only (2026-09-23) — the real 401 masthead's wordmark, and a
 * heading that actually carries the app's display face + accent-coloured full stop,
 * matching every other step in the flow these screens are reached from. Scoped under
 * .auth-screen so the shared .step-heading class used by 8 onboarding surfaces is
 * untouched — this is not a global restyle.
 * ⚠️ check 53: .mast-* is single-sourced in masthead.css — the space below the bar is
 * carried by the HEADING's own top margin here, not by touching .mast-bar itself. */
.auth-screen .step-heading { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; margin-top: 20px; /* token-exception */ /* shipped — 20px off the 4px grid (D-511); a ruling owed, not taken */ }
.auth-screen .step-heading .punc { color: var(--accent); }

/* Auth Pattern A — typographic horizon above the input cluster.
 * Inspired by Stripe Checkout's hairline-anchored block. */
.auth-form {
  margin-top: 8px;
  padding-top: 18px; /* token-exception */ /* shipped — 18px off the 4px grid (D-511); a ruling owed, not taken */
  border-top: 1px solid var(--rule);
}

/* Auth footer line — smaller, mute, left-aligned. Replaces the old
 * generic "By continuing you agree…" line which has moved to /access-gate. */
.auth-foot {
  margin-top: 24px;
  font-size: var(--size-13); /* token-exception */ /* shipped — raw --size-13; type-role migration to --text-* is a ruling owed, not taken (D-463) */
  color: var(--ink-600);
  text-align: left;
}

/* Quiet text-link button — used for "Wrong email? Try again." reset.
 * Reads as text, not as a button. Inherits warm-orange focus ring from
 * the global :focus-visible rule. */
.auth-text-link {
  margin-top: 16px;
  background: transparent;
  border: 0;
  padding: 4px 0;
  font-size: var(--size-14); /* token-exception */ /* shipped — raw --size-14; type-role migration to --text-* is a ruling owed, not taken (D-463) */
  font-family: var(--font-body);
  color: var(--ink-600);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.auth-text-link:hover { color: var(--ink); }