/* ════════════════════════════════════════════════════════════════════
   thinkhard.si — design system ("field notes for prompts")
   A naturalist's notebook crossed with a precise instrument: paper surfaces with a faint
   grain, an editorial serif for headings, a warm grotesque for the interface, mono only
   for numbers and specimen labels. Color carries meaning, taken from a thin section under
   crossed polars: ultramarine = act on it, ochre = added / attention, garnet = failed,
   malachite = held. Every text color passes WCAG AA on every surface in both themes.
   Reference: docs/DESIGN.md
   ════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/bricolage-var.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/plexmono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/plexmono-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/plexmono-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/plexmono-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/newsreader-var.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/newsreader-var-i.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}

:root{
  --bg:#F1F3EF;          /* notebook paper, a breath of green-gray */
  --bg-2:#E7EAE4;        /* sunken wells */
  --panel:#FAFBF8;       /* raised sheets */
  --field:#FFFFFF;       /* inputs */
  --line:#D3D8D0;
  --line-2:#E2E6DF;
  --ink:#171A19;         /* graphite */
  --ink-2:#48504D;
  --ink-3:#59625E;       /* ≥5:1 on every light surface */
  --ink-4:#7B837F;       /* placeholders, disabled, decoration only */
  --accent:#2443B5;      /* ultramarine: things you act on */
  --on-accent:#FFFFFF;
  --accent-wash:rgba(36,67,181,.08);
  --hi:#B8860B;          /* ochre: added, attention */
  --hi-strong:#D4A017;
  --hi-wash:rgba(212,160,23,.16);
  --hi-ink:#7A5806;      /* ochre dark enough for small text */
  --bad:#AE3626;         /* garnet: failed */
  --bad-wash:rgba(174,54,38,.08);
  --good:#1B7149;        /* malachite: held */
  --good-wash:rgba(27,113,73,.09);
  --stage:#0B0D0E;       /* the microscope stays dark in both themes */
  --stage-2:#14181A;
  --stage-ink:#DCE1DB;
  --stage-dim:#8E9692;
  --stage-line:#2C3133;
  --shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 1px 2px rgba(20,26,23,.05), 0 12px 32px -18px rgba(20,26,23,.22);
  --shadow-pop:0 28px 70px -28px rgba(20,26,23,.38), 0 2px 6px rgba(20,26,23,.06), 0 0 0 1px rgba(20,26,23,.05);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .12 0 0 0 0 .1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* chart series */
  --viz-1:#2f6fd1; --viz-2:#d4612f; --viz-3:#1E9468; --viz-4:#9B6BD6; --viz-5:#C9970F; --viz-6:#5E6A66;

  --f-head:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;   /* headings */
  --f-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;        /* compact UI headings */
  --f-ui:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --f-serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;  /* reading text */

  --t-2xs:.7rem; --t-xs:.78rem; --t-sm:.88rem; --t-md:1rem; --t-lg:1.2rem; --t-xl:1.6rem; --t-2xl:2.3rem; --t-3xl:3.4rem;
  --r:8px; --r-lg:14px; --r-xl:22px;
  --gut:clamp(18px,3.4vw,40px);
  --bar-h:3.75rem;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1214; --bg-2:#0A0D0E; --panel:#161A1D; --field:#1B2023; --line:#2B3236; --line-2:#22282C;
    --ink:#E9ECE8; --ink-2:#B0B8B4; --ink-3:#959E9A; --ink-4:#717A76;
    --accent:#93AAFF; --on-accent:#0B1020; --accent-wash:rgba(147,170,255,.11);
    --hi:#EBC24F; --hi-strong:#EBC24F; --hi-ink:#EBC24F; --hi-wash:rgba(235,194,79,.12);
    --bad:#F28B6E; --bad-wash:rgba(242,139,110,.1); --good:#5FCB99; --good-wash:rgba(95,203,153,.1);
    --stage:#060708; --stage-2:#0E1112; --stage-line:#33393B;
    --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 16px 40px -22px rgba(0,0,0,.85);
    --shadow-pop:0 28px 70px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06);
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --viz-1:#4a8eea; --viz-2:#e2774a; --viz-3:#3BB585; --viz-4:#B48CF0; --viz-5:#EBC24F; --viz-6:#8A9692;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1214; --bg-2:#0A0D0E; --panel:#161A1D; --field:#1B2023; --line:#2B3236; --line-2:#22282C;
  --ink:#E9ECE8; --ink-2:#B0B8B4; --ink-3:#959E9A; --ink-4:#717A76;
  --accent:#93AAFF; --on-accent:#0B1020; --accent-wash:rgba(147,170,255,.11);
  --hi:#EBC24F; --hi-strong:#EBC24F; --hi-ink:#EBC24F; --hi-wash:rgba(235,194,79,.12);
  --bad:#F28B6E; --bad-wash:rgba(242,139,110,.1); --good:#5FCB99; --good-wash:rgba(95,203,153,.1);
  --stage:#060708; --stage-2:#0E1112; --stage-line:#33393B;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 16px 40px -22px rgba(0,0,0,.85);
  --shadow-pop:0 28px 70px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --viz-1:#4a8eea; --viz-2:#e2774a; --viz-3:#3BB585; --viz-4:#B48CF0; --viz-5:#EBC24F; --viz-6:#8A9692;
  color-scheme:dark;
}

/* ── reset ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--bar-h) + 1rem)}
body{margin:0; background:var(--grain), var(--bg); color:var(--ink); font:400 15.5px/1.55 var(--f-ui); font-optical-sizing:auto; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100vh; display:flex; flex-direction:column; font-kerning:normal}
#main{flex:1 0 auto; outline:none}
h1,h2,h3,h4,h5,p,ol,ul,dl,dd,figure,fieldset,blockquote,pre{margin:0; padding:0}
ol,ul{list-style:none}
fieldset{border:0; min-width:0}
img,svg,canvas,video{display:block; max-width:100%}
a{color:var(--accent); text-underline-offset:.2em; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
button,input,select,textarea{font:inherit; color:inherit; letter-spacing:inherit}
button{cursor:pointer}
table{border-collapse:collapse}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
::selection{background:var(--hi-strong); color:#171A19}
::placeholder{color:var(--ink-4); opacity:1}
.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:var(--panel); padding:.6rem 1rem; z-index:100; text-decoration:none; border-radius:var(--r)}
.skip:focus{left:12px; top:8px}
.sr{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ── type ──────────────────────────────────────────────────────────── */
/* kicker above a heading: italic serif after a hairline, like a note in the margin */
/* a small italic label; used sparingly, never as a section kicker above every heading */
.eyebrow{display:block; font:italic 400 1.02rem/1.3 var(--f-serif); color:var(--ink-3); letter-spacing:0; text-transform:none}
/* form and field labels */
.lab{display:block; font:600 var(--t-xs)/1.3 var(--f-ui); letter-spacing:.005em; text-transform:none; color:var(--ink-2)}
.h1{font:340 clamp(2.7rem,6.6vw,5.6rem)/.98 var(--f-head); letter-spacing:-.022em; text-wrap:balance}
.h1 b,.h1 strong{font-weight:560}
.h1 em,.h2 em,.tool-title em{font-style:italic; font-weight:inherit}
.h2{font:380 clamp(1.9rem,3.7vw,2.9rem)/1.06 var(--f-head); letter-spacing:-.016em; text-wrap:balance}
.h3{font:650 var(--t-lg)/1.2 var(--f-ui); letter-spacing:-.008em}
.h4{font:650 var(--t-md)/1.25 var(--f-ui)}
.lede{font:400 clamp(1.08rem,1.45vw,1.28rem)/1.5 var(--f-serif); color:var(--ink-2); max-width:58ch; text-wrap:pretty}
.prose{font:400 1.08rem/1.65 var(--f-serif); color:var(--ink-2); max-width:66ch}
.prose > * + *{margin-top:.85em}
.prose b,.prose strong{color:var(--ink); font-weight:600}
.prose h2,.prose h3{color:var(--ink); margin-top:1.7em}
.prose h2{font:420 1.7rem/1.15 var(--f-head); letter-spacing:-.012em}
.prose h3{font:650 1.12rem/1.3 var(--f-ui)}
.prose ul{list-style:none}
.prose li{position:relative; padding-left:1.15rem}
.prose li + li{margin-top:.4em}
.prose li::before{content:""; position:absolute; left:.1rem; top:.66em; width:.34rem; height:.34rem; background:var(--accent); opacity:.75; transform:rotate(45deg)}
.prose code,.code-inline{font:500 .84em/1 var(--f-mono); background:var(--bg-2); padding:.14em .38em; border-radius:5px; color:var(--ink)}
.muted{color:var(--ink-3)}
.mono{font-family:var(--f-mono)}
.num{font-variant-numeric:tabular-nums}
.small{font-size:var(--t-sm)}
.tiny{font-size:var(--t-xs)}
.serif{font-family:var(--f-serif)}
.nowrap{white-space:nowrap}
.ellipsis{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.hint{font:400 .95rem/1.45 var(--f-serif); color:var(--ink-3)}
.hint b{color:var(--ink-2); font-weight:600}
kbd,.kbd{font:500 .72em/1 var(--f-mono); border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:.2em .42em; color:var(--ink-2); background:var(--field)}
/* margin note: a handwritten-feeling aside with a drawn arrow */
.note{font:italic 400 1rem/1.35 var(--f-serif); color:var(--ink-3)}

/* ── layout ────────────────────────────────────────────────────────── */
.wrap{width:100%; max-width:80rem; margin-inline:auto; padding-inline:var(--gut)}
.wrap-wide{width:100%; max-width:110rem; margin-inline:auto; padding-inline:var(--gut)}
.stack{display:flex; flex-direction:column; gap:var(--gap,1rem); min-width:0}
.stack-sm{--gap:.5rem} .stack-lg{--gap:1.6rem}
.row{display:flex; flex-wrap:wrap; align-items:center; gap:var(--gap,.5rem); min-width:0}
.row-nw{flex-wrap:nowrap}
.row-top{align-items:flex-start}
.row-end{justify-content:flex-end}
.row-between{justify-content:space-between}
.spacer{flex:1 1 auto}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gap,1rem)}
.split-wide{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:var(--gap,1rem)}
.split-side{display:grid; grid-template-columns:minmax(0,21rem) minmax(0,1fr); gap:var(--gap,1.2rem); align-items:start}
.grid-auto{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--min,16rem)),1fr)); gap:var(--gap,1rem)}
.sticky{position:sticky; top:calc(var(--bar-h) + 1rem)}
@media (max-width:56rem){ .split,.split-wide,.split-side{grid-template-columns:minmax(0,1fr)} .sticky{position:static} }

