/* =========================================================================
   Cadence — design system
   Plain, quiet, paper-like. Inspired by Notion's neutral palette and
   Ruby on Rails' documentation red. Flat surfaces, 1px rules, no shadows
   except where a floating layer genuinely needs one.
   ========================================================================= */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol[role="list"], ul[role="list"] { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

/* ---------- tokens ---------- */
:root {
  color-scheme: light;

  --bg:            #ffffff;
  --bg-subtle:     #f7f7f5;
  --bg-hover:      #f1f1ef;
  --bg-active:     #e9e9e6;
  --surface:       #ffffff;
  --surface-raised:#ffffff;

  --text:          #37352f;
  --text-strong:   #1d1c1a;
  --muted:         #787774;
  --faint:         #9b9a97;

  --border:        #e9e9e7;
  --border-strong: #d3d1cb;

  --accent:        #c8102e;   /* Rails red */
  --accent-hover:  #a20d25;
  --accent-soft:   #fdf2f3;
  --accent-border: #f0c9ce;

  --good:          #0f7b6c;
  --good-bg:       #edf3ec;
  --good-border:   #c3ddd6;
  --warn:          #b25e09;
  --warn-bg:       #faece0;
  --warn-border:   #edcfae;
  --bad:           #d44c47;
  --bad-bg:        #fdecec;
  --bad-border:    #f2c9c7;

  --focus:         #c8102e;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --radius:    3px;   /* Notion's corner */
  --radius-lg: 6px;
  --radius-pill: 999px;

  --measure: 44rem;   /* reading column */
  --page:    60rem;   /* page column   */
  --reading-scale: 1; /* set from Settings */

  --shadow-pop: 0 1px 2px rgba(15,15,15,.05), 0 8px 24px rgba(15,15,15,.12);
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #191919;
  --bg-subtle:     #222222;
  --bg-hover:      #2c2c2c;
  --bg-active:     #353535;
  --surface:       #202020;
  --surface-raised:#252525;

  --text:          #d4d4d4;
  --text-strong:   #efefef;
  --muted:         #9a9a97;
  --faint:         #7c7c79;

  --border:        #2f2f2f;
  --border-strong: #414141;

  --accent:        #e5484d;
  --accent-hover:  #f2666a;
  --accent-soft:   #2a1a1b;
  --accent-border: #4a2528;

  --good:          #4cc2a8;
  --good-bg:       #16241f;
  --good-border:   #23503f;
  --warn:          #e0a458;
  --warn-bg:       #2a2117;
  --warn-border:   #513d22;
  --bad:           #f0736e;
  --bad-bg:        #2b1a1a;
  --bad-border:    #52282a;

  --focus:         #e5484d;
  --shadow-pop: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5);
}

/* ---------- base ---------- */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #fff; padding: 8px 14px; z-index: 100;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 24px;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text-strong); font-size: 15px;
  flex: none;
}
.brand-mark {
  width: 14px; height: 14px; border-radius: 3px;
  background: var(--accent);
  position: relative;
}
.brand-mark::after {
  content: ""; position: absolute; inset: 4px 4px 4px 4px;
  background: var(--bg); border-radius: 1px;
  /* a small solid reading bar inside the mark */
  inset: 5.5px 3px 5.5px 3px;
}
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a {
  text-decoration: none; font-size: 14px; color: var(--muted);
  padding: 5px 10px; border-radius: var(--radius);
  transition: background .12s ease, color .12s ease;
  white-space: nowrap;
}
.nav a:hover { background: var(--bg-hover); color: var(--text-strong); }
.nav a[aria-current="page"] { color: var(--text-strong); font-weight: 500; background: var(--bg-hover); }

/* ---------- layout ---------- */
.main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 44px 24px 96px;
}
.main:focus { outline: none; }
.narrow { max-width: var(--measure); }

.page-head { margin-bottom: 32px; }
.eyebrow {
  font-size: 13px; color: var(--muted); margin-bottom: 10px;
  letter-spacing: .01em;
}
h1.title {
  font-size: 34px; line-height: 1.2; font-weight: 650;
  letter-spacing: -0.022em; color: var(--text-strong);
}
h1.title.sm { font-size: 26px; }
.subtitle { margin-top: 10px; color: var(--muted); font-size: 16px; max-width: 40rem; line-height: 1.6; }

