/* Mory — base stylesheet.
   Waves 1–4 of MORY-STYLE-GUIDE.md §15.1 are landed: tokens, typography,
   the §7 component matrix (buttons incl. secondary/danger, inputs incl.
   select/date/checkbox, cards, focus ring), and the §9/§10 surface
   rhythm (review, ingest, daily, readiness, onboarding, account, login,
   marketing home). Wave 5 (toast/modal/tooltip/tabs/table/skeleton)
   waits for a real consumer per the guide.
   Source of truth: MORY-STYLE-GUIDE.md. Keep every value on a token —
   a raw rem or hex outside :root is a regression. */

/* === Webfonts (§4.1) === */
/* Inter is the variable font (single file covers the whole 100–900 axis).
   JetBrains Mono ships per-weight; Stage 0 only needs Regular. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
}

:root {
  /* === Surfaces (§3.1) === */
  --bg-base: #0E1310;
  --bg-surface: #161A14;
  --bg-elevated: #1F231C;
  --bg-overlay: rgba(14, 19, 16, 0.72);

  /* === Ink (§3.1) === */
  --ink-primary: #ECEFE5;
  --ink-secondary: #A3A8A0;
  --ink-tertiary: #6E7269;
  --ink-onaccent: #0E1310;

  /* === Accent (§3.1) === */
  --accent: #84CC16;
  --accent-hover: #95DC1F;
  --accent-pressed: #6FAA10;
  --accent-soft: rgba(132, 204, 22, 0.12);
  /* Focus ring must clear 3:1 against --bg-base (WCAG 1.4.11); a 40%-alpha
     ring blended to ~2.5:1, so keep it at 80%+. */
  --accent-ring: rgba(132, 204, 22, 0.80);

  /* === Grade signals (§3.1) === */
  --grade-again: #F26B5E;
  --grade-hard: #F2B441;
  --grade-good: #46C28A;
  --grade-easy: var(--accent);

  /* === States (§3.1) === */
  --success: #46C28A;
  --error: #F26B5E;
  --warning: #F2B441;
  --info: #6FA8E5;

  /* === Lines (§3.1) === */
  --line-soft: rgba(236, 239, 229, 0.06);
  --line-base: rgba(236, 239, 229, 0.12);
  --line-strong: rgba(236, 239, 229, 0.20);

  /* === Type families (§4.1) === */
  --font-ui:
    "Inter", system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif;
  --font-mono:
    "JetBrains Mono", ui-monospace, "Menlo", "Consolas", monospace;
  --font-display: var(--font-ui);

  /* === Type scale (§4.2) — base 16 px === */
  --text-xs: 0.75rem; /* 12 px */
  --text-sm: 0.875rem; /* 14 px */
  --text-base: 1rem; /* 16 px */
  --text-lg: 1.125rem; /* 18 px */
  --text-xl: 1.375rem; /* 22 px */
  --text-2xl: 1.75rem; /* 28 px */
  --text-3xl: 2.25rem; /* 36 px */
  --text-4xl: 3rem; /* 48 px */

  /* === Weights (§4.3) === */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* === Line heights (§4.3) === */
  --leading-tight: 1.15;
  --leading-snug: 1.30;
  --leading-normal: 1.55;
  --leading-relaxed: 1.70;

  /* === Tracking (§4.3) === */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  /* === Space — 4-pt base (§5.1) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* === Containers (§5.2) === */
  --container-sm: 640px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1200px;

  /* === Icons (§6.2) === */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  /* === Motion (§8.1) === */
  --motion-fast: 80ms;
  --motion-base: 160ms;
  --motion-slow: 240ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* === Stage-0 holdovers, retained per migration table (§15) === */
  --touch-min: 44px;
  --radius: 8px;
}

