/* ============================================================
   Learning Curve — design tokens
   Light palette on bare :root; dark redefined under both the
   media query (guarded) and the explicit data-theme stamp.
   ============================================================ */
:root {
  color-scheme: light;
  --bg: #f3f6f9;
  --surface: #ffffff;
  --surface-2: #eaeff4;
  --ink: #16232e;
  --ink-2: #43586a;
  --muted: #77889a;
  --line: #dbe2e9;
  --line-soft: #e7edf2;
  --accent: #2a78d6;
  --accent-deep: #1c5cab;
  --on-accent: #ffffff;
  --accent-wash: #e3eefb;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --good: #006300;
  --good-wash: #e2f2e2;
  --bad: #c22f2f;
  --bad-wash: #fae7e7;
  --chart-surface: #fcfdfe;
  --chart-grid: #e3e8ee;
  --chart-axis: #b9c4cf;
  --code-bg: #101822;
  --code-ink: #d7e1ec;
  --code-accent: #7fb3f0;
  --shadow: 0 1px 2px rgba(22,35,46,.05), 0 4px 16px rgba(22,35,46,.06);
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d141c;
    --surface: #151e28;
    --surface-2: #1b2634;
    --ink: #e6edf3;
    --ink-2: #a7b6c5;
    --muted: #6e8093;
    --line: #2a3846;
    --line-soft: #22303e;
    --accent: #3987e5;
    --accent-deep: #6da7ec;
    --on-accent: #071523;
    --accent-wash: #17293e;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --good: #0ca30c;
    --good-wash: #12280f;
    --bad: #e66767;
    --bad-wash: #331416;
    --chart-surface: #111a24;
    --chart-grid: #223040;
    --chart-axis: #3b4d5f;
    --code-bg: #0b1119;
    --code-ink: #c9d6e3;
    --code-accent: #7fb3f0;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d141c;
  --surface: #151e28;
  --surface-2: #1b2634;
  --ink: #e6edf3;
  --ink-2: #a7b6c5;
  --muted: #6e8093;
  --line: #2a3846;
  --line-soft: #22303e;
  --accent: #3987e5;
  --accent-deep: #6da7ec;
  --on-accent: #071523;
  --accent-wash: #17293e;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --good: #0ca30c;
  --good-wash: #12280f;
  --bad: #e66767;
  --bad-wash: #331416;
  --chart-surface: #111a24;
  --chart-grid: #223040;
  --chart-axis: #3b4d5f;
  --code-bg: #0b1119;
  --code-ink: #c9d6e3;
  --code-accent: #7fb3f0;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
}

/* ============ base ============ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* ============ shell ============ */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 0 22px; height: 56px; flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.wordmark {
  font-family: var(--serif); font-weight: 700; font-size: 19px;
  color: var(--ink); letter-spacing: -.01em;
}
.wordmark:hover { text-decoration: none; }
.wordmark span { color: var(--accent); }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink); font-size: 15px; padding: 4px 10px; cursor: pointer;
}
.topbar-progress { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar-progress-label { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.topbar-progress-track { width: 160px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.topbar-progress-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 3px; transition: width .4s ease; }

.frame { display: flex; flex: 1; min-height: 0; }

/* ============ rail (course map) ============ */
.rail {
  width: 292px; flex-shrink: 0;
  border-right: 1px solid var(--line);
  background: var(--surface);
  padding: 18px 0 40px;
  overflow-y: auto;
  position: sticky; top: 56px;
  height: calc(100vh - 56px);
}
.rail-home {
  display: flex; align-items: center; gap: 8px;
  margin: 0 14px 10px; padding: 8px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.rail-home:hover { background: var(--surface-2); text-decoration: none; }
.rail-home.active { background: var(--accent-wash); color: var(--accent-deep); }
.rail-phase { margin-top: 16px; }
.rail-phase-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 26px; margin-bottom: 2px;
}
.rail-phase-num { font-family: var(--mono); font-size: 11px; color: var(--accent); font-weight: 600; }
.rail-phase-name {
  font-family: var(--mono); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
}
.rail-mod {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 26px; margin: 0 8px; border-radius: 7px;
  font-size: 13.5px; color: var(--ink-2); line-height: 1.35;
}
.rail-mod:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.rail-mod.active { background: var(--accent-wash); color: var(--accent-deep); font-weight: 600; }
.rail-dot {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--chart-axis);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--on-accent);
}
.rail-mod.done .rail-dot { background: var(--accent); border-color: var(--accent); }
.rail-mod.done .rail-dot::after { content: "✓"; font-weight: 700; }

