/* =============================================================
   GHIL LABS — DEMO UTILITIES  (all six simulators)
   Requires ghil-tokens.css AND ghil-logistics.css (in that order).
   ghil-logistics.css supplies the working chrome — suitebar, skip
   link, mobile stacking of aside/main, 44px touch targets, the
   case-story dialog — its :root now aliases straight to the new
   tokens, so none of that needed to be rebuilt here.
   This file only adds what ghil-logistics.css does not: the small
   per-demo boilerplate (kpi/badge/sec-title/chartbox) that used to
   be copy-pasted with raw hex and raw px into every demo's own
   <style> block, now converted to tokens and defined once.
   ============================================================= */

.cs::-webkit-scrollbar{width:5px;height:5px}
.cs::-webkit-scrollbar-track{background:var(--rule-soft)}
.cs::-webkit-scrollbar-thumb{background:var(--rule);border-radius:4px}

/* sticky table headers — functional, not just cosmetic; the old shared
   sheet only overrides .tbl th's colour under the demo scope, it never
   defined the position:sticky structure itself */
.tbl th{position:sticky;top:0;background:var(--paper-2);z-index:5}

.kpi{background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:10px 12px}
.kpi .lbl{font:600 var(--t-label)/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.kpi .val{font:800 var(--t-h3)/1.2 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.kpi .sub{font-size:var(--t-xs);color:var(--faint)}

.card{background:var(--card);border:1px solid var(--rule);border-radius:8px}
.badge{font:700 var(--t-label)/1.3 var(--mono);padding:2px 6px;border-radius:4px}
.sec-title{font:700 var(--t-label)/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}

.chartbox{position:relative;width:100%;height:clamp(220px,42vh,380px)}
.chartbox canvas{display:block}

/* type-scale utility classes — replace Tailwind text-[Npx] arbitrary values.
   Use gh-t-label only where the element is already uppercase/tracked;
   otherwise gh-t-xs (13px) is the floor. */
.gh-t-sm{font-size:var(--t-sm)!important}
.gh-t-xs{font-size:var(--t-xs)!important}
.gh-t-label{font-size:var(--t-label)!important;font-family:var(--mono);letter-spacing:.08em}
.gh-num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* compact toolbar h1: the data-ghil-base layer sets h1 to Instrument
   Serif at --t-h1 (34-62px) by default, sized for a page title — far
   too large for a slim app toolbar. This keeps the serif but brings
   the size down to fit next to the icon badge. */
h1.gh-demo-h1{font-size:var(--t-h3);line-height:var(--lh-tight);font-weight:400}

@media (pointer:coarse){
  input[type=range]{min-height:var(--tap)}
}