/* ============================ TOKENS ============================ */
:root{
  --bg:#faf7f0; --surface:#fffdf7; --surface-2:#f4ecdc;
  --ink:#21201c; --muted:#6b675d; --border:#e3ddcf;
  --accent:#8c2f1f; --accent-soft:rgba(140,47,31,.06); --accent-line:rgba(140,47,31,.16);
  --data-1:#21201c; --data-2:#2f5d62; --limit:#8c2f1f;
  --axis:#7d776c; --grid:#ece4d6; --good:#3f6b35; --danger:#9e2b25;

  --serif:"Spectral","Source Serif 4",Georgia,"Iowan Old Style","Palatino Linotype",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono","SF Mono","JetBrains Mono",ui-monospace,Menlo,monospace;

  --sidebar:248px; --measure:68ch; --wide:880px;
  --header-h:46px;
}
[data-theme="dark"]{
  --bg:#16151a; --surface:#1e1d23; --surface-2:#2a261f;
  --ink:#e9e4d8; --muted:#9a948a; --border:#34323b;
  --accent:#d98a6a; --accent-soft:rgba(217,138,106,.10); --accent-line:rgba(217,138,106,.22);
  --data-1:#e9e4d8; --data-2:#6fa9ac; --limit:#d98a6a;
  --axis:#6f6a62; --grid:#2c2a31; --good:#84b377; --danger:#d9776e;
}

/* ============================ BASE ============================ */
*{box-sizing:border-box}
html{font-size:19px; scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (max-width:880px){ html{font-size:17px} }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-weight:400; line-height:1.72;
  font-feature-settings:"onum" 1,"pnum" 1; letter-spacing:.001em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .25s ease, color .25s ease;
}
::selection{ background:var(--accent-soft); }

/* tabular lining figures wherever numbers must align */
table, .katex, .axis-num, .readout, .eqno, .mono, code, .lab .val{
  font-feature-settings:"lnum" 1,"tnum" 1;
}

a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:var(--accent-line);}
a:hover{text-decoration-color:var(--accent);}

/* ============================ FIXED CHROME ============================ */
#progress{position:fixed; top:0; left:0; height:2px; width:0%; background:var(--accent); z-index:120; transition:width .08s linear;}
.runhead{
  position:fixed; top:2px; left:0; right:0; height:var(--header-h); z-index:110;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 118px 0 max(18px, 4vw); background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.1) blur(8px); -webkit-backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--border);
  font-family:var(--sans); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.runhead.show{opacity:1; transform:none;}
.runhead .rh-title{font-weight:600; color:var(--ink); letter-spacing:.04em;}
.runhead .rh-chapter{color:var(--accent); font-weight:600; text-align:right; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}

.toolbar{position:fixed; top:9px; right:max(14px,3vw); z-index:130; display:flex; gap:8px;}
.tbtn{
  font-family:var(--sans); font-size:.74rem; font-weight:500; color:var(--ink);
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:6px 13px; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  transition:border-color .15s, color .15s, background .15s;
}
.tbtn:hover{border-color:var(--accent); color:var(--accent);}
.tbtn .dot{width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block;}

.skip{position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:10px 16px;
  border-radius:0 0 8px 0; z-index:200; font-family:var(--sans); font-weight:600;}
.skip:focus{left:0;}

