/* KurenaiOS — css/views/labs.css · @layer views
   View compositions for Labs: the Simulations grid and an opened sim, the
   Worked Examples, Trace Lab and OOP pages, and every simulation's body
   wherever it mounts (its own page, or a topic's Simulate tab — both hosts
   carry .k-lab). Graphite frame 8h: a card, mono pill controls, and a
   stage on --s3 with a 16px radius.

   A view file may use tokens and primitives; it may not restyle a
   primitive's internals.

   Convention for every layer file: its rules sit inside ONE @layer block,
   and the block's contents are not indented, so line-anchored tooling
   (tools/lib/css.js, the smoke suites) reads them like top-level rules. */
@layer views {

/* ---------- the lab pages: toolbar, category pills, generator tabs ---------- */
.k-lab-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-10); }
.k-lab-cats, .k-lab-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
/* 20g: the generators are one strip of text tabs, the open one underlined */
.k-wk-tabs-scroll { border-block-end: var(--hairline) solid var(--line); }
.k-wk-tabs { display: flex; flex-wrap: nowrap; gap: var(--sp-18); }
.k-wk-tab { flex: 0 0 auto; padding: var(--sp-8) 0 var(--sp-10); border-radius: 0; background: none; box-shadow: none; white-space: nowrap; font-size: var(--fs-13-5); color: var(--text-2); }
.k-wk-tab:hover { color: var(--text); }
.k-wk-tab[aria-pressed="true"] { color: var(--text); font-weight: var(--weight-semibold); box-shadow: inset 0 calc(-1 * var(--bar-3)) 0 var(--crimson); }
.k-lab-search { inline-size: var(--lab-search-w); margin-inline-start: auto; }
.k-lab-cat, .k-lab-tab { padding: var(--sp-7) var(--sp-16); border-radius: var(--r-pill); background: var(--s1); box-shadow: none; color: var(--text-2); font-size: var(--fs-13); font-weight: var(--weight-medium); }
.k-lab-cat:hover, .k-lab-tab:hover { background: var(--s2); color: var(--text); }
.k-lab-cat[data-state~="active"] { background: var(--s2); color: var(--text); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-lab-tab { padding: var(--sp-6) var(--sp-14); font-size: var(--fs-12-5); }
.k-lab-tab[data-state~="active"] { background: var(--text); color: var(--bg); }

/* ---------- the Simulations index (20h): areas beside grouped cards ---------- */
.k-lab-toolbar > .k-lab-search { margin-inline-start: 0; }
.k-lab-index { display: grid; grid-template-columns: var(--lab-areas-w) minmax(0, 1fr); gap: var(--sp-22); align-items: start; }
.k-lab-areas-scroll { display: contents; }
.k-lab-areas-scroll > .k-scroller-arrow { display: none; }
.k-lab-areas { position: sticky; inset-block-start: var(--sp-12); display: flex; flex-direction: column; gap: var(--sp-2); }
.k-lab-area { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); padding: var(--sp-8) var(--sp-12); border-radius: var(--r-12); font-size: var(--fs-13-5); color: var(--text-2); text-align: start; }
.k-lab-area:hover { background: var(--s1); color: var(--text); }
.k-lab-area[aria-current="true"] { background: var(--s2); color: var(--text); font-weight: var(--weight-semibold); }
.k-lab-area-n { font-size: var(--fs-11); color: var(--muted); }
.k-lab-area-h { padding: var(--sp-14) var(--sp-12) var(--sp-6); font-size: var(--fs-11); font-weight: var(--weight-semibold); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); }
.k-lab-main, .k-lab-sections { display: flex; flex-direction: column; gap: var(--sp-22); min-inline-size: 0; }
.k-lab-sec-h { display: flex; align-items: baseline; gap: var(--sp-8); margin-block-end: var(--sp-10); }
.k-lab-sec-h > h2 { margin: 0; font-size: var(--fs-17); font-weight: var(--weight-semibold); }
.k-lab-sec-n { font-size: var(--fs-12); color: var(--muted); }
.k-lab-sec-all { margin-inline-start: auto; font-size: var(--fs-12-5); }
.k-lab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--lab-card-min), 1fr)); gap: var(--sp-12); margin: 0; padding: 0; list-style: none; }
.k-lab-grid > li { display: flex; }
.k-lab-card { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-8) var(--sp-8) var(--sp-12); border-radius: var(--r-20); background: var(--s1); box-shadow: none; text-align: start; }
.k-lab-card:hover { background: var(--s2); }
.k-lab-card > .k-lab-card-title, .k-lab-card > .k-lab-card-ref { padding-inline: var(--sp-6); }
.k-lab-card-title { margin-block-start: var(--sp-6); font-size: var(--fs-14-5); font-weight: var(--weight-semibold); line-height: var(--lh-snug); }
.k-lab-card-ref { font-size: var(--fs-11-5); color: var(--muted); }
/* the archetype drawing, in the subject's hue */
.k-lab-thumb { --sim-hue: var(--cs); position: relative; display: block; aspect-ratio: var(--lab-thumb-ratio); border-radius: var(--r-14); background: var(--bg); }
[data-subject="maths"] > .k-lab-thumb, .k-lab-thumb[data-subject="maths"] { --sim-hue: var(--maths); }
.k-lab-thumb > svg { display: block; inline-size: 100%; block-size: 100%; }
.k-th-n { fill: none; stroke: var(--sim-hue); stroke-width: 3; }
.k-th-on { fill: var(--sim-hue); }
.k-th-hot { fill: var(--crimson); stroke: var(--crimson); }
.k-th-e, .k-th-line { fill: none; stroke: color-mix(in oklch, var(--sim-hue) 70%, var(--muted)); stroke-width: 3; stroke-linecap: round; }
.k-th-line { stroke: var(--sim-hue); }
.k-th-fill { fill: color-mix(in oklch, var(--sim-hue) 26%, transparent); }
.k-th-head { fill: var(--crimson); }
.k-lab-card[data-state~="locked"] .k-lab-thumb > svg { opacity: 0.35; }
.k-lab-price { position: absolute; inset-block-start: var(--sp-8); inset-inline-end: var(--sp-8); padding: var(--sp-2) var(--sp-8); border-radius: var(--r-pill); background: color-mix(in oklch, var(--amber) 18%, var(--s2)); font-size: var(--fs-11-5); color: var(--amber); }

/* ---------- the shared lab header (20a) and an opened lab's way back ---------- */
.k-lab-crumbs { display: flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-13); color: var(--muted); }
.k-lab-crumbs > .k-link { color: var(--text-2); }
.k-lab-head { display: flex; align-items: flex-start; gap: var(--sp-12); padding-block-end: var(--sp-12); border-block-end: var(--hairline) solid var(--line); }
.k-lab-head-t { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.k-lab-title { margin: 0; font-size: var(--fs-20); font-weight: var(--weight-semibold); line-height: var(--lh-tight); }
h2.k-lab-title { font-size: var(--fs-17); }
.k-lab-refpill { display: inline-block; margin-inline-start: var(--sp-4); padding: var(--sp-2) var(--sp-8); border-radius: var(--r-pill); vertical-align: middle; background: color-mix(in oklch, var(--cs) 18%, transparent); font-size: var(--fs-11-5); font-weight: var(--weight-medium); color: var(--cs); }
.k-lab-refpill[data-subject="maths"] { background: color-mix(in oklch, var(--maths) 18%, transparent); color: var(--maths); }

/* ---------- a locked lab (20i): its shape, one panel on its stage ---------- */
.k-lab-lockwrap { display: grid; grid-template-columns: minmax(0, 1fr) var(--lab-lock-side-w); gap: var(--sp-22); align-items: start; }
.k-lab-lockwrap[data-state~="embedded"] { grid-template-columns: minmax(0, 1fr); gap: var(--sp-14); }
.k-lab-lockstage { position: relative; display: grid; place-items: center; min-block-size: var(--lab-lock-h); padding: var(--sp-24); border-radius: var(--r-16); background: var(--bg); overflow: hidden; }
.k-lab-lock-ghost { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0.14; }
.k-lab-lock-ghost > .k-lab-thumb { inline-size: 86%; background: none; }
.k-lab-lock-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); inline-size: min(var(--lab-lock-card-w), 100%); padding: var(--sp-24); border-radius: var(--r-24); background: var(--s1); text-align: center; box-shadow: var(--elev-3); }
.k-lab-lock-mark { inline-size: var(--sp-48); block-size: var(--sp-48); display: grid; place-items: center; margin-block-end: var(--sp-4); border-radius: 50%; background: color-mix(in oklch, var(--amber) 22%, var(--s2)); font-size: var(--fs-18); color: var(--amber); }
.k-lab-lock-name { font-size: var(--fs-17); font-weight: var(--weight-semibold); }
.k-lab-lock-by, .k-lab-lock-bal { font-size: var(--fs-12-5); color: var(--muted); }
.k-lab-lock-price { margin-block: var(--sp-4); font-size: var(--fs-26); font-weight: var(--weight-semibold); color: var(--amber); }
.k-lab-lock-card > .k-btn { inline-size: 100%; justify-content: center; min-block-size: var(--hit-coarse); margin-block-start: var(--sp-6); }
.k-lab-lock-side { display: flex; flex-direction: column; gap: var(--sp-6); }
.k-lab-lock-side > h3 { margin: 0; }
.k-lab-lock-side > p { margin: 0 0 var(--sp-10); font-size: var(--fs-13-5); line-height: var(--lh-body); color: var(--text-2); }

