/* ============================================================================
* phantasm-ui.css — PhantasmUI (visual half) · v2.31.0
* Versioned as a whole with phantasm-ui.js — see CHANGELOG.md beside this
* file; bump the version + changelog on every kit change, and retag every
* consumer's ?v= to match.
* ----------------------------------------------------------------------------
* Design tokens + every
* reusable component's styling. Self-contained, no build step. Load BEFORE the
* app's own stylesheet so the app can compose/override:
*
* Behaviours live in ui/phantasm-ui.js (window.PhantasmUI); conventions and
* component docs in ui/docs/STYLE_GUIDE.md. Accent tints derive from the tokens
* via color-mix(), so re-theming = editing :root.
* The host app defines --pw (side-panel width) or overrides .disp-pop's anchor.
* ==========================================================================*/
:root{
--void:#070a12;
--void2:#0a0f1d;
--panel:#0d1322; /* pop-over surface — SOLID as of 2.11.0 (was rgba(13,19,34,0.88), itself raised from 0.72 because --muted/--faint text was hard to read over busy stages; the same colour, now fully opaque). A solid surface also lets a sticky .sec-head simply paint it — see .glass. */
--ink:#e9eefb;
--muted:#7e8aab;
--faint:#4a5577;
--line:rgba(120,150,210,0.12);
--accent:#f5b441;
--cool:#5ad1ff;
--edge:rgba(120,150,210,0.16);
--sel:#3dffa0; /* THE selection colour (one meaning only); JS twin: SEL_GREEN */
--ctl-fill:rgba(10,14,24,0.6); /* ONE form-control fill on a CARD — .fld / .dd / checkbox / number / switch-OFF all share it; .subcard redefines it (below) for controls on a sub-card. Two fills, no per-control variation. */
/* THE SLIDER RAIL — one OPAQUE colour, shared by the track and a snap point's bezel. Opaque is the point:
both used to be the same hue at different alphas (track .22, bezel .6), so the bezel COMPOSITED over the
track wherever they overlap and that band read brighter than either — the snap point looked stuck ON the
rail instead of set INTO it. Same solid colour on both ⇒ the overlap is invisible and the bezel reads as
the rail closing around the dot. Value = what rgba(120,150,210,0.22) resolves to over --card. */
--rail: color-mix(in srgb, rgb(120,150,210) 22%, var(--card));
/* ---- SURFACE ELEVATION (opaque/flat family) — each step is LIGHTER than the one below. The header
carries no fill of its own, so it shows --base; a card sits ONE step above the base; a sub-card one
step above the card. Use these roles for surfaces, not the raw --void/--void2 (which stay the palette,
+ dropdown-menu/tooltip fills). The pop-over surface is --panel/.glass — a separate family. */
--base: var(--void); /* app background — what the header shows */
--card: var(--void2); /* THE card / side-panel back-colour — one elevation step lighter than --base */
--subcard: color-mix(in srgb, var(--cool) 3.5%, transparent); /* sub-card fill: a cool wash composited OVER --card -> lighter still (a card nested in a card) */
/* ---- full-window POP-OUT layout (see the .pop-* block near the end + STYLE_GUIDE §12): a slim header
over a left picker rail + a responsive card grid. Override these in your page to resize. */
--pop-header-h:44px; /* the slim pop-out header's height */
--pop-rail-w:236px; /* the left picker rail's width */
/* ---- floating POP-OVER WINDOWS (.hud / .disp-pop — the registerPopWin framework, STYLE_GUIDE §5).
NOT the pop-out tokens above: that is the full-window layout, this is the draggable little windows.
ONE width for all of them, so they match by default. Widen them all from your page's :root, or just
ONE window by setting the token on it — .disp-pop{ --popwin-w:416px } / el.style.setProperty(…). */
--popwin-w:320px;
}
.mono{
font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
font-variant-numeric:tabular-nums;
font-feature-settings:"tnum"
}
/* gfx + sim rate readout: lives in the HEADER after the model name (the header is an opaque bar above the stage, so it can never collide with canvas content — axis ticks/labels, HUD, clouds — in any view/mode/panel state) */
.obs-cat{ font-size:11px;font-weight:600;color:var(--ink);letter-spacing:.02em; }
/* Observables sub-card: category header */
.obs-sublist{ margin-top:4px;font-size:11px;color:var(--muted);line-height:1.75;display:grid;grid-template-columns:1fr 48px 56px;align-items:baseline; }
/* the observables matrix under a category: name + a check column per variant (global | per type) */
.obs-sublist.off{ opacity:0.4; }
/* group toggled off -> its observables are unavailable */
.obs-colh{ font-size:8.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--cool);opacity:.85;text-align:center;align-self:end; }
/* matrix column headers: per type / system-wide */
.obs-chk{ color:var(--cool);font-weight:600;text-align:center; }
/* variant exists */
.obs-dash{ color:var(--muted);opacity:.45;text-align:center; }
.dd{ /* dropdown / select trigger — SAME box as .fld: radius 6, 30px control height (7px pad + 14px line-height), --edge border. Font stays 11.5 sans (labels), unlike .fld's 12 mono (values). */
font-weight:400;
appearance:none;
-webkit-appearance:none;
background:var(--ctl-fill);
color:var(--ink);
border:1px solid var(--edge);
border-radius:6px;
padding:7px 30px 7px 12px;
font-size:11.5px;
line-height:14px; /* pins the height to .fld's 30px (whose 12px 'normal' line box ≈ 14px), independent of the smaller label font */
font-family:inherit;
letter-spacing:.02em;
cursor:pointer;
transition:border-color .15s;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;
background-position:right 11px center
}
.dd:hover{border-color:rgba(120,150,210,0.4)}
.dd:focus{
outline:none;
border-color:var(--cool)
}
.dd option{
background:#0a0f1d;
color:var(--ink)
}
.dd optgroup{
background:#0a0f1d;
color:var(--faint);
font-style:normal;
font-weight:700;
letter-spacing:.08em
}
/* .fld = text inputs / textareas: same dark-edge treatment + electric-blue focus as .dd (no yellow UA ring) */
.fld{ /* THE text input. Complete recipe — style, height, font — lives HERE:
never re-pad or re-font .fld inline. 7px/12px padding = the same 30px
control height as .dd; the 12px mono face is the design system's
"values are mono" rule (labels stay sans). Code/JSON areas: .fld-code. */
background:var(--ctl-fill);
color:var(--ink);
border:1px solid var(--edge);
border-radius:6px;
padding:7px 12px;
font:12px ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
transition:border-color .15s;
}
.fld:hover{ border-color:rgba(120,150,210,0.4); }
.fld:focus{
outline:none;
border-color:var(--cool);
}
/* checkboxes: themed box matching .dd/.fld, with an electric-blue check when ticked */
input[type=checkbox]{
-webkit-appearance:none;
appearance:none;
width:15px;
height:15px;
flex:none;
margin:0;
border:1px solid var(--edge);
border-radius:4px;
background:var(--ctl-fill);
cursor:pointer;
position:relative;
transition:border-color .15s, background .15s;
}
/* the hover ring stands down on a disabled box — and it must be said here, not left to
pointer-events: a LABEL's hover is forwarded to its control (Chromium, WebKit), so a dead
box inside a .chk-row lit up whenever the row was hovered (2.27.0) */
input[type=checkbox]:hover:not(:disabled){ border-color:rgba(120,150,210,0.4); }
input[type=checkbox]:checked{
border-color:var(--cool);
background:color-mix(in srgb, var(--cool) 14%, transparent);
}
input[type=checkbox]:checked::after{
content:'';
position:absolute;
left:3.5px;
top:0px;
width:3.5px;
height:8px;
border:solid var(--cool);
border-width:0 2px 2px 0;
transform:rotate(45deg);
}
input[type=checkbox]:focus-visible{
outline:none;
border-color:var(--cool);
box-shadow:0 0 0 3px color-mix(in srgb, var(--cool) 14%, transparent);
}
/* DISABLED (2.27.0) — the .btn:disabled convention on the box: dimmed and desaturated (a cyan tick on a dead
box must stop signalling), default cursor, pointer-events off (no hover ring, no press). Driven by the
native `disabled` attribute alone — nothing for a consumer to toggle, nothing to fall out of step. On a
.chk-row the ROW is the unit: a label at full strength beside a dead box reads as a live control with a
dead tick, so the row dims BY STATE (`:has(input:disabled)`) and the box inside it is left at full
strength — one dim, never two stacked. The row keeps its pointer events, so a `title` on it can still say
WHY the box is dead (the .btn rule's "put the reason on a wrapper": the row IS the wrapper); the box alone
goes inert. A bare box (a matrix cell, a list row) dims on its own. A .switch's carrier input is invisible
by design — the pill is the switch — so the box rule does not reach it: `:where()` carries no specificity,
which is what lets the .chk-row override below still win. */
input[type=checkbox]:disabled:where(:not(.switch>input)){
opacity:.42;
filter:saturate(.45);
cursor:default;
pointer-events:none;
}
.chk-row:has(input:disabled){
opacity:.42;
filter:saturate(.45);
cursor:default;
}
.chk-row input[type=checkbox]:disabled{ opacity:1; filter:none; } /* the row carries the dim — not the box again */
/* iOS-style on/off switch (a themed checkbox): used for per-rule enable in Simulation */
.switch{
position:relative;
display:inline-block;
width:34px;
height:20px;
flex:none;
cursor:pointer;
}
.switch>input{
position:absolute;
inset:0;
width:100%;
height:100%;
margin:0;
opacity:0;
cursor:pointer;
z-index:1;
}
.switch>.sw-bg{
position:absolute;
inset:0;
box-sizing:border-box;
border-radius:999px;
border:1px solid var(--cool);
background:var(--ctl-fill); /* OFF = the shared control fill (was --edge); ON = --cool below */
transition:background .15s;
}
/* electric-blue border kept in both states */
.switch>input:checked + .sw-bg{ background:var(--cool); }
.switch>.sw-bg::after{
content:'';
position:absolute;
top:1px;
left:1px;
width:16px;
height:16px;
border-radius:50%;
background:#fff;
box-shadow:0 1px 2px rgba(0,0,0,0.35);
transition:transform .15s;
}
/* top/left:1px centres the knob inside the 1px border (box-sizing:border-box) */
.switch>input:checked + .sw-bg::after{ transform:translateX(14px); }
.seg button:disabled{
opacity:.4;
cursor:not-allowed;
}
.hud{
position:absolute;
top:14px;
left:14px;
width:var(--popwin-w); /* the shared pop-over window width (was 222 -> 290 -> 320, 2026-07-06; a token since 2.14.0) */
border-radius:12px;
padding:0;
overflow:hidden; /* clips the window bar to the rounded corners */
pointer-events:none;
}
.row{
font-weight:400;
display:flex;
justify-content:space-between;
align-items:baseline;
margin:5px 0;
font-size:12px
}
.row .k{color:var(--muted)}
.row .v{
font-weight:400;font-size:13px}
.seg{ /* segmented control: full-width by default, buttons SPLIT the width evenly (a horizontal .seg must never leave its options left-clustered). Opt out with .seg.pill for a compact, fit-to-content header rendition. */
display:flex;
border:1px solid var(--edge);
border-radius:9px;
overflow:hidden
}
.seg button{
appearance:none;
border:0;
background:transparent;
color:var(--muted);
padding:8px 14px;
font-size:12px;
font-weight:600;
cursor:pointer;
letter-spacing:.01em;
transition:background .15s,color .15s;
flex:1 1 0; /* each option takes an EQUAL share of the control's width (min-width:0 lets long labels shrink) */
min-width:0;
}
.seg button + button{border-left:1px solid var(--edge)}
.seg.vert{ flex-direction:column } /* stacked variant: options fill the width, sit at their natural height (no vertical stretch), left-aligned */
.seg.vert button{ flex:0 0 auto; text-align:left }
.seg.vert button + button{ border-left:0; border-top:1px solid var(--edge) }
.seg.vert button.on{ box-shadow:inset 2px 0 0 var(--cool) }
.seg.pill{ display:inline-flex; border-color:rgba(120,150,210,0.28); } /* the GLOBAL/header rendition: joined pill, FIT-to-content (not full-width), selected = cool tint fill (no underline). Use for top-chrome selectors (e.g. the view switcher); the default .seg stays the full-width in-panel rendition. */
.seg.pill button{
color:var(--ink);
padding:7px 15px;
font-size:11.5px;
letter-spacing:.02em;
flex:0 0 auto; /* compact: buttons fit their label, the pill sizes to content */
}
.seg.pill button.on{
background:color-mix(in srgb, var(--cool) 10%, transparent);
color:var(--cool);
box-shadow:none;
}
.seg.pill button.on:hover{ background:color-mix(in srgb, var(--cool) 16%, transparent); }
.seg button.on{
background:transparent;
color:var(--cool);
box-shadow:inset 0 -2px 0 var(--cool)
}
.seg button:not(.on):hover{
color:var(--ink);
background:rgba(120,150,210,0.07)
}
.seg button:disabled{
opacity:.35;
cursor:not-allowed
}
.slider{
display:flex;
flex-direction:column;
gap:5px;
min-width:130px
}
.slider .top{ /* THE slider header row: name LEFT-justified (the label), live value RIGHT-justified (.num, 12px mono) on the same line — space-between does the justification; the track sits below. Markup: .slider > .top(label + .num) + input[type=range]. */
display:flex;
justify-content:space-between;
align-items:baseline;
margin-bottom:6px; /* + the .slider flex gap = 11px of air above the bar. The header row used to sit hard against the track, which read as cramped; this separates them without detaching the row from its slider. Deliberately NOT a bigger .slider gap — that would also push a following .hint.sub-readout away from the bar it annotates. */
}
.slider label{
font-weight:400;
font-size:10.5px;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--faint)
}
.slider .num{
font-weight:400;
font-size:12px;
color:var(--ink)
}
/* READOUT (2.28.0) — a READ-ONLY line in a control card: the slider's own header row with no
track beneath it. Same grammar (.readout > .top(label + .num) [+ .hint.sub-readout]) and the
same voice (10.5px uppercase label, 12px mono value), so a reported value sits among the
controls beside it and reads as one of them — a card's Grid, Threads or Deformation radius
line. The value may run to several lines (pre-line, right-aligned, the label on its first).
The stats listing (.row › .k/.v, 12/13px) is for the dense listings of a floating window,
never for a card's lines; and a .slider authored without a track is this component
misnamed. conform's `readout-row` holds both. The header's 6px margin is kept so a readout
and a slider fall on the same rhythm in one card. */
.readout{
display:flex;
flex-direction:column;
gap:5px;
min-width:130px
}
.readout .top{
display:flex;
justify-content:space-between;
align-items:baseline;
gap:12px;
margin-bottom:6px
}
.readout label{
font-weight:400;
font-size:10.5px;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--faint)
}
.readout .num{
font-weight:400;
font-size:12px;
color:var(--ink);
white-space:pre-line;
text-align:right;
line-height:1.35
}
input[type=range]{
-webkit-appearance:none;
appearance:none;
display:block;
width:100%;
height:3px;
border-radius:3px;
background:var(--rail);
outline:none;
cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;
box-sizing:border-box;
width:14px;
height:14px;
border-radius:50%;
background:var(--ink);
border:2px solid var(--cool);
box-shadow:0 0 0 3px color-mix(in srgb, var(--cool) 12%, transparent)
}
input[type=range]::-moz-range-thumb{
box-sizing:border-box;
width:14px;
height:14px;
border-radius:50%;
background:var(--ink);
border:2px solid var(--cool);
box-shadow:0 0 0 3px color-mix(in srgb, var(--cool) 12%, transparent)
}
/* DISABLED (2.30.0) — the checkbox convention on the range. The native attribute already makes a range
inert (no drag, no `input`), but the rail and thumb are drawn by hand, so a dead slider looked exactly
like a live one (a consumer's offset slider, disabled while its season is fixed, noticed by eye). As
with the box: dimmed and desaturated, default cursor, pointer-events off, from `disabled` alone —
nothing for a consumer to toggle. Inside a .slider the ROW is the unit (label and readout recede with
the track, `:has(input:disabled)`) and the input inside is left at full strength — one dim, never two;
a bare range dims on its own. The thumb's cool ring is a "live" signal and stands down, and the snap
points lose their pointer (addSmartPoints's click checks `disabled` too — a snap on a dead slider does
nothing). The has-sp thumb rule below hands the thumb its pointer back at a higher specificity, so the
dead thumb is named there as well. */
input[type=range]:disabled{
opacity:.42;
filter:saturate(.45);
cursor:default;
pointer-events:none;
}
input[type=range]:disabled::-webkit-slider-thumb{ box-shadow:none; }
input[type=range]:disabled::-moz-range-thumb{ box-shadow:none; }
.slider:has(input[type=range]:disabled){
opacity:.42;
filter:saturate(.45);
cursor:default;
}
.slider input[type=range]:disabled{ opacity:1; filter:none; } /* the row carries the dim — not the track again */
.trackwrap:has(input[type=range]:disabled) .smartpt{ pointer-events:none; cursor:default; }
.trackwrap.has-sp input[type=range]:disabled::-webkit-slider-thumb{ pointer-events:none; }
.trackwrap.has-sp input[type=range]:disabled::-moz-range-thumb{ pointer-events:none; }
.trackwrap{position:relative}
.trackwrap.has-sp{
margin-bottom:20px; /* room for the snap labels below — tracks .sp-label's top (was 26/21) */
isolation:isolate;
}
/* room below for labels; isolate so the dot z-index stays scoped to this track */
.trackwrap.has-sp::before{
content:'';
position:absolute;
left:0; right:0; top:50%;
transform:translateY(-50%);
height:3px;
border-radius:3px;
background:var(--rail);
z-index:0;
pointer-events:none;
}
/* THE RAIL, drawn on the WRAPPER so it can sit BEHIND the snap points. It used to be the input's own
background, and the input is lifted to z-index 2 (below) so its THUMB always wins a click over the dots —
which meant the rail painted across the FACE of every snap point. That was survivable while the rail was
translucent (a veil over the dot), but not once it went opaque for the seamless bezel: it became a solid
bar cutting the jewel in half. Rail behind, dot above it, thumb above both — each layer where it belongs. */
.trackwrap.has-sp input[type=range]{
position:relative;
z-index:2;
pointer-events:none;
background:transparent; /* ...so the input does not paint a SECOND rail over the dots; ::before above is the rail now */
}
/* lift the track above the dots; the bare track ignores clicks... */
.trackwrap.has-sp input[type=range]::-webkit-slider-thumb{ pointer-events:auto; }
/* ...but the THUMB stays grabbable and sits above the dots -> thumb wins any overlap */
.trackwrap.has-sp input[type=range]::-moz-range-thumb{ pointer-events:auto; }
.smartpt{
position:absolute;
top:50%;
transform:translate(-50%,-50%);
width:12px;
height:12px;
border-radius:50%;
background:var(--cool);
background-clip:padding-box;
opacity:.92;
/* clip fill inside the border so the cyan doesn't bleed into/under the bezel */
border:3px solid var(--rail); /* the collar is EXACTLY the rail's own 3px line weight, so the rail runs into it without a step. Grown 10->12 (border-box) to pay for the thicker border out of the OUTER radius: the cyan core stays 6px, which also keeps .sp-label put — it is positioned from the PADDING box, whose top is core-radius above the centre either way. Keep width == core + 2*border if you retune this. */
/* bezel = the RAIL ITSELF, opaque and identical to the track, so the ring reads as the rail clasping the
dot: seamless where it crosses the track, and a solid rail-coloured collar above/below it. (Was the
same hue at .6 alpha, chosen to stay visible against the dot — but that composited over the .22 track
and brightened the overlap. Contrast against the cyan dot comes from the hue difference, not alpha.) */
margin:0;
padding:0;
z-index:1;
cursor:pointer;
/* clickable to snap, but sits below the lifted track + thumb */
-webkit-appearance:none;
appearance:none;
transition:box-shadow .12s, opacity .12s;
}
.smartpt .sp-label{
font-weight:400;
position:absolute;
left:50%;
top:15px; /* the snap label sat too far under the rail to read as its annotation; 6px closer (the wrap's margin-bottom above drops by the same 6, so no dead space is left) */
transform:translateX(-50%);
font-size:11px;
letter-spacing:.05em;
color:var(--cool);
opacity:.9;
white-space:nowrap;
cursor:pointer;
transition:opacity .12s;
}
.smartpt:hover{
opacity:1;
box-shadow:0 0 0 3px color-mix(in srgb, var(--cool) 22%, transparent), 0 0 8px color-mix(in srgb, var(--cool) 60%, transparent);
}
.smartpt:hover .sp-label{ opacity:1; }
.btn{
appearance:none;
border:1px solid var(--edge);
background:transparent;
color:var(--ink);
padding:8px 16px;
border-radius:9px;
font-size:12px;
font-weight:600;
cursor:pointer;
letter-spacing:.04em;
--press-glow:var(--cool); /* the press-flash ring colour; each COLOURED variant overrides it to match itself */
transition:background .15s,border-color .15s,transform .09s ease,filter .09s ease,box-shadow .12s ease;
}
.btn:hover{
background:rgba(120,150,210,0.08);
border-color:var(--muted)
}
/* PRESS FEEDBACK ("electric pop") — a pressed ACTION button brightens, flashes a 3px ring in its OWN
colour (`--press-glow`, set per variant/control), and dips a hair of scale, springing back on release.
SHARED by every action button: `.btn` (+ variants), the header icon buttons (`.view-gear`), a section
head's help toggle (`.head-help`), the window close (`.pop-x`), and the card delete (`.subcard-x`). Deliberately NOT on selectors (`.seg` buttons,
`.cp-tab`) — their meaning is "chosen state", not "fired action". */
.btn:active, .view-gear:active, .pop-x:active, .subcard-x:active, .head-help:active{
transform:scale(0.97);
filter:brightness(1.15);
box-shadow:0 0 0 3px color-mix(in srgb, var(--press-glow) 42%, transparent);
}
@media (prefers-reduced-motion:reduce){
.btn:active, .view-gear:active, .pop-x:active, .subcard-x:active, .head-help:active{ transform:none; } /* keep the brighten + ring, drop the motion */
}
.btn.is-green{
background:#34c06a;
border-color:#34c06a;
color:#06210f;
--press-glow:#34c06a /* the glow matches the button — a green pop, not a cyan one */
}
.btn.is-green:hover{
background:#3ed079;
border-color:#3ed079
}
.btn.on{
background:var(--accent);
border-color:var(--accent);
color:#1a1205;
--press-glow:var(--accent)
}
.btn.on:hover{
background:#f7c45f;
border-color:#f7c45f
}
.btn.is-yellow{
background:#f1c84b;
border-color:#f1c84b;
color:#2a1f00;
--press-glow:#f1c84b
}
.btn.is-yellow:hover{
background:#f7d566;
border-color:#f7d566
}
.btn.is-red{
background:#dc4a4a;
border-color:#dc4a4a;
color:#fff;
--press-glow:#dc4a4a /* a red pop for destructive buttons */
}
.btn.is-red:hover{
background:#e85d5d;
border-color:#e85d5d
}
/* DISABLED — an action that exists but is unavailable right now. It must read INERT: dimmed (so both the
fill and the label recede), desaturated (so a coloured variant stops signalling "go" while it cannot be
pressed), and pointer-events off so the mouse gets NO response at all — no hover wash, no press pop, no
pointer cursor. The .view-gear:disabled convention, applied to the button family. Note this also drops
`title` tooltips on the element; put the reason in the label, or on a wrapper. */
.btn:disabled{
opacity:.42;
filter:saturate(.45);
cursor:default;
pointer-events:none;
}
/* LABEL PLACEMENT — the system's default: the field NAME (a .vis-label) sits on its own line ABOVE
the widget (text box, dropdown, seg, …). .vis-group is the canonical stacked wrapper; .slider is the
same shape with the value readout sharing the label line. Inline LEFT labels (64px) are reserved for
dense editor-card rows; checkboxes/switches put their label AFTER the control (.chk-row). */
.vis-group{
display:flex;
flex-direction:column;
gap:6px
}
.dd-full{width:100%}
.vis-label{
font-weight:400;
font-size:10.5px;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--faint)
}
input[type=color]{
-webkit-appearance:none;
appearance:none;
width:46px;
height:26px;
padding:2px;
border:1px solid var(--edge);
border-radius:7px;
background:transparent;
cursor:pointer;
}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{
border:none;
border-radius:5px
}
input[type=color]::-moz-color-swatch{
border:none;
border-radius:5px
}
.btn.primary{min-width:74px}
/* control-panel tab bar: floats over the section flow at the panel's bottom (post-launch only) */
.cp-tabs{
position:absolute;
left:0; right:0; bottom:0;
z-index:6;
display:flex;
flex-direction:column; /* icon row on top; an optional status line (e.g. the fps readout) may sit under it */
align-items:stretch;
padding:9px 10px 8px;
background:var(--card); /* shares the card back-colour it floats over */
border-top:1px solid var(--line);
box-shadow:0 -12px 22px rgba(0,0,0,0.45);
}
.cp-tab-row{
display:flex;
justify-content:space-evenly;
align-items:center;
}
.cp-tab{
background:none;
border:1px solid transparent;
border-radius:9px;
padding:7px 12px;
cursor:pointer;
color:var(--muted);
display:flex;
transition:color .15s, background .15s, border-color .15s;
}
.cp-tab:hover{ color:var(--ink); background:rgba(120,150,210,0.10); }
.cp-tab.on{ color:var(--cool); border-color:var(--cool); background:color-mix(in srgb, var(--cool) 10%, transparent); }
.cp-tab svg{ width:22px; height:22px; display:block; }
.cp-tab.pulse{ animation:cpTabPulse 1.1s ease-out 2; }
/* view switched -> the eye tab flashes twice: "this view's render options live here" */
@keyframes cpTabPulse{
0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--cool) 55%, transparent); color:var(--cool); }
70%{ box-shadow:0 0 0 9px rgba(90,209,255,0); color:var(--cool); }
100%{ box-shadow:0 0 0 0 rgba(90,209,255,0); }
}
.view-gear{ /* header view selector's Display-settings shortcut */
background:none;
border:1px solid rgba(120,150,210,0.28);
border-radius:7px;
width:26px; height:26px;
display:flex; align-items:center; justify-content:center;
color:var(--muted);
cursor:pointer;
padding:0;
flex:none;
--press-glow:var(--cool); /* press feedback (shared .btn:active rule) — cool glow */
transition:color .15s, border-color .15s, background .15s, transform .09s ease, filter .09s ease, box-shadow .12s ease;
}
.view-gear:hover{ color:var(--cool); border-color:var(--cool); background:color-mix(in srgb, var(--cool) 8%, transparent); }
.view-gear.on{ color:var(--cool); border-color:var(--cool); background:color-mix(in srgb, var(--cool) 12%, transparent); }
.view-gear:disabled{ opacity:.35; cursor:default; pointer-events:none; } /* unavailable tool (e.g. the active view offers none): stays visible so the header never reflows, but reads clearly inert — no hover ring, no press feedback */
.view-gear.pulse{ animation:cpTabPulse 1.1s ease-out 2; }
.view-gear svg{ width:15px; height:15px; display:block; }
.disp-pop{ /* compact floating Display panel (view-gear popover): holds the ACTIVE view's Display sections, reparented in while open. Persistent: the gear or its ✕ closes it. */
position:absolute;
top:14px;
right:calc(var(--pw) + 14px); /* upper-right of the VISIBLE viewport — mirrors the Statistics HUD's upper-left anchor. The loop OVERRIDES this inline, riding the panel's slide tween (panelW*(1-panelP)+14) so the popover glides with the panel edge. */
z-index:6;
width:var(--popwin-w); /* shared with .hud; set --popwin-w ON this element (or a [data-pop] variant of it) to widen just this window */
max-height:min(72vh, 640px);
display:flex;
flex-direction:column;
overflow:hidden; /* the BODY scrolls, not the box -> the scrollbar stops below the header and the rounded corners clip it */
border-radius:12px;
box-shadow:0 18px 48px rgba(0,0,0,.6);
}
.disp-pop-body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding-top:8px; }
/* the scroll region: starts BELOW the window bar. padding-top clears the bar the way .hud-body's 11px does
— the reparented .sec's own header is hidden here, so its 3px sec-inner top alone reads too tight (8+3≈11). */
.disp-pop-body::-webkit-scrollbar{ width:9px; }
.disp-pop-body::-webkit-scrollbar-thumb{ background:rgba(120,150,210,0.18); border-radius:5px; }
.pop-head, .disp-pop-head, .hud-head{ /* the shared pop-over window bar (title + ✕); sits OUTSIDE the scroll region so it is always in front */
flex:0 0 auto;
display:flex; justify-content:space-between; align-items:center;
padding:10px 12px 8px 14px;
background:rgba(13,19,34,0.96); /* a step above --panel */
border-bottom:1px solid var(--edge);
}
.pop-head .t, .disp-pop-head .t, .hud-head .t{
font-weight:400; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--faint); }
.pop-head, .disp-pop-head, .hud-head{ cursor:grab; user-select:none; -webkit-user-select:none; }
/* CONTROLS ARE NOT TEXT (2.26.0). A quick second press on a control is the browser's
double-click, and double-click means "select the nearest word" — in every engine — so a
rapid pair of presses on a stepper left its label or readout highlighted. Non-selectable
chrome starts no selection, on a double-click or on a press that slips into a drag. A
DISABLED control hands its presses to its parent, so a consumer marks the container of
its own control clusters too (a dock's step row, say). Readouts (a slider's .num included —
the System card quotes its facts through slider headers), fields and hints are deliberately
absent: copying a value keeps working. One line, by design: a red run lifts it with one
deletion. A JS multi-click guard was tried beside this rule and dropped: in Chromium it
changed nothing the rule had not already settled. */
button, .seg, .switch, .slider label, .slider input, .trackwrap, .smartpt, .chk-row, .cp-tab, .view-gear, .vis-label, .dock-step, .subcard-title{ user-select:none; -webkit-user-select:none; } /* .dock-step (its readout included) and .subcard-title since 2.30.1: rapid clicks on a stepper's arrows selected the text beside them */
.pop-head:active, .disp-pop-head:active, .hud-head:active{ cursor:grabbing; }
.hud-head{ pointer-events:auto; }
/* drag handle inside the otherwise click-transparent HUD */
.pop-x{ /* shared ✕ close (the lattice-preview pk-close look) */
background:none; border:none;
color:var(--muted,#8b97b4);
cursor:pointer;
font-size:14px; line-height:1;
padding:0 2px;
pointer-events:auto;
border-radius:5px; /* so the press ring/scale reads as a tidy rounded flash */
--press-glow:var(--cool); /* press feedback (shared .btn:active rule) — window buttons pop too */
transition:color .15s, transform .09s ease, filter .09s ease, box-shadow .12s ease;
}
.pop-x:hover{ color:var(--ink); }
.hud-body{ padding:11px 14px 12px; }
/* the HUD's content (the box itself is padding-less so the window bar spans edge-to-edge) */
.hud-sys{ font-size:10px; color:var(--muted); margin:-2px 0 9px; }
/* ensemble: the shown system's index, under the window bar */
.disp-pop .vis-label, .disp-pop .slider label, .disp-pop .readout label{ color:var(--muted); }
/* contrast over the glass: lift the --faint control labels to the HUD's --muted key colour — a readout's label is a widget label too (2.29.1: it sat a notch dimmer than the slider label beside it) */
.disp-pop .hint{ color:var(--muted); }
.tip{ /* floating tooltip (see JS attachTip): body-appended + position:fixed so it ESCAPES a card's overflow:hidden; JS sets left/top (centred above the anchor, viewport-clamped). Was .cp-tab-tip (an absolutely-positioned child, clipped by the panel). */
position:fixed;
z-index:1100; /* on top of everything: above pop-overs (880), the fullscreen panel peek (900), and dd menus (1000) */
font-weight:400;
background:var(--void2); /* a floating menu/tooltip surface — raw palette, not a card */
border:1px solid var(--line);
border-radius:7px;
padding:5px 10px;
font-size:10.5px;
letter-spacing:.02em;
color:var(--ink);
white-space:nowrap;
pointer-events:none;
opacity:0;
transition:opacity .12s;
box-shadow:0 8px 22px rgba(0,0,0,0.5);
}
.tip.show{ opacity:1; }
/* room for the floating tab bar: the last section can scroll fully above it */
.sec{ border-bottom:1px solid var(--line); }
.sec-head{ /* STICKY (2.10.0): the section you are reading pins to the top of the scrolling card and floats over its own content; it rides out as the next section arrives (sticky is bounded by the parent .sec, so the headers hand off rather than stack). Applies to collapsible AND .fixed heads alike. */
position:sticky;
top:0;
z-index:3; /* the layer stack: in-section controls (1-2) < a stuck head (3) < the overlay scrollbar (.ovscroll-bar, 4) < floating footer bars (6). The head floats over its content but must NOT cover the scroll thumb */
width:100%;
display:flex;
align-items:center;
gap:9px; /* the chevron belongs to the TITLE, so it sits just after it (2.20.0). Flung to the far right it read as a separate control — and once a .sec-headrow put a [?] out there, two unrelated glyphs shared that edge and the turn-symbol looked like it belonged to the help button rather than to the words it opens */
justify-content:flex-start;
background:var(--sec-head-bg, var(--card)); /* it must be OPAQUE to float over content; the token lets a non-card surface opt out (see .glass below) */
border:0;
cursor:pointer;
color:var(--accent);
padding:14px 18px 13px;
font-family:inherit;
font-size:11px;
font-weight:700;
letter-spacing:.18em;
text-transform:uppercase;
transition:color .15s;
}
.sec-head:hover{ color:var(--accent); }
.sec.fixed .sec-head{ cursor:default; }
.sec.fixed .sec-head:hover{ color:var(--accent); }
/* A SECTION HEAD THAT CARRIES A [?]. `.sec-head` is a