/* Copied verbatim from the GarageGraph site prototype (garagegraph-prototype/index.html,
   commit d17d2a1, the <style> block). Only the Google Fonts <link> is not carried over:
   the local preview makes no external requests, so the font stacks below fall back to
   Arial Narrow / system-ui / ui-monospace exactly as the site does offline.
   Do not edit here; topic-page additions live in topic.css. */
/* ---------------------------------------------------------------
   TOKENS
   Palette pulled from the N54 engine bay itself:
   --alu     cast-aluminum housings / valve cover: the page
   --face    freshly machined gasket face: working surfaces
   --ink     graphite hose rubber + oil-stained plastic: text, rules
   --hose    faded hose print: secondary text (4.9:1 on alu)
   BMW M tricolor (brand-supplied):
   --m-light Glossy Light Blue #81C4FF: current step, highlights
   --m-azure Azure Palace #16588E: Underboost tree, approved marks
   --label   Funky Red #E7222E: danger only (critical, can't drive) + Misfire tree
   --rule    alu pushed two steps darker: hairlines only
---------------------------------------------------------------- */
:root{
  --alu:#D5D7D3; --face:#ECEDEA; --ink:#17191A; --hose:#555957; --label:#E7222E; --m-light:#81C4FF; --m-azure:#16588E; --red-text:#C41A25; /* red darkened for small text on light bg only */ --rule:#A9ACA8;
  --ink-dim:#8A8E8A; /* secondary text on --ink only (5.3:1) */
  --tc:var(--ink); --tc-t:var(--face); --tc-text:var(--ink); --tc-on:#fff;
  --mstripe:linear-gradient(90deg,var(--m-light) 0 33.33%,var(--m-azure) 33.33% 66.66%,var(--label) 66.66%);

  --f-display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --f-body:"IBM Plex Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --t-xs:11px; --t-s:13px; --t-b:15px; --t-m:19px; --t-l:26px; --t-xl:46px; --t-xxl:96px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  --r:0; --r-ctl:2px;
  --hazard:repeating-linear-gradient(-45deg,var(--label) 0 7px,var(--ink) 7px 14px);
}

