/* Theme: light palette on bare :root; dark repeated twice — once under the
   system preference (guarded so an explicit data-theme="light" wins), once
   under an explicit data-theme="dark" so the in-page toggle wins both ways. */
:root {
  --paper: #eae6dc;
  --paper-raised: #f3f0e7;
  --ink: #1b1b1f;
  --ink-soft: #5b5a54;
  --rule: #c9c3b3;
  --accent: #2f5d50;
  --accent-soft: #e2e9e3;
  --warm: #b34632;
  --warm-soft: #f3e2dc;
  --focus: #2f5d50;
  --pill-bg: #1b1b1f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15171a;
    --paper-raised: #1c1f23;
    --ink: #e8e6de;
    --ink-soft: #a3a196;
    --rule: #34383d;
    --accent: #7fb3a0;
    --accent-soft: #1f2b26;
    --warm: #e0836c;
    --warm-soft: #2c211d;
    --focus: #7fb3a0;
    --pill-bg: #7fb3a0;
  }
}

:root[data-theme="dark"] {
  --paper: #15171a;
  --paper-raised: #1c1f23;
  --ink: #e8e6de;
  --ink-soft: #a3a196;
  --rule: #34383d;
  --accent: #7fb3a0;
  --accent-soft: #1f2b26;
  --warm: #e0836c;
  --warm-soft: #2c211d;
  --focus: #7fb3a0;
  --pill-bg: #7fb3a0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
}

a { color: inherit; }

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 44px 20px 90px;
  position: relative;
  z-index: 1;
}

/* ---------- ambient background geometry ----------
   Five philosophical vignettes in slow line art behind everything:
   Ptolemy's celestial spheres, Plato's cave, the dialectic as a breathing
   vesica, Zeno's dichotomy, and Sisyphus. Ink-colored and translucent, so it
   reads as texture behind the content, never competing with it. */

.bg-geometry {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  color: var(--ink-soft);
  opacity: 0.28;
}
.bg-geometry * {
  transform-box: fill-box;
  transform-origin: center;
}
/* accent-colored bodies: the wandering planet and Sisyphus's boulder */
.geo-planet { fill: var(--accent); }
.geo-roll circle, .geo-roll line { stroke: var(--accent); }

@keyframes geo-spin { to { transform: rotate(360deg); } }

/* Sisyphus's climb: the scene follows the curved hill, tilting with the
   slope and decelerating the whole way up; it hangs an instant below the
   summit, then the return is nearly instant. */
