/* ============================================================
   Mathematics 1 for Risk Management — design system
   Dark, 3blue1brown-inspired. Chart palette validated for CVD
   on surface #0f1620 (see README).
   ============================================================ */

:root {
  /* surfaces */
  --surface: #0f1620;
  --surface-deep: #0a0f16;
  --panel: #16202c;
  --panel-2: #1b2837;
  --border: #26364a;

  /* ink */
  --ink: #e8edf2;
  --ink-2: #b9c4d0;
  --ink-muted: #8a97a5;

  /* validated categorical chart palette (fixed order) */
  --c-blue: #2f8fbf;
  --c-yellow: #b8860b;
  --c-purple: #9b6fd0;
  --c-green: #5fa85f;
  --c-red: #cc5544;

  /* bright accents — large display text and glows only */
  --a-blue: #58c4dd;
  --a-yellow: #f0c674;
  --a-purple: #c792ea;
  --a-green: #83c167;
  --a-red: #fc6255;

  --radius: 12px;
  --content: 860px;
  --wide: 1080px;

  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --font-mono: "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(47, 143, 191, 0.10), transparent 60%),
    radial-gradient(900px 480px at -10% 8%, rgba(155, 111, 208, 0.07), transparent 55%),
    var(--surface);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- header / nav ---------- */
.topnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 15, 22, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topnav-inner {
  max-width: var(--wide); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 8px 18px; min-height: 58px;
  padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap;
}
.brand {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand .brand-pi { color: var(--a-blue); }
.navlinks { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.navlinks a {
  color: var(--ink-muted); text-decoration: none; font-size: 14px;
  padding: 6px 11px; border-radius: 8px; white-space: nowrap;
}
.navlinks a:hover { color: var(--ink); background: var(--panel); }
.navlinks a.current { color: var(--a-blue); background: rgba(47, 143, 191, 0.12); }
.progress-track { height: 2px; background: transparent; }
.progress-bar { height: 2px; width: 0; background: linear-gradient(90deg, var(--a-blue), var(--a-purple)); }

/* ---------- layout ---------- */
main { max-width: var(--content); margin: 0 auto; padding: 36px 24px 120px; }
section { margin: 0 0 26px; }

.hero { padding: 48px 0 8px; }
.hero .eyebrow {
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--a-blue); font-weight: 600; margin-bottom: 10px;
}
h1 {
  font-family: var(--font-display); color: var(--ink);
  font-size: clamp(30px, 5vw, 44px); line-height: 1.15; margin: 0 0 14px;
  font-weight: 700; letter-spacing: -0.01em;
}
.hero .lede { font-size: 19px; color: var(--ink-2); max-width: 620px; }
.hero .course-intro { margin-top: 24px; }

h2 {
  font-family: var(--font-display); color: var(--ink);
  font-size: 28px; margin: 64px 0 12px; line-height: 1.25;
  padding-top: 8px;
}
h2 .secnum { color: var(--a-blue); margin-right: 10px; font-variant-numeric: tabular-nums; }
h3 { font-family: var(--font-display); color: var(--ink); font-size: 21px; margin: 36px 0 8px; }
p { margin: 0 0 16px; }
a { color: var(--a-blue); }
strong { color: var(--ink); }
em { color: inherit; }
code { font-family: var(--font-mono); font-size: 0.88em; background: var(--panel); padding: 2px 6px; border-radius: 6px; }

/* hover definitions for technical terms: <span class="def" data-def="...">term</span>
   (each term is also defined in the main text at first use — the tooltip is a reminder) */
.def {
  border-bottom: 1px dotted var(--ink-muted);
  cursor: help; position: relative;
}
.def:hover::after, .def:focus::after {
  content: attr(data-def);
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(100% + 7px); z-index: 30;
  background: var(--surface-deep); border: 1px solid var(--border);
  color: var(--ink); font-size: 13px; font-weight: 400; line-height: 1.5;
  padding: 8px 12px; border-radius: 8px; width: max-content; max-width: 300px;
  white-space: normal; text-align: left;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* colored inline concept terms — text stays readable, color = identity */
.term-b { color: var(--a-blue); font-weight: 600; }
.term-y { color: var(--a-yellow); font-weight: 600; }
.term-p { color: var(--a-purple); font-weight: 600; }
.term-g { color: var(--a-green); font-weight: 600; }
.term-r { color: var(--a-red); font-weight: 600; }

/* Session 3: the same decision is used on both demand branches. */
.session-three .decision-tree {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 64px minmax(0, 1.4fr);
  align-items: center; gap: 12px;
  max-width: 680px; margin: 28px auto;
}
.session-three .tree-choice, .session-three .tree-outcome {
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); color: var(--ink); text-align: center; line-height: 1.4;
}
.session-three .tree-choice { border-color: var(--c-yellow); }
.session-three .decision-tree small { color: var(--ink-2); font-size: 0.85em; }
.session-three .tree-branches { width: 100%; height: 200px; }
.session-three .tree-branches text { fill: var(--ink); font-size: 22px; }
.session-three .tree-outcomes {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 200px; min-width: 0;
}
@media (max-width: 480px) {
  .session-three .decision-tree {
    grid-template-columns: 80px 48px minmax(0, 1fr); gap: 8px;
  }
  .session-three .tree-choice, .session-three .tree-outcome { padding: 9px 5px; }
  /* marginal tree (Section 2): longer outcome text, smaller type so both boxes fit */
  .session-three .marginal-tree .tree-outcome { font-size: 13px; padding: 7px 5px; }
  .session-three .marginal-tree .tree-branches text { font-size: 17px; }
}

/* ---------- callouts ---------- */
.keypoint, .storybox, .warning {
  border-radius: var(--radius); padding: 18px 20px; margin: 22px 0;
  border: 1px solid var(--border); background: var(--panel);
}
.keypoint { border-left: 3px solid var(--a-blue); }
.keypoint .kp-tag, .storybox .kp-tag, .warning .kp-tag {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--a-blue); display: block; margin-bottom: 6px;
}
.storybox { border-left: 3px solid var(--a-yellow); }
.storybox .kp-tag { color: var(--a-yellow); }
.warning { border-left: 3px solid var(--a-red); }
.warning .kp-tag { color: var(--a-red); }
.keypoint p:last-child, .storybox p:last-child, .warning p:last-child { margin-bottom: 0; }

/* display equations get room */
.katex-display { margin: 20px 0; overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.derivation-body .katex-display { margin: 26px 0; padding: 8px 0; }
.katex { font-size: 1.06em; position: relative; }
/* keep the visually-hidden MathML layer from widening the page on phones */
.katex-mathml { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }

/* ---------- derivation accordions ---------- */
details.derivation {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); margin: 18px 0; overflow: hidden;
}
details.derivation summary {
  cursor: pointer; padding: 14px 20px; color: var(--a-purple); font-weight: 600;
  list-style: none; user-select: none;
}
details.derivation summary::before { content: "▸ "; }
details.derivation[open] summary::before { content: "▾ "; }
details.derivation .derivation-body { padding: 2px 20px 16px; border-top: 1px solid var(--border); }

/* ---------- interactive figure blocks ---------- */
.interactive {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px 16px; margin: 26px 0;
  width: min(var(--wide), 100%);
}
@media (min-width: 1160px) {
  /* widen to --wide and overhang the text column symmetrically:
     100% here is the content box of <main>, so this centers the panel. */
  .interactive.wide {
    width: var(--wide);
    margin-left: calc((100% - var(--wide)) / 2);
  }
}
.interactive .fig-title {
  font-family: var(--font-display); color: var(--ink); font-size: 18px;
  font-weight: 700; margin: 0 0 2px;
}
.interactive .fig-sub { font-size: 14px; color: var(--ink-muted); margin: 0 0 14px; }
.interactive .fig-note { font-size: 13.5px; color: var(--ink-muted); margin: 10px 0 0; }
.plot-host { position: relative; }
svg.plot { display: block; width: 100%; height: auto; }
svg.plot text { font-family: var(--font-body); }
svg.plot .tick { fill: var(--ink-muted); font-size: 12.5px; }
svg.plot .axis-label { fill: var(--ink-2); font-size: 13.5px; }
svg.plot .plot-label { fill: var(--ink); font-size: 13px; }
svg.plot .plot-label.strong { font-weight: 700; font-size: 14px; }
.bar-hover:hover { opacity: 1 !important; filter: brightness(1.25); }

.plot-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--surface-deep); border: 1px solid var(--border);
  color: var(--ink); font-size: 13px; line-height: 1.45;
  padding: 7px 10px; border-radius: 8px; max-width: 260px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.plot-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 4px 0; }
.legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-2); }
.legend-swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ---------- controls ---------- */
.controls {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  padding: 12px 0 4px; margin-top: 6px; border-top: 1px solid var(--border);
}
.ctl-slider { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
.ctl-label { color: var(--ink-2); white-space: nowrap; }
.ctl-value {
  color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600;
  min-width: 58px; font-size: 14px;
}
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 170px; height: 4px;
  background: var(--border); border-radius: 2px; outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--a-blue); cursor: pointer; border: 2.5px solid var(--surface-deep);
  transition: transform 0.1s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--a-blue); cursor: pointer; border: 2.5px solid var(--surface-deep);
}
.ctl-select { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
select {
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; font-size: 14px; font-family: inherit;
}
.btn {
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 16px; font-size: 14px; cursor: pointer;
  font-family: inherit; transition: background 0.15s;
}
.btn:hover { background: var(--border); }
.btn-primary { background: rgba(47, 143, 191, 0.2); border-color: var(--c-blue); color: var(--a-blue); }
.btn-primary:hover { background: rgba(47, 143, 191, 0.32); }

/* ---------- readouts ---------- */
.readout { display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 10px 0 2px; }
.readout-item { display: flex; align-items: baseline; gap: 9px; }
.readout-label { font-size: 13px; color: var(--ink-muted); display: inline-flex; align-items: center; gap: 6px; }
.readout-value {
  font-size: 17px; color: var(--ink); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- quiz ---------- */
.quiz {
  border: 1px solid var(--border); border-left: 3px solid var(--a-green);
  border-radius: var(--radius); background: var(--panel);
  padding: 18px 20px; margin: 26px 0;
}
.quiz-tag {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--a-green); margin-bottom: 8px;
}
.quiz-q { color: var(--ink); font-weight: 600; margin-bottom: 12px; }
.quiz-opts { display: grid; gap: 8px; }
.quiz-opt {
  text-align: left; background: var(--panel-2); color: var(--ink-2);
  border: 1px solid var(--border); border-radius: 9px; padding: 10px 14px;
  font-size: 15px; cursor: pointer; font-family: inherit; line-height: 1.5;
}
.quiz-opt:hover { border-color: var(--ink-muted); color: var(--ink); }
.quiz-done .quiz-opt { cursor: default; opacity: 0.75; }
.quiz-opt.quiz-correct {
  border-color: var(--c-green); background: rgba(95, 168, 95, 0.14);
  color: var(--ink); opacity: 1;
}
.quiz-opt.quiz-wrong { border-color: var(--c-red); background: rgba(204, 85, 68, 0.13); opacity: 1; }
.quiz-explain { margin-top: 12px; font-size: 15px; color: var(--ink-2); border-top: 1px solid var(--border); padding-top: 12px; }

/* ---------- numeric-entry exercises (UI.numcheck) ---------- */
.numcheck {
  border: 1px solid var(--border); border-left: 3px solid var(--a-purple);
  border-radius: var(--radius); background: var(--panel);
  padding: 18px 20px; margin: 26px 0;
}
.numcheck-tag {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--a-purple); margin-bottom: 8px;
}
.numcheck-q { color: var(--ink); font-weight: 600; margin-bottom: 12px; }
.numcheck-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.numcheck input {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--ink);
  border-radius: 8px; padding: 8px 12px; font-size: 15px; width: 140px;
  font-family: inherit; font-variant-numeric: tabular-nums;
}
.numcheck input:focus { outline: none; border-color: var(--a-purple); }
.numcheck-unit { color: var(--ink-muted); font-size: 14px; }
.numcheck-verdict { font-weight: 700; font-size: 14px; }
.numcheck-verdict.ok { color: var(--a-green); }
.numcheck-verdict.off { color: var(--a-red); }
.numcheck-explain {
  margin-top: 12px; font-size: 15px; color: var(--ink-2);
  border-top: 1px solid var(--border); padding-top: 12px;
}
.numcheck.locked { opacity: 0.45; pointer-events: none; }
.numcheck.numcheck-done input { opacity: 0.7; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin: 20px 0; }
table.data {
  border-collapse: collapse; font-size: 14.5px; min-width: 480px; width: 100%;
  font-variant-numeric: tabular-nums;
}
table.data th {
  text-align: left; color: var(--ink); border-bottom: 2px solid var(--border);
  padding: 8px 12px; font-weight: 600;
}
table.data td { padding: 7px 12px; border-bottom: 1px solid var(--border); }
table.data tr:hover td { background: rgba(47, 143, 191, 0.05); }