/* ── top bar ───────────────────────────────────────────────────────── */
.topbar{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:saturate(1.3) blur(12px); -webkit-backdrop-filter:saturate(1.3) blur(12px); border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent)}
.topbar-in{max-width:110rem; margin-inline:auto; padding-inline:var(--gut); height:var(--bar-h); display:flex; align-items:center; gap:1.6rem}
.brand{display:inline-flex; align-items:center; gap:.5rem; color:var(--ink); text-decoration:none; flex:none}
/* the mark: an emerald-cut speech bubble, ink for you, gold for SI (scripts/brand.py) */
.brand-mark{width:1.85rem; height:auto; flex:none; overflow:visible}
.brand-mark .bm-c{fill:var(--ink)}
.brand-mark .bm-t{fill:var(--hi-strong)}
.brand:hover .bm-t{fill:var(--hi)}
.brand-word{font:500 1.3rem/1 var(--f-head); letter-spacing:-.012em; white-space:nowrap}
.brand-word i{font-style:italic; font-weight:400}
.brand-tld{color:var(--hi); font-weight:500}
.topnav{display:flex; align-items:center; gap:.2rem; min-width:0}
.topnav > a,.nav-trigger{font:500 .92rem/1 var(--f-ui); color:var(--ink-2); text-decoration:none; padding:.6rem .75rem; border-radius:999px; white-space:nowrap; background:none; border:0; display:inline-flex; align-items:center; gap:.3rem}
.topnav > a:hover,.nav-trigger:hover,.nav-trigger[aria-expanded="true"]{color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent)}
.topnav > a[aria-current="page"],.nav-tools:has([aria-current="page"]) .nav-trigger{color:var(--ink); background:color-mix(in srgb, var(--ink) 7%, transparent)}
.nav-trigger svg{width:.85rem; height:.85rem; transition:transform .18s ease}
.nav-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-tools{position:relative}
.tools-menu{position:absolute; top:calc(100% + .6rem); left:-1rem; width:min(40rem, calc(100vw - 2rem)); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-pop); padding:.6rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.15rem; z-index:50}
.tools-menu[hidden]{display:none}
.tm-head{display:none}
.tools-menu.tm-split{width:min(48rem, calc(100vw - 2rem)); gap:.2rem .6rem}
.tm-col{display:flex; flex-direction:column; gap:.15rem; min-width:0}
.tm-sec{display:flex; align-items:baseline; gap:.5rem; padding:.55rem .7rem .3rem; font:italic 400 1.02rem/1.2 var(--f-head); color:var(--ink-2)}
.tm-sec small{font:500 var(--t-xs)/1 var(--f-ui); font-style:normal; color:var(--ink-3)}
.learn-menu{width:min(23rem, calc(100vw - 2rem)); grid-template-columns:minmax(0,1fr)}
.tm-item.tm-text{grid-template-columns:minmax(0,1fr); padding:.65rem .8rem}
.tm-item{display:grid; grid-template-columns:3.1rem minmax(0,1fr); gap:.75rem; align-items:center; padding:.6rem .7rem; border-radius:var(--r-lg); color:var(--ink); text-decoration:none}
.tm-item:hover,.tm-item:focus-visible{background:var(--bg-2)}
.tm-item[aria-current="page"]{background:var(--accent-wash)}
.tm-plate{width:3.1rem; height:3.1rem; border-radius:12px; background:var(--bg); border:1px solid var(--line-2); display:grid; place-items:center; overflow:hidden}
.tm-plate .plate-svg{width:118%; height:118%}
.tm-item b{display:block; font:650 .95rem/1.2 var(--f-ui)}
.tm-item small{display:block; font:400 .82rem/1.35 var(--f-ui); color:var(--ink-3); margin-top:.15rem}
.tm-foot{grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem 1rem; padding:.7rem .8rem .35rem; margin-top:.25rem; border-top:1px solid var(--line-2); font:400 .9rem/1.3 var(--f-serif); color:var(--ink-3)}
.tm-foot a{font:600 .85rem/1.3 var(--f-ui); text-decoration:none}
.topbar-end{margin-left:auto; display:flex; align-items:center; gap:.35rem}
.keychip{display:inline-flex; align-items:center; gap:.45rem; font:600 .84rem/1 var(--f-ui); color:var(--ink); text-decoration:none; border:1px solid var(--line); background:var(--panel); padding:.55rem .8rem; border-radius:999px; white-space:nowrap; transition:border-color .15s, box-shadow .15s}
.keychip:hover{border-color:var(--ink-3); box-shadow:var(--shadow)}
.keychip-dot{width:.5rem; height:.5rem; border-radius:50%; background:var(--hi-strong); box-shadow:0 0 0 3px var(--hi-wash)}
.keychip.on .keychip-dot{background:var(--good); box-shadow:0 0 0 3px var(--good-wash)}
.keychip[aria-current="page"]{border-color:var(--ink)}
.iconbtn{display:inline-grid; place-items:center; width:2.4rem; height:2.4rem; border:1px solid transparent; background:transparent; border-radius:999px; color:var(--ink-2); padding:0}
.iconbtn:hover{color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent)}
.iconbtn svg{width:1.15rem; height:1.15rem}
.navbtn{display:none}
.topnav > a.topnav-mobile{display:none}
@media (max-width:62rem){
  .navbtn{display:inline-grid}
  .topnav{position:fixed; inset:var(--bar-h) 0 auto 0; max-height:calc(100dvh - var(--bar-h)); overflow:auto; flex-direction:column; align-items:stretch; gap:0; background:var(--panel); border-bottom:1px solid var(--line); padding:.6rem var(--gut) 1.2rem; box-shadow:var(--shadow-pop); transform:translateY(-.5rem); opacity:0; visibility:hidden; transition:transform .18s ease, opacity .18s ease, visibility 0s linear .18s}
  .topnav.open{transform:none; opacity:1; visibility:visible; transition-delay:0s}
  .topnav > a{padding:.95rem .3rem; font-size:1rem; border-bottom:1px solid var(--line-2); border-radius:0}
  .topnav > a[aria-current="page"]{background:none; color:var(--accent)}
  .topnav > a.topnav-mobile{display:block; color:var(--accent)}
  .nav-trigger{display:none}
  .topnav .tools-menu[hidden]{display:grid !important}   /* in the phone sheet both lists are always open */
  html.nav-open{overflow:hidden}
  @media (prefers-reduced-motion:reduce){ .topnav{transition:none} }
  .navbtn .nb-close,.navbtn[aria-expanded="true"] .nb-open{display:none}
  .navbtn[aria-expanded="true"] .nb-close{display:block}
  .tools-menu,.tools-menu[hidden]{position:static; display:grid; width:auto; box-shadow:none; border:0; padding:0 0 .6rem; grid-template-columns:minmax(0,1fr); background:none; border-bottom:1px solid var(--line-2); border-radius:0}
  .tm-item{padding:.55rem .2rem}
  .tm-foot{display:flex; padding:.5rem .2rem; border:0; margin:0}
  .tm-foot .tm-tag,.tm-foot a[href="/settings/"]{display:none}
  .tm-sec{padding:.6rem .2rem .2rem}
  .tm-head{display:block; font:italic 400 1rem/1.3 var(--f-head); color:var(--ink-3); padding:.5rem .2rem .2rem}
  .learn-menu,.learn-menu[hidden]{width:auto}
  .tm-item.tm-text{padding:.6rem .2rem}
}
@media (max-width:30rem){ .keychip{padding:.5rem .6rem; gap:.35rem; font-size:.76rem} .brand-word{font-size:1.12rem} .topbar-in{gap:.6rem} .topbar-end{gap:.1rem} .iconbtn{width:2.2rem; height:2.2rem} }