/* Light mode (§3.2). Only the values that differ from dark are overridden. */
@media (prefers-color-scheme: light) {
  :root {
    --bg-base: #FAFAF6;
    --bg-surface: #FFFFFF;
    --bg-elevated: #FFFFFF;
    --bg-overlay: rgba(26, 28, 24, 0.40);

    --ink-primary: #1A1C18;
    --ink-secondary: #585B54;
    --ink-tertiary: #888B83;
    /* Light accent is dark, so on-accent ink flips light (4.77:1). */
    --ink-onaccent: #FAFAF6;

    /* The bright dark-mode lime (#84CC16) is 1.89:1 on #FAFAF6 — unusable
       as text or focus. Light mode runs the same hue two stops darker:
       #4D7C0F = 4.77:1 on --bg-base, 4.99:1 on --bg-surface. Hover/pressed
       go darker still (dark-on-light affordance direction). */
    --accent: #4D7C0F;
    --accent-hover: #3F6212;
    --accent-pressed: #365314;
    --accent-soft: rgba(77, 124, 15, 0.10);
    --accent-ring: #4D7C0F;

    /* State colors recomputed for AA on #FAFAF6 (all ≥ 5:1 as text). */
    --grade-again: #B93A30;
    --grade-hard: #8A6114;
    --grade-good: #1E7A52;

    --success: #1E7A52;
    --error: #B93A30;
    --warning: #8A6114;
    --info: #2F6EA8;

    --line-soft: rgba(26, 28, 24, 0.06);
    --line-base: rgba(26, 28, 24, 0.12);
    --line-strong: rgba(26, 28, 24, 0.20);
  }
}

/* === Globals === */

* {
  box-sizing: border-box;
}

/* Inter VF supports optical sizing — let the renderer scale glyphs to the
   text size automatically (§4.4). One approach per build; ss03 is skipped. */
html {
  font-optical-sizing: auto;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg-base);
  color: var(--ink-primary);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

/* Inline links default to the accent (§3.3). Both modes' accent/bg
   pairs clear AA (dark 9.5:1, light 4.77:1 — see the light-mode token
   block). Component scopes (.content-body, .beta-banner …) override
   deliberately. */
a {
  color: var(--accent);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--accent-hover);
}

/* Visible focus indicator on every interactive element (§7.12). The #1
   a11y regression is forgetting this, so it lives globally and wins by
   specificity over per-element overrides. */
:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
  border-radius: inherit;
}

/* <main> receives programmatic focus on route change (a11y signal for
   screen readers) — no visible ring for that. */
main:focus {
  outline: none;
}

/* Honour OS reduced-motion preference (§8.3). Opacity transitions stay
   allowed (instant cuts feel jarring even to motion-sensitive users);
   spatial/duration transitions are clamped. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Honour OS reduced-transparency preference (§14.4) — collapse the
   tinted scrim onto an opaque surface. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --bg-overlay: var(--bg-elevated);
  }
}

/* === Components === */
/* Wave 3 — refactored against MORY-STYLE-GUIDE.md §7. Each interactive
   surface gets its full state matrix (default/hover/pressed/focus/disabled);
   the focus ring lives globally above. */

/* Page container with responsive side padding (§5.5).
   < 600 px: --space-4   |   600–960: --space-6   |   ≥ 960: --space-8. */
