/* ===========================================================================
   Reader — the long-form surface.
   Lesson bodies are stored as HTML fragments that use only these classes, never
   inline styles. That is what lets one authored lesson render correctly in both
   themes, and lets us restyle every lesson at once by editing this file.
   =========================================================================== */

.reader-shell { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 40px; align-items: start; }

/* ------------------------------------------------------------------- rail */
.rail { position: sticky; top: 74px; max-height: calc(100vh - 96px); overflow-y: auto; padding-right: 4px; }
.rail-title { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin: 0 0 10px 10px; }

.toc { list-style: none; margin: 0 0 18px; padding: 0; }
.toc li { margin: 0; }
.toc a {
  display: grid; grid-template-columns: 22px 1fr; align-items: baseline; gap: 10px;
  padding: 8px 11px; border-radius: 9px; font-size: 14.5px; color: var(--ink-2);
  border-left: 2px solid transparent; transition: all var(--t-fast); line-height: 1.4;
}
.toc a:hover { background: var(--panel-2); color: var(--ink); text-decoration: none; }
.toc a.on { color: var(--ink); background: var(--panel-2); border-left-color: var(--accent); font-weight: 560; }
.toc a.done { color: var(--ok); }
.toc-n { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.toc a.done .toc-n::after { content: " ✓"; }

/* ------------------------------------------------------------------ prose
   Two widths on purpose. TEXT stays at a comfortable measure (~72 characters)
   because long lines are genuinely harder to read. FIGURES take the full
   column — a 980-unit diagram squeezed into a text column renders its labels
   at ~7px, which defeats the point of drawing it. */
.prose {
  max-width: 100%;
  font-size: 18px;
  line-height: 1.8;
  color: var(--ink);
}
.prose > section { scroll-margin-top: 84px; margin: 0 0 62px; }

.prose p, .prose ul, .prose ol,
.prose h3, .prose h4,
.prose .note, .prose .gl, .prose .predict,
.prose details, .prose .s-head { max-width: var(--col); }

.prose figure, .prose .tw, .prose pre, .prose .tracer { max-width: 100%; }

.prose h2 { font-size: clamp(24px, 3.2vw, 31px); margin: 0 0 22px; letter-spacing: -.022em; }
.prose h3 { font-size: 21px; margin: 38px 0 12px; }
.prose h4 { font-size: 17px; margin: 27px 0 9px; color: var(--ink-2); }
.prose p { margin: 0 0 17px; }
.prose ul, .prose ol { padding-left: 24px; margin: 0 0 19px; }
.prose li { margin-bottom: 9px; }
.prose li::marker { color: var(--ink-3); }
.prose strong, .prose b { font-weight: 640; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.prose code {
  font-family: var(--mono); font-size: .87em;
  background: var(--panel-2); border: 1px solid var(--border);
  padding: 1.5px 5px; border-radius: 5px; color: var(--ink);
}

/* section heading with its number badge and a done toggle */
.s-head { display: flex; gap: 15px; align-items: flex-start; margin: 0 0 22px; }
.s-num {
  flex: 0 0 auto; font-family: var(--mono); font-size: 11.5px; font-weight: 650;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  padding: 3px 9px; border-radius: 7px; margin-top: 7px;
}
.s-done {
  margin-left: auto; flex: 0 0 auto; margin-top: 4px;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--ink-3);
  transition: all var(--t-fast); font-weight: 600;
}
.s-done:hover { border-color: var(--accent); color: var(--ink-2); }
.s-done.on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); background: color-mix(in srgb, var(--ok) 13%, transparent); }