*{box-sizing:border-box}
html{background:var(--alu)}
body{margin:0;background:var(--alu);color:var(--ink);font:400 var(--t-b)/1.5 var(--f-body);-webkit-font-smoothing:antialiased}
button,select,input{font:inherit;color:inherit}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px var(--m-light)}
h1,h2,h3,p{margin:0}
.mono{font-family:var(--f-mono)}
.lbl{font:500 var(--t-xs)/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--hose)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- top bar ---------- */
.bar{background:var(--ink);color:var(--face);display:grid;grid-template-columns:auto 1fr auto;align-items:stretch;border-bottom:5px solid;border-image:var(--mstripe) 1}
.mark{font:800 26px/1 var(--f-display);letter-spacing:.01em;text-transform:uppercase;padding:var(--s3) var(--s5);display:flex;align-items:center;gap:var(--s3);border-right:1px solid #33373A}
.mark small{font:500 var(--t-xs)/1 var(--f-mono);letter-spacing:.08em;color:var(--ink-dim);text-transform:uppercase;padding-top:5px}
.tabs{display:flex;gap:0}
.tab{background:none;border:0;border-right:1px solid #33373A;padding:0 var(--s5);font:500 var(--t-s)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim);cursor:pointer;position:relative}
.tab:hover{color:var(--face)}
.tab[aria-current="page"]{color:var(--face)}
.tab[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--face)}
.car{display:flex;align-items:stretch;border-left:1px solid #33373A}
.car dl{display:flex;margin:0}
.car dl div{padding:var(--s2) var(--s4);border-right:1px solid #33373A;display:flex;flex-direction:column;justify-content:center;gap:2px}
.car dt{font:500 10px/1 var(--f-mono);letter-spacing:.1em;color:var(--ink-dim);text-transform:uppercase}
.car dd{margin:0;font:500 var(--t-s)/1.2 var(--f-mono);white-space:nowrap}
.car button{background:none;border:0;padding:0 var(--s4);font:500 var(--t-xs)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);cursor:pointer}
.car button:hover{color:var(--m-light)}

main{min-height:calc(100vh - 60px)}

/* ---------- shared ---------- */
.head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border-bottom:1px solid var(--ink)}
.head > *{padding:var(--s6) var(--s5) var(--s5)}
.head > * + *{border-left:1px solid var(--rule)}
.display{font:800 var(--t-xl)/.95 var(--f-display);letter-spacing:-.005em;text-transform:uppercase}
.lede{color:var(--hose);max-width:58ch;margin-top:var(--s3)}
.btn{background:var(--face);border:1px solid var(--ink);border-radius:var(--r-ctl);padding:var(--s2) var(--s4);font:500 var(--t-s)/1.2 var(--f-mono);letter-spacing:.04em;cursor:pointer}
.btn:hover{background:var(--ink);color:var(--face)}
.btn.go{background:var(--ink);color:var(--face)}
.btn.go:hover{background:var(--m-azure);border-color:var(--m-azure);color:#fff}

/* glyphs: fault-tree shapes by node type */
.g{width:14px;height:14px;flex:none;display:inline-block;vertical-align:-2px}
.g *{vector-effect:non-scaling-stroke}

/* ---------- home ---------- */
.entries{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.tree{border-right:1px solid var(--rule);display:flex;flex-direction:column}
.tree:last-child{border-right:0}
.tree-h{padding:var(--s4) var(--s5);border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline}
.tree-h h2{font:700 var(--t-l)/1 var(--f-display);text-transform:uppercase}
.tree-stats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--rule)}
.tree-stats div{padding:var(--s2) var(--s5);border-right:1px solid var(--rule)}
.tree-stats div:last-child{border-right:0}
.tree-stats b{display:block;font:600 var(--t-m)/1.2 var(--f-mono)}
.entry{display:grid;grid-template-columns:14px 1fr auto;gap:var(--s3);align-items:start;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule);padding:var(--s4) var(--s5);cursor:pointer}
.entry:hover{background:var(--face)}
.entry .g{margin-top:4px}
.entry b{display:block;font-weight:600;font-size:var(--t-m);line-height:1.25}
.entry span{display:block;color:var(--hose);font-size:var(--t-s);margin-top:2px}
.entry i{font:500 var(--t-xs)/1.6 var(--f-mono);font-style:normal;color:var(--hose)}
.entry.primary b{font-size:22px}
.entry:hover i{color:var(--ink)}
.codes-strip{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.codes-strip > .lbl{padding:var(--s4) var(--s5);border-right:1px solid var(--rule);display:flex;align-items:center}
.code-btn{background:none;border:0;border-right:1px solid var(--rule);text-align:left;padding:var(--s3) var(--s4);cursor:pointer}
.code-btn:last-child{border-right:0}
.code-btn:hover{background:var(--face)}
.code-btn b{display:block;font:700 30px/1 var(--f-display);text-transform:uppercase}
.code-btn span{display:block;font-size:var(--t-s);color:var(--hose);margin-top:4px}
.home-foot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0}
.home-foot > div{padding:var(--s4) var(--s5);border-right:1px solid var(--rule)}
.home-foot > div:last-child{border-right:0}
.home-foot p{font-size:var(--t-s);color:var(--hose);margin-top:var(--s1)}