.page {
  max-width: var(--container-md);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

@media (min-width: 600px) {
  .page {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (min-width: 960px) {
  .page {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

.heading {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.body {
  color: var(--ink-secondary);
}

.error {
  color: var(--error);
  font-family: var(--font-mono);
  background: color-mix(in srgb, var(--error) 12%, transparent);
  padding: var(--space-3);
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
}

.review-header {
  display: flex;
  /* Holds h1 + counter + undo + unsynced at once — must wrap at 360px. */
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.review-progress {
  color: var(--ink-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.card {
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: var(--space-6);
  /* §9.1: --space-6 between the card and the reveal button (or the
     grade row when show_back is true). */
  margin-bottom: var(--space-6);
  min-height: 200px;
}

.card-kind {
  color: var(--ink-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-4);
}

.dev-due {
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.6;
}

.card-front {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  white-space: pre-wrap;
}

.card-back {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-soft);
  font-size: var(--text-base);
  color: var(--ink-primary);
  white-space: pre-wrap;
}

/* "Fix this card" edit/delete affordances below the grade row */
.card-fix-row {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-4);
}

.card-fix-button {
  /* 44px target + ≥4.5:1 ink: this row sits directly under the grade
     row on a phone, and one of its two buttons deletes the card. */
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  background: none;
  border: 0;
  color: var(--ink-secondary);
  cursor: pointer;
  text-decoration: underline;
}

.card-fix-button:hover {
  color: var(--ink-primary);
}

.review-area-row {
  display: flex;
  justify-content: center;
  margin-top: var(--space-3);
}

.review-area-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-secondary);
}

.review-area-select {
  min-height: var(--touch-min);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  border: 1px solid var(--line-base);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--ink-primary);
  max-width: 20rem;
}

.card-editor {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.card-edit-area {
  width: 100%;
  font: inherit;
  padding: var(--space-2);
  border: 1px solid var(--line-base);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--ink-primary);
  resize: vertical;
}

/* Secondary button (§7.1): transparent fill, line-coloured border. */
.reveal {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-5);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  background: transparent;
  color: var(--ink-primary);
  border: 1px solid var(--line-base);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}

.reveal:hover:not(:disabled) {
  border-color: var(--line-strong);
}

.reveal:active:not(:disabled) {
  background-color: var(--line-soft);
  transform: scale(0.98);
}

.reveal:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.grades {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

/* Grade buttons (§9.1): per-grade colour as text + border, transparent
   fill until hover paints with the same hue at 12% alpha. */
.grade {
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-2);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  background: transparent;
  color: var(--ink-primary);
  border: 1px solid currentColor;
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}

.grade-again {
  color: var(--grade-again);
}
.grade-hard {
  color: var(--grade-hard);
}
.grade-good {
  color: var(--grade-good);
}
.grade-easy {
  color: var(--grade-easy);
}

.grade:hover:not(:disabled) {
  background-color: color-mix(in srgb, currentColor 12%, transparent);
}

/* Next-interval preview under each grade label ("10m", "3d") — the
   consequence is part of the control. */
.grade-button__interval {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.grade:active:not(:disabled) {
  background-color: color-mix(in srgb, currentColor 18%, transparent);
  transform: scale(0.98);
}

.grade:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ingest-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* Inputs (§7.2): default/hover/focus/invalid/disabled. */
.ingest-title,
.ingest-text {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: var(--text-base);
  background: var(--bg-surface);
  color: var(--ink-primary);
  border: 1px solid var(--line-base);
  border-radius: var(--radius);
  transition: border-color var(--motion-fast) var(--ease-out);
}

.ingest-text {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  resize: vertical;
  min-height: 240px;
}

.ingest-title:hover:not(:disabled),
.ingest-text:hover:not(:disabled) {
  border-color: var(--line-strong);
}

.ingest-title:focus,
.ingest-text:focus {
  border-color: var(--accent);
}

.ingest-title[aria-invalid="true"],
.ingest-text[aria-invalid="true"] {
  border-color: var(--error);
}

.ingest-title:disabled,
.ingest-text:disabled {
  background: var(--bg-base);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Truncation notice: warning-toned block, continue action beneath. */
.ingest-notice {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  border-left: 3px solid var(--warning);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* Primary button (§7.1): accent fill, ink-onaccent text. */
.button-primary {
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-5);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  background: var(--accent);
  color: var(--ink-onaccent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}

.button-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.button-primary:active:not(:disabled) {
  background: var(--accent-pressed);
  border-color: var(--accent-pressed);
  transform: scale(0.98);
}

.button-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.helper {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--text-sm);
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-4);
}

/* ===========================================================================
   App header — global brand bar at the top of every route.
   See shell.rs and styles::APP_HEADER_*.
   =========================================================================== */

/* Sticky bar carrying the wordmark on every page. Sits above scrolling
   page content (z=10) but below the drawer trigger (z=20), overlay (z=30)
   and panel (z=40), so the hamburger stays visible over it and the drawer
   still slides over the top. The wordmark is centred, so it never collides
   with the fixed trigger pinned to the bar's left edge. */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--space-16);
  padding: var(--space-3) var(--space-16);
  background: var(--bg-base);
  border-bottom: 1px solid var(--line-soft);
}

.app-header__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.app-header__wordmark {
  display: block;
  height: 24px;
  width: auto;
}

/* ===========================================================================
   Drawer — slide-in utility tray (left edge).
   See components/drawer.rs and styles::DRAWER_*.
   =========================================================================== */

/* Hamburger trigger pinned top-left of the viewport on every page. The
   button sits above page content (z=20) but below the drawer panel (z=40)
   and overlay (z=30), so opening the drawer hides it visually under the
   panel without needing to toggle display. */
.drawer-trigger {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 20;
  width: var(--touch-min);
  height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--ink-primary);
  border: 1px solid var(--line-base);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}

.drawer-trigger:hover {
  background-color: var(--line-soft);
  border-color: var(--line-strong);
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--bg-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base) var(--ease-out);
}

