/* Shared frame for the Work visualisations. One dark "instrument" stage per
   project, so the real interface (light, above) and the idea (dark, below) read
   as two different things. Per-project files only add what they need. */
.viz{
  --viz-bg:#1b1d20;--viz-raised:#232629;--viz-ink:#f2f1eb;--viz-muted:#a3a79f;--viz-faint:#8c918a;
  --viz-fine:#8c918a; /* small print and faint labels: the faintest grey that clears 4.5:1 on --viz-bg and --viz-raised */
  --viz-line:#33373a;--viz-grid:#2a2d30;--viz-accent:#f2643a;--viz-accent-ink:#1b1d20;
  position:relative;margin:0;background:var(--viz-bg);color:var(--viz-ink);padding:24px 26px 20px;overflow:hidden;
  font-family:var(--sans);font-size:14px;line-height:1.6;
  /* Lets a figure lay itself out by its own width (`@container viz (max-width:…)`),
     which matters more than the viewport: the same figure sits in a 1000px home
     column, a 700px tablet column and a full-bleed phone. */
  container:viz/inline-size
}
.viz *{box-sizing:border-box}
.viz-head{display:grid;gap:6px;margin-bottom:18px;max-width:62ch}
.viz-kicker{font:10px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--viz-muted);margin:0}
.viz-title{font:500 24px/1.18 var(--sans);letter-spacing:-.5px;margin:0;color:var(--viz-ink);text-wrap:balance}
.viz-dek{font-size:14px;line-height:1.6;color:var(--viz-muted);margin:0;text-wrap:pretty}
.viz-stage{position:relative;margin:0 -2px}
.viz-stage canvas,.viz-stage svg{display:block;width:100%}
.viz-stage text{font-family:var(--mono);fill:var(--viz-muted)}
.viz-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 0}
.viz button,.viz .viz-button{appearance:none;font:10px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--viz-ink);
  background:transparent;border:1px solid var(--viz-line);padding:9px 11px;cursor:pointer;border-radius:0;transition:background .2s,border-color .2s,color .2s}
.viz button:hover{border-color:var(--viz-muted)}
/* Undo the site-wide light button hover inside the dark stage, at low specificity so figure styles still win. */
:where(.viz) button:hover{background:transparent}
.viz button[aria-pressed=true]{background:var(--viz-ink);border-color:var(--viz-ink);color:var(--viz-bg)}
.viz button:focus-visible,.viz input:focus-visible,.viz select:focus-visible,.viz summary:focus-visible{outline:2px solid var(--viz-accent);outline-offset:2px}
.viz button:disabled{opacity:.4;cursor:default}
.viz label{font:10px/1.6 var(--mono);color:var(--viz-muted);letter-spacing:.04em}
/* Sliders drawn to match the frame (hairline track, ink thumb) instead of the
   browser's grey pill, which was the one off-key control on the dark stage. */
.viz input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;margin:0;background:transparent;cursor:pointer}
.viz input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--viz-line)}
.viz input[type=range]::-moz-range-track{height:2px;background:var(--viz-line)}
.viz input[type=range]::-moz-range-progress{height:2px;background:var(--viz-muted)}
.viz input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:-6px;border-radius:50%;
  background:var(--viz-ink);border:3px solid var(--viz-bg);box-shadow:0 0 0 1px var(--viz-ink);transition:transform .15s}
.viz input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--viz-ink);border:3px solid var(--viz-bg);box-shadow:0 0 0 1px var(--viz-ink)}
.viz input[type=range]:hover::-webkit-slider-thumb,.viz input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.viz input[type=range]:focus-visible{outline-offset:4px}
.viz-readout{font:12px/1.5 var(--mono);color:var(--viz-ink)}
.viz-readout b,.viz-number{font-weight:400;font-variant-numeric:tabular-nums}
/* Small print sits in equal columns, so two notes line up the same way in every figure. */
.viz-foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:6px 32px;margin-top:16px;padding-top:12px;
  border-top:1px solid var(--viz-line);font:10px/1.6 var(--mono);color:var(--viz-fine)}
.viz-foot a{color:var(--viz-muted)}
.viz-tooltip{position:absolute;z-index:3;pointer-events:none;background:var(--viz-ink);color:var(--viz-bg);font:11px/1.45 var(--mono);
  padding:7px 9px;max-width:240px;transform:translate(-50%,calc(-100% - 12px));opacity:0;transition:opacity .12s}
.viz-tooltip[data-show]{opacity:1}
.viz-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.viz-fallback{font-size:13px;line-height:1.65;color:var(--viz-muted)}
.viz[data-viz-state=ready] .viz-fallback{display:none}
.viz-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin:10px 0 0;padding:0;list-style:none;font:10px/1.6 var(--mono);color:var(--viz-muted)}
.viz-legend li{display:flex;align-items:center;gap:6px}
.viz-legend i{display:inline-block;width:14px;height:2px;background:currentColor}

/* In an article: break out of the prose column on desktop, full-bleed on phones,
   and keep the column's 17px/1.8 body type out of the figure. */
.prose .viz{--viz-bleed:min(1000px,calc(100vw - 48px));width:var(--viz-bleed);margin:44px 0 44px calc((100% - var(--viz-bleed)) / 2)}
.prose .viz details>summary{font-size:inherit}

@media(max-width:800px){
  .viz{padding:18px 16px 16px}
  .viz-title{font-size:20px}
  .viz-dek{font-size:13px}
}
@media(max-width:760px){.prose .viz{width:auto;margin:36px -20px}}