/* ============ page ============ */
.page { flex: 1; min-width: 0; padding: 44px 48px 90px; }
.page-inner { max-width: 880px; margin: 0 auto; }

.eyebrow {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 10px;
}
.eyebrow .sep { color: var(--muted); margin: 0 6px; }
h1.mod-title {
  font-family: var(--serif); font-weight: 700; font-size: clamp(28px, 4vw, 38px);
  line-height: 1.15; margin: 0 0 12px; letter-spacing: -.015em; text-wrap: balance;
}
.mod-goal {
  font-size: 17.5px; color: var(--ink-2); max-width: 62ch;
  margin: 0 0 8px; line-height: 1.55;
}
.mod-meta {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  margin-bottom: 34px; padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.mod-meta .done-tag { color: var(--good); font-weight: 600; }

/* ============ prose ============ */
.prose { max-width: none; }
.prose p, .prose ul, .prose ol, .prose h2, .prose h3,
.prose blockquote, .prose .callout, .prose .keyterms { max-width: 70ch; }
.prose pre { max-width: 78ch; }
.prose p { margin: 0 0 1.1em; }
.prose h2 {
  font-family: var(--serif); font-weight: 600; font-size: 23px;
  margin: 1.9em 0 .55em; letter-spacing: -.01em; line-height: 1.25; text-wrap: balance;
}
.prose h3 {
  font-size: 16.5px; font-weight: 600; margin: 1.6em 0 .45em;
}
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--accent); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose code {
  font-family: var(--mono); font-size: .86em;
  background: var(--surface-2); border-radius: 4px; padding: .12em .38em;
}
.prose pre {
  background: var(--code-bg); color: var(--code-ink);
  border-radius: 10px; padding: 18px 20px; overflow-x: auto;
  font-family: var(--mono); font-size: 13px; line-height: 1.6;
  margin: 0 0 1.2em;
}
.prose pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
.prose pre .cm { color: #6e8397; }
.prose pre .kw { color: var(--code-accent); }
.prose pre .st { color: #9ecf99; }
.prose blockquote {
  margin: 1.4em 0; padding: 2px 0 2px 18px;
  border-left: 3px solid var(--accent);
  color: var(--ink-2); font-style: italic;
}
.prose table { border-collapse: collapse; margin: 0 0 1.2em; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 7px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--surface-2); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }
.table-scroll { overflow-x: auto; }

.callout {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 0 0 1.2em;
  font-size: 15px;
}
.callout .callout-label {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 4px;
}

.keyterms { margin: 1.4em 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
/* minmax(0, ...) so the row can give way instead of overflowing .keyterms, which clips
   (overflow: hidden, for its rounded corners) and so silently cut definition text off in
   a narrow window with the course map open. Inert wherever there is room to lay out. */
.keyterm { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); background: var(--surface); }
.keyterm + .keyterm { border-top: 1px solid var(--line-soft); }
.keyterm dt {
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--accent-deep);
  padding: 11px 16px; margin: 0; background: var(--surface-2);
}
.keyterm dd { margin: 0; padding: 11px 16px; font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 620px) { .keyterm { grid-template-columns: 1fr; } .keyterm dt { padding-bottom: 2px; } }

/* ============ widget card ============ */
.widget {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow);
  margin: 1.8em 0; overflow: hidden;
}
.widget-head { padding: 16px 22px 0; }
.widget-label {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--series-2);
}
.widget-title { font-family: var(--serif); font-weight: 600; font-size: 19px; margin: 3px 0 2px; }
.widget-sub { font-size: 14px; color: var(--ink-2); margin: 0 0 6px; max-width: 68ch; }
.widget-body { padding: 12px 22px 20px; }
.widget canvas { display: block; width: 100%; border-radius: 8px; background: var(--chart-surface); border: 1px solid var(--line-soft); }
.controls {
  display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center;
  margin-top: 14px;
}
.control { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.control label { white-space: nowrap; }
.control output { color: var(--ink); font-weight: 600; min-width: 3.5ch; font-variant-numeric: tabular-nums; }
.control input[type=range] { width: 130px; accent-color: var(--accent); }
.control select {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px;
}
.readout {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-2);
  margin-top: 12px; line-height: 1.9; font-variant-numeric: tabular-nums;
}
.readout b { color: var(--ink); font-weight: 600; }
.readout .r1 { color: var(--series-1); font-weight: 600; }
.readout .r2 { color: var(--series-2); font-weight: 600; }
.readout .r3 { color: var(--good); font-weight: 600; }

