/* My Self-Driving G-Wagon. Dense since 2026-11-06 ("a nerds heaven of dense and useful info", not a SaaS page):
   small type, tables first, monospace numbers. Type: IBM Plex Sans, Plex Sans Condensed for headings, Plex Mono for numbers.
   Palette: white and asphalt; one blue accent for the newest release; road yellow for the recorded path;
   blue and orange for which way hiding a square moves the steering. */
:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --wash: #f4f5f6;
  --ink: #2b2f33;
  --ink2: #3f444a;
  --muted: #5e646b;
  --faint: #8e949b;
  --rule: #e6e8ea;
  --rule2: #c9cdd1;
  --link: #2b2f33;
  --accent: #2f6fe8;
  --accent-wash: rgba(47, 111, 232, 0.14);
  --road: #e0a800;
  --left: 47, 111, 232;
  --right: 230, 110, 20;
  --pass: #1f7a4d;
  --fail: #a5402d;
  /* the closed-loop player on the method page */
  --c-ref: #1f8a5b;
  --c-md: #e06a1a;
  --c-ff: #2f6fe8;
  --c-other: #7c8694;
  --c-rec: #d39b00;
  --better: #2f6fe8;
  --worse: #c2412d;
  --tie: #747a81;
  --bar: #9aa0a6;
  --heading: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15181b; --panel: #15181b; --wash: #1e2226; --ink: #e9ecef; --ink2: #c9ced3; --muted: #9aa1a8; --faint: #6f767d;
    --rule: #2a2f34; --rule2: #40464d; --link: #e9ecef; --accent: #6b9bff; --accent-wash: rgba(107, 155, 255, 0.18);
    --road: #f0c030; --left: 107, 155, 255; --right: 255, 145, 60; --pass: #57c08a; --fail: #ef8a73;
    --c-ref: #3cc086; --c-md: #f08a3e; --c-ff: #6b9bff; --c-other: #8a939d; --c-rec: #f0c030;
    --better: #6b9bff; --worse: #ef7a66; --tie: #9aa1a8; --bar: #5b636b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15181b; --panel: #15181b; --wash: #1e2226; --ink: #e9ecef; --ink2: #c9ced3; --muted: #9aa1a8; --faint: #6f767d;
  --rule: #2a2f34; --rule2: #40464d; --link: #e9ecef; --accent: #6b9bff; --accent-wash: rgba(107, 155, 255, 0.18);
  --road: #f0c030; --left: 107, 155, 255; --right: 255, 145, 60; --pass: #57c08a; --fail: #ef8a73;
  --c-ref: #3cc086; --c-md: #f08a3e; --c-ff: #6b9bff; --c-other: #8a939d; --c-rec: #f0c030;
  --better: #6b9bff; --worse: #ef7a66; --tie: #9aa1a8; --bar: #5b636b;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--sans); font-variant-numeric: tabular-nums; }
a { color: var(--link); text-decoration: underline; text-decoration-color: var(--rule2); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--heading); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: 0; }
h1 { font-size: clamp(28px, 4vw, 38px); }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
p { margin: 0; }
code { font: 400 0.86em/1.3 var(--mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 50; background: var(--panel); padding: 6px 10px; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
main.wrap { padding-bottom: 56px; }
main > section, main > nav, main > .cols, main > p { margin-top: 36px; }
main > :first-child { margin-top: 20px; }
main > section > h2 { margin-bottom: 12px; }
.sub, .meta { color: var(--muted); font-size: 15px; }
details > summary { cursor: pointer; font-weight: 500; padding: 8px 0; }
details[open] > summary { margin-bottom: 8px; }
details > * + * { margin-top: 12px; }

/* ---------------------------------------------------------------- header and footer */
.top { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--rule); }
.top-in { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 26px; padding-top: 14px; padding-bottom: 12px; }
.word { font-family: var(--heading); font-weight: 700; font-size: 20px; color: var(--ink); text-decoration: none; flex-grow: 1; }
.top nav { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 22px; font-size: 16px; }
.top nav a { text-decoration: none; color: var(--ink2); }
.top nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule2); }
.top nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.theme { align-self: center; width: 28px; height: 28px; border: 1px solid var(--rule2); border-radius: 50%; background: transparent; cursor: pointer; padding: 0; display: grid; place-items: center; }
.theme span { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); border: 1.5px solid var(--ink); }
.foot { border-top: 1px solid var(--rule); color: var(--muted); font-size: 14px; }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; padding-top: 20px; padding-bottom: 40px; }
.foot-in p:first-child { max-width: 70ch; }
.foot-in p:last-child { display: flex; gap: 18px; flex-wrap: wrap; }
.foot a { color: var(--muted); }
@media (max-width: 640px) {
  .top { position: static; }
  .top-in { gap: 4px 16px; padding-top: 12px; }
  .word { flex-basis: 100%; font-size: 19px; }
  .top nav { gap: 2px 16px; font-size: 15px; }
}

/* ---------------------------------------------------------------- page heads */
.lead { display: grid; gap: 10px; max-width: 78ch; }
.lead p { color: var(--ink2); font-size: 17px; }
.lead .meta { font-size: 15px; color: var(--muted); }
.lead .nw { color: var(--ink); }
.crumb { font-size: 14px; color: var(--muted); margin-top: 20px; }
.crumb + .lead { margin-top: 6px; }
.rstate .tm-k { margin-right: 9px; vertical-align: -1px; }
.since { margin: 0 0 10px; color: var(--ink); font-size: 15px; border-left: 3px solid var(--accent); padding-left: 10px; }

