:root{
  --bg:#F2F3F1; --surface:#FBFBFA; --surface2:#ECEEEB; --ink:#21262B; --ink2:#5C6670; --ink3:#8A939B;
  --line:#D9DDD8; --line2:#C8CDC7; --accent:#33597F; --accent-ink:#FFFFFF;
  --p1:#4C6C8C; --p2:#A65B33; --p3:#8F7A2E; --p4:#33807A; --p5:#705BA6; --p6:#9A5580; --p7:#5A8047;
  --chip-bg:#EDEFEC; --shadow:0 1px 2px rgba(30,38,45,.06),0 4px 14px rgba(30,38,45,.05);
  --fa:#4E7AA8; --fb:#9A7B2F; --fc:#A25757; --fd:#3F8168; --fe:#705BA6;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#15181B; --surface:#1D2125; --surface2:#23282D; --ink:#E4E8EA; --ink2:#9AA4AC; --ink3:#6E787F;
  --line:#31373C; --line2:#3C434A; --accent:#7FA9D3; --accent-ink:#10141A;
  --p1:#7C9CBC; --p2:#C98A62; --p3:#B7A25A; --p4:#5FAAA3; --p5:#9C8AC9; --p6:#BC7FA5; --p7:#84A873;
  --chip-bg:#262B30; --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 16px rgba(0,0,0,.25);
  --fa:#7FA6CE; --fb:#BFA060; --fc:#C98585; --fd:#74B598; --fe:#9C8AC9;
}}
:root[data-theme="dark"]{
  --bg:#15181B; --surface:#1D2125; --surface2:#23282D; --ink:#E4E8EA; --ink2:#9AA4AC; --ink3:#6E787F;
  --line:#31373C; --line2:#3C434A; --accent:#7FA9D3; --accent-ink:#10141A;
  --p1:#7C9CBC; --p2:#C98A62; --p3:#B7A25A; --p4:#5FAAA3; --p5:#9C8AC9; --p6:#BC7FA5; --p7:#84A873;
  --chip-bg:#262B30; --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 16px rgba(0,0,0,.25);
  --fa:#7FA6CE; --fb:#BFA060; --fc:#C98585; --fd:#74B598; --fe:#9C8AC9;
}
:root[data-theme="light"]{
  --bg:#F2F3F1; --surface:#FBFBFA; --surface2:#ECEEEB; --ink:#21262B; --ink2:#5C6670; --ink3:#8A939B;
  --line:#D9DDD8; --line2:#C8CDC7; --accent:#33597F; --accent-ink:#FFFFFF;
  --p1:#4C6C8C; --p2:#A65B33; --p3:#8F7A2E; --p4:#33807A; --p5:#705BA6; --p6:#9A5580; --p7:#5A8047;
  --chip-bg:#EDEFEC; --shadow:0 1px 2px rgba(30,38,45,.06),0 4px 14px rgba(30,38,45,.05);
  --fa:#4E7AA8; --fb:#9A7B2F; --fc:#A25757; --fd:#3F8168; --fe:#705BA6;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px 96px}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ---------- header ---------- */
header.site{padding:44px 0 26px;border-bottom:1px solid var(--line2)}
.hdr-top{display:flex;justify-content:flex-end;align-items:flex-start;gap:16px}
.humba{display:block;flex:none;margin-top:-2px}
.humba img{height:32px;display:block;opacity:.65;transition:opacity .15s}
.humba:hover img,.humba:focus-visible img{opacity:1}
.humba .hl-dark{display:none}
@media (prefers-color-scheme: dark){.humba .hl-light{display:none}.humba .hl-dark{display:block}}
:root[data-theme="dark"] .humba .hl-light{display:none}
:root[data-theme="dark"] .humba .hl-dark{display:block}
:root[data-theme="light"] .humba .hl-light{display:block}
:root[data-theme="light"] .humba .hl-dark{display:none}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin:0 0 10px}
h1{font-size:clamp(26px,4vw,38px);line-height:1.12;letter-spacing:-.015em;margin:0 0 14px;font-weight:650;text-wrap:balance}
.lede{max-width:62ch;color:var(--ink2);margin:0 0 18px}
.hdr-stats{display:flex;gap:26px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--ink2)}
.hdr-stats b{display:block;font-size:20px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- tabs ---------- */
nav.tabs{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line2);display:flex;gap:4px;padding-top:10px}
nav.tabs button:not(.themebtn){font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;padding:9px 14px 11px;color:var(--ink2);border-bottom:2px solid transparent;margin-bottom:-1px}
nav.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.themebtn{margin-left:auto;align-self:center;flex:none;height:28px;background:var(--surface2);border:1px solid var(--line2);border-radius:7px;display:flex;align-items:center;gap:6px;color:var(--ink2);padding:0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.05em}
.themebtn .tl-light{display:none}
:root[data-theme="dark"] .themebtn .tl-light{display:inline}
:root[data-theme="dark"] .themebtn .tl-dark{display:none}
.themebtn:hover{color:var(--ink)}
.themebtn svg{width:15px;height:15px;flex:none}
.themebtn .i-sun{display:none}
:root[data-theme="dark"] .themebtn .i-sun{display:block}
:root[data-theme="dark"] .themebtn .i-moon{display:none}
nav.tabs button:hover{color:var(--ink)}