/* ============================ LAYOUT ============================ */
.wrap{display:flex; min-height:100vh;}
nav.toc{
  width:var(--sidebar); flex:0 0 var(--sidebar);
  position:sticky; top:0; align-self:flex-start; height:100vh; overflow-y:auto;
  background:var(--bg); border-right:1px solid var(--border);
  padding:30px 22px 60px; font-family:var(--sans);
}
nav.toc .brand{font-family:var(--serif); font-weight:600; font-size:1.06rem; line-height:1.25; color:var(--ink); letter-spacing:-.01em;}
nav.toc .brand .sig{color:var(--accent);}
nav.toc .tagline{font-size:.74rem; color:var(--muted); margin:6px 0 22px; line-height:1.5;}
nav.toc .grp{font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin:22px 0 7px; font-weight:600;}
nav.toc .grp:first-of-type{margin-top:0;}
nav.toc a{
  display:block; color:var(--ink); text-decoration:none; font-size:.86rem; line-height:1.35;
  padding:5px 10px 5px 13px; border-left:2px solid transparent; margin:1px 0; border-radius:0 6px 6px 0;
  transition:color .15s, border-color .15s, background .15s; font-weight:400;
}
nav.toc a:hover{background:var(--accent-soft); color:var(--accent);}
nav.toc a.sub{padding-left:26px; font-size:.8rem; color:var(--muted);}
nav.toc a.active{border-left-color:var(--accent); color:var(--accent); font-weight:600;}
nav.toc a.sub.active{color:var(--accent);}

main{flex:1; min-width:0; padding:64px 9vw 140px; max-width:calc(var(--measure) + 18vw); margin:0 auto;}

/* ============================ TYPE ============================ */
.eyebrow{font-family:var(--sans); font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--accent); margin:0 0 14px;}
h1{font-family:var(--serif); font-weight:600; font-size:clamp(2.1rem,6vw,2.7rem); line-height:1.12; letter-spacing:-.018em; margin:0 0 10px;}
.subtitle{font-size:1.12rem; color:var(--muted); font-style:italic; margin:0 0 8px; max-width:var(--measure);}
.byline{font-family:var(--sans); font-size:.78rem; letter-spacing:.04em; color:var(--muted); margin:0 0 40px;}
main > p, main .body{max-width:var(--measure);}
h2{font-family:var(--serif); font-weight:600; font-size:1.85rem; letter-spacing:-.012em; line-height:1.2; margin:0 0 16px; scroll-margin-top:64px;}
h3{font-family:var(--serif); font-weight:600; font-size:1.4rem; line-height:1.28; margin:30px 0 10px; scroll-margin-top:64px;}
h4{font-family:var(--sans); font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.07em; color:var(--accent); margin:24px 0 6px;}
[id]{scroll-margin-top:64px;}
p{margin:.9rem 0; max-width:var(--measure);}
strong{font-weight:600;}
em{font-style:italic;}
.muted{color:var(--muted);}
ul,ol{max-width:var(--measure); padding-left:1.3em;}
li{margin:.34rem 0;}
li::marker{color:var(--accent);}

/* chapter divider: hairline + eyebrow before each numbered chapter */
.chapter{margin-top:64px; padding-top:0;}
.chapter::before{content:""; display:block; border-top:1px solid var(--border); margin-bottom:40px;}
.chapter .ch-label{font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 6px; display:flex; align-items:center; gap:12px;}
.chapter .ch-num{color:var(--accent); font-family:var(--serif); font-weight:600; font-size:.9rem; letter-spacing:0;}

/* drop cap on the lede */
.lede{font-size:1.06rem;}
.lede::first-letter{
  font-family:var(--serif); font-weight:600; color:var(--accent);
  float:left; font-size:3.1em; line-height:.82; padding:.06em .08em 0 0; margin-right:.02em;
}

/* anchor-on-hover pilcrow */
.anchorable{position:relative;}
.anchor-link{
  position:absolute; left:-1.3em; top:.12em; opacity:0; text-decoration:none; color:var(--accent);
  font-family:var(--serif); font-size:.8em; transition:opacity .12s; padding:0 .2em; cursor:pointer; background:none; border:none;
}
.anchorable:hover .anchor-link, .anchor-link:focus{opacity:.65;}
.anchor-link:hover{opacity:1;}
@media(max-width:980px){ .anchor-link{display:none;} }