/* ---------- the lab card and its common parts ---------- */
.k-lab { display: flex; flex-direction: column; gap: var(--sp-12); min-inline-size: 0; }
.k-lab-sub { margin: 0; font-size: var(--fs-13); line-height: 1.5; color: var(--text-2); }
.k-lab-ref { font: var(--fs-11) var(--font-mono); color: var(--muted); }
.k-lab-h { margin: 0 0 var(--sp-6); font-size: var(--fs-13-5); font-weight: var(--weight-semibold); }
.k-lab-msg { font-size: var(--fs-12-5); color: var(--muted); }
.k-lab-msg[data-block] { display: block; }
.k-lab-msg[data-tone="good"] { color: var(--green); }
.k-lab-msg[data-tone="bad"] { color: var(--red); }
.k-lab-out { display: flex; flex-direction: column; gap: var(--sp-8); min-inline-size: 0; }
.k-lab-small { font-size: var(--fs-11-5); line-height: 1.6; }
.k-lab-split { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-18); }
.k-lab-split-side { flex: 1 1 var(--lab-side-min); min-inline-size: 0; }

/* the control row (frame 8h): labelled fields, then mono pill buttons */
.k-lab-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-10); padding-block-end: var(--sp-12); border-block-end: var(--hairline) solid var(--line); }
.k-lab-controls > label:not(.k-check) { display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-11-5); color: var(--muted); }
.k-lab-controls .k-btn { padding: var(--sp-5) var(--sp-12); font: var(--weight-medium) var(--fs-12) var(--font-mono); }
.k-lab-controls .k-lab-msg { align-self: center; }
.k-lab-controls .k-check { align-self: center; font-size: var(--fs-12-5); }
/* a lab's own fields: sized by --w, compact, tabular */
.k-lab input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .k-lab select { inline-size: var(--w, var(--lab-field-w)); min-block-size: var(--lab-field-h); padding: var(--sp-5) var(--sp-10); border-radius: var(--r-10); background: var(--s3); font-size: var(--fs-13); }
.k-lab input[type="range"] { inline-size: var(--w, var(--lab-range-w)); accent-color: var(--crimson); }
.k-lab .k-lab-note, .k-lab textarea { inline-size: 100%; min-block-size: var(--h, var(--lab-note-h)); padding: var(--sp-10) var(--sp-12); border-radius: var(--r-12); background: var(--s3); font-size: var(--fs-13); line-height: 1.5; resize: vertical; }
.k-lab [data-mono] { font-family: var(--font-mono); font-size: var(--fs-12-5); }
/* the alternate action (reset, new data): quiet amber, never the primary */
.k-lab-alt { background: color-mix(in oklch, var(--amber) 16%, var(--s2)); color: var(--amber); box-shadow: none; }
.k-lab-alt:hover { background: color-mix(in oklch, var(--amber) 26%, var(--s2)); }

/* readouts: the stage-side text a sim writes */
.k-lab-read, .k-lab-trig-read, .k-lab-cpu-desc, .k-lab-fn-desc, .k-lab-rec-info { padding: var(--sp-12) var(--sp-16); border-radius: var(--r-16); background: var(--s3); font-size: var(--fs-12-5); line-height: 1.75; color: var(--text-2); overflow-wrap: anywhere; }
.k-lab-read, .k-lab-trig-read, .k-lab-cpu-desc { font-family: var(--font-mono); }
.k-lab-read b, .k-lab-trig-read b { color: var(--text); }
.k-lab-cpu-desc { min-block-size: var(--lab-field-h); color: var(--amber); }
.k-lab-fn-eq { margin: 0; font: var(--fs-16) var(--font-mono); }
.k-lab-aside { color: var(--muted); }
.k-lab-faint { color: var(--muted); opacity: 0.8; }
.k-lab-good { color: var(--green); }
.k-lab-bad { color: var(--red); }
.k-lab-acc { color: var(--crimson); }
.k-lab-acc2 { color: var(--amber); }
.k-lab-goldt { color: var(--amber); }
.k-lab-crim { color: var(--crimson); }
.k-lab-paused { color: var(--maths); }
.k-lab-tint { color: var(--c); }

/* the stage: a canvas on --s3 (frame 8h) */
.k-lab-slider { display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-12); color: var(--text-2); }
.k-lab-slider b { font-family: var(--font-mono); color: var(--text); font-weight: var(--weight-semibold); }

/* tables a sim prints */
.k-lab-tablewrap { overflow-x: auto; }
.k-lab-table td, .k-lab-table th, .k-lab-tt td, .k-lab-tt th { font-family: var(--font-mono); font-size: var(--fs-12); text-align: center; white-space: nowrap; }
.k-lab-table tr[data-state~="live"] td, .k-lab-tt tr[data-state~="live"] td { background: color-mix(in oklch, var(--amber) 14%, transparent); color: var(--amber); }
.k-lab-tt { max-inline-size: var(--lab-tt-w); }
.k-lab-tt td[data-q="1"] { color: var(--green); font-weight: var(--weight-bold); }
.k-lab-tt td[data-q="0"] { color: var(--muted); }
.k-lab-code { white-space: pre-wrap; padding: var(--sp-12); }
.k-lab-rx-hit { border-radius: var(--r-2); background: color-mix(in oklch, var(--amber) 30%, transparent); color: inherit; }
.k-lab-subnet-net { color: var(--crimson); font-weight: var(--weight-bold); }
.k-lab-subnet-host { color: var(--muted); }

/* ---------- switches, bits and tapes ---------- */
.k-lab-live { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-24); }
.k-lab-switches { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-10); }
.k-lab-switch { min-inline-size: var(--lab-switch-w); display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding: var(--sp-8) var(--sp-14); border-radius: var(--r-12); background: var(--s2); box-shadow: inset 0 0 0 var(--hairline) var(--line); color: var(--text-2); font: var(--fs-12) var(--font-mono); transition: background var(--dur-fast) var(--ease); }
.k-lab-switch b { font-size: var(--fs-18); color: var(--muted); }
.k-lab-switch[data-state~="on"] { background: color-mix(in oklch, var(--green) 12%, var(--s2)); box-shadow: inset 0 0 0 var(--hairline) var(--green); }
.k-lab-switch[data-state~="on"] b { color: var(--green); }
.k-lab-switch[data-state~="flipped"] { background: color-mix(in oklch, var(--red) 14%, var(--s2)); box-shadow: inset 0 0 0 var(--hairline) var(--red); }
.k-lab-switch[data-size="bit"] { min-inline-size: var(--lab-bit-sw-w); padding: var(--sp-5) var(--sp-4); gap: var(--sp-2); }
.k-lab-switch[data-size="bit"] > span { font-size: var(--fs-11); }
.k-lab-switch[data-size="bit"] b { font-size: var(--fs-15); }
.k-lab-switch[data-kind="parity"] { box-shadow: inset 0 0 0 var(--hairline) var(--amber); }
.k-lab-bitgroup { display: flex; align-items: center; gap: var(--sp-4); margin-inline-end: var(--sp-16); }
.k-lab-bitgroup > .k-lab-ref { margin-inline-end: var(--sp-4); }
.k-lab-point { font-size: var(--fs-20); font-weight: var(--weight-bold); }
.k-lab-lamp { padding: var(--sp-12) var(--sp-24); border-radius: var(--r-16); background: var(--s3); box-shadow: inset 0 0 0 var(--hairline) var(--line); font: var(--fs-16) var(--font-mono); color: var(--muted); }
.k-lab-lamp[data-state~="on"] { background: color-mix(in oklch, var(--green) 12%, var(--s3)); box-shadow: inset 0 0 0 var(--hairline) var(--green); color: var(--green); }

.k-lab-bit-row { display: flex; gap: var(--sp-6); }
.k-lab-bw { inline-size: var(--lab-bit); text-align: center; font: var(--fs-11) var(--font-mono); color: var(--muted); }
.k-lab-cbit { block-size: var(--sp-14); color: var(--amber); font-size: var(--fs-12); font-weight: var(--weight-bold); }
.k-lab-bit { inline-size: var(--lab-bit); block-size: var(--lab-bit); display: grid; place-items: center; padding: 0; border-radius: var(--r-10); background: var(--s2); box-shadow: inset 0 0 0 var(--hairline) var(--line); font: var(--weight-bold) var(--fs-18) var(--font-mono); color: var(--muted); transition: transform var(--dur) var(--ease); }
.k-lab-bit[data-state~="on"] { background: color-mix(in oklch, var(--green) 12%, var(--s2)); box-shadow: inset 0 0 0 var(--hairline) var(--green); color: var(--green); }
.k-lab-bit[data-state~="flip"] { transform: rotateX(180deg); }
.k-lab-bit[data-state~="live"] { box-shadow: inset 0 0 0 var(--hairline) var(--amber); color: var(--amber); }
.k-lab-bit:disabled { cursor: default; }
.k-lab-bit-row[data-kind="result"] .k-lab-bit { background: var(--s3); }
.k-lab-bin-lbl { margin-block-start: var(--sp-8); font: var(--fs-11) var(--font-mono); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); }
.k-lab-bin-read dd { font-family: var(--font-mono); }