@keyframes geo-climb {
  0%   { transform: translate(0, 0) rotate(0deg); }
  18%  { transform: translate(78px, -26px) rotate(-6deg); }
  38%  { transform: translate(158px, -72px) rotate(-9deg); }
  58%  { transform: translate(228px, -124px) rotate(-12deg); }
  76%  { transform: translate(278px, -165px) rotate(-14deg); }
  88%  { transform: translate(300px, -188px) rotate(-15deg); }
  91%  { transform: translate(300px, -188px) rotate(-15deg); }
  96%  { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* the figure strains: a small, endless bob against the boulder */
@keyframes geo-toil {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(1.5px, -2.5px); }
}

/* the boulder turns under the push */
@keyframes geo-roll-spin { to { transform: rotate(360deg); } }

/* Zeno's dichotomy: equal time per hop, half the remaining distance each
   hop, so the runner visibly decelerates; it fades before "arriving" */
@keyframes geo-zeno {
  0%   { transform: translateX(0);     opacity: 0; }
  6%   { opacity: 1; }
  22%  { transform: translateX(240px); }
  42%  { transform: translateX(360px); }
  60%  { transform: translateX(420px); }
  76%  { transform: translateX(450px); }
  88%  { transform: translateX(465px); }
  94%  { transform: translateX(471px); opacity: 1; }
  100% { transform: translateX(474px); opacity: 0; }
}

.geo-sphere   { animation: geo-spin 90s linear infinite; }
.geo-climb    { animation: geo-climb 34s linear infinite; }
.geo-toil     { animation: geo-toil 1.6s ease-in-out infinite; }
.geo-roll     { animation: geo-roll-spin 7s linear infinite; }
.geo-zeno-dot { animation: geo-zeno 24s linear infinite; }

.bg-geometry text {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .bg-geometry * { animation: none; }
}

/* the scene toggle's two off-states: frozen in place, or gone entirely */
:root[data-scene="still"] .bg-geometry * { animation: none; }
:root[data-scene="hidden"] .bg-geometry { display: none; }

/* the second toggle sits right beside the theme toggle, not pushed apart */
.scene-toggle { margin-left: 0; }

/* ---------- top-level views ---------- */
/* All five are hidden until exactly one gets .show. Only showView() in app.js
   ever adds or removes that class, so two views can never be on screen at
   once. */

.dashboard-view,
.quiz-view,
.transcripts-view,
.review-view,
.credit-view { display: none; }

.dashboard-view.show,
.quiz-view.show,
.transcripts-view.show,
.review-view.show,
.credit-view.show { display: block; }

/* ---------- masthead ---------- */

.masthead {
  margin-bottom: 30px;
}

.eyebrow {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

h1 {
  font-size: 30px;
  line-height: 1.2;
  margin: 0 0 8px;
  text-wrap: balance;
  font-weight: 400;
}

.subtitle {
  color: var(--ink-soft);
  font-size: 15px;
  margin: 0;
  font-style: italic;
}

.rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 24px 0 0;
}

/* ---------- account bar ---------- */

.account-bar {
  margin-top: 18px;
}

.account-guest,
.account-signed-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.account-status-text {
  font-size: 12.5px;
  color: var(--ink-soft);
}
.account-status-text strong { color: var(--ink); font-weight: 700; }

.account-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.text-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.text-link:hover { color: var(--accent); border-color: var(--accent); }
.text-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.account-form {
  margin-top: 14px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
}

.account-form-title {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 4px;
}

.account-form .request-search { margin-bottom: 0; }

.account-form-error {
  color: var(--warm);
  font-size: 12px;
  min-height: 14px;
  margin: 0;
}

.account-form-success {
  color: var(--accent);
  font-size: 12px;
  min-height: 14px;
  margin: 0;
}

.account-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

/* ---------- suggestion banner ---------- */

.suggestion {
  margin-top: 28px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 3px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.suggestion-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.suggestion-text {
  font-size: 16.5px;
  line-height: 1.5;
}

.suggestion-text strong { font-weight: 700; }

.suggestion-actions {
  margin-top: 4px;
}

button.pill {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--pill-bg);
  color: var(--paper);
  border: none;
  padding: 10px 16px;
  border-radius: 2px;
  cursor: pointer;
}
button.pill:hover { opacity: 0.88; }
button.pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- episode ledger ---------- */

.ledger-title {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 40px 0 14px;
}

/* ---------- learning paths strip ---------- */

.paths-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.path-chip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 190px;
  max-width: 250px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 10px 12px;
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}
.path-chip:hover { border-color: var(--accent); }
.path-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.path-chip.active { border-color: var(--accent); background: var(--accent-soft); }

.path-chip-title {
  font-size: 13px;
  line-height: 1.35;
}

.path-chip-count {
  font-size: 11px;
  color: var(--ink-soft);
}

.path-chip-track {
  display: block;
  position: relative;
  height: 2px;
  background: var(--rule);
}

.path-chip-fill {
  display: block;
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--accent);
}

.path-blurb {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.ep-card {
  display: flex;
  align-items: center;
  gap: 18px;
  border-top: 1px solid var(--rule);
  padding: 18px 4px;
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.ep-list { border-bottom: 1px solid var(--rule); }
.ep-card:hover { background: var(--paper-raised); }
.ep-card:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.ep-number {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--accent);
  flex: none;
  width: 44px;
}

.ep-body { flex: 1; min-width: 0; }

.ep-title {
  font-size: 17px;
  margin: 0 0 4px;
  text-wrap: balance;
}

/* One flex row for every card action, so the toggles and links keep the same
   rhythm instead of relying on ad-hoc margins. */
.ep-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-top: 10px;
}

.ep-transcript-link {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.ep-transcript-link:hover { color: var(--accent); border-color: var(--accent); }
.ep-transcript-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.quiz-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.transcript-link {
  font-size: 12px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
.transcript-link:hover { color: var(--accent); border-color: var(--accent); }
.transcript-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.transcript-reader-actions {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
}

.resume-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--ink);
}

/* Sits at the bottom of the quiz view — decoration under the content. */
.wordcloud-frame {
  display: block;
  margin: 34px 0 0;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper-raised);
  padding: 10px;
}
.wordcloud-frame:hover { border-color: var(--accent); }
.wordcloud-frame:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.wordcloud-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: contain;
}

/* ---------- transcript search ---------- */

.search-panel {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 18px;
}

.search-status {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 10px 0 0;
  min-height: 14px;
}