.section { margin-top: 44px; }
.section-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 14px;
}
h2.section-title {
  font-size: 13px; font-weight: 600; color: var(--muted);
  letter-spacing: .04em; text-transform: uppercase;
}
.section-head .spacer { flex: 1; }
.section-head a { font-size: 13px; color: var(--muted); text-decoration: none; }
.section-head a:hover { color: var(--accent); text-decoration: underline; }

.rule { height: 1px; background: var(--border); border: 0; margin: 40px 0; }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  padding: 7px 13px;
  font-size: 14px; font-weight: 500; line-height: 1.35;
  text-decoration: none; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { background: var(--bg-hover); }
.btn:active { background: var(--bg-active); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btn-primary {
  --btn-bg: var(--text-strong); --btn-fg: var(--bg); --btn-bd: var(--text-strong);
}
.btn-primary:hover { --btn-bg: #000; }
[data-theme="dark"] .btn-primary:hover { --btn-bg: #fff; }

.btn-accent { --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: var(--accent); }
.btn-accent:hover { --btn-bg: var(--accent-hover); }

.btn-quiet { --btn-bd: transparent; --btn-bg: transparent; color: var(--muted); }
.btn-quiet:hover { background: var(--bg-hover); color: var(--text-strong); }

.btn-sm { padding: 4px 9px; font-size: 13px; }
.btn-lg { padding: 10px 18px; font-size: 15px; }
.btn-icon { padding: 6px; }
.btn .ico { width: 15px; height: 15px; flex: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); border-radius: var(--radius);
  padding: 5px 11px; font-size: 13.5px; text-decoration: none;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.chip:hover { background: var(--bg-hover); color: var(--text-strong); }
.chip[aria-current="true"], .chip.is-active {
  border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent);
  font-weight: 500;
}
.chip .count { color: var(--faint); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.chip[aria-current="true"] .count { color: inherit; opacity: .7; }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--muted); letter-spacing: .01em;
}
.tag-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong); flex: none; }
.meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--muted); }
.meta-row .sep { color: var(--border-strong); }

/* ---------- cards ---------- */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 20px 22px;
}
.card-link { display: block; text-decoration: none; color: inherit; }
.card-link:hover { background: var(--bg-subtle); }