/* ── footer ────────────────────────────────────────────────────────── */
/* ── the specimen drawer: one dark cabinet drawer at the foot of every page ── */
.sitefoot{--brass:#E2B53E; --d-ink:var(--stage-ink); --d-dim:var(--stage-dim); --d-line:var(--stage-line); margin-top:clamp(5rem,10vw,8rem); background:var(--stage); color:var(--d-ink); position:relative; border-top:1px solid color-mix(in srgb, var(--brass) 55%, transparent)}
.sitefoot::before{content:""; position:absolute; left:0; right:0; top:5px; height:1px; background:color-mix(in srgb, var(--brass) 22%, transparent)}
.l-app .sitefoot{margin-top:4rem}
.drawer{max-width:84rem; margin-inline:auto; padding:clamp(3.2rem,6vw,5.2rem) var(--gut) 1.6rem}
.drawer a{color:var(--d-dim); text-decoration:none}
.drawer a:hover{color:var(--d-ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em}
.drawer a:focus-visible{outline:2px solid var(--brass); outline-offset:3px; border-radius:3px}
.gem{margin:0; display:flex; flex-direction:column; align-items:center; gap:.8rem; min-width:0; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none}
.gem.held{cursor:grabbing}
.gem-art{margin:0; font:500 clamp(7.6px,1.12vw,14.5px)/1.16 var(--f-mono); letter-spacing:0; white-space:pre; color:var(--d-dim); max-width:100%; overflow:hidden}
.gem-art .t0,.mohs-art .t0{color:color-mix(in srgb, var(--d-dim) 55%, transparent)}
.gem-art .t1{color:var(--d-dim)}
.gem-art .t2{color:var(--d-ink)}
.gem-art .t3,.mohs-art .t3{color:var(--brass); text-shadow:0 0 .6em color-mix(in srgb, var(--brass) 55%, transparent)}
.gem-cap{display:flex; flex-direction:column; align-items:center; gap:.2rem; text-align:center}
.gem-read{font:400 .72rem/1.4 var(--f-mono); color:var(--d-dim); font-variant-numeric:tabular-nums; white-space:pre}
.gem-hint{font:italic 400 .9rem/1.3 var(--f-serif); color:var(--d-dim); opacity:.85}
/* the borehole log: depth, rock and what lies at that depth */
.bore-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.4rem 2rem; margin-bottom:1.2rem}
.bore-title{font:400 clamp(1.6rem,2.6vw,2.2rem)/1.1 var(--f-head); color:var(--d-ink); letter-spacing:-.01em}
.bore-sub{font:italic 400 1rem/1.4 var(--f-serif); color:var(--d-dim)}
.bore{border-top:1px solid var(--d-line)}
.bore-row{display:grid; grid-template-columns:5.6rem minmax(0,16rem) minmax(0,1fr); border-bottom:1px solid var(--d-line); min-height:5.6rem}
.bore-depth{font:400 .78rem/1 var(--f-mono); color:var(--d-dim); font-variant-numeric:tabular-nums; text-align:right; padding:1.15rem .9rem 0 0; border-right:1px dashed var(--d-line); white-space:nowrap}
.bore-rock{position:relative; overflow:hidden; border-right:1px solid var(--d-line); min-height:5.6rem}
.bore-rock pre{position:absolute; inset:0; margin:0; padding:.35rem .6rem; font:400 11px/1.25 var(--f-mono); white-space:pre; color:var(--d-dim); pointer-events:none}
.bore-row[data-rock="soil"] pre{color:color-mix(in srgb, var(--brass) 35%, var(--d-dim))}
.bore-row[data-rock="sand"] pre{color:color-mix(in srgb, var(--brass) 60%, var(--d-dim))}
.bore-row[data-rock="lime"] pre{color:color-mix(in srgb, var(--d-ink) 55%, transparent)}
.bore-row[data-rock="shale"] pre{color:color-mix(in srgb, var(--d-dim) 70%, transparent)}
.bore-row[data-rock="kimber"] pre{color:color-mix(in srgb, #6f9a94 70%, transparent)}
.bore-desc{padding:1.05rem 0 1.15rem 1.6rem; min-width:0}
.bore-h{font:400 1.4rem/1.2 var(--f-head); color:var(--d-ink); letter-spacing:-.01em}
.bore-h span{font:italic 400 1rem/1.3 var(--f-serif); color:var(--d-dim); margin-left:.5rem; letter-spacing:0}
.bore-links{display:flex; flex-wrap:wrap; gap:.25rem 1.4rem; margin-top:.55rem}
.bore-links a{font:500 .95rem/1.5 var(--f-ui)}
.bore-row:hover .bore-rock pre{filter:brightness(1.35)}
/* the deepest layer: the diamond sits in the rock that carried it up */
.bore-deep{grid-template-columns:5.6rem minmax(0,1fr)}
.bore-deep .bore-rock{grid-column:2; grid-row:1; border-right:0}
.bore-deep .bore-gem{grid-column:2; grid-row:1; position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:1.5rem clamp(1.5rem,4vw,3.5rem); align-items:center; padding:clamp(1.6rem,3.5vw,2.6rem) clamp(1rem,3vw,2.4rem)}
.bore-gem .gem{padding:1rem .5rem; background:radial-gradient(closest-side, var(--stage) 72%, transparent)}
.bore-note{display:flex; flex-direction:column; gap:.9rem; padding:1.3rem 1.4rem; background:color-mix(in srgb, var(--stage) 88%, transparent); border:1px solid var(--d-line); border-radius:var(--r-lg)}
.drawer-note{font:300 clamp(1.25rem,1.9vw,1.6rem)/1.32 var(--f-head); color:var(--d-ink); letter-spacing:-.01em; text-wrap:pretty}
.drawer-write{font:400 1.02rem/1.5 var(--f-serif); color:var(--d-dim)}
.drawer .drawer-write a{color:var(--brass); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; white-space:nowrap}
.drawer .drawer-write a:hover{color:var(--d-ink)}

.mohs{margin:clamp(2.8rem,5vw,4rem) 0 0; min-width:0}
.mohs-art{margin:0; font:400 clamp(9px,.95vw,13px)/1.55 var(--f-mono); white-space:pre; color:var(--d-dim); overflow:hidden}
.mohs-art .bar{color:var(--d-ink); opacity:.8}
.mohs figcaption{margin-top:.8rem; font:italic 400 .98rem/1.45 var(--f-serif); color:var(--d-dim)}

.drawer-base{display:flex; flex-wrap:wrap; gap:.5rem 2rem; margin-top:2.4rem; padding-top:1.2rem; border-top:1px solid var(--d-line); font:400 .84rem/1.45 var(--f-ui); color:var(--d-dim)}
.drawer-base .drawer-top{margin-left:auto}
.foot-brand{display:inline-flex; align-items:center; gap:.5rem}
.foot-brand .brand-mark{width:1.35rem}
.foot-brand .bm-c{fill:var(--d-ink)}
.foot-brand .bm-t{fill:var(--brass)}
.drawer-base .drawer-top::after{content:" ↑"}

@media (max-width:60rem){ .bore-deep .bore-gem{grid-template-columns:minmax(0,1fr)} }
@media (max-width:44rem){ .bore-row{grid-template-columns:3.3rem 3.6rem minmax(0,1fr)} .bore-depth{font-size:.68rem; padding:1.1rem .45rem 0 0} .bore-desc{padding:.95rem 0 1rem .9rem} .bore-h{font-size:1.2rem} .bore-h span{display:block; margin:.1rem 0 0} .bore-deep{grid-template-columns:3.3rem minmax(0,1fr)} .bore-deep .bore-gem{padding:1.2rem .6rem} .drawer-base .drawer-top{margin-left:0} }

/* ── tool page frame ───────────────────────────────────────────────── */
.toolhead{max-width:110rem; margin-inline:auto; padding:clamp(1.8rem,4vw,3rem) var(--gut) 1.4rem; display:flex; flex-wrap:wrap; align-items:flex-end; gap:1.2rem 2rem}
.toolhead-text{min-width:0; flex:1 1 30rem; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:1.3rem; align-items:center}
.toolhead-text > :not(.toolplate){grid-column:2}
.toolplate{grid-column:1; grid-row:1 / span 3; width:clamp(4.6rem,8vw,6.4rem); aspect-ratio:1; margin:0; border-radius:50%; background:radial-gradient(circle at 50% 42%, var(--panel), var(--bg-2) 72%); border:1px solid var(--line-2); display:grid; place-items:center; overflow:hidden; align-self:start}
.toolplate .plate-svg{width:112%; height:112%}
.tool-title{font:360 clamp(2.3rem,4.6vw,3.5rem)/1 var(--f-head); letter-spacing:-.02em; margin-top:.35rem}
.tool-title span{font-style:italic; font-weight:340}
.tool-lede{font:400 clamp(1.02rem,1.25vw,1.14rem)/1.5 var(--f-serif); color:var(--ink-2); max-width:62ch; margin-top:.6rem; text-wrap:pretty}
.toolhead-actions{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center}
.workspace{max-width:110rem; margin-inline:auto; padding:0 var(--gut)}
.toolinfo{max-width:110rem; margin:clamp(3.5rem,8vw,6rem) auto 0; padding:2.4rem var(--gut) 0; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,22rem) minmax(0,1fr); gap:1.5rem var(--gut)}
.toolinfo > header .h2{font-size:clamp(1.7rem,2.8vw,2.3rem)}
.toolinfo > header p{font:400 1.05rem/1.5 var(--f-serif); color:var(--ink-2); margin-top:.8rem; max-width:34ch}
@media (max-width:56rem){ .toolinfo{grid-template-columns:minmax(0,1fr)} }
/* text keeps its reading measure; infographics in a How it works use the whole column */
.toolinfo .prose{max-width:none} .toolinfo .prose > :not(.viz){max-width:66ch}
@media (max-width:36rem){ .toolhead-text{grid-template-columns:minmax(0,1fr)} .toolhead-text > :not(.toolplate){grid-column:1} .toolplate{grid-row:auto; width:4.2rem; margin-bottom:.4rem} }

/* ── mineral plates (src/partials/plate-*.html, drawn by scripts/gen-plates.py) ── */
.plate-svg .pl-shadow{fill:var(--ink); opacity:.07}
.plate-svg .pl-f1{fill:color-mix(in srgb, var(--tint) 12%, var(--panel))}
.plate-svg .pl-f2{fill:color-mix(in srgb, var(--tint) 30%, var(--panel))}
.plate-svg .pl-f3{fill:color-mix(in srgb, var(--tint) 52%, var(--panel))}
.plate-svg .pl-cavity{fill:color-mix(in srgb, var(--tint) 55%, var(--ink) 45%)}
.plate-svg .pl-hatch{opacity:.55}
.plate-svg .pl-hatchline{stroke:var(--ink); stroke-width:.6; opacity:.5}
.plate-svg .pl-edge{stroke:var(--ink); stroke-width:1.3; stroke-linejoin:round; stroke-linecap:round; fill:none}
.plate-svg polygon.pl-edge:not(.pl-nofill){fill:none}
.plate-svg .pl-nofill{fill:none}
.plate-svg .pl-hidden{stroke:var(--ink-3); stroke-width:.8; stroke-dasharray:3 3; opacity:.55}
.plate-svg .pl-note line{stroke:var(--ink); stroke-width:1.2; stroke-linecap:round}
.plate-svg .pl-note .pl-ghost{opacity:.35}
.plate-svg .pl-label{fill:var(--panel); stroke:var(--ink); stroke-width:1}
figure.plate{margin:0; display:flex; flex-direction:column; align-items:center; gap:.5rem}
figure.plate figcaption{font:italic 400 .95rem/1.3 var(--f-serif); color:var(--ink-3); text-align:center}
figure.plate figcaption b{font:600 .78rem/1.2 var(--f-ui); font-style:normal; color:var(--ink-2); display:block; margin-bottom:.25rem}

/* ── panels ────────────────────────────────────────────────────────── */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); min-width:0; display:flex; flex-direction:column}
.panel.raised{box-shadow:var(--shadow)}
.panel-head{display:flex; align-items:center; gap:.6rem; padding:.8rem 1rem; border-bottom:1px solid var(--line-2); min-height:3.1rem; flex-wrap:wrap}
.panel-head .lab{margin-right:auto}
.panel-title{font:650 1rem/1.25 var(--f-ui); margin-right:auto}
.panel-body{padding:1rem; min-width:0; display:flex; flex-direction:column; gap:.85rem}
.panel-body.flush{padding:0}
.panel-foot{display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem; border-top:1px solid var(--line-2); flex-wrap:wrap}
.well{background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r); padding:.85rem 1rem}
.stage{background:var(--stage); color:var(--stage-ink); border-radius:var(--r-lg)}
.divider{height:1px; background:var(--line-2); border:0; margin:0}