/* Probability trees retain readable labels on narrow screens. */
.diagram-scroll { overflow-x: auto; margin: 18px 0; }
.diagram-scroll svg { display: block; width: 100%; height: auto; }
.diagram-scroll text { font: 14px var(--font-body); fill: var(--ink-2); }
.diagram-scroll .tree-label-strong { fill: var(--ink); font-weight: 600; }
#weather-tree svg { margin-inline: auto; }
#weather-tree text { font-size: 12.5px; }
.safety-math-label { color: var(--ink); font-size: 15px; line-height: 28px; text-align: center; }
#tree-host svg { min-width: 680px; }
.scroll-hint { display: none; }
@media (max-width: 900px) {
  .scroll-hint { display: block; color: var(--ink-muted); font-size: 13px; margin: 12px 0 0; }
}
.diagram-scroll:focus-visible, .table-wrap:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--a-blue); outline-offset: 4px;
}
.decision-timing { padding-left: 26px; }
.decision-timing li { padding: 5px 0 9px; }
.normal-form td, .normal-form th { padding: 14px 12px; }
.normal-form .equilibrium { background: rgba(95, 168, 95, 0.10); }
.normal-form .cell-note { display: block; font-size: 12px; color: var(--a-green); margin-top: 5px; }

/* ---------- landing page cards ---------- */
.session-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin: 30px 0; }
.session-card {
  display: block; text-decoration: none; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 22px 18px; transition: transform 0.15s, border-color 0.15s;
  position: relative; overflow: hidden;
}
.session-card:hover { transform: translateY(-3px); border-color: var(--card-c, var(--a-blue)); }
.session-card .sc-num {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--card-c, var(--a-blue)); letter-spacing: 0.08em; text-transform: uppercase;
}
.session-card h3 { margin: 6px 0 8px; font-size: 20px; color: var(--ink); }
.session-card p { color: var(--ink-muted); font-size: 14.5px; margin: 0 0 10px; }
.session-card .sc-apps { font-size: 13px; color: var(--ink-2); }
.session-card .sc-apps span {
  display: inline-block; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 10px; margin: 2px 4px 2px 0;
}