/* ---------------------------------------------------------------- the release timeline */
.tlsec { margin-top: 28px; }
.tlw { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 4px; }
.tlx { position: relative; min-width: 900px; }
.ln { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; border-top: 1px solid var(--rule); }
.ln:first-of-type { border-top: 0; }
.ln-h { display: grid; line-height: 1.2; font-size: 14px; padding: 8px 0; }
.ln-h b { font-weight: 600; color: var(--ink); font-size: 15px; }
.ln-h span { color: var(--muted); font-size: 13px; }
.ln-t { position: relative; height: 64px; }
.ln-span { position: absolute; top: 31px; height: 2px; background: var(--rule2); }
.ln-none .ln-t { height: 40px; }
.ln-none .ln-h b { color: var(--muted); font-weight: 500; }
.ln-ax { border-top: 1px solid var(--rule2); }
.ln-ax .ln-t { height: 26px; }
.tks span { position: absolute; top: 4px; transform: translateX(-50%); font-size: 13px; color: var(--muted); white-space: nowrap; }
.tks .tk-year { font-weight: 500; color: var(--ink2); }
.tlg { position: absolute; top: 0; bottom: 26px; left: 162px; right: 0; pointer-events: none; }
.tlg .tg { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.tlg .tg-year { background: var(--rule2); }
.tbrk { position: absolute; top: 0; bottom: -26px; width: 10px; margin-left: -5px; pointer-events: auto; cursor: help;
  background: repeating-linear-gradient(135deg, transparent 0 3px, var(--rule2) 3px 4px); opacity: 0.8; }
/* one mark per release: fill is how far it got, the blue ring marks the newest */
.tm { position: absolute; top: 32px; width: 0; height: 0; text-decoration: none; color: var(--ink2); z-index: 1; }
.tm i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; background: var(--bg); border: 2px solid var(--ink); }
.tm-release i { background: var(--ink); }
.tm-master i { background: var(--bg); border: 2px solid var(--ink); }
.tm-upload i { background: var(--bg); border: 2px dashed var(--faint); }
.tm-none i { width: 10px; height: 10px; left: -5px; top: -5px; border: 1.5px solid var(--faint); background: var(--wash); }
.ln-none .tm { top: 20px; }
.tm-new i { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
.tm-here i { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink); }
.tm:hover i, .tm:focus-visible i { transform: scale(1.25); }
.tm:focus-visible { outline: none; }
.tm:focus-visible i { outline: 2px solid var(--accent); outline-offset: 3px; }
.tl { position: absolute; transform: translateX(-50%); white-space: nowrap; font-size: 13px; line-height: 1; color: var(--muted); }
.tl-b { top: 13px; }
.tl-a { bottom: 13px; }
.tm:hover .tl { color: var(--ink); }
.tm-new .tl, .tm-here .tl { color: var(--ink); font-weight: 600; }
.tkey { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; color: var(--muted); margin-top: 10px; padding-left: 162px; }
.swipe { display: none; font-size: 14px; color: var(--muted); margin-top: 4px; }
@media (max-width: 640px) { .swipe { display: block; } }
.tkey span { display: inline-flex; align-items: center; gap: 7px; }
.tm-k { display: inline-block; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; flex: none; border: 2px solid var(--ink); background: var(--bg); }
.tm-k.tm-release { background: var(--ink); }
.tm-k.tm-upload { border: 2px dashed var(--faint); }
.tm-k.tm-new { border: 2px solid var(--accent); box-shadow: inset 0 0 0 2px var(--bg); background: var(--bg); }
.tm-k.tm-none { width: 10px; height: 10px; border: 1.5px solid var(--faint); background: var(--wash); }
@media (max-width: 640px) {
  .tkey { padding-left: 0; gap: 4px 16px; }
  .ln { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ln-h { position: sticky; left: 0; width: max-content; max-width: calc(100vw - 32px); padding: 8px 0 0; display: flex; gap: 8px; align-items: baseline; background: var(--bg); z-index: 2; }
  .ln-ax .ln-h { display: none; }
  .tlg { left: 0; }
}

/* ---------------------------------------------------------------- front page columns and the feed */
.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 960px) { .cols { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; } }
.feedsec .sub { margin: 4px 0 14px; }
.fm { font-size: 15px; font-family: var(--sans); font-weight: 600; color: var(--muted); padding: 18px 0 6px; border-bottom: 1px solid var(--rule2); }
.feed { list-style: none; margin: 0; padding: 0; }
.fe { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.fe time { font-family: var(--heading); font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--ink2); text-align: right; }
.fe > div { display: grid; gap: 4px; min-width: 0; }
.fk { font-size: 13px; color: var(--muted); }
.fe-release .fk { color: var(--ink2); font-weight: 500; }
.fe-new .fk::after { content: "new since your last visit"; margin-left: 8px; color: var(--accent); font-weight: 600; }
.ft { font-size: 17px; line-height: 1.35; }
.fe-release .ft a, .fe-explainer .ft a { font-weight: 600; }
.fe p:not(.fk):not(.ft) { color: var(--ink2); font-size: 15px; max-width: 72ch; }
.fe .fc { font-size: 14px; }
.fe-run .ft { font-size: 15px; color: var(--ink2); }
.more { margin-top: 16px; }
.brief { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 22px; margin: 8px 0 0; }
.brief div { display: grid; gap: 1px; padding-top: 6px; border-top: 1px solid var(--rule); }
.brief dt { font-size: 13px; }
.brief dt a { color: var(--muted); }
.brief dd { margin: 0; font-size: 15px; font-weight: 500; }
.brief dd.off { color: var(--faint); font-weight: 400; }
.side { display: grid; gap: 30px; align-content: start; }
.side h2 { font-size: 18px; margin-bottom: 8px; }
.sl { list-style: none; padding: 0; margin: 0; }
.sl li { display: grid; gap: 1px; padding: 8px 0; border-top: 1px solid var(--rule); }
.sl li span { color: var(--muted); font-size: 14px; }
.sl.big li { padding: 14px 0; }
.sl.big li a { font-size: 19px; font-family: var(--heading); font-weight: 600; }