/* ── buttons ───────────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font:600 .9rem/1 var(--f-ui); letter-spacing:.003em; padding:.68rem 1.05rem; min-height:2.5rem; border:1px solid var(--line); background:var(--field); color:var(--ink); border-radius:10px; text-decoration:none; white-space:nowrap; transition:background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s; user-select:none}
.btn:hover:not(:disabled){border-color:var(--ink-3); box-shadow:var(--shadow)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn.primary{background:var(--ink); border-color:var(--ink); color:var(--panel); box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 6px 16px -8px rgba(20,26,23,.5)}
.btn.primary:hover:not(:disabled){background:color-mix(in srgb, var(--ink) 86%, var(--accent)); border-color:color-mix(in srgb, var(--ink) 86%, var(--accent))}
.btn.accent{background:var(--accent); border-color:var(--accent); color:var(--on-accent); box-shadow:0 6px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent)}
.btn.accent:hover:not(:disabled){background:color-mix(in srgb, var(--accent) 88%, var(--ink)); border-color:color-mix(in srgb, var(--accent) 88%, var(--ink))}
.btn.quiet{border-color:var(--line); color:var(--ink-2); background:var(--field)}
.btn.quiet:hover:not(:disabled){color:var(--ink)}
.btn.ghost{border-color:transparent; color:var(--ink-2); background:transparent}
.btn.ghost:hover:not(:disabled){background:color-mix(in srgb, var(--ink) 6%, transparent); color:var(--ink); box-shadow:none}
.btn.danger:hover:not(:disabled){background:var(--bad); border-color:var(--bad); color:#fff}
.btn.sm{font-size:.82rem; padding:.45rem .7rem; min-height:2rem; gap:.35rem; border-radius:8px}
.btn.lg{font-size:1rem; padding:.9rem 1.35rem; min-height:3rem; border-radius:12px}
.btn.icon{padding:0; width:2.5rem}
.btn.sm.icon{width:2rem}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn svg{width:1em; height:1em; flex:none}
.btn .sub{font-weight:400; opacity:.7}
.btn.busy{position:relative; color:transparent !important}
.btn.busy::after{content:""; position:absolute; width:1rem; height:1rem; border:2px solid currentColor; border-color:var(--panel); border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite}
.btn.quiet.busy::after,.btn.ghost.busy::after,.btn:not(.primary):not(.accent).busy::after{border-color:var(--ink); border-right-color:transparent}
.btns{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center}
.linkbtn{background:none; border:0; padding:0; color:var(--accent); text-decoration:underline; text-underline-offset:.2em; font:inherit; cursor:pointer}

/* ── forms ─────────────────────────────────────────────────────────── */
.field{display:flex; flex-direction:column; gap:.4rem; min-width:0}
.field > .lab{display:flex; align-items:center; gap:.5rem}
.field > .lab .spacer{flex:1}
.input,.select,.textarea{width:100%; background:var(--field); border:1px solid var(--line); border-radius:10px; padding:.62rem .8rem; font:400 .92rem/1.45 var(--f-ui); color:var(--ink); min-height:2.5rem; transition:border-color .15s, box-shadow .15s}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ink-4)}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-wash)}
.input.mono{font-family:var(--f-mono); font-size:.82rem}
.textarea{resize:vertical; min-height:7rem; font:400 .86rem/1.65 var(--f-mono); padding:.8rem .9rem; tab-size:2; border-radius:12px}
.textarea.prose-in{font:400 1rem/1.5 var(--f-ui)}
.textarea.tall{min-height:16rem}
.textarea.short{min-height:4.2rem}
.select{appearance:none; -webkit-appearance:none; padding-right:2.1rem; cursor:pointer; font-family:var(--f-ui); font-size:.9rem;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - .95rem) 52%, calc(100% - .65rem) 52%; background-size:.3rem .3rem; background-repeat:no-repeat}
.input.sm,.select.sm{min-height:2rem; padding-block:.3rem; font-size:.84rem; border-radius:8px}
.field-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr)); gap:.8rem}
.check{display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; color:var(--ink-2); cursor:pointer; user-select:none}
.check{min-height:1.5rem}
.check input{width:1.15rem; height:1.15rem; accent-color:var(--ink); margin:0}
.switch{position:relative; display:inline-flex; align-items:center; gap:.55rem; min-height:1.5rem; cursor:pointer; font-size:var(--t-sm); color:var(--ink-2); user-select:none}
.switch input{appearance:none; -webkit-appearance:none; flex:none; width:2.5rem; height:1.5rem; border-radius:999px; background:var(--line); position:relative; margin:0; cursor:pointer; transition:background .15s}
.switch input::after{content:""; position:absolute; top:.2rem; left:.2rem; width:1.1rem; height:1.1rem; border-radius:50%; background:var(--field); transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.25)}
.switch input:checked{background:var(--accent)}
.switch input:checked::after{transform:translateX(1rem)}
input[type=range]{accent-color:var(--accent); width:100%}

/* segmented control: <div class="seg" role="group"><button aria-pressed="true">A</button>… */
.seg{display:inline-flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:11px; background:var(--bg-2); flex:none}
.seg button{font:600 .82rem/1 var(--f-ui); letter-spacing:0; text-transform:none; padding:.5rem .75rem; background:transparent; border:0; border-radius:8px; color:var(--ink-2); white-space:nowrap; transition:background .15s, color .15s}
.seg button + button{border-left:0}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--panel); color:var(--ink); box-shadow:0 1px 2px rgba(20,26,23,.12), 0 0 0 1px var(--line-2)}