.k-lab-fsm-tape { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.k-lab-fsm-cell { inline-size: var(--lab-cell-w); block-size: var(--lab-cell-h); display: grid; place-items: center; border-radius: var(--r-10); box-shadow: inset 0 0 0 var(--hairline) var(--line); font: var(--fs-16) var(--font-mono); color: var(--text-2); transition: transform var(--dur) var(--ease); }
.k-lab-fsm-cell[data-state~="current"] { background: color-mix(in oklch, var(--amber) 14%, transparent); box-shadow: inset 0 0 0 var(--hairline) var(--amber); color: var(--amber); transform: translateY(calc(var(--hairline) * -2)); }
.k-lab-fsm-cell[data-state~="done"] { background: var(--s3); color: var(--muted); }

.k-lab-bitmap-grid { display: grid; grid-template-columns: repeat(var(--n, 8), var(--lab-px)); gap: var(--sp-2); inline-size: max-content; padding: var(--sp-4); border-radius: var(--r-10); background: var(--s3); }
.k-lab-bitmap-px { inline-size: var(--lab-px); block-size: var(--lab-px); padding: 0; border-radius: var(--r-2); background: var(--c); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-lab-bitmap-px:hover { outline: var(--focus-width) solid var(--crimson); outline-offset: calc(var(--hairline) * -1); }
.k-lab-bitmap-swatch { inline-size: var(--lab-swatch-w); block-size: var(--lab-swatch-h); padding: 0; border-radius: var(--r-8); background: var(--c); box-shadow: inset 0 0 0 var(--focus-width) var(--line); font: var(--fs-11) var(--font-mono); color: var(--lab-swatch-ink); text-shadow: 0 0 var(--sp-2) var(--shadow-ink); }
.k-lab-bitmap-swatch[data-state~="on"] { box-shadow: inset 0 0 0 var(--focus-width) var(--crimson), 0 0 0 var(--focus-width) var(--crimson-glow); }

/* recursion: the call stack beside the explanation */
.k-lab-rec-wrap { display: grid; grid-template-columns: minmax(0, var(--lab-rec-w)) minmax(0, 1fr); gap: var(--sp-18); align-items: start; }
.k-lab-rec-h { margin-block-end: var(--sp-8); font-size: var(--fs-11); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); font-weight: var(--weight-bold); }
.k-lab-rec-stack { display: flex; flex-direction: column; gap: var(--sp-6); min-block-size: var(--lab-stage-h); padding: var(--sp-12); border-radius: var(--r-16); background: var(--s3); }
.k-lab-rec-frame { padding: var(--sp-9) var(--sp-12); border-radius: var(--r-10); background: var(--s2); box-shadow: inset var(--rail-mark) 0 0 var(--maths); font: var(--fs-12) var(--font-mono); }
.k-lab-rec-frame b { display: block; }
.k-lab-rec-frame[data-state~="base"] { box-shadow: inset var(--rail-mark) 0 0 var(--green); }
.k-lab-rec-frame[data-state~="base"] b { color: var(--green); }
.k-lab-rec-frame[data-state~="returning"] { opacity: 0.35; transition: opacity var(--dur) var(--ease); }
.k-lab-ra { display: block; font-size: var(--fs-11); color: var(--muted); }
.k-lab-pr { display: block; margin-block-start: var(--sp-2); font-size: var(--fs-11); color: var(--amber); }
.k-lab-rec-result { margin-block-start: var(--sp-10); font: var(--fs-12-5) var(--font-mono); color: var(--green); }

/* the Little Man Computer's registers and memory */
.k-lab-regs { display: flex; flex-wrap: wrap; gap: var(--sp-12); }
.k-lab-reg { min-inline-size: var(--lab-reg-w); padding: var(--sp-8) var(--sp-12); border-radius: var(--r-12); background: var(--s2); }
.k-lab-reg-k { font-size: var(--fs-11); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); }
.k-lab-reg-v { font-size: var(--fs-18); color: var(--c, var(--text)); }
.k-lab-mem { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--sp-4); max-inline-size: var(--lab-mem-w); }
.k-lab-mem-cell { padding: var(--sp-6) var(--sp-2); border-radius: var(--r-8); background: var(--s2); text-align: center; font-size: var(--fs-11); color: var(--text); }
.k-lab-mem-cell[data-state~="empty"] { color: var(--muted); }
.k-lab-mem-cell[data-state~="current"] { background: color-mix(in oklch, var(--amber) 16%, var(--s2)); box-shadow: inset 0 0 0 var(--hairline) var(--amber); }
.k-lab-mem-cell[data-state~="written"] { background: color-mix(in oklch, var(--teal) 18%, var(--s2)); color: var(--teal); }
.k-lab-row-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-12); }
.k-lab-row-h > b { flex: 1 1 auto; }
.k-lab-row-h > .k-input { inline-size: auto; }
.k-lab-mem-i { font-size: var(--fs-11); color: var(--muted); }

/* ---------- the lab system (20a–20e, labs/lab.js): bar, stage, readout ----------
   Ink is the subject hue; the current step is crimson ("hot"), frontier or
   pending amber ("front"), visited or done teal ("done"). */
.k-lab { --sim-hue: var(--cs); }
.k-lab[data-subject="maths"] { --sim-hue: var(--maths); }
.k-lab-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-10); padding-block-end: var(--sp-12); border-block-end: var(--hairline) solid var(--line); }
.k-lab-bar-gap { flex: 1 1 0; }
.k-lab-bar-sep { inline-size: var(--hairline); block-size: var(--sp-22); flex: 0 0 auto; background: var(--line); }
.k-lab-field { display: inline-flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-12-5); color: var(--muted); white-space: nowrap; }
.k-lab-field > input, .k-lab-field > select { font-family: var(--font-mono); color: var(--text); }
.k-lab-pill { display: inline-flex; align-items: center; min-block-size: var(--lab-field-h); padding: 0 var(--sp-14); border-radius: var(--r-pill); background: var(--s2); font: var(--fs-12-5) var(--font-mono); color: var(--text); white-space: nowrap; }
.k-lab-pill:hover { background: color-mix(in oklch, var(--text) 8%, var(--s2)); }
.k-lab-pill[data-intent~="primary"] { background: var(--text); color: var(--bg); font-weight: var(--weight-semibold); }
.k-lab-pill[data-intent~="primary"]:hover { background: color-mix(in oklch, var(--text) 86%, var(--bg)); }
.k-lab-pill:disabled { opacity: 0.45; cursor: default; }
.k-lab-seg { font-size: var(--fs-12-5); }
.k-lab-tp { display: inline-flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3); border-radius: var(--r-pill); background: var(--s2); }
.k-lab-tp-b { display: inline-flex; align-items: center; min-block-size: var(--hit); padding: 0 var(--sp-12); border-radius: var(--r-pill); font-size: var(--fs-12-5); color: var(--text-2); white-space: nowrap; }
.k-lab-tp-b:hover:not(:disabled) { background: var(--s1); color: var(--text); }
.k-lab-tp-b[data-intent~="primary"] { padding-inline: var(--sp-14); background: var(--crimson); color: var(--crimson-ink); font-weight: var(--weight-semibold); }
.k-lab-tp-b[data-intent~="primary"]:hover:not(:disabled) { background: var(--crimson-hi); color: var(--crimson-ink); }
.k-lab-tp-b:disabled { opacity: 0.45; cursor: default; }
.k-lab-count { min-inline-size: 5ch; font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }
.k-lab-speed { display: inline-flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-12-5); color: var(--muted); }
.k-lab-speed > input { --w: var(--lab-speed-w); }
.k-lab-speed > b { font-size: var(--fs-12); color: var(--text); }
.k-lab-toggle { display: inline-flex; align-items: center; gap: var(--sp-8); min-block-size: var(--hit); font-size: var(--fs-12-5); color: var(--text-2); white-space: nowrap; }
.k-lab-toggle-t { position: relative; flex: 0 0 auto; inline-size: var(--lab-toggle-w); block-size: var(--lab-toggle-h); border-radius: var(--r-pill); background: var(--s2); box-shadow: inset 0 0 0 var(--hairline) var(--line); transition: background var(--dur-fast) var(--ease); }
.k-lab-toggle-t::after { content: ""; position: absolute; inset-block-start: var(--sp-2); inset-inline-start: var(--sp-2); inline-size: calc(var(--lab-toggle-h) - var(--sp-4)); block-size: calc(var(--lab-toggle-h) - var(--sp-4)); border-radius: 50%; background: var(--text-2); transition: transform var(--dur-fast) var(--ease); }
.k-lab-toggle[aria-checked="true"] .k-lab-toggle-t { background: var(--sim-hue); }
.k-lab-toggle[aria-checked="true"] .k-lab-toggle-t::after { transform: translateX(calc(var(--lab-toggle-w) - var(--lab-toggle-h))); background: var(--text); }