.drawer-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

/* Closed state: panel is translated off-screen to the left. The
   transition runs in both directions so the slide-out animation plays
   when the user closes the drawer. */
.drawer-panel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  height: 100%;
  width: min(320px, 88vw);
  background: var(--bg-surface);
  border-right: 1px solid var(--line-base);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--motion-slow) var(--ease-in-out);
}

.drawer-panel--open {
  transform: translateX(0);
}

.drawer__header {
  padding: var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--line-soft);
}

.drawer__header-link {
  display: inline-flex;
  text-decoration: none;
  /* Tap target — matches the trigger so muscle memory carries across. */
  min-height: var(--touch-min);
  align-items: center;
}

.drawer__header-wordmark {
  display: block;
  height: 24px;
  width: auto;
}

.drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-3) 0;
}

.drawer__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-5);
  border-top: 1px solid var(--line-soft);
}

.drawer__footer-link {
  color: var(--ink-secondary);
  font-size: var(--text-sm);
  text-decoration: none;
  padding: var(--space-2) 0;
  transition: color var(--motion-fast) var(--ease-out);
}

.drawer__footer-link:hover {
  color: var(--ink-primary);
}

/* ===========================================================================
   Markdown body — rendered prose for /about, /privacy, /api, etc.
   =========================================================================== */

.markdown-page__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-6);
}

.content-body {
  color: var(--ink-primary);
  line-height: var(--leading-relaxed);
}

.content-body h1,
.content-body h2,
.content-body h3,
.content-body h4 {
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-8) 0 var(--space-3);
  line-height: var(--leading-snug);
}

.content-body h1 { font-size: var(--text-2xl); }
.content-body h2 { font-size: var(--text-xl); }
.content-body h3 { font-size: var(--text-lg); }
.content-body h4 {
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-secondary);
}

.content-body p,
.content-body ul,
.content-body ol,
.content-body blockquote {
  margin: 0 0 var(--space-4);
}

.content-body ul,
.content-body ol {
  padding-left: var(--space-6);
}

.content-body li + li {
  margin-top: var(--space-2);
}

.content-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.content-body a:hover {
  color: var(--accent-hover);
}

.content-body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 0.05em 0.35em;
}

.content-body pre {
  background: var(--bg-elevated);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  margin: 0 0 var(--space-4);
}

.content-body pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.content-body blockquote {
  border-left: 2px solid var(--line-strong);
  padding-left: var(--space-4);
  color: var(--ink-secondary);
}

.content-body hr {
  border: 0;
  border-top: 1px solid var(--line-soft);
  margin: var(--space-8) 0;
}

.markdown-table-wrap {
  overflow-x: auto;
  margin: 0 0 var(--space-4);
}

.markdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.markdown-table th,
.markdown-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.markdown-table th {
  font-weight: var(--weight-semibold);
  color: var(--ink-primary);
  border-bottom-color: var(--line-base);
  text-align: left;
}

.markdown-table .align-left   { text-align: left; }
.markdown-table .align-center { text-align: center; }
.markdown-table .align-right  { text-align: right; }

/* ===========================================================================
   Contact page — categorical mailto tiles.
   See pages/contact.rs and styles::CONTACT_*.
   =========================================================================== */

.contact-page__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
}

.contact-page__subtitle {
  color: var(--ink-secondary);
  margin: 0 0 var(--space-8);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 600px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--ink-primary);
  transition:
    border-color var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out);
}

.contact-tile:hover {
  border-color: var(--line-strong);
  background-color: var(--bg-elevated);
}

.contact-tile__heading {
  font-weight: var(--weight-semibold);
}