/* tabs: <div class="tabs" role="tablist"><button role="tab" aria-selected="true">… */
.tabs{display:flex; gap:.4rem; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs [role=tab]{font:600 .9rem/1 var(--f-ui); letter-spacing:0; padding:.8rem .5rem .75rem; background:none; border:0; border-bottom:2px solid transparent; color:var(--ink-3); white-space:nowrap; margin-bottom:-1px; display:inline-flex; gap:.45rem; align-items:center}
.tabs [role=tab]:hover{color:var(--ink)}
.tabs [role=tab][aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}
.tabs .count{font:600 .7rem/1 var(--f-ui); color:var(--ink-3); background:var(--bg-2); border-radius:999px; padding:.2rem .45rem}

/* ── badges, chips, status ─────────────────────────────────────────── */
.badge{display:inline-flex; align-items:center; gap:.38rem; font:650 .76rem/1 var(--f-ui); letter-spacing:.005em; text-transform:none; color:var(--ink-3); white-space:nowrap}
.badge::before{content:""; width:.56rem; height:.56rem; transform:rotate(45deg); border:1.5px solid currentColor; flex:none}
.badge.pass{color:var(--good)} .badge.pass::before{background:currentColor}
.badge.fail{color:var(--bad)}
.badge.warn{color:var(--hi-ink)} .badge.warn::before{background:var(--hi-wash)}
.badge.info{color:var(--accent)}
.badge.na::before{transform:none; height:0; border-width:1.5px 0 0 0}
.badge.run{color:var(--hi-ink)} .badge.run::before{background:currentColor; animation:pulse 1s ease-in-out infinite}
.badge.plain::before{display:none}
.tag{display:inline-flex; align-items:center; gap:.35rem; font:600 .74rem/1 var(--f-ui); letter-spacing:.005em; padding:.34rem .6rem; border:1px solid var(--line); border-radius:999px; color:var(--ink-2); background:var(--field); white-space:nowrap; max-width:100%}
.tag.warm{border-color:var(--hi); background:var(--hi-wash); color:var(--ink)}
.tag.blue{border-color:color-mix(in srgb, var(--accent) 40%, transparent); background:var(--accent-wash); color:var(--ink)}
.tag.good{border-color:color-mix(in srgb, var(--good) 40%, transparent); background:var(--good-wash); color:var(--ink)}
.tag.bad{border-color:color-mix(in srgb, var(--bad) 40%, transparent); background:var(--bad-wash); color:var(--ink)}
.tag button{background:none; border:0; padding:0 0 0 .15rem; color:var(--ink-3); font-size:.9rem; line-height:1}
.tag button:hover{color:var(--bad)}
.pill{display:inline-flex; align-items:center; gap:.4rem; font:600 .8rem/1 var(--f-ui); padding:.42rem .7rem; border-radius:999px; border:1px solid var(--line); background:var(--field); color:var(--ink); white-space:nowrap}
.dot{width:.5rem; height:.5rem; border-radius:50%; background:var(--ink-4); display:inline-block; flex:none}
.dot.good{background:var(--good)} .dot.bad{background:var(--bad)} .dot.hi{background:var(--hi)} .dot.accent{background:var(--accent)}
.pct{font:600 var(--t-sm)/1 var(--f-mono); font-variant-numeric:tabular-nums}
.pct.good{color:var(--good)} .pct.bad{color:var(--bad)} .pct.mid{color:var(--hi-ink)}

/* callouts */
.callout{display:flex; gap:.75rem; align-items:flex-start; border:1px solid var(--line); border-left:3px solid var(--ink-3); background:var(--panel); border-radius:var(--r); padding:.85rem 1rem; font:400 .92rem/1.5 var(--f-ui); color:var(--ink-2)}
.callout b{color:var(--ink); font-weight:600}
.callout.info{border-left-color:var(--accent); background:linear-gradient(var(--accent-wash),var(--accent-wash)),var(--panel)}
.callout.warn{border-left-color:var(--hi); background:linear-gradient(var(--hi-wash),var(--hi-wash)),var(--panel)}
.callout.bad{border-left-color:var(--bad); background:linear-gradient(var(--bad-wash),var(--bad-wash)),var(--panel)}
.callout.good{border-left-color:var(--good); background:linear-gradient(var(--good-wash),var(--good-wash)),var(--panel)}
.callout .btns{margin-top:.55rem}
.callout > :first-child{flex:1; min-width:0}
.empty{border:1px dashed var(--line); border-radius:var(--r-lg); padding:2rem 1.4rem; text-align:center; color:var(--ink-3); font:400 1rem/1.45 var(--f-serif); display:flex; flex-direction:column; align-items:center; gap:.7rem}
.empty b{display:block; font:420 1.35rem/1.25 var(--f-head); color:var(--ink)}
.empty .btns{justify-content:center}

/* meter: <div class="meter"><i style="--v:.62"></i></div> */
.meter{height:.42rem; background:var(--bg-2); border-radius:999px; overflow:hidden; min-width:3rem}
.meter i{display:block; height:100%; width:calc(var(--v,0) * 100%); background:var(--accent); border-radius:inherit; transition:width .3s ease}
.meter.good i{background:var(--good)} .meter.bad i{background:var(--bad)} .meter.hi i{background:var(--hi)} .meter.accent i{background:var(--accent)}
.meter.thin{height:.25rem}
.spinner{width:1rem; height:1rem; border:2px solid var(--line); border-top-color:var(--ink); border-radius:50%; animation:spin .7s linear infinite; display:inline-block; flex:none}
.skeleton{background:linear-gradient(90deg,var(--bg-2),var(--line-2),var(--bg-2)); background-size:200% 100%; animation:shimmer 1.2s linear infinite; border-radius:var(--r); min-height:1rem}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.35}}
@keyframes shimmer{to{background-position:-200% 0}}

/* ── data ──────────────────────────────────────────────────────────── */
.table-wrap{overflow:auto; max-width:100%; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel)}
.table{width:100%; font:400 var(--t-sm)/1.35 var(--f-ui)}
.table th{font:600 .78rem/1.25 var(--f-ui); letter-spacing:.005em; text-transform:none; color:var(--ink-3); text-align:left; padding:.65rem .8rem; border-bottom:1px solid var(--line); background:var(--panel); white-space:nowrap}
.table thead th{position:sticky; top:0; z-index:1}
.table td{padding:.6rem .8rem; border-bottom:1px solid var(--line-2); vertical-align:top}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:color-mix(in srgb, var(--bg-2) 45%, transparent)}
.table .r{text-align:right}
.table td.num{text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:.8rem; white-space:nowrap}
.table th.num{text-align:right}
.table th button{all:unset; cursor:pointer; display:inline-flex; gap:.3rem; align-items:center}
.table th button:hover{color:var(--ink)}
.table th[aria-sort] button::after{content:"↓"; font-size:.8em}
.table th[aria-sort="ascending"] button::after{content:"↑"}
.table.compact td{padding:.38rem .6rem}
.table tr.sel td{background:var(--accent-wash)}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr)); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); overflow:hidden}
.stat{padding:.85rem 1rem; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); margin:0 -1px -1px 0; min-width:0}
.stat b{display:block; font:400 1.95rem/1 var(--f-head); font-variant-numeric:lining-nums tabular-nums; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stat span{display:block; font:600 .78rem/1.3 var(--f-ui); letter-spacing:0; text-transform:none; color:var(--ink-3); margin-top:.45rem}
.stat small{display:block; font:400 .78rem/1.35 var(--f-ui); color:var(--ink-3); margin-top:.2rem}
.kv{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.35rem 1rem; font-size:var(--t-sm)}
.kv dt{font:600 .8rem/1.6 var(--f-ui); color:var(--ink-3)}
.kv dd{min-width:0; overflow-wrap:anywhere}
.code{font:400 .82rem/1.65 var(--f-mono); background:var(--field); border:1px solid var(--line-2); border-radius:10px; padding:.75rem .85rem; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink); max-height:28rem; overflow:auto}
.out{font:400 .95rem/1.55 var(--f-ui); white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink)}
.out.mono{font:400 .82rem/1.6 var(--f-mono)}
.out .cursor{display:inline-block; width:.5em; height:1em; background:var(--ink); vertical-align:text-bottom; animation:pulse 1s step-end infinite}
.diff-ins{background:var(--good-wash); color:var(--ink); text-decoration:none; box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--good) 55%, transparent)}
.diff-del{background:var(--bad-wash); color:var(--ink-2); text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--bad) 70%, transparent)}
mark,.mark{background:var(--hi-wash); color:inherit; box-shadow:inset 0 -2px 0 var(--hi); padding:0 .1em}
.var{font:500 .9em/1 var(--f-mono); color:var(--accent); background:var(--accent-wash); border-radius:4px; padding:.08em .28em}

