/* ==========================================================================
   Brain Defenders — shared stylesheet
   Warm cream paper, ochre accent, Spectral + General Sans. Mapped onto
   course-specific components (sidebar, chapter view, tabs, lesson prose,
   podcast, quiz, animation) without changing any JS class contracts.
   ========================================================================== */

/* ── Fonts ────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600&display=swap');

/* ── Design Tokens ────────────────────────────────────────────────────── */
:root {
  /* Paper — warm neutrals tilted ~75° (soft ochre hint) */
  --cream:      oklch(0.985 0.006 75);
  --paper:      oklch(0.975 0.009 75);
  --paper-2:    oklch(0.955 0.012 75);
  --paper-3:    oklch(0.925 0.016 75);
  --paper-4:    oklch(0.885 0.020 75);

  /* Rules — borders in the same warm family */
  --rule:        oklch(0.905 0.014 75);
  --rule-soft:   oklch(0.935 0.010 75);
  --rule-strong: oklch(0.82  0.018 75);

  /* Ink — text colors, four levels of emphasis */
  --ink:        oklch(0.22 0.020 75);
  --ink-soft:   oklch(0.40 0.018 75);
  --ink-mute:   oklch(0.56 0.016 75);
  --ink-faint:  oklch(0.72 0.012 75);
  --ink-invert: oklch(0.985 0.005 75);

  /* Accent — ochre / amber. Used sparingly. */
  --accent:         oklch(0.58 0.142 62);
  --accent-hover:   oklch(0.50 0.155 58);
  --accent-pressed: oklch(0.44 0.160 55);
  --accent-soft:    oklch(0.935 0.048 70);
  --accent-rule:    oklch(0.85 0.085 65);
  --accent-ink:     oklch(0.985 0.010 75);

  /* Signal colors — muted, hue-balanced to the warm palette */
  --success:      oklch(0.54 0.100 155);
  --success-soft: oklch(0.94 0.040 155);
  --warn:         oklch(0.68 0.135 78);
  --warn-soft:    oklch(0.95 0.055 80);
  --danger:       oklch(0.55 0.170 27);
  --danger-soft:  oklch(0.95 0.038 28);

  /* Focus ring — accent-derived */
  --focus-ring: 0 0 0 3px oklch(0.58 0.142 62 / 0.28);

  /* Ink-on-surface overlays */
  --wash-1: oklch(0.22 0.020 75 / 0.04);
  --wash-2: oklch(0.22 0.020 75 / 0.07);
  --wash-3: oklch(0.22 0.020 75 / 0.12);

  /* Type */
  --font-display: 'Spectral', 'Iowan Old Style', 'Palatino', Georgia, serif;
  --font-sans:    'General Sans', ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* Fixed rem type scale — sized for primary audience of physicians 50+.
     Body ≥16px, long-form prose 18px, captions 15px, micro labels 13px. */
  --fs-micro: 0.8125rem;   /* 13 — labels, small caps, meta */
  --fs-0:     0.9375rem;   /* 15 — captions, secondary UI */
  --fs-1:     1rem;        /* 16 — body UI, buttons, nav, table cells */
  --fs-2:     1.125rem;    /* 18 — long-form prose */
  --fs-3:     1.3125rem;   /* 21 */
  --fs-4:     1.6875rem;   /* 27 */
  --fs-5:     2.1875rem;   /* 35 */
  --fs-6:     2.8125rem;   /* 45 */
  --fs-7:     3.75rem;     /* 60 */

  --lh-tight:   1.1;
  --lh-heading: 1.2;
  --lh-snug:    1.4;
  --lh-body:    1.6;
  --lh-prose:   1.72;

  --tracking-tight: -0.015em;
  --tracking-snug:  -0.008em;
  --tracking-base:   0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* Space (4pt) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* Radii — subtle */
  --rad-xs:   3px;
  --rad-sm:   5px;
  --rad-md:   7px;
  --rad-lg:   10px;
  --rad-xl:   14px;
  --rad-2xl:  20px;
  --rad-full: 999px;

  /* Shadow — soft, optical */
  --shadow-xs: 0 1px 1px oklch(0.2 0.02 75 / 0.03);
  --shadow-sm: 0 1px 2px oklch(0.2 0.02 75 / 0.05), 0 1px 1px oklch(0.2 0.02 75 / 0.03);
  --shadow-md: 0 2px 6px oklch(0.2 0.02 75 / 0.06), 0 1px 2px oklch(0.2 0.02 75 / 0.04);
  --shadow-lg: 0 8px 22px oklch(0.2 0.02 75 / 0.08), 0 2px 6px oklch(0.2 0.02 75 / 0.04);
  --shadow-xl: 0 18px 44px oklch(0.2 0.02 75 / 0.12), 0 6px 12px oklch(0.2 0.02 75 / 0.06);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* Layout widths */
  --w-prose:    68ch;
  --w-narrow:   720px;
  --w-default:  1040px;
  --w-wide:     1200px;

  /* Shell */
  --sidebar-w: 300px;
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--cream);
  font-feature-settings: 'ss01', 'cv01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
svg { flex-shrink: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
button:disabled { cursor: not-allowed; opacity: 0.5; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--rule-strong);
}
a:hover { text-decoration-color: var(--accent); }

::selection { background: var(--accent-soft); color: var(--ink); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--rad-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Headings ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
}
h1 { font-size: var(--fs-6); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--fs-5); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--fs-4); }
h4 { font-size: var(--fs-3); font-weight: 600; }
h5 { font-size: var(--fs-2); font-weight: 600; letter-spacing: 0; }
h6 { font-size: var(--fs-1); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-soft); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 12px 20px;
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid var(--rule-strong);
  border-radius: var(--rad-md);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  transition:
    background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
/* `.btn` sets display:inline-flex, which overrides the user-agent
   `[hidden] { display: none }` rule. Restore it so `hidden` actually hides
   buttons (e.g. the Admin button gated on a signed-in admin email). */
.btn[hidden] { display: none; }
.btn:hover { background: var(--paper-2); border-color: var(--ink-mute); text-decoration: none; }
.btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.btn:active:not(:disabled) { transform: translateY(0.5px); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

.btn-primary {
  background: var(--ink);
  color: var(--ink-invert);
  border-color: var(--ink);
}
.btn-primary:hover {
  background: oklch(0.14 0.020 75);
  border-color: oklch(0.14 0.020 75);
  color: var(--ink-invert);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--wash-1); color: var(--ink); border-color: transparent; }

/* ── App shell ────────────────────────────────────────────────────────── */
#app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

#sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  background: var(--cream);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Brand — a quiet serif wordmark, not a gradient tile */
.brand {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--rule);
}
.brand-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--accent);
}
.brand-mark svg { width: 100%; height: 100%; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  line-height: 1.2;
}
.brand-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  color: var(--ink-mute);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* Course Home progress count — appears as "(1 of 13)" next to the
   Course Home title in the sidebar nav, replacing the larger
   progress-summary block that used to live above the module list. */
.nav-title-count {
  color: var(--ink-mute);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}

/* Sidebar nav */
#moduleNav {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-2) 0 var(--sp-5);
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.nav-group-header {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: var(--sp-4) var(--sp-5) 6px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.nav-group-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
  margin-left: var(--sp-2);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px var(--sp-5);
  color: var(--ink-soft);
  cursor: pointer;
  border: 0;
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: background var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              border-left-color var(--dur-1) var(--ease-out);
}
.nav-item:hover { background: var(--wash-1); color: var(--ink); }
.nav-item.active {
  color: var(--ink);
  background: var(--wash-1);
  border-left-color: var(--accent);
}
.nav-item .num {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-3);
  color: var(--ink-mute);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}
.nav-item.active .num { background: var(--ink); color: var(--ink-invert); }
.nav-item.complete .num { background: var(--accent-soft); color: var(--accent-pressed); }
.nav-item > div:last-child { min-width: 0; }
.nav-item .nav-title {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 500;
  line-height: 1.3;
  color: inherit;
}
.nav-item .nav-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  color: var(--ink-mute);
  margin-top: 1px;
}

/* Module section outline — shown under the active module */
.nav-sections {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}
.nav-sections.open {
  max-height: 2000px;
}
.nav-section-item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 5px var(--sp-5) 5px calc(var(--sp-5) + 36px);
  color: var(--ink-mute);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: break-word;
  border-left: 2px solid transparent;
  transition: background var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              border-left-color var(--dur-1) var(--ease-out);
}
.nav-section-item::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-mute);
  flex-shrink: 0;
  margin-top: 1px;
  transition: background var(--dur-1) var(--ease-out);
}
.nav-section-item:hover {
  background: var(--wash-1);
  color: var(--ink);
}
.nav-section-item:hover::before { background: var(--ink); }
.nav-section-item.active {
  color: var(--accent);
  border-left-color: var(--accent);
}
.nav-section-item.active::before { background: var(--accent); }

.sidebar-footer {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
}
.version {
  color: var(--ink-mute);
}
.copyright {
  color: var(--ink-faint);
  letter-spacing: var(--tracking-snug);
}