.k-lab-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--lab-read-w); gap: var(--sp-22); align-items: start; }
.k-lab-stage { position: relative; min-inline-size: 0; aspect-ratio: 16 / 9; border-radius: var(--r-16); background: var(--s3); overflow: hidden; }
/* the stage chrome of the overflow rule (20a): zoom at the top right, the
   fit state at the bottom left */
.k-lab-zoom { position: absolute; inset-block-start: var(--sp-10); inset-inline-end: var(--sp-10); display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2); border-radius: var(--r-pill); background: var(--s1); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-lab-zoom-b { min-inline-size: var(--hit-dense); min-block-size: var(--hit-dense); padding: 0 var(--sp-8); border-radius: var(--r-pill); font-size: var(--fs-12); color: var(--text-2); }
.k-lab-zoom-b:hover { background: var(--s2); color: var(--text); }
.k-lab-zoom-v { min-inline-size: var(--sp-40); text-align: center; font-size: var(--fs-11-5); color: var(--text); }
.k-lab-stage-note { position: absolute; inset-block-end: var(--sp-10); inset-inline-start: var(--sp-12); font-size: var(--fs-11); color: var(--muted); pointer-events: none; }
.k-lab-stage .k-lab-stage-note { padding: var(--sp-3) var(--sp-9); border-radius: var(--r-pill); background: color-mix(in oklch, var(--s3) 80%, transparent); font-size: var(--fs-11-5); }
.k-lab-stage-hint { position: absolute; inset-block-start: var(--sp-10); inset-inline-end: var(--sp-12); font-size: var(--fs-11-5); color: var(--muted); pointer-events: none; }
.k-lab-stage[data-state~="pannable"] > .k-sv { cursor: grab; touch-action: none; }
.k-lab-stage[data-state~="panning"] > .k-sv { cursor: grabbing; }
.k-lab-mini { position: absolute; inset-block-end: var(--sp-10); inset-inline-end: var(--sp-10); inline-size: var(--lab-mini-w); aspect-ratio: 16 / 9; border-radius: var(--r-10); background: var(--s1); box-shadow: inset 0 0 0 var(--hairline) var(--line); pointer-events: none; }
.k-lab-mini:not([data-state~="on"]) { display: none; }
.k-sv-mini-v { fill: color-mix(in oklch, var(--crimson) 10%, transparent); stroke: var(--crimson); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* the drawing: one SVG, coloured by tone */
.k-sv { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; font-family: var(--font-mono); }
.k-sv-node { fill: var(--s1); stroke: var(--line); stroke-width: 1.2; }
.k-sv-node[data-tone~="ink"] { stroke: var(--sim-hue); stroke-width: 1.6; }
.k-sv-node[data-tone~="on"] { fill: var(--sim-hue); stroke: var(--sim-hue); }
.k-sv-node[data-tone~="soft"] { fill: color-mix(in oklch, var(--sim-hue) 26%, var(--s1)); stroke: none; }
.k-sv-node[data-tone~="new"] { fill: color-mix(in oklch, var(--teal) 14%, var(--s1)); stroke: var(--teal); stroke-width: 1.6; }
.k-sv-node[data-tone~="front"] { stroke: var(--amber); stroke-width: 2; }
.k-sv-node[data-tone~="front-wash"] { fill: color-mix(in oklch, var(--amber) 16%, var(--s1)); stroke: var(--amber); stroke-width: 1.6; }
.k-sv-node[data-tone~="hot"] { fill: var(--crimson); stroke: var(--crimson); }
.k-sv-node[data-tone~="hot-ring"] { fill: color-mix(in oklch, var(--crimson) 14%, var(--s1)); stroke: var(--crimson); stroke-width: 2; }
.k-sv-node[data-tone~="done"] { fill: var(--teal); stroke: var(--teal); }
.k-sv-node[data-tone~="done-ring"] { fill: color-mix(in oklch, var(--teal) 12%, var(--s1)); stroke: var(--teal); stroke-width: 2; }
.k-sv-node[data-tone~="well"] { fill: var(--s3); }
.k-sv-node[data-tone~="ghost"] { fill: none; stroke-dasharray: 4 4; }
.k-sv-node[data-tone~="faint"] { opacity: 0.45; }
.k-sv-edge { fill: none; stroke: var(--text-2); stroke-width: 1.6; stroke-linecap: round; }
.k-sv-edge[data-tone~="line"] { stroke: var(--line); stroke-width: 1.2; }
.k-sv-edge[data-tone~="mute"] { stroke: color-mix(in oklch, var(--text-2) 45%, var(--s3)); }
.k-sv-edge[data-tone~="ink"] { stroke: var(--sim-hue); stroke-width: 2.4; }
.k-sv-edge[data-tone~="hot"] { stroke: var(--crimson); stroke-width: 2.4; }
.k-sv-edge[data-tone~="done"] { stroke: var(--teal); stroke-width: 2.4; }
.k-sv-edge[data-tone~="front"] { stroke: var(--amber); stroke-width: 2; }
.k-sv-edge[data-dash] { stroke-dasharray: 3 4; }
.k-sv-edge[data-tone~="faint"] { opacity: 0.45; }
.k-sv-axis { stroke: var(--text-2); stroke-width: 1.4; }
.k-sv-px { fill: var(--c); stroke: var(--line); stroke-width: 1; }
.k-lab-checks { display: flex; flex-direction: column; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-13); color: var(--text-2); }
.k-lab-checks > li[data-tone~="done"] { color: var(--teal); }
.k-lab-checks > li[data-tone~="hot"] { color: var(--crimson); }
.k-sv-hit { cursor: pointer; outline: none; }
.k-sv-hit:hover > .k-sv-node { stroke: var(--text-2); }
.k-sv-hit:focus-visible > .k-sv-node { stroke: var(--focus-ring); stroke-width: 3; }
.k-lab-stage[data-state~="draggable"] > .k-sv { touch-action: none; }
.k-lab-stage[data-state~="dragging"] > .k-sv { cursor: grabbing; }
/* series tones for a plot of several curves (Big-O): the fixed hues */
.k-sv-edge[data-tone~="s1"] { stroke: var(--text-2); }
.k-sv-clipmark[data-tone~="s1"] { fill: var(--text-2); }
.k-sv-edge[data-tone~="s2"] { stroke: var(--teal); }
.k-sv-edge[data-tone~="s3"] { stroke: var(--maths); }
.k-sv-edge[data-tone~="s4"] { stroke: var(--amber); }
.k-sv-edge[data-tone~="s5"] { stroke: var(--it); }
.k-sv-edge[data-tone~="s6"] { stroke: var(--crimson); }
.k-sv-edge[data-tone~="s7"] { stroke: var(--green); }
.k-sv-clipmark[data-tone~="s2"] { fill: var(--teal); }
.k-sv-clipmark[data-tone~="s3"] { fill: var(--maths); }
.k-sv-clipmark[data-tone~="s4"] { fill: var(--amber); }
.k-sv-clipmark[data-tone~="s5"] { fill: var(--it); }
.k-sv-clipmark[data-tone~="s6"] { fill: var(--crimson); }
.k-sv-clipmark[data-tone~="s7"] { fill: var(--green); }
.k-lab-keys .k-lab-key[data-mark="line-s1"] { background: var(--text-2); }
.k-lab-keys .k-lab-key[data-mark="line-s2"] { background: var(--teal); }
.k-lab-keys .k-lab-key[data-mark="line-s3"] { background: var(--maths); }
.k-lab-keys .k-lab-key[data-mark="line-s4"] { background: var(--amber); }
.k-lab-keys .k-lab-key[data-mark="line-s5"] { background: var(--it); }
.k-lab-keys .k-lab-key[data-mark="line-s6"] { background: var(--crimson); }
.k-lab-keys .k-lab-key[data-mark="line-s7"] { background: var(--green); }
.k-sv-curve { stroke-width: 2.6; stroke-linejoin: round; }
.k-sv-curve[data-tone~="sub"] { stroke: var(--text-2); stroke-width: 1.4; }
.k-sv-clipmark { fill: var(--sim-hue); }
.k-sv-clipmark[data-tone~="hot"] { fill: var(--crimson); }
.k-sv-clipmark[data-tone~="done"] { fill: var(--teal); }
.k-sv-clipmark[data-tone~="front"] { fill: var(--amber); }
.k-sv-ring { fill: var(--s3); stroke: var(--sim-hue); stroke-width: 2; }
.k-sv-ring[data-tone~="hot"] { stroke: var(--crimson); }
.k-sv-ring[data-tone~="front"] { stroke: var(--amber); }
.k-sv-ring[data-tone~="done"] { stroke: var(--teal); }
.k-sv-area { fill: color-mix(in oklch, var(--sim-hue) 24%, transparent); stroke: none; }
.k-sv-area[data-tone~="sub"] { fill: color-mix(in oklch, var(--text-2) 10%, transparent); }
.k-sv-area[data-tone~="hot"] { fill: color-mix(in oklch, var(--crimson) 22%, transparent); }
.k-sv-area[data-tone~="done"] { fill: color-mix(in oklch, var(--teal) 22%, transparent); }
.k-sv-area[data-tone~="front"] { fill: color-mix(in oklch, var(--amber) 20%, transparent); }
.k-sv-tip { fill: var(--text-2); }
.k-sv-tip[data-tone~="hot"] { fill: var(--crimson); }
.k-sv-tip[data-tone~="done"] { fill: var(--teal); }
.k-sv-tip[data-tone~="front"] { fill: var(--amber); }
.k-sv-tip[data-tone~="ink"] { fill: var(--sim-hue); }
.k-sv-dot { fill: var(--teal); }
.k-sv-dot[data-tone~="hot"] { fill: var(--crimson); }
.k-sv-dot[data-tone~="front"] { fill: var(--amber); }
.k-sv-dot[data-tone~="ink"] { fill: var(--sim-hue); }
.k-sv-dot[data-tone~="mute"] { fill: var(--muted); }
.k-sv-t { fill: var(--text); font-weight: var(--weight-medium); }
.k-sv-t[data-w="bold"] { font-weight: var(--weight-semibold); }
.k-sv-t[data-tone~="sub"] { fill: var(--text-2); }
.k-sv-t[data-tone~="mute"] { fill: var(--muted); }
.k-sv-t[data-tone~="hot"] { fill: var(--crimson); }
.k-sv-t[data-tone~="done"] { fill: var(--teal); }
.k-sv-t[data-tone~="front"] { fill: var(--amber); }
.k-sv-t[data-tone~="ink"] { fill: var(--sim-hue); }
.k-sv-t[data-tone~="on"] { fill: var(--crimson-ink); }
.k-sv-t[data-tone~="faint"] { opacity: 0.5; }