.search-results {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.search-row {
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}
.search-row:first-child { border-top: none; padding-top: 0; }

.search-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.search-row-title {
  font-size: 15px;
  font-weight: 600;
}

.search-row-count {
  font-size: 11.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.search-row-snippet {
  margin: 6px 0 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.search-row-snippet mark {
  background: var(--accent-soft);
  color: var(--ink);
  border-radius: 2px;
  padding: 0 2px;
  font-weight: 600;
}

.search-row-actions {
  display: flex;
  gap: 16px;
}

.search-row-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
}
.search-row-link:hover { border-bottom-color: var(--accent); }
.search-row-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.ep-teaser {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.4;
}

/* ---------- shared search/filter input + intro text ---------- */
/* (.request-search/.request-intro/.request-empty names are inherited from
   the old "request a quiz" panel but are now shared by the topic filter,
   transcript search, account forms, and the "no episodes match" message.) */

.request-intro {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 16px;
}

.request-search {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 12px;
}
.request-search:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.request-empty {
  padding: 14px 4px;
  color: var(--ink-soft);
  font-size: 13.5px;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 4px 0;
}

.pagination-size {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}

.pagination-select {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 5px 8px;
  font-size: 12.5px;
  color: var(--ink);
}
.pagination-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.pagination-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pagination-status {
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.pagination-btn {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 6px 12px;
  cursor: pointer;
}
.pagination-btn:hover:not(:disabled) { border-color: var(--accent); }
.pagination-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pagination-btn:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 480px) {
  .pagination { justify-content: flex-start; }
}

.topic-other {
  margin-top: -1px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-top: none;
  padding: 14px 18px 18px;
}

.topic-other-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 10px;
}

.topic-other-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 13.5px;
  border-top: 1px solid var(--rule);
}
.topic-other-row:first-of-type { border-top: none; }

.ep-status {
  flex: none;
  text-align: right;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--ink-soft);
  min-width: 84px;
}

.ep-status .best {
  display: block;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 2px;
}

.in-progress-badge {
  display: block;
  color: var(--warm);
  margin-bottom: 4px;
}
.ep-status .best.perfect { color: var(--accent); }

/* ---------- view tabs ---------- */

.view-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  align-items: center;
}

/* light/dark toggle: sits at the right end of the tab row; the glyph is the
   state (◐ system, ○ light, ● dark) */
.theme-toggle {
  margin-left: auto;
  background: none;
  border: none;
  padding: 6px 8px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.view-tab {
  background: none;
  border: 1px solid var(--rule);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  padding: 8px 16px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  cursor: pointer;
}
.view-tab:hover { color: var(--ink); }
.view-tab.active { color: var(--accent); background: var(--paper-raised); }
.view-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.review-badge {
  display: inline-block;
  margin-left: 7px;
  min-width: 17px;
  padding: 1px 5px;
  border-radius: 9px;
  background: var(--warm);
  color: var(--paper);
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

/* ---------- review view ---------- */

.review-status {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

.review-start-row { margin-bottom: 26px; }

.review-source {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin: 0 0 14px;
}

/* ---------- transcripts view ---------- */

.transcript-list { margin-top: 14px; border-bottom: 1px solid var(--rule); }

.transcript-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-top: 1px solid var(--rule);
  padding: 12px 4px;
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.transcript-row:hover { background: var(--paper-raised); }
.transcript-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.transcript-row-id {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--accent);
  flex: none;
  width: 40px;
}

.transcript-row-title { font-size: 15px; flex: 1; min-width: 0; }

.transcript-row-quiz-link {
  flex: none;
  background: none;
  border: none;
  padding: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.transcript-row-quiz-link:hover { border-bottom-color: var(--accent); }
.transcript-row-quiz-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.transcript-empty {
  padding: 14px 4px;
  color: var(--ink-soft);
  font-size: 13.5px;
}

.transcript-reader { margin-top: 18px; }

/* ---------- key ideas (learn data) ---------- */

.learn-panel {
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper-raised);
  padding: 16px 18px;
}

/* Inline key-ideas shortcut on episode cards */
.ep-learn-toggle {
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  padding: 0;
  cursor: pointer;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.ep-learn { margin-top: 10px; cursor: default; }
.ep-learn .learn-panel { background: var(--paper); }
/* The inline transcript is supporting evidence, not the headline: smaller,
   shorter, and quieter than the key-ideas panel above it. */
.ep-transcript-inline {
  margin-top: 8px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper);
  padding: 12px 14px;
  line-height: 1.6;
  font-size: 14px;
  color: var(--ink-soft);
}
.ep-learn-status {
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft);
}

.learn-argument {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 12px;
}

.learn-ideas {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.learn-ideas li { margin-bottom: 6px; }
.learn-ideas li:last-child { margin-bottom: 0; }

.learn-terms {
  border-top: 1px dashed var(--rule);
  padding-top: 10px;
}

.learn-term-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
  font-size: 13.5px;
  line-height: 1.5;
}

.learn-term {
  flex: none;
  width: 130px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}

.learn-def { color: var(--ink-soft); }

.learn-details {
  margin-top: 14px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper-raised);
  padding: 10px 14px;
}

