/* Voice Writing Training Platform
   Desktop first, light surface, large type. Carolyn reads this for hours while
   looking back and forth at her CAT software, so nothing here is subtle. */

:root {
  --teal: #0F4C5C;
  --teal-dark: #0A3642;
  --teal-tint: #E8F0F2;
  --amber: #D4922A;
  --amber-ink: #8A5A12;
  --amber-tint: #FBF1DF;
  --green: #2D8F5F;
  --green-ink: #1E6B45;
  --green-tint: #E6F3EC;
  --red: #C94040;
  --red-ink: #9B2C2C;
  --red-tint: #FBEBEB;

  --ink: #1A2422;
  --ink-soft: #485553;
  --ink-muted: #6B7876;
  --surface: #FFFFFF;
  --surface-sunk: #F6F8F8;
  --page: #F2F5F5;
  --line: #DDE3E2;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(15, 76, 92, 0.06), 0 4px 14px rgba(15, 76, 92, 0.05);
}

* { box-sizing: border-box; }

html { font-size: 17px; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
}

.wrap {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header and footer */

.site-header {
  background: var(--teal);
  color: #fff;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.brand-mark {
  background: var(--amber);
  color: #2A1B05;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 0.85rem;
}

.brand-text { font-size: 1.05rem; }

.site-nav a {
  color: #D7E6EA;
  text-decoration: none;
  margin-left: 22px;
  font-weight: 500;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover { color: #fff; }
.site-nav a.active { color: #fff; border-bottom-color: var(--amber); }

.site-footer {
  margin-top: 56px;
  padding: 22px 0 36px;
  color: var(--ink-muted);
  font-size: 0.86rem;
  border-top: 1px solid var(--line);
}

/* Layout blocks */

main.wrap { padding-top: 32px; padding-bottom: 8px; }

section { margin-bottom: 40px; }

h1 { font-size: 2.05rem; margin: 0 0 8px; letter-spacing: -0.01em; }
h2 { font-size: 1.32rem; margin: 0 0 6px; }
h3 { font-size: 1.1rem; margin: 0; }

.hero { margin-bottom: 36px; }
.hero-compact { margin-bottom: 24px; }
.hero-sub { color: var(--ink-muted); margin: 0; max-width: 62ch; }
.hero-speed { color: var(--ink-muted); font-weight: 500; }

.section-note { color: var(--ink-muted); margin: 0 0 16px; max-width: 66ch; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 20px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.panel-locked { border-left: 4px solid var(--amber); }

.muted { color: var(--ink-muted); font-weight: 400; }
.empty { color: var(--ink-muted); }

/* Leg cards */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.leg-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  display: flex;
  flex-direction: column;
}

.leg-card.state-passed { border-top-color: var(--green); }
.leg-card.state-locked { border-top-color: var(--line); background: var(--surface-sunk); }

.leg-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.leg-card .speed {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
}

.state-line { margin: 12px 0 4px; }

.stat-list {
  margin: 8px 0 18px;
  padding: 0;
  display: grid;
  gap: 6px;
}

.stat-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
}

.stat-list dt { color: var(--ink-muted); font-size: 0.92rem; }
.stat-list dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.lock-note { color: var(--amber-ink); font-size: 0.92rem; margin: 0 0 14px; }

/* Badges */

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.badge-pass { background: var(--green-tint); color: var(--green-ink); }
.badge-open { background: var(--teal-tint); color: var(--teal-dark); }
.badge-locked { background: var(--surface-sunk); color: var(--ink-muted); border: 1px solid var(--line); }

/* Buttons */

.btn {
  display: inline-block;
  background: var(--teal);
  color: #fff;
  text-decoration: none;
  border: 1px solid var(--teal);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: auto;
  text-align: center;
}

.btn:hover { background: var(--teal-dark); border-color: var(--teal-dark); }

.btn-ghost { background: transparent; color: var(--teal); }
.btn-ghost:hover { background: var(--teal-tint); color: var(--teal-dark); }

.btn-large { padding: 14px 26px; font-size: 1.05rem; }
.btn-small { padding: 7px 14px; font-size: 0.9rem; margin-top: 0; }

.action-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* Chips: speed and passage pickers */

.speed-picker, .passage-picker {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

a.chip:hover { border-color: var(--teal); color: var(--teal-dark); }

.chip-active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

a.chip-active:hover { background: var(--teal-dark); color: #fff; }

.chip-locked { background: var(--surface-sunk); color: var(--ink-muted); cursor: not-allowed; }

.chip-tag {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.75;
}

/* Speed clubs */

.club-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.club {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.club.earned {
  background: var(--amber-tint);
  border-color: var(--amber);
}

.club-name { font-weight: 700; }
.club.earned .club-name { color: var(--amber-ink); }
.club-state { font-size: 0.88rem; color: var(--ink-muted); }
.club.earned .club-state { color: var(--amber-ink); }

/* Practice streak */

.streak-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--amber-tint);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  padding: 14px 20px;
  margin-bottom: 36px;
}

.streak-count {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--amber-ink);
}

.streak-flame { font-size: 1.1em; }

.streak-meta {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.streak-stats { margin-bottom: 20px; }

/* One square per day, most recent on the right. Squares flex so the row fills
   the panel at any width without wrapping into a ragged block. */

.heatmap {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.heat-cell {
  flex: 1 1 0;
  min-width: 6px;
  aspect-ratio: 1 / 1;
  max-height: 26px;
  border-radius: 3px;
}

.heat-on { background: var(--green); }
.heat-off { background: var(--surface-sunk); border: 1px solid var(--line); }

.heatmap-legend {
  display: flex;
  justify-content: space-between;
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.8rem;
}

/* Tables */

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.95rem;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.data-table thead th {
  background: var(--surface-sunk);
  color: var(--ink-muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Equipment hint under a ladder rung's leg name: keyboard or stenomask. */
.data-table .method-note {
  display: block;
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: 0.78rem;
}
.data-table a { color: var(--teal); font-weight: 600; }
.row-locked { color: var(--ink-muted); background: var(--surface-sunk); }

.error-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  padding: 1px 5px;
  border-radius: 4px;
}

.error-table code.ref { background: var(--teal-tint); color: var(--teal-dark); }
.error-table code.trans { background: var(--red-tint); color: var(--red-ink); }
.error-table .explanation { color: var(--ink-muted); font-size: 0.9rem; }

/* Passage with the run marked on top of it */

.diff-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-size: 0.88rem;
  color: var(--ink-muted);
}

.diff-legend li { display: flex; align-items: center; gap: 7px; }

.diff-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid transparent;
}

.swatch-wrong { background: var(--red-tint); border-color: var(--red); }
.swatch-dropped { background: var(--amber-tint); border-color: var(--amber); }
.swatch-added { background: var(--surface-sunk); border-color: var(--ink-muted); }

.passage-diff {
  font-size: 1.02rem;
  line-height: 2.1;
  color: var(--ink);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-wrap: break-word;
}

/* Q and A passages read as testimony, not as a paragraph, so line structure
   is carried through. */
.diff-break { display: block; height: 10px; }

.diff-ok { color: var(--ink); }

.diff-mark {
  display: inline-block;
  border-radius: 5px;
  padding: 1px 6px;
  border: 1px solid transparent;
  white-space: normal;
}

.diff-wrong { background: var(--red-tint); border-color: var(--red); }
.diff-dropped { background: var(--amber-tint); border-color: var(--amber); }
.diff-added { background: var(--surface-sunk); border-color: var(--ink-muted); }

.diff-typed {
  color: var(--red-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

.diff-truth { font-weight: 700; color: var(--ink); }
.diff-dropped .diff-truth { color: var(--amber-ink); }

/* A long unwritten run is a whole paragraph. Bold across all of it shouts. */
.diff-run .diff-truth { font-weight: 500; }

.diff-tag {
  margin-left: 6px;
  font-size: 0.68em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.diff-dropped .diff-tag { color: var(--amber-ink); }
.diff-unplaced { margin-top: 14px; margin-bottom: 0; }

.table-view { margin-top: 16px; }
.table-view summary {
  cursor: pointer;
  color: var(--teal);
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 12px;
}

/* Result banner */

.result-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 24px;
  border: 1px solid;
}

.result-pass { background: var(--green-tint); border-color: var(--green); }
.result-fail { background: var(--red-tint); border-color: var(--red); }

.verdict-word {
  display: block;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.result-pass .verdict-word { color: var(--green-ink); }
.result-fail .verdict-word { color: var(--red-ink); }

.verdict-note { color: var(--ink-soft); font-size: 0.92rem; }

.result-figure { text-align: right; }

.figure {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

.figure-label {
  color: var(--ink-muted);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Stat tiles */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.stat-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat-label { color: var(--ink-soft); font-size: 0.92rem; }
.stat-sub { color: var(--ink-muted); font-size: 0.82rem; }

/* Charts */

.chart-figure { margin: 8px 0 0; }
.chart { width: 100%; height: auto; display: block; }
.chart-tick { fill: #5B6664; font-size: 12px; font-family: inherit; }
.chart-endpoint { fill: #1A2422; font-size: 12px; font-weight: 600; font-family: inherit; }
.chart-threshold-label { fill: #8A5A12; font-size: 11px; font-family: inherit; }

.chart-figure figcaption {
  color: var(--ink-muted);
  font-size: 0.86rem;
  margin-top: 10px;
}

.projection {
  background: var(--teal-tint);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 18px;
  color: var(--teal-dark);
}

/* Practice page */

.player { width: 100%; margin: 8px 0 20px; }

/* Once the script wires the big-target controls, the native player stands
   down. Its own buttons live in a shadow tree CSS cannot reach, so they can
   never be made thumb-sized. */
.player-headless { display: none; }

.audio-dock {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px 14px;
  margin: 8px 0 20px;
}

.audio-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.audio-controls[hidden] { display: none; }

.audio-track {
  display: flex;
  align-items: center;
  gap: 14px;
}

.audio-seek {
  flex: 1;
  min-width: 0;
  height: 24px;
  accent-color: var(--teal);
  cursor: pointer;
}

.audio-seek:disabled { cursor: default; opacity: 0.5; }

.audio-time {
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  color: var(--ink-muted);
  white-space: nowrap;
}

.audio-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

/* Every control is at or above the 48px touch-target floor, and the gap
   between them is wide enough that a thumb aiming at rewind does not land on
   play. */
.audio-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid var(--teal);
  border-radius: 999px;
  background: var(--surface);
  color: var(--teal);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.audio-btn:hover { background: var(--teal-tint); }
.audio-btn:active { background: var(--teal-tint); transform: scale(0.96); }

.audio-btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.audio-skip {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
}

.audio-skip .audio-glyph { font-size: 1.5rem; }
.audio-count { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; }

.audio-play {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  background: var(--teal);
  color: #fff;
}

.audio-play:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.audio-play:active { background: var(--teal-dark); }
.audio-play .audio-glyph { font-size: 1.35rem; }

/* The WPM number reads as a typing target unless we say otherwise, and
   "type at 180 WPM" is what scares people off before they ever start. */
.wpm-note {
  margin: 0 0 18px;
  padding: 14px 18px;
  background: var(--surface-sunk);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

.wpm-note strong { color: var(--ink); }

.instructions {
  margin: 0 0 20px;
  padding-left: 22px;
  color: var(--ink-soft);
}

.instructions li { margin-bottom: 4px; }

/* Carolyn's start page. She reads this once, on a laptop, before her first
   session, so the steps get room to breathe rather than being compact. */
.instructions-roomy li { margin-bottom: 12px; line-height: 1.6; }

.plain-list {
  margin: 0 0 16px;
  padding-left: 22px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.plain-list li { margin-bottom: 10px; }

.timer-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 22px;
}

.timer {
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--teal);
  min-width: 5ch;
}

.timer-meta { color: var(--ink-muted); font-size: 0.9rem; flex: 1; }
.timer-buttons { display: flex; gap: 10px; }

.score-form { display: flex; flex-direction: column; }

.score-form label {
  font-weight: 600;
  margin-bottom: 6px;
}

.score-form textarea,
.score-form input[type="text"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  line-height: 1.6;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  margin-bottom: 20px;
  width: 100%;
  resize: vertical;
}

.score-form input[type="text"] {
  font-family: inherit;
}

.score-form textarea:focus,
.score-form input[type="text"]:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}

.score-form .btn { align-self: flex-start; margin-top: 0; }

/* Exam simulation */

.exam-eyebrow {
  margin: 0 0 4px;
  color: var(--red-ink);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.badge-exam { background: var(--red-tint); color: var(--red-ink); margin-left: 6px; }
.badge-fail { background: var(--red-tint); color: var(--red-ink); }

.panel-pass { border-left: 4px solid var(--green); }

.banner-line {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--teal-tint);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 32px;
}

.banner-figure {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--teal-dark);
  font-variant-numeric: tabular-nums;
}

.banner-text { color: var(--teal-dark); flex: 1; min-width: 260px; }

.exam-card { border-top-color: var(--red); }
.exam-card.state-passed { border-top-color: var(--green); }
.exam-card.state-locked { border-top-color: var(--line); }

.rule-list { margin: 0 0 18px; padding-left: 22px; color: var(--ink-soft); }
.rule-list li { margin-bottom: 6px; }

/* The clock is meant to be readable from across the desk, without leaning in. */

.exam-clock-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--teal);
  color: #fff;
  border-radius: var(--radius);
  padding: 20px 26px;
  margin-bottom: 22px;
}

.exam-clock {
  font-size: 4.2rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.exam-clock-live { color: #FFFFFF; }
.exam-clock-warning { color: var(--amber); }
.exam-clock-over { color: #F3A5A5; }

.exam-clock-meta { display: flex; flex-direction: column; gap: 2px; }

.exam-phase {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--amber);
  font-weight: 700;
}

.exam-note { color: #D7E6EA; font-size: 1rem; }

.exam-abort { margin: 14px 0 0; font-size: 0.9rem; }
.exam-abort a { color: var(--ink-muted); }

.exam-transcript {
  font-size: 1.15rem;
  line-height: 1.7;
  min-height: 60vh;
}

.exam-transcript:disabled {
  background: var(--surface-sunk);
  color: var(--ink-muted);
  cursor: not-allowed;
}

.exam-tally { font-weight: 600; }

.btn-submit { background: var(--green); border-color: var(--green); }
.btn-submit:hover { background: var(--green-ink); border-color: var(--green-ink); }
.btn-submit:disabled {
  background: var(--surface-sunk);
  border-color: var(--line);
  color: var(--ink-muted);
  cursor: not-allowed;
}

/* Coaching */

.focus-panel { border-left: 4px solid var(--amber); }

.focus-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  counter-reset: focus;
}

.focus-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-sunk);
  padding: 18px 20px;
}

.focus-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.focus-rank {
  background: var(--amber);
  color: #2A1B05;
  font-weight: 700;
  border-radius: 999px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.focus-name { font-weight: 700; font-size: 1.05rem; }

.focus-count {
  color: var(--ink-muted);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.focus-description { margin: 0 0 8px; font-weight: 600; }
.focus-tip { margin: 0 0 8px; color: var(--ink-soft); }
.focus-drill { margin: 0; color: var(--ink-soft); }

.coaching {
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.coaching:last-of-type { border-bottom: none; }

.coaching summary {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 600;
}

.coaching-name { color: var(--teal-dark); }

.coaching-count {
  color: var(--ink-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.coaching-description { margin: 10px 0 8px; font-weight: 600; }
.coaching-tip, .coaching-drill { margin: 0 0 8px; color: var(--ink-soft); max-width: 76ch; }

/* Hero CTA */
.btn-hero {
  display: inline-block;
  margin-top: 16px;
  padding: 14px 32px;
  font-size: 1.1rem;
  font-weight: 700;
  background: var(--teal);
  color: #fff;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.15s;
}
.btn-hero:hover { background: var(--teal-dark); }

/* Getting started steps */
.getting-started { margin-top: 8px; }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.step-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
  position: relative;
}
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.step-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.step-card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }

/* Carolyn's unlisted guide page */
.guide-list { margin: 0 0 4px; padding-left: 22px; color: var(--ink-soft); }
.guide-list li { margin-bottom: 8px; line-height: 1.55; }
.guide-list-numbered li { margin-bottom: 10px; }

/* WPM clarification callout. The most misread thing on the site is that the
   speed number describes the audio, not how fast the student has to type. */
.wpm-callout {
  background: var(--amber-tint);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 72ch;
  padding: 16px 20px;
}
.wpm-callout strong { color: var(--amber-ink); display: block; margin-bottom: 4px; }

/* Curriculum path */
.curriculum-path { margin-top: 16px; }
.phase-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
}
.phase-label {
  font-weight: 700;
  font-size: 1rem;
  color: var(--teal);
  margin-bottom: 8px;
}
.phase-detail { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }
.phase-detail strong { color: var(--ink); }
/* Says out loud whether the student types or talks into a mask at this phase.
   Beginners assume they need $2,000 of gear on day one; this kills that. */
.phase-method {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--ink-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}
.phase-arrow {
  text-align: center;
  font-size: 1.4rem;
  color: var(--ink-muted);
  padding: 4px 0;
}

/* FAQ */
.faq-section { margin-top: 8px; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 8px;
  background: var(--surface);
}
.faq-item summary {
  padding: 14px 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "+";
  display: inline-block;
  width: 20px;
  font-weight: 700;
  color: var(--teal);
}
.faq-item[open] summary::before { content: "\2212"; }
.faq-item p {
  padding: 0 20px 16px 40px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 76ch;
}

/* Hamburger menu toggle (hidden on desktop) */

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 8px;
  margin: -8px;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

/* Listen mode toggle */

.listen-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--amber-tint);
  border: 1px solid var(--amber);
  border-radius: 999px;
  padding: 8px 16px;
  color: var(--amber-ink);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  margin-bottom: 16px;
}

.listen-toggle:hover { background: var(--amber); color: #2A1B05; }
.listen-toggle.active { background: var(--amber); color: #2A1B05; }

.listen-hidden { display: none; }

/* Narrow screens: phone-friendly, thumb-tappable */

@media (max-width: 720px) {
  html { font-size: 16px; }
  .wrap { padding: 0 16px; }

  /* Hamburger nav */
  .header-inner { flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; }

  .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding: 4px 0 8px;
  }

  .site-nav.open { display: flex; }

  .site-nav a {
    margin-left: 0;
    margin-right: 0;
    padding: 12px 0;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .site-nav a:last-child { border-bottom: none; }

  /* Audio player: full width, large controls */
  .player { width: 100%; min-height: 54px; }

  /* Audio dock: sticks to the top of the viewport so play, rewind and forward
     stay reachable while she scrolls through what she is typing. */
  .audio-dock {
    position: sticky;
    top: 0;
    z-index: 60;
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin: 0 -16px 16px;
    padding: 10px 16px 12px;
    background: var(--surface);
    box-shadow: 0 2px 8px rgba(15, 76, 92, 0.12);
  }

  .audio-controls { gap: 8px; }
  .audio-buttons { gap: 24px; }

  /* Bigger again under a thumb than under a mouse. */
  .audio-skip {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
  }

  .audio-play {
    width: 84px;
    height: 84px;
    min-width: 84px;
    min-height: 84px;
  }

  .audio-skip .audio-glyph { font-size: 2.2rem; }
  .audio-play .audio-glyph { font-size: 2rem; }

  /* Speed and passage chips: larger touch targets */
  .chip {
    padding: 12px 18px;
    font-size: 1rem;
    min-height: 44px;
  }

  .speed-picker, .passage-picker { gap: 8px; }

  /* Textarea: taller on mobile for real typing room */
  .score-form textarea {
    min-height: 50vh;
    font-size: 16px; /* prevents iOS zoom on focus */
  }

  /* All inputs 16px to prevent iOS auto-zoom */
  .score-form input[type="text"] { font-size: 16px; }

  /* Timer bar: sticky on mobile so it stays visible while scrolling. It parks
     under the audio dock, whose height the practice script publishes, rather
     than sliding underneath it. */
  .timer-bar {
    position: sticky;
    top: var(--audio-dock-height, 0px);
    z-index: 50;
    border-radius: 0;
    margin-left: -16px;
    margin-right: -16px;
    padding: 10px 16px;
  }

  .timer { font-size: 1.4rem; }

  /* Timer buttons: larger touch targets */
  .timer-buttons .btn-small {
    padding: 10px 16px;
    min-height: 44px;
    min-width: 44px;
    font-size: 0.95rem;
  }

  /* Submit button: full width, prominent */
  .score-form .btn {
    width: 100%;
    padding: 16px 24px;
    font-size: 1.1rem;
    align-self: stretch;
  }

  /* Action rows: stack vertically */
  .action-row {
    flex-direction: column;
  }

  .action-row .btn {
    width: 100%;
    text-align: center;
  }

  /* Result banner: stack on mobile */
  .result-figure { text-align: left; }

  /* Tables: horizontal scroll in a container */
  .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Marked passage: readable at arm's length, capped so it does not become
     the whole page */
  .passage-diff {
    font-size: 0.98rem;
    line-height: 2.2;
    padding: 14px 14px;
    max-height: 55vh;
  }

  /* Exam clock */
  .exam-clock { font-size: 2.2rem; }
  .exam-clock-bar { gap: 12px; }

  /* Heatmap */
  .heatmap { gap: 3px; }

  /* Stat row: single column */
  .stat-row { grid-template-columns: 1fr; }

  /* Card grid: single column */
  .card-grid { grid-template-columns: 1fr; }

  /* Club row: single column */
  .club-row { grid-template-columns: 1fr; }

  /* Steps grid: single column */
  .steps-grid { grid-template-columns: 1fr; }

  /* Hero button: full width */
  .btn-hero { display: block; text-align: center; }

  /* Streak bar: stack */
  .streak-bar { flex-direction: column; gap: 6px; }

  /* Listen toggle: full width on mobile */
  .listen-toggle {
    width: 100%;
    justify-content: center;
    padding: 14px 18px;
    font-size: 1rem;
  }

  /* Focus items: tighter padding */
  .focus-item { padding: 14px 16px; }

  /* Banner line: stack */
  .banner-line { flex-direction: column; gap: 8px; }
  .banner-text { min-width: 0; }

  /* Phase bar: allow horizontal scroll on mobile */
  .phase-bar-track { min-width: 520px; }
  .phase-step { width: 70px; }
  .phase-circle { width: 34px; height: 34px; }
  .phase-label-text { font-size: 0.72rem; max-width: 65px; }
  .phase-connector { margin-top: 17px; }

  /* Phase card details stack vertically */
  .phase-details > div { flex-direction: column; gap: 4px; }
  .phase-details dd { text-align: left; }

  /* Cert projection */
  .cert-projection-panel { padding: 20px 16px; }
  .cert-date { font-size: 1.6rem; }
  .cert-headline { font-size: 1.05rem; }
}

/* Touch-friendly defaults for all touch devices */
@media (pointer: coarse) {
  .chip { min-height: 44px; }
  .btn { min-height: 44px; }
  .btn-small { min-height: 44px; padding: 10px 14px; }
  .site-nav a { min-height: 44px; }
  .faq-item summary { min-height: 44px; display: flex; align-items: center; }
  .audio-skip { min-width: 72px; min-height: 72px; width: 72px; height: 72px; }
  .audio-play { min-width: 84px; min-height: 84px; width: 84px; height: 84px; }
  .audio-skip .audio-glyph { font-size: 2.2rem; }
  .audio-play .audio-glyph { font-size: 2rem; }
  .audio-seek { height: 32px; }
}

/* Phase progress bar */

.phase-bar-section {
  margin-bottom: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.phase-bar-track {
  display: flex;
  align-items: flex-start;
  min-width: 600px;
  padding: 8px 0;
}

.phase-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: 90px;
}

.phase-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink-muted);
  transition: all 0.2s;
}

.phase-step.current .phase-circle {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  box-shadow: 0 0 0 4px var(--teal-tint);
}

.phase-step.completed .phase-circle {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.phase-step.future .phase-circle {
  background: var(--surface-sunk);
  border-color: var(--line);
  color: var(--ink-muted);
}

.phase-check { font-size: 1.1rem; line-height: 1; }
.phase-num { font-size: 0.9rem; }

.phase-label-text {
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  color: var(--ink-muted);
  line-height: 1.2;
  max-width: 80px;
}

.phase-step.current .phase-label-text { color: var(--teal-dark); }
.phase-step.completed .phase-label-text { color: var(--green-ink); }

.phase-connector {
  flex: 1;
  height: 2px;
  background: var(--line);
  margin-top: 20px;
  min-width: 20px;
}

.phase-connector.completed {
  background: var(--green);
}

.phase-connector.current {
  background: linear-gradient(to right, var(--teal), var(--line));
}

/* Phase card */

.phase-card-panel { margin-bottom: 24px; }

.phase-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.phase-card-header h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.phase-description {
  color: var(--ink-soft);
  margin: 0 0 16px;
  max-width: 66ch;
  line-height: 1.55;
}

.phase-details {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.phase-details > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.phase-details > div:last-child { border-bottom: none; }

.phase-details dt {
  color: var(--ink-muted);
  font-size: 0.92rem;
  flex-shrink: 0;
  min-width: 130px;
}

.phase-details dd {
  margin: 0;
  font-weight: 600;
  font-size: 0.92rem;
  text-align: right;
}

/* Cert projection */

.cert-projection-panel {
  text-align: center;
  background: var(--teal-tint);
  border-color: var(--teal);
  margin-bottom: 24px;
  padding: 28px 24px;
}

.cert-headline {
  margin: 0;
  font-size: 1.15rem;
  color: var(--teal-dark);
  font-weight: 600;
}

.cert-date {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--teal);
  margin-top: 4px;
  line-height: 1.2;
}

.cert-salary {
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-size: 0.9rem;
}

/* Accuracy at speed (stuck indicator) */

.accuracy-stuck-panel {
  background: var(--amber-tint);
  border-color: var(--amber);
  margin-bottom: 24px;
}

.accuracy-stuck-text {
  margin: 0;
  color: var(--amber-ink);
  font-size: 0.95rem;
  line-height: 1.55;
}

.accuracy-stuck-text strong { color: var(--ink); }

/* How It Works: journey timeline */

.journey-timeline {
  margin-top: 16px;
}

.journey-phase {
  display: flex;
  gap: 20px;
}

.journey-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 40px;
}

.journey-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.journey-line {
  flex: 1;
  width: 2px;
  background: var(--line);
  min-height: 20px;
}

.journey-line.last {
  background: transparent;
}

.journey-content {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}

.journey-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.journey-header h3 { margin: 0; font-size: 1.1rem; }

.journey-what {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 66ch;
}

.journey-details {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.journey-details > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
}

.journey-details > div:last-child { border-bottom: none; }

.journey-details dt {
  color: var(--ink-muted);
  font-size: 0.92rem;
  flex-shrink: 0;
}

.journey-details dd {
  margin: 0;
  font-weight: 600;
  font-size: 0.92rem;
  text-align: right;
}

/* Why cards */

.why-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

.why-icon {
  font-size: 1.6rem;
  margin-bottom: 8px;
  line-height: 1;
}

.why-card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.why-card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }

/* Cost comparison */

.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.compare-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
}

.compare-ours {
  background: var(--green-tint);
  border-color: var(--green);
  border-top: 4px solid var(--green);
}

.compare-theirs {
  background: var(--surface-sunk);
  border-top: 4px solid var(--line);
}

.compare-label {
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

.compare-ours .compare-label { color: var(--green-ink); }

.compare-price {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}

.compare-note {
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin-bottom: 18px;
}

.compare-details {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.compare-details > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}

.compare-details > div:last-child { border-bottom: none; }
.compare-details dt { color: var(--ink-muted); font-size: 0.9rem; flex-shrink: 0; }
.compare-details dd { margin: 0; font-weight: 600; font-size: 0.9rem; text-align: right; }

.compare-ours .compare-details > div { border-bottom-color: rgba(45, 143, 95, 0.2); }

/* CTA section */

.cta-section {
  text-align: center;
  background: var(--teal-tint);
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  padding: 40px 24px;
}

.cta-section h2 { color: var(--teal-dark); }
.cta-section .section-note { margin: 0 auto 20px; }

/* How It Works responsive */

@media (max-width: 720px) {
  .journey-phase { gap: 12px; }
  .journey-marker { width: 32px; }
  .journey-number { width: 32px; height: 32px; font-size: 0.9rem; }
  .journey-content { padding: 16px; }
  .journey-details > div { flex-direction: column; gap: 2px; }
  .journey-details dd { text-align: left; }
  .compare-grid { grid-template-columns: 1fr; }
  .compare-price { font-size: 1.6rem; }
  .cta-section { padding: 28px 16px; }
}

/* ── Compound curve ──────────────────────────────────────────────────────────
   The one place on the site where color carries a value rather than a label:
   the curve runs green above the 95 percent gate and red below it. The same
   fact is already in the mark's position against the reference line, so the
   legend below is a convenience, not the only way to read the chart. */

.curve-panel { border-top: 3px solid var(--teal); }

.curve-headline {
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 0 0 6px;
  max-width: 62ch;
}

.curve-gain { font-weight: 700; white-space: nowrap; }
.curve-gain.up { color: var(--green-ink); }
.curve-gain.down { color: var(--amber-ink); }

.curve-legend {
  list-style: none;
  margin: 10px 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.curve-legend li { display: flex; align-items: center; gap: 7px; }

.curve-swatch {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}

.swatch-pass { background: #1E6B45; }
.swatch-fail { background: #9B2C2C; }

.tier-table { margin-top: 20px; }

/* ── Milestones ───────────────────────────────────────────────────────────── */

.milestone-streak .streak-flame { margin-right: 4px; }

.milestone-streak {
  background: var(--amber-tint);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 0 0 18px;
  color: var(--amber-ink);
}

.milestone-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.milestone {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface-sunk);
  border-left: 4px solid var(--line);
}

.milestone-start { border-left-color: var(--ink-muted); }
.milestone-speed { border-left-color: var(--teal); }
.milestone-mastery { border-left-color: var(--green); }
.milestone-exam { border-left-color: var(--amber); }

.milestone-date {
  color: var(--ink-muted);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  min-width: 10ch;
  flex-shrink: 0;
}

.milestone-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 220px; }
.milestone-label { font-size: 1.02rem; }
.milestone-detail { color: var(--ink-soft); font-size: 0.9rem; }
.milestone-link { color: var(--teal); font-weight: 600; font-size: 0.88rem; flex-shrink: 0; }

/* ── Error type trends ────────────────────────────────────────────────────── */

.subhead {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin: 26px 0 8px;
}

.subhead:first-of-type { margin-top: 0; }

.trend-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.trend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.trend-improving { border-left: 4px solid var(--green); }
.trend-stuck { border-left: 4px solid var(--amber); }
.trend-worsening { border-left: 4px solid var(--red); }

.trend-name { font-weight: 600; min-width: 14ch; }

.trend-sequence {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  font-size: 0.92rem;
  min-width: 12ch;
}

.trend-spark { display: inline-flex; align-items: center; }
.sparkline { width: 96px; height: 26px; display: block; }

.trend-verdict { color: var(--ink-soft); font-size: 0.92rem; flex: 1; min-width: 160px; }
.trend-arrow { font-weight: 700; margin-right: 4px; }
.trend-improving .trend-arrow { color: var(--green-ink); }
.trend-worsening .trend-arrow { color: var(--red-ink); }
.trend-stuck .trend-arrow { color: var(--amber-ink); }

/* ── Session history ──────────────────────────────────────────────────────── */

.history-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.passage-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.passage-filter label { color: var(--ink-muted); font-size: 0.9rem; }

.passage-filter select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  max-width: 260px;
}

.passage-filter select:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

.history-row:hover { background: var(--surface-sunk); }
.history-open { color: var(--teal); font-weight: 600; }

/* The timestamp and the speed are single facts, not prose. Wrapping them turns
   every row into two lines and doubles the height of a twenty session list. */
.history-table td:first-child,
.history-table td:nth-child(3) { white-space: nowrap; }

.history-compare {
  color: var(--teal);
  font-size: 0.82rem;
  font-weight: 600;
  margin-left: 8px;
  white-space: nowrap;
}

/* ── First attempt against latest attempt ─────────────────────────────────── */

.attempt-verdict { border-left: 4px solid var(--line); }
.attempt-better { border-left-color: var(--green); background: var(--green-tint); }
.attempt-flat { border-left-color: var(--amber); }

.attempt-headline { font-size: 1.35rem; margin: 0 0 4px; }
.attempt-sub { color: var(--ink-soft); margin: 0; font-variant-numeric: tabular-nums; }

.attempt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.attempt-card { margin: 0; }
.attempt-when { color: var(--ink-muted); font-size: 0.9rem; margin: 0 0 12px; }
.attempt-change { font-variant-numeric: tabular-nums; }
.change-better { color: var(--green-ink); font-weight: 600; }
.change-worse { color: var(--red-ink); font-weight: 600; }

/* ── Compound view on a phone ─────────────────────────────────────────────── */

@media (max-width: 720px) {
  .curve-headline { font-size: 1.08rem; }
  .milestone { gap: 6px; }
  .milestone-date { min-width: 100%; }
  .trend { gap: 8px 12px; }
  .trend-name, .trend-sequence { min-width: 0; }
  .trend-verdict { min-width: 100%; }
  .history-filters { gap: 12px; }
  .passage-filter select { max-width: 100%; flex: 1; }
  .attempt-grid { grid-template-columns: 1fr; }
  .attempt-headline { font-size: 1.15rem; }
}

/* Auth pages */

.auth-page {
  display: flex;
  justify-content: center;
  padding-top: 32px;
}

.auth-card {
  width: 100%;
  max-width: 440px;
}

.auth-card h1 {
  margin-bottom: 4px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.auth-form label {
  font-weight: 600;
  margin-bottom: 6px;
}

.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  margin-bottom: 16px;
  width: 100%;
}

.auth-form input:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}

.auth-form .btn {
  margin-top: 8px;
  width: 100%;
}

.field-hint {
  display: block;
  color: var(--ink-muted);
  font-size: 0.85rem;
  margin-top: -10px;
  margin-bottom: 16px;
}

.auth-error {
  background: var(--red-tint);
  color: var(--red-ink);
  border: 1px solid var(--red);
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 12px;
  font-weight: 500;
}

.auth-switch {
  text-align: center;
  margin-top: 20px;
  color: var(--ink-muted);
}

.auth-switch a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}

.auth-switch a:hover {
  text-decoration: underline;
}

.user-menu {
  color: #D7E6EA;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-menu .user-name {
  font-weight: 500;
}

.user-menu .btn-logout {
  background: transparent;
  color: #D7E6EA;
  border: 1px solid rgba(215, 230, 234, 0.3);
  padding: 6px 14px;
  font-size: 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}

.user-menu .btn-logout:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

@media (max-width: 600px) {
  .auth-card {
    max-width: 100%;
  }

  .auth-form input[type="email"],
  .auth-form input[type="password"],
  .auth-form input[type="text"] {
    font-size: 16px; /* prevents iOS auto-zoom */
  }
}

/* Pricing page */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 28px 0;
}

.pricing-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.pricing-card-featured {
  border: 2px solid var(--teal);
  box-shadow: 0 2px 6px rgba(15, 76, 92, 0.12), 0 8px 24px rgba(15, 76, 92, 0.08);
}

.pricing-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--teal);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 14px;
  border-radius: 0 0 0 var(--radius);
}

.pricing-card-header {
  text-align: center;
  padding: 28px 20px 16px;
  border-bottom: 1px solid var(--line);
}

.pricing-card-header h2 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  color: var(--teal);
}

.pricing-amount {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
}

.pricing-unit {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-muted);
}