/* ── Admin telemetry view ───────────────────────────────────────────── */
.admin-view { max-width: var(--w-wide); }
.admin-head { margin-bottom: var(--sp-2); }
.admin-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-5);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0 0 var(--sp-2);
}
.admin-h-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: var(--ink-soft);
}
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-4);
  flex-wrap: wrap;
}
.admin-search {
  flex: 1;
  min-width: 240px;
  padding: 10px 14px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--rad-md);
  font-family: var(--font-sans);
  font-size: var(--fs-1);
}
.admin-search:focus { outline: none; border-color: var(--accent-rule); box-shadow: var(--focus-ring); }
.admin-stats {
  font-size: var(--fs-0);
  color: var(--ink-mute);
  font-family: var(--font-sans);
}
.admin-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
}
.admin-filter-chip {
  padding: 4px 10px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  cursor: pointer;
}
.admin-filter-chip:hover { border-color: var(--accent-rule); color: var(--accent-rule); }
.admin-filter-clear { color: var(--ink-mute); }
.admin-loading, .admin-error {
  padding: var(--sp-6);
  background: var(--paper-2);
  border: 1px dashed var(--rule);
  border-radius: var(--rad-lg);
  color: var(--ink-soft);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-1);
}
.admin-error { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.admin-section {
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: var(--sp-6) 0 var(--sp-3);
}
.admin-table-wrap {
  border: 1px solid var(--rule);
  border-radius: var(--rad-lg);
  overflow: hidden;
  background: var(--paper);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-table thead th {
  text-align: left;
  padding: 10px 14px;
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}
.admin-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
  color: var(--ink);
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--wash-1); }
.admin-table .mono { font-family: var(--font-mono); font-size: var(--fs-micro); }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table code {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--ink-soft);
  background: var(--wash-1);
  padding: 1px 6px;
  border-radius: 4px;
}
.admin-table .muted { color: var(--ink-mute); padding: var(--sp-5); text-align: center; }

/* ── Main column ──────────────────────────────────────────────────────── */
#main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: 60px;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0 var(--sp-6);
  position: sticky;
  top: 0;
  z-index: 10;
}
.crumb {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: var(--ink-soft);
}
.topbar-actions { display: flex; gap: var(--sp-2); align-items: center; }

/* Search button in the topbar + the modal it opens. The button is a
   compact ghost icon that sits to the left of the other topbar
   actions. The modal is keyboard-driven (focuses input on open, Esc
   closes, ↑/↓ to navigate results, Enter to jump). */
.search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: var(--rad-md);
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.search-btn:hover { background: var(--paper-2); color: var(--ink); }
.search-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.search-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0.15 0.02 75 / 0.32);
  backdrop-filter: blur(4px);
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 8vh var(--sp-5) var(--sp-5);
  z-index: 1100;
  animation: fade-in 160ms var(--ease-out);
}
/* The page CSS above wins over the UA stylesheet's [hidden] rule,
   so setting overlay.hidden = true wouldn't actually hide it without
   this. Required for the close button and Escape key to work. */
.search-overlay[hidden] { display: none; }
.search-modal {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--rad-xl);
  box-shadow: var(--shadow-xl);
  width: min(720px, 100%);
  max-height: 75vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.search-input-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--rule);
}
.search-input-icon { color: var(--ink-mute); flex-shrink: 0; }
.search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: var(--ink);
  padding: 6px 0;
  outline: none;
  appearance: none;
}
/* Hide the browser-native clear-X that some browsers render on
   <input type="search"> — we have an explicit close button. */
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.search-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.search-close svg { pointer-events: none; }
.search-close:hover { color: var(--ink); border-color: var(--ink-mute); background: var(--paper-3, var(--paper-2)); }
.search-status {
  font-family: var(--font-sans);
  font-size: var(--fs--1);
  color: var(--ink-mute);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--rule);
}
.search-results {
  overflow-y: auto;
  padding: var(--sp-2);
}
.search-result {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rad-md);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-sans);
  color: var(--ink);
  cursor: pointer;
  margin-bottom: 2px;
}
.search-result:hover,
.search-result-selected {
  background: var(--paper-2);
  border-color: var(--rule);
}
.search-result-label {
  font-size: var(--fs--2);
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.search-result-title {
  font-size: var(--fs-0);
  color: var(--ink);
  font-weight: 600;
  margin: 2px 0 4px;
}
.search-result-snippet {
  font-size: var(--fs--1);
  color: var(--ink-soft);
  line-height: 1.45;
}
.search-result-snippet mark {
  background: oklch(from var(--accent) l c h / 0.28);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}
body.search-open { overflow: hidden; }

/* Brief tint applied to the paragraph the search lands on. Fades
   itself out via CSS transition; JS removes the class after ~2.4s. */
.search-hit {
  background: oklch(from var(--accent) l c h / 0.18);
  border-radius: var(--rad-sm);
  transition: background 1.2s var(--ease-out);
  box-shadow: 0 0 0 4px oklch(from var(--accent) l c h / 0.12);
}

/* Signed-in chip — lives in the topbar-actions, leads with the user's
   avatar, reveals a sign-out menu on click. Kept to a neutral surface so
   it doesn't compete with the Reset Progress / Certificate buttons. */
.auth-chip { position: relative; display: inline-flex; }
.auth-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 10px 4px 4px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--rad-full);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  cursor: pointer;
  line-height: 1;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.auth-chip-btn:hover { background: var(--wash-1); border-color: var(--rule-strong); }
.auth-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-2);
  display: inline-grid;
  place-items: center;
  font-weight: 500;
  color: var(--ink-soft);
}
.auth-avatar-fallback { font-size: 12px; }
.auth-chip-email {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-soft);
}
.auth-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--rad-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 30;
}
.auth-menu-header { padding: 10px 12px 8px; border-bottom: 1px solid var(--rule-soft); margin-bottom: 4px; }
.auth-menu-name { font-weight: 500; color: var(--ink); font-size: var(--fs-1); }
.auth-menu-email { color: var(--ink-mute); font-size: var(--fs-0); margin-top: 2px; }
.auth-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--rad-md);
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: var(--ink);
  cursor: pointer;
}
.auth-menu-item:hover { background: var(--wash-1); }
.auth-menu-item:disabled,
.auth-menu-item[aria-disabled="true"] {
  color: var(--ink-faint);
  cursor: not-allowed;
  background: transparent;
}
.auth-menu-item:disabled:hover { background: transparent; }

/* Offline action — two-line layout: "Download for offline" / "Update
   offline copy" as the primary label, optional "Ready" status chip on
   the right when a complete copy is on disk. */
.auth-menu-item-offline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.auth-menu-item-aux {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-snug);
  color: var(--accent, oklch(0.55 0.15 70));
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 1px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.auth-menu-item-aux[hidden] { display: none; }
.auth-menu-item-offline.is-ready .auth-menu-item-label { font-weight: 500; }

/* Full-viewport sign-in gate. Shown before the app renders when a Google
   Client ID is configured and no session exists. Matches the cream / ochre
   course aesthetic rather than Google's default branded surface. */
body.auth-gating { overflow: hidden; }
body.auth-gating #app { display: none; }
.auth-gate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 20% 10%, oklch(0.935 0.048 70 / 0.55), transparent 55%),
    radial-gradient(circle at 85% 90%, oklch(0.905 0.040 85 / 0.5), transparent 50%),
    var(--cream);
  z-index: 100;
  padding: var(--sp-5);
  padding-top: max(var(--sp-5), env(safe-area-inset-top));
  padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom));
}
.auth-card {
  max-width: 440px;
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--rad-2xl);
  padding: var(--sp-7) var(--sp-6);
  box-shadow: var(--shadow-xl);
  text-align: center;
}
.auth-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--sp-3);
}
.auth-title {
  font-family: var(--font-display);
  font-size: var(--fs-5);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0 0 var(--sp-3);
}
.auth-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin: 0 0 var(--sp-6);
}
.auth-btn-host {
  display: grid;
  place-items: center;
  min-height: 40px;
  margin-bottom: var(--sp-6);
}
.auth-footer {
  font-size: var(--fs-micro);
  color: var(--ink-mute);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.auth-footer .auth-dot { opacity: 0.5; }

/* Hamburger — only visible on narrow viewports (see responsive block). */
.menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rad-md);
  color: var(--ink);
  cursor: pointer;
  margin-left: calc(var(--sp-3) * -1);
  touch-action: manipulation;
}
.menu-btn:hover { background: var(--wash-1); }
.menu-btn svg { width: 22px; height: 22px; }

/* Scrim sits between the drawer and the page; only revealed when the
   sidebar is open on mobile. */
#sidebarScrim {
  position: fixed;
  inset: 0;
  background: oklch(0.2 0.02 75 / 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out);
  z-index: 40;
}
body.sidebar-open #sidebarScrim { opacity: 1; pointer-events: auto; }

.content {
  flex: 1;
  padding: var(--sp-7) var(--sp-6) var(--sp-9);
  container-type: inline-size;
}

/* ── Home (course index) ─────────────────────────────────────────────── */
.home { max-width: var(--w-wide); margin: 0 auto; }

.home-hero {
  padding: var(--sp-5) 0 var(--sp-7);
  max-width: var(--w-narrow);
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.hero-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--accent);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.75rem, 6.2vw, 4.75rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: var(--sp-4) 0 var(--sp-4);
  text-wrap: balance;
}
/* Lean into the MSF hallmark: italic emphasis word in the accent colour.
   Add <em> to the title to trigger it. */
.hero-title em {
  font-style: italic;
  color: var(--accent-pressed);
  font-weight: 500;
}
.hero-sub {
  font-family: var(--font-display);
  font-size: var(--fs-3);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 0 var(--sp-6);
  letter-spacing: var(--tracking-snug);
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-7);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--sp-5);
}
.hero-meta > span {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-meta > span strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-5);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-transform: none;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }

/* Module index — editorial list (not a card grid) */
.home-grid {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule-strong);
  margin-top: var(--sp-5);
}
.module-card {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) minmax(0, 26ch) auto;
  align-items: baseline;
  gap: var(--sp-4) var(--sp-5);
  padding: var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
  transition: background var(--dur-1) var(--ease-out);
  position: relative;
}
.module-card:hover { background: var(--wash-1); text-decoration: none; }
.module-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: transparent;
  transition: background var(--dur-2) var(--ease-out);
}
.module-card:hover::before { background: var(--rule-strong); }
.module-card.complete::before { background: var(--accent); }

.module-card .mc-num {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 5px;
}
.module-card.complete .mc-num { color: var(--accent-pressed); }

.module-card .mc-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-3);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  text-wrap: balance;
}
.module-card .mc-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  line-height: var(--lh-snug);
  color: var(--ink-soft);
}
.module-card .mc-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
}