.contact-tile__description {
  font-size: var(--text-sm);
  color: var(--ink-secondary);
}

/* ===========================================================================
   Legal directory page — list of subpages.
   See pages/legal.rs and styles::LEGAL_*.
   =========================================================================== */

.legal-page__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-6);
}

.legal-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.legal-nav__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--ink-primary);
  transition:
    border-color var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out);
}

.legal-nav__item:hover {
  border-color: var(--line-strong);
  background-color: var(--bg-elevated);
}

.legal-nav__label {
  font-weight: var(--weight-semibold);
}

.legal-nav__desc {
  font-size: var(--text-sm);
  color: var(--ink-secondary);
}

/* ===========================================================================
   Button variants — secondary + danger (§7.1) and link-as-button reset.
   Primary is defined above; these complete the §7.1 matrix. The account
   page's hierarchy depends on them: export/logout are secondary, the
   delete confirmation is the ONLY danger button in the app.
   =========================================================================== */

.button-secondary {
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-5);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  background: transparent;
  color: var(--ink-primary);
  border: 1px solid var(--line-base);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}

.button-secondary:hover:not(:disabled) {
  border-color: var(--line-strong);
}

.button-secondary:active:not(:disabled) {
  background-color: var(--line-soft);
  transform: scale(0.98);
}

.button-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button-danger {
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-5);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  background: var(--error);
  color: var(--ink-onaccent);
  border: 1px solid var(--error);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    filter var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}

.button-danger:hover:not(:disabled) {
  filter: brightness(1.08);
}

.button-danger:active:not(:disabled) {
  filter: brightness(0.92);
  transform: scale(0.98);
}

.button-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Links wearing button classes (router <A>) must not look like links:
   center their label, drop the underline, keep the box behaviour. */
a.button-primary,
a.button-secondary,
a.button-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* ===========================================================================
   Eyebrow — uppercase instrument label (§4.3). Sits above headline
   numbers and section openers; the visual cue that a NUMBER follows.
   =========================================================================== */

.eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--ink-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ===========================================================================
   Form controls — select, date, checkbox (§7.2 extension). Native
   controls restyled to the input spec; no JS widgets in v0.
   =========================================================================== */

.onboarding-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 28rem;
  margin-top: var(--space-6);
  align-items: stretch;
}

.onboarding-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Field labels read as quiet instrument captions. */
.onboarding-field > span {
  color: var(--ink-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.onboarding-select,
.onboarding-date {
  min-height: var(--touch-min);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--ink-primary);
  background: var(--bg-surface);
  border: 1px solid var(--line-base);
  border-radius: var(--radius);
  transition: border-color var(--motion-fast) var(--ease-out);
}

/* Chevron affordance on the select (§7.2): inline SVG, ink-secondary
   stroke, 16 px, right-aligned. The stroke color is baked into the
   data URI (CSS vars can't reach it), so each scheme declares its own. */
.onboarding-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A3A8A0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-12);
}