/* the readout: Now → Values → Legend, and any section a sim adds */
.k-lab-readout { display: flex; flex-direction: column; min-inline-size: 0; }
.k-lab-rs { padding-block-end: var(--sp-14); min-inline-size: 0; }
.k-lab-rs:not([hidden]) ~ .k-lab-rs { padding-block-start: var(--sp-14); border-block-start: var(--hairline) solid var(--line); }
.k-lab-rs-h { display: flex; align-items: baseline; gap: var(--sp-8); margin-block-end: var(--sp-8); }
.k-lab-rs-h > h3 { margin: 0; }
.k-lab-rs-meta { margin-inline-start: auto; font-size: var(--fs-11-5); color: var(--muted); white-space: nowrap; }
.k-lab-rs-b { font-size: var(--fs-13); line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere; }
.k-lab-now { margin: 0; font-size: var(--fs-14); line-height: 1.55; text-wrap: pretty; color: var(--text); }
.k-lab-big { display: block; font: var(--weight-semibold) var(--fs-26) var(--font-mono); color: var(--sim-hue); overflow-wrap: anywhere; }
.k-lab-work { margin: var(--sp-6) 0 0; font: var(--fs-12-5) / 1.6 var(--font-mono); color: var(--text-2); }
.k-lab-sl > input { --w: var(--lab-range-w); }
.k-lab-sl-v { min-inline-size: 4ch; font-size: var(--fs-12-5); color: var(--text); }
.k-lab-em { font-weight: var(--weight-semibold); color: var(--text); }
.k-lab-em[data-tone~="hot"], .k-lab-kv dd[data-tone~="hot"] { color: var(--crimson); }
.k-lab-em[data-tone~="done"], .k-lab-kv dd[data-tone~="done"] { color: var(--teal); }
.k-lab-em[data-tone~="front"], .k-lab-kv dd[data-tone~="front"] { color: var(--amber); }
.k-lab-em[data-tone~="ink"], .k-lab-kv dd[data-tone~="ink"] { color: var(--sim-hue); }
.k-lab-em[data-tone~="mute"], .k-lab-kv dd[data-tone~="mute"] { color: var(--muted); }
.k-lab-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-6) var(--sp-14); margin: 0; font-size: var(--fs-13); }
.k-lab-kv > dt { color: var(--muted); }
.k-lab-kv > dd { margin: 0; text-align: end; color: var(--text); overflow-wrap: anywhere; }
.k-lab-keys { display: flex; flex-wrap: wrap; gap: var(--sp-6) var(--sp-14); margin: 0; padding: 0; list-style: none; font-size: var(--fs-12); color: var(--text-2); }
.k-lab-keys > li { display: inline-flex; align-items: center; gap: var(--sp-6); }
.k-lab-key { flex: 0 0 auto; inline-size: var(--sp-10); block-size: var(--sp-10); border-radius: 50%; box-shadow: inset 0 0 0 var(--sp-2) var(--line); }
.k-lab-key[data-mark="ring-done"] { box-shadow: inset 0 0 0 var(--sp-2) var(--teal); }
.k-lab-key[data-mark="ring-front"] { box-shadow: inset 0 0 0 var(--sp-2) var(--amber); }
.k-lab-key[data-mark="ring-hot"] { box-shadow: inset 0 0 0 var(--sp-2) var(--crimson); }
.k-lab-key[data-mark="ring-ink"] { box-shadow: inset 0 0 0 var(--sp-2) var(--sim-hue); }
.k-lab-key[data-mark="fill-done"] { background: var(--teal); box-shadow: none; }
.k-lab-key[data-mark="fill-hot"] { background: var(--crimson); box-shadow: none; }
.k-lab-key[data-mark="fill-front"] { background: var(--amber); box-shadow: none; }
.k-lab-key[data-mark="fill-ink"] { background: var(--sim-hue); box-shadow: none; }
.k-lab-key[data-mark="fill-mute"] { background: var(--s2); }
.k-lab-key[data-mark^="line-"] { block-size: var(--sp-3); border-radius: var(--r-2); box-shadow: none; background: var(--text-2); }
.k-lab-key[data-mark="line-hot"] { background: var(--crimson); }
.k-lab-key[data-mark="line-done"] { background: var(--teal); }
.k-lab-key[data-mark="line-front"] { background: var(--amber); }
.k-lab-key[data-mark="line-ink"] { background: var(--sim-hue); }
.k-lab-key[data-mark="area-ink"] { border-radius: var(--r-2); background: color-mix(in oklch, var(--sim-hue) 24%, transparent); box-shadow: none; }
.k-lab-rtable { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-12); }
.k-lab-rtable th { padding: var(--sp-4) var(--sp-6); text-align: start; font-size: var(--fs-11); font-weight: var(--weight-medium); color: var(--muted); }
.k-lab-rtable td { padding: var(--sp-4) var(--sp-6); border-block-start: var(--hairline) solid var(--line); color: var(--text-2); white-space: nowrap; }
.k-lab-rtable tr[data-state~="live"] td { background: color-mix(in oklch, var(--crimson) 14%, transparent); color: var(--text); }
.k-lab-rtable tr[data-state~="done"] td { color: var(--muted); }
.k-lab-rlist { display: flex; flex-direction: column; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-12); }
.k-lab-rlist > li { display: flex; align-items: baseline; gap: var(--sp-8); padding: var(--sp-6) var(--sp-10); border-radius: var(--r-10); background: var(--s2); color: var(--text-2); }
.k-lab-rlist > li[data-state~="live"] { background: color-mix(in oklch, var(--crimson) 16%, var(--s2)); color: var(--text); }
.k-lab-rlist > li[data-state~="done"] { background: none; color: var(--muted); }
.k-lab-rlist-n { font-family: var(--font-mono); color: var(--muted); }
.k-lab-rlist-v { margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--fs-11-5); color: var(--muted); }
.k-lab-edges { display: flex; flex-wrap: wrap; gap: var(--sp-6) var(--sp-12); }
.k-lab-stage[data-state~="editing"] .k-sv-drag { cursor: grab; stroke-dasharray: 4 3; }
.k-lab[data-state~="embedded"] .k-lab-body { grid-template-columns: minmax(0, 1fr); gap: var(--sp-14); }
.k-lab[data-state~="embedded"] .k-lab-readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-14) var(--sp-22); align-items: start; }
.k-lab[data-state~="embedded"] .k-lab-rs { padding: 0; border: 0; }
.k-lab[data-state~="embedded"] .k-lab-body[data-kind="trace"] { grid-template-columns: minmax(0, var(--lab-code-w)) minmax(0, 1fr); }
.k-lab[data-state~="embedded"] .k-lab-body[data-kind="trace"] > .k-lab-readout { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }

/* ---------- the Trace Lab (20f): code · structure · trace ---------- */
.k-lab-body[data-kind="trace"] { grid-template-columns: minmax(0, var(--lab-code-w)) minmax(0, 1fr) var(--lab-read-w); }
.k-lab-body[data-kind="trace"] > .k-lab-stage { aspect-ratio: 4 / 5; }
/* text labs (lab.js `work`): the editor and its output in the stage's
   column, as panes on the code ground — the readout beside is the same */