.pricing-period {
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin-top: 4px;
}

.pricing-card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pricing-desc {
  color: var(--ink-soft);
  margin: 0 0 14px;
  font-size: 0.92rem;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  flex: 1;
}

.pricing-features li {
  padding: 5px 0 5px 22px;
  position: relative;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.pricing-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

.pricing-features li strong {
  color: var(--ink);
}

.pricing-equipment {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0 0 18px;
  padding: 10px 12px;
  background: var(--surface-sunk);
  border-radius: 6px;
}

@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
}

details summary {
  list-style: none;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary::before {
  content: "▸ ";
  color: var(--teal);
  font-weight: 700;
}
details[open] summary::before {
  content: "▾ ";
}

/* --- Auth success message --- */
.auth-success {
  background: var(--green-tint);
  color: var(--green-ink);
  padding: 10px 14px;
  border-radius: 6px;
  margin: 0 0 16px;
  font-size: 0.95rem;
}

/* --- Q&A tutorial example block --- */
.example-block {
  background: var(--surface-sunk);
  border-left: 3px solid var(--teal);
  padding: 16px 20px;
  border-radius: 0 6px 6px 0;
  font-family: monospace;
  line-height: 1.8;
}
.example-block p { margin: 4px 0; }

/* --- Guided path --- */
.guided-path {
  list-style: none;
  padding: 0;
  margin: 0;
}
.path-step {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.path-step:last-child { border-bottom: none; }
.path-marker {
  flex-shrink: 0;
  width: 28px;
  display: flex;
  justify-content: center;
  padding-top: 2px;
}
.path-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green-ink);
  font-size: 14px;
  font-weight: 700;
}
.path-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--line);
  margin-top: 6px;
}
.path-dot-active {
  background: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-tint);
}
.path-body { flex: 1; }
.path-title {
  margin: 0 0 4px;
  font-size: 1rem;
}
.path-desc {
  margin: 0 0 8px;
  color: var(--ink-muted);
  font-size: 0.92rem;
}
.path-extra {
  margin: 0 0 8px;
  font-size: 0.88rem;
}
.path-done .path-title { color: var(--ink-muted); }