/* Staggered reveal on first paint */
@keyframes row-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.home-grid .module-card {
  animation: row-in 480ms var(--ease-out) both;
}
.home-grid .module-card:nth-child(1) { animation-delay: 40ms; }
.home-grid .module-card:nth-child(2) { animation-delay: 75ms; }
.home-grid .module-card:nth-child(3) { animation-delay: 105ms; }
.home-grid .module-card:nth-child(4) { animation-delay: 135ms; }
.home-grid .module-card:nth-child(5) { animation-delay: 160ms; }
.home-grid .module-card:nth-child(6) { animation-delay: 180ms; }
.home-grid .module-card:nth-child(n+7) { animation-delay: 200ms; }

/* ── Module view ─────────────────────────────────────────────────────── */
.module-view {
  max-width: var(--w-wide);
  margin: 0 auto;
}

.module-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  padding: var(--sp-3) 0 var(--sp-6);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--sp-6);
}
.module-num {
  flex-shrink: 0;
  width: auto;
  height: auto;
  padding-top: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  background: none;
  border-radius: 0;
  display: block;
  min-width: 72px;
}
.module-num::before {
  content: "Module ";
  color: var(--ink-mute);
}
.module-head > div:last-child { min-width: 0; flex: 1; }
.module-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-6);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
.module-title em { font-style: italic; color: var(--accent-pressed); }
.module-sub {
  font-family: var(--font-display);
  font-size: var(--fs-3);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  max-width: 60ch;
  letter-spacing: var(--tracking-snug);
}
.module-meta {
  margin-top: var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.objective-block {
  padding: var(--sp-4) 0 var(--sp-5);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--sp-6);
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
}
.block-label {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--sp-3);
}
.objectives {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: obj;
  font-family: var(--font-display);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--ink);
}
.objectives li {
  counter-increment: obj;
  padding: 4px 0 4px 40px;
  position: relative;
}
.objectives li::before {
  content: counter(obj, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  color: var(--ink-mute);
  letter-spacing: var(--tracking-caps);
  font-weight: 600;
}

/* Sticky controls bar — Car Mode + tabs stick below the topbar.
   The page scrolls at window level (not inside .content), so
   top: 60px places this flush below the 60px .topbar. */
.module-controls {
  position: sticky;
  top: 60px;
  z-index: 9;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--sp-6);
  margin-inline: calc(-1 * var(--sp-6));
  padding-inline: var(--sp-6);
}
.module-controls .car-cta {
  margin-top: 0;
  padding-top: var(--sp-3);
}
.module-controls .car-cta:not(:has(.car-cta-btn:not([hidden]))) {
  display: none;
}

/* Tabs — MSF-style underline */
.lesson-tabs {
  display: flex;
  gap: var(--sp-5);
  border-bottom: none;
  margin-bottom: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.lesson-tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 14px 2px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: -1px;
  transition: color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out);
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--ink); }

.tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.tab .tab-short { display: none; }

.tab-panels { min-height: 420px; }
.panel { display: none; }
.panel.active { display: block; animation: fade-in 180ms var(--ease-out) both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Lesson body — long-form reading in Spectral ─────────────────────── */
.lesson-body {
  font-family: var(--font-display);
  font-size: var(--fs-2);
  line-height: var(--lh-prose);
  color: var(--ink);
  container-type: inline-size;
}
/* Prose elements are constrained to 68ch for readability. Block-level
   "wide" elements (figures, tables, callouts, platform labs) are left
   to fill the full lesson-body width so SVG figures render closer to
   1:1 with their viewBox — viewBox font-sizes 13–15 then read at
   roughly 16–20 CSS px on desktop, the legibility target for the 50+
   audience. */
.lesson-body > p,
.lesson-body > h1, .lesson-body > h2, .lesson-body > h3, .lesson-body > h4,
.lesson-body > ul, .lesson-body > ol,
.lesson-body > blockquote { max-width: var(--w-prose); }

/* Inline editorial diagrams — hairline card, sans caption beneath. */
.lesson-body .lesson-figure {
  margin: var(--sp-6) 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--rad-md);
}
.lesson-body .lesson-figure svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.lesson-body .lesson-figure figcaption {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: var(--ink-soft);
  line-height: var(--lh-prose);
}
.lesson-body .lesson-figure figcaption strong {
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink);
  margin-right: 8px;
}

/* Glossary deep-dive links — first-occurrence hyperlinks in lesson prose
   that lead to a single-page college-senior explainer (course/glossary/). */
.lesson-body a.glossary-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: help;
}
.lesson-body a.glossary-link:hover {
  color: var(--accent);
  text-decoration-style: solid;
}
.lesson-body .glossary-lede {
  font-size: var(--fs-3);
  line-height: var(--lh-prose);
  color: var(--ink);
}
.lesson-body .glossary-footnote {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-1);
  color: var(--ink-soft);
}
/* Back-to-source pill injected on glossary pages by player.js when the
   reader arrived via a .glossary-link click. Sits above the h2 so the
   return affordance is the first thing visible above the fold. */
.lesson-body .glossary-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 14px 6px 12px;
  margin: 0 0 var(--sp-5);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--rad-full);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: var(--fs--1);
  text-decoration: none;
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.lesson-body .glossary-back:hover {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--ink-mute);
}
.lesson-body .glossary-back svg { color: inherit; flex-shrink: 0; }
/* p5.js dynamic sketches — sit inside lesson-figure, canvas takes full width. */
.lesson-body .lesson-figure .p5-sketch {
  position: relative;
  width: 100%;
  min-height: 120px;
  line-height: 0; /* prevents extra baseline space below canvas */
}
.lesson-body .lesson-figure .p5-sketch canvas {
  display: block;
  width: 100% !important;
  height: auto;
  border-radius: calc(var(--rad-md) - 4px);
}
.lesson-body .lesson-figure .p5-missing {
  padding: 16px;
  color: var(--ink-mute);
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  text-align: center;
  background: var(--rule);
  border-radius: calc(var(--rad-md) - 4px);
}

.lesson-body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-5);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: var(--sp-8) 0 var(--sp-3);
  text-wrap: balance;
}
.lesson-body h2:first-child { margin-top: 0; }
.lesson-body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-4);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  margin: var(--sp-6) 0 var(--sp-3);
}
.lesson-body h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: var(--sp-6) 0 var(--sp-2);
}
.lesson-body p { margin: 0 0 var(--sp-4); }
.lesson-body ul, .lesson-body ol { padding-left: 1.4em; margin: 0 0 var(--sp-4); }
.lesson-body li { margin: 4px 0; }
.lesson-body em { font-style: italic; color: var(--accent-pressed); }
.lesson-body strong { font-weight: 600; }

.lesson-body blockquote {
  margin: var(--sp-5) 0;
  padding: 0 0 0 var(--sp-5);
  border-left: 1px solid var(--rule-strong);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.05em;
  line-height: 1.55;
}
.lesson-body blockquote .quote-attr {
  display: block;
  margin-top: var(--sp-3);
  font-style: normal;
  font-size: 0.9em;
  color: var(--ink-mute);
  letter-spacing: var(--tracking-wide);
}
.lesson-body blockquote .quote-attr cite {
  font-style: italic;
  color: var(--ink-soft);
}
.lesson-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  background: var(--paper-2);
  border-radius: var(--rad-xs);
  color: var(--ink);
}
.lesson-body pre {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: var(--sp-4);
  border-radius: var(--rad-md);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  overflow-x: auto;
}
.lesson-body pre code { background: none; padding: 0; }

/* Callouts — hairline panel, no side stripe.
   Tag is absolutely positioned in upper-left so the body can be any mix of
   plain text, inline elements, or block elements without each becoming a
   separate grid item. */
.lesson-body .callout {
  position: relative;
  margin: var(--sp-5) 0;
  padding-top: var(--sp-4);
  padding-right: var(--sp-5);
  padding-bottom: var(--sp-4);
  padding-left: calc(var(--sp-5) + 120px + var(--sp-4));
  border: 1px solid var(--rule);
  border-radius: var(--rad-md);
  background: var(--paper);
}
.lesson-body .callout .tag {
  position: absolute;
  left: var(--sp-5);
  top: calc(var(--sp-4) + 3px);
  width: 120px;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-pressed);
}
.lesson-body .callout > p:first-of-type { margin-top: 0; }
.lesson-body .callout > p:last-child { margin-bottom: 0; }
/* On phones the 120px tag gutter leaves <200px for body copy. Stack the
   tag above the content so the text gets the full column width. */
@media (max-width: 560px) {
  .lesson-body .callout {
    padding-left: var(--sp-5);
    padding-top: calc(var(--sp-4) + 24px);
  }
  .lesson-body .callout .tag {
    position: static;
    display: block;
    width: auto;
    margin-bottom: var(--sp-2);
  }
}

/* Tables */
.lesson-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-5) 0;
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  line-height: var(--lh-snug);
  /* Long lesson tables (e.g. the Hallmarks intervention grid) naturally
     exceed the prose column at tablet and phone widths. `display: block`
     turns the table into a horizontally scrollable box while preserving the
     internal row/column grid. Rows inherit `display: table-row` from the
     user-agent sheet. */
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.lesson-body th, .lesson-body td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.lesson-body th {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-0);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper);
  border-bottom: 1px solid var(--rule-strong);
}
.lesson-body tr:last-child td { border-bottom: 1px solid var(--rule-strong); }

/* Alpha-section — quiet typographic mark */
.lesson-body h3.alpha {
  display: inline-block;
  padding: 0 0 2px;
  margin: var(--sp-6) 0 var(--sp-3);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--accent);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-4);
}

/* Platform-lab — paper block with pinned label */
.lesson-body .platform-lab {
  margin: var(--sp-6) 0;
  padding: var(--sp-5);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--rad-md);
  position: relative;
}
.lesson-body .platform-lab::before {
  content: "Lab";
  position: absolute;
  top: -9px;
  left: var(--sp-5);
  padding: 1px 10px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  background: var(--cream);
  color: var(--accent-pressed);
  border: 1px solid var(--rule);
  border-radius: var(--rad-xs);
}
.lesson-body .platform-lab .lab-label { display: none; }