/* ---------- toc sidebar (in-page) ---------- */
.toc {
  position: fixed; top: 90px; right: max(12px, calc((100vw - var(--wide)) / 2 - 190px));
  width: 178px; font-size: 13px; display: none;
}
@media (min-width: 1480px) { .toc { display: block; } }
.toc a {
  display: block; color: var(--ink-muted); text-decoration: none;
  padding: 4px 10px; border-left: 2px solid var(--border); line-height: 1.4;
}
.toc a:hover { color: var(--ink); }
.toc a.active { color: var(--a-blue); border-left-color: var(--a-blue); }

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- session footer nav ---------- */
.pager { display: flex; justify-content: space-between; gap: 14px; margin-top: 70px; }
.pager a {
  flex: 1; text-decoration: none; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px; color: var(--ink-2);
}
.pager a:hover { border-color: var(--a-blue); }
.pager .pager-dir { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); }
.pager .pager-title { color: var(--ink); font-weight: 600; margin-top: 3px; }
.pager a.next { text-align: right; }

footer.site {
  border-top: 1px solid var(--border); margin-top: 40px; padding: 26px 24px 40px;
  text-align: center; font-size: 13.5px; color: var(--ink-muted);
}
footer.site a { color: var(--ink-muted); }
footer.site .beta-note {
  max-width: var(--content); margin: 14px auto 0;
  font-size: 12px; line-height: 1.7;
}
footer.site .beta-note a { text-underline-offset: 3px; }
footer.site .beta-note a:hover,
footer.site .beta-note a:focus-visible { color: var(--a-blue); }

@media (max-width: 640px) {
  html { scroll-padding-top: 190px; }
  .topnav-inner { padding-left: 16px; padding-right: 16px; }
  .navlinks { margin-left: 0; }
  body { font-size: 16px; }
  main { padding: 24px 16px 80px; }
  .navlinks a { padding: 6px 7px; font-size: 13px; }
  /* sliders: full row, flexible track, never wider than the screen */
  .ctl-slider { flex: 1 1 100%; flex-wrap: wrap; }
  .ctl-slider input[type="range"] { flex: 1 1 110px; width: auto; min-width: 90px; }
  /* long inline formulas scroll within the line instead of widening the page */
  p .katex, li .katex, .quiz .katex, .readout-value .katex {
    display: inline-block; max-width: 100%;
    overflow-x: auto; overflow-y: hidden; vertical-align: middle;
  }
}