/* --- Phase 1 certificate --- */
.phase1-cert-panel {
  border: 2px solid var(--gold);
  background: linear-gradient(135deg, var(--surface) 0%, var(--gold-tint, rgba(212,146,42,0.08)) 100%);
}
.cert-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.cert-icon {
  font-size: 2rem;
  line-height: 1;
}
.cert-badge h2 {
  margin: 0;
  color: var(--gold, #D4922A);
}
.cert-legs {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 16px;
  margin: 8px 0 0;
}
.cert-legs li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
}

/* ── Echo Drill ── */

.echo-drill-cta {
  border-left: 4px solid var(--teal);
}

.echo-drill-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.echo-drill-cta h2 { margin-bottom: 6px; }
.echo-drill-cta p { color: var(--ink-soft); margin: 0; max-width: 56ch; }

/* Setup / calibration */

.echo-setup { margin-bottom: 20px; }

.echo-setup-copy {
  margin-bottom: 16px;
  max-width: 62ch;
}

.echo-setup-copy p { margin: 0 0 10px; }

.calibration-status {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 16px;
}

.cal-message { margin: 0; }

.cal-indicator {
  height: 6px;
  border-radius: 3px;
  margin-top: 10px;
  transition: background 0.3s;
}

.cal-checking { background: var(--amber); animation: cal-pulse 1s infinite alternate; }
.cal-pass { background: var(--green); }
.cal-fail { background: var(--red); }