/* ---------- step view ---------- */
.step{display:grid;grid-template-columns:260px minmax(0,1fr) 340px;min-height:calc(100vh - 64px)}
.trace{border-right:1px solid var(--ink);padding:var(--s5) 0;background:var(--alu);min-width:0}
.trace .lbl{padding:0 var(--s5) var(--s3)}
.trace ol{list-style:none;margin:0;padding:0;position:relative}
.trace ol::before{content:"";position:absolute;left:calc(var(--s5) + 6px);top:10px;bottom:10px;width:1px;background:var(--ink)}
.trace li{position:relative}
.trace li button{display:grid;grid-template-columns:14px 1fr;gap:var(--s3);width:100%;text-align:left;background:none;border:0;padding:var(--s2) var(--s4) var(--s2) var(--s5);cursor:pointer}
.trace li button:hover{background:var(--face)}
.trace li .g{background:var(--alu);margin-top:3px}
.trace li b{display:block;font-weight:500;font-size:var(--t-s);line-height:1.3}
.trace li small{display:block;font:400 var(--t-xs)/1.35 var(--f-mono);color:var(--hose);margin-top:3px}
.trace li small::before{content:"↳ "}
.trace li.now button{background:var(--ink);color:var(--face)}
.trace li.now .n{color:var(--m-light)}
.trace li.now .g{background:var(--ink)}
.trace li.now b{font-weight:600}
.trace .n{font:500 10px/1 var(--f-mono);color:var(--hose);display:block;margin-bottom:3px;letter-spacing:.06em}
.trace-actions{display:flex;gap:var(--s2);padding:var(--s5) var(--s5) 0;flex-wrap:wrap}
.keys{padding:var(--s4) var(--s5) 0;font:400 var(--t-xs)/1.6 var(--f-mono);color:var(--hose)}
.keys kbd{font:inherit;border:1px solid var(--rule);padding:0 4px;background:var(--face)}

.work{background:var(--face);min-width:0}
.work-h{padding:var(--s5) var(--s6) var(--s5);border-bottom:1px solid var(--rule)}
.meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;margin-bottom:var(--s4)}
.meta .lbl{display:flex;gap:6px;align-items:center}
.meta .lbl + .lbl{padding-left:var(--s4);border-left:1px solid var(--rule)}
.work-h h1{font:800 var(--t-xl)/.95 var(--f-display);text-transform:uppercase;max-width:22ch}
.work-h h1.code{font-size:var(--t-xxl);letter-spacing:.01em;line-height:.85}
.work-h .tech{font:500 var(--t-s)/1.4 var(--f-mono);color:var(--hose);margin-top:var(--s3)}
.work-h .sum{margin-top:var(--s3);max-width:64ch;font-size:17px;line-height:1.55}

.readout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--rule)}
.readout > div{padding:var(--s3) var(--s6) var(--s4);border-right:1px solid var(--rule)}
.readout > div:first-child{padding-left:var(--s6)}
.readout > div:last-child{border-right:0}
.readout .v{font:600 var(--t-m)/1.2 var(--f-body);margin-top:var(--s2)}
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:var(--s2);max-width:180px}
.meter i{height:10px;border:1px solid var(--ink)}
.meter i.on{background:var(--ink)}
.meter.crit i.on{background:var(--hazard)}
.ticks{display:inline-flex;gap:3px;margin-left:var(--s2);vertical-align:1px}
.ticks i{width:7px;height:7px;border:1px solid var(--ink)}
.ticks i.on{background:var(--ink)}
.drive-no{display:inline-block;background:var(--label);color:#fff;padding:0 6px;margin-left:-6px}

.hazard{border-bottom:1px solid var(--ink);display:grid;grid-template-columns:14px 1fr}
.hazard::before{content:"";background:var(--hazard)}
.hazard div{padding:var(--s4) var(--s6);background:var(--label);color:#fff}
.hazard b{font:800 var(--t-m)/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;display:block;margin-bottom:var(--s1)}

.ask{padding:var(--s6)}
.ask h2{font:600 var(--t-l)/1.25 var(--f-body);max-width:34ch;letter-spacing:-.01em}
.answers{margin-top:var(--s5);border-top:1px solid var(--ink)}
.answer{display:grid;grid-template-columns:34px 1fr auto;gap:var(--s3);align-items:center;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--ink);padding:var(--s4) var(--s2) var(--s4) 0;cursor:pointer;font-size:var(--t-m);font-weight:500}
.answer .k{font:500 var(--t-s)/1 var(--f-mono);border:1px solid var(--ink);width:26px;height:26px;display:grid;place-items:center}
.answer .to{font:400 var(--t-xs)/1.3 var(--f-mono);color:var(--hose);text-align:right;max-width:28ch}
.answer:hover{background:var(--ink);color:var(--face)}
.answer:hover .k{border-color:var(--face)}
.answer:hover .to{color:var(--ink-dim)}
.answer-note{border-bottom:1px solid var(--ink);padding:var(--s2) 0 var(--s3) 46px;font-size:var(--t-s);position:relative;margin-top:-1px;border-top:0}
.answer-note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:34px;background:var(--hazard);opacity:1}
.answer-note span{display:block}