/* Keep the tree visible and within the printed page, including without background printing. */
@media print {
  .reveal { opacity: 1; transform: none; }
  #weather-example { width: 100%; margin-left: 0; break-inside: avoid; background: white; color: #111; }
  #weather-example .fig-title, #weather-example .fig-sub, #weather-example .fig-note { color: #111; }
  #weather-example .controls, #weather-example .scroll-hint { display: none; }
  #weather-tree { overflow: visible; }
  #weather-tree svg { min-width: 0 !important; width: 100% !important; max-width: 712px; }
  #weather-tree text { fill: #111; }
  #weather-tree .weather-outcome rect { fill: white; stroke: #777; }
}

/* ============================================================
   Session 3 layout (body.keyed). Scoped so the other pages are unchanged.
   Reading column 720px; figure cards up to 1000px, centred on the
   column, with the controls and readouts in a side column next to
   the plot they drive. Plots use Plot's fluid mode (native-size text).
   ============================================================ */
.keyed { --content: 768px; --fig: 1000px; --side: 264px; }
.keyed main { padding-top: 28px; }
.keyed .hero { padding: 40px 0 4px; }
.keyed .hero .lede { max-width: 680px; }
.keyed h2 { font-size: 27px; margin: 72px 0 14px; }
.keyed h2.intro-h { margin-top: 40px; }
.keyed h3 { font-size: 20px; margin: 40px 0 10px; }
.keyed section > p, .keyed section > ul, .keyed section > ol { max-width: 720px; }
.keyed ul.plain { padding-left: 22px; margin: 0 0 16px; }
.keyed ul.plain li { margin: 0 0 8px; }

/* figure cards: one width for every figure on the page */
.keyed .interactive, .keyed .interactive.wide {
  width: max(100%, min(var(--fig), 100vw - 48px));
  margin: 32px 0 32px calc((100% - max(100%, min(var(--fig), 100vw - 48px))) / 2);
  padding: 20px 22px 18px;
}
.keyed .interactive .fig-title { font-size: 18px; line-height: 1.35; margin-bottom: 4px; }
.keyed .interactive .fig-sub { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin-bottom: 12px; max-width: 760px; }
.keyed .interactive .fig-note { font-size: 13.5px; line-height: 1.6; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); max-width: 820px; }
.keyed .fig-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); gap: 22px; align-items: start; }
.keyed .fig-main { min-width: 0; }
.keyed .fig-main > .plot-host + .plot-host { margin-top: 6px; }
.keyed .fig-body:not(.below) > .fig-side {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 14px;
}
@media (max-width: 900px) {
  .keyed .fig-body { grid-template-columns: minmax(0, 1fr); }
}

/* key (explains every mark before the plot) */
.keyed .fig-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 8px; font-size: 13.5px; color: var(--ink-2); }
.keyed .key-item { display: inline-block; white-space: nowrap; }
.keyed .sw { display: inline-block; vertical-align: middle; margin: -2px 7px 0 0; }
.keyed .sw.line { width: 22px; height: 0; border-top: 3px solid var(--c); }
.keyed .sw.dash { width: 22px; height: 0; border-top: 2.5px dashed var(--c); }
.keyed .sw.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.keyed .sw.ring { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ink); }
.keyed .sw.area { width: 14px; height: 12px; border-radius: 2px; background: var(--c); opacity: 0.6; }
.keyed .sw.vbar { width: 3px; height: 14px; background: var(--c); border-radius: 1px; }

/* plots: halo behind in-plot labels so they stay legible over lines */
.keyed svg.plot .tick { font-size: 12px; }
.keyed svg.plot .axis-label { font-size: 13px; fill: var(--ink-2); }
.keyed svg.plot .plot-label {
  font-size: 12.5px; paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round;
}

/* controls in the side column: label and value on one line, track below */
.keyed .fig-body:not(.below) > .fig-side .controls { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 0; margin: 0; border-top: 0; }
.keyed .fig-body:not(.below) > .fig-side .ctl-slider {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: baseline; font-size: 14px;
}
.keyed .fig-body:not(.below) > .fig-side .ctl-slider .ctl-label { grid-column: 1; grid-row: 1; white-space: normal; }
.keyed .fig-body:not(.below) > .fig-side .ctl-slider .ctl-value { grid-column: 2; grid-row: 1; min-width: 0; text-align: right; }
.keyed .fig-body:not(.below) > .fig-side .ctl-slider input[type="range"] { grid-column: 1 / -1; grid-row: 2; width: 100%; margin: 4px 0; }
.keyed .btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.keyed .btn-row .btn { padding: 6px 12px; font-size: 13.5px; }