/* model pill: <span class="mpill" data-p="anthropic"><i></i>claude-haiku-5-5</span> */
.mpill{display:inline-flex; align-items:center; gap:.45rem; font:600 .84rem/1.2 var(--f-ui); color:var(--ink); min-width:0; max-width:100%}
.mpill i{width:.62rem; height:.62rem; flex:none; border-radius:2px; transform:rotate(45deg); background:var(--ink-4)}
.mpill span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
[data-p="anthropic"] i{background:#C96B4A} [data-p="openai"] i{background:#2E8C6E} [data-p="google"] i{background:#3B78E7}
[data-p="openrouter"] i{background:#6A5ACD} [data-p="mistral"] i{background:#E8862E} [data-p="deepseek"] i{background:#4466CC}
[data-p="xai"] i{background:var(--ink)} [data-p="groq"] i{background:#D9472B} [data-p="custom"] i{background:var(--ink-3)} [data-p="mock"] i{background:var(--hi)}

/* ── overlays ──────────────────────────────────────────────────────── */
dialog.modal{border:1px solid var(--line); border-radius:var(--r-xl); background:var(--panel); color:var(--ink); padding:0; width:min(40rem, calc(100vw - 2rem)); max-height:calc(100vh - 3rem); box-shadow:var(--shadow-pop); display:flex; flex-direction:column}
dialog.modal:not([open]){display:none}
dialog.modal.wide{width:min(64rem, calc(100vw - 2rem))}
dialog.modal::backdrop{background:rgba(14,18,16,.38); backdrop-filter:blur(3px)}
.modal-head{display:flex; align-items:center; gap:.7rem; padding:1rem 1.2rem; border-bottom:1px solid var(--line-2)}
.modal-head h2{font:420 1.4rem/1.2 var(--f-head); letter-spacing:-.01em; margin-right:auto}
.modal-body{padding:1.1rem 1.2rem; overflow:auto; display:flex; flex-direction:column; gap:.9rem; min-height:0}
.modal-foot{display:flex; justify-content:flex-end; flex-wrap:wrap; gap:.5rem; padding:.9rem 1.2rem; border-top:1px solid var(--line-2)}
.menu{position:absolute; z-index:60; min-width:12rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-pop); padding:.3rem; display:flex; flex-direction:column}
.menu button,.menu a{all:unset; box-sizing:border-box; display:flex; align-items:center; gap:.6rem; padding:.6rem .7rem; border-radius:var(--r); font:500 .9rem/1.25 var(--f-ui); color:var(--ink); cursor:pointer}
.menu button:hover,.menu a:hover,.menu button:focus-visible{background:var(--bg-2)}
.menu .sep{height:1px; background:var(--line-2); margin:.3rem 0}
.menu .danger{color:var(--bad)}
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%); background:var(--ink); color:var(--panel); font:500 .8rem/1.4 var(--f-ui); padding:.45rem .6rem; border-radius:var(--r); white-space:nowrap; z-index:70; pointer-events:none; max-width:22rem; white-space:normal; width:max-content}
.toasts{position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 1rem); transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:.4rem; width:min(92vw,28rem); pointer-events:none}
.toast{background:var(--ink); color:var(--panel); font:500 .92rem/1.4 var(--f-ui); padding:.8rem 1rem; border-radius:12px; box-shadow:var(--shadow-pop); animation:rise .2s ease-out; pointer-events:auto; display:flex; gap:.8rem; align-items:center}
.toast.bad{background:var(--bad); color:#fff}
.toast.good{background:var(--good); color:#fff}
.toast button{margin-left:auto; background:none; border:1px solid currentColor; color:inherit; font:inherit; font-size:.8rem; font-weight:600; padding:.3rem .55rem; border-radius:6px}
@keyframes rise{from{opacity:0; transform:translateY(6px)}}

/* ── key gate shown on tools that need a model ─────────────────────── */
.keygate{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.9rem 1rem; align-items:start; padding:1rem; border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(135deg, var(--accent-wash), transparent 60%), var(--panel)}
.keygate svg{width:2.2rem; height:2.2rem; color:var(--accent)}
.keygate h3{font:420 1.3rem/1.25 var(--f-head)}
.keychip[hidden]{display:none}
.keygate-alt{margin-top:.9rem; padding-top:.8rem; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:.5rem}
.keygate-alt p{font:400 .95rem/1.45 var(--f-serif); color:var(--ink-2)}
.keygate p{font:400 .98rem/1.45 var(--f-serif); color:var(--ink-2); margin-top:.25rem}

/* ── motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* ── shared widget styles (core/ui.js) ─────────────────────────────── */
.modelpick{justify-content:flex-start; gap:.6rem; max-width:100%; font-family:var(--f-ui)}
.modelpick > svg{margin-left:auto; color:var(--ink-3)}
.modelpick .mpill{max-width:16rem}
.mp-dialog{width:min(44rem, calc(100vw - 2rem))}
.mp-list{display:flex; flex-direction:column; gap:1rem; max-height:min(56vh,34rem); overflow:auto; padding-right:.2rem}
.mp-group{display:flex; flex-direction:column; flex-shrink:0; border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden}
.mp-group.off{opacity:.62}
.mp-ghead{display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.55rem .75rem; background:var(--bg-2); border-bottom:1px solid var(--line-2)}
.mp-ghead b{font-weight:650}
.mp-row{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.7rem; align-items:center; padding:.55rem .75rem; border-top:1px solid var(--line-2); cursor:pointer}
.mp-row:first-of-type{border-top:0}
.mp-row:hover{background:var(--bg-2)}
.mp-row.on{background:var(--accent-wash)}
.mp-row input{accent-color:var(--ink); margin:0}
.mp-name{display:flex; flex-direction:column; min-width:0}
.mp-name b{font:600 var(--t-sm)/1.25 var(--f-ui)}
.mp-name small{font:400 .72rem/1.3 var(--f-mono); color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mp-meta{display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.mp-add{all:unset; cursor:pointer; padding:.65rem .8rem; border-top:1px dashed var(--line); font:600 .84rem/1.2 var(--f-ui); color:var(--accent); display:flex; align-items:center; gap:.3rem}
.mp-add:hover{background:var(--accent-wash)}
.mp-add svg{width:.9rem; height:.9rem}
@media (max-width:36rem){ .mp-row{grid-template-columns:auto minmax(0,1fr)} .mp-meta{grid-column:2; justify-content:flex-start} }
.runmeta{display:inline-flex; flex-wrap:wrap; align-items:center; gap:.35rem .75rem; font:400 .76rem/1.3 var(--f-mono); color:var(--ink-3); font-variant-numeric:tabular-nums}
.lib-pick{display:flex; flex-direction:column; gap:.4rem; max-height:min(56vh,32rem); overflow:auto}
.lib-pick-row{all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:.2rem; padding:.7rem .8rem; border:1px solid var(--line-2); border-radius:var(--r); background:var(--field)}
.lib-pick-row:hover,.lib-pick-row:focus-visible{border-color:var(--ink)}
.lib-pick-row b{font:600 var(--t-sm)/1.25 var(--f-ui)}
.lib-pick-snip{font:400 var(--t-xs)/1.45 var(--f-mono); color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-wrap}
canvas.nogl{background:radial-gradient(circle at 40% 35%, #3a4f7a 0 18%, #1b1f26 19% 40%, #7a6a2e 41% 55%, #101214 56%)}

/* quick switcher (core/palette.js) */
dialog.pal{width:min(36rem, calc(100vw - 2rem)); margin-top:12vh; max-height:70vh}
.pal-head{display:flex; align-items:center; gap:.6rem; padding:.7rem; border-bottom:1px solid var(--line-2)}
.pal-input{border:0; background:transparent; font-size:1rem; min-height:2.4rem; box-shadow:none !important}
.pal-list{overflow:auto; padding:.35rem; display:flex; flex-direction:column; gap:1px; min-height:0}
.pal-list li{display:grid; grid-template-columns:4.2rem minmax(0,1fr); grid-template-rows:auto auto; column-gap:.6rem; padding:.55rem .65rem; border-radius:var(--r); cursor:pointer}
.pal-list li.on{background:var(--bg-2)}
.pal-kind{grid-row:1 / span 2; font:600 .74rem/1.7 var(--f-ui); color:var(--ink-3)}
.pal-name{font:600 var(--t-sm)/1.3 var(--f-ui); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pal-sub{font:400 var(--t-xs)/1.35 var(--f-ui); color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pal-empty{padding:1rem; color:var(--ink-3); font:400 var(--t-sm)/1.4 var(--f-serif)}
.pal-foot{display:flex; gap:1.2rem; padding:.6rem .9rem; border-top:1px solid var(--line-2); font:500 .78rem/1.4 var(--f-ui); color:var(--ink-3)}
.pal-foot kbd{margin-right:.2rem}

/* "Planned for Pro" pointer used inside tools */
.pro-hint{display:flex; align-items:center; gap:.6rem 1rem; flex-wrap:wrap; padding:.9rem 1.1rem; border:1px dashed var(--line); border-radius:var(--r-lg); background:linear-gradient(90deg, var(--accent-wash), transparent 70%); margin-top:1rem}
.pro-hint p{flex:1 1 22rem; font:400 .95rem/1.4 var(--f-serif); color:var(--ink-2); min-width:0}
.pro-hint p b{color:var(--ink); font-weight:600}

.mp-others > summary{cursor:pointer; padding:.55rem .2rem; font:600 .84rem/1.3 var(--f-ui); color:var(--ink-2); list-style:none}
.mp-others > summary::-webkit-details-marker{display:none}
.mp-others > summary::before{content:"+ "; color:var(--ink-3)}
.mp-others[open] > summary::before{content:"– "}
.mp-others > .mp-group + .mp-group{margin-top:1rem}

/* ── plain words: a word with a definition, and a panel for people new to AI ── */
.term{border-bottom:1px dotted color-mix(in srgb, currentColor 70%, transparent); cursor:help; text-decoration:none}
.term:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}
.term-pop{position:absolute; z-index:60; max-width:min(22rem, calc(100vw - 2rem)); padding:.8rem .95rem .85rem; background:var(--panel); color:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-pop); font:400 .98rem/1.5 var(--f-serif)}
.term-pop b{display:block; font:400 1.15rem/1.2 var(--f-head); color:var(--ink); margin-bottom:.3rem}
.term-pop a{display:inline-block; margin-top:.45rem; font:600 .84rem/1.3 var(--f-ui)}
.plain{max-width:110rem; margin:0 auto 1.2rem; padding:0 var(--gut)}
.plain > summary{display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; list-style:none; font:600 .92rem/1.3 var(--f-ui); color:var(--accent); padding:.45rem 0}
.plain > summary::-webkit-details-marker{display:none}
.plain > summary::before{content:"?"; display:inline-grid; place-items:center; width:1.35rem; height:1.35rem; border-radius:50%; border:1.5px solid currentColor; font:700 .78rem/1 var(--f-ui)}
.plain[open] > summary{color:var(--ink)}
.plain-body{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:1rem 2.5rem; margin-top:.6rem; padding:1.2rem 1.4rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg)}
.plain-body h2{font:400 1.35rem/1.2 var(--f-head); color:var(--ink); margin-bottom:.4rem}
.plain-body h3{font:600 .86rem/1.3 var(--f-ui); color:var(--ink-2); margin:.9rem 0 .3rem}
.plain-body p,.plain-body li{font:400 1.02rem/1.5 var(--f-serif); color:var(--ink-2)}
.plain-body ol{counter-reset:pl; display:flex; flex-direction:column; gap:.55rem}
.plain-body ol li{counter-increment:pl; position:relative; padding-left:2rem}
.plain-body ol li::before{content:counter(pl); position:absolute; left:0; top:.05rem; width:1.4rem; height:1.4rem; border-radius:50%; background:var(--bg-2); color:var(--ink); display:grid; place-items:center; font:600 .78rem/1 var(--f-ui)}
@media (max-width:52rem){ .plain-body{grid-template-columns:minmax(0,1fr)} }

/* ── charts and infographics (scripts/charts.mjs renders them at build time) ── */
.viz{margin:2rem 0; padding:1.2rem 1.3rem 1rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); max-width:100%}
.prose .viz{max-width:none}
.viz-title{font:400 1.2rem/1.3 var(--f-head); color:var(--ink); margin-bottom:.9rem; letter-spacing:-.005em}
.viz-note{margin-top:.9rem; padding-top:.7rem; border-top:1px solid var(--line-2); font:italic 400 .9rem/1.45 var(--f-serif); color:var(--ink-3)}
.prose .viz-note{margin-top:.9rem}
.viz .s1{--c:var(--viz-1)} .viz .s2{--c:var(--viz-2)} .viz .s3{--c:var(--viz-3)} .viz .s4{--c:var(--viz-4)} .viz .s5{--c:var(--viz-5)} .viz .s6{--c:var(--viz-6)}
.vz-bars{display:flex; flex-direction:column; gap:.55rem; list-style:none; margin:0; padding:0}
.prose .vz-bars li{padding:0}
.prose .viz li{margin:0}   /* chart lists space themselves with gap; the article list margin would push every second item down */ .prose .viz li::before{display:none}
.vz-row{display:grid; grid-template-columns:minmax(0,12rem) minmax(0,1fr) minmax(4.5rem,auto); gap:.8rem; align-items:center; margin:0}
.vz-label{font:500 .88rem/1.25 var(--f-ui); color:var(--ink-2); overflow-wrap:anywhere}
.vz-track{display:flex; height:.95rem; background:var(--bg-2); border-radius:3px; overflow:hidden}
.vz-fill,.vz-seg{display:block; height:100%; width:var(--w)}
.vz-fill{background:color-mix(in srgb, var(--accent) 70%, var(--panel)); border-radius:0 3px 3px 0}
.vz-row.hi .vz-fill{background:var(--good)}
.vz-row.hi .vz-label{color:var(--ink); font-weight:650}
.vz-seg{background:var(--c)}
.vz-val{font:500 .84rem/1 var(--f-mono); font-variant-numeric:tabular-nums; color:var(--ink); text-align:right; white-space:nowrap}
.vz-legend,.vz-dlegend{display:flex; flex-wrap:wrap; gap:.35rem 1.2rem; list-style:none; margin:0 0 .8rem; padding:0}
.vz-legend li,.vz-dlegend li{display:flex; align-items:center; gap:.45rem; font:500 .84rem/1.3 var(--f-ui); color:var(--ink-2); padding:0; margin:0}
.vz-legend i,.vz-dlegend i{width:.75rem; height:.75rem; border-radius:2px; background:var(--c); flex:none}
.vz-donut-wrap{display:grid; grid-template-columns:minmax(0,11rem) minmax(0,1fr); gap:1.4rem; align-items:center}
.vz-donut{width:100%; height:auto}
.vz-arc{fill:none; stroke:var(--c); stroke-width:26}
.vz-dc{font:300 30px/1 var(--f-head); fill:var(--ink); text-anchor:middle}
.vz-dcs{font:500 11px/1 var(--f-ui); fill:var(--ink-3); text-anchor:middle}
.vz-dlegend{flex-direction:column; margin:0}
.vz-dlegend b{margin-left:auto; font:500 .84rem/1 var(--f-mono); color:var(--ink); padding-left:1rem}
.vz-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(8rem,100%),1fr)); gap:1rem 1.4rem; margin:0}
.vz-stats div{display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:.3rem; border-top:2px solid var(--ink); padding-top:.6rem}
.vz-stats dd{margin:0; font:300 clamp(1.8rem,3.4vw,2.5rem)/1 var(--f-head); color:var(--ink); font-variant-numeric:lining-nums}
.vz-stats dt{font:500 .86rem/1.35 var(--f-ui); color:var(--ink-2)}
/* flow: stages under zones (free in the browser, or with your key). Vertical by default, across when there is room. */
.viz-flow{container-type:inline-size}
.fl{display:grid; gap:1rem}
.fl-zones{display:flex; flex-wrap:wrap; gap:.4rem 1.2rem}
.fl-zone{display:inline-flex; align-items:center; gap:.45rem; font:600 var(--t-xs)/1.2 var(--f-ui); color:var(--ink-2)}
.fl-zone::before{content:""; width:.7rem; height:.7rem; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--ink)}
.fl-zone.z1::before{background:var(--ink)}
.fl-zone.dup{display:none}
.fl-steps{display:grid; grid-template-columns:minmax(0,1fr); list-style:none; margin:0; padding:0}
.fl-st{position:relative; display:grid; grid-template-columns:2.2rem minmax(0,1fr); column-gap:.9rem; padding:0 0 1.35rem; margin:0}
.fl-st:last-child{padding-bottom:0}
.fl-st::after{content:""; position:absolute; left:1.1rem; top:2.2rem; bottom:.1rem; width:1px; background:var(--line)}
.fl-st:last-child::after{display:none}
.fl-n{display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:50%; background:var(--panel); box-shadow:inset 0 0 0 1.5px var(--ink); color:var(--ink); font:italic 400 1.1rem/1 var(--f-head); font-variant-numeric:lining-nums; position:relative; z-index:1}
.fl-st.z1 .fl-n{background:var(--ink); color:var(--panel)}
.fl-st.opt .fl-n{background:var(--panel); color:var(--ink-2); box-shadow:none; outline:1.5px dashed var(--ink-3); outline-offset:-1.5px}
.fl-b{display:grid; gap:.3rem; align-content:start; min-width:0; padding-top:.2rem}
.fl-b > b,.fl-pi b{font:650 1rem/1.25 var(--f-ui); color:var(--ink)}
.fl-b > span:not(.sr),.fl-pi span{font:400 .95rem/1.45 var(--f-serif); color:var(--ink-2); text-wrap:pretty}
.fl-tag{justify-self:start; margin-top:.25rem; padding:.28rem .55rem; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line); font:500 var(--t-2xs)/1 var(--f-ui); font-style:normal; color:var(--ink-3); white-space:nowrap}
.fl-with{font:italic 400 .92rem/1.2 var(--f-serif); color:var(--ink-3)}
.fl-par{display:grid; gap:.65rem; margin-top:.15rem}
.fl-pi{display:grid; gap:.25rem; padding:.1rem 0 .1rem .8rem; box-shadow:inset 2px 0 0 var(--hi-strong)}
@container (min-width: 44rem){
  .fl-zones{display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); column-gap:1.3rem}
  .fl-zone{padding-bottom:.55rem; border-bottom:2px solid var(--line); color:var(--ink-3)}
  .fl-zone::before{display:none}
  .fl-zone.z1{color:var(--ink); border-bottom-color:var(--ink)}
  .fl-zone.dup{display:block}
  .fl-steps{grid-template-columns:repeat(var(--n),minmax(0,1fr)); column-gap:1.3rem}
  .fl-st{grid-template-columns:minmax(0,1fr); row-gap:.7rem; padding:0; align-content:start}
  .fl-st::after{left:2.2rem; right:-1.3rem; top:1.1rem; bottom:auto; width:auto; height:1px}
  .fl-b{padding-top:0}
}

