/* The sign-in page (ADR 0022). It is served without a session, so it carries its own copy of the few design tokens it needs rather than loading the
 * app's style sheets (ui/tokens.css). Dark, graphite, one star-yellow accent, as the app (ADR 0015). */
@font-face { font-family: "Figtree"; src: url("/fonts/Figtree-Variable.ttf") format("truetype"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("/fonts/Spectral-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --ground: #121315; --surface: #1a1c20; --ink: #f2f1ee; --muted: #9ea0a8; --line2: #464a52; --star: #ffe27a; --bad: #f2745a;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --r: 8px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--ink); font: 16px/1.45 var(--sans); -webkit-text-size-adjust: 100%; min-height: 100vh; }
h1, h2 { font-family: var(--serif); font-weight: 600; margin: 0; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }
[hidden] { display: none !important; }

.signin { max-width: 400px; margin-inline: auto; padding: 48px 16px; display: flex; flex-direction: column; gap: 24px; }
.signin h1 { font-size: 28px; display: flex; align-items: center; gap: 10px; }
.mark { width: 28px; height: 28px; }
.step { display: flex; flex-direction: column; gap: 12px; }
.step h2 { font-size: 21px; }
.muted { color: var(--muted); margin: 0; }
label { font-weight: 600; }
input { min-height: 48px; padding: 0 12px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--surface); font-size: 18px; }
#digits { letter-spacing: 6px; font-variant-numeric: tabular-nums; }
.btn { min-height: 48px; padding: 0 16px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--surface); }
.btn.primary { background: var(--star); border-color: var(--star); color: var(--ground); font-weight: 600; }
.btn:disabled { opacity: .6; }
.link { background: none; border: 0; padding: 0; color: var(--star); text-decoration: underline; min-height: 44px; }
.say { min-height: 1.45em; margin: 0; color: var(--bad); }
.credit { margin-top: 24px; font-size: 13px; }