/* ---------- tokens ---------- */
:root {
  --paper: #eef0e7;
  --paper-raised: #f8f9f3;
  --paper-sunk: #e3e6da;
  --ink: #2a1b12;
  --ink-2: #57473b;
  --ink-3: #85776a;
  --rule: #cdd1c2;
  --accent: #a2601b;
  --accent-soft: #e9d6bd;
  --on-accent: #ffffff;
  --green: #7d8a4a;
  --et: #cc0f50;
  --bt: #0a5c90;
  --good: #3f7a34;
  --warn: #a7700c;
  --bad: #b2392a;
  --sour: #c9b13b;
  --sweet: #b0742e;
  --bitter: #5b2a1a;
  --font-body: "Charter", "Iowan Old Style", "Palatino", Georgia, serif;
  --font-display: "Big Shoulders Stencil Display", "Big Shoulders Stencil", "Avenir Next Condensed", "DIN Condensed", "Arial Narrow", sans-serif;
  --font-num: "Big Shoulders Display", "Big Shoulders", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --rail: 236px;
  --measure: 40rem;
  --wide: 64rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1c1511; --paper-raised: #261d17; --paper-sunk: #150f0c;
    --ink: #efe6da; --ink-2: #c6b7a7; --ink-3: #93847a; --rule: #3f332a;
    --accent: #e0a253; --accent-soft: #4a3522; --on-accent: #1c1511;
    --green: #a9b86f; --et: #f0507f; --bt: #4ba4e0;
    --good: #82b86d; --warn: #e2b24c; --bad: #e57562;
    --sour: #e0cc5a; --sweet: #d79a4e; --bitter: #b0705a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1c1511; --paper-raised: #261d17; --paper-sunk: #150f0c;
  --ink: #efe6da; --ink-2: #c6b7a7; --ink-3: #93847a; --rule: #3f332a;
  --accent: #e0a253; --accent-soft: #4a3522; --on-accent: #1c1511;
  --green: #a9b86f; --et: #f0507f; --bt: #4ba4e0;
  --good: #82b86d; --warn: #e2b24c; --bad: #e57562;
  --sour: #e0cc5a; --sweet: #d79a4e; --bitter: #b0705a;
  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.1875rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: oldstyle-nums proportional-nums;
}
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--accent-soft); }
p, ul, ol { margin: 0 0 1.05em; }
strong { font-weight: 700; }
em { font-style: italic; }
sub, sup { line-height: 0; font-size: 0.72em; }
.num, table, .lcd, .readout { font-variant-numeric: lining-nums tabular-nums; }
kbd { font-family: var(--font-body); font-size: .85em; border: 1px solid var(--rule); border-bottom-width: 2px; padding: 0 .35em; border-radius: 4px; }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); }
.rail {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding: 1.6rem 1rem 2rem 1.4rem;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 1rem;
  scrollbar-width: thin;
}
.rail-head { display: flex; align-items: center; gap: .7rem; }
.rail-bean { width: 44px; height: 58px; flex: none; transition: transform .4s ease; }
.rail-bean.cracked { transform: scale(1.06) rotate(-4deg); }
.rail-title { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; line-height: .95; letter-spacing: .01em; }
.rail-stage { font-size: .82rem; color: var(--ink-2); line-height: 1.3; min-height: 2.2em; }
.toc { list-style: none; margin: 0; padding: 0; position: relative; }
.toc::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px;
  background: linear-gradient(#8d9a5a, #c9bb72 22%, #c69a5e 38%, #8a5a33 55%, #5a3520 75%, #2d1a10);
}
.toc li { position: relative; }
.toc a {
  display: block; padding: .28rem .2rem .28rem 1.35rem; color: var(--ink-2); text-decoration: none;
  font-size: .88rem; line-height: 1.25; border-radius: 4px;
}
.toc a::before {
  content: ""; position: absolute; left: 2px; top: .62rem; width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--rule);
}
.toc a:hover { color: var(--ink); background: var(--paper-sunk); }
.toc a.active { color: var(--ink); font-weight: 700; }
.toc a.active::before { background: var(--dot, var(--accent)); border-color: var(--ink); }
.toc .n { display: inline-block; min-width: 1.4em; color: var(--ink-3); font-variant-numeric: lining-nums tabular-nums; }
.rail-foot { margin-top: auto; display: flex; gap: .5rem; align-items: center; font-size: .82rem; color: var(--ink-3); }
.theme-btn {
  font: inherit; font-size: .82rem; color: var(--ink-2); background: transparent; border: 1px solid var(--rule);
  border-radius: 999px; padding: .25rem .7rem; cursor: pointer;
}
.theme-btn:hover { color: var(--ink); border-color: var(--ink-3); }