/* ============================ MATH ============================ */
.katex{font-size:1.06em; color:var(--ink);}
.eq{position:relative; margin:1.5rem 0; overflow-x:auto; overflow-y:hidden; max-width:100%;}
.eq .katex-display{margin:0; padding:2px 0;}
/* scroll fade hint for wide equations on mobile */
.eq{ -webkit-overflow-scrolling:touch; }
.copy-tex{
  position:absolute; top:2px; right:2px; opacity:0; font-family:var(--sans); font-size:.66rem; font-weight:500;
  color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:3px 8px;
  cursor:pointer; transition:opacity .12s, color .12s, border-color .12s;
}
.eq:hover .copy-tex, .copy-tex:focus{opacity:1;}
.copy-tex:hover{color:var(--accent); border-color:var(--accent);}

/* Key result — quiet displayed theorem */
.result{
  position:relative; margin:1.8rem 0; padding:14px 22px 16px; background:var(--surface);
  border-left:3px solid var(--accent); border-radius:0 8px 8px 0;
}
.result .rlabel{font-family:var(--sans); font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin-bottom:2px;}
.result .gloss{font-family:var(--sans); font-size:.82rem; color:var(--muted); text-align:center; margin-top:6px;}
.result .eq{margin:.4rem 0 0;}

/* ============================ CARDS ============================ */
.card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:22px 26px; margin:22px 0;}
.card > *:first-child{margin-top:0;}
.card > *:last-child{margin-bottom:0;}
.card h3{margin-top:8px;}
.tag{display:inline-block; font-family:var(--sans); font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  padding:3px 11px; border-radius:999px; border:1px solid currentColor; margin-bottom:4px;}
.tag.app{color:#1d6b73;} [data-theme="dark"] .tag.app{color:var(--data-2);}
.tag.problem{color:var(--accent);}
.tag.probe{color:var(--danger);}

.domain-note{
  font-family:var(--sans); font-size:.82rem; line-height:1.5; color:var(--muted); font-style:normal;
  border-left:2px solid var(--border); background:var(--accent-soft); padding:10px 16px; border-radius:0 8px 8px 0; margin:14px 0;
}
.domain-note b{color:var(--ink);}

blockquote{
  margin:16px 0; padding:4px 0 4px 18px; border-left:3px solid var(--accent);
  color:var(--ink);
}
blockquote p:first-child{margin-top:0;} blockquote p:last-child{margin-bottom:0;}
blockquote strong{color:var(--accent);}

/* ============================ TABLES ============================ */
.tablewrap{overflow-x:auto; margin:22px 0; max-width:var(--measure); border-radius:8px;}
table{border-collapse:collapse; width:100%; font-size:.92rem; font-family:var(--sans);}
caption{caption-side:top; text-align:left; font-family:var(--sans); font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding-bottom:10px;}
th,td{padding:11px 18px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top;}
thead th{border-bottom:2px solid var(--accent); font-weight:600; color:var(--ink); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;}
tbody tr:hover{background:var(--accent-soft);}
tbody tr:last-child td{border-bottom:none;}
td .katex{font-size:1em;}
.col-cond{color:var(--muted); font-family:var(--mono); font-size:.85rem; white-space:nowrap;}

hr{border:none; border-top:1px solid var(--border); margin:44px 0;}
code{font-family:var(--mono); font-size:.86em; background:var(--surface-2); padding:.08em .38em; border-radius:5px;}

/* ============================ INTERACTIVE LAB ============================ */
.plates{margin:28px 0 8px;}
.lab-tabs{display:flex; align-items:center; gap:14px; font-family:var(--sans); font-size:.92rem; margin:0 0 20px;}
.lab-tab{background:none; border:none; cursor:pointer; color:var(--muted); font-weight:500; font-family:inherit; font-size:inherit;
  padding:9px 2px; min-height:40px; border-bottom:2px solid transparent; transition:color .15s, border-color .15s;}
.lab-tab:hover{color:var(--ink);}
.lab-tab.active{color:var(--accent); border-bottom-color:var(--accent); font-weight:600;}
.lab-tabs .sep{color:var(--border);}

.controls{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px 20px; margin-bottom:22px;}
.controls.sticky-ok{position:sticky; top:calc(var(--header-h) + 10px); z-index:30;}
.controls .clabel{font-family:var(--sans); font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:12px;}
.ctrl{margin-bottom:14px;} .ctrl:last-child{margin-bottom:0;}
.ctrl .row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:5px;}
.ctrl label{font-family:var(--sans); font-size:.84rem; font-weight:500; color:var(--ink);}
.ctrl .val{font-family:var(--mono); font-size:.84rem; color:var(--ink); font-weight:500;}
.ctrl .status{font-family:var(--sans); font-size:.78rem; font-weight:600;}
.status.ok{color:var(--good);} .status.bad{color:var(--danger);}
.flash{animation:flash .5s ease;}
@keyframes flash{0%{color:var(--accent);}100%{}}