/* ---------- part tiles ---------- */
.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:8px;margin:22px 0 6px}
.ptile{display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:10px 12px 9px;border-top:3px solid var(--pc,var(--line));transition:background .12s}
.ptile:hover{background:var(--surface2)}
.ptile[aria-pressed="true"]{background:var(--surface2);border-color:var(--pc);box-shadow:inset 0 0 0 1px var(--pc)}
.ptile .pimg{display:block;width:100%;height:74px;object-fit:contain;object-position:center;margin:-2px 0 5px;border-radius:3px;background:#F2F3F1}
.ptile .pimgnone{background:transparent}
.ptile .pn{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--pc);text-transform:uppercase}
.ptile .pt{font-size:12.5px;font-weight:600;line-height:1.25;margin:3px 0 0}
.ptile .pb{font-size:11px;color:var(--ink2);line-height:1.35;margin:2px 0 4px}
.ptile .pc{font-family:var(--mono);font-size:11px;color:var(--ink2);font-variant-numeric:tabular-nums;margin-top:auto;padding-top:4px}

/* ---------- filter panel ---------- */
.filters{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin:14px 0 8px;box-shadow:var(--shadow)}
.frow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.search{flex:1 1 260px;display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line2);border-radius:6px;padding:7px 11px;cursor:text}
.search svg{flex:none;color:var(--ink3)}
.search input{border:none;background:none;color:var(--ink);font:inherit;width:100%;outline:none}
.search input::placeholder{color:var(--ink3)}
/* The "/" badge is the only advertisement the shortcuts get. Pointer-capable
   screens only — it is noise on a phone, where there is no key to press. */
.kbdhint{display:none;flex:none;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border:1px solid var(--line2);border-radius:4px;background:var(--surface2);font-family:var(--mono);font-size:11px;line-height:1;color:var(--ink3)}
.kbdhint:hover{color:var(--ink2);border-color:var(--ink3)}
@media (hover:hover) and (pointer:fine){.kbdhint{display:inline-flex}}
.rescount{font-family:var(--mono);font-size:12px;color:var(--ink2);white-space:nowrap;font-variant-numeric:tabular-nums}
.clearbtn{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--accent);padding:6px 10px;border:1px solid var(--line2);border-radius:6px}
.clearbtn:hover{border-color:var(--accent)}
.facets{display:flex;flex-direction:column;gap:8px;margin-top:12px}
/* Each facet row sets --fcol (its accent color) inline; label, chip borders,
   and pressed states all derive from it. */
.facet{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.facet .fchips{display:flex;flex-wrap:wrap;gap:7px;flex:1;min-width:0}
@media (max-width:640px){.facet{flex-direction:column;gap:6px}.facet .flabel{width:auto;padding-top:0}.facets{gap:14px}nav.tabs button:not(.themebtn){padding:9px 8px 11px;font-size:11.5px}}
.facet .flabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fcol,var(--ink3));width:108px;flex:none;white-space:nowrap;padding-top:5px;display:inline-flex;align-items:center;gap:5px}
.tipwrap{position:relative;display:inline-flex}
.tip{width:14px;height:14px;border-radius:50%;border:1px solid currentColor;font-size:9px;line-height:1;display:inline-flex;align-items:center;justify-content:center;color:inherit;opacity:.7;cursor:help;font-family:var(--mono)}
.tipwrap:hover .tip,.tip:focus-visible{opacity:1}
/* white-space must be reset alongside the other .flabel inheritances: the label
   is nowrap, so without this the tooltip renders as one long line that overflows
   the box and paints across the facet rows underneath. */