.topbar { display: none; }
.topbar .rail-bean { width: 24px; height: 31px; flex: none; }
.progress { position: fixed; top: 0; left: 0; height: 4px; width: 0; z-index: 30; background: var(--dot, var(--green)); }

main { padding: 0 clamp(1rem, 4vw, 4rem) 6rem; min-width: 0; }
.chapter { padding-top: 4.5rem; max-width: var(--wide); }
.chapter > * { max-width: var(--measure); }
.chapter > .fig, .chapter > .wide, .chapter > .table-wrap { max-width: var(--wide); }

/* ---------- hero ---------- */
.hero { padding: 3.5rem 0 1rem; max-width: var(--wide); }
.hero h1 {
  font-family: var(--font-display); font-weight: 800; text-transform: none;
  font-size: clamp(3.2rem, 10vw, 7.4rem); line-height: .86; letter-spacing: -.005em; margin: 0 0 1.4rem;
}
.hero .lede { font-size: 1.32rem; line-height: 1.5; max-width: 36rem; color: var(--ink-2); }
.chain {
  display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; margin: 2.4rem 0 .6rem;
  list-style: none; padding: 0;
}
.chain a {
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 108px; padding: .5rem .45rem;
  color: var(--chain-ink, #fff); text-decoration: none; font-size: .86rem; line-height: 1.15;
  background: var(--c); border-radius: 3px;
}
.chain a span { font-family: var(--font-num); font-weight: 700; font-size: 1.5rem; opacity: .75; line-height: 1; margin-bottom: auto; }
.chain a:hover { filter: brightness(1.08); }
.chain-caption { font-size: .9rem; color: var(--ink-3); }
@media (max-width: 760px) {
  .chain { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chain a { min-height: 76px; }
}

.plan { margin: 2.6rem 0 0; max-width: 46rem; }
.plan-title { font-family: var(--font-body); font-size: 1.15rem; font-weight: 700; margin: 0 0 .5rem; }
.plan ol { margin: 0; padding-left: 1.3rem; }
.plan li { margin: .25rem 0; color: var(--ink-2); }
.plan li span { color: var(--ink-3); font-size: .9em; font-variant-numeric: lining-nums tabular-nums; }
.summary { columns: 2 22rem; column-gap: 2rem; font-size: .95rem; line-height: 1.45; }
.summary section { break-inside: avoid; margin: 0 0 1rem; }
.summary h4 { margin: 0 0 .25rem; font-size: .95rem; }
.summary ul { margin: 0; padding-left: 1.1rem; }
.summary li { margin: .15rem 0; }

/* ---------- headings ---------- */
.chapter-head { display: flex; align-items: baseline; gap: 1rem; margin: 0 0 1.2rem; max-width: var(--wide) !important; }
.chapter-head .no {
  font-family: var(--font-num); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--dot, var(--ink-3)); line-height: 1;
}
.chapter-head h2 {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 6.4vw, 4.4rem);
  line-height: .9; margin: 0; letter-spacing: .005em;
}
.chapter-head .de { display: block; font-family: var(--font-body); font-style: italic; font-size: 1.05rem; color: var(--ink-3); font-weight: 400; margin-top: .45rem; letter-spacing: 0; }
.chapter .intro { font-size: 1.3rem; line-height: 1.52; color: var(--ink-2); }
h3 { font-size: 1.4rem; line-height: 1.25; margin: 2.6rem 0 .7rem; font-weight: 700; }
h4 { font-size: 1.08rem; margin: 1.6rem 0 .4rem; }