@media (prefers-color-scheme: light) {
  .onboarding-select {
    /* Light --ink-secondary (#585B54) — the dark-scheme grey above is
       near-invisible on the light surface. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23585B54' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}

.onboarding-select:hover,
.onboarding-date:hover {
  border-color: var(--line-strong);
}

.onboarding-select:focus,
.onboarding-date:focus {
  border-color: var(--accent);
}

.onboarding-date {
  font-variant-numeric: tabular-nums;
}

/* Dark-mode native pickers (date spinner, select dropdown) follow the
   app theme instead of defaulting to light chrome. */
:root {
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
  }
}

/* Checkboxes take the accent; the consent row reads as one quiet line. */
input[type="checkbox"] {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
}

.login-consent {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: var(--ink-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  cursor: pointer;
}

.login-consent a {
  color: var(--ink-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.login-consent a:hover {
  color: var(--accent);
}

/* Turnstile widget — reserve the managed-widget height so the form doesn't
   reflow when the iframe paints. */
.turnstile-container {
  min-height: 65px;
}

/* ===========================================================================
   Beta banner — the honesty surface (launch gate). Not an apology box:
   an instrument label. Warning-tinted left rule, uppercase lead-in,
   plain line, link to /methods.
   =========================================================================== */

.beta-banner {
  display: block;
  margin-bottom: var(--space-8);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  border-left: 3px solid var(--warning);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.beta-banner a {
  color: var(--ink-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}

.beta-banner a:hover {
  color: var(--accent);
}

/* ===========================================================================
   Daily surface — the second instrument number ("N items · ~M min").
   =========================================================================== */

.daily-summary {
  margin: var(--space-6) 0 var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

.daily-headline {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}

.daily-session-box {
  width: 100%;
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--line-base);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.daily-session-chips {
  display: flex;
  gap: var(--space-2);
}

.daily-session-chip {
  min-height: var(--touch-min);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line-base);
  border-radius: 999px;
  background: none;
  color: var(--ink-secondary);
  cursor: pointer;
}

.daily-session-chip--active {
  border-color: var(--ink-primary);
  color: var(--ink-primary);
  font-weight: 600;
}

.daily-plan-list {
  width: 100%;
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.daily-plan-action {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

@media (min-width: 600px) {
  .daily-plan-action {
    grid-template-columns: 1fr auto;
  }
}

.daily-plan-action__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--ink-primary);
}

/* ===========================================================================
   Readiness — THE product surface. The headline is set like a cockpit
   readout: eyebrow caption, then a large mono tabular figure. Area
   rows are gauges: mono percentages, hairline tracks, accent fill.
   =========================================================================== */

.readiness-headline {
  margin: 0 0 var(--space-2);
}

/* Instrument cluster under the headline: days to exam · weekly trend. */
.readiness-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}

.readiness-headline__value {
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.readiness-evidence {
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}

.readiness-evidence__item {
  margin: 0;
  padding: var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.readiness-evidence__item dt {
  margin: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-secondary);
}

.readiness-evidence__item dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-primary);
}

.readiness-actions {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.readiness-actions .eyebrow {
  margin-bottom: var(--space-3);
}

.readiness-actions ul {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--ink-secondary);
}

.readiness-actions li + li {
  margin-top: var(--space-2);
}

.readiness-areas-heading {
  margin: var(--space-12) 0 var(--space-4);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-secondary);
}

.readiness-area-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.readiness-area {
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.readiness-area__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.readiness-area__top span:first-child {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.readiness-area__top span:last-child {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-primary);
}

.readiness-bar-track {
  position: relative;
  /* 8px, not 4: the uncertainty band behind the fill is honest work —
     at 4px it read as a smudge and the margin math went to waste. */
  height: 8px;
  border-radius: 4px;
  background: var(--line-base);
  overflow: hidden;
}

.readiness-bar-fill {
  position: relative;
  z-index: 2;
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
  transition: width var(--motion-slow) var(--ease-out);
}

.readiness-bar-band {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 32%, transparent);
}

/* At-risk threshold reference tick (left set inline from the Rust
   constant so copy, tick, and inventory can't drift apart). */
.readiness-bar-threshold {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ink-tertiary);
}

.readiness-area .helper {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-secondary);
}

.readiness-unmapped {
  margin-top: var(--space-8);
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px dashed var(--line-base);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.readiness-unmapped .body {
  margin: 0;
  font-size: var(--text-sm);
}

.readiness-scenarios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.readiness-scenario {
  flex: 1 1 14rem;
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--line-base);
  border-radius: var(--radius);
}

.readiness-scenario-label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-secondary);
}

.readiness-scenario .helper {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
}

.readiness-import-strip {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--line-base);
  border-radius: var(--radius);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
}

.readiness-import-strip-dismiss {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--ink-secondary);
  font-size: var(--text-sm);
  text-decoration: underline;
}

.readiness-mapping-progress {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: 1px dashed var(--line-base);
  border-radius: var(--radius);
}

.readiness-mapping-progress .body,
.readiness-mapping-progress .helper {
  margin: 0;
  font-size: var(--text-sm);
}

.readiness-trajectory {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.readiness-trajectory li {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-secondary);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line-soft);
}

.readiness-trajectory li:last-child {
  border-bottom: 0;
  color: var(--ink-primary);
}