.feature {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 24px 26px 22px;
  position: relative;
  overflow: hidden;
}
.feature::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent);
}
.feature-title {
  font-size: 23px; font-weight: 620; letter-spacing: -0.015em;
  color: var(--text-strong); line-height: 1.25; margin-top: 10px;
}
.feature-byline { margin-top: 6px; font-size: 14px; color: var(--muted); }
.feature-excerpt {
  font-family: var(--font-serif);
  margin-top: 16px; font-size: 17px; line-height: 1.62; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.feature-actions { margin-top: 20px; }

/* ---------- list rows ---------- */
.rows { border-top: 1px solid var(--border); }
.row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 10px; margin: 0 -10px;
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit; border-radius: 0;
  transition: background .12s ease;
}
.row:hover { background: var(--bg-subtle); }
.row-main { min-width: 0; flex: 1; }
.row-title {
  font-size: 15px; font-weight: 500; color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-sub {
  font-size: 13px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-side { font-size: 12.5px; color: var(--faint); flex: none; display: flex; align-items: center; gap: 10px; }

/* ---------- reader ---------- */
.reader-head { margin-bottom: 28px; }
.reader-title {
  font-size: 30px; line-height: 1.22; font-weight: 650;
  letter-spacing: -0.02em; color: var(--text-strong); margin-top: 10px;
}
.source-line {
  margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.5;
  overflow-wrap: anywhere;
}
.note-callout {
  margin-top: 20px; border: 1px solid var(--border); border-left: 2px solid var(--accent);
  border-radius: var(--radius); background: var(--bg-subtle);
  padding: 11px 14px; font-size: 14px; line-height: 1.55; color: var(--text);
}
.note-callout b { font-weight: 600; color: var(--text-strong); }

/* The playback block floats at the bottom of the screen: on a phone that is where a
   thumb is. Sticky rather than fixed, so it stays in the flow — while there is more
   article below the fold it hovers over the text, and at the end of the article it
   settles after it, where it can hide neither the last line nor the continue block.
   The near-opaque blur keeps the text behind it from showing through the buttons, and
   the safe-area padding keeps it clear of a phone's home indicator. */
.toolbar {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  margin-top: 10px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border);
}
.toolbar .grow { flex: 1; }
.toolbar-label { font-size: 12.5px; color: var(--muted); }
/* The speed select is never squeezed: it is what shows the current rate, and a
   flex-shrunk select clips its own text rather than wrapping it. */
.toolbar select { flex: none; }

.passage {
  font-family: var(--font-serif);
  font-size: calc(20px * var(--reading-scale, 1));
  line-height: 1.82; color: var(--text);
  margin-top: 26px;
  letter-spacing: .002em;
}
.passage p { margin-bottom: 1.15em; }
.passage p:last-child { margin-bottom: 0; }
.passage.is-dim { opacity: .45; }

/* verse keeps the shape it was printed in */
.verse { margin-bottom: 1.15em; }
.verse:last-child { margin-bottom: 0; }
.verse-line { padding-left: calc(var(--indent, 0) * 0.42em); }

/* tappable words */
.w {
  border-radius: 2px;
  cursor: pointer;
  transition: background .1s ease, color .1s ease;
  /* One tap reads from this sentence, two taps open the definition. Without this,
     a double tap is claimed by the browser's double-tap-to-zoom and the second
     tap never arrives as a dblclick. Panning and pinch-zoom still work. */
  touch-action: manipulation;
}
.w:hover { background: var(--accent-soft); color: var(--accent); }
.sent { border-radius: 3px; }
/* A sentence kept for later is tinted, very lightly and in a neutral grey: the
   reading text should stay quiet, and it must not be mistaken for the mark that
   shows which sentence is being spoken. Defined before that one, so speaking wins
   when a sentence is both kept and being read. */
.sent.is-saved { background: var(--bg-hover); }
.sent.is-speaking { background: var(--accent-soft); }
.sent-block { position: relative; }
.sent-btn {
  position: absolute; left: -34px; top: .38em;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--faint); opacity: 0;
  transition: opacity .12s ease, background .12s ease;
}
.sent-block:hover .sent-btn { opacity: 1; }
.sent-btn:hover { background: var(--bg-hover); color: var(--accent); }
@media (max-width: 780px) { .sent-btn { display: none; } }

/* ---------- practice ---------- */
.practice-stage {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); padding: 26px 28px; margin-top: 22px;
}
.practice-text {
  font-family: var(--font-serif);
  font-size: calc(21px * var(--reading-scale, 1));
  line-height: 1.9;
  color: var(--text-strong);
}
.practice-text p { margin-bottom: 1em; }
.practice-text p:last-child { margin-bottom: 0; }

.v { padding: 1px 1px; border-radius: 2px; transition: background .15s ease, color .15s ease; }
.v-correct { color: var(--text-strong); border-bottom: 2px solid var(--good-border); }
.v-close   { color: var(--warn); border-bottom: 2px dashed var(--warn-border); background: var(--warn-bg); }
.v-miss    { color: var(--bad); border-bottom: 2px solid var(--bad-border); background: var(--bad-bg); }
.v-extra   { color: var(--faint); text-decoration: line-through; }
.v-pending { color: var(--faint); }
.w.is-now { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); }

.mic-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 26px 0 6px; }
.mic {
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 0; position: relative;
  transition: transform .12s ease, background .12s ease;
}
.mic:hover { background: var(--accent-hover); }
.mic:active { transform: scale(.96); }
.mic .ico { width: 26px; height: 26px; }
.mic.is-live { background: var(--accent); }
.mic.is-live::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: .5;
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(.92); opacity: .55; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.mic-hint { font-size: 13.5px; color: var(--muted); text-align: center; max-width: 30rem; line-height: 1.5; }
.level {
  width: 150px; height: 3px; border-radius: 2px; background: var(--border); overflow: hidden;
}
.level > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .08s linear; }

.transcript-live {
  font-family: var(--font-serif); font-size: 17px; line-height: 1.6;
  color: var(--muted); min-height: 22px; text-align: center; max-width: 34rem;
}
.transcript-live .interim { color: var(--faint); font-style: italic; }