/* ---------- callouts ---------- */
.callout { border-left: 3px solid var(--accent); padding: .2rem 0 .2rem 1.1rem; margin: 1.6rem 0; }
.callout > b:first-child { display: block; font-size: 1rem; margin-bottom: .15rem; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout.phys { border-color: var(--bt); }
.callout.phys > b:first-child { color: var(--bt); }
.callout.tomorrow { border-color: var(--green); }
.callout.tomorrow > b:first-child { color: var(--green); }
.callout.myth { border-color: var(--bad); }
.callout.myth > b:first-child { color: var(--bad); }
.formula {
  font-size: 1.25rem; text-align: center; margin: 1.3rem 0; padding: .9rem; background: var(--paper-sunk);
  border-radius: 6px; font-variant-numeric: lining-nums; overflow-x: auto;
}
.formula small { display: block; font-size: .85rem; color: var(--ink-3); margin-top: .35rem; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin: 1.4rem 0 1.8rem; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; line-height: 1.4; }
th, td { text-align: left; vertical-align: top; padding: .5rem .8rem .5rem 0; border-bottom: 1px solid var(--rule); }
th { font-weight: 700; color: var(--ink-2); border-bottom: 2px solid var(--ink-3); }
td:first-child { font-weight: 700; }
table.plain td:first-child { font-weight: 400; }

/* ---------- figures ---------- */
.fig {
  background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 8px;
  padding: 1.1rem 1.2rem 1rem; margin: 2rem 0 2.2rem;
}
.fig-title { font-weight: 700; font-size: 1.02rem; margin: 0 0 .15rem; }
.fig-sub { font-size: .92rem; color: var(--ink-2); margin: 0 0 .8rem; line-height: 1.45; }
.fig canvas, .fig svg { display: block; width: 100%; }
.fig .cap { font-size: .9rem; color: var(--ink-3); margin: .7rem 0 0; font-style: italic; line-height: 1.45; }
.cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.cols.even { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .cols, .cols.even { grid-template-columns: 1fr; } }

.controls { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .55rem 1.2rem; margin: .9rem 0 .2rem; }
.ctl { display: flex; flex-direction: column; gap: .1rem; font-size: .88rem; }
.ctl .row { display: flex; justify-content: space-between; gap: .5rem; color: var(--ink-2); }
.ctl .val { color: var(--ink); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.ctl .hint { font-size: .78rem; color: var(--ink-3); line-height: 1.3; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; background: var(--rule); border-radius: 2px; }
input[type=range]::-moz-range-track { height: 4px; background: var(--rule); border-radius: 2px; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; margin-top: -7px;
  background: var(--accent); border: 3px solid var(--paper-raised); box-shadow: 0 0 0 1px var(--accent);
}
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid var(--paper-raised); }
input[type=range]:focus-visible { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 4px var(--accent); }

.seg { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: .35rem; margin: .2rem 0 .6rem; }
.seg button, .btn {
  font: inherit; font-size: .86rem; line-height: 1.2; padding: .38rem .8rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink-2);
}
.seg button:hover, .btn:hover { border-color: var(--ink-3); color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; }
.btn.primary:hover { filter: brightness(1.06); color: var(--on-accent); }
.btn-row { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin: .6rem 0; }
label.check { display: inline-flex; gap: .4rem; align-items: center; font-size: .88rem; color: var(--ink-2); cursor: pointer; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 1rem; height: 1rem; }
input[type=number], select {
  font: inherit; font-size: .92rem; padding: .3rem .45rem; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--paper); color: var(--ink); width: 6.5rem; font-variant-numeric: lining-nums tabular-nums;
}
select { width: auto; }

.readouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; margin: .7rem 0; }
.readout { background: var(--paper-sunk); border-radius: 6px; padding: .45rem .6rem; }
.readout .k { font-size: .76rem; color: var(--ink-3); line-height: 1.2; }
.readout .v { font-family: var(--font-num); font-weight: 700; font-size: 1.55rem; line-height: 1.1; }
.readout .v small { font-family: var(--font-body); font-weight: 400; font-size: .8rem; color: var(--ink-2); margin-left: .15rem; }

.panel { background: var(--paper-sunk); border-radius: 6px; padding: .8rem .9rem; font-size: .93rem; line-height: 1.5; }
.panel h4 { margin: 0 0 .35rem; font-size: 1rem; }
.panel p { margin: 0 0 .6em; }
.panel p:last-child { margin: 0; }
.panel ul { padding-left: 1.1rem; margin: 0 0 .5rem; }

.flag { border-left: 3px solid var(--ink-3); padding: .15rem 0 .15rem .7rem; margin: .5rem 0; font-size: .92rem; line-height: 1.45; }
.flag b { display: block; }
.flag.good { border-color: var(--good); } .flag.good b { color: var(--good); }
.flag.warn { border-color: var(--warn); } .flag.warn b { color: var(--warn); }
.flag.bad { border-color: var(--bad); } .flag.bad b { color: var(--bad); }
.flag.info { border-color: var(--bt); } .flag.info b { color: var(--bt); }

.bars { display: grid; gap: .3rem; font-size: .86rem; }
.bar { display: grid; grid-template-columns: 7.5rem 1fr 2.4rem; gap: .5rem; align-items: center; }
.bar .track { height: 10px; background: var(--rule); border-radius: 5px; overflow: hidden; }
.bar .fill { height: 100%; background: var(--accent); border-radius: 5px; transition: width .35s ease; }
.bar .n { text-align: right; color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }
@media (prefers-reduced-motion: reduce) { .bar .fill { transition: none; } }