.next-list{margin-top:var(--s4);border-top:1px solid var(--ink)}
.edge{display:grid;grid-template-columns:120px 14px 1fr auto;gap:var(--s3);align-items:start;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule);padding:var(--s3) var(--s2) var(--s3) 0;cursor:pointer}
.edge:hover{background:var(--alu)}
.edge .rel{font:500 var(--t-xs)/1.5 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--hose)}
.edge .g{margin-top:3px}
.edge b{display:block;font-weight:600}
.edge span{display:block;font-size:var(--t-s);color:var(--hose)}
.edge .k{font:500 var(--t-xs)/1.5 var(--f-mono);color:var(--hose)}
.endnote{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--rule);font-size:var(--t-s);color:var(--hose);max-width:60ch}

.ref{border-left:1px solid var(--ink);background:var(--alu);min-width:0}
.ref section{padding:var(--s5);border-bottom:1px solid var(--rule)}
.ref h3{margin-bottom:var(--s3)}
.photos{display:grid;gap:var(--s2)}
.photos.two{grid-template-columns:1fr 1fr}
.photos img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border:1px solid var(--ink);filter:grayscale(.35) contrast(1.05);background:var(--face)}
.cap{font-size:var(--t-xs);color:var(--hose);margin-top:var(--s2);line-height:1.45}
.proto{font:400 var(--t-xs)/1.45 var(--f-mono);margin-top:var(--s2);padding-left:var(--s2);border-left:2px solid var(--ink)}
.src{padding:var(--s2) 0;border-top:1px solid var(--rule);font-size:var(--t-s)}
.src:first-of-type{border-top:0;padding-top:0}
.src a{font-weight:500}
.src .lbl{margin-top:3px;display:flex;align-items:center;gap:6px}
.conn{font-size:var(--t-s)}
.conn button{display:grid;grid-template-columns:14px 1fr;gap:var(--s2);width:100%;background:none;border:0;border-top:1px solid var(--rule);text-align:left;padding:var(--s2) 0;cursor:pointer}
.conn button:hover b{text-decoration:underline}
.conn button:first-of-type{border-top:0}
.conn b{font-weight:500;display:block}
.conn small{font:400 var(--t-xs)/1.4 var(--f-mono);color:var(--hose);text-transform:uppercase;letter-spacing:.04em}
.fit dl{display:grid;grid-template-columns:auto 1fr;gap:4px var(--s3);margin:0;font-size:var(--t-s)}
.fit dt{font:500 var(--t-xs)/1.6 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--hose)}
.fit dd{margin:0}