/* anatomy: an example with its parts numbered, and a key */
.an{display:grid; grid-template-columns:minmax(0,1fr); gap:1.2rem}
.an-p{padding:1.05rem 1.15rem 1.15rem; border-radius:var(--r); background:var(--field); box-shadow:inset 0 0 0 1px var(--line-2); min-width:0}
.an-lab{display:block; font:600 var(--t-xs)/1.2 var(--f-ui); color:var(--ink-3); margin-bottom:.55rem}
.an-p p{font:400 1.06rem/1.95 var(--f-serif); color:var(--ink); margin:0; white-space:pre-line}
.an-s{background:transparent; color:inherit; padding:.05em .1em; border-radius:2px; box-shadow:inset 0 -.09em 0 color-mix(in srgb, var(--hi-strong) 55%, transparent); transition:background .15s, box-shadow .15s}
.an-s[data-k="10"]{box-shadow:none; font:600 .78rem/1 var(--f-ui); color:var(--ink-3); padding:0}
.an-s sup,.an-k{display:inline-grid; place-items:center; min-width:1.15rem; height:1.15rem; padding:0 .25rem; border-radius:999px; background:var(--ink); color:var(--panel); font:650 .64rem/1 var(--f-ui); font-variant-numeric:tabular-nums}
.an-s sup{margin-left:.18rem; vertical-align:.45em; min-width:1rem; height:1rem; font-size:.58rem; background:var(--ink-2)}
.an-keys{display:grid; grid-template-columns:minmax(0,1fr); list-style:none; margin:0; padding:0}
.an-keys li{display:grid; grid-template-columns:1.6rem minmax(0,1fr); column-gap:.6rem; row-gap:.1rem; padding:.55rem .4rem; margin:0; border-top:1px solid var(--line-2); border-radius:2px; transition:background .15s}
.an-keys li:first-child{border-top:0}
.an-keys .an-k{grid-row:1 / span 2; margin-top:.1rem}
.an-keys b{font:650 .95rem/1.3 var(--f-ui); color:var(--ink)}
.an-keys span:not(.an-k){font:400 .93rem/1.4 var(--f-serif); color:var(--ink-2)}
.an-keys li:hover{background:var(--hi-wash)}
.an:has(li[data-k="1"]:hover) .an-s[data-k="1"],.an:has(li[data-k="2"]:hover) .an-s[data-k="2"],.an:has(li[data-k="3"]:hover) .an-s[data-k="3"],.an:has(li[data-k="4"]:hover) .an-s[data-k="4"],.an:has(li[data-k="5"]:hover) .an-s[data-k="5"],.an:has(li[data-k="6"]:hover) .an-s[data-k="6"],.an:has(li[data-k="7"]:hover) .an-s[data-k="7"],.an:has(li[data-k="8"]:hover) .an-s[data-k="8"],.an:has(li[data-k="9"]:hover) .an-s[data-k="9"],.an:has(li[data-k="10"]:hover) .an-s[data-k="10"]{background:var(--hi-wash); box-shadow:inset 0 -.12em 0 var(--hi-strong)}
@container (min-width: 46rem){ .an{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:1.6rem; align-items:start} .an-p{position:sticky; top:calc(var(--bar-h) + 1rem)} }
.viz-anatomy{container-type:inline-size}