.learn-summary {
  cursor: pointer;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* The copy that leads a view (quiz, transcript reader) rather than trailing it. */
.learn-details-lead { margin: 22px 0 28px; }

.learn-summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.learn-details[open] .learn-summary { color: var(--accent); }

.learn-details .learn-panel {
  border: none;
  background: none;
  padding: 14px 0 4px;
}

.note-actions { margin-top: 10px; }

@media (max-width: 480px) {
  .path-chip { max-width: none; }
  .learn-term-row { flex-direction: column; gap: 2px; }
  .learn-term { width: auto; }
}

.transcript-body {
  margin-top: 14px;
  white-space: pre-wrap;
  line-height: 1.7;
  font-size: 15px;
  max-height: 65vh;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper-raised);
  padding: 18px;
}

.transcript-para { margin: 0 0 1.1em; }
.transcript-para:last-child { margin-bottom: 0; }

/* The paragraph a "Read the passage →" link points at. */
.transcript-para.passage-hit {
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  border-radius: 2px;
  padding: 8px 12px;
  margin-left: -14px;
}

/* ---------- credit view ---------- */

.credit-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

.credit-inline-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.credit-inline-link:hover { border-color: var(--accent); }
.credit-inline-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.credit-quote {
  font-style: italic;
  padding-left: 14px;
  border-left: 2px solid var(--rule);
}

.credit-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.credit-link-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
}
.credit-link-card:hover { background: var(--paper-raised); border-color: var(--accent); }
.credit-link-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.credit-link-title { font-size: 13px; color: var(--accent); letter-spacing: 0.04em; }
.credit-link-desc { font-size: 13.5px; color: var(--ink-soft); }

.credit-back-link {
  display: inline-block;
  margin-top: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.credit-back-link:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- quiz view ---------- */

.back-link {
  background: none;
  border: none;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
  margin-bottom: 22px;
}
.back-link:hover { color: var(--accent); }

/* back-link on the left, prev/next episode pager on the right */
.pager-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pager-nav { display: flex; gap: 18px; }
.pager-nav .back-link:disabled { opacity: 0.35; cursor: default; }
.pager-nav .back-link:disabled:hover { color: var(--ink-soft); }

.progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 4px 0 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--ink-soft);
}

.progress-track {
  height: 2px;
  background: var(--rule);
  width: 100%;
  position: relative;
  margin-bottom: 30px;
}
.progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--accent);
  transition: width 0.4s ease;
}

.card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 32px 30px;
}

.q-number {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--accent);
  margin: 0 0 14px;
}

.question-text {
  font-size: 20px;
  line-height: 1.42;
  margin: 0 0 26px;
  text-wrap: balance;
}

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

.option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  width: 100%;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.option:hover:not(:disabled) { border-color: var(--accent); }
.option:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.option .letter {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.option:disabled { cursor: default; }
.option.correct { border-color: var(--accent); background: var(--accent-soft); }
.option.correct .letter { border-color: var(--accent); color: var(--accent); }
.option.wrong { border-color: var(--warm); background: var(--warm-soft); }
.option.wrong .letter { border-color: var(--warm); color: var(--warm); }
.option.dim { opacity: 0.5; }

.note {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--rule);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  display: none;
}
.note.show { display: block; }
.note strong { color: var(--ink); font-weight: 700; }

.next-row {
  margin-top: 22px;
  display: none;
  justify-content: flex-end;
}
.next-row.show { display: flex; }

/* ---------- results ---------- */

.results { display: none; }
.results.show { display: block; }

.score-line {
  font-size: 44px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  margin: 4px 0 6px;
}
.score-label { color: var(--ink-soft); font-size: 14px; margin: 0 0 26px; }

.missed-title {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 30px 0 12px;
}
.missed-item {
  font-size: 14.5px;
  line-height: 1.5;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
}
.missed-item:last-child { border-bottom: 1px solid var(--rule); }
.missed-item .q { color: var(--ink-soft); margin-bottom: 3px; }

.results-actions {
  margin-top: 30px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

button.restart {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 11px 18px;
  border-radius: 2px;
  cursor: pointer;
}
button.restart:hover { border-color: var(--accent); }
button.restart:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (max-width: 480px) {
  .card { padding: 24px 18px; }
  .question-text { font-size: 18px; }
  h1 { font-size: 25px; }
  .ep-card { gap: 12px; }
  .ep-status { min-width: 60px; }
}