.tipbody{display:none;position:absolute;left:-6px;top:calc(100% + 8px);z-index:40;width:min(280px,78vw);background:var(--surface2);border:1px solid var(--line2);border-radius:6px;box-shadow:var(--shadow);padding:9px 11px;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--ink2);text-transform:none;letter-spacing:normal;font-weight:400;white-space:normal}
.tipwrap:hover .tipbody,.tipwrap:focus-within .tipbody{display:block}
/* Set by app.js when the tooltip would open past the bottom of the screen. */
.tipwrap.up .tipbody{top:auto;bottom:calc(100% + 8px)}
/* The how-they-combine sentence, generated per facet type by the build. */
.tipcomb{display:block;margin-top:7px;padding-top:7px;border-top:1px solid var(--line);color:var(--ink3)}
.fchip{font-family:var(--mono);font-size:11.5px;padding:3px 9px 4px;border-radius:99px;background:var(--chip-bg);border:1px solid var(--fcol,transparent);color:var(--ink2)}
.fchip:hover{color:var(--ink)}
.fchip[aria-pressed="true"]{background:var(--fcol,var(--accent));color:var(--accent-ink);border-color:var(--fcol,var(--accent))}
/* Count of entries the chip would leave visible. Dimmed at zero, still clickable
   so a pressed chip can always be pressed again to get back. */
.fchip .fn{margin-left:6px;opacity:.62;font-variant-numeric:tabular-nums}
.fchip.zero:not([aria-pressed="true"]){opacity:.42}
/* Preset views sit in the same label column as the facet rows they set, so the
   two line up and it reads as the shortcut for the rows underneath. Accent, not
   a facet color: a preset sets several facets at once, so borrowing any one of
   their colors would misstate what it does. Dashed until pressed, which keeps
   them distinct from the facet chips at a glance without a second shape. */
.facet.presets{--fcol:var(--accent);padding-bottom:11px;border-bottom:1px solid var(--line)}
.pchip{border-style:dashed}
.pchip[aria-pressed="true"]{border-style:solid}
.fnote{font-size:12px;color:var(--ink3);margin-top:10px}

/* ---------- entry list ---------- */
.grouphdr{display:flex;align-items:baseline;gap:10px;margin:30px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--pc,var(--line2))}
.grouphdr .gp{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--pc)}
.grouphdr h2{font-size:16px;margin:0;font-weight:650;letter-spacing:-.005em}
.grouphdr .gb{font-size:12px;color:var(--ink3);flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* narrow screens: wrap the group blurb onto its own full-width line instead of truncating
   (must come after the base .gb rule — equal specificity, order decides) */
@media (max-width:640px){.grouphdr{flex-wrap:wrap}.grouphdr .gb{flex-basis:100%;order:9;white-space:normal;overflow:visible;margin:-2px 0 2px}}
.grouphdr .gc{font-family:var(--mono);font-size:11px;color:var(--ink3);margin-left:auto;font-variant-numeric:tabular-nums;flex:none}
.card{scroll-margin-top:60px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--pc,var(--line));border-radius:6px;margin-bottom:8px;box-shadow:var(--shadow);overflow:hidden}
.card>button.chead{display:flex;width:100%;text-align:left;gap:12px;align-items:baseline;padding:11px 14px;flex-wrap:wrap}
.card>button.chead:hover{background:var(--surface2)}
.cnum{font-family:var(--mono);font-size:11.5px;color:var(--pc,var(--ink3));font-variant-numeric:tabular-nums;flex:none;width:30px}
.cname{font-weight:600;font-size:14.5px;flex:0 1 auto}
.ctags{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto;align-items:center}
.ctags2{flex-basis:100%;display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;margin-top:-5px;padding-right:17px}
.tag{font-family:var(--mono);font-size:10.5px;padding:2px 7px 3px;border-radius:4px;background:var(--chip-bg);border:1px solid var(--tc,transparent);color:var(--ink2);white-space:nowrap}
.caret{flex:none;color:var(--ink3);transition:transform .15s;margin-left:2px;align-self:center}
.card.open .caret{transform:rotate(90deg)}
.cbody{display:none;padding:2px 16px 16px;border-top:1px dashed var(--line)}
.card.open .cbody{display:block}
.cbody p{max-width:72ch;margin:12px 0 0}
.cbody .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);display:block;margin:14px 0 2px}
.cbody .ex{color:var(--ink2)}
.cbody a{color:var(--accent);text-decoration:none}
.cbody a:hover{text-decoration:underline}
.cimglink{display:block;width:max-content;max-width:100%;cursor:zoom-in;border-radius:6px}
.cimg{display:block;max-width:340px;width:100%;margin:14px 0 2px;border:1px solid var(--line);border-radius:6px;transition:border-color .12s}
.cimglink:hover .cimg{border-color:var(--line2)}
:root[data-theme="dark"] .cimg{opacity:.92}
:root[data-theme="dark"] .cimglink:hover .cimg{opacity:1}

