/* 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);
  --accent-ring: rgba(132, 204, 22, 0.40);

  /* === 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;
    --ink-onaccent: #0E1310;

    --accent-hover: #76B814;
    --accent-soft: rgba(132, 204, 22, 0.10);
    --accent-ring: rgba(132, 204, 22, 0.45);

    --grade-again: #DC4F44;
    --grade-hard: #C99020;
    --grade-good: #2EA572;

    --success: #2EA572;
    --error: #DC4F44;
    --warning: #C99020;
    --info: #4A8AC8;

    --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). Light mode's accent/bg
   pair is 4.6:1 — borderline AA — so links carry weight ≥ 500 per the
   §3.4 note. 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;
}

/* 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: rgba(242, 107, 94, 0.12);
  padding: var(--space-3);
  border-radius: var(--radius);
  border: 1px solid rgba(242, 107, 94, 0.30);
}

.review-header {
  display: flex;
  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;
}

/* 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);
}

.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;
}

/* 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, line-strong
   stroke, 16 px, right-aligned. */
.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);
}

.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-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);
}

.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;
  height: 4px;
  border-radius: 2px;
  background: var(--line-base);
  overflow: hidden;
}

.readiness-bar-fill {
  position: relative;
  z-index: 2;
  height: 100%;
  border-radius: 2px;
  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: 2px;
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}

.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-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);
}

/* ===========================================================================
   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;
}

/* 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);
}