.k-lab-workpane { display: flex; flex-direction: column; gap: var(--sp-12); min-inline-size: 0; }
.k-lab-pane { display: flex; flex-direction: column; min-inline-size: 0; border-radius: var(--r-16); background: var(--code-bg); overflow: hidden; }
.k-lab-pane-h { display: flex; align-items: baseline; gap: var(--sp-8); padding: var(--sp-12) var(--sp-14) var(--sp-6); }
.k-lab-pane-tag { margin-inline-start: auto; font-size: var(--fs-11-5); color: var(--muted); }
.k-lab .k-lab-pane .k-lab-editor { min-block-size: 0; margin: 0; padding: var(--sp-6) var(--sp-14) var(--sp-14); border: 0; border-radius: 0; background: none; box-shadow: none; font-size: var(--fs-13); line-height: 1.6; color: var(--text); }
.k-lab .k-lab-pane .k-lab-editor[data-mono] { font-family: var(--font-mono); }
.k-lab .k-lab-pane .k-lab-editor:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: calc(var(--focus-width) * -1); }
.k-lab-pane-out { padding: var(--sp-4) var(--sp-14) var(--sp-14); font-size: var(--fs-13); line-height: 1.7; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.k-lab-pane-out:empty { display: none; }
/* code is read character by character here: >= stays two characters */
.k-lab-pane :is(.k-lab-editor, .k-lab-pane-out), .k-lab-rtable, .k-lab-deriv, .k-lab-controls input { font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0; }
.k-lab-pane > .k-lab-tablescroll, .k-lab-pane > .k-lab-pane-body { margin: 0 var(--sp-14) var(--sp-14); }
.k-lab-tablescroll::before { background: linear-gradient(90deg, var(--code-bg) 20%, transparent); }
.k-lab-tablescroll::after { background: linear-gradient(270deg, var(--code-bg) 20%, transparent); }
.k-lab-pane .k-n-table th { background: var(--s1); }
.k-lab-pane-body { display: flex; flex-direction: column; gap: var(--sp-10); min-inline-size: 0; }
.k-lab-chart { position: relative; aspect-ratio: var(--lab-chart-ar); margin: 0 var(--sp-14) var(--sp-14); }
.k-lab-chart > .k-sv { position: absolute; inset: 0; }
.k-lab-big[data-tone~="hot"] { color: var(--crimson); }
.k-lab-big[data-tone~="done"] { color: var(--teal); }
.k-lab-deriv { margin: 0; padding-inline-start: var(--sp-20); font: var(--fs-12-5) / 1.8 var(--font-mono); color: var(--text-2); overflow-wrap: anywhere; }
.k-lab-deriv > li:last-child { color: var(--text); }
.k-lab-tag { display: inline-block; padding: 0 var(--sp-6); border-radius: var(--r-6); background: var(--s2); font: var(--fs-12) var(--font-mono); color: var(--text-2); }

/* the phone crop (lab.js crop()): the stage takes the drawing's shape */
.k-lab-stage[data-state~="cropped"] { aspect-ratio: var(--lab-ar, 16 / 9); }
.k-lab-codepane { display: flex; flex-direction: column; min-inline-size: 0; border-radius: var(--r-16); background: var(--code-bg); overflow: hidden; }
.k-lab-code-h { display: flex; align-items: baseline; gap: var(--sp-8); padding: var(--sp-12) var(--sp-14) var(--sp-8); }
.k-lab-code-tag { margin-inline-start: auto; font-size: var(--fs-11-5); color: var(--muted); }
.k-lab-code-l { margin: 0; padding: 0 0 var(--sp-12); list-style: none; overflow-x: auto; font: var(--fs-12-5) / 1.85 var(--font-mono); color: var(--text); }
.k-lab-cl { display: flex; gap: var(--sp-10); padding-inline: var(--sp-10) var(--sp-14); white-space: pre; }
.k-lab-cl > code { font: inherit; color: inherit; }
.k-lab-cl-n { flex: 0 0 auto; min-inline-size: 2.5ch; text-align: end; color: var(--muted); }
.k-lab-cl[data-state~="run"] { background: color-mix(in oklch, var(--crimson) 16%, transparent); box-shadow: inset var(--bar-3) 0 0 var(--crimson); }
.k-lab-cl[data-state~="run"] > .k-lab-cl-n { color: var(--crimson); }
.k-lab-cl-empty { color: var(--muted); white-space: normal; }
.k-lab-trace-table { inline-size: 100%; border-collapse: collapse; font: var(--fs-12) var(--font-mono); }
.k-lab-trace-wrap { max-block-size: var(--lab-trace-h); overflow: auto; }
.k-lab-trace-table th { white-space: nowrap; padding: var(--sp-6) var(--sp-8); border-block-end: var(--hairline) solid var(--line); text-align: start; font-size: var(--fs-11); font-weight: var(--weight-medium); color: var(--muted); }
.k-lab-trace-table td { padding: var(--sp-5) var(--sp-8); border-block-end: var(--hairline) solid var(--line); color: var(--text-2); white-space: nowrap; }
.k-lab-trace-table td:last-child { white-space: normal; min-inline-size: 12ch; }
.k-lab-trace-table tr[data-state~="live"] td { background: color-mix(in oklch, var(--crimson) 14%, transparent); color: var(--text); }
.k-lab-trace-table tr[data-state~="next"] td { border: var(--hairline) dashed var(--line); text-align: center; font-size: var(--fs-11-5); color: var(--muted); }

/* ---------- the OOP sandbox as a small IDE (19a–19f) ---------- */
.k-cs-kw { color: var(--syn-kw); }
.k-cs-ty { color: var(--syn-fn); }
.k-cs-cm { color: var(--syn-com); font-style: italic; }
.k-cs-cl { color: var(--syn-str); }
.k-ide { display: flex; flex-direction: column; min-inline-size: 0; border-radius: var(--r-24); background: var(--s1); overflow: hidden; }
.k-ide-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); padding: var(--sp-10) var(--sp-14); border-block-end: var(--hairline) solid var(--line); }
.k-ide-bar > .k-btn[aria-pressed="true"] { background: var(--s3); color: var(--text); }
.k-ide-body { display: grid; grid-template-columns: var(--ide-tree-w) minmax(0, 1fr); block-size: var(--ide-h); min-block-size: 0; }
.k-ide-body[data-side] { grid-template-columns: var(--ide-tree-w) minmax(0, 1fr) var(--ide-cs-w); }
/* the file tree */
.k-ide-tree { display: flex; flex-direction: column; min-block-size: 0; border-inline-end: var(--hairline) solid var(--line); }
.k-ide-tree-h { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-12) var(--sp-14) var(--sp-6); }
.k-ide-tree-h > .k-iconbtn { margin-inline-start: auto; }
.k-ide-tree-n { font-size: var(--fs-11); color: var(--muted); }
.k-ide-files { flex: 1 1 auto; min-block-size: 0; margin: 0; padding: 0 var(--sp-8); overflow-y: auto; list-style: none; }
.k-ide-file { display: flex; align-items: center; gap: var(--sp-4); padding-inline-start: calc(var(--depth, 0) * var(--sp-18)); border-radius: var(--r-10); font-size: var(--fs-13); }
.k-ide-file[aria-current="true"] { background: var(--s2); }
.k-ide-file[data-state~="drop"] { box-shadow: inset 0 0 0 var(--hairline) var(--teal); }
.k-ide-file-name { flex: 1 1 auto; min-inline-size: 0; display: flex; align-items: center; gap: var(--sp-8); min-block-size: var(--hit); padding: var(--sp-4) var(--sp-8); border-radius: var(--r-10); text-align: start; color: var(--text); }
.k-ide-badge { flex: 0 0 auto; padding: 0 var(--sp-4); border-radius: var(--r-6); background: color-mix(in oklch, var(--syn-fn) 18%, transparent); font-size: var(--fs-11); font-weight: var(--weight-bold); color: var(--syn-fn); }
.k-ide-file[data-state~="error"] .k-ide-badge { background: color-mix(in oklch, var(--red) 20%, transparent); color: var(--red); }
.k-ide-cls { min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-ide-abs { font-style: italic; }
.k-ide-ext { color: var(--muted); }
.k-ide-tag { font-size: var(--fs-11); color: var(--muted); }
.k-ide-dot { inline-size: var(--sp-6); block-size: var(--sp-6); flex: 0 0 auto; margin-inline: var(--sp-4); border-radius: 50%; background: var(--red); }
.k-ide-rename-wrap { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-4) 0; }
.k-ide-rename { flex: 1 1 0; min-inline-size: 0; padding: var(--sp-4) var(--sp-8); border-radius: var(--r-8); background: var(--bg); box-shadow: inset 0 0 0 var(--hairline) var(--line); font: var(--fs-13) var(--font-mono); color: var(--text); }
.k-ide-rename[data-state~="error"] { box-shadow: inset 0 0 0 var(--hairline) var(--red); }
.k-ide-rename-why { flex: 1 1 100%; margin: 0; font-size: var(--fs-12); color: var(--red); }
.k-ide-rename-why:empty { display: none; }
.k-ide-tree-foot { margin: 0; padding: var(--sp-12) var(--sp-14); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-12); line-height: var(--lh-body); color: var(--muted); }
/* the editor: rows that read like code, numbered in a gutter */
.k-ide-editor { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; background: var(--bg); }
.k-ide-tabs { display: flex; gap: var(--sp-2); padding: var(--sp-8) var(--sp-10) 0; overflow-x: auto; scrollbar-width: none; border-block-end: var(--hairline) solid var(--line); }
.k-ide-tab { display: inline-flex; align-items: center; gap: var(--sp-2); padding-inline: var(--sp-10) var(--sp-4); border-radius: var(--r-10) var(--r-10) 0 0; font: var(--fs-12-5) var(--font-mono); color: var(--muted); }
.k-ide-tab[data-state~="on"] { background: var(--s1); color: var(--text); box-shadow: inset 0 var(--bar-3) 0 var(--crimson); }
.k-ide-tab-b { padding: var(--sp-8) var(--sp-2); color: inherit; white-space: nowrap; }
.k-ide-tab-x { display: inline-grid; place-items: center; padding: 0; line-height: 1; inline-size: var(--hit-dense); block-size: var(--hit-dense); border-radius: 50%; color: var(--muted); }
.k-ide-tab-x:hover { background: var(--s2); color: var(--text); }
.k-ide-doc { flex: 1 1 auto; min-block-size: 0; margin: 0; padding: var(--sp-14) var(--sp-8) var(--sp-24) 0; overflow: auto; list-style: none; counter-reset: ide-ln; font-size: var(--fs-13); line-height: 1.5; }
.k-ide-line { counter-increment: ide-ln; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); min-block-size: var(--hit); padding-inline-start: var(--ide-ln-w); position: relative; }
.k-ide-line::before { content: counter(ide-ln); position: absolute; inset-inline-start: 0; inline-size: calc(var(--ide-ln-w) - var(--sp-12)); text-align: end; font-size: var(--fs-11-5); color: var(--syn-com); }
.k-ide-line.k-ide-in1 { padding-inline-start: calc(var(--ide-ln-w) + var(--sp-24)); }
.k-ide-member:hover, .k-ide-member:focus-within { background: color-mix(in oklch, var(--text) 4%, transparent); }
.k-ide-errline { counter-increment: none; padding-block: var(--sp-6); }
.k-ide-errline::before { content: none; }
.k-ide-errline[hidden] { display: none; }
.k-ide-punct { color: var(--text-2); }
.k-ide-in, .k-ide-pick { field-sizing: content; min-inline-size: 3ch; min-block-size: var(--hit-dense); padding: var(--sp-2) var(--sp-6); border: 0; border-radius: var(--r-8); background: var(--s1); box-shadow: inset 0 0 0 var(--hairline) var(--line); font: inherit; color: var(--text); }
.k-ide-in:focus-visible, .k-ide-pick:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--hairline); }
.k-ide-in[data-state~="error"], .k-ide-pick[data-state~="error"] { box-shadow: inset 0 0 0 var(--hairline) var(--red); color: var(--red); }
.k-ide-name { font-weight: var(--weight-bold); color: var(--syn-fn); }
.k-ide-type { color: var(--syn-fn); }
.k-ide-acc { color: var(--syn-kw); }
.k-ide-base { color: var(--syn-fn); }
.k-ide-mod[data-virt="override"] { background: color-mix(in oklch, var(--teal) 16%, transparent); color: var(--teal); }
.k-ide-mod[data-virt="virtual"] { background: color-mix(in oklch, var(--amber) 16%, transparent); color: var(--amber); }
.k-ide-mod[data-virt="abstract"] { background: color-mix(in oklch, var(--crimson) 16%, transparent); color: var(--crimson-soft); }
.k-ide-mod[data-virt="none"] { color: var(--muted); }
.k-ide-chip { min-block-size: var(--hit-dense); padding: 0 var(--sp-10); border-radius: var(--r-pill); box-shadow: inset 0 0 0 var(--hairline) var(--line); font: inherit; font-size: var(--fs-12); color: var(--muted); }
.k-ide-chip[aria-pressed="true"] { background: color-mix(in oklch, var(--crimson) 18%, transparent); box-shadow: none; color: var(--crimson-soft); }
.k-ide-rm { margin-inline-start: auto; opacity: 0; }
.k-ide-member:hover .k-ide-rm, .k-ide-rm:focus-visible { opacity: 1; }
@media (hover: none) {
.k-ide-rm { opacity: 1; }
}
.k-ide-add { min-block-size: var(--hit-dense); padding: 0 var(--sp-12); border-radius: var(--r-10); box-shadow: inset 0 0 0 var(--hairline) var(--line); font: inherit; font-size: var(--fs-12-5); color: var(--text-2); }
.k-ide-add:hover { background: var(--s1); color: var(--text); }
.k-ide-err { display: flex; align-items: center; gap: var(--sp-12); inline-size: 100%; padding: var(--sp-10) var(--sp-14); border-radius: var(--r-14); background: color-mix(in oklch, var(--red) 12%, var(--s1)); font-family: var(--font-ui); font-size: var(--fs-13); }
.k-ide-err-mark { inline-size: var(--sp-22); block-size: var(--sp-22); flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--red); font-weight: var(--weight-bold); color: var(--bg); }
.k-ide-err-t { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sp-2); }
.k-ide-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); max-inline-size: var(--lab-lock-card-w); padding: var(--sp-24); border-radius: var(--r-24); background: var(--s1); text-align: center; }
.k-ide-empty > p { margin: 0 0 var(--sp-6); font-size: var(--fs-13); color: var(--text-2); }
/* the generated C# */
.k-ide-cs { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; border-inline-start: var(--hairline) solid var(--line); background: var(--code-bg); }
.k-ide-cs-h { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-8) var(--sp-12); border-block-end: var(--hairline) solid var(--line); font-size: var(--fs-13); }
.k-ide-cs-meta { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }
.k-ide-paused { margin: var(--sp-12) var(--sp-12) 0; padding: var(--sp-10) var(--sp-12); border-radius: var(--r-12); background: color-mix(in oklch, var(--red) 12%, transparent); font-size: var(--fs-12-5); color: var(--text-2); }
.k-ide-paused > b { color: var(--red); }
.k-ide-code { flex: 1 1 auto; min-block-size: 0; margin: 0; padding: var(--sp-12) 0; overflow: auto; counter-reset: ide-cs; font-size: var(--fs-12-5); line-height: 1.75; white-space: pre; color: var(--text); }
.k-ide-cl { display: inline-block; min-inline-size: 100%; padding-inline: var(--sp-8) var(--sp-14); counter-increment: ide-cs; }
.k-ide-cl::before { content: counter(ide-cs); display: inline-block; inline-size: var(--ide-ln-w); padding-inline-end: var(--sp-12); text-align: end; color: var(--syn-com); }
.k-ide-cl[data-state~="lit"] { background: color-mix(in oklch, var(--teal) 8%, transparent); box-shadow: inset var(--bar-3) 0 0 var(--teal); }
.k-ide-cs[data-state~="paused"] .k-ide-code { opacity: 0.5; }
/* Diagram mode: an infinite dotted canvas */
.k-ide-canvas { position: relative; min-inline-size: 0; min-block-size: 0; overflow: hidden; cursor: grab; touch-action: none; background: radial-gradient(circle, color-mix(in oklch, var(--text) 12%, transparent) var(--hairline), transparent calc(var(--hairline) * 1.6)) 0 0 / var(--ide-dot-grid) var(--ide-dot-grid), var(--bg); }
.k-ide-canvas[data-state~="panning"] { cursor: grabbing; }
.k-ide-world { position: absolute; inset-block-start: 0; inset-inline-start: 0; transform-origin: 0 0; transform: translate(var(--wx, 0), var(--wy, 0)) scale(var(--wz, 1)); }
.k-ide-links { position: absolute; inset-block-start: 0; inset-inline-start: 0; max-inline-size: none; overflow: visible; pointer-events: none; }
.k-ide-link { fill: none; stroke: var(--text-2); stroke-width: 1.5; }
.k-ide-tri { fill: var(--bg); stroke: var(--text-2); stroke-width: 1.5; }
.k-ide-card { position: absolute; inset-inline-start: var(--x, 0); inset-block-start: var(--y, 0); inline-size: var(--oop-card-w); border-radius: var(--r-14); background: var(--s1); box-shadow: inset 0 0 0 var(--hairline) var(--line), var(--elev-2); font: var(--fs-12-5) var(--font-mono); cursor: pointer; user-select: none; }
.k-ide-card[aria-current="true"] { box-shadow: inset 0 0 0 var(--focus-width) var(--crimson), var(--elev-2); }
.k-ide-card[data-state~="error"] { box-shadow: inset 0 0 0 var(--hairline) var(--red), var(--elev-2); }
.k-ide-card-h { display: flex; flex-direction: column; align-items: center; padding: var(--sp-8) var(--sp-10); border-radius: var(--r-14) var(--r-14) 0 0; background: var(--s2); color: var(--syn-fn); }
.k-ide-stereo { font-size: var(--fs-11); color: var(--muted); }
.k-ide-card-l { margin: 0; padding: var(--sp-8) var(--sp-12); list-style: none; border-block-start: var(--hairline) solid var(--line); line-height: 1.6; color: var(--text-2); }
.k-ide-hint, .k-ide-key { position: absolute; inset-block-start: var(--sp-12); z-index: 1; padding: var(--sp-4) var(--sp-12); border-radius: var(--r-pill); background: var(--s1); box-shadow: inset 0 0 0 var(--hairline) var(--line); font-size: var(--fs-12); color: var(--muted); pointer-events: none; }
.k-ide-hint { inset-inline-start: var(--sp-12); }
.k-ide-key { inset-inline-end: var(--sp-12); }
.k-ide-key > b { color: var(--syn-kw); font-weight: var(--weight-bold); }
.k-ide-mini { position: absolute; inset-block-start: calc(var(--sp-12) + var(--sp-40)); inset-inline-end: var(--sp-12); z-index: 1; inline-size: var(--ide-mini-w); block-size: var(--ide-mini-h); padding: var(--sp-4); border-radius: var(--r-12); background: var(--s1); box-shadow: inset 0 0 0 var(--hairline) var(--line); cursor: pointer; }
.k-ide-mini > svg { display: block; inline-size: 100%; block-size: 100%; }
.k-ide-mini-c { fill: var(--s3); }
.k-ide-mini-on { fill: color-mix(in oklch, var(--crimson) 45%, var(--s3)); }
.k-ide-mini-v { fill: none; stroke: var(--crimson); stroke-width: 1.5; }
.k-ide-zoom { position: absolute; inset-block-end: var(--sp-12); inset-inline-end: var(--sp-12); z-index: 1; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2); border-radius: var(--r-pill); background: var(--s1); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-ide-zoom-b { min-inline-size: var(--hit); min-block-size: var(--hit); padding: 0 var(--sp-8); border-radius: var(--r-pill); font-size: var(--fs-13); color: var(--text-2); }
.k-ide-zoom-b:hover { background: var(--s2); color: var(--text); }
.k-ide-zoom-v { min-inline-size: var(--sp-40); text-align: center; font-size: var(--fs-12); }
/* the status bar */
.k-ide-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6) var(--sp-14); padding: var(--sp-8) var(--sp-14); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-11-5); color: var(--muted); }
.k-ide-st-dot { inline-size: var(--sp-6); block-size: var(--sp-6); border-radius: 50%; background: var(--green); }
.k-ide-st-dot[data-tone="red"] { background: var(--red); }
.k-ide-st-p { color: var(--green); }
.k-ide-st-p[data-tone="red"] { color: var(--red); }