/* Order-tests — "So what do I order?" inset.
   Distinct teal/petrol palette to separate the practical
   ordering guidance from the conceptual lesson and the
   ochre Platform-Lab block. Excluded from audio narration:
   the lesson- and car-audio extractors only pick up
   .callout and .platform-lab divs. */
.lesson-body .order-tests {
  margin: var(--sp-6) 0;
  padding: calc(var(--sp-5) + 6px) var(--sp-5) var(--sp-5);
  background: oklch(0.955 0.022 205);
  border: 1px solid oklch(0.82 0.050 205);
  border-left: 3px solid oklch(0.50 0.085 205);
  border-radius: var(--rad-md);
  position: relative;
}
.lesson-body .order-tests-label {
  position: absolute;
  top: -10px;
  left: var(--sp-5);
  padding: 2px 12px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  background: oklch(0.50 0.085 205);
  color: oklch(0.985 0.010 205);
  border-radius: var(--rad-xs);
}
.lesson-body .order-tests > p:first-of-type { margin-top: 0; }
.lesson-body .order-tests > *:last-child { margin-bottom: 0; }
.lesson-body .order-tests ul { padding-left: 1.2em; }
.lesson-body .order-tests li { margin: var(--sp-2) 0; }
.lesson-body .order-tests strong { color: oklch(0.30 0.080 205); }

/* ── Podcast ─────────────────────────────────────────────────────────── */
.podcast-wrap { max-width: var(--w-narrow); }
.podcast-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  align-items: center;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule-strong);
  background: none;
  border-radius: 0;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
.podcast-art {
  width: 64px;
  height: 64px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 0;
}
.podcast-art::after {
  content: "";
  position: absolute;
  inset: 18%;
  background: radial-gradient(
    circle at center,
    var(--accent) 0 14%,
    transparent 15% 22%,
    var(--ink-faint) 23% 28%,
    transparent 29% 36%,
    var(--accent) 37% 40%,
    transparent 41%
  );
  opacity: 0.75;
}
.podcast-meta h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-4);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  margin: 0 0 4px;
  text-wrap: balance;
}
.podcast-meta .pm-hosts {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: var(--ink-soft);
}
.podcast-meta .pm-duration {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  color: var(--ink-mute);
  margin-top: 2px;
}

.podcast-player {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}
.pp-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ink-invert);
  display: grid;
  place-items: center;
  font-size: 14px;
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.pp-btn:hover { background: oklch(0.14 0.020 75); }
.pp-btn:active { transform: scale(0.96); }

.pp-progress { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.pp-time {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.pp-bar {
  height: 3px;
  background: var(--paper-3);
  border-radius: var(--rad-full);
  overflow: hidden;
}
.pp-fill { height: 100%; background: var(--ink); width: 0%; border-radius: inherit; }
.pp-speed {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  padding: 4px 10px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--rad-sm);
  color: var(--ink-soft);
  background: var(--paper);
}
.pp-speed:hover { border-color: var(--ink-mute); color: var(--ink); }

.podcast-transcript {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  background: none;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
}
.podcast-transcript h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 var(--sp-4);
}
.turn {
  margin: var(--sp-4) 0;
  padding: 0 0 0 100px;
  position: relative;
  border-radius: var(--rad-sm);
  transition: background var(--dur-1) var(--ease-out);
  font-family: var(--font-display);
  cursor: pointer;
}
.turn:hover { background: var(--accent-soft); }
.turn.active { background: var(--accent-soft); padding-left: 100px; padding-right: var(--sp-3); }
.turn .speaker {
  position: absolute;
  left: 0;
  top: 4px;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  background: none;
  border-radius: 0;
}
.turn.a .speaker { color: var(--accent-pressed); }
.turn.b .speaker { color: var(--ink); }
.turn .text {
  font-family: var(--font-display);
  font-size: var(--fs-2);
  line-height: var(--lh-prose);
  color: var(--ink);
}

.audio-stub {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: var(--ink-soft);
  background: var(--paper-2);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--rad-sm);
}
.audio-stub code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 1px 6px;
  background: var(--cream);
  border-radius: var(--rad-xs);
}

/* ── Animation ───────────────────────────────────────────────────────── */
.animation-wrap { max-width: var(--w-default); }
.anim-frame {
  border: 1px solid var(--rule);
  border-radius: var(--rad-md);
  overflow: hidden;
  background: var(--paper);
}
.anim-frame iframe {
  width: 100%;
  height: 640px;
  /* On phones the iframe can swallow the whole viewport, leaving the user
     trapped inside it. Cap to ~80% of the viewport so the tab strip and
     the page-level scrollbar remain reachable. */
  max-height: 80svh;
  border: 0;
  display: block;
  background: #0b0f14; /* animations remain dark by design */
}

/* ── Quiz ────────────────────────────────────────────────────────────── */
.quiz-wrap { max-width: var(--w-narrow); }
.quiz-item {
  padding: var(--sp-5) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--sp-4);
}
.quiz-item:first-child { border-top: 1px solid var(--rule-strong); }
.quiz-item .q-num {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 5px;
}
.quiz-item .q-stem {
  font-family: var(--font-display);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0 0 var(--sp-4);
}
.quiz-options {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quiz-option {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: baseline;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--rad-md);
  background: var(--paper);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-2);
  line-height: var(--lh-snug);
  color: var(--ink);
  gap: var(--sp-2);
  transition: border-color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out);
}
.quiz-option:hover,
.quiz-option:active { border-color: var(--ink-mute); }
.quiz-option:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.quiz-option .o-letter {
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  font-weight: 600;
  color: var(--ink-mute);
  letter-spacing: var(--tracking-wide);
}
.quiz-option.chosen {
  border-color: var(--ink);
  background: var(--paper-2);
}
.quiz-option.correct {
  border-color: var(--success);
  background: var(--success-soft);
}
.quiz-option.correct .o-letter { color: var(--success); }
.quiz-option.wrong {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.quiz-option.wrong .o-letter { color: var(--danger); }

.quiz-rationale {
  grid-column: 2;
  margin-top: var(--sp-3);
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--fs-1);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  border-left: 0;
  display: none;
}
.quiz-rationale::before {
  content: "Rationale";
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.quiz-item.answered .quiz-rationale { display: block; }

.quiz-option-rationale {
  display: none;
  grid-column: 1 / -1;
  margin-top: var(--sp-2);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--rule);
  font-family: var(--font-display);
  font-size: var(--fs-0);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
.quiz-item.answered .quiz-option-rationale { display: block; }
.quiz-item.answered .quiz-option.correct .quiz-option-rationale { border-left-color: var(--success); }
.quiz-item.answered .quiz-option.wrong .quiz-option-rationale { border-left-color: var(--danger); }

.quiz-summary {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--rad-lg);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  align-items: center;
}
.quiz-summary .big {
  font-family: var(--font-display);
  font-size: var(--fs-6);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.quiz-summary.pass { border-color: var(--success); background: var(--success-soft); }
.quiz-summary.pass .big { color: var(--success); }
.quiz-summary.fail { border-color: var(--danger); background: var(--danger-soft); }
.quiz-summary.fail .big { color: var(--danger); }

/* Module footer nav */
.module-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule-strong);
}

/* ── Mystery case cards (Module 11) ─────────────────────────────────── */
.cases-grid {
  display: flex;
  flex-direction: column;
  margin: var(--sp-5) 0;
  border-top: 1px solid var(--rule);
}
.case-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--rule);
  background: none;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}
.case-card .tier {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--warn);
  padding: 2px 8px;
  background: var(--warn-soft);
  border-radius: var(--rad-xs);
  white-space: nowrap;
}
.case-card.tier-3 .tier { color: var(--danger); background: var(--danger-soft); }
.case-card.tier-3 { border-left: 0; }
.case-card .case-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-3);
  color: var(--ink);
  margin: 0;
}
.case-card .case-patient {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: var(--ink-soft);
  margin-top: 2px;
}
.case-card .case-complaint { display: none; }
.case-card button { white-space: nowrap; }

/* ── Retake banner ───────────────────────────────────────────────────── */
.retake-banner {
  margin: var(--sp-5) 0 var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  border-radius: var(--rad-lg);
}
.retake-banner .retake-head { margin-bottom: var(--sp-3); }
.retake-banner .retake-title {
  font-family: var(--font-display);
  font-size: var(--fs-2);
  font-weight: 500;
  color: oklch(0.35 0.14 70);
  margin: 0;
}
.retake-banner .retake-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: var(--ink-soft);
  margin-top: 2px;
}
.retake-banner .retake-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--rad-md);
  overflow: hidden;
  margin-top: var(--sp-3);
}
.retake-chip {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-4);
  background: var(--cream);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--dur-1) var(--ease-out);
}
.retake-chip:hover { background: var(--paper); text-decoration: none; }
.retake-chip .retake-num {
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  font-weight: 600;
  color: var(--warn);
  letter-spacing: var(--tracking-wide);
}
.retake-chip .retake-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.retake-chip .retake-mtitle {
  font-family: var(--font-display);
  font-size: var(--fs-2);
  font-weight: 500;
  color: var(--ink);
}
.retake-chip .retake-mscore {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  color: var(--ink-mute);
}
.retake-chip .retake-cta {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--accent-pressed);
}

/* ── Certificate modal ───────────────────────────────────────────────── */
.cert-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0.15 0.02 75 / 0.35);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  z-index: 1000;
  animation: fade-in 200ms var(--ease-out);
}
.cert-modal {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--rad-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  max-width: 560px;
  width: 100%;
}
.cert-modal .cert-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-pressed);
}
.cert-modal .cert-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
}
.cert-modal h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-5);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: var(--sp-3) 0 var(--sp-5);
}
.cert-modal .cert-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--rad-md);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}
.cert-modal .cert-stat {
  background: var(--paper);
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-radius: 0;
  text-align: left;
}
.cert-modal .cs-label {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.cert-modal .cs-val {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-5);
  line-height: 1;
  color: var(--ink);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}