/* ---------- glossary terms in prose ---------- */
/* A faint dotted underline, not a link colour: it should be findable when looked
   for and invisible when reading. text-decoration rather than a border so it
   follows the text across line breaks. */
.gt{text-decoration:underline dotted var(--ink3);text-underline-offset:3px;text-decoration-thickness:1px;cursor:help}
.gt:hover,.gt:focus-visible{text-decoration-color:var(--accent);color:var(--ink)}
/* One tooltip element for the whole page, moved and filled on hover. A tooltip
   per occurrence would put thousands of hidden nodes in the DOM. */
#gtip{position:fixed;z-index:65;max-width:min(340px,80vw);background:var(--surface2);border:1px solid var(--line2);border-radius:6px;box-shadow:var(--shadow);padding:9px 11px;font-size:12px;line-height:1.5;color:var(--ink2);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s}
#gtip.show{opacity:1;visibility:visible}
#gtip b{display:block;color:var(--ink);font-size:11px;font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px}

/* ---------- illustration lightbox ---------- */
/* Above the shortcuts panel, since it can be opened from behind nothing else. */
.lightbox{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(8,10,13,.86);cursor:zoom-out}
.lightbox[hidden]{display:none}
.lbinner{position:relative;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:default}
.lbinner img{max-width:min(1100px,100%);max-height:calc(100vh - 110px);width:auto;height:auto;object-fit:contain;border-radius:8px;border:1px solid var(--line2);background:var(--surface)}
.lbcap{margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:#c9d1d7;text-align:center;max-width:70ch}
.lbclose{position:absolute;top:-6px;right:-6px;transform:translate(50%,-50%);width:30px;height:30px;border-radius:50%;background:var(--surface);border:1px solid var(--line2);color:var(--ink2);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center}
.lbclose:hover{color:var(--ink)}
@media (max-width:640px){.lightbox{padding:14px}.lbclose{top:0;right:0;transform:none;margin:-4px}}
.vids{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.vid{width:480px;max-width:100%}
.vplay{position:relative;display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:6px;overflow:hidden;padding:0;cursor:pointer;background:#000}
.vplay img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;transition:opacity .15s}
.vplay:hover img{opacity:1}
.vbtn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vbtn svg{background:rgba(20,24,28,.72);color:#fff;border-radius:50%;padding:10px;width:20px;height:20px;transition:transform .15s}
.vplay:hover .vbtn svg{transform:scale(1.08)}
.vid iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:6px;display:block}
.vt{display:block;font-size:12px;color:var(--ink2);margin-top:5px;line-height:1.35}
/* Runtime badge, bottom-right of the thumbnail where YouTube puts it. Fixed dark
   chrome rather than theme variables, because it sits on the still image and has
   to stay legible over whatever the frame happens to be. */
.vdur{position:absolute;right:6px;bottom:6px;background:rgba(12,15,18,.82);color:#fff;font-family:var(--mono);font-size:10.5px;line-height:1;padding:3px 5px;border-radius:3px;letter-spacing:.02em}
.vmeta{display:block;font-size:11px;color:var(--ink3);margin-top:2px;line-height:1.35}
/* In the artifact flavor the videos are plain links, so the caption follows the
   title inline instead of sitting under a thumbnail. */
.ex .vmeta{display:inline;margin:0}
.variants{margin-top:6px;display:grid;gap:8px}
.variant{background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:9px 12px}
.variant b{font-size:13px}
.variant p{margin:3px 0 0;font-size:13.5px;color:var(--ink2);max-width:70ch}
.empty{padding:48px 0;text-align:center;color:var(--ink2)}
.empty .mono{font-family:var(--mono);font-size:12px;color:var(--ink3)}
.listtools{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:16px 0 0}
/* Whatever starts the list sets the gap under the tools row, and the two modes
   start with different things: catalog order leads with a group header carrying
   the 30px margin meant for separating groups mid-list, a sorted view leads with
   a bare card carrying none. Pin both to the same gap rather than cancelling the
   header's margin on .listtools, which left the sorted view overlapping by 14px. */
#list > :first-child{margin-top:16px}
.listtools button{font-family:var(--mono);font-size:11px;color:var(--ink2);padding:4px 8px;border:1px solid var(--line);border-radius:5px}
.listtools button:hover{color:var(--ink);border-color:var(--line2)}
.listtools .sortwrap{font-family:var(--mono);font-size:11px;color:var(--ink3);display:inline-flex;align-items:center;gap:6px;margin-right:2px}
.listtools select{font-family:var(--mono);font-size:11px;color:var(--ink2);background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:4px 6px}
.listtools select:hover{color:var(--ink);border-color:var(--line2)}

/* ---------- sticky results bar ---------- */
/* Appears once the filter panel has scrolled away. visibility, not display, so it
   drops out of the tab order while hidden but can still animate in. */
.resbar{position:fixed;left:50%;bottom:18px;z-index:40;display:flex;align-items:center;gap:8px;padding:6px 7px 6px 14px;border-radius:99px;background:var(--surface);border:1px solid var(--line2);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translate(-50%,12px);transition:opacity .16s,transform .16s}
.resbar.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.resbar .rb-count{font-family:var(--mono);font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.resbar button{font-family:var(--mono);font-size:11px;color:var(--ink2);padding:4px 10px;border:1px solid var(--line);border-radius:99px}
.resbar button:hover{color:var(--ink);border-color:var(--line2)}
@media (max-width:640px){.resbar{bottom:12px}}

/* ---------- keyboard shortcuts panel ---------- */
.kbdmodal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(10,13,16,.5)}
.kbdmodal[hidden]{display:none}
.kbdcard{position:relative;width:min(430px,100%);background:var(--surface);border:1px solid var(--line2);border-radius:10px;box-shadow:var(--shadow);padding:20px 22px 18px}
.kbdcard h2{font-size:14px;font-weight:650;margin:0 0 14px}
.kbdcard dl{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:0;align-items:baseline}
.kbdcard dt{margin:0;display:flex;gap:4px}
.kbdcard dd{margin:0;font-size:13px;color:var(--ink2)}
.kbdcard kbd{font-family:var(--mono);font-size:11px;line-height:1;padding:4px 6px;border:1px solid var(--line2);border-radius:4px;background:var(--surface2);color:var(--ink2);white-space:nowrap}
.kbdcard .kbdnote{font-size:12px;line-height:1.5;color:var(--ink3);margin:16px 0 0;max-width:none}
.kbdclose{position:absolute;top:8px;right:11px;font-size:19px;line-height:1;color:var(--ink3);padding:2px 6px}
.kbdclose:hover{color:var(--ink)}

/* ---------- guide view ---------- */
.guide{display:none;padding-top:8px}
.guide.active{display:block}
.explorer{display:none}
.explorer.active{display:block}
.guide h2{font-size:20px;letter-spacing:-.01em;margin:40px 0 6px;font-weight:650;text-wrap:balance}
.guide h3{font-size:15px;margin:26px 0 6px;font-weight:650}
.guide p{max-width:68ch;color:var(--ink);margin:10px 0}
.guide p.muted{color:var(--ink2)}
.guide .tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:7px;background:var(--surface);box-shadow:var(--shadow);margin:14px 0}
.guide table{border-collapse:collapse;width:100%;font-size:13.5px}
.guide th{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line2);background:var(--surface2)}
.guide td{padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.guide tr:last-child td{border-bottom:none}
.guide td:first-child{font-weight:600;white-space:nowrap}
.guide td:last-child{color:var(--ink2)}
.bands{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin:14px 0}
.band{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:10px 12px}
.band .bt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.band .bv{font-size:13px;color:var(--ink2);margin-top:2px}
.qlist{max-width:68ch;padding-left:1.2em;margin:10px 0}
.qlist li{margin:6px 0;color:var(--ink)}
.callout{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:6px;padding:14px 18px;max-width:76ch;margin:18px 0}
.callout p{margin:6px 0}
footer.site{margin-top:60px;padding-top:16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--ink3)}

/* ---------- landing page (sheet index) ---------- */
.cathdr{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin:34px 0 0;padding-bottom:6px;border-bottom:1px solid var(--line2)}
.gsearch{margin:26px 0 0}
.ghits{margin-top:8px;display:grid;gap:6px}
.ghit{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px 12px;text-decoration:none;color:inherit}
.ghit:hover{background:var(--surface2)}
.ghit .gsheet{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);flex:none}
.ghit .gname{font-weight:600;font-size:13.5px}
.ghit .gctx{font-size:12px;color:var(--ink3);margin-left:auto}
.sheetcard .sq{font-size:13px;font-style:italic;color:var(--accent);margin-top:4px}
/* --ink2, not --ink3. ink3 is the metadata gray (the "52 chemistries" line) and
   at 13.5px it measures 2.80:1 on the light background, under the 4.5:1 AA needs
   for text this size. The card blurb is the same size and the same kind of thing
   to read, so it uses the same color and gets 5.65:1. */