@media (max-width: 1240px) {
.k-lab-body[data-kind="trace"] { grid-template-columns: minmax(0, var(--lab-code-w)) minmax(0, 1fr); }
.k-lab-body[data-kind="trace"] > .k-lab-readout { grid-column: 1 / -1; }
}

@media (max-width: 1080px) {
/* the generated C# goes to its tab below the editor's width */
.k-ide-body[data-side] { grid-template-columns: var(--ide-tree-w) minmax(0, 1fr); }
.k-ide-body[data-side] > .k-ide-cs { display: none; }
.k-ide-side-btn { display: none; }
}

@media (max-width: 860px) {
/* the areas become one declared chip scroller over the groups */
.k-lab-index { grid-template-columns: minmax(0, 1fr); gap: var(--sp-14); }
.k-lab-areas-scroll { display: flex; }
.k-lab-areas-scroll > .k-scroller-arrow { display: grid; }
.k-lab-areas { position: static; flex-direction: row; flex-wrap: nowrap; gap: var(--sp-6); }
.k-lab-area-h { display: none; }
.k-lab-area { flex: 0 0 auto; border-radius: var(--r-pill); background: var(--s1); white-space: nowrap; }
.k-lab-lockwrap { grid-template-columns: minmax(0, 1fr); gap: var(--sp-14); }
.k-lab-rec-wrap { grid-template-columns: minmax(0, 1fr); }
/* the readout moves under the stage, in two columns */
.k-lab-body { grid-template-columns: minmax(0, 1fr); gap: var(--sp-14); }
.k-lab-readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-14) var(--sp-22); align-items: start; }
.k-lab-rs, .k-lab-rs:not([hidden]) ~ .k-lab-rs { padding: 0; border: 0; }
}