/* ---------------------------------------------------------------- interval strips */
.st { position: relative; display: block; height: 22px; }
.st::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 1px; background: var(--rule); }
.st-off::before { background: repeating-linear-gradient(90deg, var(--rule2) 0 4px, transparent 4px 8px); }
.sci { position: absolute; top: 6px; height: 9px; border-radius: 5px; background: var(--ink); opacity: 0.22; min-width: 3px; }
.smn { position: absolute; top: 3px; width: 2px; height: 15px; margin-left: -1px; background: var(--ink); }
.so { position: absolute; top: 7px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--rule2); }
.sax { position: relative; display: block; height: 18px; font-size: 12px; color: var(--muted); }
.sax span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.sax b { position: absolute; right: 0; top: 16px; font-weight: 400; font-size: 12px; }
.sax-s { height: 14px; font-size: 11px; }
.sax-s b { display: none; }

/* the forest on a test page */
.chart { margin-top: 32px; }
.chart h2 { margin-bottom: 4px; }
.forest { margin: 0; }
.forest figcaption { color: var(--muted); font-size: 14px; max-width: 90ch; margin-bottom: 12px; }
.fh, .fr { display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) minmax(120px, 210px); gap: 18px; align-items: center; }
.fh { padding-bottom: 14px; border-bottom: 1px solid var(--rule2); }
.fl { list-style: none; padding: 0; margin: 0; }
.fr { padding: 5px 0; border-bottom: 1px solid var(--rule); }
.fr-m { border-top: 1px solid var(--rule2); }
.fn { display: grid; line-height: 1.2; min-width: 0; }
.fn a { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn span { font-size: 12.5px; color: var(--muted); }
.ftr { display: block; cursor: default; }
.fv { font-size: 14px; white-space: nowrap; color: var(--ink2); }
.fr-off .fv, .fr-off .fn a { color: var(--faint); }
.fr-new .sci { background: var(--accent); opacity: 0.35; }
.fr-new .smn { background: var(--accent); }
.fr-new .fn a { font-weight: 600; }
.fr:hover { background: var(--wash); }
.fr-tail { grid-template-columns: minmax(0, 1fr); padding: 10px 0; }
.fr-tail .fn span { font-size: 14px; color: var(--muted); }
.fr-tail:hover { background: none; }
@media (max-width: 720px) {
  .fh { grid-template-columns: minmax(0, 1fr); }
  .fh > span:first-child, .fh > span:last-child { display: none; }
  .fr { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 0; }
  .fr .ftr { grid-column: 1 / -1; grid-row: 2; }
  .fv { text-align: right; font-size: 13px; }
}
.tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; padding: 4px 0 10px; border-bottom: 1px solid var(--rule); font-size: 15px; }
.tabs a { text-decoration: none; color: var(--muted); padding: 6px 0; }
.tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }
.tabs + .lead { margin-top: 22px; }
@media (max-width: 640px) { .tabs, .xv-pick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .tabs a, .xv-pick button { white-space: nowrap; flex: none; } }
.tlist { list-style: none; padding: 0; margin: 28px 0 0; }
.tlist li { display: grid; gap: 6px; padding: 18px 0; border-top: 1px solid var(--rule); max-width: 80ch; }
.tlist h2 a { text-decoration: none; }
.tlist h2 a:hover { text-decoration: underline; }
.more-sec { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.more-sec > details { border-bottom: 1px solid var(--rule); }
.chg { list-style: none; padding: 0; margin: 0; max-width: 90ch; }
.chg li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 8px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.chg time { color: var(--muted); }

/* ---------------------------------------------------------------- release page */
.rtl { list-style: none; padding: 0; margin: 0; }
.rt { display: grid; grid-template-columns: minmax(170px, 1.1fr) minmax(170px, 1fr) minmax(220px, 1.6fr) 120px; gap: 18px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); }
.rn { display: grid; line-height: 1.25; }
.rn a { font-weight: 600; }
.rn span { font-size: 13px; color: var(--muted); }
.rv { font-size: 15px; }
.rs { display: grid; gap: 2px; }
.rs .sci { background: var(--accent); opacity: 0.4; }
.rs .smn { background: var(--accent); }
.rst { font-size: 14px; color: var(--ink2); }
.rt-off .rv, .rt-off .rst { color: var(--faint); }
.prov { margin-top: 14px; color: var(--muted); font-size: 14px; max-width: 100ch; }
@media (max-width: 760px) {
  .rt { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .rs { grid-column: 1 / -1; }
  .rv { text-align: right; }
  .rst { grid-column: 1 / -1; font-size: 13px; }
}
.ident { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0 0 12px; font-size: 15px; }
.ident dt { color: var(--muted); }
.ident dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.limits { padding-left: 1.2em; display: grid; gap: 8px; max-width: 80ch; color: var(--ink2); margin: 0; }
.stills { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.stills figure { margin: 0; }
.stills img { width: 100%; height: auto; display: block; }
.stills figcaption { font-size: 14px; color: var(--ink2); margin-top: 6px; }
.hx { color: var(--muted); font-size: 0.6em; font-weight: 400; margin-left: 6px; }
.hx-only { font-size: 0.8em; }
.mlink { color: var(--ink); }
.nm { font-weight: 600; }

/* every metric, kept from the previous site */
.sec { padding-top: 10px; display: grid; gap: 8px; }
.sec h3 { font-size: 18px; }
.sec-m { color: var(--ink2); }
.cond { color: var(--muted); font-size: 14px; max-width: 82ch; }
.sec-off p { color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--ink2); }
.mk { display: inline-block; width: 8px; height: 8px; margin-right: 5px; vertical-align: 1px; }
.mk-better { background: var(--better); border-radius: 50%; }
.mk-worse { background: var(--worse); transform: rotate(45deg) scale(0.9); }
.mk-tie { border: 2px solid var(--tie); border-radius: 50%; }
.mk-lower, .mk-higher { width: 0; height: 0; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; }
.mk-lower { border-top: 8px solid var(--tie); }
.mk-higher { border-bottom: 8px solid var(--tie); }
.mk-none { height: 2px; vertical-align: 4px; background: var(--tie); }
.b-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 6.5rem; gap: 10px; align-items: center; font-size: 14px; }
.b-l { color: var(--ink2); line-height: 1.25; }
.b-s { display: block; color: var(--muted); font-size: 12.5px; }
.b-track { position: relative; height: 14px; display: block; background: var(--wash); }
.b-bar { position: absolute; left: 0; top: 3px; height: 8px; background: var(--bar); }
.b-ref { position: absolute; top: 0; width: 2px; height: 14px; margin-left: -1px; background: var(--ink); }
.b-v { text-align: right; font-weight: 500; white-space: nowrap; }
.b-u { color: var(--muted); font-weight: 400; font-size: 12px; }
.b-na { grid-column: 2 / 4; color: var(--muted); font-size: 14px; }