.btn {
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  border-radius: 8px; padding: 8px 16px; cursor: pointer;
  border: 1px solid transparent; transition: filter .12s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-ghost { background: none; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-2); }
.btn[disabled] { opacity: .45; cursor: default; }

/* ============ quiz ============ */
.quiz {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  margin: 2.2em 0 0; padding: 24px 26px; box-shadow: var(--shadow);
}

/* ---------- free recall (the self-check, lifted out of the lesson) ---------- */
.recall {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  margin: 0; padding: 24px 26px; box-shadow: var(--shadow);
}
.recall-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.recall-head h2 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 0; }
.recall-prev {
  margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--muted);
}
.recall-q {
  font-family: var(--serif); font-size: 19px; line-height: 1.5;
  margin: 10px 0 12px; max-width: 62ch;
}
.recall-input {
  width: 100%; max-width: 70ch; display: block;
  font-family: var(--sans); font-size: 15px; line-height: 1.6;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; resize: vertical;
}
.recall-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.recall-hint { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.recall-answer {
  margin-top: 18px; padding: 16px 18px;
  border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
  background: var(--accent-wash);
  max-width: 70ch;
}
.recall-answer b {
  display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent-deep); margin-bottom: 6px;
}
.recall-answer p { margin: 0; line-height: 1.65; }
.recall-grade { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.recall-grade .quiz-sub { margin-bottom: 10px; }
.recall-grade .btn.chosen { outline: 2px solid var(--accent); outline-offset: 2px; }
.recall-done { font-size: 14px; margin: 12px 0 0; }
.recall-done.ok { color: var(--good); }
.recall-done.no { color: var(--bad); }
.quiz-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.quiz-head h2 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 0; }
.quiz-score { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.quiz-sub { font-size: 14px; color: var(--ink-2); margin: 0 0 18px; }
.qq { padding: 16px 0; border-top: 1px solid var(--line-soft); }
.qq-text { font-weight: 600; margin: 0 0 10px; }
.qq-text .qq-num { font-family: var(--mono); font-weight: 600; color: var(--accent); margin-right: 8px; font-size: 13px; }
.qq-opts { display: grid; gap: 7px; }
.qq-opt {
  text-align: left; font-size: 14.5px; line-height: 1.45; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 14px; cursor: pointer;
}
.qq-opt:hover:not([disabled]) { border-color: var(--accent); }
.qq-opt[disabled] { cursor: default; opacity: .75; }
.qq-opt.correct { background: var(--good-wash); border-color: var(--good); color: var(--ink); opacity: 1; font-weight: 600; }
.qq-opt.wrong { background: var(--bad-wash); border-color: var(--bad); color: var(--ink); opacity: 1; }
.qq-why {
  margin-top: 10px; font-size: 13.5px; color: var(--ink-2);
  padding: 9px 13px; background: var(--surface-2); border-radius: 8px;
}
.qq-why b { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }
.qq-why.ok b { color: var(--good); }
.qq-why.no b { color: var(--bad); }
.quiz-result { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.quiz-result-text { font-weight: 600; }

/* ============ resources ============ */
.resources { margin: 2.2em 0 0; }
.resources h2 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 0 0 6px; }
.resources .res-sub { font-size: 14px; color: var(--ink-2); margin: 0 0 14px; }
.res-list { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.res-item {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 16px; font-size: 14.5px;
}
.res-item a { font-weight: 600; }
.res-item .res-note { color: var(--ink-2); font-size: 13.5px; }
.res-item .res-free {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  color: var(--good); border: 1px solid currentColor; border-radius: 4px; padding: 1px 6px;
  align-self: center;
}

/* ============ module footer nav ============ */
.mod-footer {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.mod-footer .spacer { flex: 1; }
.mark-done {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
  border-radius: 8px; padding: 9px 18px; cursor: pointer;
  background: var(--accent); color: var(--on-accent); border: 1px solid transparent;
}
.mark-done.is-done { background: var(--good-wash); color: var(--good); border-color: var(--good); }
.nav-btn {
  font-size: 13.5px; color: var(--ink-2); border: 1px solid var(--line); background: var(--surface);
  border-radius: 8px; padding: 9px 14px; cursor: pointer; max-width: 260px;
  text-align: left; line-height: 1.3;
}
.nav-btn:hover { border-color: var(--accent); color: var(--ink); }
.nav-btn .nav-dir { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--muted); display: block; }

/* ============ home / dashboard ============ */
.home-hero { max-width: 760px; margin-bottom: 40px; }
.home-hero .eyebrow { color: var(--series-2); }
.home-hero h1 {
  font-family: var(--serif); font-weight: 700; font-size: clamp(32px, 5vw, 46px);
  line-height: 1.1; letter-spacing: -.02em; margin: 0 0 16px; text-wrap: balance;
}
.home-hero p.lede { font-size: 18px; color: var(--ink-2); line-height: 1.6; max-width: 60ch; margin: 0 0 20px; }
.home-continue { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.phase-grid { display: grid; gap: 14px; margin-bottom: 44px; }
.phase-card {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 4px 18px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 22px; cursor: pointer; box-shadow: var(--shadow);
  transition: border-color .12s ease;
}
.phase-card:hover { border-color: var(--accent); text-decoration: none; }
.phase-card-num {
  font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--accent);
  grid-row: span 2; align-self: start; padding-top: 2px;
}
.phase-card-name { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink); }
.phase-card-tag { grid-column: 2; font-size: 14px; color: var(--ink-2); }
.phase-card-count {
  grid-row: span 2; font-family: var(--mono); font-size: 12.5px; color: var(--muted);
  text-align: right; font-variant-numeric: tabular-nums;
}
.phase-card-bar { grid-column: 2 / 4; height: 5px; border-radius: 3px; background: var(--surface-2); margin-top: 8px; overflow: hidden; }
.phase-card-bar > div { height: 100%; background: var(--accent); border-radius: 3px; }
/* Below 340px the three-column card's min-content (about 310px) no longer fits beside the
   page gutters, so the count drops under the title instead of sitting in a third column.
   Scoped to a breakpoint nothing else uses, so 360px and up cannot move. */
@media (max-width: 340px) {
  .phase-card { grid-template-columns: 48px 1fr; padding: 16px 16px; gap: 4px 12px; }
  .phase-card-count { grid-row: auto; grid-column: 2; text-align: left; }
  .phase-card-bar { grid-column: 2; }
}

.home-how { max-width: 70ch; }
.home-how h2 { font-family: var(--serif); font-size: 23px; font-weight: 600; margin: 0 0 12px; }

/* ---------- progress backup panel (home) ---------- */
.home-backup {
  max-width: 70ch;
  margin-top: 34px;
  padding: 18px 20px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--surface-2);
}
.home-backup h2 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 0 0 10px; }
.home-backup p { margin: 0 0 10px; }
.home-backup .controls { margin: 14px 0 4px; gap: 10px; }
.backup-state {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.9;
}
.backup-msg { min-height: 1.2em; font-size: 13px; margin: 6px 0 0 !important; }
.backup-msg.ok { color: var(--good); }
.backup-msg.bad { color: var(--bad); }