@media (max-width: 700px) {
/* the Trace Lab stacks too: code, the structure, then the trace (its
   two-column tier above left the structure a zero-width column) */
.k-lab-body[data-kind="trace"], .k-lab[data-state~="embedded"] .k-lab-body[data-kind="trace"] { grid-template-columns: minmax(0, 1fr); }
/* the IDE stacks: the file list above the editor, both at their own height */
.k-ide-body, .k-ide-body[data-side] { grid-template-columns: minmax(0, 1fr); block-size: auto; }
.k-ide-tree { border-inline-end: 0; border-block-end: var(--hairline) solid var(--line); }
.k-ide-files { padding-block-end: var(--sp-8); }
.k-ide-tree-foot { display: none; }
.k-ide-doc { overflow: visible; }
.k-ide-code { max-block-size: var(--ide-h); }
.k-ide-canvas { block-size: min(var(--ide-h), 60dvh); }
.k-ide-mini, .k-ide-hint { display: none; }
.k-ide-key { inset-inline-start: var(--sp-12); font-size: var(--fs-11); }
/* the toolbar is two even rows: the view switch and Add class, then the
   C# commands, every button its full width (it wrapped raggedly in three) */
.k-ide-bar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.k-ide-bar > .k-spacer { display: none; }
.k-ide-modes { grid-column: span 4; display: flex; min-inline-size: 0; }
.k-ide-modes > .k-seg-item { flex: 1 1 0; justify-content: center; }
.k-ide-bar > .k-btn { grid-column: span 2; min-inline-size: 0; padding-inline: var(--sp-8); white-space: nowrap; }
/* a long model scrolls inside the file list, so the editor stays near */
.k-ide-files { max-block-size: calc(var(--hit-coarse) * 4.5); }
/* the C# header keeps its two buttons; the line count gives way */
.k-ide-cs-h > b { white-space: nowrap; }
.k-ide-cs-meta { flex: 0 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 560px) {
.k-lab-search { inline-size: 100%; margin-inline-start: 0; }
.k-lab-toolbar { inline-size: 100%; }
.k-lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); }
.k-lab-card-title { font-size: var(--fs-13-5); }
.k-lab-lockstage { min-block-size: 0; padding: var(--sp-16); }
.k-lab-bit, .k-lab-bw { inline-size: var(--lab-bit-sm); }
.k-lab-bit { block-size: var(--lab-bit-sm); font-size: var(--fs-15); }
.k-lab-readout, .k-lab[data-state~="embedded"] .k-lab-readout { grid-template-columns: minmax(0, 1fr); }
/* a phone's stage is too small to share with chrome: the zoom control
   shows only while the drawing pans, and the fit note steps aside */
.k-lab-stage:not([data-state~="pannable"]) > .k-lab-zoom, .k-lab-stage .k-lab-stage-note, .k-lab-bar-sep { display: none; }
/* the hint keeps its place only where the crop left it headroom */
.k-lab-stage:not([data-state~="cropped"]) > .k-lab-stage-hint { display: none; }
.k-lab-bar-gap { display: none; }
/* the IDE: a narrower line gutter, and "Clear" keeps its full name for
   assistive tech only */
.k-ide { --ide-ln-w: var(--sp-32); }
/* the NEA verdicts: a row is a small card — number, objective, verdict,
   then the reason under them — rather than four columns of prose */
.k-lab-verdicts, .k-lab-verdicts tbody { display: block; }
.k-lab-verdicts thead { display: none; }
.k-lab-verdicts tr { display: grid; grid-template-columns: var(--sp-20) minmax(0, 1fr) auto; gap: var(--sp-4) var(--sp-8); padding-block: var(--sp-10); border-block-start: var(--hairline) solid var(--line); }
.k-lab-verdicts tr:first-child { border-block-start: 0; }
.k-lab-verdicts td { display: block; padding: 0; border: 0; }
.k-lab-verdicts td:nth-child(4) { grid-column: 2 / -1; font-size: var(--fs-12-5); color: var(--muted); }
.k-ide-long { position: absolute; inline-size: var(--hairline); block-size: var(--hairline); margin: calc(var(--hairline) * -1); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
.k-lab-bit, .k-lab-fsm-cell, .k-lab-switch, .k-lab-rec-frame, .k-lab-toggle-t, .k-lab-toggle-t::after { transition: none; }
}

/* touch: the 44px minimum (base.css) raised the HEIGHT of every button,
   so a round control drew as a 28×44 oval (phone review, after part 2).
   A round control grows as a circle; a tiny inline mark keeps the
   documented dense size (invariant 69) instead of stretching. */
@media (pointer: coarse) {
.k-ide-tab-x { min-inline-size: var(--hit-dense); min-block-size: var(--hit-dense); }
}

/* ---------- the NEA tools (labs/nea-tools.js): sections, audits, verdicts ---------- */
.k-lab-row { display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-12) var(--sp-16); border-radius: var(--r-12); background: var(--s2); }
.k-lab-total { padding: var(--sp-12) var(--sp-16); border-radius: var(--r-12); background: var(--s3); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-lab-fieldset { display: flex; flex-direction: column; gap: var(--sp-6); margin: 0; padding: var(--sp-10) var(--sp-16); border: var(--hairline) solid var(--line); border-radius: var(--r-12); }
.k-lab-fieldset > legend { padding-inline: var(--sp-6); font-size: var(--fs-12-5); font-weight: var(--weight-semibold); color: var(--text-2); }
[data-verdict="good"] { color: var(--green); }
[data-verdict="check"] { color: var(--amber); }
[data-verdict="rewrite"] { color: var(--alarm); }

}