@keyframes cal-pulse {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

/* Active drill */

.echo-active { margin-top: 12px; }

/* Pace bar */

.pace-bar-container {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 16px;
}

.pace-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 0.95rem;
}

.pace-status-text {
  font-size: 0.88rem;
  font-weight: 500;
}

.pace-text-sync { color: var(--green-ink); }
.pace-text-behind { color: var(--amber-ink); }
.pace-text-lost { color: var(--red-ink); }

.pace-bar-track {
  height: 16px;
  background: var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.pace-bar {
  height: 100%;
  width: 0%;
  border-radius: 8px;
  transition: width 0.4s ease, background 0.3s;
  background: var(--line);
}

.pace-sync { background: var(--green); }
.pace-behind { background: var(--amber); }
.pace-lost { background: var(--red); }

/* Reference text display */

.echo-reference {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
  max-height: 40vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.echo-text {
  font-size: 1.02rem;
  line-height: 2.0;
  color: var(--ink);
}

.echo-word { transition: background 0.2s, color 0.2s; border-radius: 3px; padding: 1px 2px; }
.echo-word-past { color: var(--ink-muted); }
.echo-word-current { background: var(--teal-tint); color: var(--teal-dark); font-weight: 600; }

/* What the mic hears */

.echo-live {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.echo-heard {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  min-height: 3em;
  font-style: italic;
}

/* Results */

.echo-results { margin-top: 12px; }

.results-pass {
  background: var(--green-tint);
  border: 1px solid var(--green);
  border-radius: var(--radius);
  padding: 18px 22px;
  color: var(--green-ink);
  font-size: 1.02rem;
  line-height: 1.6;
}

.results-struggled {
  background: var(--amber-tint);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  padding: 18px 22px;
  color: var(--amber-ink);
  font-size: 1.02rem;
  line-height: 1.6;
}

.results-message p { margin: 0; }

/* Responsive: large touch targets on mobile */

@media (max-width: 600px) {
  .echo-drill-cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .pace-bar-track { height: 20px; }
  .pace-bar-label { flex-direction: column; gap: 4px; }
}

/* ─── Landing page (anonymous visitors) ─── */

.landing-hero {
  text-align: center;
  padding: 48px 16px 36px;
}
.landing-hero h1 {
  font-size: 2.2rem;
  line-height: 1.2;
  max-width: 700px;
  margin: 0 auto 16px;
}
.landing-hero .hero-sub {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.hero-note {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin: 12px 0 0;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin: 16px 0;
}
.stat-card {
  text-align: center;
  padding: 16px 8px;
}
.stat-number {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--teal);
  line-height: 1.1;
}
.stat-label {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-top: 4px;
}
.stat-source {
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-top: 12px;
  text-align: center;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 16px 0;
}
.step-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--teal);
  color: white;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 8px;
}
.step-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}
.step-card p {
  font-size: 0.92rem;
  line-height: 1.5;
}
.step-equipment {
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin-top: 8px;
  font-style: italic;
}

/* Landing FAQ — full-width, justified answers */
.landing-faq details {
  width: 100%;
  border-bottom: 1px solid var(--line);
}
.landing-faq details:last-of-type {
  border-bottom: none;
}
.landing-faq details p {
  text-align: justify;
}

/* Nav signup button */
.btn-nav-signup {
  background: var(--teal);
  color: white !important;
  padding: 6px 14px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  margin-left: 4px;
}
.btn-nav-signup:hover {
  background: var(--teal-dark, #0a3640);
}

/* Nav upgrade button (free users only) */
.btn-nav-upgrade {
  background: var(--amber, #d4922a);
  color: white !important;
  padding: 6px 14px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  margin-left: 4px;
  letter-spacing: 0.02em;
}
.btn-nav-upgrade:hover {
  background: var(--amber-dark, #b87a1e);
  color: white !important;
}

@media (max-width: 600px) {
  .landing-hero h1 { font-size: 1.6rem; }
  .stat-number { font-size: 1.4rem; }
  .steps-grid { grid-template-columns: 1fr; }
}