/* ---------- index + sources tables ---------- */
.filters{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--ink)}
.filters .grp{display:flex;align-items:center;border-right:1px solid var(--rule);padding:0 var(--s5) 0 0}
.filters .grp > .lbl{padding:0 var(--s3) 0 var(--s5)}
.seg{background:none;border:0;padding:var(--s3) var(--s3);font:500 var(--t-s)/1 var(--f-mono);cursor:pointer;color:var(--hose);display:inline-flex;gap:6px;align-items:center}
.seg:hover{color:var(--ink)}
.seg[aria-pressed="true"]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--ink)}
.count{margin-left:auto;padding:var(--s3) var(--s5);font:500 var(--t-s)/1 var(--f-mono);align-self:center}
table{width:100%;border-collapse:collapse;font-size:var(--t-s)}
th{font:500 var(--t-xs)/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--hose);text-align:left;padding:var(--s3) var(--s3);border-bottom:1px solid var(--ink);background:var(--alu);position:sticky;top:0;z-index:1}
th:first-child,td:first-child{padding-left:var(--s5)}
td{padding:var(--s2) var(--s3);border-bottom:1px solid var(--rule);vertical-align:top}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--face)}
td.id{font-family:var(--f-mono);color:var(--hose);white-space:nowrap}
td.t b{font-weight:600;display:block}
td.t span{color:var(--hose)}
td.sev{white-space:nowrap}
td.sev .meter{margin-top:4px;max-width:72px;gap:2px}
td.sev .meter i{height:6px}
.crit-cell{background:var(--label);color:#fff;padding:0 4px;font-weight:600}
tr.tier td{background:var(--ink);color:var(--face);font:600 var(--t-xs)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;padding-top:var(--s2);padding-bottom:var(--s2);cursor:default}
tr.tier:hover td{background:var(--ink)}
.tier-note{color:var(--ink-dim);font-weight:400;letter-spacing:.04em;text-transform:none;margin-left:var(--s3)}
.status-review{font:500 var(--t-xs)/1 var(--f-mono);border:1px solid var(--ink);padding:2px 5px;text-transform:uppercase;letter-spacing:.06em}
.status-ok{font:500 var(--t-xs)/1 var(--f-mono);background:var(--ink);color:var(--face);padding:3px 6px;text-transform:uppercase;letter-spacing:.06em}
.legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);padding:var(--s3) var(--s5);border-bottom:1px solid var(--rule)}
.legend span{display:inline-flex;gap:6px;align-items:center;font:500 var(--t-xs)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.06em}

/* ---------- setup ---------- */
.setup{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:calc(100vh - 64px)}
.setup > div{padding:var(--s6) var(--s5)}
.setup > div + div{border-left:1px solid var(--ink);background:var(--face)}
.form{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);margin-top:var(--s5);max-width:640px}
.field{border-bottom:1px solid var(--rule);padding:var(--s3) var(--s4) var(--s3) 0}
.field:nth-child(odd){border-right:1px solid var(--rule)}
.field:nth-child(even){padding-left:var(--s4)}
.field.full{grid-column:1/-1;border-right:0}
.field label{display:block}
.field select,.field input{width:100%;margin-top:var(--s2);background:var(--alu);border:1px solid var(--ink);border-radius:var(--r-ctl);padding:var(--s2) var(--s3);font:500 var(--t-b)/1.3 var(--f-mono)}
.form-actions{display:flex;gap:var(--s3);margin-top:var(--s5);align-items:center}
.scope{margin-top:var(--s5);border-top:1px solid var(--ink)}
.scope div{display:grid;grid-template-columns:130px 1fr;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--rule);font-size:var(--t-s)}
.scope s{color:var(--hose)}


/* ---------- home hero with car photo ---------- */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border-bottom:1px solid var(--ink);min-height:360px}
.hero-copy{padding:var(--s6) var(--s5) var(--s5);display:flex;flex-direction:column}
.hero-copy .lede{margin-top:var(--s3)}
.hero-spec{margin:auto 0 0;padding-top:var(--s5);display:grid;grid-template-columns:repeat(3,auto);justify-content:start;border-top:0}
.hero-spec div{padding:var(--s2) var(--s4) var(--s2) 0;margin-right:var(--s4);border-right:1px solid var(--rule)}
.hero-spec div:last-child{border-right:0}
.hero-spec dt{font:500 var(--t-xs)/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--hose)}
.hero-spec dd{margin:2px 0 0;font:600 var(--t-b)/1.3 var(--f-body)}
.hero-photo{margin:0;position:relative;border-left:1px solid var(--ink);background:var(--ink);overflow:hidden;min-height:300px}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;display:block}
.hero-photo figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:var(--s3);background:var(--ink);color:var(--face);padding:var(--s2) var(--s5);font:500 var(--t-xs)/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.08em}
.hero-photo figcaption a{color:var(--ink-dim);text-transform:none;letter-spacing:.02em}
.hero-photo::before{content:"N54";position:absolute;z-index:1;top:0;left:0;background:var(--ink);color:#fff;font:800 22px/1 var(--f-display);padding:var(--s2) var(--s3) calc(var(--s2) + 5px);background-image:var(--mstripe);background-size:100% 5px;background-repeat:no-repeat;background-position:bottom}
.hero-photo.noimg{background:var(--hazard)}
.hero-photo.noimg figcaption a{display:none}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:var(--s5) var(--s4)}
  .hero-photo{border-left:0;border-top:1px solid var(--ink);min-height:0;aspect-ratio:16/10}
  .hero-photo figcaption{padding:var(--s2) var(--s4)}
  .hero-spec{grid-template-columns:1fr 1fr 1fr}
}

