/* components.css — Simple Fusion Reactor v5 (W1-A; PLAN_v5 §3.11). Hand-transcribed from the Isotope Viewer React bundle's inline styles (_ds_bundle.js) and the canvas inline styles (turns 7a/8a/5a). Requires tokens.css. No shadows, 1px radii, 90ms button transitions only. Chart chrome (.ch-*) lives in chart.css; cutaway (.cw-*) in cutaway.css; .q in tokens.css. v5 (A13, UI_REVIEW CH-3 · CH-4 · CH-5 · §4.1): text coral is --sfr-coral-text, faint text is --iv-ink-subtle (borders and graphics may keep coral-deep); no font-size below var(--text-min); the keyboard focus ring is 2 px var(--sfr-focus) at a 1-px offset everywhere (also on pressed / ink segments); every .btn, .seg button and .check row gives a pointer target at least var(--size-hit) tall. The v5 recipes (.range, .toast, .dialog, .chip) are at the end of the file. */ /* ========== FRAME (title 40 · body · status 24) ========== */ .frame{position:relative;width:var(--size-frame-w);height:var(--size-frame-h);background:var(--iv-paper);color:var(--iv-ink);font-family:var(--os-font-sans);font-weight:300;overflow:hidden;border:1px solid var(--iv-hairline-2);border-radius:var(--radius-control)} .frame-title{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:0 20px;height:var(--size-titlebar);background:var(--iv-surface-3);border-bottom:1px solid var(--iv-border);font-family:var(--os-font-mono);font-weight:400;text-transform:uppercase;font-variant-numeric:tabular-nums} .frame-brand{display:inline-flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:0.22em;color:var(--iv-ink);white-space:nowrap;text-decoration:none} .frame-brand:hover{color:var(--iv-ink-hover,var(--iv-ink))} .frame-brand:focus-visible{outline:2px solid var(--iv-coral-deep);outline-offset:2px} /* the OpenStar mark (favicon.ico at the site root, as in dipole-demo) */ .frame-brand::before{content:"";width:24px;height:24px;background:url(../favicon.ico) center/contain no-repeat;display:inline-block;flex:0 0 auto} .frame-crumb{display:inline-flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:0.18em;color:var(--iv-ink-muted);white-space:nowrap} .frame-crumb .sep{color:var(--iv-ink-subtle)} .frame-crumb .cur{color:var(--iv-ink)} .frame-right{justify-self:end;display:inline-flex;align-items:center;gap:14px;font-size:10.5px;letter-spacing:0.14em;color:var(--iv-ink-muted);white-space:nowrap} .frame-dataset{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border:1px solid var(--iv-rule);letter-spacing:0.16em} .frame-dataset.is-live::before{content:"";width:6px;height:6px;border-radius:var(--radius-full);background:var(--iv-coral)} .frame-body{position:absolute;top:41px;left:0;right:0;bottom:var(--size-statusbar)} .frame-status{position:absolute;left:0;right:0;bottom:0;height:var(--size-statusbar);display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:var(--iv-surface-3);border-top:1px solid var(--iv-hairline-2);font-family:var(--os-font-mono);font-weight:400;text-transform:uppercase;font-size:9.5px;letter-spacing:0.22em;color:var(--iv-ink-muted);font-variant-numeric:tabular-nums;white-space:nowrap} .frame-keys{display:inline-flex;align-items:center;gap:10px} .frame-keys .kbd{height:auto;padding:1px 6px;letter-spacing:0.08em;border-radius:0} /* ========== BODY GRID · RAIL · PANE HEADERS ========== */ .body-grid{display:grid;grid-template-columns:var(--size-rail-sfr) minmax(0,1fr) var(--size-plate);grid-template-rows:minmax(0,1fr);height:100%} .rail{background:var(--iv-surface-2);border-right:1px solid var(--iv-hairline);display:flex;flex-direction:column;min-height:0} .rail-body{padding:var(--pad-rail);display:flex;flex-direction:column;gap:16px;overflow:hidden;flex:1;min-height:0} .rail-body--fly{gap:14px} .centre{display:flex;flex-direction:column;min-width:0} .centre-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 20px 0 0;height:var(--size-colhead);border-bottom:1px solid var(--iv-hairline-2);flex:none;overflow:hidden} .centre-head-right{display:inline-flex;align-items:center;gap:10px} .centre-hint{font-family:var(--os-font-mono);font-weight:400;font-size:10.5px;letter-spacing:0.04em;color:var(--iv-ink-subtle);white-space:nowrap} .centre-body{flex:1;min-height:0;padding:var(--pad-centre);display:flex;flex-direction:column;gap:12px} .pane-head{display:flex;align-items:center;padding:0 16px;height:var(--size-colhead);border-bottom:1px solid var(--iv-hairline-2);flex:none;overflow:hidden} .pane-title{font-size:15px;line-height:1.2;letter-spacing:-0.005em;white-space:nowrap} .hr{height:1px;background:var(--iv-hairline);flex:none} .spacer{flex:1} .self-start{align-self:flex-start} /* ========== EYEBROW ========== */ .eyebrow{font-family:var(--os-font-mono);font-weight:400;font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--iv-ink-muted);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .eyebrow--accent{color:var(--sfr-coral-text)} .eyebrow-row{display:flex;align-items:center;justify-content:space-between} .eyebrow-row--baseline{align-items:baseline;margin-bottom:14px} .hint-right{font-family:var(--os-font-mono);font-weight:400;font-size:10px;letter-spacing:0.04em;color:var(--iv-ink-subtle)} /* ========== HINT (tooltip affordance) ========== */ .hint{border-bottom:1px dotted var(--iv-rule);cursor:help} .hint:hover,.hint.is-open{color:var(--iv-ink);border-bottom:1px solid var(--iv-ink)} /* ========== BUTTON ========== */ .btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--iv-border);background:var(--iv-surface);color:var(--iv-ink);padding:6px 12px;font-family:var(--os-font-mono);font-weight:400;font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;border-radius:var(--radius-control);line-height:1.2;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);font-variant-numeric:tabular-nums;appearance:none;-webkit-appearance:none;margin:0;white-space:nowrap} .btn:hover:not(:disabled){background:var(--iv-surface-hover)} .btn--primary{background:var(--iv-ink);color:#fff} .btn--primary:hover:not(:disabled){background:var(--iv-ink-hover)} .btn--ghost{border-color:var(--iv-rule);color:var(--iv-ink-muted)} .btn--ghost:hover:not(:disabled){background:var(--iv-surface-hover)} .btn--dashed{border-style:dashed;border-color:var(--iv-rule);color:var(--iv-ink-muted);text-transform:none;letter-spacing:0;font-size:11px} .btn--tight{padding:3px 8px;font-size:10px;letter-spacing:0.1em} .btn:disabled{opacity:0.35;cursor:default} .btn[hidden]{display:none} /* the recipe's display must not override the hidden attribute (e.g. a banner without [undo]) */ .btn:focus-visible{outline:2px solid var(--sfr-focus);outline-offset:1px} .iconbtn{width:var(--size-iconbtn);height:var(--size-iconbtn);border:1px solid var(--iv-rule);background:var(--iv-surface);display:inline-flex;align-items:center;justify-content:center;font-family:var(--os-font-mono);font-weight:400;font-size:11px;color:var(--iv-ink-muted);cursor:pointer;padding:0;border-radius:0;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)} .iconbtn:hover{background:var(--iv-surface-hover);color:var(--iv-ink)} .btn-row{display:flex;gap:8px;flex:none} .btn-row--wrap{gap:6px;flex-wrap:wrap} /* ========== SEGMENTED CONTROL ========== */ .seg{display:inline-flex;border:1px solid var(--iv-border);border-radius:var(--radius-control);overflow:hidden;overflow:clip;overflow-clip-margin:6px;vertical-align:middle} .seg>button{padding:7px 14px;background:var(--iv-surface);color:var(--iv-ink);border:0;border-right:1px solid var(--iv-border);font-family:var(--os-font-mono);font-weight:400;font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;line-height:normal;margin:0;appearance:none;-webkit-appearance:none;font-variant-numeric:tabular-nums;white-space:nowrap} .seg>button:last-child{border-right:0} .seg>button[aria-pressed="true"],.seg>button.is-on,.seg>button[role="radio"][aria-checked="true"]{background:var(--iv-ink);color:#fff} .seg>button:focus-visible{outline:2px solid var(--sfr-focus);outline-offset:1px;z-index:1} .seg--small>button{padding:3px 10px;font-size:10px;letter-spacing:0.1em} .seg--fill{display:flex;width:100%} .seg--fill>button{flex:1} .seg--sci>button{text-transform:none;letter-spacing:0.08em} /* physics symbols (p · T · n · α · S) keep their case */ .seg-pair{display:inline-flex;align-items:center;gap:6px;font-family:var(--os-font-mono);font-weight:400;font-size:10.5px;color:var(--iv-ink)} .seg-pairs{display:inline-flex;align-items:center;gap:14px} .seg-pairs--tight{gap:6px;font-size:10px} /* ========== TABS ========== */ .tabs{display:flex;border-bottom:1px solid var(--iv-border)} .tabs--bare{border-bottom:0} .tab{position:relative;background:transparent;color:var(--iv-ink-muted);border:0;border-right:1px solid var(--iv-hairline);padding:12px 22px;font-family:var(--os-font-mono);font-weight:400;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;cursor:pointer;margin:0;appearance:none;-webkit-appearance:none;white-space:nowrap} .tab[aria-selected="true"],.tab.is-on{background:var(--iv-surface);color:var(--iv-ink)} .tab[aria-selected="true"]::after,.tab.is-on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--iv-ink)} .tab:focus-visible{outline:2px solid var(--sfr-focus);outline-offset:-3px;z-index:1} /* inset: the tab strip clips outside rings */ /* ========== DATAGRID (key / value) ========== */ .kv{display:grid;grid-template-columns:auto 1fr;column-gap:20px;row-gap:8px;font-family:var(--os-font-mono);font-weight:400;font-size:12px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;margin:0} .kv>dt,.kv-label{color:var(--iv-ink-muted);margin:0;white-space:nowrap} .kv>dd,.kv-value{color:var(--iv-ink);margin:0} .kv-value.is-hot,.kv>dd.is-hot{color:var(--sfr-coral-text)} .kv>dt.hint{justify-self:start} /* the dotted hint underline hugs the label text, not the whole label column (design-fly §4.1) */ .kv--sm{font-size:11px} /* ========== TOOLTIP ========== */ .tip{position:absolute;z-index:5;display:inline-block;background:var(--iv-ink);color:#fff;padding:8px 11px;font-family:var(--os-font-mono);font-weight:400;font-size:10.5px;line-height:1.45;letter-spacing:0.02em;border-radius:var(--radius-control);pointer-events:none;white-space:nowrap;font-variant-numeric:tabular-nums} .tip::before{content:"";position:absolute;left:-6px;top:14px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid var(--iv-ink)} .tip-title{font-family:var(--os-font-sans);font-weight:400;font-size:16px;letter-spacing:0;color:#fff;margin-bottom:4px} .tip--wrap{white-space:normal;max-width:260px} .tip--static{position:relative;z-index:auto;margin-left:6px} .tip[hidden]{display:none} /* ========== CARD · CHART CARD · CUTAWAY ========== */ .card{background:var(--iv-surface);border:1px solid var(--iv-hairline-2);border-radius:var(--radius-control);min-width:0} .card--sunken{background:var(--iv-surface-2)} .card--accent{border-top:3px solid var(--iv-coral)} .card--chart{padding:var(--pad-card-chart);display:flex;flex-direction:column;gap:6px;min-height:0} .card-head{display:flex;justify-content:space-between;align-items:center;gap:6px} .card-plot{flex:1;min-height:0} .card-plot>svg{display:block;width:100%;height:100%} .cutaway{flex:1;min-height:0;display:grid;grid-template-columns:var(--size-strip) minmax(0,1fr)} /* strip rhythm 10 px (canvas 12): the canvas strip over-fills its column in both variants (design-designer D5 — the hairline collapsed and the two-line hint clipped; the fly card is 60 px shorter still), so the stack is tightened by 2 px per gap and per padding edge and the hint's two lines set at 1.3 so both lines of the orbit / scroll hint show */ .strip{background:var(--iv-surface-2);border-right:1px solid var(--iv-hairline);padding:8px 14px;display:flex;flex-direction:column;gap:8px;overflow:hidden} /* v5: 10 → 8 px rhythm pays for the 24-px check rows */ .strip>*{flex:none} .strip>.spacer{flex:1 1 0;min-height:0} .strip .checks{gap:6px} .strip-group{display:flex;flex-direction:column;gap:4px} .strip-label{font-family:var(--os-font-mono);font-weight:400;font-size:10.5px;letter-spacing:0.04em;color:var(--iv-ink-muted);align-self:flex-start} .strip-foot{font-family:var(--os-font-mono);font-weight:400;font-size:9.5px;letter-spacing:0.04em;line-height:1.3;color:var(--iv-ink-subtle)} .render{display:flex;flex-direction:column;min-width:0;min-height:0;padding:10px 12px 6px} .render-head{display:flex;justify-content:space-between;align-items:center;flex:none} .render-view{flex:1;min-height:0} .scan-row{display:grid;grid-template-columns:2fr 1fr;gap:12px;align-items:stretch;flex:none} .scan-row--fixed{height:var(--size-scan-h)} /* ========== KBD · CHIP ========== */ .kbd{display:inline-flex;align-items:center;justify-content:center;min-width:var(--size-kbd);height:var(--size-kbd);padding:0 5px;border:1px solid var(--iv-rule);background:var(--iv-surface);font-family:var(--os-font-mono);font-weight:400;font-size:10px;letter-spacing:0.04em;color:var(--iv-ink-muted);border-radius:var(--radius-kbd);text-transform:none} .chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--iv-rule);background:var(--iv-surface);padding:3px 9px;font-family:var(--os-font-mono);font-weight:400;font-size:10.5px;letter-spacing:0.04em;color:var(--iv-ink);border-radius:var(--radius-control);user-select:none;text-transform:none} .chip.is-off{border-color:var(--iv-hairline-2);color:var(--iv-ink-subtle)} .chip-swatch{width:9px;height:9px;border:1px solid var(--iv-rule);flex:0 0 auto} .chip.is-off .chip-swatch{opacity:0.4} .chip[data-clickable]{cursor:pointer} /* ========== SLIDER (canvas single-value anatomy) ========== */ .slider{display:flex;flex-direction:column;gap:6px} .slider-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px} .slider-label{font-family:var(--os-font-mono);font-weight:400;font-size:11px;letter-spacing:0.04em;color:var(--iv-ink-muted);white-space:nowrap} .slider-value{font-family:var(--os-font-mono);font-weight:400;font-size:12px;color:var(--iv-ink);white-space:nowrap;font-variant-numeric:tabular-nums} .slider-minmax{display:flex;justify-content:space-between;font-family:var(--os-font-mono);font-weight:400;font-size:9.5px;letter-spacing:0.04em;color:var(--iv-ink-subtle)} /* .range — the v5 recipe is in the v5 block at the end of this file */ /* static two-thumb range (bundle RangeSlider) */ .range2{position:relative;height:16px} .range2-track{position:absolute;left:0;right:0;top:7px;height:2px;background:var(--iv-hairline-2)} .range2-fill{position:absolute;top:7px;height:2px;background:var(--iv-ink)} .range2-thumb{position:absolute;top:3px;width:10px;height:10px;border-radius:var(--radius-full);background:var(--iv-ink);margin-left:-5px} .range2-thumb--lo{background:var(--iv-surface);border:1px solid var(--iv-ink)} /* ========== CHECKBOX / RADIO ========== */ .checks{display:flex;flex-direction:column;gap:7px;font-family:var(--os-font-mono);font-weight:400;font-size:10.5px;letter-spacing:0.04em;color:var(--iv-ink)} .check{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;color:var(--iv-ink-muted);position:relative} .check input{position:absolute;opacity:0;width:0;height:0;margin:0} .check-box{width:11px;height:11px;border:1px solid var(--iv-rule);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:transparent;font-size:var(--text-min);line-height:1} .check-box::after{content:"✓"} .check:has(input:checked){color:var(--iv-ink)} .check:has(input:checked) .check-box{border-color:var(--iv-ink);background:var(--iv-ink);color:#fff} .check:has(input:focus-visible) .check-box{outline:2px solid var(--sfr-focus);outline-offset:1px} .radio-dot{width:11px;height:11px;border:1px solid var(--iv-rule);border-radius:50%;position:relative;flex:0 0 auto} .check:has(input:checked) .radio-dot::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--iv-ink)} /* ========== DIVIDER · LEGEND · INPUT · SELECT ========== */ .divider{border:0;border-top:1px solid var(--iv-hairline);margin:0} .divider--strong{border-top-color:var(--iv-hairline-2)} .divider--ink{border-top-color:var(--iv-border)} .legend{display:flex;flex-direction:column;gap:6px} .legend--line{gap:4px} .legend-item{display:flex;align-items:center;gap:8px;font-family:var(--os-font-mono);font-weight:400;font-size:10.5px;letter-spacing:0.04em;color:var(--iv-ink)} .legend-sq{width:14px;height:14px;border:1px solid var(--iv-rule-35)} .legend-line{width:18px;height:2px} .legend-item.is-missing{opacity:0.35;text-decoration:line-through} .legend-nodata{color:var(--iv-ink-subtle);font-size:var(--text-min);margin-left:auto} .input{border:1px solid var(--iv-rule);padding:6px 10px;font-family:var(--os-font-mono);font-weight:400;font-size:11.5px;background:var(--iv-surface);color:var(--iv-ink);width:100%;border-radius:var(--radius-control);outline:none} .input:focus{border-color:var(--iv-ink)} .input--small{padding:4px 8px;font-size:11px} .select{border:1px solid var(--iv-rule);padding:5px 26px 5px 10px;font-family:var(--os-font-mono);font-weight:400;font-size:11px;background:var(--iv-surface);color:var(--iv-ink);border-radius:var(--radius-control);appearance:none;-webkit-appearance:none;outline:none;background-image:linear-gradient(45deg,transparent 50%,var(--iv-ink-muted) 50%),linear-gradient(135deg,var(--iv-ink-muted) 50%,transparent 50%);background-position:calc(100% - 12px) 50%,calc(100% - 7px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat} /* ========== PLATE (right column) ========== */ .plate{border-left:1px solid var(--iv-border);background:var(--iv-surface);display:flex;flex-direction:column;overflow:hidden;min-height:0} .plate-head{padding:14px var(--pad-plate-x) 12px;border-bottom:1px solid var(--iv-hairline-2);display:flex;flex-direction:column;gap:8px;background:var(--iv-surface-2)} .plate-title{font-size:20px;line-height:1.2;letter-spacing:-0.005em;white-space:nowrap} .plate-title .name{font-weight:400} .plate-sub{font-family:var(--os-font-mono);font-weight:400;font-size:10px;letter-spacing:0.04em;color:var(--iv-ink-muted);white-space:nowrap} .plate-sec{padding:12px var(--pad-plate-x);border-bottom:1px solid var(--iv-hairline);display:flex;flex-direction:column;gap:8px} .plate-sec--scales{gap:10px} .plate-sec--last{border-bottom:0} .plate-foot{padding:10px var(--pad-plate-x) 12px;border-top:1px solid var(--iv-hairline);display:flex;gap:8px;flex:none} /* face scales */ .scale{display:flex;flex-direction:column;gap:4px} .scale-row{display:flex;justify-content:space-between;font-family:var(--os-font-mono);font-weight:400;font-size:10.5px;letter-spacing:0.04em;color:var(--iv-ink)} .scale-row .kind{color:var(--iv-ink-subtle)} .scale-bar{position:relative;height:8px;border:1px solid var(--iv-rule-35)} .scale-bar--p{background:var(--sfr-grad-pressure)} .scale-bar--t{background:var(--sfr-grad-temp)} .scale-now{position:absolute;top:-3px;width:2px;height:12px;background:var(--iv-coral-deep);transform:translateX(-50%)} .scale-bar--t .scale-now{background:var(--iv-ink)} .scale-minmax{display:flex;justify-content:space-between;font-family:var(--os-font-mono);font-weight:400;font-size:10px;color:var(--iv-ink-muted);font-variant-numeric:tabular-nums} .scale-minmax .now{color:var(--sfr-coral-text)} .scale-bar--t+.scale-minmax .now{color:var(--iv-ink)} /* Q block */ .qblock{border:1px solid var(--iv-border);padding:10px 12px;display:flex;flex-direction:column;gap:4px} .qblock-value{font-size:20px;line-height:1.2;white-space:nowrap} .qblock-value .q{font-size:14px} .qblock.is-ignited{background:var(--iv-ink);color:#fff} .qblock.is-ignited .iv-eyebrow,.qblock.is-ignited .eyebrow{color:rgba(255,255,255,0.65)} .qblock.is-ignited .q{color:var(--iv-coral)} /* ========== THROTTLES (Fly) ========== */ .levers{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;justify-items:center} .lever-col{display:flex;flex-direction:column;align-items:center;gap:6px} .lever{position:relative;width:var(--size-lever-w);height:var(--size-lever-h);border:1px solid var(--iv-border);background:var(--iv-surface);cursor:ns-resize;user-select:none;touch-action:none} .lever--soft{border-color:var(--iv-rule)} .lever-mid{position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--iv-rule-35)} .lever-detent{position:absolute;left:8px;right:8px;border-top:1px solid var(--iv-hairline-12)} .lever-stem{position:absolute;left:50%;width:2px;background:var(--iv-ink);transform:translateX(-50%)} .lever-handle{position:absolute;left:8px;right:8px;height:14px;background:var(--iv-ink);transform:translateY(-50%)} .lever-handle--hold{background:var(--iv-surface);border:1px solid var(--iv-border)} .lever-rate{font-family:var(--os-font-mono);font-weight:400;font-size:9.5px;color:var(--iv-ink-muted);white-space:nowrap;font-variant-numeric:tabular-nums} .lever-rate.is-hot{color:var(--sfr-coral-text)} /* ========== PATTERNS ========== */ .hatch{background-image:var(--pattern-hatch)} .fog{background:var(--pattern-fog),var(--iv-surface-2)} /* ========== v4 ADDITIONS (PLAN §4.11, verbatim) ========== */ .frame{border:0;border-radius:0} /* override the recipe's 1px border (B1) */ .mounts{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);flex:1;min-height:0;min-width:0} .mount{grid-area:1/1;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden} .mount.is-hidden{visibility:hidden;pointer-events:none} .mount>*{flex:1;min-height:0} .mount>.pane-head,.mount>.plate-head,.mount>.plate-warn,.mount>.plate-foot,.mount>.plate-sec--pinned{flex:none} .centre-head{height:var(--size-colhead);box-sizing:border-box} .pane-head{height:var(--size-colhead);box-sizing:border-box} .tabs--compact{height:43px} .tabs--compact .tab{display:flex;align-items:center;height:43px;padding:0 19px;font-size:9.5px} .tabs--compact .tab.is-on::after,.tabs--compact .tab[aria-selected="true"]::after{bottom:0;height:2px} .seg--xs>button{padding:2px 7px;font-size:var(--text-min);letter-spacing:0.08em} /* v5: 8 → 9.5 px (size floor) */ .tip--left::before{left:auto;right:-6px;border-right:0;border-left:6px solid var(--iv-ink)} .tip--wrap{white-space:normal;max-width:280px} .frame-dataset.is-fail{color:var(--sfr-coral-text);border-color:var(--sfr-coral-text)} .plate-sections{display:flex;flex-direction:column;flex:1;min-height:0} .plate-head.is-ignited{background:var(--iv-ink);color:#fff} .plate-head.is-ignited .iv-eyebrow{color:var(--iv-ink-faint)} .plate-head.is-ignited .q{color:var(--iv-coral)} .plate-warn{margin:0;padding:8px var(--pad-plate-x);font-family:var(--os-font-mono);font-weight:400;font-size:10px;letter-spacing:0.04em;color:var(--sfr-coral-text);border-bottom:1px solid var(--iv-hairline)} .qblock.is-ignited .iv-eyebrow{color:var(--iv-ink-faint)} .stat{display:flex;flex-direction:column;gap:4px} .stat-value{font-size:20px;line-height:1.2;letter-spacing:-0.005em} .stat-caption{font-family:var(--os-font-mono);font-weight:400;font-size:10px;letter-spacing:0.04em;color:var(--iv-ink-muted)} .card--text{padding:16px 18px} .kv--rules>dt,.kv--rules>dd{padding-bottom:8px;border-bottom:1px solid var(--iv-hairline)} .progress{height:2px;background:var(--iv-hairline-2)} .progress>i{display:block;height:100%;background:var(--iv-ink)} .legend--row{flex-direction:row;gap:14px;flex-wrap:wrap} .warn{font-family:var(--os-font-mono);font-weight:400;font-size:10px;letter-spacing:0.04em;color:var(--sfr-coral-text);border:1px solid var(--iv-coral-deep);padding:3px 8px} /* ========== v5 ADDITIONS (PLAN_v5 §3.11; W1-A) ========== */ /* focus (CH-4): one ring everywhere — 2 px var(--sfr-focus) at a 1-px offset; on a pressed (ink) segment the ring sits outside the ink button, over its neighbour or the seg frame, so it shows on both (coral-deep: 3.74 on white, 5.30 on ink). The one exception is .tab (above): the 43-px tab strip clips anything outside a tab, so its ring is drawn 1 px inside. */ :focus-visible{outline:2px solid var(--sfr-focus);outline-offset:1px} .btn:focus-visible,.seg>button:focus-visible,.chip:focus-visible,.iconbtn:focus-visible{outline:2px solid var(--sfr-focus);outline-offset:1px;position:relative;z-index:1} .hint[data-tip]:focus-visible{outline:2px solid var(--sfr-focus);outline-offset:1px;color:var(--iv-ink);border-bottom:1px solid var(--iv-ink)} /* a tip label on an inverted (ink) block keeps light text while hovered, open (tip or explain tour) or focused: the recipe above turns it ink, which vanished on the designer's ignited Q block ("Ignited", "Q · fusion gain") — as fly-plate.css does */ .qblock.is-ignited .hint,.plate-head.is-ignited .hint{border-bottom-color:var(--iv-ink-faint)} .qblock.is-ignited .hint:hover,.qblock.is-ignited .hint.is-open,.qblock.is-ignited .hint[data-tip]:focus-visible, .plate-head.is-ignited .hint:hover,.plate-head.is-ignited .hint.is-open,.plate-head.is-ignited .hint[data-tip]:focus-visible{color:#fff;border-bottom-color:#fff} .input:focus-visible,.select:focus-visible{outline:2px solid var(--sfr-focus);outline-offset:1px} /* hit targets (CH-5, WCAG 2.5.8): .btn and the default .seg buttons are at least --size-hit tall; the compact variants keep their drawn size (they sit in 18–24-px eyebrow and card-head rows) and extend their pointer target to --size-hit with a transparent ::after centred on the button (the seg's overflow-clip-margin leaves it room) */ .btn{position:relative;min-height:var(--size-hit)} .seg>button{position:relative;min-height:var(--size-hit)} .seg--small>button,.seg--xs>button{min-height:0} .btn::after,.seg>button::after,button.chip::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,var(--size-hit));transform:translateY(-50%)} button.chip{position:relative;cursor:pointer;appearance:none;-webkit-appearance:none;margin:0} .checks{gap:0} .strip .checks{gap:0} .check{min-height:var(--size-hit)} /* .range (native slider): a --size-hit-tall input (the hit area), a 2-px drawn track filled to --pct, a 14-px thumb and the focus ring on the thumb (a 1-px surface gap, then 2 px var(--sfr-focus) — the same ring as every other control) */ .range{--pct:50%;display:block;width:100%;height:var(--size-hit);margin:0;padding:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:pointer} .range:focus{outline:none} .range::-webkit-slider-runnable-track{height:2px;border-radius:0;background:linear-gradient(90deg,var(--iv-ink) 0 var(--pct),var(--iv-hairline-2) var(--pct) 100%)} .range::-moz-range-track{height:2px;background:var(--iv-hairline-2)} .range::-moz-range-progress{height:2px;background:var(--iv-ink)} .range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:var(--radius-full);background:var(--iv-ink);border:0;margin-top:-6px} .range::-moz-range-thumb{width:14px;height:14px;border-radius:var(--radius-full);background:var(--iv-ink);border:0} .range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--iv-surface),0 0 0 3px var(--sfr-focus)} .range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 1px var(--iv-surface),0 0 0 3px var(--sfr-focus)} .range:disabled{cursor:default;opacity:0.35} /* .chip (v5): mono 9.5 px, 20 px tall; a