/* ---------------------------------------------------------------- tables */
.tw { position: relative; overflow-x: auto; border-top: 1px solid var(--rule2); border-bottom: 1px solid var(--rule2); max-width: 100%; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14.5px; }
caption { caption-side: top; text-align: left; padding: 10px 0 6px; color: var(--muted); font-size: 14px; }
th, td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
tr > :first-child { padding-left: 0; }
tbody tr:last-child > * { border-bottom: 0; }
thead th { font-weight: 600; color: var(--ink2); font-size: 13.5px; }
tbody th[scope="row"], thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); min-width: 10rem; }
th[scope="row"] { font-weight: 500; }
.n { text-align: right; white-space: nowrap; }
.th-s { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; white-space: normal; }
td .ci, td .wins, td .med, td .dl { display: block; color: var(--muted); font-size: 12.5px; }
td .dl { color: var(--ink2); margin-top: 2px; }
td.na { color: var(--muted); font-size: 13.5px; }
td .u { color: var(--muted); font-size: 12.5px; font-weight: 400; }
table.res td.n { font-weight: 500; }
td.pass { color: var(--ink); }
td.pass .ci { color: var(--pass); }
td.fail .ci { color: var(--fail); }
tr.pooled > * { border-top: 1px solid var(--rule2); font-weight: 600; }
.setup-c { background: rgba(var(--left), calc(var(--h, 0) * 0.16)); }
.setups-sec { display: grid; gap: 12px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; }
.setup-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px 18px; }
.setup-tab { font: 500 14px/1.2 var(--sans); padding: 6px 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.setup-tab[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.bg-det { margin-top: 6px; font-size: 14px; }

/* ---------------------------------------------------------------- prose pages */
.prose { max-width: 82ch; display: grid; gap: 12px; }
.prose p, .prose li { color: var(--ink2); }
.prose ul, .prose ol:not(.pipe) { padding-left: 1.2em; margin: 0; display: grid; gap: 6px; }
.prose .tw { max-width: none; }
section.prose:has(.tw table) { max-width: 100ch; }
ul.plain { padding-left: 1.2em; display: grid; gap: 8px; max-width: 76ch; }

/* ---------------------------------------------------------------- inside the model */
.xv { display: grid; gap: 14px; }
.xv-pick { display: flex; flex-wrap: wrap; gap: 6px 22px; border-bottom: 1px solid var(--rule); }
.xv-pick button { font: 500 15px/1.2 var(--sans); border: 0; background: transparent; color: var(--muted); padding: 8px 0; cursor: pointer; display: grid; text-align: left; gap: 2px; }
.xv-pick button span { font-size: 12.5px; font-weight: 400; }
.xv-pick button[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.xv-views { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 900px) { .xv-views { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.xv-views figure { margin: 0; }
.xv-views figcaption { font-size: 14px; color: var(--muted); margin-top: 6px; }
.xv-img { position: relative; aspect-ratio: 2 / 1; background: #000; overflow: hidden; }
.xv-img img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.xv-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(4, 1fr); }
.xv-grid i { border-right: 1px solid rgba(255, 255, 255, 0.28); border-bottom: 1px solid rgba(255, 255, 255, 0.28); }
.xv-grid i:nth-child(8n) { border-right: 0; }
.xv-grid i:nth-child(n + 25) { border-bottom: 0; }
.xv-grid i.top { box-shadow: inset 0 0 0 2px #fff; }
.xv-ctl { display: flex; align-items: center; gap: 14px; }
.xv-play { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rule2); background: var(--bg); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.xv-play i { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.xv-play.paused i { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.xv-scrub { flex: 1; min-width: 0; accent-color: var(--ink2); }
.xv-read { flex: none; font-size: 14px; color: var(--ink2); min-width: 15ch; text-align: right; }
@media (max-width: 640px) { .xv-ctl { flex-wrap: wrap; } .xv-read { flex-basis: 100%; text-align: left; } }
.xv-trace svg { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.xv-trace svg { display: block; width: 100%; height: 110px; }
.xv-trace .z { stroke: var(--rule2); stroke-width: 1; }
.xv-trace .pm { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.xv-trace .pr { fill: none; stroke: var(--road); stroke-width: 2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.xv-trace .cur { stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.xv-key, .xv-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; color: var(--muted); }
.xv-key span, .xv-legend span { display: inline-flex; align-items: center; gap: 7px; }
.k-model { width: 18px; height: 2px; background: var(--ink); }
.k-meas { width: 18px; height: 0; border-top: 2px dashed var(--road); }
.k-left, .k-right { width: 14px; height: 14px; }
.k-left { background: rgb(var(--left)); }
.k-right { background: rgb(var(--right)); }
.xv-rows p { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.xv-rows canvas { display: block; width: 100%; height: 80px; image-rendering: pixelated; }
.pipe { list-style: none; padding: 0; margin: 4px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 0; }
.pipe li { display: grid; gap: 2px; padding: 8px 22px 8px 0; margin-right: 12px; position: relative; font-size: 14px; color: var(--muted); min-width: 0; }
.pipe li::after { content: ""; position: absolute; right: 2px; top: 17px; width: 8px; height: 8px; border-top: 1.5px solid var(--faint); border-right: 1.5px solid var(--faint); transform: rotate(45deg); }
.pipe li:last-child::after { display: none; }
.pipe b { font-weight: 600; color: var(--ink); font-size: 15px; }
.pipe .hl b { color: var(--accent); }

/* ---------------------------------------------------------------- the closed-loop player (method page) */
.cl-ex { display: grid; gap: 12px; }
.cl { margin: 0; display: grid; gap: 14px; }
.cl-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
@media (min-width: 980px) { .cl-stage { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.cl-vid { position: relative; overflow: hidden; background: #000; aspect-ratio: 2 / 1; }
.cl-player { display: grid; gap: 10px; min-width: 0; }
.cl-vid canvas { display: block; width: 100%; height: 100%; }
.cl-lab { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 2px; background: rgb(10 12 14 / 0.72); color: #f2f4f6; font-size: 14px; font-weight: 500; }
.cl-time { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; background: rgb(10 12 14 / 0.72); color: #f2f4f6; font-size: 13px; }
.cl-ctl { display: flex; align-items: center; gap: 12px; }
.cl-play { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule2); background: var(--bg); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.cl-play i { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.cl-play.paused i { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.cl-scrub { flex: 1; min-width: 0; accent-color: var(--ink2); }
.cl-views { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-views button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--rule2); background: var(--bg); color: var(--ink2); font: 500 14px var(--sans); cursor: pointer; text-align: left; }
.cl-views button b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.cl-views button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cl-map { width: 100%; height: auto; max-height: 430px; display: block; border: 1px solid var(--rule); }
.cl-map .grid { stroke: var(--rule); stroke-width: 1; }
.cl-map .tick { fill: var(--muted); font: 400 11px var(--sans); }
.cl-map .bp.dim { opacity: 0.35; }
.cl-map .bp.on { stroke-width: 3; }
.bp { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.bp-rec { stroke: var(--c-rec); stroke-dasharray: 6 4; }
.bp-ref { stroke: var(--c-ref); } .bp-md { stroke: var(--c-md); } .bp-ff { stroke: var(--c-ff); } .bp-other { stroke: var(--c-other); }
.b2 { fill: var(--bg); stroke-width: 2; }
.b2-ref { stroke: var(--c-ref); } .b2-md { stroke: var(--c-md); } .b2-ff { stroke: var(--c-ff); }
.bd { stroke: var(--bg); stroke-width: 2; }
.bd-rec { fill: var(--c-rec); }
.cl-map .dot-ref { fill: var(--c-ref); } .cl-map .dot-md { fill: var(--c-md); } .cl-map .dot-ff { fill: var(--c-ff); }
.bl { fill: var(--ink); font: 500 12px var(--sans); }
.bl-l { stroke-width: 1; stroke: var(--rule2); }
.sw { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sw-ref, .dot-ref { background: var(--c-ref); }
.sw-md, .dot-md { background: var(--c-md); }
.sw-ff, .dot-ff { background: var(--c-ff); }
.sw-other, .dot-other { background: var(--c-other); }
.sw-rec { background: repeating-linear-gradient(90deg, var(--c-rec) 0 4px, transparent 4px 6px); border-radius: 0; height: 3px; width: 14px; }
.cl figcaption { display: grid; gap: 6px; font-size: 15px; color: var(--ink2); max-width: 80ch; }
.cl figcaption .cl-how { font-size: 14px; color: var(--muted); }

/* ---------------------------------------------------------------- tooltip */
.tip { position: fixed; z-index: 30; max-width: min(380px, calc(100vw - 16px)); padding: 7px 10px; background: var(--ink); color: var(--bg); font-size: 13.5px; line-height: 1.4; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* work notes */
.note { margin-top: 28px; }
.note h2 { margin-top: 10px; }
.note .tw, .note table { margin: 4px 0; }
.latest { margin: 8px 0 28px; max-width: 82ch; }
.latest h2, .tlsec h2 { font-size: 20px; margin-bottom: 10px; }
.latest ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.latest li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); column-gap: 16px; border-top: 1px solid var(--rule); padding-top: 12px; }
.latest time { color: var(--muted); font-size: 14px; grid-row: span 2; }
.latest li a { font-weight: 600; }
.latest li p { margin: 4px 0 0; color: var(--ink2); font-size: 15px; }
@media (max-width: 560px) { .latest li { grid-template-columns: 1fr; } .latest time { grid-row: auto; } }

/* ---------------------------------------------------------------- the truck drawing */
.truckfig { margin: 0; }
.truck { display: block; width: 100%; height: auto; }
.truck .tf { fill: none; stroke: var(--ink2); stroke-width: 2; stroke-linejoin: round; }
.truck .tf .body { fill: var(--wash); }
.truck .tf .glass { fill: var(--bg); }
.truck .tf .tire { stroke-width: 5; }
.truck .tf .ground { stroke: var(--rule2); stroke-width: 1.5; }
.truck .tg { fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 5 4; }
.truck .tg .bus { stroke: var(--muted); stroke-width: 2.5; stroke-dasharray: none; }
.truck .tg .bus.b { stroke-dasharray: 8 5; }
.truck .part { fill: var(--bg); stroke: var(--ink2); stroke-width: 2; }
.truck .ta rect { fill: var(--accent-wash); stroke: var(--accent); stroke-width: 2.5; }
.truck .ta .wire { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; }
.truck .callouts path { fill: none; stroke: var(--faint); stroke-width: 1; }
.truck .callouts circle { fill: var(--bg); stroke: var(--ink2); stroke-width: 1.5; }
.truck .callouts g:nth-of-type(-n+5) circle { stroke: var(--accent); stroke-width: 2.5; }
.truck .callouts text { font: 600 19px var(--heading); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.truckfig figcaption { display: flex; gap: 20px; flex-wrap: wrap; color: var(--muted); font-size: 14px; margin-top: 4px; }
.key::before { content: ""; display: inline-block; width: 14px; height: 10px; margin-right: 7px; border-radius: 2px; vertical-align: -1px; }
.key.added::before { background: var(--accent-wash); border: 2px solid var(--accent); }
.key.bus::before { height: 0; border-top: 3px solid var(--muted); border-radius: 0; vertical-align: 3px; }
.key.bus.b::before { border-top-style: dashed; }
.key.factory::before { background: var(--bg); border: 2px solid var(--ink2); }

/* ---------------------------------------------------------------- dense (2026-11-06): every page */
body { font-size: 13.5px; line-height: 1.42; }
h1 { font-size: 26px; font-weight: 700; } h2 { font-size: 15px; } h3 { font-size: 13.5px; }
.wrap { max-width: 1440px; }
main > section, main > nav, main > .cols, main > p { margin-top: 20px; }
main > :first-child { margin-top: 12px; }
main > section > h2 { margin-bottom: 6px; padding-bottom: 3px; border-bottom: 1px solid var(--ink); }
.top { border-bottom: 2px solid var(--ink); }
.top-in { padding-top: 8px; padding-bottom: 6px; gap: 4px 18px; }
.word { font-size: 18px; }
.top nav { font-size: 13.5px; gap: 3px 15px; }
.theme { width: 22px; height: 22px; } .theme span { width: 10px; height: 10px; }
.lead { max-width: 110ch; gap: 6px; } .lead p { font-size: 14px; } .lead .meta, .sub, .meta { font-size: 12.5px; }
.crumb { font: 12px var(--mono); margin-top: 10px; }
table { font-size: 12.5px; } th, td { padding: 3px 8px; } thead th { font-size: 11.5px; color: var(--muted); }
caption { font-size: 12.5px; padding: 6px 0 4px; }
td .ci, td .wins, td .med, td .dl { font: 11px/1.3 var(--mono); }
td.n, th.n { font-family: var(--mono); font-size: 12px; }
.th-s { font-size: 11px; }
.fm { font-size: 12px; padding: 10px 0 3px; }
.fe { padding: 6px 0; gap: 10px; grid-template-columns: 28px minmax(0, 1fr); } .fe time { font: 600 14px var(--mono); }
.fk { font-size: 11.5px; } .ft { font-size: 13.5px; } .fe p:not(.fk):not(.ft) { font-size: 12.5px; }
.brief dd { font-size: 13px; } .brief dt { font-size: 11.5px; }
.sl li { padding: 4px 0; } .sl li span { font-size: 12px; } .sl.big li { padding: 6px 0; } .sl.big li a { font-size: 14px; }
.side { gap: 18px; } .side h2 { font-size: 14px; }
.cols { gap: 28px; } @media (min-width: 960px) { .cols { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; } }
.rt { padding: 5px 0; gap: 12px; } .rv { font: 12.5px var(--mono); } .rst { font-size: 12.5px; }
.ident { font-size: 13px; gap: 3px 14px; } .limits { gap: 4px; font-size: 13px; }
.sec h3 { font-size: 14px; } .cond { font-size: 12.5px; } .legend { font-size: 12.5px; }
.b-row { font-size: 12.5px; }
.prose { max-width: 100ch; gap: 8px; font-size: 13.5px; }
.prose h2 { font-size: 15px; margin-top: 10px; padding-bottom: 3px; border-bottom: 1px solid var(--ink); }
.foot { font-size: 12px; border-top: 2px solid var(--ink); } .foot-in { padding-top: 10px; padding-bottom: 24px; }

/* ---------------------------------------------------------------- dense components: front page, truck, signals */
.d-tag { color: var(--ink2); font-size: 13.5px; max-width: 150ch; margin-top: 10px; }
.d-tick { display: flex; flex-wrap: wrap; gap: 3px 20px; padding: 6px 0; margin-top: 8px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font: 12.5px var(--mono); color: var(--ink2); }
.d-tick b { color: var(--ink); font-weight: 600; } .d-tick span { white-space: nowrap; }
@media (max-width: 600px) { .d-tick span { white-space: normal; } }
.d-g { display: grid; gap: 16px 22px; margin-top: 16px; }
.d-g.a { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.d-g.c { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .d-g.a, .d-g.c { grid-template-columns: minmax(0, 1fr); } }
main > .d-p, main > .d-g { margin-top: 16px; }
.d-p > h2 { font: 600 13.5px var(--heading); margin: 0 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.d-p > h2 small { font: 400 12px var(--sans); color: var(--muted); text-align: right; }
.d-tw { overflow-x: auto; max-width: 100%; }
table.d-t { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.d-t th { text-align: left; font: 600 11px var(--sans); color: var(--muted); border-bottom: 1px solid var(--rule2); padding: 3px 8px 3px 0; vertical-align: bottom; white-space: nowrap; position: static; min-width: 0; background: none; }
.d-t td { border-bottom: 1px solid var(--rule); padding: 3px 8px 3px 0; vertical-align: top; }
.d-t tbody tr:last-child > * { border-bottom: 1px solid var(--rule); }
.d-t tr:hover td { background: var(--wash); }
.d-t td:first-child { white-space: nowrap; }
.d-t thead th:first-child, .d-t tbody th[scope="row"] { min-width: 0; position: static; }
.d-t .r { text-align: right; white-space: nowrap; }
.d-t .m, .d-mono { font-family: var(--mono); font-size: 12px; }
.d-t .k { color: var(--muted); }
.d-t .wrap { white-space: normal; min-width: 18ch; }
.d-t .nw { white-space: nowrap; }
.d-t.find td:nth-child(2) { min-width: 24ch; }
.d-t th.r { text-align: right; }
.d-u { font: 400 10.5px var(--mono); color: var(--muted); }
.d-h { font: 11px var(--mono); color: var(--muted); }
.d-ci { font: 11px var(--mono); color: var(--muted); }
.d-na { color: var(--faint); font: 11px var(--mono); }
.d-src { color: var(--faint); font: 11px var(--mono); margin-top: 4px; }
.d-pill { font: 600 10.5px var(--sans); padding: 0 5px; border-radius: 2px; border: 1px solid currentColor; white-space: nowrap; }
.d-pill.add { color: var(--accent); } .d-pill.fac { color: var(--muted); } .d-pill.mea { color: var(--pass); } .d-pill.sim { color: #a8740a; } .d-pill.open { color: var(--fail); }
:root[data-theme="dark"] .d-pill.sim { color: #e3b341; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .d-pill.sim { color: #e3b341; } }
svg.d-bar { width: 44px; height: 10px; vertical-align: middle; margin-left: 4px; }
svg.d-bar .rg { stroke: var(--muted); stroke-width: 1.5; } svg.d-bar .pt { fill: var(--ink); } svg.d-bar .ax { stroke: var(--rule2); }
.d-fig .truck { max-width: 100%; }
.d-spark { display: flex; align-items: flex-end; gap: 2px; height: 40px; margin: 4px 0 2px; } .d-spark i { flex: 1; background: var(--accent); min-height: 1px; display: block; }
.d-sparkl { display: flex; gap: 2px; font: 10px var(--mono); color: var(--muted); } .d-sparkl span { flex: 1; text-align: center; }
.d-ml { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12.5px; }
.d-ml li { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: 6px; padding: 2px 0; border-bottom: 1px dotted var(--rule); }
.d-ml time { font: 11.5px var(--mono); color: var(--muted); }
.d-gl { columns: 4 260px; column-gap: 22px; font-size: 12.5px; } .d-gl p { margin: 0 0 6px; break-inside: avoid; } .d-gl b { font: 600 12px var(--mono); }
.d-crumb { font: 12px var(--mono); color: var(--muted); margin-top: 10px; }
.d-h1 { font: 700 26px/1.1 var(--heading); margin: 4px 0; }
.d-sum { max-width: 120ch; color: var(--ink2); font-size: 14px; }
.d-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 16px 0 8px; }
.d-tools input, .d-tools select { font: 13px var(--sans); padding: 4px 8px; border: 1px solid var(--rule2); border-radius: 3px; background: var(--bg); color: var(--ink); }
.d-tools input { min-width: 240px; }
.d-flash { width: 100%; height: auto; display: block; }
.d-flash text { font: 500 11px var(--mono); fill: var(--ink2); text-anchor: middle; } .d-flash .wr { fill: var(--accent-wash); stroke: var(--accent); stroke-width: 2; }
.d-flash .k { fill: var(--wash); stroke: var(--ink2); stroke-width: 1.2; } .d-flash .x { fill: var(--bg); stroke: var(--rule2); stroke-width: 1.2; stroke-dasharray: 3 2; }
.d-flash .lbl { font: 600 11px var(--sans); fill: var(--muted); text-anchor: start; }
.d-mono { line-height: 1.7; }
.tlsec .tl { margin-top: 4px; }

/* ---------------------------------------------------------------- colour that carries information (2026-11-06)
   Subsystems (identity; validated all-pairs, light and dark, dataviz validate_palette.js): d-p perception and models,
   d-c control and powertrain, d-e electrical and CAN. Always shown with their name. Status is separate and reserved:
   good on the truck or measured, warn simulation or partly checked, crit open or not done. */
:root { --dp: #2a78d6; --dc: #eb6834; --de: #1baf7a; --dpw: rgba(42,120,214,.16); --dcw: rgba(235,104,52,.16); --dew: rgba(27,175,122,.18);
  --good: #0ca30c; --warn: #b77a00; --crit: #d03b3b; --goodw: rgba(12,163,12,.12); --warnw: rgba(250,178,25,.20); --critw: rgba(208,59,59,.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dp: #3987e5; --dc: #d95926; --de: #199e70; --dpw: rgba(57,135,229,.22); --dcw: rgba(217,89,38,.22); --dew: rgba(25,158,112,.24);
  --good: #3cc13c; --warn: #fab219; --crit: #e66767; --goodw: rgba(12,163,12,.20); --warnw: rgba(250,178,25,.18); --critw: rgba(208,59,59,.22); } }
:root[data-theme="dark"] { --dp: #3987e5; --dc: #d95926; --de: #199e70; --dpw: rgba(57,135,229,.22); --dcw: rgba(217,89,38,.22); --dew: rgba(25,158,112,.24);
  --good: #3cc13c; --warn: #fab219; --crit: #e66767; --goodw: rgba(12,163,12,.20); --warnw: rgba(250,178,25,.18); --critw: rgba(208,59,59,.22); }
.dp { --d: var(--dp); --dw: var(--dpw); } .dc { --d: var(--dc); --dw: var(--dcw); } .de { --d: var(--de); --dw: var(--dew); }
.d-dom { display: inline-flex; align-items: center; gap: 5px; font: 500 11.5px var(--sans); color: var(--ink2); white-space: nowrap; margin-right: 10px; }
.d-dom::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--d); }
.d-p > h2 small .d-dom { margin-right: 8px; }
/* rows carry their subsystem as a bar on the left */
.d-t tr.rd > td:first-child { box-shadow: inset 3px 0 0 var(--d, transparent); padding-left: 8px; }
.d-t tr.rd:hover td { background: var(--dw, var(--wash)); }
/* status */
.d-tick .st-good b { color: var(--good); } .d-tick .st-warn b { color: var(--warn); } .d-tick .st-crit b { color: var(--crit); }
.d-tick span[class^="st-"]::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.d-tick .st-good::before { background: var(--good); } .d-tick .st-warn::before { background: var(--warn); } .d-tick .st-crit::before { background: var(--crit); }
.d-pill { border: 0; padding: 1px 6px; }
.d-pill.mea { color: var(--good); background: var(--goodw); } .d-pill.sim { color: var(--warn); background: var(--warnw); } .d-pill.open { color: var(--crit); background: var(--critw); }
.d-pill.add { color: var(--ink); background: var(--wash); box-shadow: inset 0 0 0 1px var(--rule2); } .d-pill.fac { color: var(--muted); background: none; box-shadow: inset 0 0 0 1px var(--rule2); }
/* the drawing: parts and callouts in their subsystem colour; filled = added, outlined = factory */
.truck .ta rect.dp, .truck .ta rect.de { fill: var(--dw); stroke: var(--d); }
.truck .ta .wire.dp, .truck .ta .wire.de { stroke: var(--d); }
.truck .part rect.dc { fill: var(--bg); stroke: var(--d); stroke-width: 2.5; }
.truck .tg rect.dc, .truck .tg path.dc { stroke: var(--dc); opacity: .7; }
.truck .tg .bus { stroke: var(--de); }
.truck .callouts g.co circle { stroke: var(--d); stroke-width: 2.5; fill: var(--bg); }
.truck .callouts g.co.add circle { fill: var(--d); }
.truck .callouts g.co.add text { fill: #fff; }
.truck a:hover g.co circle { fill: var(--ink); stroke: var(--ink); } .truck a:hover g.co text { fill: var(--bg); }
.d-key { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 11.5px; color: var(--muted); margin: 6px 0; }
.d-k { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.d-k.fill::before, .d-k.line::before { content: ""; width: 12px; height: 9px; border-radius: 2px; border: 2px solid var(--ink2); }
.d-k.fill::before { background: var(--ink2); }
.d-k.bus::before { content: ""; width: 18px; border-top: 3px solid var(--de); }
.d-k.bus.b::before { border-top-style: dashed; }
/* the results matrix: the interval coloured by the paired change against the release before it */
.d-t td.vs-better svg.d-bar .rg, .d-t td.vs-better svg.d-bar .pt { stroke: var(--better); fill: var(--better); }
.d-t td.vs-worse svg.d-bar .rg, .d-t td.vs-worse svg.d-bar .pt { stroke: var(--worse); fill: var(--worse); }
.d-t td.vs-better { background: color-mix(in srgb, var(--better) 9%, transparent); } .d-t td.vs-worse { background: color-mix(in srgb, var(--worse) 10%, transparent); }
.d-g9 { font-size: 10px; margin-left: 2px; display: inline-block; width: 1em; }
.vs-better .d-g9 { color: var(--better); } .vs-worse .d-g9 { color: var(--worse); }
.d-k.vs::before { content: ""; width: 12px; height: 10px; border-radius: 2px; }
.d-k.vs.better::before { background: color-mix(in srgb, var(--better) 35%, transparent); } .d-k.vs.worse::before { background: color-mix(in srgb, var(--worse) 35%, transparent); }
.d-k.vs.tie::before { background: var(--wash); box-shadow: inset 0 0 0 1px var(--rule2); } .d-k.vs.first::before { background: none; box-shadow: inset 0 0 0 1px var(--rule2); }
/* milestones */
.d-ml li { position: relative; padding-left: 12px; }
.d-ml li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--d, var(--faint)); }
/* buses */
.d-bus { font: 600 10.5px var(--mono); padding: 1px 5px; border-radius: 2px; color: var(--de); box-shadow: inset 0 0 0 1px var(--de); white-space: nowrap; }
.d-bus.c { background: var(--dew); }
.d-spark i { background: var(--dp); }