/* ---------- responsive ---------- */
/* inline warnings + results */
.warnbar{background:var(--label);color:#fff}
.warnbar em{color:#fff;opacity:.85}
.warns{border-bottom:1px solid var(--ink)}
.warn{display:grid;grid-template-columns:14px 1fr;gap:var(--s3);padding:var(--s3) var(--s6);border-top:1px solid var(--rule)}
.warn:first-child{border-top:0}
.warn .g{margin-top:3px}
.warn b{display:block;font-weight:600}
.warn span{display:block;font-size:var(--t-s);color:var(--hose)}
.secbar.result{background:var(--tc);color:var(--tc-on)}
.secbar.result em{color:var(--tc-on);opacity:.85}
@media (max-width:860px){.warn{padding:var(--s3) var(--s4)}}

/* tree color scopes */
.t-boost{--tc:var(--m-azure);--tc-t:#DCE8F3;--tc-text:var(--m-azure);--tc-on:#fff}
.t-spark{--tc:var(--label);--tc-t:#FBE0E1;--tc-text:var(--red-text);--tc-on:#fff}
.t-oil{--tc:var(--m-light);--tc-t:#E3F1FF;--tc-text:var(--m-azure);--tc-on:var(--ink)}

/* section bar: the divider between blocks */
.secbar{background:var(--ink);color:var(--face);font:500 var(--t-xs)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;padding:var(--s2) var(--s5);display:flex;justify-content:space-between;gap:var(--s3)}
.secbar em{font-style:normal;color:var(--ink-dim)}

/* home, colored */
.tree-h{background:var(--tc);color:var(--tc-on);border-bottom:0}
.tree-h .lbl{color:var(--tc-on)}
.tree-stats{background:var(--tc-t);border-bottom:1px solid var(--tc)}
.tree-stats div{border-right-color:color-mix(in srgb,var(--tc) 35%,transparent)}
.tree-stats .lbl{color:var(--tc-text)}
.entry .g{color:var(--tc-text)}
.entry.primary{background:var(--face);border-left:4px solid var(--tc);padding-left:calc(var(--s5) - 4px)}
.entry:not(.primary) span{display:none}
.entry:not(.primary) b{font-size:var(--t-b);font-weight:500}
.codes-strip{background:var(--ink);color:var(--face);border-color:var(--ink)}
.codes-strip > .lbl{color:var(--ink-dim);border-right-color:#33373A}
.code-btn{border-right-color:#33373A;color:var(--face)}
.code-btn span{color:var(--ink-dim)}
.code-btn:hover{background:var(--m-light);color:var(--ink)}
.code-btn:hover span{color:var(--ink)}
.code-btn b{border-left:4px solid var(--tc);padding-left:var(--s2)}
.home-foot > div{display:flex;gap:var(--s2);align-items:baseline}
.home-foot p{margin:0}

/* step, colored */
.trace ol::before{background:var(--tc);width:2px}
.trace li .g{color:var(--tc-text)}
.trace li.now .g{color:var(--m-light)}
.treeband{background:var(--tc);color:var(--tc-on);padding:var(--s2) var(--s6);display:flex;justify-content:space-between;gap:var(--s3);font:500 var(--t-xs)/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.1em}
.treeband span:last-child{opacity:.85}
.work-h .meta .g{color:var(--tc-text)}
.work-h h1{color:var(--ink)}
.work-h h1.code{color:var(--tc-text)}
.readout{background:var(--tc-t);border-top:1px solid var(--tc);border-bottom:1px solid var(--tc)}
.readout > div{border-right-color:color-mix(in srgb,var(--tc) 35%,transparent)}
.readout .lbl{color:var(--tc-text)}
.meter i.on{background:var(--tc)}
.meter i{border-color:var(--tc-text)}
.meter.crit i{border-color:var(--ink)}
.ticks i{border-color:currentColor}
.ask{padding-top:var(--s5)}
.answer:hover .k{background:var(--m-light);color:var(--ink);border-color:var(--m-light)}
.ref section{padding:0 0 var(--s5)}
.ref section > *:not(.secbar){margin-left:var(--s5);margin-right:var(--s5)}
.ref .secbar{margin-bottom:var(--s4)}
.conn .g{color:var(--tc-text)}

/* index, colored */
tbody tr td:first-child{box-shadow:inset 4px 0 0 var(--tc)}
td .tag{display:inline-block;background:var(--tc);color:var(--tc-on);font:500 var(--t-xs)/1 var(--f-mono);padding:4px 6px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
td.id .g{color:var(--tc-text)}
tr.tier td:first-child{box-shadow:none}
.status-ok{background:var(--m-azure)}

@media (max-width:1180px){
  .step{grid-template-columns:230px minmax(0,1fr)}
  .ref{grid-column:1/-1;border-left:0;border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .ref section{border-right:1px solid var(--rule)}
  .car dl div:nth-child(n+4){display:none}
}
@media (max-width:860px){
  :root{--t-xl:36px;--t-xxl:72px}
  .treeband{padding:var(--s2) var(--s4)}
  .secbar{padding:var(--s2) var(--s4)}
  .ref section > *:not(.secbar){margin-left:var(--s4);margin-right:var(--s4)}
  .home-foot > div{display:block}
  .bar{grid-template-columns:1fr auto;}
  .tabs{grid-column:1/-1;order:3;border-top:1px solid #33373A;overflow-x:auto}
  .tab{padding:var(--s3) var(--s4)}
  .mark{padding:var(--s3) var(--s4);border-right:0}
  .car dl{display:none}
  .head,.setup{grid-template-columns:1fr}
  .head > * + *,.setup > div + div{border-left:0;border-top:1px solid var(--rule)}
  .head > *,.setup > div{padding:var(--s5) var(--s4)}
  .entries{grid-template-columns:1fr}
  .tree{border-right:0;border-bottom:1px solid var(--ink)}
  .codes-strip{grid-template-columns:1fr 1fr}
  .codes-strip > .lbl{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--rule)}
  .code-btn{border-bottom:1px solid var(--rule)}
  .home-foot{grid-template-columns:1fr 1fr}
  .home-foot > div{border-bottom:1px solid var(--rule)}
  .step{grid-template-columns:1fr}
  .trace{border-right:0;border-bottom:1px solid var(--ink);padding:var(--s3) 0}
  .trace ol{display:flex;overflow-x:auto}
  .trace ol::before{display:none}
  .trace li{flex:0 0 auto;max-width:200px;border-right:1px solid var(--rule)}
  .trace li button{padding:var(--s2) var(--s4)}
  .trace .lbl{padding:0 var(--s4) var(--s2)}
  .trace-actions{padding:var(--s3) var(--s4) 0}
  .keys{display:none}
  .work-h,.ask{padding:var(--s5) var(--s4)}
  .readout{grid-template-columns:1fr}
  .readout > div,.readout > div:first-child{padding:var(--s3) var(--s4);border-right:0;border-bottom:1px solid var(--rule)}
  .hazard div{padding:var(--s3) var(--s4)}
  .answer .to{display:none}
  .answer{grid-template-columns:34px 1fr auto}
  .edge{grid-template-columns:14px 1fr}
  .edge .rel{grid-column:1/-1}
  .edge .k{display:none}
  .ref{display:block}
  .ref section{padding:0 0 var(--s4)}
  .filters .grp{width:100%;border-right:0;border-bottom:1px solid var(--rule);overflow-x:auto;padding-right:0}
  .filters .grp > .lbl{padding-left:var(--s4)}
  .hide-m{display:none}
  th:first-child,td:first-child{padding-left:var(--s4)}
  .form{grid-template-columns:1fr}
  .field:nth-child(odd){border-right:0}
  .field:nth-child(even){padding-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}