.catlede{font-size:13.5px;color:var(--ink2);margin:9px 0 0;max-width:74ch;line-height:1.5}
.sheets{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin:14px 0 8px}
a.sheetcard{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:8px;padding:16px 18px 14px;box-shadow:var(--shadow);transition:background .12s}
a.sheetcard:hover{background:var(--surface2)}
/* The glyph and the title share a baseline-independent flex row, so a long title
   wraps under itself instead of under the icon. flex:none keeps the svg from
   being squeezed when it does. */
.sheetcard .sh{display:flex;align-items:center;gap:9px}
/* No opacity dimming. The glyph takes --accent, the same color as the .sq
   question line beside it, which is 2.38:1 on the card in dark mode; a 1.5px
   stroke has less to give up than text does, so knocking it back another 15%
   made it the faintest thing on the card. */
.sheetcard .sg{flex:none;color:var(--accent)}
.sheetcard .st{font-weight:650;font-size:16px;letter-spacing:-.005em}
.sheetcard .sd{font-size:13.5px;color:var(--ink2);margin-top:5px;line-height:1.5}
.sheetcard .sc{font-family:var(--mono);font-size:11px;color:var(--ink3);margin-top:10px;font-variant-numeric:tabular-nums}

/* ---- header sheet switcher ---- */
/* A <details>, so it opens and navigates with no JavaScript; app.js only adds
   closing it on Esc or an outside click. margin-right:auto puts it at the left
   of a .hdr-top that is otherwise flex-end for the logo. */