.cert-modal .cert-blurb {
  font-family: var(--font-display);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin: 0 0 var(--sp-4);
}
.cert-modal .cert-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.cert-modal .cert-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--rad-md);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  line-height: var(--lh-snug);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.cert-modal .cert-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  background: var(--cream);
}
.cert-modal .cert-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

/* ── Chips (pass/fail) ───────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  padding: 3px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--rad-full);
  color: var(--ink-soft);
  background: var(--paper-2);
  white-space: nowrap;
}
.chip.chip-pass { color: var(--success); border-color: transparent; background: var(--success-soft); }
.chip.chip-fail { color: var(--danger); border-color: transparent; background: var(--danger-soft); }

/* ── Utilities ───────────────────────────────────────────────────────── */
.muted { color: var(--ink-soft); }
.tight { margin: 4px 0; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  :root { --sidebar-w: 260px; }
  .content { padding: var(--sp-6) var(--sp-5) var(--sp-8); }
  .module-controls { margin-inline: calc(-1 * var(--sp-5)); padding-inline: var(--sp-5); }
  .module-card { grid-template-columns: 72px 1fr auto; }
  .module-card .mc-sub { grid-column: 2; }
  .module-card .mc-meta { grid-column: 3; align-items: flex-end; flex-direction: column; }
  /* Topbar starts losing room around 900px (sidebar 260 + crumb + chip
     email ~215 + Admin + Reset progress > viewport). Drop the email
     text from the auth chip first — the avatar still opens the menu
     where the email appears. The phone-width 760px rule below collapses
     further. */
  .auth-chip-email { display: none; }
  .auth-chip-btn { padding: 4px; }
}

@media (max-width: 760px) {
  /* Single-column shell. Sidebar becomes a left-edge drawer that slides in
     when the hamburger is tapped. It stays in the DOM so its event handlers
     and scroll state survive route changes. */
  #app { grid-template-columns: 1fr; }
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(86vw, 320px);
    height: 100dvh;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--dur-3) var(--ease-out);
    box-shadow: var(--shadow-lg);
    padding-left: env(safe-area-inset-left);
  }
  body.sidebar-open #sidebar { transform: translateX(0); }
  .menu-btn { display: inline-flex; }

  /* Topbar: tighter padding, respect notch. The crumb becomes the primary
     label so truncate instead of wrapping. */
  .topbar {
    padding: 0 var(--sp-4);
    padding-left: max(var(--sp-4), env(safe-area-inset-left));
    padding-right: max(var(--sp-4), env(safe-area-inset-right));
    gap: var(--sp-3);
  }
  .crumb {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Reset progress is a rare destructive action; collapse to an icon-sized
     label on phones to keep the topbar single-row. */
  #btnResetProgress {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-0);
  }

  /* Signed-in chip shrinks to just the avatar on phones; tapping it still
     reveals the full email + sign-out menu. */
  .auth-chip-email { display: none; }
  .auth-chip-btn { padding: 4px; }
  .auth-menu { right: 0; left: auto; }

  .content {
    padding: var(--sp-5);
    padding-left: max(var(--sp-5), env(safe-area-inset-left));
    padding-right: max(var(--sp-5), env(safe-area-inset-right));
  }

  .module-head { flex-direction: column; gap: var(--sp-3); }
  .module-num { min-width: 0; padding-top: 0; }
  .module-card {
    grid-template-columns: 72px 1fr;
    gap: 4px var(--sp-4);
  }
  .module-card .mc-sub,
  .module-card .mc-meta {
    grid-column: 1 / -1;
    align-items: flex-start;
    flex-direction: row;
  }

  .lesson-body { font-size: var(--fs-1); }
  .hero-title { font-size: var(--fs-5); }

  /* Module footer navigation — three buttons don't fit on one row at 375px.
     Stack them: primary action first, then prev / next as a split row. */
  .module-foot {
    flex-wrap: wrap;
    gap: var(--sp-3);
  }
  .module-foot [data-action="complete"] {
    order: -1;
    flex-basis: 100%;
  }
  .module-foot [data-action="prev"],
  .module-foot [data-action="next"] { flex: 1; }

  /* Mystery case cards collapse to a single column at this width. */
  .case-card { grid-template-columns: 1fr; }

  /* Lesson tabs — at 375px the four full labels (~390px total) horizontally
     scroll, hiding the active tab. Swap to short labels and tighten the gap
     so all four tabs fit on a phone without sideways scrolling. */
  .lesson-tabs { gap: var(--sp-4); }
  .tab .tab-long { display: none; }
  .tab .tab-short { display: inline; }

  /* Quiz item: 48px gutter for "Q1" label collapses to inline at narrow
     widths so the question stem and options get the full content width. */
  .quiz-item { grid-template-columns: 1fr; gap: var(--sp-2); }
  .quiz-item .q-num { padding-top: 0; grid-column: 1; }
  .quiz-options { grid-column: 1; }

  /* Speed control — bumped padding for a usable touch target on phones. */
  .pp-speed { padding: 8px 14px; font-size: var(--fs-0); }
}

/* Very narrow phones (≤ 360px) — Reset Progress squeezes the crumb. Hide
   the label, keep the button reachable as an icon. */
@media (max-width: 380px) {
  #btnResetProgress {
    font-size: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    position: relative;
  }
  #btnResetProgress::before {
    content: "↺";
    font-size: 18px;
    line-height: 1;
  }

  /* Tighten the tab gap so all four short labels fit on a 320px-wide
     viewport (iPhone SE 1st gen) without horizontal scroll. */
  .lesson-tabs { gap: var(--sp-2); }
}

/* ── Landscape iPhone ────────────────────────────────────────────────────
   Modern iPhones in landscape (812×375 → 932×430) are wider than the
   760px portrait-mobile breakpoint, so without this rule the desktop
   layout kicks in: a 260px sidebar steals horizontal real estate, the
   60px topbar eats 15% of the height, and the module hero alone fills
   the entire viewport. The user has to scroll past the title before any
   actual content is visible.

   Trigger on short heights regardless of width (covers all iPhone
   landscapes plus narrow split-view tablets). Reuses the portrait
   drawer pattern: the sidebar slides in on hamburger tap, freeing the
   full width for content. Topbar shrinks, vertical paddings tighten,
   the hero scales down so the lesson body comes into view at scroll-0.

   Notched iPhones in landscape extend content under the notch on the
   left edge and the home indicator on the right — `env(safe-area-inset-*)`
   keeps interactive elements inside the safe rectangle. */
@media (max-height: 500px) and (orientation: landscape) {
  /* Single-column shell with drawer — same pattern as portrait mobile. */
  #app { grid-template-columns: 1fr; }
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(60vw, 320px);
    height: 100dvh;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--dur-3) var(--ease-out);
    box-shadow: var(--shadow-lg);
    padding-left: env(safe-area-inset-left);
  }
  body.sidebar-open #sidebar { transform: translateX(0); }
  .menu-btn { display: inline-flex; }

  /* Slimmer topbar reclaims ~12px of the 375–430px height. */
  .topbar {
    height: 48px;
    padding: 0 var(--sp-4);
    padding-left: max(var(--sp-4), env(safe-area-inset-left));
    padding-right: max(var(--sp-4), env(safe-area-inset-right));
    gap: var(--sp-3);
  }
  /* Match the narration pill's sticky stop to the slimmer topbar. */
  .ln-pill { top: calc(48px + var(--sp-2)); }
  .crumb {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .auth-chip-email { display: none; }
  .auth-chip-btn { padding: 4px; }
  .auth-menu { right: 0; left: auto; }
  #btnResetProgress { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-0); }

  /* Tighter content padding so the lesson body starts within the first
     screen instead of after a full hero. */
  .content {
    padding: var(--sp-4) var(--sp-5) var(--sp-6);
    padding-left: max(var(--sp-5), env(safe-area-inset-left));
    padding-right: max(var(--sp-5), env(safe-area-inset-right));
  }

  /* Module hero compresses: smaller eyebrow + title, tighter row. */
  .module-head { gap: var(--sp-3); }
  .hero-title { font-size: var(--fs-4); }
  .lesson-body { font-size: var(--fs-1); }

  /* Module footer Prev/Complete/Next fits one row at this width. */
  .module-foot { flex-wrap: nowrap; }
  .module-foot [data-action="complete"] { order: 0; flex-basis: auto; }

  /* Animation iframe — already capped by max-height: 80svh, but at
     375–430px height that yields ~300px which is tight for the chart.
     Lift the cap to 95svh in landscape since horizontal space is
     plentiful and the iframe content is wider-than-tall by design. */
  .anim-frame iframe { max-height: 95svh; }

  /* Compress drawer chrome so the 13-module list isn't squeezed into
     ~100px between the brand block and the footer at this height. */
  .brand { padding: var(--sp-3) var(--sp-4); }
  .sidebar-footer { padding: var(--sp-3) var(--sp-4); }
  .nav-group-header { padding: var(--sp-3) var(--sp-4) 4px; }
}

/* ── Car Mode ────────────────────────────────────────────────────────────
   Hands-free single-flow listening for an entire module. Designed for a
   phone in a dashboard mount: a single oversized play target, large
   secondary skip controls, big legible type, generous tap padding.
   Works in landscape (driver default) and portrait. */
.car-mode {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.car-head { text-align: center; }
.car-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}
.car-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-5);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  margin: 0 0 var(--sp-2);
  line-height: var(--lh-heading);
  text-wrap: balance;
}
.car-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: var(--ink-soft);
}