/* readouts in the side column: label left, value right */
.keyed .fig-body:not(.below) > .fig-side .readout { display: flex; flex-direction: column; gap: 0; padding: 0; }
.keyed .fig-body:not(.below) > .fig-side .readout-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 6px 0; border-top: 1px solid var(--border);
}
.keyed .fig-body:not(.below) > .fig-side .readout-item:first-child { border-top: 0; padding-top: 0; }
.keyed .readout-label { display: block; }
.keyed .fig-body:not(.below) > .fig-side .readout-label { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.keyed .readout-label .legend-swatch { margin-right: 6px; vertical-align: -1px; }
.keyed .fig-body:not(.below) > .fig-side .readout-value { font-size: 15px; white-space: nowrap; text-align: right; }
.keyed .fig-calc { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.keyed .readout.row { padding-top: 12px; gap: 6px 28px; }
.keyed .readout.row .readout-value { font-size: 16px; }

/* horizontal cost bars (Section 1) */
.keyed .hbars { display: grid; gap: 8px; margin: 14px 0 0; }
.keyed .hbar { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 5.5rem; gap: 12px; align-items: center; font-size: 13.5px; }
.keyed .hbar-label { color: var(--ink-2); line-height: 1.35; }
.keyed .hbar-track { height: 16px; background: rgba(255, 255, 255, 0.03); border-radius: 3px; overflow: hidden; }
.keyed .hbar-fill { display: block; height: 100%; width: 0; border-radius: 0 3px 3px 0; transition: width 0.15s; }
.keyed .hbar-value { text-align: right; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* worked-example table and formula pairs */
.keyed .table-wrap { max-width: 720px; }
.keyed table.data td.num, .keyed table.data th.num { text-align: right; }
.keyed table.data td.nowrap { white-space: nowrap; }
.keyed table.data tr.best td { background: rgba(184, 134, 11, 0.10); }
.keyed .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0; max-width: 720px; }
.keyed .pair > div { min-width: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px 4px; }
.keyed .pair .pair-h { font-size: 14px; font-weight: 700; color: var(--ink); }
.keyed .pair .katex-display { margin: 10px 0; }
@media (max-width: 640px) { .keyed .pair { grid-template-columns: 1fr; } }

/* two plots side by side in one figure (Session 3 standardization); stacked when narrow */
.keyed .plot-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 700px) { .keyed .plot-duo { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* callouts and checks: same width as the reading column */
.keyed .keypoint, .keyed .storybox, .keyed .warning, .keyed details.derivation, .keyed .quiz, .keyed .numcheck { max-width: 720px; }
.keyed .keypoint, .keyed .storybox { margin: 26px 0; }
.keyed .decision-timing { max-width: 720px; }

@media (max-width: 640px) {
  .keyed .interactive, .keyed .interactive.wide { padding: 16px 14px 14px; margin-top: 24px; margin-bottom: 24px; }
  .keyed h2 { font-size: 24px; margin-top: 56px; }
  .keyed .hbar { grid-template-columns: minmax(0, 1fr) 5rem; }
  .keyed .hbar-label { grid-column: 1 / -1; }
  .keyed .fig-key { font-size: 13px; }
}

/* Controls below the plot (.fig-body.below): figures with one or two
   controls and a few readouts. The controls and readouts return to the
   standard rows under the plot, at full width. The side column is kept for
   figures with many controls, or two stacked plots. */
.keyed .fig-body.below { grid-template-columns: minmax(0, 1fr); gap: 0; }
.keyed .fig-body.below > .fig-side { display: block; min-width: 0; }
.keyed .fig-body.below .fig-calc { margin-top: 8px; }
@media (max-width: 640px) {
  .keyed .fig-body.below .ctl-slider {
    flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline;
  }
  .keyed .fig-body.below .ctl-slider .ctl-label { grid-column: 1; grid-row: 1; white-space: normal; }
  .keyed .fig-body.below .ctl-slider .ctl-value { grid-column: 2; grid-row: 1; min-width: 0; text-align: right; }
  .keyed .fig-body.below .ctl-slider input[type="range"] { grid-column: 1 / -1; grid-row: 2; width: 100%; margin: 4px 0; }
}