/* ------------------------------------------------------------------ notes */
.note {
  border-left: 4px solid var(--accent);
  background: var(--panel);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 18px 22px;
  margin: 28px 0;
}
.note.warn { border-left-color: var(--warn); }
.note.ok { border-left-color: var(--ok); }
.note.gold { border-left-color: var(--gold); }
.note > .tag {
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); font-weight: 650; margin-bottom: 7px;
}
.note.warn > .tag { color: var(--warn); }
.note.ok > .tag { color: var(--ok); }
.note.gold > .tag { color: var(--gold); }
.note p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------- code */
.prose pre {
  background: var(--d-solid);
  color: #DCE6F0;
  font-family: var(--mono);
  font-size: 14.2px;
  line-height: 1.72;
  padding: 19px 22px;
  overflow-x: auto;
  margin: 20px 0;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
}
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }
.prose pre.bad { border-left-color: var(--warn); }
.prose pre.good { border-left-color: var(--ok); }

.cm { color: #7E93A8; font-style: italic; }
.kw { color: #7FB2E8; }
.st { color: #C79BE0; }
.nu { color: #E0A87F; }
.fn { color: #8FD9C0; }
.ty { color: #E8C97F; }

/* ---------------------------------------------------------------- figures */
.prose figure { margin: 38px 0; max-width: 100%; }
.figbox {
  background: var(--d-paper);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 22px 20px;
  overflow-x: auto;
}
.prose figcaption {
  font-family: var(--mono); font-size: 12px; letter-spacing: .07em;
  color: var(--ink-2); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  line-height: 1.6;
}
.prose figcaption b { color: var(--ink-2); font-weight: 650; }
/* A diagram authored at 980 units must never render below ~820px wide, or its
   labels drop under 9px and become unreadable. Below that the box scrolls. */
.prose svg { display: block; width: 100%; height: auto; min-width: 820px; }

/* --- diagram palette. Every authored SVG uses ONLY these classes so the
       artwork inverts correctly with the theme instead of going invisible. --- */
.d-paper { fill: var(--d-paper); }
.d-panel { fill: var(--d-panel); stroke: var(--d-rule); }
.d-panel-n { fill: var(--d-panel); stroke: none; }
.d-solid { fill: var(--d-solid); }
.d-none { fill: none; }
.d-box { fill: var(--d-paper); stroke: var(--d-rule); }
.d-dash { fill: none; stroke: var(--d-rule); stroke-dasharray: 3 3; }

.d-line { stroke: var(--d-rule); fill: none; }
.d-arrow { stroke: var(--d-dim); fill: none; }

/* Diagram type scale — sized so labels stay legible at the rendered width. */
.d-t { font-family: "IBM Plex Sans", sans-serif; font-size: 13.5px; font-weight: 650; fill: var(--d-ink); }
.d-l { font-family: "IBM Plex Mono", monospace; font-size: 12px; fill: var(--d-ink); }
.d-s { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; fill: var(--d-dim); }
.d-inv { fill: #EDF2FA; }
.d-inv-s { fill: #A6B7CE; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; }

.d-stack { fill: var(--d-stack); }
.d-stack-s { stroke: var(--d-stack); fill: none; }
.d-stack-box { fill: color-mix(in srgb, var(--d-stack) 22%, var(--d-paper)); stroke: var(--d-stack); }
.d-heap { fill: var(--d-heap); }
.d-heap-s { stroke: var(--d-heap); fill: none; }
.d-heap-box { fill: color-mix(in srgb, var(--d-heap) 22%, var(--d-paper)); stroke: var(--d-heap); }
.d-ok { fill: var(--d-ok); }
.d-ok-box { fill: color-mix(in srgb, var(--d-ok) 22%, var(--d-paper)); stroke: var(--d-ok); }
.d-warn { fill: var(--d-warn); }
.d-warn-s { stroke: var(--d-warn); fill: none; }
.d-warn-box { fill: color-mix(in srgb, var(--d-warn) 22%, var(--d-paper)); stroke: var(--d-warn); }
.d-warn-solid { fill: var(--d-warn); }
.d-dim-f { fill: var(--d-dim); }
.d-ghost { fill: var(--d-panel); stroke: var(--d-rule); stroke-dasharray: 3 3; }
.d-ghost-t { fill: var(--d-dim); font-family: "IBM Plex Mono", monospace; font-size: 12px; }

/* ------------------------------------------------------------------ table */
.tw { overflow-x: auto; margin: 22px 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 520px; }
.prose th {
  text-align: left; padding: 11px 14px; background: var(--panel-2);
  border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); font-weight: 650; white-space: nowrap;
}
.prose td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.6; }
.prose tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------- interactive fx */
/* hotspot map: clickable blocks inside a diagram */
.hot { cursor: pointer; }
.hot rect, .hot circle { transition: opacity var(--t-fast); }
.hot:hover rect, .hot:hover circle { opacity: .78; }
.hot.on rect { stroke-width: 2.2; }

.mapinfo {
  margin-top: 13px; padding: 12px 16px; background: var(--panel-2);
  border-left: 3px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 14.3px; min-height: 50px; line-height: 1.6;
}
.mapinfo b { font-family: var(--mono); font-size: 12.5px; }

/* step-through tracer */
.tracer { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; }
.tr-ctl { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 17px; }
.tr-step { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-left: auto; }
.tr-line {
  font-family: var(--mono); font-size: 14.5px; background: var(--d-solid); color: #DCE6F0;
  padding: 11px 15px; margin-bottom: 16px; border-radius: var(--r-sm); border-left: 3px solid var(--accent);
  overflow-x: auto; white-space: pre;
}
.tr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tr-pane { border: 1px solid var(--border); border-radius: var(--r-md); min-height: 200px; overflow: hidden; }
.tr-pane > header {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  padding: 8px 12px; border-bottom: 1px solid var(--border); font-weight: 650;
}
.tr-pane.st > header { background: color-mix(in srgb, var(--d-stack) 15%, transparent); color: var(--d-stack); }
.tr-pane.hp > header { background: color-mix(in srgb, var(--d-heap) 15%, transparent); color: var(--d-heap); }
.tr-body { padding: 11px; }

.frame { border: 1px dashed var(--d-stack); border-radius: var(--r-sm); margin-bottom: 9px; overflow: hidden; }
.frame > b {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 9px; color: var(--d-stack); background: color-mix(in srgb, var(--d-stack) 12%, transparent);
}
.obj { border: 1px solid var(--d-heap); border-radius: var(--r-sm); margin-bottom: 9px; overflow: hidden; }
.obj > b {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em;
  padding: 5px 9px; color: var(--d-heap); background: color-mix(in srgb, var(--d-heap) 12%, transparent);
}
.slot {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 5px 9px;
  font-family: var(--mono); font-size: 13px; border-top: 1px solid var(--border);
}
.slot > span:last-child { color: var(--d-stack); font-weight: 650; }
.slot.prim > span:last-child { color: var(--ink); }
.obj .slot > span:last-child { color: var(--d-heap); }
.slot.hl { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.pool { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel-2); margin-top: 10px; overflow: hidden; }
.pool > b { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em; padding: 5px 9px; color: var(--ink-3); }
.slot-empty { font-family: var(--mono); font-size: 11px; color: var(--ink-3); padding: 6px 9px; }
.tr-note {
  margin-top: 16px; padding: 14px 17px; background: var(--panel-2);
  border-left: 3px solid var(--ok); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 16px; min-height: 46px; line-height: 1.7;
}

/* ------------------------------------------------------------- animation */
/* Every id'd node in an animated figure gets this; the widget only toggles
   the three state classes, so timing stays in CSS and authoring stays data. */
.anim-el {
  transition: opacity .45s cubic-bezier(.4, 0, .2, 1),
              transform .45s cubic-bezier(.22, 1, .36, 1);
  transform-box: fill-box;
  transform-origin: center;
}
.a-hide { opacity: 0; }
.a-dim { opacity: .22; }
.a-hl { opacity: 1; transform: scale(1.045); }
.a-hl rect, .a-hl circle, .a-hl path { filter: drop-shadow(0 0 7px var(--accent)); }

.anim-ctl {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border);
}
.anim-scrub {
  flex: 1; min-width: 120px; accent-color: var(--accent);
  height: 4px; cursor: pointer;
}
.anim-note {
  margin-top: 14px; padding: 15px 18px; font-size: 16px; line-height: 1.7; border-radius: var(--r-sm);
  background: var(--panel-2); border-left: 3px solid var(--accent); min-height: 56px;
}

/* --------------------------------------------------------------- predict */
.predict {
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  background: color-mix(in srgb, var(--gold) 7%, transparent);
  border-radius: var(--r-md); padding: 18px 20px; margin: 28px 0;
}
.predict .eyebrow { color: var(--gold); }
.predict-opt {
  justify-content: flex-start; text-align: left; margin-bottom: 7px;
  background: var(--bg-3);
}
.predict-opt:disabled { opacity: 1; cursor: default; }
.predict-opt.is-right {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 15%, transparent);
}
.predict-opt.is-wrong {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 15%, transparent);
}

/* -------------------------------------------------------------- q&a cards */
.qa { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); margin-bottom: 10px; overflow: hidden; }
.qa.open { border-color: var(--accent); }
.qa > summary {
  padding: 16px 20px; cursor: pointer; font-weight: 580; font-size: 16.5px;
  display: flex; gap: 12px; align-items: baseline; list-style: none;
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::before {
  content: attr(data-n); font-family: var(--mono); font-size: 10.5px; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); padding: 2px 7px;
  border-radius: 6px; flex: 0 0 auto;
}
.qa[open] > summary { border-bottom: 1px solid var(--border); }
.qa-body { padding: 6px 20px 20px; font-size: 16.5px; line-height: 1.75; }
.qa-body p { margin: 12px 0 0; }
.qa-body p:first-child { margin-top: 8px; }

/* --------------------------------------------------------------- glossary */
.gl { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); overflow: hidden; }
.gl dl { margin: 0; }
.gl dt { padding: 14px 18px 0; font-family: var(--mono); font-size: 14.5px; font-weight: 650; color: var(--accent); }
.gl dt em { font-style: normal; color: var(--ink-3); font-size: 11.5px; letter-spacing: .04em; }
.gl dd { margin: 0; padding: 4px 18px 14px; border-bottom: 1px solid var(--border); font-size: 15.5px; line-height: 1.68; }
.gl dd:last-child { border-bottom: 0; }

/* ------------------------------------------------------------------ misc */
.kb { display: inline-block; font-family: var(--mono); font-size: 11px; border: 1px solid var(--border); background: var(--panel-2); padding: 1px 7px; border-radius: 5px; color: var(--ink-3); }

.lesson-hero { padding: 26px 0 22px; border-bottom: 1px solid var(--border); margin-bottom: 30px; }
.lesson-hero h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.08; margin: 14px 0 14px; max-width: 20ch; }
.lesson-lede { font-size: 20px; color: var(--ink-2); max-width: 58ch; line-height: 1.62; }

.metastrip { display: flex; flex-wrap: wrap; gap: 0; margin-top: 24px; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--panel); }
.metastrip > div { padding: 10px 16px; border-right: 1px solid var(--border); font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.metastrip > div:last-child { border-right: 0; }
.metastrip strong { display: block; color: var(--ink); font-size: 14px; letter-spacing: 0; margin-top: 2px; text-transform: none; font-family: var(--sans); }

@media (max-width: 1080px) {
  .reader-shell { grid-template-columns: 1fr; gap: 18px; }
  .rail { position: static; max-height: none; }
  .toc { display: flex; flex-wrap: wrap; gap: 4px; }
  .toc a { border-left: 0; border: 1px solid var(--border); }
  .tr-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .prose { font-size: 16px; }
  .prose svg { min-width: 460px; }
}