.home-foot {
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted); max-width: 70ch;
}
.home-foot a { color: var(--ink-2); text-decoration: underline; }
.reset-link { background: none; border: none; color: var(--muted); font-size: 12.5px; text-decoration: underline; cursor: pointer; padding: 0; margin-top: 8px; }

/* ============ projects checklist ============ */
.proj-group { margin: 1.6em 0; }
.proj-group h3 { margin-bottom: .6em; }
.proj-list { display: grid; gap: 8px; }
.proj-item {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  padding: 12px 16px; cursor: pointer;
}
.proj-item input { margin-top: 4px; accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
.proj-item .proj-name { font-weight: 600; font-size: 14.5px; }
.proj-item .proj-desc { font-size: 13.5px; color: var(--ink-2); }
.proj-item.checked { opacity: .62; }
.proj-item.checked .proj-name { text-decoration: line-through; }

/* ============ interactive DOM widgets ============ */
.codecard { background: var(--code-bg); color: var(--code-ink); border-radius: 10px; padding: 16px 18px; font-family: var(--mono); font-size: 13px; line-height: 1.6; overflow-x: auto; white-space: pre; }
.attn-sentence { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.attn-word {
  font-family: var(--mono); font-size: 14.5px; padding: 5px 10px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; color: var(--ink);
}
.attn-word.focus { border-color: var(--series-2); background: var(--surface); font-weight: 600; }
.bars { display: grid; gap: 6px; margin-top: 12px; }
.bar-row { display: grid; grid-template-columns: 92px 1fr 52px; gap: 10px; align-items: center; font-family: var(--mono); font-size: 12.5px; }
.bar-row .bar-track { height: 14px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.bar-row .bar-fill { height: 100%; background: var(--series-1); border-radius: 4px; transition: width .25s ease; }
.bar-row .bar-val { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.dirty-table { border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; width: 100%; }
.dirty-table th { background: var(--surface-2); border: 1px solid var(--line); padding: 7px 10px; text-align: left; font-weight: 600; }
.dirty-table td { border: 1px solid var(--line); padding: 7px 10px; cursor: pointer; }
.dirty-table td:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.dirty-table td.found { background: var(--good-wash); color: var(--good); font-weight: 600; cursor: default; }
.dirty-table td.miss { background: var(--bad-wash); }

.agent-log { display: grid; gap: 8px; margin-top: 12px; }
.agent-msg { border-radius: 9px; padding: 10px 14px; font-size: 13.5px; border: 1px solid var(--line); background: var(--surface-2); }
.agent-msg .agent-role { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; display: block; margin-bottom: 3px; color: var(--muted); }
.agent-msg.role-model { border-left: 3px solid var(--series-1); }
.agent-msg.role-tool { border-left: 3px solid var(--series-2); font-family: var(--mono); font-size: 12.5px; }
.agent-msg.role-user { border-left: 3px solid var(--chart-axis); }

.pill-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pill-toggle button {
  font-family: var(--mono); font-size: 12.5px; padding: 6px 14px; cursor: pointer;
  background: var(--surface); border: none; color: var(--ink-2);
}
.pill-toggle button.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }

.cost-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 6px; }
.cost-field label { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-bottom: 4px; letter-spacing: .04em; }
.cost-field input, .cost-field select {
  width: 100%; font-family: var(--mono); font-size: 14px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px;
}
.cost-out { margin-top: 16px; display: flex; gap: 26px; flex-wrap: wrap; }
.cost-stat .cost-stat-label { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; color: var(--muted); text-transform: uppercase; }
.cost-stat .cost-stat-val { font-family: var(--mono); font-size: 24px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ============ drill & mastery ============ */
.due-badge {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  background: var(--series-2); color: #fff; border-radius: 9px; padding: 1px 7px;
  margin-left: 6px; vertical-align: 1px;
}
.drill-tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; font-weight: 500;
  color: var(--accent-deep); background: var(--accent-wash); border-radius: 4px;
  padding: 2px 7px; margin-left: 8px; white-space: nowrap;
}
.rail-mod.mastered .rail-dot { background: var(--good); border-color: var(--good); }
.home-stats {
  display: flex; gap: 20px; flex-wrap: wrap; margin-top: 18px;
  font-size: 13.5px; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.home-stats b { color: var(--ink); font-family: var(--mono); }

/* ============ guided project card ============ */
.widget.build { border-left: 3px solid var(--accent); }
.build-label { color: var(--accent); }
.build-needs { margin: 2px 0 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-family: var(--mono); font-size: 11px; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px;
  padding: 2px 8px;
}
.milestones { margin: 4px 0 16px; padding-left: 0; counter-reset: ms; list-style: none; display: grid; gap: 8px; }
.milestone { counter-increment: ms; }
.milestone label {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  font-size: 14.5px; line-height: 1.5; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 14px;
}
.milestone label::before {
  content: counter(ms); font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  color: var(--accent); min-width: 16px; padding-top: 2px;
}
.milestone input { margin-top: 4px; accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
.milestone.checked label { opacity: .6; }
.milestone.checked span { text-decoration: line-through; text-decoration-color: var(--muted); }
pre.starter {
  background: var(--code-bg); color: var(--code-ink);
  border-radius: 10px; padding: 16px 18px; overflow-x: auto;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.55; margin: 0 0 4px;
}
.copy-btn { font-family: var(--mono); font-size: 12.5px; }
.build-h { font-size: 14.5px; font-weight: 600; margin: 18px 0 8px; }
.build-checks { margin: 0 0 8px; padding-left: 1.3em; font-size: 14px; color: var(--ink-2); }
.build-checks li { margin-bottom: .35em; }
.build-checks li::marker { color: var(--good); }
.widget.build details { margin-top: 10px; }
.widget.build summary {
  cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--accent-deep);
  padding: 4px 0;
}

/* ============ topic map ============ */
.topicmap { margin: 2.2em 0 0; }
.topicmap h2 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 0 0 6px; }
.topic-count {
  font-family: var(--mono); font-size: 12px; color: var(--accent-deep);
  background: var(--accent-wash); border-radius: 5px; padding: 2px 8px; margin-left: 6px;
  font-variant-numeric: tabular-nums;
}
.topic-group {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 12px; overflow: hidden;
}
.topic-group-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 11px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line-soft);
}
.topic-group-name { font-weight: 600; font-size: 14.5px; }
.topic-group-src {
  margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted);
  letter-spacing: .03em;
}
.topic-item + .topic-item { border-top: 1px solid var(--line-soft); }
.topic-head {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 18px; font-size: 14px;
}
.topic-head input { margin-top: 3px; accent-color: var(--good); width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; }
.topic-text { flex: 1; min-width: 0; }
.topic-head .topic-name { font-weight: 600; color: var(--ink); }
.topic-head .topic-desc { color: var(--ink-2); font-size: 13.5px; }
.topic-item.checked .topic-name { color: var(--good); }
.topic-item.checked .topic-head { opacity: .75; }
.lesson-btn {
  font-family: var(--mono); font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--accent-deep); background: var(--accent-wash);
  border: 1px solid transparent; border-radius: 7px; padding: 5px 12px; cursor: pointer;
  align-self: flex-start; flex-shrink: 0;
}
.lesson-btn:hover { border-color: var(--accent); }
.lesson-btn.open { background: var(--accent); color: var(--on-accent); }
.topic-lesson {
  margin: 0 18px 14px 45px; padding: 4px 20px 12px;
  border-left: 3px solid var(--accent-wash);
  background: var(--surface); border-radius: 0 8px 8px 0;
  font-size: 14.5px; line-height: 1.68; color: var(--ink);
  max-width: 66ch;
}
.topic-lesson p { margin: .9em 0; }
.topic-lesson ul, .topic-lesson ol { margin: .8em 0; padding-left: 1.4em; }
.topic-lesson li { margin-bottom: .35em; }
.topic-lesson li::marker { color: var(--accent); }
.topic-lesson strong { font-weight: 600; }
.topic-lesson code {
  font-family: var(--mono); font-size: .87em;
  background: var(--surface-2); border-radius: 4px; padding: .1em .35em;
}
.topic-lesson pre {
  background: var(--code-bg); color: var(--code-ink);
  border-radius: 9px; padding: 13px 16px; overflow-x: auto;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.55; margin: .9em 0;
}
.topic-lesson pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.topic-lesson .callout {
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
  padding: 10px 14px; margin: .9em 0; font-size: 13.5px;
}
.topic-lesson details.selfcheck {
  margin: 1em 0 .4em; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface-2); padding: 9px 14px;
}
.topic-lesson details.selfcheck summary {
  cursor: pointer; font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep);
}
.topic-lesson details.selfcheck p { margin: .6em 0 .2em; font-size: 13.5px; }
@media (max-width: 620px) { .topic-lesson { margin-left: 18px; } }