/* cross-browser range slider */
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:24px; background:transparent; cursor:pointer; margin:0;}
input[type=range]:focus{outline:none;}
/* guaranteed element-level focus ring (fallback for engines that don't style thumb pseudo-elements on :focus-visible) */
input[type=range]:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px;}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);}
input[type=range]::-webkit-slider-runnable-track{height:4px; border-radius:2px; background:var(--border);}
input[type=range]::-moz-range-track{height:4px; border-radius:2px; background:var(--border);}
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; margin-top:-7px; border-radius:50%;
  background:var(--accent); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--border);}
input[type=range]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--border);}

figure.plate{margin:22px 0; padding:0;}
figure.plate .fig-label{font-family:var(--sans); font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin-bottom:2px;}
figure.plate .fig-title{font-family:var(--serif); font-weight:600; font-size:1.08rem; margin:0 0 2px;}
figure.plate .fig-formula{font-family:var(--mono); font-size:.82rem; color:var(--muted); margin:2px 0 4px;}
figure.plate figcaption{font-family:var(--sans); font-size:.82rem; color:var(--muted); line-height:1.5; margin-top:8px; font-style:italic;}
.plotbox{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 12px 6px; margin-top:8px; position:relative;}
.plotbox svg{display:block; width:100%; height:auto;}
.verdict{font-family:var(--sans); font-size:.84rem; font-weight:600; margin-top:8px;}
.plot-tip{position:absolute; pointer-events:none; background:var(--surface); border:1px solid var(--border); border-radius:6px;
  padding:4px 8px; font-family:var(--mono); font-size:.72rem; color:var(--ink); opacity:0; transform:translate(-50%,-115%);
  white-space:nowrap; transition:opacity .1s; z-index:5; box-shadow:0 2px 8px rgba(0,0,0,.08);}
.playbtn{font-family:var(--sans); font-size:.72rem; font-weight:500; color:var(--accent); background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:4px 12px; cursor:pointer; margin-top:8px;}
.playbtn:hover{border-color:var(--accent);}

/* ============================ MISC CONTROLS ============================ */
#toTop{position:fixed; bottom:24px; right:24px; z-index:90; width:42px; height:42px; border-radius:50%;
  background:var(--surface); border:1px solid var(--accent); color:var(--accent); font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s, background .15s;}
#toTop.show{opacity:1; pointer-events:auto;}
#toTop:hover{background:var(--accent-soft);}

#toast{position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px); z-index:200;
  background:var(--ink); color:var(--bg); font-family:var(--sans); font-size:.8rem; font-weight:500;
  padding:9px 18px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

.menu-btn{display:none;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}

/* focus visibility everywhere */
a:focus-visible, button:focus-visible, .lab-tab:focus-visible, .tbtn:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;
}