/* LCDs like Artisan */
.lcds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; margin-bottom: .6rem; }
.lcd { background: #10161a; color: #e9f2f5; border-radius: 5px; padding: .35rem .55rem; }
.lcd .k { font-size: .72rem; color: #9fb2bb; }
.lcd .v { font-family: var(--font-num); font-weight: 700; font-size: 1.7rem; line-height: 1.05; }
.lcd.et .v { color: #ff6f98; } .lcd.bt .v { color: #6cc1ff; }
@media (max-width: 600px) { .lcds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* causal map */
.map-wrap { overflow-x: auto; }
.map-wrap svg { min-width: 880px; }
.map-node rect { fill: var(--paper); stroke: var(--rule); stroke-width: 1.2; rx: 6; }
.map-node text { fill: var(--ink); font-size: 12.5px; font-family: var(--font-body); }
.map-node { cursor: pointer; }
.map-node:hover rect { stroke: var(--ink-3); }
.map-node.sel rect { fill: var(--ink); stroke: var(--ink); }
.map-node.sel text { fill: var(--paper); font-weight: 700; }
.map-node.up rect { fill: var(--accent-soft); stroke: var(--accent); }
.map-node.down rect { stroke: var(--bt); stroke-width: 2; }
.map-node.dim rect { stroke-opacity: .35; }
.map-node.dim text { opacity: .3; }
.map-edge { fill: none; stroke: var(--rule); stroke-width: 1.2; }
.map-edge.up { stroke: var(--accent); stroke-width: 2; }
.map-edge.down { stroke: var(--bt); stroke-width: 2; }
.map-edge.dim { opacity: .2; }
.map-col-label { fill: var(--ink-3); font-size: 12px; font-style: italic; font-family: var(--font-body); }
.rel-list { list-style: none; padding: 0; margin: .3rem 0 .8rem; }
.rel-list li { padding: .3rem 0; border-bottom: 1px solid var(--rule); }
.rel-list li:last-child { border-bottom: 0; }
.rel-list button { font: inherit; font-weight: 700; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }

/* quiz */
.quiz-q { margin: 0 0 1.4rem; }
.quiz-q p { margin-bottom: .45rem; font-weight: 700; }
.quiz-q .opts { display: grid; gap: .3rem; }
.quiz-q .opts button {
  font: inherit; font-size: .96rem; text-align: left; padding: .45rem .7rem; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--paper); color: var(--ink); cursor: pointer; line-height: 1.35;
}
.quiz-q .opts button:hover:not(:disabled) { border-color: var(--ink-3); }
.quiz-q .opts button.right { border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--paper)); }
.quiz-q .opts button.wrong { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--paper)); }
.quiz-q .why { font-size: .92rem; color: var(--ink-2); margin-top: .45rem; display: none; }
.quiz-q.done .why { display: block; }

/* checklists */
.checklist { list-style: none; padding: 0; }
.checklist li { display: flex; gap: .6rem; align-items: baseline; padding: .32rem 0; border-bottom: 1px solid var(--rule); }
.checklist input { flex: none; transform: translateY(2px); }

.sources li { margin-bottom: .4rem; font-size: .95rem; }
.legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .82rem; color: var(--ink-2); margin: .4rem 0 0; }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: .35rem; }
.legend i.dash { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px) !important; }
.swatch { display: inline-block; width: 1em; height: 1em; border-radius: 3px; vertical-align: -0.12em; margin-right: .3em; border: 1px solid var(--rule); }

footer.end { margin-top: 5rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: .9rem; max-width: var(--measure); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .layout { grid-template-columns: 1fr; }
  .rail { display: none; }
  .topbar {
    display: flex; position: sticky; top: 0; z-index: 20; align-items: center; gap: .6rem; padding: .55rem 1rem;
    background: var(--paper); border-bottom: 1px solid var(--rule);
  }
  .topbar select { flex: 1; min-width: 0; }
  main { padding: 0 1rem 5rem; }
  body { font-size: 1.09rem; }
  .chapter { padding-top: 3rem; }
}
@media print {
  .rail, .topbar, .progress, .controls, .btn-row, .seg { display: none !important; }
  .layout { display: block; }
  body { background: #fff; color: #000; font-size: 11pt; }
  body[data-print="tomorrow"] main > :not(#ch-tomorrow) { display: none !important; }
  body[data-print="tomorrow"] #ch-tomorrow { padding-top: 0; }
  .summary { columns: 2; }
}