.car-now {
  text-align: center;
  padding: var(--sp-5) var(--sp-4);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.car-now-label {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--sp-2);
}
.car-now-segment {
  font-family: var(--font-display);
  font-size: var(--fs-3);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.car-now-section {
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  color: var(--ink-soft);
  min-height: 1.2em; /* reserve space so the layout doesn't jump on update */
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  justify-content: center;
}
.car-tts-peek {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-mute);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.car-tts-peek:hover { border-color: var(--ink-mute); color: var(--ink); background: var(--paper-2); }
.car-tts-peek:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.car-tts-popover {
  background: var(--paper-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--rad-md);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  color: var(--ink);
  margin-top: calc(-1 * var(--sp-3));
}
.car-tts-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}
.car-tts-popover-title {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.car-tts-close {
  background: transparent;
  border: 0;
  color: var(--ink-mute);
  font-size: 20px;
  line-height: 1;
  padding: 0 var(--sp-2);
  cursor: pointer;
  border-radius: 4px;
}
.car-tts-close:hover { color: var(--ink); }
.car-tts-popover-body {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: min(60vh, 600px);
  overflow-y: auto;
  margin: 0;
  color: var(--ink);
}

.car-progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-3);
  align-items: center;
}
.car-bar { cursor: pointer; }
.car-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Speed-cycle inline pill — same height as the ghost transport buttons
   (48px) so the row reads as one consistent control group. */
.car-speed-cycle {
  min-width: 56px;
  height: 48px;
  padding: 0 var(--sp-3);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--rad-full);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.car-speed-cycle:hover { background: var(--paper-2); border-color: var(--ink-mute); }
.car-speed-cycle:active { transform: scale(0.97); }
.car-speed-cycle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.car-time {
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  min-width: 3.5ch;
}
.car-time-total { text-align: right; }
.car-bar {
  position: relative;
  height: 8px;
  background: var(--paper-3);
  border-radius: var(--rad-full);
  /* Use box-shadow as a virtual touch target instead of padding so the
     visual track stays at 8px tall but the hit area extends ±10px
     vertically. The shadow is transparent — invisible but tappable. */
  box-shadow: 0 0 0 10px transparent;
}
.car-bar-fill {
  position: absolute;
  inset: 0;
  background: var(--ink);
  width: 0%;
  border-radius: inherit;
  transition: width 200ms linear;
  pointer-events: none;
}
/* Position dot — the visible playhead at the trailing edge of the
   fill. Stays visible even when fill width is 0 so the user always
   sees where the playhead is. */
.car-bar-fill::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(50%, -50%);
}

/* Compact single-row transport — five circular controls plus the
   speed cycle button. The play/pause is the largest target; everything
   else is uniform smaller circles. The whole row centers under the
   progress bar so the play button sits at the visual midpoint. */
.car-transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}
.car-btn {
  background: var(--ink);
  color: var(--ink-invert);
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.car-btn:active { transform: scale(0.96); }
.car-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.car-btn-ghost {
  width: 48px;
  height: 48px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
}
.car-btn-ghost:hover { background: var(--paper-2); border-color: var(--ink-mute); }
.car-btn svg { width: 56%; height: 56%; }
/* The play/pause button stacks two SVG icons (one always hidden via the
   `hidden` attribute). The default UA style for `[hidden]` is overridden
   by some SVG-specific rules in older renderers, so we force it here. */
.car-btn svg[hidden] { display: none; }

.car-upnext {
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-5);
}
.car-upnext-label {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--sp-2);
}
.car-upnext-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.car-upnext-list li {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: var(--ink-soft);
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
}
.car-upnext-list li:last-child { border-bottom: 0; }
.car-upnext-empty { font-style: italic; color: var(--ink-mute); }

.car-foot {
  text-align: center;
  padding-top: var(--sp-3);
}
.car-back {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: var(--ink-soft);
  text-decoration: none;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--rule);
  border-radius: var(--rad-md);
  display: inline-block;
}
.car-back:hover { border-color: var(--ink-mute); color: var(--ink); }

.car-mode-fatal {
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
}
.car-fatal-msg {
  font-family: var(--font-display);
  font-size: var(--fs-2);
  color: var(--ink);
  margin-bottom: var(--sp-5);
}

.car-start-hint {
  position: fixed;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--ink-invert);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--rad-full);
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  z-index: 100;
  box-shadow: var(--shadow-lg);
}

/* ─── Voice quiz panel ───────────────────────────────────────────────
   Shown only while a kind="quiz" segment is active. Sits below the
   transport so the same play/pause/skip controls still apply, with
   the question + options as the primary visual focus. Tuned for
   driver-glanceable scanning: oversized type, generous touch targets,
   high contrast, currently-playing option boxed in ochre. */
.car-quiz {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--rad-lg);
}
.car-quiz[hidden] { display: none; }
.car-quiz-progress {
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--sp-2);
}
.car-quiz-stem {
  font-family: var(--font-display);
  font-size: var(--fs-3);
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 var(--sp-4) 0;
}
.car-quiz-options {
  list-style: none;
  margin: 0 0 var(--sp-4) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  counter-reset: car-quiz-opt;
}
.car-quiz-option {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper-2);
  border: 2px solid var(--rule);
  border-radius: var(--rad-md);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
  font-family: var(--font-sans);
  font-size: var(--fs-2);
  color: var(--ink);
  line-height: 1.45;
}
.car-quiz-option:hover { border-color: var(--ink-mute); }
.car-quiz-option.playing {
  border-color: var(--accent);
  background: var(--paper);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 15%, transparent);
}
.car-quiz-option.chosen {
  border-color: var(--accent-pressed, var(--accent));
  background: color-mix(in oklch, var(--accent) 10%, var(--paper));
}
.car-quiz-option.correct {
  border-color: var(--success);
  background: var(--success-soft);
}
.car-quiz-option.correct .car-quiz-letter { background: var(--success); }
.car-quiz-option.wrong {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.car-quiz-option.wrong .car-quiz-letter { background: var(--danger); }
.car-quiz-letter {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ink-invert);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-1);
}
.car-quiz-option.playing .car-quiz-letter {
  background: var(--accent);
}
.car-quiz-text { flex: 1 1 auto; }

.car-quiz-mic {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.car-mic-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--rad-full);
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.car-mic-btn:hover { border-color: var(--ink-mute); color: var(--ink); }
.car-mic-btn.on {
  background: color-mix(in oklch, var(--accent) 12%, var(--paper));
  border-color: var(--accent);
  color: var(--ink);
}
.car-mic-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ink-mute);
}
.car-mic-btn.on .car-mic-dot {
  background: var(--accent);
  animation: car-mic-pulse 1.4s ease-in-out infinite;
}
@keyframes car-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 50%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in oklch, var(--accent) 0%, transparent); }
}
.car-quiz-heard {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: var(--ink-mute);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.car-quiz-cmds {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.car-quiz-cmd {
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--rad-md);
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.car-quiz-cmd:hover { border-color: var(--ink-mute); color: var(--ink); }
.car-quiz-cmd.primary {
  background: var(--ink);
  color: var(--ink-invert);
  border-color: var(--ink);
}
.car-quiz-cmd.primary:hover { background: var(--ink-soft); }

.car-quiz-result {
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
}
.car-quiz-result-label {
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--sp-2);
}
.car-quiz-result.pass .car-quiz-result-label { color: var(--accent-pressed, var(--accent)); }
.car-quiz-result-pct {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1;
  color: var(--ink);
  margin-bottom: var(--sp-2);
}
.car-quiz-result-detail {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  color: var(--ink-soft);
  margin-bottom: var(--sp-4);
}
.car-quiz-result-actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  flex-wrap: wrap;
}

/* Module page: the "Listen — Car Mode" entry button sits in the module
   foot alongside Prev/Mark complete/Next, but it visually leads as the
   most prominent secondary action below the title. */
.car-cta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.car-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  background: var(--paper-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--rad-md);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.car-cta-btn:hover { background: var(--paper-3); border-color: var(--ink-mute); }
.car-cta-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.car-cta-hint { flex: 1; min-width: 0; }

/* Home-page Car Mode chip — sits inline among the module-card meta
   chips; revealed asynchronously after a HEAD probe confirms that
   the lesson MP3 exists for this module. */
