/* Prism shared components. Uses skin tokens only (see SKINS.md). No shadows, blurs, filters or glows. */
*{box-sizing:border-box;margin:0;padding:0}

body{background:var(--chassis);color:var(--ink);font-family:var(--type-ui)}
.inst{position:absolute;inset:0;overflow:hidden;background:var(--chassis)}
.ab{position:absolute}
.row{display:flex;align-items:center}.row.sb{justify-content:space-between}.col{display:flex;flex-direction:column}
/* tile: filled (Tiles) or ruled (Paper) — same box either way */
.t{position:absolute;background:var(--fill);border-radius:var(--radius-tile);border-top:var(--rule-width) solid var(--rule-color);padding:10px 12px;display:flex;flex-direction:column;gap:7px;overflow:hidden;color:var(--ink)}
.t>*{flex-shrink:0}
.t.inv{background:var(--inverse-bg);color:var(--inverse-text);--control-bg:var(--inverse-control-bg);--seg-bg:var(--inverse-seg-bg);--control-on-bg:var(--inverse-control-on-bg);--control-on-text:var(--inverse-control-on-text);--seg-on-bg:var(--inverse-seg-on-bg);--seg-on-text:var(--inverse-seg-on-text);--seg-on-line:var(--inverse-seg-on-line);--muted:var(--inverse-muted);--hairline:var(--inverse-rule);--knob-body:var(--knob-inverse-body);--knob-pointer:var(--knob-inverse-pointer);--knob-track:var(--knob-inverse-track);--knob-arc:var(--knob-inverse-arc);--ink:var(--inverse-text)}
.hd{display:flex;align-items:center;gap:8px;min-height:26px}
.hd .num{display:var(--section-number-display);font-family:var(--type-mono);font-size:11px;color:var(--muted);margin-right:2px}
.hd h2{font-family:var(--type-display);font-weight:var(--type-display-weight);font-size:var(--type-title-size);line-height:1;letter-spacing:-.01em;white-space:nowrap}
.hd .sp{flex:1}
.disp{position:relative;overflow:hidden;background:var(--display-bg);border-radius:var(--radius-display);color:var(--display-fg);--ink:var(--display-fg)}
.lab{position:absolute;background:var(--display-bg);padding:1px 5px;font-family:var(--type-mono);font-size:10.5px;color:var(--display-fg);white-space:nowrap}
.lab.ac{color:var(--accent-on-display)}
.knob{display:flex;flex-direction:column;align-items:center;min-width:var(--d)}
.knob svg{display:block}
.knob .kt{stroke:var(--knob-track)}.knob .ka{stroke:var(--knob-arc)}.knob .kb{fill:var(--knob-body)}.knob .kp{stroke:var(--knob-pointer)}.knob .km{stroke:var(--accent)}
.knob .lb{margin-top:4px;white-space:nowrap;font-size:var(--type-label-size);font-weight:var(--type-ui-weight-strong)}
.knob .v{white-space:nowrap;font-family:var(--type-mono);font-size:10px;color:var(--muted)}
.seg{display:inline-flex;white-space:nowrap;background:var(--seg-bg);border-radius:var(--radius-control);padding:2px;gap:2px}
.seg span{display:inline-block;white-space:nowrap;font-size:var(--type-label-size);font-weight:var(--type-ui-weight-strong);padding:3px 7px;border-radius:var(--radius-control);color:var(--muted);border-bottom:2px solid transparent}
.seg span.on{background:var(--seg-on-bg);color:var(--seg-on-text);border-bottom-color:var(--seg-on-line)}
.seg.sm span{padding:3px 4px;font-size:10.5px}
.dd{display:inline-flex;justify-content:space-between;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;height:22px;padding:0 7px;border-radius:var(--radius-control);background:var(--control-bg);font-family:var(--type-mono);font-size:var(--type-value-size)}
.dd i{font-style:normal;opacity:.6;font-size:.8em}
.btn{display:inline-flex;align-items:center;white-space:nowrap;height:22px;padding:0 8px;border-radius:var(--radius-control);background:var(--control-bg);font-size:var(--type-label-size);font-weight:var(--type-ui-weight-strong)}
.btn.on{background:var(--control-on-bg);color:var(--control-on-text)}
.stp{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.stp .lb{font-size:10px;font-weight:var(--type-ui-weight-strong);color:var(--muted)}
.stp .sv{font-family:var(--type-mono);font-size:11px;background:var(--control-bg);border-radius:var(--radius-control);padding:2px 6px;min-width:28px;text-align:center}
.ml{font-size:10.5px;font-weight:var(--type-ui-weight-strong);color:var(--muted);white-space:nowrap}
.mono{font-family:var(--type-mono);font-size:10.5px;white-space:nowrap}
.tag{font-family:var(--type-mono);font-size:10px;background:var(--tag-bg);color:var(--tag-text);padding:3px 6px;border-radius:4px;white-space:nowrap}
.chip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:var(--radius-control);background:var(--fill);border-top:var(--rule-width) solid var(--rule-color);color:var(--ink);font-size:11px;font-weight:var(--type-ui-weight-strong);white-space:nowrap}
.mbar{height:10px;border-radius:3px;background:var(--knob-track);position:relative;overflow:hidden}.mbar i{position:absolute;left:0;top:0;bottom:0;background:var(--knob-arc)}
.kg{display:grid;justify-items:center;row-gap:6px}
.hr{height:1px;background:var(--hairline)}
.big{font-family:var(--type-display);font-weight:var(--type-display-weight);line-height:1;letter-spacing:-.01em;white-space:nowrap}
/* table */
.tb{width:100%;border-collapse:collapse;font-size:11px}
.tb th{text-align:left;font-size:10px;font-weight:var(--type-ui-weight-strong);color:var(--muted);padding:0 6px 4px;white-space:nowrap}
.tb td{padding:0 6px;height:26px;border-top:1px solid var(--hairline);white-space:nowrap;overflow:hidden}
.tb tr.sel td{background:var(--control-bg)}
.tb .mono{font-size:10.5px}
/* cells / pads */
.cell{background:var(--control-bg);border-radius:var(--radius-control);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:var(--type-ui-weight-strong);overflow:hidden;white-space:nowrap}
.cell.on{background:var(--control-on-bg);color:var(--control-on-text)}
.cell.ac{background:var(--accent);color:var(--chassis)}
.empty{background:var(--empty)}
/* chrome */
.top{position:absolute;left:8px;right:8px;top:8px;height:44px;display:flex;align-items:center;gap:10px}
.word{font-family:var(--type-display);font-weight:var(--type-display-weight);font-size:30px;color:var(--chassis-text);letter-spacing:-.01em}
.mode{display:inline-flex;background:var(--inverse-control-bg);border-radius:calc(var(--radius-control) + 3px);padding:3px}
.mode span{font-size:13px;font-weight:700;padding:6px 12px;border-radius:var(--radius-control);color:var(--chassis-muted)}
.mode span.on{background:var(--chassis-text);color:var(--chassis)}
.tabs span{white-space:nowrap;font-size:12.5px;font-weight:var(--type-ui-weight-strong);color:var(--chassis-muted);padding:0 6px}
.tabs span.on{color:var(--chassis-text);text-decoration:underline;text-decoration-color:var(--seg-on-line-chrome,currentColor);text-underline-offset:6px;text-decoration-thickness:2px}
.lcd{background:var(--display-bg);border-radius:calc(var(--radius-control) + 3px);height:40px;display:flex;align-items:center;gap:10px;padding:0 12px;color:var(--display-fg);border-top:var(--rule-width) solid var(--rule-color)}
.lcd b{font-family:var(--type-display);font-weight:700;font-size:20px;white-space:nowrap}
.lcd small{font-family:var(--type-mono);font-size:10px;color:var(--display-dim);white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:calc(var(--radius-control) + 2px);background:var(--fill);border-top:var(--rule-width) solid var(--rule-color);color:var(--ink);font-size:12px;font-weight:700;white-space:nowrap}
.pill i{font-style:normal;font-family:var(--type-mono);font-weight:400;font-size:10.5px}
.stat{font-family:var(--type-mono);font-size:10.5px;color:var(--chassis-muted);line-height:1.25;white-space:nowrap}.stat b{color:var(--chassis-text);font-weight:500}