/* Projected companion number under the headline */
.readiness-projected {
  font-size: var(--text-sm);
  color: var(--ink-secondary);
  margin: var(--space-1) 0 0;
}

/* Per-area review-vs-cover diagnosis line */
.readiness-area-diagnosis {
  font-size: var(--text-sm);
  color: var(--ink-secondary);
  margin: var(--space-1) 0 0;
}

/* Below-threshold at-risk inventory */
.readiness-at-risk {
  margin-top: var(--space-8);
}

.readiness-at-risk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.readiness-at-risk-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  font-variant-numeric: tabular-nums;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line-soft);
}

.readiness-at-risk-item:last-child {
  border-bottom: 0;
}

.readiness-at-risk-link {
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* Stop-today decay curve + inline sparklines */
.readiness-decay {
  margin-top: var(--space-8);
}

.readiness-spark {
  display: block;
  width: 100%;
  height: 3rem;
  color: var(--ink-primary);
  margin: var(--space-2) 0;
}

/* Predicted-vs-actual calibration scatter */
.readiness-calibration {
  margin-top: var(--space-8);
}

.readiness-scatter {
  display: block;
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 1 / 1;
  margin: var(--space-2) 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.readiness-scatter-diagonal {
  stroke: var(--line-base);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.readiness-scatter-mock {
  fill: var(--ink-secondary);
}

.readiness-scatter-real {
  fill: var(--accent, var(--ink-primary));
}

/* Floor-vs-projected trajectory: the projected ("keep reviewing") curve */
.readiness-spark-projected {
  stroke: var(--accent, var(--ink-primary));
}

/* Two-item legend under the trajectory chart */
.readiness-legend {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-secondary);
}

.readiness-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.readiness-legend__swatch--floor,
.readiness-legend__swatch--projected {
  display: inline-block;
  width: 1rem;
  height: 0;
  border-top-width: 2px;
  border-top-style: solid;
}

.readiness-legend__swatch--floor {
  border-top-color: var(--ink-primary);
}

.readiness-legend__swatch--projected {
  border-top-color: var(--accent, var(--ink-primary));
}

/* Biggest-movers panel: where the next reviews move the headline most */
.readiness-movers {
  margin-top: var(--space-8);
}

.readiness-movers-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.readiness-movers-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-variant-numeric: tabular-nums;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line-soft);
}

.readiness-movers-item:last-child {
  border-bottom: 0;
}

.readiness-movers-item__area {
  flex: 1 1 auto;
}

.readiness-movers-badge {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  color: var(--ink-secondary);
  white-space: nowrap;
}

.readiness-movers-gain {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--accent, var(--ink-primary));
  white-space: nowrap;
}

/* ===========================================================================
   Import page (§7.2 file input + outcome summary as a quiet table).
   =========================================================================== */

.import-picker {
  display: block;
  margin: var(--space-6) 0;
}

.import-file-input {
  font: inherit;
  color: var(--ink-secondary);
  font-size: var(--text-sm);
  width: 100%;
  padding: var(--space-6);
  background: var(--bg-surface);
  border: 1px dashed var(--line-base);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-out);
}

.import-file-input:hover:not(:disabled) {
  border-color: var(--line-strong);
}

.import-file-input:disabled {
  opacity: 0.6;
  cursor: progress;
}

.import-file-input::file-selector-button {
  margin-right: var(--space-4);
  min-height: 36px;
  padding: var(--space-2) var(--space-4);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink-primary);
  background: transparent;
  border: 1px solid var(--line-base);
  border-radius: var(--radius);
  cursor: pointer;
}

.import-result {
  margin-top: var(--space-6);
}

.import-summary-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.import-summary-list li {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-secondary);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line-soft);
}

.import-summary-list li:first-child {
  color: var(--ink-primary);
}

/* ===========================================================================
   Account page — clear hierarchy: identity, routine actions
   (secondary), then a visibly separated danger zone.
   =========================================================================== */

.account-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  margin-top: var(--space-6);
}

.account-section > .body {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-primary);
}

.account-danger {
  margin-top: var(--space-12);
  padding: var(--space-4);
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--error) 35%, transparent);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.account-danger .helper {
  color: var(--ink-secondary);
}