/* ============ rail extras ============ */
.rail-phase-head, .rail-phase-head:hover { text-decoration: none; }
.rail-phase-head:hover .rail-phase-name, .rail-phase-head.active .rail-phase-name { color: var(--accent-deep); }
.rail-mod-title { flex: 1; min-width: 0; }
.rail-pct { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

/* ============ course page ============ */
.course-list { display: grid; gap: 12px; margin-top: 28px; }
.course-row {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 6px 18px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 20px; box-shadow: var(--shadow); text-decoration: none; color: var(--ink);
}
.course-row:hover { border-color: var(--accent); text-decoration: none; }
.course-row.complete { opacity: .85; }
.course-row-num { font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--accent); }
.course-row-main { display: grid; gap: 4px; min-width: 0; }
.course-row-title { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.course-row-goal { font-size: 13.5px; color: var(--ink-2); max-width: 62ch; }
.course-row-meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.course-row-main .phase-card-bar { margin-top: 8px; grid-column: auto; }
.course-row-cta { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: right; line-height: 1.5; }
.course-row-cta .btn { margin-top: 6px; display: inline-block; }

/* ============ lesson player ============ */
.player { max-width: 1180px; margin: 0 auto; }
.player-head { margin-bottom: 20px; }
.crumbs { font-family: var(--mono); font-size: 12px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.crumbs a { color: var(--accent-deep); }
.player-title-row { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.player-title { font-family: var(--serif); font-size: clamp(24px, 3vw, 32px); font-weight: 700; margin: 0; letter-spacing: -.01em; flex: 1; }
.player-progress { display: flex; align-items: center; gap: 12px; padding-bottom: 6px; }
.player-progress .topbar-progress-track { width: 200px; }
.player-progress-label { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.player-body { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; align-items: start; }
.stepper {
  list-style: none; margin: 0; padding: 8px 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; max-height: calc(100vh - 150px); overflow-y: auto; position: sticky; top: 76px;
}
.stepper-section {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); padding: 12px 16px 4px; font-weight: 600;
}
.stepper-item {
  display: grid; grid-template-columns: 14px auto 1fr auto; gap: 8px; align-items: center;
  padding: 7px 14px; font-size: 13px; color: var(--ink-2); cursor: pointer; line-height: 1.3;
}
.stepper-item:hover { background: var(--surface-2); }
.stepper-item.current { background: var(--accent-wash); color: var(--accent-deep); }
.stepper-item.current .stepper-title { font-weight: 600; }
.stepper-item.optional { opacity: .7; }
.stepper-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--chart-axis); display: inline-flex; align-items: center; justify-content: center; font-size: 8px; color: var(--on-accent); }
.stepper-item.done .stepper-dot { background: var(--good); border-color: var(--good); }
.stepper-item.done .stepper-dot::after { content: "✓"; font-weight: 700; }
.stepper-item.current .stepper-dot { border-color: var(--accent); }
.stepper-type { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); min-width: 66px; }
.stepper-item.current .stepper-type { color: var(--accent); }
.stepper-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stepper-min { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.stage { min-width: 0; }
.step-head { margin-bottom: 18px; }
.step-type { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.step-title { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; margin: 6px 0 0; line-height: 1.2; text-wrap: balance; }
.step-content { min-height: 200px; }
.step-content .prose h2 { font-size: 20px; }
.lesson-body { font-size: 16px; }
.lesson-body details.selfcheck { margin: 1.4em 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 12px 16px; max-width: 70ch; }
.lesson-body details.selfcheck summary { cursor: pointer; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep); }
.lesson-body details.selfcheck p { margin: .6em 0 .2em; font-size: 14.5px; }
.step-nav {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line);
}
.step-nav .spacer { flex: 1; }
.step-nav-note { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* ============ code exercise ============ */
.ex { display: grid; gap: 12px; }
.ex-instructions { max-width: 70ch; }
.ex-editor {
  width: 100%; font-family: var(--mono); font-size: 13.5px; line-height: 1.55; tab-size: 4;
  background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; resize: vertical; min-height: 180px; box-sizing: border-box;
}
.ex-editor:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ex-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ex-status { font-size: 13.5px; color: var(--ink-2); min-height: 1.4em; }
.ex-out {
  margin: 0; background: var(--code-bg); color: var(--code-ink); border-radius: 10px; padding: 12px 16px;
  font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; max-height: 260px; overflow: auto;
  border-left: 3px solid var(--series-3);
}
.ex-out.has-error { border-left-color: var(--bad); }
.ex-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ex-checks li { font-size: 13.5px; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.ex-checks li.ok { border-color: var(--good); }
.ex-checks li.ok b { color: var(--good); }
.ex-checks li.no { border-color: var(--bad); }
.ex-checks li.no b { color: var(--bad); }
.ex-err { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.ex-extra .callout { max-width: none; }
.ex-fallback { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; font-size: 14px; color: var(--ink-2); }

/* ============ practice (every exercise, filterable) ============ */
.rail-count {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.rail-home.active .rail-count { color: var(--accent-deep); }
.pf {
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 18px; box-shadow: var(--shadow);
}
.pf-field { display: grid; gap: 4px; min-width: 0; }
.pf-field.grow { flex: 1 1 200px; }
.pf-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.pf-field select, .pf-search {
  font-family: var(--sans); font-size: 13.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 9px; max-width: 100%;
}
/* a <select> is as wide as its longest option; the module list holds some very long
   module names, so cap it and let the search box take the space instead */
.pf-field select { max-width: 300px; }
.pf-field select:focus, .pf-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pf-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.pf-count {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pf-empty {
  font-size: 15px; color: var(--ink-2); margin: 0; line-height: 1.6;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 16px 18px;
}
.pr-list { display: grid; gap: 8px; margin-top: 22px; }
.pr-group { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 2px; }
.pr-group:first-child { margin-top: 0; }
.pr-group-num { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--accent); }
.pr-group-name {
  font-family: var(--mono); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
}
.pr-group-count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.pr-row {
  display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; gap: 6px 14px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 16px; color: var(--ink); text-decoration: none; box-shadow: var(--shadow);
}
.pr-row:hover { border-color: var(--accent); text-decoration: none; }
.pr-dot {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--chart-axis);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--on-accent);
}
.pr-row.done .pr-dot { background: var(--good); border-color: var(--good); }
.pr-row.done .pr-dot::after { content: "✓"; font-weight: 700; }
.pr-main { display: grid; gap: 2px; min-width: 0; }
.pr-title { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-row.done .pr-title { color: var(--ink-2); }
.pr-where {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-tags { display: flex; align-items: center; gap: 12px; }
.pr-diff {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  border: 1px solid var(--line); border-radius: 5px; padding: 2px 8px; white-space: nowrap;
}
.pr-diff.d-beginner { color: var(--good); background: var(--good-wash); border-color: var(--good); }
.pr-diff.d-intermediate { color: var(--accent-deep); background: var(--accent-wash); border-color: var(--accent); }
.pr-diff.d-advanced { color: var(--bad); background: var(--bad-wash); border-color: var(--bad); }
.pr-min {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pr-back { font-family: var(--mono); font-size: 12px; color: var(--accent-deep); display: inline-block; margin-bottom: 12px; }
.pr-stage { margin-top: 4px; }
@media (max-width: 620px) {
  .pf-actions { margin-left: 0; width: 100%; justify-content: space-between; }
  .pf-field, .pf-field.grow { flex: 1 1 100%; }
  .pf-field select, .pf-search { width: 100%; max-width: 100%; }
  .pr-row { grid-template-columns: 15px minmax(0, 1fr); }
  .pr-tags { grid-column: 2; }
}

/* ============ responsive ============ */
@media (max-width: 920px) {
  .player-body { grid-template-columns: 1fr; }
  .stepper { position: static; max-height: 240px; }
  .nav-toggle { display: block; }
  .rail {
    position: fixed; left: 0; top: 56px; z-index: 30;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: var(--shadow); width: min(320px, 86vw);
  }
  .rail.open { transform: translateX(0); }
  .page { padding: 28px 20px 70px; }
  .topbar-progress-track { width: 90px; }
}

/* The top bar is the one element on every route, so it has to survive the narrowest
   phone. Its three children are flex items, and a flex item refuses to shrink below
   its own content (min-width: auto) — so the nowrap progress label plus the fixed
   track held the bar at 296px wide and pushed the whole document to 533px at a 390px
   viewport, giving every screen a horizontal scrollbar. Two fixes: let the readout
   shrink at any width, and below 620px take the label out of the layout so the track
   alone carries the glance (the same counts are spelled out on #home). */
.topbar-progress { min-width: 0; }
.topbar-progress-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topbar-progress-track { flex-shrink: 0; }

@media (max-width: 620px) {
  .topbar { gap: 12px; padding: 0 14px; }
  .wordmark { font-size: 17px; }
  .topbar-progress-track { width: 64px; }
  /* Taken out of the layout but NOT out of the page: display: none would also delete the
     only spoken progress readout on the device the app is mostly read on. Absolute
     positioning removes it as a flex item, so it can no longer stretch the bar, while a
     screen reader still announces the count the sighted layout has no room for. */
  .topbar-progress-label {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0; clip-path: inset(50%);
  }
}

/* Inline code carries unbreakable tokens — torch.nn.functional.scaled_dot_product_attention,
   /Users/you/projects/digits/models, GaussianProcessRegressor(...) — that are a single "word"
   wider than a phone text column, so they pushed the document past the viewport on a handful
   of lesson steps. Break them mid-token, but only when the whole token cannot fit on a line,
   so nothing changes wherever there is room. Code BLOCKS are untouched: pre keeps white-space:
   pre and scrolls inside its own box, which is the right behaviour for a listing. */
code { overflow-wrap: break-word; }

/* ---- scene: a pinned visual with stepped captions (LC.scene) ----
   The caption sits in a fixed-height box so that advancing a step moves the drawing and
   nothing else — a caption that grows and shoves the canvas up defeats the whole device,
   because the eye follows the jump instead of the change you wanted it to watch. */
.scene { margin: 6px 0 10px; }
.scene canvas { display: block; width: 100%; border-radius: 8px; background: var(--chart-surface); }
.scene-cap {
  font-size: 15px; line-height: 1.55; color: var(--ink); margin: 12px 0 0;
  min-height: 5.2em; max-width: 72ch;
}
.scene-nav { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.scene-dots { display: flex; gap: 7px; flex: 1 1 auto; justify-content: center; }
.scene-dot {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--chart-axis); background: transparent; transition: background .18s, transform .18s;
}
.scene-dot:hover { transform: scale(1.25); }
.scene-dot.on { background: var(--series-1); border-color: var(--series-1); }
@media (max-width: 480px) {
  .scene-cap { min-height: 7em; font-size: 14px; }
  .scene-nav .btn { flex: 1 1 auto; }
  .scene-dots { order: -1; width: 100%; flex: 0 0 auto; margin-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) { .scene-dot { transition: none; } }