.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--muted); margin-top: 18px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 16px; height: 3px; border-radius: 2px; display: block; }
.legend .k-correct { background: var(--good-border); }
.legend .k-close { background: var(--warn-border); }
.legend .k-miss { background: var(--bad-border); }

/* soft summary — deliberately not a game score */
.summary { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 4px; }
.metric { min-width: 92px; }
.metric-num {
  font-size: 27px; font-weight: 620; letter-spacing: -0.02em;
  color: var(--text-strong); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.metric-label { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.focus-list { list-style: none; padding: 0; margin: 0; }
.focus-item {
  padding: 14px 0; border-bottom: 1px solid var(--border);
  display: flex; gap: 14px; align-items: flex-start;
}
.focus-item:last-child { border-bottom: 0; }
.focus-word {
  font-family: var(--font-serif); font-size: 18px; color: var(--text-strong);
  min-width: 8.5rem; flex: none;
}
.focus-body { min-width: 0; flex: 1; }
.focus-said { font-size: 13px; color: var(--bad); margin-bottom: 4px; }
.focus-tip { font-size: 14px; line-height: 1.6; color: var(--text); }
.focus-tip code {
  font-family: var(--font-mono); font-size: 13px;
  background: var(--bg-subtle); border: 1px solid var(--border);
  padding: 1px 5px; border-radius: var(--radius);
}

.playback { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }

/* ---------- callouts, empty, misc ---------- */
.callout {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-subtle); padding: 13px 15px;
  font-size: 14px; line-height: 1.6; color: var(--text);
}
.callout.warn { background: var(--warn-bg); border-color: var(--warn-border); }
.callout.good { background: var(--good-bg); border-color: var(--good-border); }
.callout.info { background: var(--accent-soft); border-color: var(--accent-border); }
.callout b { font-weight: 600; }
.callout .btn { margin-top: 10px; }

.empty {
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
  padding: 34px 24px; text-align: center; color: var(--muted); font-size: 14.5px;
  line-height: 1.6;
}
.empty b { color: var(--text-strong); font-weight: 600; display: block; margin-bottom: 5px; font-size: 15px; }

/* ---------- forms ---------- */
.field { margin-bottom: 20px; }
.field label {
  display: block; font-size: 13px; font-weight: 600; color: var(--text-strong);
  margin-bottom: 6px;
}
.field .hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
input[type="text"], input[type="search"], select, textarea {
  width: 100%; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 8px 10px; font-size: 14.5px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input[type="text"]:focus, input[type="search"]:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { min-height: 220px; line-height: 1.7; resize: vertical; font-family: var(--font-serif); font-size: 16px; }
select { max-width: 100%; }
input[type="range"] { accent-color: var(--accent); width: 100%; }
.check { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.5; }
.check input { margin-top: 3px; accent-color: var(--accent); flex: none; }

.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 15px 0; border-bottom: 1px solid var(--border);
}
.switch-row:last-child { border-bottom: 0; }
.switch-row .sr-main { min-width: 0; }
.switch-row .sr-title { font-size: 14.5px; font-weight: 500; color: var(--text-strong); }
.switch-row .sr-desc { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.switch-row .sr-ctl { flex: none; }

/* ---------- popover ---------- */
/* A fixed, zero-sized box at the viewport origin. Its only job is to be the
   containing block for the definition card, so the card can be placed in viewport
   coordinates. While it sat in normal flow at the end of the document, every card
   was positioned relative to the *bottom of the page* while the code computed a
   document offset — the two stacked, and the card opened far below the fold. */
#popover-layer { position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 60; }
.popover {
  position: absolute; width: min(22rem, calc(100vw - 32px));
  /* Never taller than the screen, so a long definition stays reachable. */
  max-height: calc(100vh - 24px); overflow-y: auto;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 16px 17px;
  font-size: 14px; line-height: 1.6;
  animation: pop .12s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.pop-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.pop-word {
  font-family: var(--font-serif); font-size: 21px; color: var(--text-strong);
  font-weight: 600; letter-spacing: -0.01em;
}
.pop-ipa { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.pop-pos { font-size: 12px; color: var(--faint); font-style: italic; }
.pop-defs { list-style: none; padding: 0; margin: 11px 0 0; }
.pop-defs li { margin-bottom: 8px; padding-left: 15px; position: relative; }
.pop-defs li::before {
  content: ""; position: absolute; left: 3px; top: .62em;
  width: 4px; height: 1px; background: var(--border-strong);
}
.pop-defs li:last-child { margin-bottom: 0; }
.pop-ex { color: var(--muted); font-style: italic; font-family: var(--font-serif); }
.pop-syn { margin-top: 11px; font-size: 13px; color: var(--muted); }
.pop-syn b { font-weight: 600; color: var(--text); }
.pop-actions {
  display: flex; gap: 7px; margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--border); flex-wrap: wrap;
}
.pop-note { margin-top: 10px; font-size: 12.5px; color: var(--faint); }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--text-strong); color: var(--bg);
  padding: 9px 16px; border-radius: var(--radius);
  font-size: 13.5px; z-index: 90; max-width: calc(100vw - 32px);
  box-shadow: var(--shadow-pop);
}
.toast[hidden] { display: none; }

/* ---------- footer ---------- */
.footer {
  border-top: 1px solid var(--border); background: var(--bg-subtle);
  flex: none;
}
.footer-inner {
  max-width: var(--page); margin: 0 auto; padding: 18px 24px;
  font-size: 12.5px; color: var(--muted); line-height: 1.6;
}

/* ---------- utilities ---------- */
.stack-sm > * + * { margin-top: 8px; }
.stack > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 28px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.serif { font-family: var(--font-serif); }
.mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.hidden { display: none !important; }

/* A button that reads as a link. Used where the action sits under a form or inside a
   sentence, and a full button would give it more weight than it deserves. */
.linkish {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: var(--accent);
  cursor: pointer; text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.linkish:hover { border-bottom-color: var(--accent); }
.linkish:disabled { color: var(--faint); border-bottom-color: transparent; cursor: default; }

/* ---------- sign-in prompt ---------- */
/* Shown when an action needs an account. Full-screen so it cannot be scrolled past,
   with the card centred: this is a decision, not a notification, so a toast would be
   the wrong shape. */
.guard-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: color-mix(in srgb, var(--text) 34%, transparent);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: guard-in .12s ease-out;
}
@keyframes guard-in { from { opacity: 0; } to { opacity: 1; } }
.guard-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 20px 21px;
  width: min(26rem, 100%);
  max-height: calc(100vh - 48px); overflow-y: auto;
}
.guard-title {
  font-size: 18px; font-weight: 600; color: var(--text-strong);
  letter-spacing: -0.01em; margin: 0 0 8px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .topbar-inner { padding: 0 16px; gap: 14px; height: 44px; }
  .nav { gap: 0; }
  .nav a { padding: 5px 8px; font-size: 13.5px; }
  .main { padding: 28px 16px 72px; }
  h1.title { font-size: 26px; }
  .reader-title { font-size: 24px; }
  .passage { font-size: calc(18.5px * var(--reading-scale, 1)); line-height: 1.78; }
  .practice-text { font-size: calc(19px * var(--reading-scale, 1)); }
  .practice-stage { padding: 18px 16px; }
  .feature { padding: 18px 18px 16px; }
  .feature-title { font-size: 20px; }
  /* Keep the block on one row across the whole phone range, not just at one width:
     the buttons and the quiet practice link sit tighter and the gaps are smaller, so
     "Resume" — the longest label the transport ever shows — still fits beside the
     full "Natural" speed select with room to spare. The select keeps its natural
     width rather than being clipped. */
  .toolbar { gap: 4px; }
  .toolbar .btn { padding-inline: 11px; }
  .toolbar .btn-quiet { padding-inline: 6px; }
  .focus-item { flex-direction: column; gap: 6px; }
}
/* At the narrowest phones the row cannot hold the visible word as well, so it goes to
   screen readers only. The label keeps its `for`, so the select keeps its accessible
   name at every width. */
@media (max-width: 359px) {
  .toolbar-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
@media (max-width: 420px) {
  .brand-name { display: none; }
}

@media print {
  .topbar, .footer, .toolbar, .mic-wrap, .skip-link { display: none; }
  .main { padding: 0; max-width: none; }
  .passage { font-size: 12pt; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}