/* equation: a formula as labeled terms */
.eq{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(8.5rem,auto); align-items:center; gap:.5rem .7rem}
.eq-l{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .55rem; min-width:0}
.eq-r{display:grid}
.eq.sum .eq-l{display:grid; gap:.45rem}
.eq-line{display:grid; grid-template-columns:1.1rem minmax(0,11.5rem) auto minmax(0,9rem); justify-content:start; align-items:center; gap:.55rem}
.eq-line .eq-t{min-width:0}
.eq + .eq{margin-top:.8rem; padding-top:.8rem; border-top:1px dashed var(--line-2)}
@container (max-width: 34rem){ .eq{grid-template-columns:minmax(0,1fr)} .eq > .eq-op{justify-self:start} }
.viz-equation{container-type:inline-size}
.eq-t{display:grid; gap:.15rem; padding:.55rem .7rem .6rem; border-radius:var(--r); background:var(--field); box-shadow:inset 0 0 0 1px var(--line-2); min-width:0}
.eq-t b{font:400 1.08rem/1.1 var(--f-head); letter-spacing:-.01em; color:var(--ink); white-space:nowrap}
.eq-t small{font:400 var(--t-xs)/1.3 var(--f-ui); color:var(--ink-3)}
.eq-t.hi{background:var(--ink); box-shadow:none}
.eq-t.hi b{color:var(--panel)} .eq-t.hi small{color:color-mix(in srgb, var(--panel) 70%, transparent)}
.eq-op{font:300 1.35rem/1 var(--f-head); color:var(--ink-3)}

/* steps: a route of numbered stations on one hairline. Vertical by default; across when there is room. */
.viz-steps{container-type:inline-size}
.vz-steps{display:grid; grid-template-columns:minmax(0,1fr); gap:0; list-style:none; margin:0; padding:0; counter-reset:none}
.vz-steps li{position:relative; display:grid; grid-template-columns:2.3rem minmax(0,1fr); column-gap:.9rem; row-gap:.2rem; padding:0 0 1.3rem; margin:0}
.vz-steps li:last-child{padding-bottom:0}
.vz-steps li::after{content:""; position:absolute; left:1.15rem; top:2.3rem; bottom:.15rem; width:1px; background:var(--line); transform:translateX(-.5px)}
.vz-steps li:last-child::after{display:none}
.vz-sn{grid-row:1 / span 2; display:grid; place-items:center; width:2.3rem; height:2.3rem; border-radius:50%; background:var(--panel); box-shadow:inset 0 0 0 1px var(--ink); color:var(--ink); font:italic 400 1.15rem/1 var(--f-head); font-variant-numeric:lining-nums; position:relative; z-index:1}
.vz-steps li:first-child .vz-sn{background:var(--ink); color:var(--panel)}
.vz-steps b{grid-column:2; align-self:end; font:650 1rem/1.25 var(--f-ui); color:var(--ink); padding-top:.15rem; text-wrap:pretty}
.vz-steps b a{color:inherit; text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat; transition:background-size .2s}
.vz-steps b a::after{content:" →"; color:var(--ink-3); font-weight:400; transition:color .15s}
.vz-steps b a:hover{background-size:100% 1px}
.vz-steps b a:hover::after{color:var(--ink)}
.vz-steps span:not(.vz-sn){grid-column:2; font:400 .95rem/1.45 var(--f-serif); color:var(--ink-2); text-wrap:pretty}
@container (min-width: 38rem){
  .vz-steps{grid-template-columns:repeat(var(--cols),minmax(0,1fr)); column-gap:1.4rem; row-gap:1.8rem}
  .vz-steps li{grid-template-columns:minmax(0,1fr); padding:0; row-gap:.35rem; align-content:start}
  .vz-sn{grid-row:auto; margin-bottom:.55rem}
  .vz-steps b,.vz-steps span:not(.vz-sn){grid-column:1}
  .vz-steps b{align-self:start; padding-top:0}
  /* the line runs from this station's node to the next one in the row */
  .vz-steps li::after{left:2.3rem; right:-1.4rem; top:1.15rem; bottom:auto; width:auto; height:1px; transform:translateY(-.5px)}
  .vz-steps.c3 li:nth-child(3n)::after,.vz-steps.c4 li:nth-child(4n)::after{display:none}
}
.vz-matrix,.vz-linechart{width:100%; max-width:30rem; height:auto; display:block; margin:0 auto}
.vz-mbg{fill:var(--bg-2)}
.vz-ax{stroke:var(--line); stroke-width:1}
.vz-q{font:italic 400 12px var(--f-serif); fill:var(--ink-3)}
.vz-axl{font:600 11px var(--f-ui); fill:var(--ink-2)}
.vz-pt{fill:var(--c); stroke:var(--panel); stroke-width:2}
.vz-pl{font:600 11.5px var(--f-ui); fill:var(--ink)}
.vz-grid{stroke:var(--line-2); stroke-width:1}
.vz-tick{font:400 10px var(--f-mono); fill:var(--ink-3)}
.vz-line{fill:none; stroke:var(--c); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round}
@media (max-width:40rem){
  .viz{padding:1rem .9rem .9rem}
  .vz-row{grid-template-columns:minmax(0,1fr) minmax(4.5rem,auto); gap:.3rem .7rem}
  .vz-row .vz-label{grid-column:1 / -1}
  .vz-donut-wrap{grid-template-columns:minmax(0,1fr)}
  .vz-donut{max-width:12rem; margin:0 auto}
}
/* reading measure: notes, hints and captions never run past a comfortable line, however wide their box */
p.hint,.viz-note,.keygate p,.inj-note,.gr-conv-meta,.pro-hint p,.news-copy,.tp-use,.ledger-foot,.updated{max-width:72ch}
/* open a finished prompt in ChatGPT or Claude */
.ai-open{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:.7rem}
.ai-open-lab{font:600 var(--t-xs)/1 var(--f-ui); color:var(--ink-3); margin-right:.15rem}