.chip-car {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  background: var(--accent-soft);
  color: var(--accent-pressed);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.chip-car[hidden] { display: none; }
.chip-car:hover { background: var(--paper-3); border-color: var(--accent); }
.chip-car svg { width: 14px; height: 14px; flex-shrink: 0; }
.car-cta-hint {
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  color: var(--ink-mute);
}

/* Smaller phones: tighten gaps so all six transport controls still
   fit on a single row. */
@media (max-width: 480px) {
  .car-mode { gap: var(--sp-5); padding: var(--sp-5) var(--sp-4); }
  .car-transport { gap: var(--sp-2); }
  .car-btn-ghost { width: 44px; height: 44px; }
  .car-speed-cycle { height: 44px; min-width: 50px; }
  .car-title { font-size: var(--fs-4); }
}

/* Very narrow phones (iPhone SE 320px): drop the speed control to its
   own row so the five transport circles can stay at touch-friendly
   sizes. */
@media (max-width: 360px) {
  .car-transport { flex-wrap: wrap; }
  .car-speed-cycle { margin-left: auto; }
}

/* Landscape phones in dashboard mount: condensed two-row layout
   (progress + transport) so the play button sits near thumb height. */
@media (max-height: 500px) and (orientation: landscape) {
  .car-mode {
    gap: var(--sp-3);
    max-width: 720px;
  }
  .car-head { text-align: left; }
  .car-now { text-align: left; padding: var(--sp-2) 0; border-top: 0; }
  .car-title { font-size: var(--fs-4); }
  .car-btn-ghost { width: 44px; height: 44px; }
}

/* ─── Lesson narration player (in-lesson mini-player + section sync) ──
   Sticky pill above the lesson body lets the reader play the same
   lesson narration that Car Mode strings together, while keeping
   their reading position. As audio crosses section offsets the
   matching paragraph/heading/figure gets a soft accent border and
   gently scrolls into view. */
.ln-pill {
  position: sticky;
  /* Sit flush below the 60px .topbar so the whole pill stays visible
     when pinned — sticking at 8px parked the bar behind the topbar
     and clipped the play button and progress track from view. */
  top: calc(60px + var(--sp-2));
  z-index: 6;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-4);
  background: var(--accent-soft);
  border: 1px solid var(--accent-rule);
  border-radius: 999px;
  box-shadow: 0 2px 12px oklch(0.32 0.05 60 / 0.10);
  font-family: var(--font-sans);
  transition: border-radius 220ms var(--ease-out), padding 220ms var(--ease-out);
}
.ln-pill.ln-playing {
  border-radius: 18px;
  padding: var(--sp-3) var(--sp-3);
}
.ln-play {
  width: 40px; height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 140ms var(--ease-out), transform 140ms var(--ease-out);
}
.ln-play:hover    { background: var(--accent-hover); }
.ln-play:active   { background: var(--accent-pressed); transform: scale(0.96); }
.ln-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ln-play[disabled] { opacity: 0.5; cursor: not-allowed; }
.ln-pill .ln-icon-pause { display: none; }
.ln-pill.ln-playing .ln-icon-play { display: none; }
.ln-pill.ln-playing .ln-icon-pause { display: inline; }
.ln-body {
  display: grid;
  gap: var(--sp-1);
  min-width: 0;
}
.ln-now {
  font-size: var(--fs-2);
  color: var(--accent-pressed);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ln-track {
  height: 6px;
  background: oklch(0.88 0.04 70);
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  display: none;
}
.ln-pill.ln-playing .ln-track { display: block; }
.ln-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ln-track-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 200ms linear;
}
.ln-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-1);
  color: var(--accent-pressed);
}
/* Time/back/fwd/speed only make sense once audio is loaded — hide the
   whole meta row on the collapsed pill so it shows just the play
   button + label. */
.ln-pill:not(.ln-playing) .ln-meta { display: none; }
.ln-time {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.ln-actions {
  display: flex; gap: 4px;
}
.ln-actions button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--accent-pressed);
  padding: 2px 8px;
  border-radius: 6px;
  font: inherit;
  font-size: var(--fs-1);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.ln-actions button:hover { background: oklch(0.92 0.05 70); border-color: var(--accent-rule); }
.ln-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ln-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
  border-color: transparent;
}
/* Active-section highlight on the lesson body. Soft accent left rule +
   slightly stronger ink — no background swap so type doesn't reflow
   or shift. .ln-section is set on every paired element so they all
   pick up the click affordance. */
.lesson-body .ln-section {
  cursor: pointer;
  position: relative;
  transition: border-color 220ms var(--ease-out), color 220ms var(--ease-out);
}
.lesson-body .ln-section:not(.callout) {
  border-left: 3px solid transparent;
  padding-left: 12px;
  margin-left: -15px;
}
.lesson-body .ln-section:not(.callout):hover {
  border-left-color: var(--accent-rule);
}
.lesson-body .ln-section-active {
  background: var(--accent-soft);
  border-radius: var(--rad-sm);
}

/* References — peer-reviewed citations rendered at the end of every lesson.
   Generated by scripts/generate-references.mjs and injected by
   inject-references.mjs. Each <li> pairs a citation (the link target) with
   a one-line plain-English description of why it matters for this module. */
.lesson-body .lesson-references {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule-strong);
}
.lesson-body .lesson-references h2 {
  margin-top: 0;
}
.lesson-body .references-intro {
  color: var(--ink-soft);
  font-size: var(--fs-1);
  margin-top: 0;
  margin-bottom: var(--sp-5);
}
.lesson-body .reference-list {
  list-style: decimal;
  padding-left: var(--sp-5);
  counter-reset: ref;
}
.lesson-body .reference-item {
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-2);
  break-inside: avoid;
}
.lesson-body .reference-item::marker {
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-sans);
  font-size: var(--fs-0);
}
.lesson-body .reference-citation {
  font-family: var(--font-display);
  font-size: var(--fs-1);
  line-height: 1.45;
  color: var(--ink);
}
.lesson-body .reference-citation a {
  color: inherit;
  text-decoration-color: var(--accent-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.lesson-body .reference-citation a:hover {
  color: var(--accent-pressed);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}
.lesson-body .reference-description {
  margin-top: var(--sp-1);
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Further Reading — book-length companions, rendered below References.
   Same item styling, but unordered (books aren't a numbered citation list). */
.lesson-body .lesson-further-reading {
  margin-top: var(--sp-6);
}
.lesson-body .lesson-further-reading h2 {
  margin-top: 0;
}
.lesson-body .further-reading-list {
  list-style: disc;
  padding-left: var(--sp-5);
}
.lesson-body .further-reading-list .reference-item::marker {
  color: var(--accent);
}

/* Per-section copy icon — single button re-parented into the active
   section so the affordance follows the narration. Sits in the top-
   right of the active block, low-contrast at rest, brightens on hover.
   Pointer-events stay on so it works even when the parent section is
   click-to-seek (the click handler stops propagation). */
.lesson-body .ln-section-copy,
.podcast-transcript .turn .ln-section-copy {
  position: absolute;
  top: -30px;
  right: -2px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: oklch(0.55 0.05 60);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity 140ms var(--ease-out),
              background 140ms var(--ease-out),
              color 140ms var(--ease-out),
              border-color 140ms var(--ease-out);
}
.lesson-body .ln-section-copy:hover,
.podcast-transcript .turn .ln-section-copy:hover {
  opacity: 1;
  color: var(--accent-pressed);
  background: oklch(0.94 0.04 70);
  border-color: var(--accent-rule);
}
.lesson-body .ln-section-copy:focus-visible,
.podcast-transcript .turn .ln-section-copy:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  opacity: 1;
}
.lesson-body .ln-section-copy .ln-copy-icon-done,
.podcast-transcript .turn .ln-section-copy .ln-copy-icon-done { display: none; }
.lesson-body .ln-section-copy.ln-copied,
.podcast-transcript .turn .ln-section-copy.ln-copied {
  opacity: 1;
  color: var(--accent-pressed);
  background: var(--accent-soft);
  border-color: var(--accent-rule);
}
.lesson-body .ln-section-copy.ln-copied .ln-copy-icon-default,
.podcast-transcript .turn .ln-section-copy.ln-copied .ln-copy-icon-default { display: none; }
.lesson-body .ln-section-copy.ln-copied .ln-copy-icon-done,
.podcast-transcript .turn .ln-section-copy.ln-copied .ln-copy-icon-done    { display: inline; }

/* On narrower viewports the pill collapses to two rows so the action
   buttons stay reachable. */
@media (max-width: 560px) {
  .ln-pill { border-radius: 18px; }
  .ln-meta { flex-wrap: wrap; }
  .ln-actions { width: 100%; justify-content: flex-end; }
}

/* ──────────────────────────────────────────────────────────────────────
   Lumina (persona-solo, audio-only)

   Desktop: lives in #luminaSlot inside the sidebar, between the brand block
   and the progress summary. On mobile (≤760px) the sidebar becomes an
   off-canvas drawer, so Lumina is moved into a fixed sticky bar at the
   bottom of the viewport so the learner can always tap to talk.

   The component is a shadow-DOM web component; we override its CSS custom
   properties at the host element level (the only legal cross-shadow channel).
   Tokens map MSF cream/ochre onto its built-in light theme.
   ──────────────────────────────────────────────────────────────────── */
.lumina-slot {
  margin: var(--sp-3) var(--sp-5) var(--sp-4);
  padding: 0;
}
.lumina-slot:empty { display: none; }

.lumina-panel {
  display: block;
  width: 100%;
  height: 232px;
  /* MSF reskin — overriding persona-solo's light-theme tokens to match the
     course's cream + ochre + Spectral aesthetic. */
  --persona-bg: var(--cream);
  --persona-bg-elevated: var(--paper);
  --persona-bg-sunken: var(--paper-2);
  --persona-text: var(--ink);
  --persona-text-dim: var(--ink-soft);
  --persona-border: var(--paper-4);
  --persona-shadow: var(--shadow-md);
  --persona-accent: var(--accent-pressed);
  --persona-radius-lg: var(--rad-md);

  --solo-header-bg: var(--paper);
  --solo-name-color: var(--ink);
  --solo-title-color: var(--ink-soft);
  --solo-portrait-size: 80px;
  --solo-portrait-border: 2px solid var(--accent-pressed);

  --portrait-bg: var(--cream);
  --portrait-padding: var(--sp-4) var(--sp-4);
  --portrait-image-size: 108px;
  --portrait-image-border: 2px solid var(--accent-pressed);
  --portrait-mic-size: 40px;
  --portrait-mic-idle-bg: var(--paper-2);
  --portrait-mic-idle-border: 1px solid var(--paper-4);
  --portrait-mic-idle-color: var(--ink-soft);
  --portrait-name-color: var(--ink);
  --portrait-tagline-color: var(--ink-soft);

  border: 1px solid var(--paper-4);
  border-radius: var(--rad-md);
  background: var(--cream);
  box-shadow: var(--shadow-sm);
}

/* Mobile sticky bar — fixed to viewport bottom, full width, Lumina inside. */
.lumina-mobile-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: var(--sp-2) var(--sp-3);
  padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom));
  background: var(--cream);
  border-top: 1px solid var(--paper-4);
  box-shadow: 0 -2px 12px rgba(20, 18, 14, 0.06);
}
.lumina-mobile-bar .lumina-panel {
  height: 88px;
  border: none;
  background: transparent;
  box-shadow: none;
  --portrait-padding: var(--sp-2) var(--sp-3);
  --portrait-image-size: 44px;
  --portrait-mic-size: 36px;
}
@media (max-width: 760px) {
  .lumina-mobile-bar { display: block; }
  /* Reserve room above the sticky bar so content + topbar reset don't
     hide behind it. */
  body { padding-bottom: 110px; }
  .lumina-slot { display: none; }
}