/* ===========================================================================
   Marketing home (§10) — hero on the §4.2 scale, mono-numbered steps,
   candid FAQ. The Evidence section is absent by design.
   =========================================================================== */

.home-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-16) 0 var(--space-12);
}

@media (min-width: 960px) {
  .home-hero {
    padding-top: var(--space-24);
    padding-bottom: var(--space-16);
  }
}

.home-headline {
  margin: 0;
  font-size: clamp(var(--text-3xl), 6vw, var(--text-4xl));
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  max-width: 18ch;
}

.home-tagline {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--ink-secondary);
  max-width: 44ch;
}

.home-section {
  margin-top: var(--space-12);
  max-width: var(--container-sm);
}

.home-section .body {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Steps: mono accent numerals via CSS counters — the "3 steps, no
   more" list reads like a procedure card, not a bullet dump. */
.home-steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.home-steps li {
  counter-increment: step;
  position: relative;
  padding: var(--space-4) 0 var(--space-4) var(--space-12);
  border-bottom: 1px solid var(--line-soft);
  line-height: var(--leading-normal);
}

.home-steps li:last-child {
  border-bottom: 0;
}

.home-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent);
}

.home-faq {
  margin: 0;
}

.home-faq dt {
  font-weight: var(--weight-semibold);
  margin-top: var(--space-6);
}

.home-faq dd {
  margin: var(--space-2) 0 0;
  color: var(--ink-secondary);
  line-height: var(--leading-normal);
}

/* ===========================================================================
   Drawer primary nav — the five app destinations. Full-width rows at
   body size (the footer's small grey links are for legal/meta only),
   with an accent rail on the active route (aria-current from the
   router).
   =========================================================================== */

.drawer__nav-link {
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-5);
  color: var(--ink-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition:
    background-color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}

.drawer__nav-link:hover {
  background-color: var(--line-soft);
}

.drawer__nav-link[aria-current="page"] {
  border-left-color: var(--accent);
  background-color: var(--accent-soft);
}

/* ===========================================================================
   Utilities — screen-reader-only text + the review keyboard hint.
   =========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Quiet shortcut legend (§14.3). Hidden on coarse pointers — touch
   users have no keys to learn. */
.kbd-hint {
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-secondary);
  text-align: center;
}

@media (pointer: coarse) {
  .kbd-hint {
    display: none;
  }
}

/* Offline review queue indicator (scale-up phase 7) */
.review-pending {
  font-size: var(--text-sm);
  color: var(--warning);
  margin-left: auto;
}

/* Exam countdown + forecast line on the daily surface */
.daily-countdown {
  font-size: var(--text-base, 1rem);
  color: var(--ink-secondary);
  margin: 0;
}

/* "My material" source list */
.material-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.material-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line-soft);
}

.material-item:last-child {
  border-bottom: 0;
}

.material-item-title {
  margin: 0;
  color: var(--ink-primary);
}

/* Undo button in the review header — misgrade recovery deserves a
   full touch target (§7: --touch-min). */
.review-undo {
  min-height: var(--touch-min);
  font-size: var(--text-sm);
  background: none;
  border: 1px solid var(--line-base);
  border-radius: var(--radius);
  color: var(--ink-secondary);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}

.review-undo:hover {
  color: var(--ink-primary);
  border-color: var(--line-strong);
}

/* Inline notice under the review header (undo-too-late etc.) */
.review-notice {
  font-size: var(--text-sm);
  color: var(--ink-secondary);
  margin: 0 0 var(--space-2);
}

/* Session summary on the completion screen */
.review-summary {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-secondary);
  margin: 0 0 var(--space-4);
}

.review-payoff {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--line-base);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.review-payoff-areas {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.review-payoff-forecast {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
}

.account-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}

.outcome-area-scores {
  border: 1px dashed var(--line-base);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin: var(--space-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Outcome capture (readiness, post-exam-date) */
.outcome-section {
  margin-top: var(--space-8);
  padding: var(--space-4);
  border: 1px solid var(--line-base);
  border-radius: var(--radius);
}

.outcome-form form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 24rem;
}

.outcome-thanks {
  font-weight: var(--weight-semibold);
}