.switch{margin-right:auto;position:relative;flex:none}
.switch summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;background:var(--surface2);border:1px solid var(--line2);border-radius:7px;color:var(--ink2);font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.switch summary::-webkit-details-marker{display:none}
.switch summary:hover,.switch[open] summary{color:var(--ink)}
.switch summary svg{transition:transform .15s}
.switch[open] summary svg{transform:rotate(180deg)}
/* z-index sits above the sticky tab bar (30) so the menu is not clipped by it. */
.swmenu{position:absolute;top:34px;left:0;z-index:40;min-width:260px;max-height:min(70vh,520px);overflow-y:auto;background:var(--surface);border:1px solid var(--line2);border-radius:9px;padding:8px;box-shadow:0 8px 28px rgba(0,0,0,.14)}
.swgroup{display:flex;flex-direction:column;margin-bottom:6px}
.swgroup:last-child{margin-bottom:0}
.swcat{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding:6px 8px 3px}
.swmenu a{display:block;padding:5px 8px;border-radius:6px;font-size:13.5px;color:var(--ink2);text-decoration:none}
.swmenu a:hover,.swmenu a:focus-visible{background:var(--surface2);color:var(--ink)}
.swmenu a[aria-current="page"]{color:var(--ink);font-weight:600}
@media (max-width:640px){.swmenu{min-width:min(88vw,320px)}}

/* ---- cross-sheet related entries ---- */
/* Each pointer is a two-line link: the entry it goes to, then the sheet it lives
   on in metadata gray, so the destination reads without a hover. */
.cbody .rel{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.cbody .rel a{display:block;padding:7px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:var(--ink2);text-decoration:none;font-size:13.5px;line-height:1.35}
.cbody .rel a:hover,.cbody .rel a:focus-visible{border-color:var(--accent);color:var(--ink)}
.cbody .rel .relsheet{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-top:2px}