/* Login page (/login). Loaded after app.css, which supplies the tokens, .card and buttons this builds on.
   Split out of app.css — see the note at the top of app.css. */

/* ── Login (/login — the one ungated page) ────────────────────────────────── */
/* It loads this same stylesheet as every gated page, so it inherits the tokens, the .card and the
   buttons rather than theming itself. Only the things the app has no equivalent of live here: a
   centred one-column layout (there's no navbar or .wrap to sit inside), a wordmark standing in for
   the navbar, and the labelled field. */
.auth-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5vw, 40px);
}
.auth { width: 100%; max-width: 400px; }
/* The gated pages carry no logo, so the wordmark is just the app's h1 at card scale. The tagline
   under it says what the app *is* — the one thing a signed-out visitor can't find out anywhere
   else, since every other page sits behind the authwall. It's outside the card because the card's
   own .desc explains the sign-in step, not the product. */
.auth-brand {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.auth-tagline {
  margin: 0 0 14px;
  /* 14px/--muted: the same size and colour as the card's .desc, so the two paragraphs read as one
     voice rather than as a caption above a sentence. */
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.auth-field { margin-bottom: 14px; }
.auth-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted2);
}
.auth-field input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-in);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  /* After the `font` shorthand, which resets it. >= 16px or iOS zooms — see the .ingest-row note. */
  font-size: 16px;
}
.auth-field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
/* The code is six characters read back from an email — spaced out and monospaced so a transposed
   digit is easy to spot before submitting. */
.code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.3em;
}
/* Both buttons run the full width of the card: one decision per step, so there's nothing to sit
   beside them. .btn-primary's `flex` basis is inert here — .auth-form isn't a flex container. */
.auth-form .btn-primary,
.auth-form .btn-outline { width: 100%; }
.auth-form button + button { margin-top: 8px; }
/* Guard the `hidden` attribute: login.js swaps the two forms with it, and any display value set
   here would beat the UA's [hidden] rule. Same trap .account-menu[hidden] covers. */
.auth-form[hidden] { display: none; }
.auth-sent { margin: 0 0 16px; font-size: 13px; color: var(--muted2); }
.auth-sent code { color: var(--text); font-size: 13px; }
/* Status line for both steps. Reserves its own height so the card doesn't jump the first time a
   message appears. */
.auth-msg {
  margin: 14px 0 0;
  min-height: 1.2em;
  font-size: 13px;
  color: var(--muted);
}
.auth-msg.error { color: oklch(0.55 0.1 25); }
.auth-foot { margin: 14px 0 0; font-size: 12px; color: var(--muted2); text-align: center; }