/* ── Offline download — modal ────────────────────────────────────────── */
/* The Download-for-offline trigger lives in the topbar user menu (see
   .auth-menu-item-offline below). The standalone .btn-offline class
   from the previous sidebar button is gone. */

.offline-modal {
  position: fixed; inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.offline-modal.is-open { display: flex; }
body.offline-locked { overflow: hidden; }
.offline-scrim {
  position: absolute; inset: 0;
  background: oklch(0.22 0.020 75 / 0.40);
  backdrop-filter: blur(4px);
}
.offline-card {
  position: relative;
  z-index: 1;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: var(--rad-lg);
  box-shadow: 0 30px 80px -20px oklch(0.22 0.020 75 / 0.35),
              0 8px 24px -12px oklch(0.22 0.020 75 / 0.25);
  width: min(560px, 100%);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  font-family: var(--font-sans);
}
.offline-close {
  position: absolute; top: 10px; right: 14px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1;
  color: var(--ink-mute);
  padding: 4px 8px;
  border-radius: var(--rad-sm);
}
.offline-close:hover { color: var(--ink); background: var(--paper-2); }

.offline-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent, oklch(0.55 0.15 70));
  margin-bottom: var(--sp-2);
}
.offline-title {
  font-family: var(--font-serif);
  font-size: var(--fs-5);
  margin: 0 0 var(--sp-2);
  letter-spacing: var(--tracking-tight);
}
.offline-sub {
  margin: 0 0 var(--sp-4);
  color: var(--ink-soft);
  font-size: var(--fs-1);
  line-height: 1.55;
}

.offline-status {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--rad-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.offline-status-line {
  font-size: var(--fs-1);
  color: var(--ink);
}
.offline-progress { margin-top: var(--sp-3); }
.offline-progress-bar {
  height: 8px;
  background: var(--paper-3);
  border-radius: 999px;
  overflow: hidden;
}
.offline-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent, oklch(0.62 0.13 70));
  transition: width 240ms ease;
}
.offline-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.offline-progress-meta span:last-child {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.offline-sync-line {
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--rule);
  font-size: var(--fs-micro);
  color: var(--ink-mute);
}
.offline-sync-line[hidden] { display: none; }

.offline-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  cursor: pointer;
  letter-spacing: var(--tracking-snug);
  white-space: nowrap;
}
.offline-pill:hover { background: var(--paper-3); border-color: var(--rule-strong); }
.offline-pill[hidden] { display: none; }
.offline-pill-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-mute);
}
.offline-pill.is-offline .offline-pill-dot {
  background: oklch(0.62 0.16 35); /* warm rust — offline */
}
.offline-pill.is-syncing .offline-pill-dot {
  background: oklch(0.70 0.13 70); /* ochre — syncing */
  animation: offline-pulse 1.4s ease-in-out infinite;
}
@keyframes offline-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* Passive auto-update toast — appears when the SW finds + applies course
   updates in the background. Slides in from the bottom-right. Never
   modal; user keeps reading without interruption. */
.offline-toast {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 1050;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 14px 10px 16px;
  border-radius: var(--rad-md);
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 14px 36px -12px oklch(0.22 0.020 75 / 0.30),
              0 4px 14px  -8px oklch(0.22 0.020 75 / 0.20);
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  line-height: 1.35;
  max-width: 360px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.offline-toast.is-shown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.offline-toast-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-mute);
  flex: 0 0 auto;
}
.offline-toast.is-checking .offline-toast-dot {
  background: oklch(0.70 0.13 70);
  animation: offline-pulse 1.4s ease-in-out infinite;
}
.offline-toast.is-updated .offline-toast-dot {
  background: oklch(0.62 0.13 145); /* sage — refreshed */
}
.offline-toast.is-warn .offline-toast-dot {
  background: oklch(0.62 0.16 35); /* warm rust */
}
.offline-toast-text { color: var(--ink); }
.offline-toast-close {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-mute);
  padding: 2px 6px;
  border-radius: var(--rad-sm);
  flex: 0 0 auto;
}
.offline-toast-close:hover { color: var(--ink); background: var(--paper-2); }

@media (max-width: 480px) {
  .offline-toast {
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: var(--sp-3);
    max-width: none;
  }
}

.offline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
/* The .btn class sets display:inline-flex which overrides the [hidden]
   user-agent rule, so a `hidden` action button still renders. Force it. */
.offline-actions .btn[hidden] { display: none; }
.offline-fineprint {
  font-size: var(--fs-micro);
  color: var(--ink-mute);
  line-height: 1.5;
  border-top: 1px solid var(--rule-soft);
  padding-top: var(--sp-3);
}

@media (max-width: 480px) {
  .offline-card { padding: var(--sp-5) var(--sp-4); }
  .offline-title { font-size: var(--fs-4); }
}

/* ── Course Overview ──────────────────────────────────────────────────────
   Orientation page, reached from the home-page "Course overview" button or
   #/overview directly. Reuses the home-hero rhythm but adds a "How to study"
   block (the four-pass loop), a curriculum-arc grouping, and feature cards
   for the mystery patients + capstone.
   ────────────────────────────────────────────────────────────────────── */
.overview {
  max-width: var(--w-wide);
  margin: 0 auto;
}
.overview-hero {
  padding: var(--sp-5) 0 var(--sp-7);
  max-width: var(--w-narrow);
}
.overview-hero .hero-meta { margin-bottom: 0; }

.overview-section {
  padding: var(--sp-7) 0;
  border-top: 1px solid var(--rule);
}
.overview-section .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--sp-4);
}
.overview-section .section-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--accent);
}
.overview-section .section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0 0 var(--sp-4);
  max-width: 22ch;
  text-wrap: balance;
}
.overview-section .section-lede {
  font-family: var(--font-display);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 0 var(--sp-6);
}

/* How-to-study — four numbered passes */
.howto-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
}
.howto-list li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.howto-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-6);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--accent-pressed);
  font-style: italic;
}
.howto-body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-3);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  margin: 0 0 var(--sp-2);
  text-wrap: balance;
}
.howto-body p {
  font-family: var(--font-display);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin: 0;
  max-width: 62ch;
}
.howto-body strong { color: var(--ink); font-weight: 500; }
.howto-foot {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  line-height: var(--lh-body);
  color: var(--ink-mute);
  margin: var(--sp-5) 0 0;
  max-width: 62ch;
}

/* Curriculum arc — five movements, each with a heading and the modules
   that belong to it. Modules render as a quiet list (not cards) so the
   focus stays on the movement-level narrative. */
.arc-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}
.arc-block {
  display: grid;
  grid-template-columns: minmax(0, 28ch) minmax(0, 1fr);
  gap: var(--sp-6) var(--sp-7);
  align-items: start;
}
.arc-head .arc-label {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-pressed);
  margin-bottom: var(--sp-2);
}
.arc-head .arc-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-4);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
.arc-head .arc-body {
  font-family: var(--font-display);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin: 0;
}
.arc-modules {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.arc-modules li { border-bottom: 1px solid var(--rule); }
.arc-mod {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-4) var(--sp-3);
  color: var(--ink);
  text-decoration: none;
  transition: background var(--dur-1) var(--ease-out);
}
.arc-mod:hover { background: var(--wash-1); text-decoration: none; }
.arc-mod-num {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  color: var(--ink-mute);
}
.arc-mod-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arc-mod-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2);
  line-height: var(--lh-heading);
  color: var(--ink);
}
.arc-mod-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  line-height: var(--lh-snug);
  color: var(--ink-soft);
}
.arc-mod-hours {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* Feature cards — Module 11 (mystery patients) + Module 13 (capstone) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}
.feature-card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--rad-lg);
  padding: var(--sp-6);
}
.feature-card .feature-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-pressed);
  margin-bottom: var(--sp-3);
}
.feature-card .feature-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-4);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
.feature-card p {
  font-family: var(--font-display);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin: 0;
}

.overview-cta {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-7) 0 var(--sp-8);
  border-top: 1px solid var(--rule);
}

.author-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-6);
  align-items: start;
  max-width: var(--w-narrow);
}
.author-photo {
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-soft, oklch(0.95 0.01 75));
  border: 1px solid var(--rule);
}
.author-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.author-body .section-title { margin-bottom: var(--sp-3); }
.author-lede {
  font-family: var(--font-display);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin: 0 0 var(--sp-4);
}
.author-bio {
  font-size: var(--fs-1);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 800px) {
  .arc-block { grid-template-columns: 1fr; gap: var(--sp-4); }
  .feature-grid { grid-template-columns: 1fr; }
  .howto-list li { grid-template-columns: 56px 1fr; gap: var(--sp-4); }
  .howto-num { font-size: var(--fs-5); }
  .author-card { grid-template-columns: 1fr; gap: var(--sp-4); }
  .author-photo { max-width: 180px; }
}
@media (max-width: 480px) {
  .overview-section { padding: var(--sp-6) 0; }
  .arc-mod { grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--sp-3); }
  .overview-cta { flex-direction: column; align-items: stretch; }
  .overview-cta .btn { width: 100%; }
}

/* IPA pronunciation annotations */
.ipa {
  font-size: var(--fs-micro);
  color: oklch(0.55 0.03 75);
  font-style: normal;
  letter-spacing: 0;
  margin-left: 0.2em;
}

/* ── Scroll-to-top button ────────────────────────────────────────────── */
#scrollTopBtn {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: oklch(0.58 0.142 62);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 300;
  box-shadow: 0 2px 8px oklch(0 0 0 / 0.18);
}
#scrollTopBtn.visible {
  opacity: 1;
  pointer-events: auto;
}
#scrollTopBtn:hover { transform: translateY(-2px); }
#scrollTopBtn:active { transform: translateY(0); }