/* ============================ RESPONSIVE ============================ */
@media (max-width:880px){
  nav.toc{position:fixed; left:0; top:0; transform:translateX(-100%); z-index:160; width:min(86vw,320px);
    box-shadow:6px 0 40px rgba(0,0,0,.18); transition:transform .25s ease;}
  nav.toc.open{transform:translateX(0);}
  main{padding:70px 6vw 110px;}
  .runhead{padding-left:64px;}
  .menu-btn{display:inline-flex; align-items:center; gap:7px; position:fixed; top:9px; left:max(12px,3vw); z-index:170;
    font-family:var(--sans); font-size:.74rem; font-weight:600; color:var(--ink); background:var(--surface);
    border:1px solid var(--border); border-radius:999px; padding:6px 13px; cursor:pointer;}
  .menu-btn:hover{border-color:var(--accent); color:var(--accent);}
  .controls.sticky-ok{position:static;}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important;}
  #progress{transition:none;}
}

/* ============================ PRINT ============================ */
@media print{
  #progress,.runhead,.toolbar,.menu-btn,nav.toc,#toTop,#toast,.copy-tex,.anchor-link,.controls,.lab-tabs,.playbtn,.plot-tip{display:none!important;}
  body{background:#fff; color:#000; font-size:11pt;}
  main{max-width:none; padding:0; margin:0;}
  .card,.result,.plotbox{break-inside:avoid; border-color:#ccc;}
  /* plots are redrawn in light colors via beforeprint; keep their boxes light so ink shows */
  .plotbox{background:#fff!important;}
  /* nothing should clip on paper (no scroll viewport) */
  .eq,.tablewrap{overflow:visible!important;}
  a{color:#000; text-decoration:none;}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:.8em; color:#555;}
  h2,h3{break-after:avoid;}
}

/* ============================ BOOK / SECTION CHROME ============================ */
.eyebrow a{color:inherit; text-decoration-color:var(--accent-line);}
.eyebrow a:hover{text-decoration-color:currentColor;}

/* sidebar back-to-book link */
nav.toc .book-back{display:inline-block; font-family:var(--sans); font-size:.74rem; font-weight:600;
  letter-spacing:.04em; color:var(--muted); text-decoration:none; margin:0 0 14px; padding:0; border:none; border-radius:0;}
nav.toc .book-back:hover{color:var(--accent); background:none;}

/* section prev/next footer nav */
.section-nav{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  margin:64px 0 0; padding-top:24px; border-top:1px solid var(--border); font-family:var(--sans); font-size:.9rem;}
.section-nav a{font-weight:600; text-decoration:none;}
.section-nav a:hover{text-decoration:underline; text-underline-offset:3px;}
.section-nav .sn-next{color:var(--muted); font-weight:500;}

/* ============================ BOOK HOME ============================ */
.home main{max-width:760px;}
.cover{margin:8px 0 8px;}
.toc-list{list-style:none; padding:0; margin:36px 0 0; max-width:var(--measure);}
.toc-list li{margin:0 0 14px;}
.section-card{display:flex; gap:20px; align-items:flex-start; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px 24px;
  transition:border-color .15s, transform .15s;}
.section-card:hover{border-color:var(--accent); transform:translateY(-1px);}
.section-card .num{font-family:var(--serif); font-weight:600; font-size:2.1rem; color:var(--accent); line-height:1; flex:0 0 auto; min-width:1.4ch;}
.section-card .body-col{flex:1; min-width:0;}
.section-card h2{font-family:var(--serif); font-weight:600; font-size:1.5rem; margin:0 0 4px; border:none; padding:0;}
.section-card p{margin:0 0 8px; color:var(--muted); font-size:.96rem;}
.section-card .meta{font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent);}
.section-card .meta .arrow{transition:margin-left .15s;}
.section-card:hover .meta .arrow{margin-left:4px;}
.toc-soon{display:flex; gap:20px; align-items:center; padding:20px 24px; border:1px dashed var(--border);
  border-radius:14px; color:var(--muted); font-family:var(--sans); font-size:.9rem; font-style:italic;}
.toc-soon .num{font-family:var(--serif); font-style:normal; font-size:2.1rem; color:var(--border); min-width:1.4ch;}
.home-footer{margin-top:64px; padding-top:24px; border-top:1px solid var(--border);
  font-family:var(--sans); font-size:.8rem; color:var(--muted);}