/* ══════════════════════════════════════════════════════════════════════════
KNOX VISION · V7
Extracted from knox-vision-v7.html. Do not edit this file.
Change the master, then re-run dist-v7/_extract.py. Anything typed directly
in here is lost at the next extract and, worse, is invisible until it is.
Apps LINK this file. They do not copy it.
══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
KNOX VISION V6 · THE UNIVERSAL MASTER
V5's visual language, locked 23-08-2026 and carried verbatim. V6 adds what
three real apps needed: composition, the console instrument, one spotlight,
media, the phone, and three proof screens. Built 27-08-2026, through Adam.
═══════════════════════════════════════════════════════════════════════════ */
/* ── LAYER 0 · THE SEEDS ─────────────────────────────────────────────────────
V4 had five. V5 has SIX: accent is split out from status, because a
red-branded client currently cannot have a visible error state and a
gold-branded one cannot have a warning. Hard rule: accent and status sit at
least 45 degrees apart in hue. */
:root {
--seed-ink: #0D0D0D; /* LOCKED 23-08-2026 */ /* dark ground */
--seed-paper: #E6E6E6; /* LOCKED */ /* light ground */
--seed-accent-hi:#A82938; /* LOCKED */ /* brand gradient, high */
--seed-accent-lo:#1F0007; /* LOCKED */ /* brand gradient, low */
--seed-status: #FF7033; /* LOCKED, Knox's own value, restored 23-08-2026 after he saw the
amber alternative and rejected it. KNOWN TRADEOFF: this sits only
22 degrees from the brand red in OKLCH, so danger and accent are
not separable by hue. Destructive actions must therefore be told
apart by POSITION, LABEL and ICON, never by colour alone, and
anything financial in Knox Artiste Accounts needs an explicit
confirm step. Do not "fix" this back to amber.
RULE MOVED 29-08-2026, by Knox. The old "an accent must sit 45
degrees from status" is retired: the HOUSE palette fails it at 22
and no Knox app ever passed, so it was a rule nothing met. The
compensation on the line above is now the HOUSE DEFAULT in every
app, whatever its accent. The threshold is 20 and it asks a
different question: do these two read as ONE colour. Under 20 the
seed moves. The panel computes it live. */ /* danger anchor. warn / ok / info rotate off it */
/* ── LAYER 0b · SHAPE, SPACE, MOTION, TYPE SCALE ──
All four are dials in the console. V4 hard-coded every one of them. */
--u: 5px; /* spacing unit, density-driven */
--r: 20px; /* THE radius. Everything derives. */
--r-xs: calc(var(--r) * .4); /* marks, inputs, menu rows */
--r-lg: calc(var(--r) * 1.4); /* cards, modals, the app frame */
--r-pill: 999px;
--dur: 1; /* motion multiplier */
/* --ctrl-h moved to LAYER 0d, where the density dial that drives it lives. */
/* THE CONTROL BAR LAW. Everything on one horizontal bar shares this height AND
this corner. A pill next to a rounded rectangle reads as two systems, which
is what the composer looked like. The only exception is a glyph key: a plus
or a minus is meant to read as a small square button. */
--bar-r: var(--btn-r);
--ts: 1; /* type scale multiplier */
--elev: 1.1; /* elevation strength multiplier */
/* ── WHAT THE 5px UNIT ACTUALLY GOVERNS ──────────────────────────────────
WRITTEN DOWN 27-08-2026, because it was being enforced as a rule nobody had
stated and the system does not follow.
Measured, in this file: 365 spacing declarations, 126 of them raw px that
are NOT on the 5px grid, across seventeen distinct values (1, 2, 2.5, 3, 4,
6, 7, 8, 9, 11, 12, 14, 16, 22, 23, 26, 32). That is not drift. `.menu`
ships padding 6px, `.field` ships gap 7px, `.optrow` ships
`padding: 9px var(--sp-3)` with one of each in a single declaration, and
every one of those was chosen by eye against a real control.
THE UNIT GOVERNS LAYOUT. Space BETWEEN components, section padding, rail
and panel widths, the rhythm of a page. Those take --sp-1 through --sp-8
and there is no good reason to ever write a raw number for them.
CONTROL INTERNALS ARE OPTICAL. The padding inside a chip, the gap between a
glyph and its label, a menu's 6px inset, the 9px that makes a 32px row read
as centred. A 5px grid applied there makes controls that are a pixel wrong
in a way you can see and cannot name.
Why this had to be said out loud: Darkroom was audited against the grid and
came back with fifteen off-grid values, all but two of them control
internals, while reaching for a token MORE often than this file does (71%
against 58%). The app was more disciplined than the system judging it. The
next step proposed was adding a ninth token at 3px, which this file's own
126 exceptions would have carried on ignoring.
So: an app off the grid on LAYOUT is a finding. An app off the grid inside a
control is not, and neither is this file. */
--sp-1: calc(var(--u) * 1); --sp-2: calc(var(--u) * 2);
--sp-3: calc(var(--u) * 3); --sp-4: calc(var(--u) * 4);
--sp-5: calc(var(--u) * 6); --sp-6: calc(var(--u) * 8);
--sp-7: calc(var(--u) * 12); --sp-8: calc(var(--u) * 16);
/* Clearance for the floating dock. Derived, never typed: a hand-derived
number goes stale the moment the dock changes, and it did. Full reasoning
sits with the .dock rule itself. */
--dock-h: calc(44px + var(--sp-2) * 2 + 2px); /* item + own padding + border */
--dock-clear: calc(var(--dock-h) + var(--sp-4) + var(--sp-6));
/* ── LAYER 0c · SHELL GEOMETRY ────────────────────────────────────────────
ADDED 28-08-2026. This is the layer the system was missing, and its absence
is the whole of "the gaps and spaces are all out of place".
V6 already fixed composition INSIDE a screen: .screen sets the rhythm and
.band holds one concern. What no version has ever described is the SHELL
the screen sits in. So each app typed its own numbers, and they disagree.
Measured across the four live builds, 28-08-2026:
rail width Accounts 218 · Grid 218 · Pulse 218 · Darkroom 216
(and Grid's own design pack says 232, which the build
never matched)
canvas padding 20/30/60 · 20/26/60 · 18/20/22 · 60/32/120
canvas cap none · none · 1560 · 1040-1160
shell breakpoint 760 and 860 in Accounts · 1000 in Grid ·
760 AND 860 both live in the same Pulse file ·
860, 900 and 820 across three Darkroom artefacts
Four apps, four shells, no disagreement anyone chose. A producer moving
from Pulse to Accounts should not feel the furniture move under them.
These are the numbers. An app SETS them, it does not retype them. */
--rail-w: 218px; /* the nav rail. Three of four apps already ship this. */
--rail-w-icons: 62px; /* [data-rail="icons"] */
--rail-w-wide: 248px; /* only where a rail carries two-line labels */
--panel-w: 320px; /* inspector / side panel, docked beside the canvas */
--panel-w-lg: 400px; /* drawer over the canvas */
--canvas-max: 1560px; /* the reading cap. Per-app, see the table below. */
--canvas-pad-x: var(--sp-5);
--canvas-pad-t: var(--sp-4);
--canvas-pad-b: var(--sp-7);
--gutter: var(--sp-4); /* the 12-column page gutter */
--row-h: 44px; /* one table row at default density */
/* ── THE THREE BREAKPOINTS ────────────────────────────────────────────────
Custom properties cannot be read inside @media, so these are written down
rather than tokenised. That makes the discipline social, so it is stated
once, here, and nowhere else. The four apps between them currently ship
SIXTEEN distinct breakpoints. Three is the whole system:
600px PHONE. One column. The dock replaces the rail. Touch density.
860px SHELL. The rail lies down. Canvas gutters drop a step.
1180px PANEL. A docked side panel goes under the canvas, not beside it.
Anything else is a component asking for a per-component rule, which is
fine and is not a breakpoint. Do not add a fourth. */
/* ── LAYER 0d · DENSITY ───────────────────────────────────────────────────
One dial, three settings, set once per app on .
Accounts runs compact because a P&L is a wall of numbers. Darkroom runs
comfortable because the frame is the content and chrome should recede.
Grid and Pulse sit at default. Nothing else in the system changes. */
--ctrl-h: 36px;
/* Z-scale. V4 hard-coded 0,1,2,50,60,70,1000 with no system. */
--z-base: 1; --z-chrome: 20; --z-sticky: 30; --z-drop: 40; --z-lift: 50;
--z-overlay: 60; --z-modal: 70; --z-drop-over: 75; --z-toast: 80; --z-tip: 85; --z-console: 90;
/* --z-drop-over ADDED 27-08-2026, from Darkroom. A MENU PORTALLED OUT OF ITS
CONTAINER NEEDS A HIGHER FLOOR THAN ONE THAT STAYS IN IT.
`--z-drop` at 40 is correct for this system's own `.drop-menu`, which is
position:absolute inside `.drop` and therefore inherits whatever stacking
context opened it. Inside a modal it rides the modal up and 40 is relative.
An app that portals its menus to document.body loses that inheritance, and
40 becomes an absolute number sitting BELOW --z-modal at 70: every dropdown
inside every dialog lands underneath it. Darkroom portals every menu on
purpose, because a canvas with overflow:hidden, a transform on the dock
that breaks position:fixed, and isolation on the side panels are four
separate traps for a menu rendered in place, and chasing them one at a time
is what once put a resolution picker behind a surface nobody could see.
So this is the paired token, not a replacement. In-place menus stay on
--z-drop. A portalled menu takes --z-drop-over, which clears the modal and
still sits under the toast, because a toast has to be readable over both.
Pulse and Grid both have modals and will each rediscover this the first
time they portal a menu.
THEY BOTH DID. Verified 28-08-2026, against the four live builds:
Grid found it as menus positioned off-screen, because a modal that
animates `transform` becomes the containing block for its own
`position:fixed` children. Fixed by portalling to body.
Pulse ships `.drop-menu` at z-index 50 and `.sdrawer` at 76, so every
menu opened inside a drawer lands underneath it. Knox found it on
the New Shoot crew picker. STILL OPEN at the time of writing.
KAA portals at a hand-typed z-index of 1100, outside the scale
entirely, which works and tells the next reader nothing.
Three apps, three different answers, one bug. That is a system failure,
not three app failures.
--z-lift ADDED 28-08-2026, and it is the one that fixes the common case
without any JavaScript at all. See THE LIFT LAW, with the surfaces. */
/* Type scale. Seven steps, and only TWO of them live below body. V5's first
pass ran six sizes between 9px and 13.5px, which is not a hierarchy.
Below body, difference comes from weight, case and colour. */
--fs-caps: calc(11px * var(--ts)); /* every uppercase label, eyebrow, table head, status, count */
--fs-sm: calc(13px * var(--ts)); /* meta, help, dense control text, card titles */
--fs-md: calc(15px * var(--ts)); /* body */
--fs-lg: calc(19px * var(--ts)); /* lede, card title, secondary metric */
--fs-xl: calc(26px * var(--ts)); /* section heading */
--fs-2xl: calc(34px * var(--ts)); /* metric */
--fs-display: clamp(calc(30px * var(--ts)), 5.2vw, calc(64px * var(--ts)));
/* Line heights and tracking, tokenised. V4 set both inline, everywhere. */
--lh-display: .96; --lh-head: 1.14; --lh-body: 1.6; --lh-ui: 1.35;
--ls-display: -.02em; --ls-head: .01em; --ls-body: 0; --ls-caps: .12em;
/* Motion. Two house curves plus a press and a spring. Adam caps this at three
in new work; V4's four are grandfathered and kept because the press curve
is load-bearing on every key. */
--ease-entrance: cubic-bezier(.23,1,.32,1);
--ease-hover: cubic-bezier(.33,1,.68,1);
--ease-press: cubic-bezier(.22,.61,.36,1);
--ease-spring: cubic-bezier(.34,1.56,.64,1);
--d-press: calc(70ms * var(--dur));
--d-fast: calc(140ms * var(--dur));
--d-base: calc(280ms * var(--dur));
--d-slow: calc(400ms * var(--dur));
/* Type roles. Hero is LOCKED to Special Gothic Expanded One (Knox, 23-08).
The other four are console dials. */
--f-hero: 'Special Gothic Expanded One', 'Arial Black', sans-serif;
--f-head: 'Special Gothic Expanded One', 'Arial Black', sans-serif;
--f-ctrl: 'Archivo', system-ui, sans-serif;
--f-body: 'Figtree', system-ui, sans-serif;
--f-num: 'Special Gothic Expanded One', 'Arial Black', sans-serif; /* Knox, 27-08-2026 */
/* ── NUMERALS, AND WHY THERE ARE TWO OF THEM ──────────────────────────────
CHANGED 27-08-2026. Urbanist is gone. It was never chosen for this job: in
V4 the BODY face was Urbanist and `--f-num` was that same face at 700, so
numerals were simply the body, bolded. V5 moved the body to Figtree and
left the numerals behind, and Urbanist became an orphan that existed only
for numbers. It is also, measured against 28 faces on 27-08, one of only
three with NO digit alignment at all: 000000 runs 91.92px wider than
111111 at 60px, and `tabular-nums` changes nothing. Forty-four
`tabular-nums` declarations in this file were doing nothing.
Special Gothic Expanded One is the numeral face now, which ties the number
to the display voice.
IT CANNOT HOLD A COLUMN, and that is measured, not assumed. Per-digit
advance at 60px runs 28.74px for the 1 against 54.72px for the 0.
`tabular-nums` is a PARTIAL feature in this face: it equalises the 1 and
the 7 and leaves a 7.50px spread across the rest. Five money strings of
identical length land 13px apart at a 13px font size, which is a whole
character of disagreement down the right edge of a P&L. Geist Mono lands
them at 0.00px. It is also 24% wider, so it eats a dense table.
So: `--f-num` is the DISPLAY numeral, for a value that stands alone. A KPI,
a count on a chip, a price on a key, a duration on a thumbnail. Nothing
sits under it to line up with, and the wide face reads as brand.
`--f-num-col` is the COLUMN numeral, for anything that stacks and has to
agree down the right edge. Twelve rules in this file, and every one of them
already declared `tabular-nums`, which is the previous author saying this
same thing without a token to say it with.
The test is not "is this a number". It is "is there another number directly
above or below this one". */
--f-num-col: 'Geist Mono', ui-monospace, monospace;
--f-brand: 'Special Gothic Expanded One', 'Arial Black', sans-serif; /* eyebrows, stamps, brand moments */
--f-ui: var(--f-ctrl);
--f: var(--f-body);
--fm: 'Geist Mono', ui-monospace, monospace;
--num-wt: 400; /* Special Gothic Expanded One ships ONE weight. 400, 600 and 800
all measure 461.59px on the same string, so the 700 that sat here
was inert on every one of the 54 rules that read it. */
--num-wt-col: 500; /* the mono does need 500 */
/* ── NOISE, ADDED V7 ─────────────────────────────────────────────────────
V6 hardcoded grain opacity at eight sites, at seven different values
between .03 and .06, each chosen by eye against its own surface. Those
ratios are kept EXACTLY. --noise-o is a multiplier over all of them, so
at the default of 1 every site renders the identical value it did in V6
and the diff against dist-v6 is empty. Turn it to 0 for no grain, or up
for more, and the relationship between surfaces holds. */
/* ── SEED SIX · MEDIA, ADDED 30-08-2026 ──────────────────────────────────
Knox: the colour on the reference boxes is the wrong accent for this
palette. He is right, and it was worse than wrong: those three values were
lifted from example markup in a wireframe and existed nowhere in the token
system, so three colours were shipping in an instrument that no dial could
reach and no export could carry.
A media seed is not an accent. It is the ground an image-shaped surface
shows when there is no image yet: a reference slot, a building proxy, an
empty tile. It must read as a held space rather than as a state, so it sits
off the accent entirely and carries no meaning.
References need to be told apart, so the seed generates a FAMILY: each slot
rotates a fixed step off the seed hue, deterministic by index, so reference
two is the same tint every session. One seed, one dial, N slots. */
--seed-media: #2A2E33;
/* Hue rotation per slot. The family REPEATS after five: fourteen references
at a fixed step walks 338 degrees, which is a rainbow, and a rainbow of
held spaces is the multicoloured-status tell in another costume. Five
tints is enough to tell neighbours apart while the tray still reads as one
tonal set. The slot sets --i to its index modulo five. */
--media-step: 26deg;
--media-family: 5;
--noise-o: 1;
--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--grad-accent: linear-gradient(160deg in oklab, var(--seed-accent-hi) 0%,
color-mix(in oklab, var(--seed-accent-hi) 45%, var(--seed-accent-lo)) 48%,
var(--seed-accent-lo) 100%);
}
/* ── LAYER 1 · DARK DERIVATION ───────────────────────────────────────────── */
:root, [data-theme="dark"] {
color-scheme: dark;
--bg: var(--seed-ink);
--surface: color-mix(in oklch, var(--seed-ink) 96%, white);
/* THE DEEPEST SURFACE IS THE GROUND, AND IT HAS NO HUE. CHANGED 31-08-2026.
This was `color-mix(in oklch, var(--seed-ink) 85%, var(--seed-accent-lo))`,
which reads as "tint the recess toward the brand" and is a reasonable idea
that turned out to be a trap. It hands the recess to whatever an app names
as the LOW end of its accent gradient, and that end is chosen to be a dark
partner for the bright end, not to be a surface. Darkroom's is `#010029`,
a near-black navy, so every sunken thing in a red-accented app came out
cold blue: `.pwell`, `.well`, slider tracks, and the viewer's own wells.
Measured at oklch(0.1545 0.0130 267) inside a panel at oklch(0.2347 0 0).
Knox saw it on the viewer's prompt box and said it was not following the
design system. He was right, and the tell was already in this file: the
LIGHT theme's `--surface-deep` is `color-mix(var(--seed-paper) 93%, black)`
- no accent, no hue, just further from the light. The two themes disagreed
about what sunken means and only one of them had a colour in it.
So the recess is the ground. A raised surface is the ink lifted toward
white; the deepest one is the ink, unlifted. Nothing in the palette needs a
hue to say "this is below the thing around it", and a tinted box behind
text competes with the one accent in the panel that is doing work. */
--surface-deep: var(--seed-ink);
--surface-raise: color-mix(in oklch, var(--seed-ink) 91%, white);
--ctrl: color-mix(in oklch, var(--seed-ink) 80%, white);
--ctrl-hi: color-mix(in oklch, var(--seed-ink) 78%, white);
--hover: color-mix(in oklch, var(--seed-ink) 91%, white);
--grad-ground: linear-gradient(172deg, color-mix(in oklch, var(--seed-ink) 93%, white) 0%, var(--surface) 40%, var(--surface-deep) 100%);
--text: color-mix(in oklch, var(--seed-ink) 12%, white);
--muted: color-mix(in oklch, var(--seed-ink) 42%, white);
--subtle: color-mix(in oklch, var(--seed-ink) 58%, white);
/* --subtle IS NOT READABLE, AND THAT IS NOT A BUG IN IT. Measured in OKLCH
from the seeds: 3.23:1 on --surface, 3.42:1 on --surface-deep and 2.93:1 on
--surface-raise. AA wants 4.5:1 for anything under 18.66px bold, and every
job --subtle holds is 9px to 13px.
So it gets the treatment the status colours already have, and for the same
reason: --danger is a fill and --danger-text is the readable version, because
a red that works as a 3px bar measures 2.97:1 as 13px type. One token cannot
be both the quiet tier and a legible one.
--subtle KEEPS the jobs it is right for and nothing changes for them:
placeholders, calendar days outside the month, decorative separators, the
disabled rail. Those are meant to recede and brightening them would be the
actual regression.
--subtle-text carries anything set as WORDS: table headers, field help, the
breadcrumb, rail group labels, empty-state copy.
ON DARK IT LANDS ALMOST ON --muted, AND THAT IS THE HONEST ANSWER rather
than a mistake. A dark ground compresses the bottom of the range: --muted is
42% and the AA floor is 44%, so there is no readable tier below muted worth
naming. On light there IS room, so the light value stays a visible step
below its --muted. Do not "correct" the asymmetry.
Added 27-08-2026, from the Knox Artiste Accounts V5 pass, where the app had
been quietly patching this in eight places on its own since V4. */
--subtle-text: color-mix(in oklch, var(--seed-ink) 44%, white);
--disabled:color-mix(in oklch, var(--seed-ink) 72%, white);
--line: rgba(255,255,255,.08);
--line-strong: rgba(255,255,255,.15);
--rim: rgba(255,255,255,.15);
--accent-text: color-mix(in oklch, var(--seed-accent-hi) 45%, white);
/* OUTLINES AND LINK TEXT ONLY. Half white, so it is bright enough to read as a
ring on the dark ground. Never use it as a fill: it washes the brand out. */
--accent-live: color-mix(in oklch, var(--seed-accent-hi) 50%, white);
/* THE fill for anything that means "this is on". */
--accent-lit: color-mix(in oklch, var(--seed-accent-hi) 96%, white);
/* A SECOND fill tone, for a chart segment or a track that has to sit beside the
first. Derived from the accent's own dark end, so it stays in the family. */
--accent-deep: color-mix(in oklab, var(--seed-accent-hi) 55%, var(--seed-accent-lo));
/* ── THE CHART PALETTE ──
The ONLY place in the system that carries more than one hue. A legend has to
be matchable to a wedge, and three tints of one red are not.
THESE ARE ANCHORED, NOT ROTATED, and the reason is measured. The first cut
derived both secondaries by rotating the accent's own hue, which is elegant
and wrong: rotating an arbitrary accent by a fixed angle eventually lands in
the purple band, and across the eleven lab systems it did, twice. It also
multiplied the accent's CHROMA, so a deliberately near-neutral system got
three greys that no legend could be matched to.
So the two secondaries sit at fixed teal and blue, with their own chroma,
and only chart-1 follows the brand. --chart-2-h and --chart-3-h are the
escape hatch: a system whose accent is ITSELF teal or blue re-points them
rather than forking the component.
--chart-1-h is the third hatch and only a near-neutral system needs it: when
the accent has no meaningful hue of its own the browser hands back whatever
residue is left in it, which drifted into purple on one system and swung 100
degrees between the two modes on another. Pinning the HUE keeps lightness
and chroma still adapting per mode, which a flat colour override throws
away. */
--chart-2-h: 174;
--chart-3-h: 254;
/* max() on the chroma is the floor that stops a neutral system going grey. */
--chart-1: oklch(from var(--accent-lit) clamp(.44, l, .68) max(c, .085) var(--chart-1-h, h));
--chart-2: oklch(.56 .115 var(--chart-2-h));
--chart-3: oklch(.55 .125 var(--chart-3-h));
--accent-tint: color-mix(in srgb, var(--seed-accent-hi) 14%, transparent);
/* Text on an accent fill. Knox asked whether this white was the paper colour
or one picked by eye: it was neither, five different times. It now comes
from --seed-paper, so change the paper and every label on every accent fill
follows. Nothing on an accent is a literal white again. */
--on-accent: color-mix(in srgb, var(--seed-paper) 58%, white);
/* Status family. V4 had ONE status colour. All four derive from one seed by
hue rotation, so it stays a single dial. */
--danger: var(--seed-status);
--warning: oklch(from var(--seed-status) calc(l + .11) calc(c * .82) 78);
--success: oklch(from var(--seed-status) calc(l + .08) calc(c * .60) 152);
--info: oklch(from var(--seed-status) calc(l + .06) calc(c * .55) 236);
/* Readable on the dark ground: lift lightness, drop chroma so it does not glare. */
--danger-text: oklch(from var(--danger) clamp(.72, calc(l + .16), .93) calc(c * .82) h);
--warning-text: oklch(from var(--warning) clamp(.72, calc(l + .10), .93) calc(c * .82) h);
--success-text: oklch(from var(--success) clamp(.72, calc(l + .10), .93) calc(c * .82) h);
--info-text: oklch(from var(--info) clamp(.72, calc(l + .10), .93) calc(c * .82) h);
--alert: var(--danger); --err: var(--danger);
/* Elevation, six tiers. V4 had two shadows and no scale.
Dark mode: the SURFACE lifts, the shadow only occludes. */
--e0: none;
--e1: inset 0 1px 0 0 rgba(255,255,255,calc(.05 * var(--elev))),
0 0 0 1px rgba(255,255,255,calc(.05 * var(--elev)));
--e2: inset 0 1px 0 0 rgba(255,255,255,calc(.06 * var(--elev))),
0 0 0 1px rgba(255,255,255,calc(.06 * var(--elev))),
0 2px 8px -4px rgba(0,0,0,calc(.50 * var(--elev)));
--e3: inset 0 1px 0 0 rgba(255,255,255,calc(.07 * var(--elev))),
0 0 0 1px rgba(255,255,255,calc(.08 * var(--elev))),
0 8px 24px -12px rgba(0,0,0,calc(.60 * var(--elev))),
0 16px 40px -20px rgba(0,0,0,calc(.50 * var(--elev)));
--e4: inset 0 1px 0 0 rgba(255,255,255,calc(.08 * var(--elev))),
0 0 0 1px rgba(255,255,255,calc(.09 * var(--elev))),
0 16px 40px -16px rgba(0,0,0,calc(.70 * var(--elev))),
0 40px 80px -32px rgba(0,0,0,calc(.60 * var(--elev)));
--e5: var(--e4), 0 80px 140px -48px rgba(0,0,0,calc(.55 * var(--elev)));
--e-sunk: inset 0 2px 6px rgba(0,0,0,calc(.55 * var(--elev))), inset 0 -1px 0 rgba(255,255,255,.05);
--sh: var(--e3); --sh-sm: var(--e2); --well: var(--e-sunk);
--extrude: 0 7px 16px -5px rgba(0,0,0,calc(.55 * var(--elev))), 0 1px 0 rgba(255,255,255,.08) inset;
/* The instrument's rest shadow: it sits above the canvas, it does not float off it. */
--e-rest: 0 18px 44px -16px rgba(0,0,0,calc(.62 * var(--elev))), inset 0 1px 0 rgba(255,255,255,.06);
--edge-ring: linear-gradient(155deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 30%, rgba(255,255,255,0) 52%, rgba(0,0,0,.16) 100%);
--glass-bg: color-mix(in srgb, var(--surface) 42%, transparent);
--glass-border: rgba(255,255,255,.13);
--glass-hi: rgba(255,255,255,.17);
--scrim: color-mix(in srgb, var(--seed-ink) 62%, transparent);
}
/* ── LAYER 1b · LIGHT DERIVATION ─────────────────────────────────────────── */
[data-theme="light"] {
color-scheme: light;
/* V4 hard-coded a second status hex here (#B64D14). That broke the moment the
console wrote --seed-status inline, because an inline value on beats
a [data-theme] rule and the light correction silently stopped applying.
Light mode now DERIVES its status from the same seed, so re-theming reaches
both modes and there is only ever one status dial. */
--bg: var(--seed-paper);
--surface: color-mix(in oklch, var(--seed-paper) 42%, white);
--surface-deep: color-mix(in oklch, var(--seed-paper) 93%, black);
--surface-raise: color-mix(in oklch, var(--seed-paper) 26%, white);
--ctrl: color-mix(in oklch, var(--seed-paper) 89%, black);
--ctrl-hi: color-mix(in oklch, var(--seed-paper) 85%, black);
--hover: color-mix(in oklch, var(--seed-paper) 88%, black);
--grad-ground: linear-gradient(172deg, color-mix(in oklch, var(--seed-paper) 30%, white) 0%, var(--surface) 40%, color-mix(in oklch, var(--seed-paper) 97%, black) 100%);
--text: color-mix(in oklch, var(--seed-paper) 24%, black);
--muted: color-mix(in oklch, var(--seed-paper) 46%, black);
--subtle: color-mix(in oklch, var(--seed-paper) 56%, black);
--subtle-text: color-mix(in oklch, var(--seed-paper) 50%, black); /* 4.61:1 worst case */
--disabled:color-mix(in oklch, var(--seed-paper) 72%, black);
--line: rgba(25,40,48,.10);
--line-strong: rgba(25,40,48,.18);
--rim: rgba(255,255,255,.95);
--accent-text: var(--seed-accent-hi);
--accent-live: var(--seed-accent-hi);
--accent-lit: var(--seed-accent-hi);
--accent-deep: color-mix(in oklab, var(--seed-accent-hi) 55%, var(--seed-accent-lo));
--chart-1: oklch(from var(--accent-lit) clamp(.36, l, .58) max(c, .095) var(--chart-1-h, h));
--chart-2: oklch(.46 .120 var(--chart-2-h));
--chart-3: oklch(.43 .145 var(--chart-3-h));
--accent-tint: color-mix(in srgb, var(--seed-accent-hi) 11%, transparent);
--on-accent: color-mix(in srgb, var(--seed-paper) 70%, white);
--danger: color-mix(in oklch, var(--seed-status) 84%, black);
--warning: oklch(from var(--seed-status) calc(l - .16) calc(c * .92) 72);
--success: oklch(from var(--seed-status) calc(l - .18) calc(c * .62) 150);
--info: oklch(from var(--seed-status) calc(l - .16) calc(c * .58) 240);
/* Readable on paper: drive lightness DOWN hard. A gold that reads as a bar at
l .62 is unreadable as 13px text; it has to come to roughly l .45. */
--danger-text: oklch(from var(--danger) clamp(.30, calc(l - .16), .50) calc(c * .96) h);
--warning-text: oklch(from var(--warning) clamp(.30, calc(l - .16), .50) calc(c * .96) h);
--success-text: oklch(from var(--success) clamp(.30, calc(l - .14), .50) calc(c * .96) h);
--info-text: oklch(from var(--info) clamp(.30, calc(l - .14), .50) calc(c * .96) h);
--alert: var(--danger); --err: var(--danger);
/* Light mode: the surface holds still, the shadow carries the whole signal. */
--e0: none;
--e1: 0 0 0 1px rgba(15,32,39,calc(.045 * var(--elev))),
0 1px 1px -.5px rgba(15,32,39,calc(.06 * var(--elev))),
0 2px 4px -1.5px rgba(15,32,39,calc(.06 * var(--elev)));
--e2: 0 0 0 1px rgba(15,32,39,calc(.045 * var(--elev))),
0 1px 1px -.5px rgba(15,32,39,calc(.06 * var(--elev))),
0 3px 6px -2px rgba(15,32,39,calc(.07 * var(--elev))),
0 8px 16px -6px rgba(15,32,39,calc(.06 * var(--elev)));
--e3: 0 0 0 1px rgba(15,32,39,calc(.05 * var(--elev))),
0 4px 8px -3px rgba(15,32,39,calc(.06 * var(--elev))),
0 12px 24px -8px rgba(15,32,39,calc(.08 * var(--elev))),
0 24px 40px -16px rgba(15,32,39,calc(.06 * var(--elev)));
--e4: 0 0 0 1px rgba(15,32,39,calc(.05 * var(--elev))),
0 8px 16px -6px rgba(15,32,39,calc(.08 * var(--elev))),
0 24px 48px -16px rgba(15,32,39,calc(.12 * var(--elev))),
0 48px 96px -32px rgba(15,32,39,calc(.10 * var(--elev)));
--e5: var(--e4), 0 80px 160px -48px rgba(15,32,39,calc(.14 * var(--elev)));
--e-sunk: inset 0 2px 5px rgba(15,32,39,calc(.16 * var(--elev))), inset 0 -1px 0 rgba(255,255,255,.75);
--sh: var(--e3); --sh-sm: var(--e2); --well: var(--e-sunk);
--extrude: 0 9px 20px -7px rgba(15,32,39,calc(.20 * var(--elev))), 0 1px 0 rgba(255,255,255,.95) inset;
--e-rest: 0 18px 44px -18px rgba(15,32,39,calc(.30 * var(--elev))), inset 0 1px 0 rgba(255,255,255,.85);
--edge-ring: linear-gradient(155deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.40) 32%, rgba(15,32,39,.05) 68%, rgba(15,32,39,.13) 100%);
--glass-bg: color-mix(in srgb, var(--surface) 62%, transparent);
--glass-border: rgba(255,255,255,.70);
--glass-hi: rgba(255,255,255,.95);
--scrim: color-mix(in srgb, var(--seed-ink) 44%, transparent);
}
/* ── BROWSER RESET · nothing default ships ──────────────────────────────── */
* { margin:0; padding:0; box-sizing:border-box; }
html { transition: background-color var(--d-base) var(--ease-hover); -webkit-text-size-adjust:100%; }
body { background:var(--bg); color:var(--text); font-family:var(--f); font-size:var(--fs-md);
font-weight:450; line-height:var(--lh-body); min-height:100dvh; -webkit-font-smoothing:antialiased;
transition: background-color var(--d-base) ease, color var(--d-base) ease; }
[data-theme="light"] body { font-weight:400; }
body::after { content:""; position:fixed; inset:0; z-index:2; pointer-events:none;
background-image:var(--noise); background-size:140px; opacity:calc(.03 * var(--noise-o)); mix-blend-mode:overlay; }
[data-theme="light"] body::after { opacity:.02; mix-blend-mode:multiply; }
img, svg, video { max-width:100%; display:block; }
button, input, select, textarea { font:inherit; color:inherit; background:none; border:none; }
button { cursor:pointer; }
a { color:var(--accent-text); }
a:hover { color:var(--accent-live); }
/* NOTHING is selectable by default. Only real text fields are, because only a
field holds content the user typed and may legitimately want to copy. */
* { -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; }
/* `.vs-read` JOINS THE LIST, 30-08-2026, and it belongs by the rule's own
words. The rule above says only real text fields are selectable "because only
a field holds content the user typed and may legitimately want to copy" - and
a prompt readout is exactly that content, being read back. Knox: "I should be
able to select part of the prompt from its text to copy it, not just the
entire prompt." The Copy button takes all of it; selection is how you take a
clause. Without this the global rule silently made that impossible and the
readout looked broken rather than protected. */
input, textarea, [contenteditable="true"], .well-input, .t6-edit, .stepper input,
.vs-read {
-webkit-user-select:text; user-select:text; }
/* An outline follows the element's OWN corner, so anything that can take focus
needs a radius even when it has no visible border. `border-radius:inherit`
here was wrong twice over: it changes the ELEMENT, not the ring, and it
inherits from the parent rather than matching the shape you can see. */
:focus-visible { outline:2px solid var(--accent-live); outline-offset:2px; }
/* A field inside a well does NOT draw its own ring. The well carries focus, and
two indicators for one event is one too many. This is also why the ring looked
square: the input has no corner, the well has all of it. */
/* A CONTAINER THAT LOOKS LIKE A FIELD SHOWS THE FOCUS, NOT THE INPUT INSIDE IT.
The ring belongs on the thing the eye reads as the control. Drawing it on the
bare puts a hard rectangle inside a pill and the caret becomes the
least visible thing in it.
.tsearch and .srch were MISSING from this list, so every top bar in the
estate drew a browser-style box on click instead of just showing a cursor.
Fixed 27-08-2026, in the system rather than per app: Knox should not have to
say this again on the next build. Any new field-shaped container goes in this
list at the same time it is written. */
.well :is(input, textarea, button, [contenteditable]):focus-visible,
.well:focus-within :is(input, textarea),
.tsearch :is(input, button):focus-visible,
.tsearch:focus-within input,
.srch :is(input, button):focus-visible,
.srch:focus-within input { outline:none; }
/* And the container takes it instead, the same way a well deepens. */
.tsearch:focus-within { box-shadow:var(--e-sunk), 0 0 0 2px color-mix(in srgb, var(--seed-accent-hi) 45%, transparent); }
/* The well's own focus is unmistakable without a ring: the rim takes the accent
and the trough deepens. */
.well:focus-within:has(:is(input, textarea, [contenteditable]):focus) {
border-color:var(--accent-live);
box-shadow:var(--e-sunk), inset 0 0 0 1px color-mix(in srgb, var(--seed-accent-hi) 45%, transparent); }
/* Anything focusable that renders square gets a corner for the ring to follow. */
.rowitem, .optrow, .frow, .check, .ckrow, .tree-row, .cmdk .crow,
.menu button, .drop-menu button, .combo-list button, .sp-menu button {
border-radius:calc(var(--r-xs) * .8); }
.rowitem:focus-visible, .frow:focus-visible { outline-offset:-2px; }
::selection { background:color-mix(in srgb, var(--seed-accent-hi) 30%, transparent); }
* { scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
*::-webkit-scrollbar { width:9px; height:9px; }
*::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-track { background:transparent; }
/* ══ THE FOUR APPS ═════════════════════════════════════════════════════════
ADDED 28-08-2026, and this is the point of LAYER 0c.
Every app runs the SAME components, the SAME type, the SAME depth and the
SAME three breakpoints. What differs between an accounting ledger and a
generation canvas is density and reading width, and that is all that is
allowed to differ. Set two attributes on and stop.
┌──────────────┬──────────┬─────────────┬───────────┬──────────────────────┐
│ App │ density │ canvas cap │ panel │ why │
├──────────────┼──────────┼─────────────┼───────────┼──────────────────────┤
│ Accounts │ compact │ 1560px │ 320px │ a P&L is a wall of │
│ │ │ │ │ numbers; rows should │
│ │ │ │ │ be thin and the tabl │
│ │ │ │ │ e should breathe wid │
│ │ │ │ │ e. Knox: "the line │
│ │ │ │ │ item rows are far to │
│ │ │ │ │ o thick." │
│ Grid │ default │ none, full │ 400px │ a content calendar │
│ │ │ bleed │ (drawer) │ is a wall; capping │
│ │ │ │ │ it wastes the width. │
│ │ │ │ │ Its own design pack │
│ │ │ │ │ said full bleed and │
│ │ │ │ │ the build capped at │
│ │ │ │ │ 1440 anyway. │
│ Darkroom │ comfort- │ none, full │ 320px │ the frame IS the │
│ │ able │ bleed │ │ content. Chrome │
│ │ │ │ │ recedes, the canvas │
│ │ │ │ │ takes the room. │
│ Pulse │ default │ 1560px │ 400px │ mixed: lists, kanban │
│ │ │ │ │ call sheets, gear. │
│ │ │ │ │ Nothing extreme in │
│ │ │ │ │ either direction. │
└──────────────┴──────────┴─────────────┴───────────┴──────────────────────┘
The rail is 218px in all four, because it already is in three and the fourth
is 216 by accident. Canvas padding is the same in all four, because there was
never a reason for 20/30/60 and 20/26/60 and 18/20/22 to differ. Nobody chose
any of that; four sessions typed four numbers. */
[data-app="accounts"] { --canvas-max: 1560px; --panel-w: 320px; }
[data-app="grid"] { --canvas-max: none; --panel-w-lg: 400px; }
[data-app="darkroom"] { --canvas-max: none; --panel-w: 320px; }
[data-app="pulse"] { --canvas-max: 1560px; --panel-w-lg: 400px; }
/* ══ DENSITY ═══════════════════════════════════════════════════════════════
ADDED 28-08-2026. Set once, on , and never referenced
again. Everything downstream is already derived from --u and --ctrl-h, so
this is a two-line change per app rather than a re-skin.
WHY THIS BELONGS TO THE SYSTEM AND NOT TO THE APPS. Grid, on its own build:
"it's too chunky, everything is way too boxy, the layout is not well
planned." Accounts, on its line items: "the line item rows are far too
thick." Both are the same request, made a month apart, about the same
missing dial. Without it an app can only reach the density it wants by
retyping padding on every component, which is precisely how Grid ended up
with 888 lines of raw pixels and no token scale at all. */
[data-density="compact"] { --u: 4px; --ctrl-h: 32px; --row-h: 36px; }
[data-density="comfortable"] { --u: 6px; --ctrl-h: 40px; --row-h: 52px; }
/* ══ THE TOUCH FLOOR ═══════════════════════════════════════════════════════
A 36px control is right under a mouse and wrong under a thumb, and a 29px
filter chip is wrong under both. Measured at 375px on this file: 133 distinct
controls under the 44px floor, including every .b-sm, every .fchip and the
theme keys.
This is not a mobile stylesheet. It keys off the POINTER, not the width, so
a touch laptop and a tablet in landscape get it too and a narrow desktop
window does not. Density still applies on top: a compact app on a phone
lands at 44, not at 32. */
@media (pointer: coarse) {
:root { --ctrl-h: 44px; --row-h: 48px; }
.b-sm { height: 40px; }
.b-xs { height: 36px; }
.fchip { padding: 12px 16px; }
.b-icon.b-sm { width: 40px; height: 40px; }
/* Anything that reads as a row gets the floor whether or not it is a button. */
.rail a, .mrow, .optrow, .crow, .drop-menu button, .menu button, .combo-list button
{ min-height: 44px; }}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important;
transition-duration:.01ms !important; scroll-behavior:auto !important; }}
h1,h2,h3,h4 { max-width:100%; text-wrap:balance; }
.eyebrow { font-family:var(--f-brand); font-size:var(--fs-caps); font-weight:600; letter-spacing:var(--ls-caps);
text-transform:uppercase; color:var(--accent-text); }
h1 { font-family:var(--f-hero); font-size:var(--fs-display); font-weight:400; text-transform:uppercase;
letter-spacing:var(--ls-display); line-height:var(--lh-display); margin-top:var(--sp-3); }
.note { font-size:var(--fs-sm); color:var(--subtle); }
.mono { font-family:var(--fm); font-size:var(--fs-sm); color:var(--muted); }
/* Section label inside a card. Lived in the console block in the lab, so it came
out with it; the reference sections still use it. */
.c-lab { display:block; font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600;
letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--subtle); margin-bottom:var(--sp-2); }
.stack { display:flex; flex-direction:column; gap:var(--sp-3); }
.row { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
@media (max-width:760px){ .grid2,.grid3 { grid-template-columns:1fr; }}
/* A grid item defaults to min-width:auto, so its min-content can push the whole
column past the viewport. This is what overflowed the page at 375px. */
.grid2 > *, .grid3 > *, .kpi > *, .kb > *, .media-grid > * { min-width:0; }
/* The genuinely wide pieces then scroll inside themselves rather than the page. */
.filing, .steps, .timep { max-width:100%; }
.steps { overflow-x:auto; }
.cal, .iconrow { max-width:100%; }
.frow { min-width:0; }
.fname, .fmeta { min-width:0; overflow-wrap:anywhere; }
/* ── SURFACES ───────────────────────────────────────────────────────────── */
.card { background:var(--grad-ground); border-radius:var(--r-lg);
padding:var(--sp-5); box-shadow:var(--e2); }
.card, .t6-wrap, .kb-card, .modal, .wayfind, .pillar, .ramp > div { position:relative; isolation:isolate; }
/* ══ THE LIFT LAW ══════════════════════════════════════════════════════════
ADDED 28-08-2026. Knox: "there are some dropdowns that are falling behind
certain elements."
Reproduced, in a browser, on this file's own CSS: a `.drop` near the bottom
of a `.card`, with a second `.card` below it. The menu opens at
`--z-drop: 40` and the next card cuts straight through it. The screenshot is
unambiguous and the cause is one word on the line above.
`isolation:isolate` is CORRECT there and must stay: `.card::after` carries
the grain on `mix-blend-mode:overlay`, and without isolation that grain
blends through to the page instead of to the card. The isolation is what
contains it.
But isolation creates a STACKING CONTEXT, and a stacking context is a
sealed box. Inside `.card`, `z-index: 40` means "fortieth of the things in
this card". It does not mean "above the next card". The card itself sits at
`z-index: auto`, so the card that follows it in the DOM paints on top of the
whole box, menu included. Every value from 40 to 2147483647 loses this,
which is exactly why three apps reached for 1100, 120 and 50 and why none
of them fixed it.
You cannot win this from inside the box. You have to raise the box.
So: a stacking-context host holding an open popover lifts above its siblings
for exactly as long as it is open, and drops back the moment it closes.
`:has()` does it with no JavaScript, no portal, and nothing for an app to
remember, which is the only kind of fix that survives four apps. */
:is(.card, .band, .t6-wrap, .kb-card, .modal, .wayfind, .pillar, .instrument,
.media-card, .proof, .seg, .split, .ground, .phoneframe, .screen > *,
.frow, .panel, .well, .ramp > div, .topb, .rail, .cset):has(
:is(.drop, .combo, .split, .engwrap, .who).open,
:is(.drop-menu, .combo-list, .sp-menu, .menu, .pop, .engmenu).open
) { position: relative; z-index: var(--z-lift); }
/* AND THE HOST THAT IS ITSELF THE OPEN THING. `:has()` only looks DOWN. A
`.split` carries `.open` on itself and holds the menu inside, so
`.split:has(.split.open)` is false and the split-button menu kept landing
under the button row beside it. Second selector, same law. */
:is(.split, .drop, .combo, .engwrap, .who, .cset).open
{ position: relative; z-index: var(--z-lift); }
/* NO WHITESPACE BEFORE :has(). Written with a space on the first pass, which
is a descendant combinator: it lifted the host's CHILDREN and left the host
exactly where it was, so the fix tested identical to the bug. A selector that
looks right and matches the wrong element is the same class of failure as the
`.drop.open .drop-menu` ancestor gate two sections up. Both were found by
rendering it, not by reading it. */
/* ══ THE CLIP LAW ══════════════════════════════════════════════════════════
The lift answers a menu COVERED by a sibling. It cannot answer a menu CUT
OFF by an ancestor, because `overflow:hidden` clips regardless of z-index.
Both failures look identical to Knox and they have different fixes, which is
why they kept getting solved one at a time and coming back.
A container clips for one of two reasons and the fix is different for each.
Getting this wrong is not theoretical: applying `.popsafe` to the wrong one
during this very pass put 115px of table off the right edge at 375px, on a
file that had zero horizontal overflow at every width a minute earlier.
CLIPS FOR THE CORNER. `overflow:hidden` is masking square children inside a
rounded box, and nothing in there was ever going to scroll. Use `.popsafe`.
The corner gets drawn on the cells instead. Free, no JavaScript.
CLIPS FOR THE SCROLL. The content is genuinely wider or taller than the
box: a table on a phone, a review strip, a side panel. `.popsafe` CANNOT
help here and will make it worse, because CSS has no way to keep one axis
clipped and let the other escape. Setting `overflow-y:visible` next to
`overflow-x:hidden` silently computes the visible axis to `auto`. Use
knoxPop() and let the menu leave the container entirely.
If you are unsure which one you have: does anything in the box need to
scroll, at any width, ever? Yes is the portal. No is `.popsafe`.
Where the container MUST keep clipping, because it genuinely scrolls, the
menu leaves the container. That is what --z-drop-over and the
`.drop-menu.open` element-level twin exist for, and knoxPop() below now
ships the portal so the fifth app does not write a fourth version of it. */
/* Doubled class, deliberately. `.popsafe` and `.t6-wrap` are both one class,
so source order decides, and every clipping container in this file is defined
BELOW this line. `.popsafe.popsafe` is 0,2,0 and wins on specificity without
reaching for !important, which would then have to be beaten by the next
person who needs a genuine scroll container. */
.popsafe.popsafe { overflow: visible; }
/* ══ THE CLOSED MENU ═══════════════════════════════════════════════════════
ADDED 28-08-2026, and it is a THIRD failure wearing the same coat.
Every popover in this system hides with `opacity:0` and
`pointer-events:none`. It is still laid out. An absolutely positioned box
that is 330px wide and invisible still extends the scrollable area of the
document, and a 250px tall one still counts toward a dialog's scrollHeight.
Both have already shipped. Accounts: Knox reported the expense modal three
times, "text spacing is out of place", "goes past the window and cuts off",
"both horizontally and vertically scrollable". The cause written into that
app's own notes is "A CLOSED DROPDOWN MENU IS 250PX OF INVISIBLE HEIGHT".
And releasing one clip during this pass put 85px of invisible engine menu off
the right edge at 375px on a file that had none a minute before.
`visibility:hidden` does not fix it: a hidden box is still in the overflow
region. Only `display:none` removes it, and `display` used to be
untransitionable, which is why nobody used it and why every app grew this bug
independently.
It is transitionable now. `transition-behavior:allow-discrete` plus
`@starting-style` gives the fade AND the removal. A browser too old for it
snaps instead of fading, which is a smaller defect than a menu that
silently widens the page. */
:is(.drop-menu, .combo-list, .sp-menu, .engmenu, .who-menu, .pop) {
display: none;
transition-behavior: allow-discrete;
}
:is(.drop, .combo, .split, .engwrap, .who).open > :is(.drop-menu, .combo-list, .sp-menu, .engmenu, .who-menu, .pop),
:is(.drop, .combo, .split, .engwrap, .who).open :is(.drop-menu, .combo-list, .sp-menu, .engmenu, .who-menu, .pop),
:is(.drop-menu, .combo-list, .sp-menu, .engmenu, .who-menu, .pop).open {
display: block;
}
@starting-style {
:is(.drop, .combo, .split, .engwrap, .who).open :is(.drop-menu, .combo-list, .sp-menu, .engmenu, .who-menu, .pop),
:is(.drop-menu, .combo-list, .sp-menu, .engmenu, .who-menu, .pop).open {
opacity: 0;
}}
/* The corner without the clip. `overflow:hidden` was doing two jobs on
.t6-wrap: masking the table's square corners, and clipping. Releasing it
loses the corner, so the corner is drawn where it belongs instead, on the
cells that actually sit in it. Re-clipping on the table was the first
attempt and it just moved the clipper one level down. */
.popsafe > table { border-collapse: separate; border-spacing: 0; }
.popsafe > table > thead > tr:first-child > *:first-child { border-top-left-radius: inherit; }
.popsafe > table > thead > tr:first-child > *:last-child { border-top-right-radius: inherit; }
.popsafe > table > tbody > tr:last-child > *:first-child { border-bottom-left-radius: inherit; }
.popsafe > table > tbody > tr:last-child > *:last-child { border-bottom-right-radius: inherit; }
.card::before, .t6-wrap::before, .kb-card::before, .modal::before, .wayfind::before,
.pillar::before, .ramp > div::before, .seedcard .scw::before {
content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:3;
background:var(--edge-ring); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite:exclude; }
.card::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
background-image:var(--noise); background-size:120px; opacity:calc(.035 * var(--noise-o)); mix-blend-mode:overlay; }
[data-theme="light"] .card::after { opacity:.028; mix-blend-mode:multiply; }
.glass { position:relative; overflow:hidden; background:var(--glass-bg);
-webkit-backdrop-filter:blur(30px) saturate(150%); backdrop-filter:blur(30px) saturate(150%);
border:1px solid var(--glass-border); box-shadow:var(--e3), inset 0 1px 0 var(--glass-hi);
border-radius:var(--r); }
.glass::before { content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(155deg, var(--glass-hi), transparent 38%); opacity:.45; mix-blend-mode:screen; }
.glass::after { content:""; position:absolute; inset:0; pointer-events:none;
background-image:var(--noise); background-size:130px; opacity:calc(.05 * var(--noise-o)); mix-blend-mode:overlay; }
/* .well is defined ONCE, with the controls. A second padded copy here was double-padding every input. */
/* ═══ SURFACE FINISH · v3 ═══ machined (V4 default) · liquid glass · soft ═══
One attribute, three physics. Machined is the carved-hardware read the lab
already has, so it adds no rules. The other two only re-light SURFACES:
colour, type and spacing tokens stay untouched, so finishes compose with
every palette. */
[data-finish="soft"] { --soft-hi:rgba(255,255,255,.045); --soft-lo:rgba(0,0,0,.44); }
[data-theme="light"][data-finish="soft"] { --soft-hi:rgba(255,255,255,.92); --soft-lo:rgba(140,152,160,.40); }
[data-finish="soft"] .card, [data-finish="soft"] .kb-card, [data-finish="soft"] .toast, [data-finish="soft"] .modal {
border-color:transparent; box-shadow:-5px -5px 12px var(--soft-hi), 7px 9px 20px var(--soft-lo); }
[data-finish="soft"] .well, [data-finish="soft"] .stepper {
border-color:transparent; box-shadow:inset 3px 3px 7px var(--soft-lo), inset -3px -3px 7px var(--soft-hi); }
[data-finish="soft"] .btn-key { border-color:transparent;
box-shadow:-3px -3px 8px var(--soft-hi), 4px 5px 12px var(--soft-lo); }
[data-finish="soft"] .btn-key:active {
box-shadow:inset 2px 2px 6px var(--soft-lo), inset -2px -2px 6px var(--soft-hi); }
[data-finish="glass"] .card, [data-finish="glass"] .kb-card, [data-finish="glass"] .toast,
[data-finish="glass"] .modal, [data-finish="glass"] .drop-menu, [data-finish="glass"] .combo-list {
background:color-mix(in srgb, var(--surface-raise) 58%, transparent);
-webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%);
border-color:var(--glass-border);
box-shadow:0 12px 30px rgba(0,0,0,.16), inset 0 1px 0 var(--glass-hi); }
[data-finish="glass"] .btn-key {
background:color-mix(in srgb, var(--ctrl) 55%, transparent);
-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
border-color:var(--glass-border);
box-shadow:inset 0 1px 0 var(--glass-hi), 0 4px 12px rgba(0,0,0,.14); }
/* ═══ CONTROLS ═════════════════════════════════════════════════════════════
Rebuilt 23-08-2026 on V4's physics after Knox called these boring. The first
V5 pass turned every control into a soft pill, which is exactly the generic
look V4 was built to avoid. What comes back: keys with a real seated edge,
chunky padding, uppercase labels at the tracked micro size, and a press that
SCALES into a carved well on a calc(70ms * var(--dur)) override rather than nudging down 1px. */
/* Button character is a dial. Key is V4's machined rounded-rect. */
:root { --btn-r: 11px; --btn-pad: 13px 24px; --btn-fs: var(--fs-caps); --btn-ls: .07em; }
.btn-accent, .btn-key, .btn-ghost, .btn-danger {
position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
/* A label that wraps changes the height of the row it sits in. It never wraps. */
white-space:nowrap;
/* Every variant carries a 1px border, transparent where it is not drawn, so a
ghost and a key measure the same. Without this the outlined one is 2px taller
and a button row never quite lines up. */
border:1px solid transparent;
font-family:var(--f-ui); font-size:var(--btn-fs); font-weight:600; letter-spacing:var(--btn-ls);
text-transform:uppercase; line-height:1; border-radius:var(--btn-r); padding:var(--btn-pad);
transition:transform calc(90ms * var(--dur)) var(--ease-press), box-shadow calc(90ms * var(--dur)) ease,
background var(--d-fast) var(--ease-hover), color var(--d-fast) var(--ease-hover),
border-color var(--d-fast) var(--ease-hover); }
/* Primary. The Fill Law: oklab stops, DIAGONAL light, veil hover, seated edge. */
.btn-accent { overflow:hidden; isolation:isolate; color:var(--on-accent);
background:linear-gradient(115deg in oklab, color-mix(in oklab, var(--seed-accent-hi) 88%, white) 0%,
var(--seed-accent-hi) 55%, color-mix(in oklab, var(--seed-accent-hi) 82%, black) 100%);
border:1px solid color-mix(in oklab, var(--seed-accent-lo) 70%, black);
box-shadow:0 2px 5px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.18); }
[data-theme="light"] .btn-accent { box-shadow:0 2px 6px rgba(15,32,39,.22), inset 0 1px 0 rgba(255,255,255,.30); }
.btn-accent::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
background:rgba(255,255,255,.10); opacity:0; transition:opacity calc(160ms * var(--dur)) ease; z-index:-1; }
.btn-accent:hover::before { opacity:1; }
.btn-accent:active { transform:scale(.98); transition-duration:calc(70ms * var(--dur)); box-shadow:var(--e-sunk); }
/* Secondary. The key: sits low, no border, presses into the well. */
.btn-key { color:var(--text); background:var(--surface);
box-shadow:0 2px 4px rgba(0,0,0,.24); }
[data-theme="light"] .btn-key { box-shadow:0 2px 5px rgba(15,32,39,.12); }
.btn-key::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
background:var(--edge-ring); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite:exclude; }
.btn-key:hover { background:var(--hover); }
.btn-key:active { transform:scale(.98); box-shadow:var(--e-sunk); transition-duration:calc(70ms * var(--dur)); }
/* Tertiary. A real outlined key, not a naked word. */
.btn-ghost { color:var(--muted); background:transparent; border-color:var(--line-strong); }
.btn-ghost:hover { color:var(--text); border-color:var(--ctrl-hi); background:rgba(255,255,255,.03); }
[data-theme="light"] .btn-ghost:hover { background:rgba(15,32,39,.04); }
.btn-ghost:active { transform:scale(.98); box-shadow:var(--e-sunk); transition-duration:calc(70ms * var(--dur)); }
.btn-accent[disabled], .btn-key[disabled], .btn-ghost[disabled], .btn-danger[disabled] { color:var(--disabled); pointer-events:none;
background:var(--ctrl); box-shadow:none; border-color:var(--line); filter:saturate(.15); }
.b-sm { height:32px; padding:0 16px; border-radius:calc(var(--btn-r) * .8); }
/* ── .b-xs ── the density a data table needs ───────────────────────────────
ADDED 27-08-2026. `.b-sm` is 32px. A finance table puts a row of action keys
on every row, and 500 rows at 32px is 6px of extra height per row spent on a
control nobody is reading. Knox Artiste Accounts had hand-rolled 26px keys
with 10px type for exactly this, which is how it ended up overriding the
system in eleven places.
THE TYPE STAYS AT --fs-caps AND DOES NOT SHRINK, which is the deliberate part.
This system's scale stops at 11px on purpose: "Below body, difference comes
from weight, case and colour." A dense TABLE does not license a smaller
alphabet, it licenses a shorter control. So this is a height and a padding
and nothing else. */
.b-xs { height:26px; padding:0 10px; border-radius:calc(var(--btn-r) * .7); gap:6px; }
/* THE DEFAULT BUTTON SIZE NEEDS THIS TOO. Every other context that can hold
an icon sizes it, but the four faces at default size did not, so an icon
collapsed to 0x0 while the button's gap:9px still applied. The symptom is
a label pushed 9px right with nothing beside it. */
:where(.btn-accent, .btn-key, .btn-ghost, .btn-danger) > svg {
width:14px; height:14px; flex-shrink:0; }
.b-xs svg { width:14px; height:14px; }
.b-lg { height:52px; padding:0 32px; font-size:var(--fs-sm); border-radius:calc(var(--btn-r) * 1.25); }
.b-icon { width:42px; height:42px; padding:0; }
.b-icon svg { width:16px; height:16px; }
/* THE ICON BUTTON HAD ONE SIZE AND THE SYSTEM HAS THREE. 42px is right beside a
heading and far too big for a month arrow inside a date picker or a key on a
table row, which is why Knox Artiste Accounts had grown a private `.icon-key`
at 30 and 26. Added 27-08-2026: the size modifiers now mean the same thing on
an icon button as they do on a labelled one. */
.b-icon.b-sm { width:32px; height:32px; padding:0; }
.b-icon.b-sm svg { width:15px; height:15px; }
.b-icon.b-xs { width:26px; height:26px; padding:0; }
.b-icon.b-xs svg { width:13px; height:13px; }
/* The X. One icon button, one size logic, everywhere a surface needs closing. */
.ib { display:grid; place-items:center; width:28px; height:28px; border-radius:calc(var(--r-xs) * .9);
color:var(--subtle); flex-shrink:0; cursor:pointer;
transition:color var(--d-fast) var(--ease-hover), background var(--d-fast) var(--ease-hover); }
.ib:hover { color:var(--text); background:var(--hover); }
.ib:active { box-shadow:var(--e-sunk); }
.ib svg { width:12px; height:12px; }
/* ── THE SPLIT BUTTON ──
Two halves, two jobs. The FACE runs the currently chosen action. The CHEVRON
opens the menu and only changes which action that is. The first build pressed
as ONE object, which makes a split button a plain button wearing a chevron.
Each half now presses on its own, and the shared face keeps them reading as
a single key rather than two buttons shoved together. */
.split { position:relative; display:inline-flex; isolation:isolate; border-radius:var(--btn-r);
border:1px solid color-mix(in oklab, var(--seed-accent-lo) 70%, black);
box-shadow:0 2px 5px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.18);
background:linear-gradient(115deg in oklab, color-mix(in oklab, var(--seed-accent-hi) 88%, white) 0%,
var(--seed-accent-hi) 55%, color-mix(in oklab, var(--seed-accent-hi) 82%, black) 100%); }
[data-theme="light"] .split { box-shadow:0 2px 6px rgba(15,32,39,.22), inset 0 1px 0 rgba(255,255,255,.30); }
.split > .btn-accent, .split > .sp-more { position:relative; background:none; border:none;
box-shadow:none; transform:none; overflow:hidden;
transition:transform calc(90ms * var(--dur)) var(--ease-press), box-shadow calc(90ms * var(--dur)) ease; }
.split > .btn-accent { border-radius:calc(var(--btn-r) - 1px) 0 0 calc(var(--btn-r) - 1px); }
.split > .sp-more { border-radius:0 calc(var(--btn-r) - 1px) calc(var(--btn-r) - 1px) 0;
display:grid; place-items:center; padding:0 14px; color:var(--on-accent);
border-left:1px solid rgba(0,0,0,.30); box-shadow:inset 1px 0 0 rgba(255,255,255,.10); }
/* Each half takes its own hover veil and its own press. */
.split > .btn-accent::before, .split > .sp-more::before { content:""; position:absolute; inset:0;
background:rgba(255,255,255,.10); opacity:0; pointer-events:none;
transition:opacity var(--d-fast) var(--ease-hover); }
.split > .btn-accent:hover::before, .split > .sp-more:hover::before { opacity:1; }
.split > .btn-accent:active { transform:scale(.975); transition-duration:calc(70ms * var(--dur));
box-shadow:inset 0 2px 5px rgba(0,0,0,.4); }
.split > .sp-more:active { transform:scale(.94); transition-duration:calc(70ms * var(--dur));
box-shadow:inset 0 2px 5px rgba(0,0,0,.4), inset 1px 0 0 rgba(255,255,255,.10); }
.split > .sp-more svg { width:12px; height:12px;
transition:transform var(--d-base) var(--ease-spring); }
.split.open > .sp-more svg { transform:rotate(180deg); }
.split .sp-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:var(--z-drop);
/* A menu is as wide as its trigger, and grows only if its OWN content needs
more. The 224px floor here was arbitrary: it had nothing to do with the
button it hangs off or the items inside it, so a 169px Export key opened a
221px menu for no reason. min-width:100% is the floor that actually means
something; max-content is the ceiling. */
min-width:100%; width:max-content; max-width:min(340px, 90vw);
opacity:0; transform:translateY(-6px) scale(.985);
pointer-events:none; transform-origin:top right;
transition:opacity var(--d-fast) var(--ease-hover), transform var(--d-base) var(--ease-spring); }
/* Twin of the ancestor gate. See the note on .drop-menu. 27-08-2026. */
.split.open .sp-menu, .sp-menu.open { opacity:1; transform:none; pointer-events:auto; }
/* THE TINT CARRIES THE STATE, THE TYPE STAYS FULL STRENGTH. Accent type on an
accent-tinted ground is the same washed-out pairing that made the model keys
read light red, and it also leans on colour alone to say "current". A tinted
ground plus --text says it without either problem, which is what the tabs
already do. */
.split .sp-menu button.on { color:var(--text); background:var(--accent-tint); }
/* ── THE WELL ──
V4's well is a CONTAINER, not an input. Anything can sit in it, and the
trough visibly DEEPENS on focus rather than gaining an outline ring. */
.well { position:relative; display:flex; align-items:stretch; background:var(--surface-deep); border:1px solid var(--line);
border-radius:var(--r-xs); box-shadow:var(--e-sunk);
transition:border-color var(--d-fast) var(--ease-hover), box-shadow var(--d-fast) var(--ease-hover); }
/* A FOCUS TREATMENT IS FOR THE THING YOU ARE TYPING INTO, NOT FOR EVERY THING
THAT CAN HOLD FOCUS. Knox, 21-08-2026: "selection of date is outlining the
field in the accent colour. This has to be fixed across the entire site."
`:focus-within` fires for anything inside, and a `.drop-trig` is a div with a
tabindex and nothing to type into. Picking a date returns focus to the
trigger, so the field kept an accent rim long after the job was done, on
every date and every dropdown in every app. Knox Artiste Accounts patched it
locally; that is why it is fixed here instead.
`:has()` is the whole fix: the well lights up when what holds focus is an
input or a textarea, and a trigger takes the ordinary `:focus-visible` ring
for the keyboard and nothing at all for the mouse. Same shape as the
`.tsearch` / `.srch` fix above. Added 27-08-2026. */
.well:focus-within:has(:is(input, textarea, [contenteditable]):focus) {
border-color:color-mix(in srgb, var(--seed-accent-hi) 50%, transparent);
box-shadow:var(--e-sunk), inset 0 0 12px rgba(0,0,0,.10); }
.well-input { flex:1; min-width:0; width:100%; font-family:var(--f-body); font-size:var(--fs-md);
line-height:1.2; color:var(--text); background:transparent; border:none; outline:none; padding:12px 15px; }
.well-input::placeholder { color:var(--subtle); }
textarea.well-input { min-height:84px; resize:none; line-height:1.5; display:block; }
.well.err { border-color:var(--danger); }
.well.err:focus-within { border-color:var(--danger); }
.field { display:flex; flex-direction:column; gap:7px; }
.f-label { font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600; letter-spacing:var(--ls-caps);
text-transform:uppercase; color:var(--muted); }
.f-label em { font-style:normal; color:var(--accent-text); }
.f-help { font-size:var(--fs-sm); color:var(--subtle-text); }
.f-err { font-family:var(--f-ui); font-size:var(--fs-sm); font-weight:600; color:var(--danger-text); }
/* The textarea's native grip is browser chrome and never ships. */
.grip { position:absolute; right:7px; bottom:7px; width:14px; height:14px; cursor:ns-resize;
touch-action:none; color:var(--subtle); display:grid; place-items:center; border-radius:4px;
transition:color var(--d-fast) var(--ease-hover), background var(--d-fast) var(--ease-hover); }
.grip:hover { color:var(--accent-text); background:var(--accent-tint); }
/* Number stepper, seated in a well. */
.stepper { display:inline-flex; align-items:stretch; overflow:hidden; border-radius:inherit; }
/* Sized for three digits and no more. The cap is 100, and anything above that
is a quantity nobody types by accident, so it goes through approval rather
than through a wider box. A field built for four digits invites a fourth. */
.stepper input { width:46px; text-align:center; font-family:var(--f-num); font-weight:var(--num-wt);
font-size:var(--fs-md); line-height:1.2; font-variant-numeric:tabular-nums; padding:11px 0; -moz-appearance:textfield;
background:transparent; outline:none; color:var(--text); }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.stepper:has(input:focus-visible) { outline:2px solid var(--accent-live); outline-offset:2px; }
.stepper input:focus-visible { outline:none; }
/* The keys inside a stepper are glyph keys, not buttons in the row's sense, so
they carry their own square press and never a ring on click. */
.stepper button:focus-visible { outline:none; }
.stepper button:focus-visible::after { content:""; position:absolute; inset:2px;
border-radius:calc(var(--r-xs) * .6); outline:2px solid var(--accent-live); }
.stepper button { position:relative; }
.stepper button { width:38px; color:var(--muted); display:grid; place-items:center;
transition:background var(--d-fast) var(--ease-hover), color var(--d-fast) var(--ease-hover); }
/* The accent means "this is live under your hand". A grey hover on a plus and
minus reads as disabled, which is the opposite of what a hover is for. */
.stepper button:hover { background:var(--accent-tint); color:var(--accent-text); }
.stepper button:active { box-shadow:var(--e-sunk); }
.stepper button svg { width:12px; height:12px; }
.stepper button:first-of-type { border-right:1px solid var(--line); }
.stepper button:last-of-type { border-left:1px solid var(--line); }
/* ── DROPDOWN ──
The trigger has NO chrome of its own; it sits inside a well like any other
input. The menu is glass over the page, opening from the top on the spring. */
.drop { position:relative; width:100%; }
.drop-trig { display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px;
padding:12px 15px; font-family:var(--f-body); font-size:var(--fs-md); line-height:1.2;
color:var(--text); background:none; }
.drop-trig svg { width:11px; height:7px; color:var(--subtle); flex-shrink:0;
transition:transform calc(240ms * var(--dur)) var(--ease-spring); }
.drop.open .drop-trig svg { transform:rotate(180deg); }
.drop-menu { position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:var(--z-drop); padding:6px;
border-radius:var(--r-xs); background:color-mix(in srgb, var(--surface-raise) 94%, transparent);
-webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%);
border:1px solid var(--glass-border); box-shadow:var(--e3), inset 0 1px 0 var(--glass-hi);
opacity:0; transform:translateY(-6px) scale(.985); pointer-events:none; transform-origin:top center;
transition:opacity calc(160ms * var(--dur)) ease, transform calc(240ms * var(--dur)) var(--ease-spring); }
/* ══ THE ANCESTOR GATE, AND WHY EVERY ONE OF THEM NOW HAS A TWIN ═══════════
ADDED 27-08-2026, from Darkroom, where it had left a picker invisible in
production on a page in daily use.
`.drop.open .drop-menu` is a DESCENDANT selector. It is correct and it is
also an assumption: that the menu is still inside the trigger's element when
it opens. An app that portals its menus to document.body breaks that
assumption, and the rule then matches nothing at all. The menu keeps
`opacity:0` and `pointer-events:none` for ever, which does not look like a
bug from the outside. It looks like a click that did nothing.
Darkroom portals every menu on purpose. A canvas with overflow:hidden, a
review strip with overflow-x:auto, a side panel with overflow-y:auto, a
transform on the dock that breaks position:fixed, and isolation on the panels
are five separate traps for a menu rendered in place. Chasing them one at a
time is what once put a resolution picker behind a surface nobody could see.
So each gate gets a twin that reads the class on the ELEMENT. Nothing changes
for an in-place menu, which keeps satisfying the ancestor form. A portalled
menu carries `open` itself and works. Both forms are live, deliberately.
Same shape as the `.scrim` gap closed earlier today: this system kept
describing a component and not shipping the part an app actually needs. Three
of the four below have never been portalled by anyone yet. They are fixed now
so the next app does not spend an afternoon finding out. */
.drop.open .drop-menu, .drop-menu.open { opacity:1; transform:none; pointer-events:auto; }
/* `:not(.optrow)` IS LOAD-BEARING AND IT WAS MISSING HERE.
`.menu > button` already carried this guard; `.drop-menu button` did not.
An element-plus-class selector outranks a bare class, so `.drop-menu button`
beat `.optrow` on specificity no matter what order they sat in, forced
`display:block` over `display:flex`, and took the gap and the right-aligned
price with it. Knox saw it as "there is no space between Full Day and 2,500,
and 2,500 is not showing towards the right side". Fixed 27-08-2026. */
.drop-menu button:not(.optrow) { display:block; width:100%; text-align:left; font-family:var(--f-body);
font-size:var(--fs-sm); color:var(--muted); padding:10px 12px; border-radius:calc(var(--r-xs) * .8);
transition:background calc(130ms * var(--dur)) ease, color calc(130ms * var(--dur)) ease; }
.drop-menu button:not(.optrow):hover { background:color-mix(in srgb, var(--seed-accent-hi) 22%, transparent); color:var(--text); }
.drop-menu button.on:not(.optrow) { color:var(--text); background:color-mix(in srgb, var(--seed-accent-hi) 16%, transparent); }
/* Combobox, same glass list. */
.combo { position:relative; width:270px; }
.combo-list { position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:var(--z-drop); padding:6px;
border-radius:var(--r-xs); background:color-mix(in srgb, var(--surface-raise) 94%, transparent);
-webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%);
border:1px solid var(--glass-border); box-shadow:var(--e3), inset 0 1px 0 var(--glass-hi);
max-height:180px; overflow-y:auto; display:none; }
/* Twin of the ancestor gate. See the note on .drop-menu. 27-08-2026. */
.combo.open .combo-list, .combo-list.open { display:block; }
.combo-list button { display:block; width:100%; text-align:left; font-family:var(--f-body);
font-size:var(--fs-sm); color:var(--muted); padding:10px 12px; border-radius:calc(var(--r-xs) * .8); }
.combo-list button:hover, .combo-list button.hi { background:color-mix(in srgb, var(--seed-accent-hi) 22%, transparent); color:var(--text); }
.combo-list mark { background:none; color:var(--accent-text); font-weight:600; }
.combo-list .none { font-size:var(--fs-sm); color:var(--subtle-text); padding:12px; }
/* ── SEGMENTED ──
The pill is a gradient, the slide is sprung, and the label padding is
asymmetric on purpose: letter-spacing adds its space after the LAST letter
too, so symmetric padding leaves the word half a space left of its own pill. */
.seg { position:relative; display:inline-flex; flex-shrink:0; padding:4px; border-radius:var(--r-pill);
background:var(--surface-deep); border:1px solid var(--line); box-shadow:var(--e-sunk); isolation:isolate; }
.seg-b { position:relative; z-index:1; font-family:var(--f-ctrl); font-size:var(--fs-caps); font-weight:600;
letter-spacing:.11em; text-transform:uppercase; line-height:1; color:var(--muted);
padding:11px calc(22px - .055em) 11px calc(22px + .055em); border-radius:var(--r-pill);
display:inline-flex; align-items:center; justify-content:center;
transition:color calc(240ms * var(--dur)) var(--ease-hover); }
.seg-b.on { color:var(--on-accent); }
.seg-b:not(.on):hover { color:var(--text); }
/* THE PILL SLIDES ON THE COMPOSITOR, NOT ON LAYOUT.
Knox, 22-08-2026: "when I switch from Films to Studio it's a very snappy
change. It's not smooth." Measured on a 400-row list: 7 dropped frames out of
24, worst frame 70ms.
`left` and `width` both force LAYOUT on every frame, on the main thread,
which at that exact moment is rebuilding the whole table for the company that
was just picked. The animation and the re-render fought over one thread and
the animation lost. `transform` is composited and keeps 60fps whatever the
main thread is doing.
Knox Artiste Accounts carried this correction alone from 22-08. It is in the
system as of 27-08 because a segmented control that stutters under load
stutters in Pulse and Grid too. `knox-v5.js` writes the transform. */
.seg-pill { position:absolute; z-index:0; top:4px; bottom:4px; left:0; border-radius:var(--r-pill);
background:linear-gradient(180deg in oklab, color-mix(in oklab, var(--seed-accent-hi) 88%, white) 0%, var(--seed-accent-hi) 100%);
box-shadow:var(--e2);
transition:transform calc(320ms * var(--dur)) var(--ease-spring),
width calc(320ms * var(--dur)) var(--ease-spring); }
/* `.seg.even` — EQUAL BUTTONS, so the pill never animates its width at all.
Width is the one property left in that transition that still forces layout,
and it only has to move because the buttons differ. It also stops the control
sliding when a button is hidden, which was previously solved by padding the
whole thing out with dead space to hold a position. */
.seg.even .seg-b { flex:1 1 0; min-width:0; }
[data-theme="light"] .seg-b.on { color:var(--on-accent); }
/* ── TOGGLE ── recessed track, domed thumb, groove kept when lit */
.tgl { width:46px; height:26px; border-radius:var(--r-pill); background:var(--surface-deep); position:relative;
border:1px solid var(--line); box-shadow:var(--e-sunk); flex-shrink:0; cursor:pointer;
transition:background var(--d-base) var(--ease-hover), border-color var(--d-base) var(--ease-hover); }
.tgl.on { background:var(--accent-lit); border-color:color-mix(in srgb, var(--seed-accent-hi) 60%, transparent);
box-shadow:var(--e-sunk); }
.tgl::after { content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
background:radial-gradient(120% 100% at 50% -10%, var(--ctrl-hi) 0%, var(--ctrl) 100%);
box-shadow:0 2px 5px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.14) inset;
transition:transform var(--d-base) var(--ease-spring), background var(--d-base) var(--ease-hover); }
[data-theme="light"] .tgl::after { background:radial-gradient(120% 100% at 50% -10%, #fff 0%, var(--surface-raise) 100%);
box-shadow:0 2px 6px rgba(15,32,39,.28), 0 1px 0 rgba(255,255,255,1) inset; }
.tgl.on::after { transform:translateX(20px); }
/* ── THE SWITCH'S LOOK DERIVES FROM ITS ARIA STATE · 30-08-2026 ──────────────
Knox, on Darkroom: "when I am clicking on the dark mode / light mode toggle,
it is going into light mode, but the toggle is not working."
The theme was changing. The knob was not moving, because the ONLY thing that
moves it is `.tgl.on`, and the markup a real app renders carries the state on
the WRAPPER as `aria-checked`, which is where a switch's state belongs and is
what a screen reader reads. The component shipped with two sources of truth
for one state and no link between them: an app that sets the accessible state
correctly gets a switch that never moves, and an app that sets the class gets
a switch that lies to a screen reader.
Measured before the fix, both engines: `aria-checked="true"` moved the knob
by nothing at all, `.tgl.on` moved it 20px.
Same shape as `.sdrawer` yesterday - a visual state whose only path in was one
nobody would take. The accessible state is already correct in every app that
bothered, so the visual derives FROM it. `.tgl.on` stays for anything already
using it: both live, deliberately, like the portalled-menu twins. */
[role="switch"][aria-checked="true"] .tgl { background:var(--accent-lit);
border-color:color-mix(in srgb, var(--seed-accent-hi) 60%, transparent); }
[role="switch"][aria-checked="true"] .tgl::after { transform:translateX(20px); }
/* ── CHECK AND RADIO ── carved when off, POPS OUT of the well when on */
.ck, .rd { width:20px; height:20px; flex-shrink:0; display:grid; place-items:center; cursor:pointer;
background:var(--surface-deep); border:1px solid var(--line); box-shadow:var(--e-sunk); color:transparent;
transition:background calc(200ms * var(--dur)) var(--ease-hover), border-color calc(200ms * var(--dur)) var(--ease-hover), box-shadow calc(200ms * var(--dur)) var(--ease-hover); }
.ck { border-radius:calc(var(--r-xs) * .85); } .rd { border-radius:50%; }
.ck.on { background:var(--accent-lit); border-color:rgba(0,0,0,.18); box-shadow:var(--e2); color:var(--on-accent); }
.ck svg { width:11px; height:11px; opacity:0; transform:scale(.4);
transition:opacity calc(160ms * var(--dur)) ease, transform calc(240ms * var(--dur)) var(--ease-spring); }
.ck.on svg { opacity:1; transform:scale(1); }
.rd::after { content:""; width:9px; height:9px; border-radius:50%; background:var(--accent-lit);
opacity:0; transform:scale(.4); transition:opacity calc(160ms * var(--dur)) ease, transform calc(240ms * var(--dur)) var(--ease-spring); }
.rd.on { border-color:color-mix(in srgb, var(--seed-accent-hi) 60%, transparent); }
.rd.on::after { opacity:1; transform:scale(1); }
.ckrow { display:flex; align-items:center; gap:11px; padding:7px 0; cursor:pointer;
font-size:var(--fs-md); color:var(--muted); transition:color calc(130ms * var(--dur)) var(--ease-hover); }
.ckrow:hover { color:var(--text); }
.check.done .lbl { text-decoration:line-through; text-decoration-color:var(--accent-text);
text-decoration-thickness:1.5px; color:var(--subtle); }
/* ── SLIDER ── carved track, SOLID LIT FILL, domed thumb */
.sld { position:relative; height:28px; display:flex; align-items:center; }
.sld .track { position:absolute; left:0; right:0; height:8px; border-radius:99px;
background:var(--surface-deep); border:1px solid var(--line); box-shadow:var(--e-sunk); }
.sld .fill { position:absolute; left:1px; height:8px; border-radius:99px; background:var(--accent-lit); }
.sld input { position:relative; z-index:2; width:100%; -webkit-appearance:none; appearance:none;
background:transparent; height:28px; cursor:pointer; }
.sld input::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
background:radial-gradient(120% 100% at 50% -10%, var(--ctrl-hi) 0%, var(--ctrl) 100%); border:none;
box-shadow:0 2px 5px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.14) inset; }
.sld input::-moz-range-thumb { width:20px; height:20px; border:none; border-radius:50%;
background:var(--ctrl-hi); box-shadow:0 2px 5px rgba(0,0,0,.45); }
.sld input::-moz-range-track { background:transparent; }
[data-theme="light"] .sld input::-webkit-slider-thumb {
background:radial-gradient(120% 100% at 50% -10%, #fff 0%, var(--surface-raise) 100%);
box-shadow:0 2px 6px rgba(15,32,39,.28), 0 1px 0 rgba(255,255,255,1) inset; }
/* ── CHIP AND TAG ── */
.chip { display:inline-flex; align-items:center; gap:8px; font-family:var(--f-ctrl); font-size:var(--fs-caps);
font-weight:600; letter-spacing:.07em; text-transform:uppercase; line-height:1;
color:var(--muted); background:var(--ctrl); border:1px solid var(--line-strong);
border-radius:var(--r-pill); padding:8px 15px; cursor:pointer;
box-shadow:0 1px 3px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04);
transition:background var(--d-fast) var(--ease-hover), color var(--d-fast) var(--ease-hover),
transform calc(90ms * var(--dur)) var(--ease-press), box-shadow calc(90ms * var(--dur)) ease; }
[data-theme="light"] .chip { box-shadow:0 1px 3px rgba(15,32,39,.08), inset 0 1px 0 rgba(255,255,255,.85); }
.chip:hover { background:var(--ctrl-hi); color:var(--text); }
.chip:active { transform:scale(.97); box-shadow:var(--e-sunk); transition-duration:calc(70ms * var(--dur)); }
.chip.on { background:var(--accent-lit); color:var(--on-accent); border-color:rgba(0,0,0,.2); }
[data-theme="light"] .chip.on { color:var(--on-accent); }
.taginput { display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:9px 12px; }
.taginput input { flex:1; min-width:90px; background:none; border:none; outline:none;
font-family:var(--f-body); font-size:var(--fs-sm); color:var(--text); }
/* Built like a key rather than a tint. A dark tint carrying pale accent text is
two weak reds arguing; the fill plus the paper label is one clear object. */
.tag { display:inline-flex; align-items:center; gap:6px; font-family:var(--f-ctrl); font-size:var(--fs-caps);
font-weight:600; letter-spacing:.07em; text-transform:uppercase; line-height:1;
color:var(--on-accent);
background:linear-gradient(115deg in oklab, color-mix(in oklab, var(--seed-accent-hi) 88%, white) 0%,
var(--seed-accent-hi) 60%, color-mix(in oklab, var(--seed-accent-lo) 55%, var(--seed-accent-hi)) 100%);
border:1px solid color-mix(in oklab, var(--seed-accent-lo) 70%, black);
box-shadow:0 1px 3px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.16);
border-radius:var(--r-pill); padding:5px 8px 5px 12px; }
.tag button { color:color-mix(in srgb, var(--on-accent) 70%, transparent); width:16px; height:16px; display:grid; place-items:center; border-radius:50%;
transition:color calc(130ms * var(--dur)) ease, background calc(130ms * var(--dur)) ease; }
.tag button:hover { color:var(--on-accent); background:rgba(0,0,0,.24); }
.tag button svg { width:8px; height:8px; }
/* The keycap. The thicker bottom edge is what makes it read as a key. */
.kbd { display:inline-flex; align-items:center; font-family:var(--f-ctrl); font-size:var(--fs-caps);
font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--subtle); background:var(--surface-deep);
border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:6px; padding:3px 7px; line-height:1; }
/* Inside a search well it is plain text, never a boxed key. */
.tsearch .kbd { background:none; border:none; padding:0; }
/* Status. Typography only: a standalone dot and a caps label. No container. */
.status { display:inline-flex; align-items:center; gap:7px; font-family:var(--f-ui); font-size:var(--fs-caps);
font-weight:600; letter-spacing:var(--ls-caps); text-transform:uppercase; white-space:nowrap; }
.status i { width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.status.done { color:var(--subtle-text); }
.status.live { color:var(--text); }
.status.wait { color:var(--muted); } .status.wait i { background:none; box-shadow:inset 0 0 0 1.5px currentColor; }
.status.attn { color:var(--danger-text); }
/* A PASS. ADDED 30-08-2026. The palette has carried `--success-text` since the
status ramp was written and `.status` had no way to say it: `.done` is
`--subtle-text`, which is the colour of a thing that is FINISHED, not a thing
that is GOOD. So a check that passed and a check that merely ran looked
identical, and Knox asked for the obvious thing - "it should be in a proper
red or green text". Red was already there. This is green. */
.status.ok { color:var(--success-text); }
/* Level bars */
.levels { display:inline-flex; gap:3px; align-items:flex-end; }
.levels i { width:13px; height:38px; border-radius:3px; background:var(--surface-deep);
border:1px solid var(--line); box-shadow:var(--e-sunk); }
.levels i.lit { background:var(--accent-lit); border-color:transparent; box-shadow:none; }
/* The pillow: a big extruded squircle key for primary tile actions. */
.pillow { width:86px; height:86px; border-radius:calc(var(--r) * 1.3); display:grid; place-items:center;
color:var(--text); cursor:pointer; position:relative; isolation:isolate;
background:linear-gradient(150deg in oklab, var(--ctrl-hi) 0%, var(--ctrl) 55%, var(--surface) 100%);
box-shadow:var(--extrude);
transition:transform calc(320ms * var(--dur)) var(--ease-hover), box-shadow calc(320ms * var(--dur)) var(--ease-hover); }
.pillow::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
background:var(--edge-ring); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite:exclude; }
.pillow:hover { transform:translateY(-2px); }
.pillow:active { transform:scale(.98); box-shadow:var(--e-sunk); transition-duration:calc(70ms * var(--dur)); }
.pillow svg { width:26px; height:26px; }
/* ═══ WAYFINDING ═══════════════════════════════════════════════════════════
Four surfaces, each with variants driven off a data-attribute on .
Everything still rides the seeds: change the accent and all of it re-dresses. */
.wayfind { display:grid; grid-template-columns:var(--rail-w) 1fr;
border-radius:var(--r-lg); overflow:hidden; background:var(--grad-ground); box-shadow:var(--e3);
transition:grid-template-columns var(--d-slow) var(--ease-entrance); }
.wayfind .grain { position:absolute; inset:0; pointer-events:none; z-index:0;
background-image:var(--noise); background-size:120px; opacity:calc(.04 * var(--noise-o)); mix-blend-mode:overlay; }
[data-theme="light"] .wayfind .grain { opacity:.025; mix-blend-mode:multiply; }
/* ── RAIL ── */
.rail { position:relative; z-index:1; padding:var(--sp-4) var(--sp-2);
display:flex; flex-direction:column; gap:var(--sp-1);
background:rgba(0,0,0,.16); border-right:1px solid var(--line);
transition:background var(--d-base) var(--ease-hover), margin var(--d-slow) var(--ease-entrance),
border-radius var(--d-slow) var(--ease-entrance), box-shadow var(--d-slow) var(--ease-entrance); }
.rail-logo { font-family:var(--f-hero); font-size:var(--fs-sm); text-transform:uppercase;
letter-spacing:var(--ls-head); color:var(--text); padding:6px var(--sp-3) var(--sp-4); white-space:nowrap; overflow:hidden; }
/* The lit accent, not the text tint. --accent-text is 45% white, which at
display size is a pale pink; that is what made "Vision" look wrong. */
.rail-logo span { color:var(--accent-lit); }
.rail-group { font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600; letter-spacing:.14em;
text-transform:uppercase; color:var(--subtle-text); padding:var(--sp-4) var(--sp-3) var(--sp-2); white-space:nowrap; }
.rail a { position:relative; z-index:1; display:flex; align-items:center; gap:var(--sp-3);
font-family:var(--f-body); font-size:var(--fs-sm); color:var(--muted); padding:10px var(--sp-3);
border-radius:var(--r-xs); text-decoration:none; white-space:nowrap; overflow:hidden;
transition:background var(--d-fast) var(--ease-hover), color var(--d-fast) var(--ease-hover); }
.rail a:hover { background:var(--hover); color:var(--text); }
.rail a.on { color:var(--on-accent); }
[data-theme="light"] .rail a.on { color:var(--on-accent); }
.rail a.on:hover { background:transparent; }
.rail a svg { width:15px; height:15px; flex-shrink:0; }
.rail a .lbl { transition:opacity var(--d-base) var(--ease-hover); }
.rail a .ct { margin-left:auto; font-family:var(--f-num); font-weight:var(--num-wt); font-size:var(--fs-sm);
color:var(--subtle-text); font-variant-numeric:tabular-nums; }
.rail a.on .ct { color:color-mix(in srgb, var(--on-accent) 85%, transparent); }
.rail-pill { position:absolute; left:var(--sp-2); right:var(--sp-2); top:0; height:0; opacity:0; z-index:0;
border-radius:var(--r-xs); background:var(--accent-lit); box-shadow:var(--e2);
transition:top var(--d-slow) var(--ease-entrance), height var(--d-slow) var(--ease-entrance),
opacity var(--d-fast) ease, left var(--d-slow) var(--ease-entrance), right var(--d-slow) var(--ease-entrance); }
/* Variant A · CARVED (V4's current) */
[data-rail="carved"] .rail { background:rgba(0,0,0,.16); border-right:1px solid var(--line); }
[data-theme="light"] [data-rail="carved"] .rail { background:rgba(15,32,39,.045); }
/* Variant B · FLOATING. The rail detaches and becomes an object on the ground. */
[data-rail="floating"] .wayfind { grid-template-columns:var(--rail-w) 1fr; }
[data-rail="floating"] .rail { margin:var(--sp-3) 0 var(--sp-3) var(--sp-3); border-radius:var(--r);
background:var(--glass-bg); -webkit-backdrop-filter:blur(22px) saturate(150%);
backdrop-filter:blur(22px) saturate(150%); border:1px solid var(--glass-border);
box-shadow:var(--e3), inset 0 1px 0 var(--glass-hi); }
/* Variant C · ICONS. Collapses to 62px; labels fade, pill goes square. */
[data-rail="icons"] .wayfind { grid-template-columns:var(--rail-w-icons) 1fr; }
[data-rail="icons"] .rail { background:rgba(0,0,0,.16); border-right:1px solid var(--line); align-items:center; }
[data-theme="light"] [data-rail="icons"] .rail { background:rgba(15,32,39,.045); }
[data-rail="icons"] .rail a { justify-content:center; padding:var(--sp-3) 0; width:42px; }
[data-rail="icons"] .rail a .lbl, [data-rail="icons"] .rail a .ct, [data-rail="icons"] .rail-group { opacity:0;
width:0; overflow:hidden; padding:0; height:0; }
[data-rail="icons"] .rail-group { margin:var(--sp-2) 0; height:1px; width:26px; background:var(--line-strong); }
/* KNOX in an expanded face does not fit 62px. The collapsed rail shows the K. */
[data-rail="icons"] .rail-logo { padding:var(--sp-2) 0 var(--sp-4);
text-align:center; width:100%; font-size:0; }
[data-rail="icons"] .rail-logo .full { display:none; }
[data-rail="icons"] .rail-logo::before { content:"K"; font-size:var(--fs-xl); color:var(--accent-text); }
[data-rail="icons"] .rail-pill { left:10px; right:10px; }
/* Variant D · GROUPED. Sections become carved wells with their own headers. */
[data-rail="grouped"] .rail { background:rgba(0,0,0,.16); border-right:1px solid var(--line); gap:var(--sp-1); }
[data-theme="light"] [data-rail="grouped"] .rail { background:rgba(15,32,39,.045); }
[data-rail="grouped"] .rail-group { color:var(--accent-text); border-top:1px solid var(--line);
margin-top:var(--sp-2); padding-top:var(--sp-3); }
[data-rail="grouped"] .rail-group:first-of-type { border-top:none; margin-top:0; }
[data-rail="grouped"] .rail a { font-size:var(--fs-sm); padding:7px var(--sp-3); }
/* ── TOP BAR ── */
.topb { position:relative; z-index:var(--z-chrome); display:flex; align-items:center; gap:var(--sp-3);
margin:var(--sp-3) var(--sp-4) 0; padding:var(--sp-2) var(--sp-4); border-radius:var(--r-pill);
background:var(--glass-bg); -webkit-backdrop-filter:blur(22px) saturate(150%);
backdrop-filter:blur(22px) saturate(150%); border:1px solid var(--glass-border);
box-shadow:var(--e2), inset 0 1px 0 var(--glass-hi);
transition:margin var(--d-slow) var(--ease-entrance), border-radius var(--d-slow) var(--ease-entrance),
background var(--d-base) var(--ease-hover), box-shadow var(--d-base) var(--ease-hover); }
/* The breadcrumb was 11px uppercase with .1em tracking applied to a PROJECT
NAME. Caps mangle a proper noun and tracked caps at 11px are unreadable at a
glance, which is what Knox saw in "BEAUTYWORLD HALL FILM". The trail stays a
caps label because it is a category. The current page is a name, so it is set
in sentence case at the small step and carries the weight instead. */
/* One voice for the whole trail (Knox, 23-08). The crumb takes ALL the slack,
so a project called "ABC" and one called "Beautyworld hall film" leave the
search well and the avatar in exactly the same place. */
.crumb { display:flex; align-items:center; gap:var(--sp-2); white-space:nowrap;
overflow:hidden; min-width:0; flex:1 1 0;
font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600;
letter-spacing:var(--ls-caps); text-transform:uppercase; }
.crumb .trail { color:var(--subtle-text); flex-shrink:0; }
.crumb b { font:inherit; letter-spacing:inherit; color:var(--text);
overflow:hidden; text-overflow:ellipsis; min-width:0; }
.crumb i { font-style:normal; color:var(--subtle); opacity:.55; flex-shrink:0; }
.topb .sp { display:none; }
.tsearch { display:flex; align-items:center; gap:var(--sp-2); background:var(--surface-deep);
border-radius:var(--r-pill); box-shadow:var(--e-sunk); padding:0 var(--sp-3);
flex:0 0 210px; width:210px; min-width:0; }
.tsearch input { font-size:var(--fs-sm); font-family:var(--f-body); color:var(--text); padding:var(--sp-2) 0; min-width:0; width:100%; }
.tsearch input::placeholder { color:var(--disabled); }
.tsearch svg { width:13px; height:13px; color:var(--subtle); flex-shrink:0; }
.tsearch .kbd { font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:500; letter-spacing:.04em;
color:var(--subtle-text); white-space:nowrap; }
.ava { width:30px; height:30px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
font-family:var(--f-ui); font-size:calc(var(--fs-caps) * .95); font-weight:600;
/* TRACKING AND INDENT REMOVED 30-08-2026. Measured: every monogram sat 0.3px
right of centre, and "MW" was 23.8px of text in a 24px box with a right gap
of MINUS 0.1px, so it touched both walls.
The cause was a pair, not one bug. Tracking puts its space AFTER the last
letter too, so centred text drifts left by the full letter-space; the
text-indent was added to compensate and shifted it right by the whole
amount rather than half, swinging it the other way. A two-letter monogram
in a 24px circle does not need tracking, so both go, and the centring is
then exact with no compensation to keep in sync. */ color:var(--on-accent); cursor:pointer;
background:linear-gradient(150deg in oklab, color-mix(in oklab, var(--seed-accent-hi) 88%, white) 0%,
var(--seed-accent-hi) 60%, color-mix(in oklab, var(--seed-accent-hi) 82%, black) 100%); box-shadow:var(--e2); }
/* Variant A · PILL (V4's current). Floating glass, detached from every edge. */
[data-topbar="pill"] .topb { margin:var(--sp-3) var(--sp-4) 0; padding:var(--sp-2) var(--sp-4);
border-radius:var(--r-pill); background:var(--glass-bg);
-webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%);
border:1px solid var(--glass-border); box-shadow:var(--e2), inset 0 1px 0 var(--glass-hi); }
/* Variant B · FULL. Edge to edge glass, hairline under it, crumb gets room. */
[data-topbar="full"] .topb { margin:0; padding:var(--sp-3) var(--sp-5); border-radius:0;
background:var(--glass-bg); -webkit-backdrop-filter:blur(22px) saturate(150%);
backdrop-filter:blur(22px) saturate(150%); border-bottom:1px solid var(--line); box-shadow:none; }
[data-topbar="full"] .tsearch { flex:0 0 240px; width:240px; }
/* Variant C · SPLIT. Crumb sits on the ground, the command cluster floats alone. */
[data-topbar="split"] .topb { margin:var(--sp-4) var(--sp-4) 0; padding:0; background:none;
border:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
[data-topbar="split"] .topb .cluster { display:flex; align-items:center; gap:var(--sp-2);
padding:var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3); border-radius:var(--r-pill);
background:var(--glass-bg); -webkit-backdrop-filter:blur(22px) saturate(150%);
backdrop-filter:blur(22px) saturate(150%); border:1px solid var(--glass-border);
box-shadow:var(--e2), inset 0 1px 0 var(--glass-hi); min-width:0; }
[data-topbar="pill"] .topb .cluster, [data-topbar="full"] .topb .cluster {
display:flex; align-items:center; gap:var(--sp-3); flex:0 0 auto; }
/* ── TABS ── */
/* THE CANVAS. Padding and cap both come from LAYER 0c, so an app changes its
reading width by setting one token rather than by editing this rule. The cap
is a max-width on the CONTENT, not on the canvas: the ground still runs to
the edge, which is what stops a wide monitor showing a letterboxed app. */
.canvas { position:relative; z-index:1;
padding:var(--canvas-pad-t) var(--canvas-pad-x) var(--canvas-pad-b); }
.canvas > .screen { max-width:var(--canvas-max); margin-inline:auto; width:100%; }
/* THE SHELL BREAKPOINT. One number, 860px, and it is the same number in every
app. Below it the rail lies down and the gutters drop a step together, so the
header and the rail can never disagree about where the shell starts, which is
a bug Darkroom shipped for a fortnight. */
@media (max-width:860px){
:root { --canvas-pad-x: var(--sp-3); --canvas-pad-t: var(--sp-3); }}
@media (max-width:600px){
:root { --canvas-pad-x: var(--sp-2); }
.canvas { padding-bottom: var(--dock-clear); }}
/* ── THE SCREEN ────────────────────────────────────────────────────────────
ADDED 27-08-2026, for the same reason as the overlay scale: this system
described what a component looks like and never once described what a SCREEN
looks like. So each app invented a header, invented a rhythm, and the two
drifted. Knox, on Accounts: "the design flow of things is not correct...
the gaps and spaces are all out of place."
A screen is a head, then bands. Nothing else. The rhythm lives HERE so that
no screen has to decide it, which is the whole point: a screen that decides
its own spacing is a screen that disagrees with the next one. */
.screen { display:flex; flex-direction:column; gap:var(--sp-5); min-width:0; }
/* The head is the title, what it is, and what you can do to it. One line on a
desktop, wrapping to two on a phone, and the actions stay together. */
.screen-head { display:flex; align-items:flex-end; justify-content:space-between;
gap:var(--sp-4); flex-wrap:wrap; }
.screen-head .st { display:flex; flex-direction:column; gap:var(--sp-1); min-width:0; }
/* A screen title is a screen title whichever tag carries it. As an h2 it
was picking up the gallery's section-heading styling and losing the head
face entirely, so two screens in a set could disagree about their own
titles depending on how the markup was nested. */
/* BOTH TAGS, which is what the note above actually says and the first pass did
not do. Scoping the treatment to h2 alone left h1 falling through to the hero
size, so a screen whose title happened to be an h1 rendered at 64px against
26px on the screen beside it. Found by putting the system on a real app on
27-08-2026: Knox Artiste Accounts writes every screen title as an h1. */
.screen-head h1, .screen-head h2 { margin:0; font-family:var(--f-head);
font-size:var(--fs-xl); font-weight:400; text-transform:uppercase;
letter-spacing:var(--ls-head); line-height:var(--lh-head); }
.screen-head .sub { font-size:var(--fs-sm); color:var(--muted); max-width:60ch; }
.screen-head .sa { display:flex; align-items:center; gap:var(--sp-2); flex-shrink:0; }
/* A BAND IS ONE CONCERN. Knox asked for "section boxes, like a dashboard view,
or a section divider somewhere" and this is that: a band carries its own
label and its own ground, so two concerns can never read as one list that
happens to have a gap in it. `.band.plain` drops the ground for a band that
is already a card or a table and should not be double-boxed. */
.band { display:flex; flex-direction:column; gap:var(--sp-3); min-width:0;
padding:var(--sp-4); border-radius:var(--r); background:var(--grad-ground);
box-shadow:var(--e1); }
.band.plain { padding:0; background:none; box-shadow:none; }
.band > .c-lab { margin:0; }
/* The rule between two concerns inside ONE band, where a second ground would
be too much. Never used between bands: that is what the gap is for. */
.band-rule { height:1px; background:var(--line); border:none; margin:var(--sp-2) 0; }
/* A strip wider than its container had no way to reach the tabs past the
edge. It scrolls, without a visible bar, which would sit under the
underline indicator. */
.vtabs { position:relative; display:flex; gap:2px;
overflow-x:auto; scrollbar-width:none;
transition:background var(--d-base) var(--ease-hover), padding var(--d-base) var(--ease-hover),
border-radius var(--d-base) var(--ease-hover), box-shadow var(--d-base) var(--ease-hover); }
.vtabs::-webkit-scrollbar { display:none; }
.vtabs button { position:relative; z-index:1; font-family:var(--f-ctrl); font-size:var(--fs-sm); font-weight:500;
color:var(--subtle-text); padding:var(--sp-3) var(--sp-4); line-height:1;
transition:color var(--d-base) var(--ease-hover); }
.vtabs button:hover { color:var(--muted); }
.vtabs button.on { color:var(--text); }
.vtabs .ind { position:absolute; z-index:0; bottom:-1px; height:2px; border-radius:2px; background:var(--accent-lit);
transition:left var(--d-base) var(--ease-spring), width var(--d-base) var(--ease-spring),
top var(--d-base) var(--ease-spring), height var(--d-base) var(--ease-spring); }
/* Variant A · UNDERLINE (V4's current) */
[data-tabs="underline"] .vtabs { border-bottom:1px solid var(--line); }
[data-tabs="underline"] .vtabs .ind { bottom:-1px; top:auto; height:2px; border-radius:2px; background:var(--accent-lit); }
/* Variant B · PILL. Indicator becomes a filled pill behind the label. */
[data-tabs="pill"] .vtabs { gap:var(--sp-1); }
[data-tabs="pill"] .vtabs button { padding:var(--sp-2) var(--sp-4); border-radius:var(--r-pill); }
[data-tabs="pill"] .vtabs button.on { color:var(--on-accent); }
[data-theme="light"] [data-tabs="pill"] .vtabs button.on { color:var(--on-accent); }
[data-tabs="pill"] .vtabs .ind { top:0; bottom:0; height:auto; border-radius:var(--r-pill);
background:var(--accent-lit); box-shadow:var(--e2); }
/* Variant C · CARVED. The whole strip is a well; the indicator is the raised key. */
[data-tabs="carved"] .vtabs { background:var(--surface-deep); border-radius:var(--r-pill);
padding:3px; box-shadow:var(--e-sunk); align-self:flex-start; }
[data-tabs="carved"] .vtabs button { padding:var(--sp-2) var(--sp-4); border-radius:var(--r-pill); }
[data-tabs="carved"] .vtabs button.on { color:var(--text); }
[data-tabs="carved"] .vtabs .ind { top:3px; bottom:3px; height:auto; border-radius:var(--r-pill);
background:var(--ctrl-hi); box-shadow:var(--extrude); }
/* minmax(0,1fr) IS LOAD-BEARING. Every pane sits in the same grid cell, so the
WIDEST pane sizes the cell, including the ones that are not showing. A plain
1fr track refuses to shrink below its content, so one hidden pane holding a
horizontal scroller silently widens the whole page. Found in Darkroom on
23-08-2026: a review strip on an inactive tab pushed the document to 1907px
inside a 1512px window. */
.panes { display:grid; grid-template-columns:minmax(0,1fr); margin-top:var(--sp-4); }
.pane { min-width:0; }
.pane { grid-area:1/1; opacity:0; transform:translateY(6px); pointer-events:none;
transition:opacity var(--d-base) var(--ease-hover), transform var(--d-base) var(--ease-hover); }
.pane.on { opacity:1; transform:none; pointer-events:auto; }
/* ── DOCK ── */
/* THE DOCK FLOATS OVER CONTENT, AND CONTENT IS NOT ALWAYS A DOCUMENT.
Amended 27-08-2026, from Darkroom. --glass-bg is tuned for glass over a page:
a surface, a table, a form, all of them low contrast and close to --bg. It
was measured over a full-bleed wall of photographs and the inactive glyphs
disappeared into skin tones, which is a legible ground problem and not an
icon problem.
Knox raised it on 27-08 as "you can't really see it" and Darkroom patched its
own copy with a raised ground, a stronger border and a heavier shadow. That
patch is deleted and this is where it belongs, because Pulse floats the same
dock over thumbnails and Grid floats it over video posters, and both would
have found this the same way.
The change is the GROUND, not the glyph. --muted stays --muted, so the
inactive tier still recedes exactly as much as it does everywhere else in the
system; it now recedes against a surface instead of against a photograph.
Raising the glyph instead would have made the dock louder than the rail on
every ordinary page, to fix a case only two apps have. */
/* THE DOCK FLOATS, SO SOMETHING UNDERNEATH IT OWES CLEARANCE.
Added 27-08-2026. A floating dock covers the bottom of whatever scrolls behind
it, and the last row of content sits under it and cannot be clicked. That does
not read as "something is covering this". It reads as the list having lost a
row, which is why it survives review.
Every app that floats this dock owes the same clearance, and Darkroom had it
as a hardcoded 76px in one place and 84px in another, both derived by hand
from a dock that was 46px tall at the time. It is 66px now, so both numbers
went silently wrong the moment the dock was fixed. A hand-derived number is a
number that goes stale without telling anyone.
--dock-h derives from the parts: item height, the dock's own padding on both
sides, and its border. --dock-clear is what a scroller reserves: the dock,
its offset from the bottom edge, and a real gap so content stops above it
rather than behind its shadow. Add env(safe-area-inset-bottom) at the point
of use, because only the app knows whether its scroller reaches the edge.
The two tokens themselves live with the rest of the scale up in LAYER 0b. */
.dock { position:relative; display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2);
border-radius:var(--r-pill);
background:color-mix(in srgb, var(--surface-raise) 88%, transparent);
-webkit-backdrop-filter:blur(24px) saturate(150%); backdrop-filter:blur(24px) saturate(150%);
border:1px solid var(--line-strong); box-shadow:var(--e4), inset 0 1px 0 var(--glass-hi);
transition:border-radius var(--d-slow) var(--ease-entrance), width var(--d-slow) var(--ease-entrance); }
.dock > span { position:relative; z-index:1; height:44px; border-radius:var(--r-pill);
display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); color:var(--muted);
cursor:pointer; padding:0; width:44px; overflow:hidden;
transition:background var(--d-base) var(--ease-hover), color var(--d-base) var(--ease-hover),
width var(--d-slow) var(--ease-entrance), padding var(--d-slow) var(--ease-entrance); }
.dock > span:hover { color:var(--text); background:rgba(255,255,255,.05); }
[data-theme="light"] .dock > span:hover { background:rgba(15,32,39,.05); }
.dock > span.on { color:var(--on-accent); }
[data-theme="light"] .dock > span.on { color:var(--on-accent); }
.dock > span.on:hover { background:transparent; }
.dock > span svg { width:18px; height:18px; flex-shrink:0; }
.dock > span .dlbl { font-family:var(--f-ui); font-size:var(--fs-sm); font-weight:600; letter-spacing:.06em;
text-transform:uppercase; white-space:nowrap; display:none; }
.dock .dsep { width:1px; height:24px; background:var(--line-strong); cursor:default; }
.dock .dsep:hover { background:var(--line-strong); }
.dock > span.dock-pill { position:absolute; top:var(--sp-2); height:44px; width:44px; padding:0;
border-radius:var(--r-pill); background:var(--accent-lit); box-shadow:var(--e2); opacity:0; z-index:0;
overflow:visible; cursor:default;
transition:left var(--d-slow) var(--ease-entrance), width var(--d-slow) var(--ease-entrance), opacity var(--d-fast) ease; }
.dock > span.dock-pill:hover { background:var(--accent-lit); }
/* Variant B · LABELS. Icons keep company; the pill grows to fit. */
[data-dock="labels"] .dock > span { width:auto; padding:0 var(--sp-4); }
[data-dock="labels"] .dock > span .dlbl { display:inline; }
/* The separator is not an item and must not take the item padding. */
[data-dock="labels"] .dock .dsep { width:1px; padding:0; }
/* A labelled dock is 496px wide. Below 560 the labels drop and it becomes the
icon dock, which is what a real dock does rather than overflowing the page. */
@media (max-width:560px){
[data-dock="labels"] .dock > span { width:44px; padding:0; }
[data-dock="labels"] .dock > span .dlbl { display:none; }}
.dock { max-width:100%; }
/* Variant C · BAR. Bottom tab bar for the Crew PWA. Square corners, full width. */
[data-dock="bar"] .dock { border-radius:var(--r) var(--r) 0 0; width:100%; justify-content:space-around;
padding:var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom, 0px)); }
[data-dock="bar"] .dock > span { flex-direction:column; gap:3px; height:auto; width:auto;
padding:var(--sp-2) var(--sp-3); border-radius:var(--r-xs); }
[data-dock="bar"] .dock > span .dlbl { display:inline; font-size:var(--fs-caps); }
[data-dock="bar"] .dock .dsep { display:none; }
[data-dock="bar"] .dock > span.dock-pill { display:none; }
[data-dock="bar"] .dock > span.on { color:var(--accent-text); background:var(--accent-tint); }
/* Was 760px. Moved to the shell breakpoint 28-08-2026 so the rail, the gutters
and the dock all change on the same line. Three of the four apps had the rail
and the canvas changing at different widths. */
/* FIXED 29-08-2026: this was scoped to .wayfind alone. An app whose shell is
.proof kept its rail track while .rail below went display:none, so the main
column landed IN the rail track and the whole shell rendered 218px wide on
every phone. Same breakpoint, same declaration, reaching both shells the
system ships. minmax(0,1fr) because a bare 1fr floors at min-content and lets
a wide table push a horizontal page scroll onto a 375px screen. */
@media (max-width:860px){ :is(.wayfind, .proof) { grid-template-columns:minmax(0,1fr) !important; } .rail { display:none; }}
/* The demo canvas is a small viewport of its own, so its contents answer to its
width, not the page's. Without this the KPI row and the top bar clip. */
@supports (container-type: inline-size) {
.wayfind > div:last-child { container-type:inline-size; }
@container (max-width: 560px) { .canvas .kpi { grid-template-columns:1fr 1fr; } .topb .tsearch { flex-basis:130px; }}
@container (max-width: 400px) { .canvas .kpi { grid-template-columns:1fr; } .topb .tsearch { display:none; }}}
/* ═══ CARRIED FROM V4 ══════════════════════════════════════════════════════ */
.t6-wrap { position:relative; isolation:isolate; border-radius:var(--r); overflow:hidden;
background:var(--grad-ground); box-shadow:var(--e2); }
.t6 { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.t6 th { font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600; letter-spacing:var(--ls-caps);
text-transform:uppercase; color:var(--subtle-text); text-align:left; padding:var(--sp-3) var(--sp-4);
border-bottom:1px solid var(--line-strong); position:sticky; top:0; z-index:var(--z-sticky);
background:var(--surface); }
.t6 th.num, .t6 td.num { text-align:right; }
.t6 td { padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line); color:var(--muted); font-family:var(--f-body); }
.t6 tbody tr:last-child td { border-bottom:none; }
.t6 tbody tr { transition:background var(--d-fast) var(--ease-hover); }
.t6 tbody tr:hover { background:var(--hover); }
.t6 td.num { font-family:var(--f-num-col); font-weight:var(--num-wt-col); color:var(--text); font-variant-numeric:tabular-nums lining-nums; }
.t6 td.t-name { color:var(--text); font-weight:500; }
/* .who is ALSO a full-width flex menu trigger, and a
matches it: display:flex, width:100%, 7px 12px, a radius and a pointer
cursor, all landing on a table cell. The cell has to say what it is. */
.t6 td.who { display:table-cell; width:auto; padding:var(--sp-3) var(--sp-4);
border-radius:0; cursor:auto; font-weight:600; color:var(--accent-text); }
.t6 tr.sel { background:var(--accent-tint); }
.t6 tr.sel:hover { background:color-mix(in srgb, var(--seed-accent-hi) 18%, transparent); }
.t6-edit { width:74px; text-align:right; font-family:var(--f-num-col); font-weight:var(--num-wt-col);
font-size:var(--fs-sm); color:var(--text); background:var(--surface-deep);
border:1px solid color-mix(in srgb, var(--seed-accent-hi) 55%, transparent); border-radius:6px;
padding:5px 9px; outline:none; box-shadow:var(--e-sunk); margin-right:-9px; }
.kpi { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
@media (max-width:760px){ .kpi { grid-template-columns:1fr; }}
.klabel { font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600; letter-spacing:var(--ls-caps);
text-transform:uppercase; color:var(--muted); }
.kval { font-family:var(--f-num); font-weight:var(--num-wt); font-size:var(--fs-2xl); color:var(--text);
margin-top:var(--sp-2); line-height:1.05; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.kval small { font-size:var(--fs-md); font-weight:600; color:var(--subtle-text); }
.kdelta { display:inline-flex; gap:5px; font-family:var(--f-num); font-weight:var(--num-wt);
font-size:var(--fs-sm); margin-top:var(--sp-2); font-variant-numeric:tabular-nums; }
.kdelta.up { color:var(--success-text); } .kdelta.attn { color:var(--danger-text); }
.spark { display:block; margin-top:var(--sp-3); width:100%; height:34px; cursor:crosshair; }
.spark-tip { position:fixed; z-index:var(--z-overlay); pointer-events:none; white-space:nowrap;
font-family:var(--f-num); font-weight:var(--num-wt); font-size:var(--fs-caps); color:var(--text);
background:var(--glass-bg); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
border:1px solid var(--glass-border); border-radius:8px; padding:5px 10px;
opacity:0; transition:opacity calc(130ms * var(--dur)) ease; }
.spark .sline { stroke-dasharray:200; stroke-dashoffset:200; animation:draw calc(900ms * var(--dur)) var(--ease-entrance) calc(200ms * var(--dur)) forwards; }
.spark .sfill { opacity:0; animation:fadein calc(600ms * var(--dur)) ease calc(600ms * var(--dur)) forwards; }
@keyframes draw { to { stroke-dashoffset:0; }}
@keyframes fadein { to { opacity:1; }}
.kb { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
@media (max-width:760px){ .kb { grid-template-columns:1fr; }}
.kb-col { background:var(--surface-deep); border-radius:var(--r); padding:var(--sp-2); box-shadow:var(--e-sunk); }
.kb-head { display:flex; align-items:baseline; gap:var(--sp-2); padding:6px var(--sp-2) var(--sp-2); }
.kb-head b { font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600; letter-spacing:var(--ls-caps);
text-transform:uppercase; color:var(--muted); }
.kb-head .ct { margin-left:auto; font-family:var(--f-num); font-weight:var(--num-wt); font-size:var(--fs-sm); color:var(--subtle-text); }
.kb-card { position:relative; background:var(--grad-ground); border-radius:var(--r-xs); padding:var(--sp-3);
box-shadow:var(--e1); cursor:grab; margin-bottom:var(--sp-2); transition:background var(--d-fast) var(--ease-hover), box-shadow var(--d-fast) var(--ease-hover); }
.kb-card:hover { background:var(--hover); box-shadow:var(--e2); }
.kb-card:last-child { margin-bottom:0; }
.kb-card b { font-family:var(--f-body); font-size:var(--fs-sm); font-weight:600; color:var(--text); display:block; }
.kb-meta { display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-3); }
.kb-meta small { font-family:var(--f-num); font-weight:600; font-size:var(--fs-sm); color:var(--subtle-text); }
.ava-s { width:24px; height:24px; border-radius:calc(var(--r-xs) * .7); display:grid; place-items:center; flex-shrink:0;
font-family:var(--f-ui); font-size:calc(var(--fs-caps) * .88); font-weight:600; line-height:1; color:var(--text); background:var(--ctrl); box-shadow:var(--e1); }
.ava-stack { display:flex; }
.ava-stack .ava-s { margin-left:-8px;
background:linear-gradient(150deg in oklab, color-mix(in oklab, var(--seed-accent-hi) 92%, white) 0%,
var(--seed-accent-hi) 55%, color-mix(in oklab, var(--seed-accent-lo) 55%, var(--seed-accent-hi)) 100%);
color:var(--on-accent); box-shadow:0 0 0 2px var(--surface-deep); }
[data-theme="light"] .ava-stack .ava-s { color:var(--on-accent); }
.ava-stack .ava-s:first-child { margin-left:0; }
.prog { height:7px; border-radius:99px; background:var(--surface-deep); box-shadow:var(--e-sunk); overflow:hidden; }
.prog > i { display:block; height:100%; border-radius:99px; background:var(--accent-lit);
transition:width var(--d-slow) var(--ease-entrance); }
.skel { position:relative; overflow:hidden; background:var(--surface-deep); border-radius:var(--r-xs); box-shadow:var(--e-sunk); }
.skel::after { content:""; position:absolute; inset:0; transform:translateX(-100%);
background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
animation:shim 1.4s infinite; }
[data-theme="light"] .skel::after { background:linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); }
@keyframes shim { to { transform:translateX(100%); }}
.tip { position:relative; }
/* A tooltip at opacity 0 is invisible but STILL LAID OUT. With white-space:nowrap
a long tip becomes a 330px box that pushes the page wider than the viewport,
which is exactly what overflowed this page at 375px. It wraps and is capped. */
.tip::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%;
transform:translate(-50%,4px) scale(.97); white-space:normal; width:max-content;
max-width:min(230px, 60vw); text-align:center; line-height:1.4;
font-family:var(--f-ui); font-size:var(--fs-sm);
color:var(--text); background:var(--glass-bg); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
border:1px solid var(--glass-border); border-radius:var(--r-xs); padding:5px var(--sp-3);
box-shadow:var(--e3); opacity:0; pointer-events:none; z-index:var(--z-overlay);
transition:opacity var(--d-fast) ease, transform var(--d-fast) var(--ease-entrance); }
.tip:hover::after { opacity:1; transform:translate(-50%,0) scale(1); }
/* A TIP ABOVE AN ELEMENT AT THE TOP OF THE WINDOW IS A TIP NOBODY CAN READ.
The default opens upward, which is right almost everywhere and wrong in the
one place the system puts tips by default: the top bar. The bell sits ~27px
from the top, so its tip rendered off-screen behind the browser chrome.
CSS cannot detect clipping, but it does not need to here: nothing in a top
bar ever has room above it. So anything in .topb, and anything asking for it
by name, opens downward. Added 27-08-2026. */
.topb .tip::after, .tip.tip-below::after {
bottom:auto; top:calc(100% + 8px); transform:translate(-50%,-4px) scale(.97); }
.topb .tip:hover::after, .tip.tip-below:hover::after {
transform:translate(-50%,0) scale(1); }
/* The same for a tip on the right edge, which otherwise runs off the side. */
.tip.tip-end::after { left:auto; right:0; transform:translate(0,4px) scale(.97); }
.tip.tip-end:hover::after { transform:translate(0,0) scale(1); }
.topb .tip.tip-end::after { transform:translate(0,-4px) scale(.97); }
.topb .tip.tip-end:hover::after { transform:translate(0,0) scale(1); }
/* A menu sits OVER content, so it is mostly opaque. The blur stays for the edge
and the sense of a pane, but you should never be able to read the table
underneath it. */
.menu { border-radius:var(--r-xs); padding:6px; min-width:200px;
background:color-mix(in srgb, var(--surface-raise) 94%, transparent);
-webkit-backdrop-filter:blur(26px) saturate(150%); backdrop-filter:blur(26px) saturate(150%);
border:1px solid var(--glass-border); box-shadow:var(--e3), inset 0 1px 0 var(--glass-hi); }
/* ══ THE THREE REGISTERS ══════════════════════════════════════════════════════
Every string in the system sits in exactly one of three, and almost every
casing fault is a string in the wrong one.
1. THE LABEL LAYER, small tracked uppercase. Anything that names or
classifies content instead of BEING content: table heads, eyebrows, status
labels, accordion headers, and every command in a menu. The tell is that it
never appears inside a sentence.
2. THE NAME LAYER, Title Case with small words down. Discrete selectable
things: service lines, options, chips, tags, workflow states, and buttons
that name an object. "Hero Cut, up to 90 Seconds" keeps "up" and "to" low,
which is what makes it title case rather than Capitalising Every Word.
3. THE PROSE LAYER, sentence case. Body copy, help text, accordion bodies,
errors, tooltips. Anything read as language.
CAPS IS NOT LOUDER HERE, IT IS QUIETER, and that is the whole reason it
works. The command register drops from 13px body to 11px tracked UI type, so
a menu reads as a row of machined labels rather than a row of sentences. Caps
set at body size WOULD shout, which is why a full size button naming an
object stays in the name layer and never takes this treatment.
The source strings are stored in correct Title Case regardless, so a surface
that renders them without the transform is still right. */
.menu > button:not(.optrow) { font-family:var(--f-ui); font-size:var(--fs-caps);
letter-spacing:var(--ls-caps); text-transform:uppercase; }
/* .optrow is the exception that proves it: that menu holds service NAMES with
prices, not commands, so it stays in the name layer and at a readable size. */
.menu button { display:flex; width:100%; align-items:center; gap:var(--sp-3); font-family:var(--f-body);
font-size:var(--fs-sm); color:var(--muted); padding:var(--sp-2) var(--sp-3); border-radius:calc(var(--r-xs)*.7);
transition:background var(--d-fast) var(--ease-hover), color var(--d-fast) var(--ease-hover); }
.menu button:hover { background:color-mix(in srgb, var(--seed-accent-hi) 18%, transparent); color:var(--text); }
.menu button.attn:hover { background:color-mix(in srgb, var(--danger) 16%, transparent); }
.menu button.attn { color:var(--danger-text); }
.menu button .k { margin-left:auto; font-family:var(--f-ui); font-size:var(--fs-caps); color:var(--subtle-text); }
.menu hr { height:1px; background:var(--line); border:none; margin:var(--sp-1) var(--sp-2); }
.empty { text-align:center; padding:var(--sp-7) var(--sp-4);
border:1px dashed var(--line-strong); border-radius:var(--r-lg); }
.empty .ic { width:46px; height:46px; margin:0 auto var(--sp-3); border-radius:var(--r-xs);
display:grid; place-items:center; background:var(--surface-deep); box-shadow:var(--e-sunk); color:var(--subtle); }
.empty b { font-family:var(--f-head); font-size:var(--fs-sm); font-weight:400; text-transform:uppercase;
letter-spacing:var(--ls-head); display:block; margin-bottom:6px; }
.empty p { font-size:var(--fs-sm); color:var(--subtle-text); max-width:38ch; margin:0 auto var(--sp-4); }
/* ═══ NEW IN V5 · the atoms V4 never had ═══════════════════════════════════ */
/* Inline alert / banner. V4 had a toast but nothing that lives IN the page. */
.banner { display:flex; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-3) var(--sp-4);
border-radius:var(--r-xs); background:var(--surface-deep); box-shadow:inset 3px 0 0 var(--tone, var(--info)); }
.banner .bi { color:var(--tone-text, var(--info-text)); flex-shrink:0; margin-top:1px; }
.banner .bi svg { width:15px; height:15px; }
.banner b { display:block; font-family:var(--f-ui); font-size:var(--fs-sm); font-weight:600;
letter-spacing:.06em; text-transform:uppercase; color:var(--tone-text, var(--info-text)); margin-bottom:3px; }
.banner p { font-size:var(--fs-sm); color:var(--muted); }
.banner.danger { --tone:var(--danger); --tone-text:var(--danger-text); }
.banner.warning { --tone:var(--warning); --tone-text:var(--warning-text); }
.banner.success { --tone:var(--success); --tone-text:var(--success-text); }
.banner.info { --tone:var(--info); --tone-text:var(--info-text); }
/* Spinner. Only for indeterminate waits where a skeleton cannot know the shape. */
/* `display:block` ADDED 31-08-2026, and it is a real trap closed. Width and
height do not apply to a non-replaced INLINE element, and every existing use
of `.spin` puts it inside a flex container - a button, `.busy`, `.connbar` -
which blockifies it, so the 18px worked by accident of its neighbours. Drop
one into an ordinary span and it collapses to the line box: the conic
gradient renders as a thin crimson crescent, which is exactly what shipped to
Knox for one build. A component whose size depends on what it happens to be
inside is a component that will do this again. Blockifying changes nothing
for a flex item, which is blockified either way. */
.spin { display:block; width:18px; height:18px; border-radius:50%; flex-shrink:0; padding:2.5px;
background:conic-gradient(from 0deg, transparent 0deg, var(--accent-lit) 300deg);
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;
mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite:exclude;
animation:spin calc(800ms * var(--dur)) linear infinite; }
@keyframes spin { to { transform:rotate(360deg); }}
/* Popover. Distinct from tooltip (hover, text) and menu (list of actions). */
.pop { position:absolute; z-index:var(--z-drop); width:260px; background:var(--surface-raise);
border-radius:var(--r-xs); box-shadow:var(--e3); padding:var(--sp-4); }
.pop h4 { font-family:var(--f-ui); font-size:var(--fs-sm); font-weight:600; letter-spacing:var(--ls-caps);
text-transform:uppercase; color:var(--muted); margin-bottom:var(--sp-2); }
.drawer { position:absolute; top:0; right:0; bottom:0; width:min(280px, 78%); background:var(--surface-raise);
box-shadow:var(--e4); padding:var(--sp-4); transform:translateX(100%);
transition:transform var(--d-slow) var(--ease-entrance); display:flex; flex-direction:column; gap:var(--sp-3); }
/* ── THE OPEN STATE HAS TO LIVE ON THE ELEMENT · 30-08-2026 ──────────────────
Found building Darkroom's Library against the real dist, which is the only
way any of these have ever been found.
`.drawer` ships `transform:translateX(100%)`, and the ONLY rule that brought it
back was `.drawer-demo.open .drawer` - scoped to the GALLERY'S DEMO WRAPPER. `.drawer-demo`
is in _extract.py's DEMO drop set, so the open state is dropped from every
app's dist and the panel sits permanently off screen. It looks like a
component that shipped. It is a component that can never open.
This is the `.scrim-demo` fault of 29-08-2026 in a different part: a
documentation wrapper carrying something load-bearing away with it when it is
dropped. `.modal` escaped it only because someone had already written the
real `.scrim.open > .modal` beside the demo's.
So the element carries its own state, and the demo keeps its wrapper form.
Both live, deliberately, exactly like the portalled-menu twins above. */
.drawer.open { transform:none; }
.drawer .dh { display:flex; align-items:center; justify-content:space-between; }
.drawer .dh b { font-family:var(--f-head); font-size:var(--fs-sm); font-weight:400; text-transform:uppercase;
letter-spacing:var(--ls-head); }
/* Combobox: defined once, with the pickers. Glass list, same skin as the dropdown. */
/* Dropzone. */
.dz { border-radius:var(--r-xs); background:var(--surface-deep); box-shadow:var(--e-sunk);
padding:var(--sp-6) var(--sp-4); text-align:center; cursor:pointer;
transition:background var(--d-fast) var(--ease-hover), box-shadow var(--d-fast) var(--ease-hover); }
.dz:hover, .dz.over { background:var(--accent-tint); box-shadow:var(--e-sunk); outline:2px dashed var(--accent-live); outline-offset:-4px; }
.dz svg { width:22px; height:22px; color:var(--subtle); margin:0 auto var(--sp-2); }
.dz b { display:block; font-family:var(--f-ui); font-size:var(--fs-sm); font-weight:600; color:var(--text); }
.dz small { font-size:var(--fs-sm); color:var(--subtle-text); }
/* Timeline / activity feed. */
.tl { position:relative; padding-left:var(--sp-5); }
.tl::before { content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--line-strong); }
.tl-item { position:relative; padding-bottom:var(--sp-4); }
.tl-item:last-child { padding-bottom:0; }
.tl-item::before { content:""; position:absolute; left:calc(var(--sp-5) * -1 + 2px); top:5px; width:7px; height:7px;
border-radius:50%; background:var(--ctrl); box-shadow:0 0 0 3px var(--surface); }
.tl-item.on::before { background:var(--accent-lit); }
.tl-item b { font-family:var(--f-body); font-size:var(--fs-sm); font-weight:600; color:var(--text); display:block; }
.tl-item time { font-family:var(--f-num); font-weight:600; font-size:var(--fs-sm); color:var(--subtle-text);
font-variant-numeric:tabular-nums; }
.tl-item p { font-size:var(--fs-sm); color:var(--muted); margin-top:3px; }
/* Tree nav. */
.tree-row { display:flex; align-items:center; gap:var(--sp-2); font-family:var(--f-body); font-size:var(--fs-sm);
color:var(--muted); padding:5px var(--sp-2); border-radius:calc(var(--r-xs)*.7); cursor:pointer;
transition:background var(--d-fast) var(--ease-hover), color var(--d-fast) var(--ease-hover); }
.tree-row:hover { background:var(--hover); color:var(--text); }
.tree-row.on { color:var(--accent-text); background:var(--accent-tint); }
.tree-row .cv { width:11px; height:11px; color:var(--subtle-text); transition:transform var(--d-base) var(--ease-spring); }
.tree-row.open .cv { transform:rotate(90deg); }
.tree-kids { padding-left:var(--sp-4); margin-left:5px; border-left:1px solid var(--line); display:none; }
.tree-kids.open { display:block; }
/* Bulk-select toolbar. Appears when rows are checked. */
.bulk { display:flex; align-items:center; flex-wrap:wrap; min-width:0; max-width:100%;
gap:var(--sp-2) var(--sp-4); padding:var(--sp-3) 0; border-bottom:1px solid var(--line-strong);
background:none; border-radius:0; box-shadow:none; }
.bulk .n { font-family:var(--f-num); font-weight:var(--num-wt); font-size:var(--fs-sm); color:var(--text);
font-variant-numeric:tabular-nums; }
.bulk .n small { font-family:var(--f-ui); font-weight:600; font-size:var(--fs-sm); color:var(--subtle-text);
letter-spacing:.06em; text-transform:uppercase; margin-left:5px; }
/* ── `.float`: THE SELECTION BAR LEAVES THE PAGE ──────────────────────────
ADDED 31-08-2026. Knox: "I need this to show up as a dialog box type of
thing, like a status bar. Below, it should appear as we select, not on the
page itself. Can we do that like an overlay?"
`.bulk` in a band is the right answer for a surface where selecting is the
main job - a table, a queue - because the bar belongs to the list and should
live in its header. It is the wrong answer for a WALL, where selecting is
something you do to pictures while looking at pictures: the bar takes a line
off the top of the frames, and the thing you are acting on is what it pushed
down.
Floating fixes both. It sits over the wall near the bottom, nothing above it
moves, and it is near the hand that has been clicking. `position:fixed`
centred on the viewport rather than on the canvas: a rail is 197px and
offsetting for it means an app measuring its own chrome, which is the kind of
arithmetic that is right until somebody collapses the rail. Centre on the
window, like every gallery that does this well.
E5 and glass, because it is above everything on the surface and has to stay
legible over a frame of any colour. It arrives from below, which is where it
is: a bar that fades in place has no answer to "where did this come from". */
.bulk.float { position:fixed; left:50%; bottom:var(--sp-5); z-index:var(--z-drop);
transform:translateX(-50%) translateY(0); width:auto; max-width:min(920px, calc(100vw - var(--sp-6)));
flex-wrap:nowrap; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-bottom:none;
border:1px solid var(--glass-border); border-radius:var(--r-pill);
background:color-mix(in srgb, var(--seed-ink) 82%, transparent);
-webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:var(--e5);
animation:bulk-rise calc(280ms * var(--dur)) var(--ease-entrance) both; }
@keyframes bulk-rise {
from { opacity:0; transform:translateX(-50%) translateY(10px); }
to { opacity:1; transform:translateX(-50%) translateY(0); }}
/* A hairline between the verbs you use and the ones you regret, rather than a
gap somebody has to notice. */
.bulk.float .sep { width:1px; align-self:stretch; margin:0 var(--sp-1);
background:var(--line-strong); flex:none; }
@media (max-width:640px){
.bulk.float { left:var(--sp-3); right:var(--sp-3); transform:none; max-width:none;
flex-wrap:wrap; border-radius:var(--r); animation:none; }}
/* Command palette. E5, the highest surface in the system. */
.cmdk { border-radius:var(--r); background:var(--surface-raise); box-shadow:var(--e5); overflow:hidden; }
.cmdk .cin { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4);
border-bottom:1px solid var(--line); }
.cmdk .cin input { font-family:var(--f-body); font-size:var(--fs-lg); color:var(--text); width:100%; }
.cmdk .cin input::placeholder { color:var(--disabled); }
.cmdk .cin svg { width:17px; height:17px; color:var(--subtle); flex-shrink:0; }
.cmdk .cgrp { font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600; letter-spacing:.14em;
text-transform:uppercase; color:var(--subtle-text); padding:var(--sp-3) var(--sp-4) var(--sp-1); }
.cmdk .crow { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-4);
font-size:var(--fs-sm); color:var(--muted); cursor:pointer; }
.cmdk .crow:hover, .cmdk .crow.hi { background:var(--hover); color:var(--text); }
.cmdk .crow svg { width:14px; height:14px; color:var(--subtle); }
.cmdk .crow .k { margin-left:auto; font-family:var(--f-ui); font-size:var(--fs-caps); color:var(--subtle-text); }
/* Charts. V4 shipped only a sparkline. */
.bars { display:flex; align-items:flex-end; gap:var(--sp-2); height:120px; margin-bottom:26px; }
.bars > div { flex:1; border-radius:var(--r-xs) var(--r-xs) 3px 3px; position:relative;
background:linear-gradient(180deg in oklab, var(--accent-lit) 0%, color-mix(in oklab, var(--seed-accent-hi) 55%, transparent) 100%);
transform-origin:bottom; animation:grow calc(700ms * var(--dur)) var(--ease-entrance) both; }
@keyframes grow { from { transform:scaleY(0); }}
.bars > div span { position:absolute; bottom:-20px; left:0; right:0; text-align:center;
font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--subtle-text); }
.donut { width:120px; height:120px; }
/* BUTT caps, not round. A round cap adds half the stroke width of arc at each
end, which on a 13px stroke over a 97px circumference is enormous: every
segment overran its neighbour and the ring read as two arcs crossing. Round
is only correct on a single-value ring with nothing beside it. */
.donut circle { fill:none; stroke-width:13; stroke-linecap:butt;
transform:rotate(-90deg); transform-origin:center; }
.donut.single circle { stroke-linecap:round; }
/* Pagination */
.pager { display:inline-flex; align-items:center; gap:var(--sp-1); }
.pager button { min-width:32px; height:32px; padding:0 var(--sp-2); border-radius:var(--r-xs);
font-family:var(--f-num); font-weight:600; font-size:var(--fs-sm); color:var(--muted);
font-variant-numeric:tabular-nums; transition:background var(--d-fast) var(--ease-hover), color var(--d-fast) var(--ease-hover); }
.pager button:hover { background:var(--hover); color:var(--text); }
.pager button svg { width:11px; height:11px; margin:0 auto; }
.pager button.on { background:var(--accent-lit); color:var(--on-accent); }
[data-theme="light"] .pager button.on { color:var(--on-accent); }
/* Toast. Severity is a status line inside, never a coloured bar. */
.toast { display:flex; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-3) var(--sp-4);
border-radius:var(--r-xs); background:var(--glass-bg); -webkit-backdrop-filter:blur(22px);
backdrop-filter:blur(22px); border:1px solid var(--glass-border); box-shadow:var(--e4); max-width:360px; }
.toast b { font-family:var(--f-body); font-size:var(--fs-sm); font-weight:600; color:var(--text); display:block; }
.toast p { font-size:var(--fs-sm); color:var(--muted); margin-top:2px; }
/* Modal */
.modal { border-radius:var(--r-lg); background:var(--grad-ground); box-shadow:var(--e4);
padding:var(--sp-5);
/* WIDTH, NOT MAX-WIDTH. A max-width here capped .w-md at 420 instead of
560 and .w-xl at 420 instead of 1040, so the size scale below did
nothing and the master's own demos rendered at the wrong size. */
width:min(440px, 92vw); }
/* ── THE OVERLAY ── the real one, not the demo's ──────────────────────────
ADDED 27-08-2026, AFTER IT COST AN APP A DAY. Knox Artiste Accounts moved to
V5 and all 22 of its overlays laid themselves out down the page: every screen
between 11,657 and 16,068 pixels tall on a 900px viewport. The cause was that
this system described a modal and never shipped the thing that puts one on
top of a page. `.modal` was a card, and every piece of overlay behaviour --
fixed position, the backdrop, the centring, the entrance -- existed only
inside `.scrim-demo`, which is a documentation wrapper on this page.
An app cannot use a demo. So the overlay is a component now, and the demo
below is what it always should have been: the same component, scoped to a box
so it can be shown on this page without covering it.
V4 shipped this and V5 dropped it in the port. Pulse and Grid have modals and
would each have rediscovered it the same way. */
.scrim { position:fixed; inset:0; z-index:var(--z-modal); display:grid; place-items:center;
background:var(--scrim); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
opacity:0; pointer-events:none;
transition:opacity calc(240ms * var(--dur)) var(--ease-hover); }
.scrim.open { opacity:1; pointer-events:auto; }
/* A VIEWER'S BACKDROP IS DEEPER THAN A DIALOG'S. A dialog sits over a page you
are still working in and the page should stay legible behind it; a viewer
REPLACES the page, and the one thing on screen is a picture. At the shared
62% the wall behind stayed bright enough to compete with the frame in front
of it, which is the opposite of what a viewer is for.
Selected with `:has` rather than a class an app has to remember, because
whether the backdrop is deep is a property of what is on it and not a
decision each app should get to make differently. */
.scrim:has(> .viewer) { background:color-mix(in srgb, var(--seed-ink) 93%, transparent); }
/* `.modal` carries a max-width and no width, which is right for a card and not
enough for an overlay: something has to say how wide it is before it is
centred in a viewport. */
/* ── THE OVERLAY SIZE SCALE ────────────────────────────────────────────────
ADDED 27-08-2026, and it is the biggest thing this system was missing.
V5 defined 232 components and no composition. There was one overlay width
and no way to ask for another, so every app hand-typed its own. Knox Artiste
Accounts was measured carrying EIGHT: 440, 660, 680, 800, 96vw and three
more. Knox's report was "the modal for the clients bit is way too wide when
it doesn't need to be", and he was right: it was 680px because somebody
typed 680 once, against nothing.
Four sizes, and a dialog picks the smallest one its content fits in. The
viewport cap rises with the size because a wide dialog on a phone should
still breathe, and a narrow one should not stretch.
(default) a confirm, a short form, one decision 440
.w-md a record: a client, an expense, a subscription 560
.w-lg a working panel: notifications, a long form 760
.w-xl something that has to be READ: a document 1040
THERE IS NO FIFTH. If content does not fit .w-xl it is a screen, not a
dialog, and the answer is a route rather than a wider box. */
.scrim > .modal { width:min(440px, 92vw);
transform:translateY(14px) scale(.97);
transition:transform calc(360ms * var(--dur)) var(--ease-entrance); }
.scrim > .modal.w-md { width:min(560px, 92vw); }
.scrim > .modal.w-lg { width:min(760px, 92vw); }
.scrim > .modal.w-xl { width:min(1040px, 94vw); }
.scrim.open > .modal { transform:none; }
.modal h3 { font-family:var(--f-head); font-size:var(--fs-md); font-weight:400; text-transform:uppercase;
letter-spacing:var(--ls-head); line-height:var(--lh-head); margin:0 0 var(--sp-3); color:var(--text); }
.modal p { font-size:var(--fs-sm); color:var(--muted); margin-bottom:var(--sp-5); }
.scrollx { overflow-x:auto; }
/* ── THE SEED CARDS ──
Six cards on the same rhythm and the same corner as the six ramp swatches
below them, because they are the same kind of object: a colour with its name
under it. The old block was three tall pillars with the palette NAME painted
over the colour, which failed twice. It carried hardcoded V4 names and hexes,
so the document said "Royal Onyx, #2C5364 to #0F2027" over a red gradient and
lied about its own system. And type sitting directly on the swatch can only
stay readable if you know the colour in advance, which stopped being true the
moment these became pickers.
So the label sits on a --surface bar UNDER the swatch. That is readable
against anything anybody picks, and it is the only version of this card that
cannot break. Each card is a label wrapping a hidden colour input, so the
whole card is the hit target and every hex is live.
Roles, not names: Ink, Paper, Accent. A palette gets renamed; a role does
not, and a name painted into a document drifts the day the seed changes. */
.seeds { display:grid; grid-template-columns:repeat(6,1fr); gap:var(--sp-2); margin-top:var(--sp-3); }
@media (max-width:900px){ .seeds { grid-template-columns:repeat(3,1fr); }}
@media (max-width:520px){ .seeds { grid-template-columns:repeat(2,1fr); }}
.seedcard { position:relative; display:block; border-radius:var(--r-xs); box-shadow:var(--e1);
overflow:hidden; cursor:pointer; }
.seedcard.fixed { cursor:default; }
.seedcard .scw { display:block; height:70px; background:var(--sc, var(--ctrl)); position:relative; }
.seedcard .scm { display:block; padding:var(--sp-2); background:var(--surface); }
.seedcard b { display:block; font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600;
letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--text); white-space:nowrap;
overflow:hidden; text-overflow:ellipsis; }
.seedcard .mono { display:block; margin-top:2px; font-family:var(--fm); font-size:var(--fs-caps);
color:var(--subtle-text); letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seedcard input[type=color] { position:absolute; inset:0; width:100%; height:100%; opacity:0;
border:none; padding:0; cursor:pointer; }
.seedcard:has(input:focus-visible) { outline:2px solid var(--accent-live); outline-offset:2px; }
/* ═══ RESTORED FROM V4 ═════════════════════════════════════════════════════
Fifteen components the first V5 pass dropped without saying so. Rebuilt on
V5 tokens, so they ride the seeds and the density dial like everything else. */
/* Calendar. A native date input renders OS chrome and never ships. */
.cal { max-width:290px; }
.cal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--sp-3); }
.cal-head b { font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600; letter-spacing:var(--ls-caps);
text-transform:uppercase; color:var(--text); }
.cal-nav { display:flex; gap:6px; }
.cal-nav button { width:26px; height:26px; border-radius:calc(var(--r-xs) * .9); display:grid; place-items:center;
background:var(--surface-deep); color:var(--subtle); box-shadow:var(--e-sunk);
transition:color calc(130ms * var(--dur)) var(--ease-hover); }
.cal-nav button:hover { color:var(--text); }
.cal-nav svg { width:11px; height:11px; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center; }
.cal-grid b { font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600; letter-spacing:.08em;
color:var(--subtle); padding:6px 0; }
.cal-grid span { font-family:var(--f-num-col); font-weight:600; font-size:var(--fs-sm); padding:8px 0;
border-radius:calc(var(--r-xs) * .9); cursor:pointer; color:var(--muted); font-variant-numeric:tabular-nums;
transition:background calc(130ms * var(--dur)) var(--ease-hover), color calc(130ms * var(--dur)) var(--ease-hover); }
.cal-grid span:hover { background:var(--hover); color:var(--text); }
.cal-grid span.dim { color:var(--disabled); }
/* The in-range fill is squared off so a range reads as one continuous band. */
.cal-grid span.inr { background:var(--accent-tint); border-radius:0; color:var(--text); }
.cal-grid span.on:has(+ span.inr) { border-radius:calc(var(--r-xs) * .9) 0 0 calc(var(--r-xs) * .9); }
.cal-grid span.inr + span.on { border-radius:0 calc(var(--r-xs) * .9) calc(var(--r-xs) * .9) 0; }
.cal-grid span.on { background:var(--accent-lit); color:var(--on-accent); box-shadow:var(--e2); }
[data-theme="light"] .cal-grid span.on { color:var(--on-accent); }
/* Time picker */
.timep { display:flex; gap:9px; align-items:center; }
.timep .cell { font-family:var(--f-num); font-weight:var(--num-wt); font-size:var(--fs-lg); color:var(--text);
background:var(--surface-deep); border-radius:calc(var(--r-xs) * .9); padding:10px 15px;
box-shadow:var(--e-sunk); font-variant-numeric:tabular-nums; }
.timep .colon { font-family:var(--f-num); font-weight:var(--num-wt); font-size:var(--fs-lg); color:var(--subtle); }
.timep .mer { display:flex; flex-direction:column; gap:4px; }
.timep .mer button { font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600; letter-spacing:.08em;
padding:5px 11px; border-radius:calc(var(--r-xs) * .7); background:var(--surface-deep); color:var(--subtle);
box-shadow:var(--e-sunk); transition:background calc(130ms * var(--dur)) var(--ease-hover), color calc(130ms * var(--dur)) var(--ease-hover); }
.timep .mer button.on { background:var(--accent-lit); color:var(--on-accent); box-shadow:var(--e2); }
[data-theme="light"] .timep .mer button.on { color:var(--on-accent); }
/* Filing index. Subgrid, so the three columns align across every row. */
.filing { display:grid; grid-template-columns:1fr max-content max-content;
border-radius:var(--r); overflow:hidden; background:var(--grad-ground); box-shadow:var(--e1); }
.frow { grid-column:1/-1; display:grid; grid-template-columns:subgrid; gap:var(--sp-4); align-items:center;
padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line); cursor:pointer;
transition:background calc(130ms * var(--dur)) var(--ease-hover); }
.frow:last-child { border-bottom:none; }
.frow:hover { background:var(--hover); }
.fname { font-family:var(--f-body); font-size:var(--fs-md); color:var(--text); }
.fname small { display:block; font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600;
letter-spacing:.1em; text-transform:uppercase; color:var(--subtle-text); margin-top:2px; }
.fmeta { font-family:var(--f-num); font-weight:600; font-size:var(--fs-sm); color:var(--subtle-text);
white-space:nowrap; justify-self:end; font-variant-numeric:tabular-nums; }
/* Attention rows wear an inset bar, never a coloured background. */
.frow.attn { box-shadow:inset 3px 0 0 var(--danger); background:color-mix(in srgb, var(--danger) 6%, transparent); }
.frow.attn:hover { background:color-mix(in srgb, var(--danger) 10%, transparent); }
/* Accordion. Height animates on grid-template-rows, so no measured max-height. */
.acc { border-radius:var(--r); overflow:hidden; background:var(--grad-ground); box-shadow:var(--e1); }
.acc-item + .acc-item { border-top:1px solid var(--line); }
/* An accordion header labels the block under it, so it belongs to the label
layer. It stays at 13px rather than dropping to 11: this one is a hit target
as well as a label, and it has to stay easy to aim at. */
.acc-trig { width:100%; display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3);
text-align:left; padding:var(--sp-4); color:var(--text); font-family:var(--f-ui); font-size:var(--fs-sm);
font-weight:600; letter-spacing:var(--ls-caps); text-transform:uppercase;
transition:background calc(130ms * var(--dur)) var(--ease-hover); }
.acc-trig:hover { background:var(--hover); }
.acc-trig svg { width:12px; height:12px; flex-shrink:0; color:var(--subtle);
transition:transform calc(320ms * var(--dur)) var(--ease-spring); }
.acc-item.open .acc-trig svg { transform:rotate(180deg); }
.acc-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows calc(320ms * var(--dur)) var(--ease-entrance); }
.acc-item.open .acc-body { grid-template-rows:1fr; }
.acc-body > div { overflow:hidden; }
/* The body had ZERO top padding, so it opened flush under the trigger and the
trigger's hover fill ran straight into the first line of prose. The gap is
not decoration: it is what separates the label from the thing it labels. */
.acc-body p { padding:var(--sp-3) var(--sp-4) var(--sp-4); font-size:var(--fs-sm);
color:var(--muted); line-height:1.6; }
/* Step indicator */
.steps { display:flex; align-items:center; flex-wrap:nowrap; gap:var(--sp-3);
/* The current step's ring is drawn outside its circle. Without room it is
clipped by the scroll box, which is what sliced the top off step three. */
padding:5px 2px; }
.step { display:flex; align-items:center; gap:10px; }
.step .sn { width:27px; height:27px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
font-family:var(--f-num); font-weight:var(--num-wt); font-size:var(--fs-caps); color:var(--subtle-text);
background:var(--surface-deep); box-shadow:var(--e-sunk);
transition:background calc(200ms * var(--dur)) var(--ease-hover), color calc(200ms * var(--dur)) var(--ease-hover), box-shadow calc(200ms * var(--dur)) var(--ease-hover); }
.step b { font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600; letter-spacing:.08em;
text-transform:uppercase; color:var(--subtle-text); }
.step.done .sn { background:var(--accent-lit); color:var(--on-accent); box-shadow:var(--e2); }
[data-theme="light"] .step.done .sn { color:var(--on-accent); }
.step.done b { color:var(--muted); }
.step.cur .sn { box-shadow:var(--e-sunk), 0 0 0 2px color-mix(in srgb, var(--seed-accent-hi) 50%, transparent);
color:var(--accent-text); }
.step.cur b { color:var(--text); }
.step .sline { width:38px; height:1px; background:var(--line-strong); }
/* Media cards */
.media-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.media-card { position:relative; isolation:isolate; border-radius:var(--r); overflow:hidden;
background:var(--grad-ground); box-shadow:var(--e1); cursor:pointer;
transition:background calc(130ms * var(--dur)) var(--ease-hover), box-shadow calc(130ms * var(--dur)) var(--ease-hover); }
.media-card:hover { box-shadow:var(--e2); }
.media-thumb { aspect-ratio:16/9; display:grid; place-items:center; color:rgba(255,255,255,.8); position:relative;
background:radial-gradient(95% 115% at 72% 0%, color-mix(in srgb, var(--seed-accent-hi) 45%, transparent), transparent 65%), var(--surface-deep); }
.media-thumb svg { width:26px; height:26px; }
.media-thumb .dur { position:absolute; right:8px; bottom:8px; font-family:var(--f-num); font-weight:600;
font-size:var(--fs-caps); background:rgba(0,0,0,.55); color:var(--on-accent); padding:2px 7px; border-radius:6px; }
.media-body { padding:var(--sp-3); }
.media-body b { font-family:var(--f-body); font-size:var(--fs-sm); font-weight:600; color:var(--text); display:block; }
.media-body small { font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600; letter-spacing:.08em;
text-transform:uppercase; color:var(--subtle-text); }
/* Icon grid, carved cells */
.iconrow { display:grid; grid-template-columns:repeat(8,1fr); gap:10px; }
.icell { aspect-ratio:1; display:grid; place-items:center; border-radius:calc(var(--r-xs) * 1.1); cursor:pointer;
background:var(--surface-deep); box-shadow:var(--e-sunk); color:var(--muted);
transition:color calc(130ms * var(--dur)) var(--ease-hover), background calc(130ms * var(--dur)) var(--ease-hover); }
.icell:hover { color:var(--accent-text); background:var(--accent-tint); }
.icell svg { width:16px; height:16px; }
/* Checklist. The whole row is the hit area, never just the box. */
.check { display:flex; align-items:center; gap:var(--sp-3); padding:11px 2px; border-bottom:1px solid var(--line);
cursor:pointer; }
.check:last-child { border-bottom:none; }
.check .lbl { font-family:var(--f-body); font-size:var(--fs-md); color:var(--muted); flex:1;
transition:color calc(160ms * var(--dur)) var(--ease-hover); }
.check:hover .lbl { color:var(--text); }
.check small { font-family:var(--f-num); font-weight:600; font-size:var(--fs-caps); color:var(--subtle-text); }
/* Toggle list row: the label answers to the switch. */
.vt-row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
padding:14px 2px; border-bottom:1px solid var(--line); }
.vt-row:last-child { border-bottom:none; }
.vt-row span { font-size:var(--fs-md); color:var(--muted); transition:color calc(200ms * var(--dur)) var(--ease-hover); }
.vt-row.on span { color:var(--accent-text); font-weight:500; }
/* The accent hero band */
.accent-band { position:relative; border-radius:var(--r-lg); overflow:hidden; padding:30px;
background:radial-gradient(85% 100% at 78% 0%, color-mix(in srgb, var(--seed-accent-hi) 75%, transparent), transparent 62%), var(--grad-accent);
box-shadow:var(--e3); color:var(--on-accent); }
.accent-band::after { content:""; position:absolute; inset:0; background-image:var(--noise);
background-size:130px; opacity:calc(.06 * var(--noise-o)); mix-blend-mode:overlay; pointer-events:none; }
.accent-band > * { position:relative; z-index:1; }
.accent-band h3 { font-family:var(--f-head); font-size:var(--fs-xl); font-weight:400; text-transform:uppercase;
letter-spacing:var(--ls-head); line-height:var(--lh-head); color:var(--on-accent); margin:0 0 var(--sp-3); }
.accent-band p { color:color-mix(in srgb, var(--on-accent) 78%, transparent); max-width:52ch; }
.toast .ib { margin-left:auto; margin-top:-3px; margin-right:-6px; }
.pager .ell { color:var(--subtle); padding:0 4px; font-family:var(--f-num); }
@media (max-width:760px){ .media-grid { grid-template-columns:1fr; } .iconrow { grid-template-columns:repeat(4,1fr); }}
/* ═══ IDENTITY · THE RAIL FOOT ═════════════════════════════════════════════
THERE IS NO USER CHIP. Knox, 23-08-2026: identity is not a tag floating in a
layout, it is a fixed block at the bottom of the rail, and it is the same
block in every app. This is lifted from Knox Artiste Accounts, which is where
the pattern was settled and where Darkroom and Grid already follow it.
Two rows, one block, pinned to the bottom of the rail above a hairline:
the theme switch, then the account. Settings lives inside the account menu,
never in the rail, because the rail is for the work and the account is not
the work. The menu opens UPWARDS, since the block sits at the bottom. */
.rail-foot { margin-top:auto; padding-top:var(--sp-3); display:flex; flex-direction:column;
gap:var(--sp-1); border-top:1px solid var(--line); }
/* THE LABEL NAMES THE MODE YOU ARE IN, not the one you might switch to.
Knox, 19-08-2026, on the KAA build: "the toggle is always showing light mode,
even if I'm going into dark mode." The old row was a switch called "Light
mode" and the toggle said whether light was on, which is correct in principle
and ambiguous by construction: half the people read it as a label about now
and half as an offer. So the words and the glyph both state what is true
right now. A moon and "Dark mode" in the dark, a sun and "Light mode" in the
light. Do not re-litigate this. */
.rail-theme { display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:7px 12px; border-radius:var(--r-xs); cursor:pointer;
transition:background var(--d-fast) var(--ease-hover); }
.rail-theme:hover { background:var(--hover); }
.rail-theme .lbl { display:flex; align-items:center; gap:10px; min-width:0;
font-family:var(--f-body); font-size:var(--fs-sm); color:var(--muted);
transition:color var(--d-fast) var(--ease-hover); }
.rail-theme:hover .lbl { color:var(--text); }
.rail-theme .lbl svg { width:15px; height:15px; flex-shrink:0; }
.rail-theme .tgl { transform:scale(.82); transform-origin:right center; }
.who { position:relative; display:flex; align-items:center; gap:9px; width:100%;
box-sizing:border-box; padding:7px 12px; border-radius:var(--r-xs); cursor:pointer;
transition:background var(--d-fast) var(--ease-hover); }
.who:hover { background:var(--hover); }
.who .whoname { display:block; min-width:0; font-family:var(--f-body); font-size:var(--fs-sm);
color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
transition:color var(--d-fast) var(--ease-hover); }
.who:hover .whoname { color:var(--text); }
.who .ava { width:26px; height:26px; font-size:var(--fs-caps); }
.who .chev { margin-left:auto; width:10px; height:6px; flex-shrink:0; color:var(--subtle);
transition:transform 240ms var(--ease-spring); }
.who.open .chev { transform:rotate(180deg); }
/* This menu overlaps its OWN container, so it cannot be glass. A 42% translucent
panel over the canvas reads as depth; the same panel over the rail lets the
nav links and their counts bleed straight through the account name. Opaque,
with the blur kept only for the edge treatment. */
.who-menu { position:absolute; z-index:var(--z-drop); top:auto; bottom:calc(100% + 10px);
left:0; right:auto; min-width:100%; width:max-content; max-width:min(320px, 88vw);
transform-origin:bottom left;
background:var(--surface-raise); -webkit-backdrop-filter:none; backdrop-filter:none;
box-shadow:var(--e4);
opacity:0; transform:translateY(6px) scale(.985); pointer-events:none;
transition:opacity 180ms var(--ease-hover), transform 240ms var(--ease-spring); }
/* Twin of the ancestor gate. See the note on .drop-menu. 27-08-2026. */
.who.open .who-menu, .who-menu.open { opacity:1; transform:none; pointer-events:auto; }
/* The identity line is a caption, not a menu item, so it does not take the hover. */
.who-menu .who-head { display:block; padding:10px 12px 11px; border-radius:0; cursor:default; }
.who-menu .who-head:hover { background:transparent; }
.who-menu .who-head b { display:block; font-family:var(--f-body); font-size:var(--fs-sm);
font-weight:600; color:var(--text); }
.who-menu .who-head span { display:block; font-family:var(--f-ui); font-size:var(--fs-caps);
font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
margin-top:4px; overflow-wrap:anywhere; }
/* Collapsed rail: the block stays, the words go. */
[data-rail="icons"] .rail-foot { align-items:center; }
[data-rail="icons"] .rail-theme { justify-content:center; padding:7px 0; width:42px; }
[data-rail="icons"] .rail-theme .lbl span:not(#themeIcon) { display:none; }
[data-rail="icons"] .rail-theme .tgl { display:none; }
[data-rail="icons"] .who { justify-content:center; padding:7px 0; width:42px; }
[data-rail="icons"] .who .whoname, [data-rail="icons"] .who .chev { display:none; }
[data-rail="icons"] .who-menu { min-width:210px; }
/* ═══ THE FRONT DOOR · AUTH SURFACES ═══════════════════════════════════════
Sign in, sign up, password reset. Structure taken from Knox Artiste Accounts'
own signin.html, which is where this was settled.
A finance or production tool's front door is not a marketing page: no hero,
no gradient wash, no illustration, no social buttons. One card on the ground
gradient, the wordmark above it, the fields, one key. The page should look
like the app it opens, because it is the first promise the app makes. */
.ground { position:relative; isolation:isolate; min-height:100dvh; display:grid;
place-items:center; padding:var(--sp-6) var(--sp-5); background:var(--grad-ground); }
.ground > .grain { position:absolute; inset:0; pointer-events:none; z-index:0;
background-image:var(--noise); background-size:120px; opacity:calc(.04 * var(--noise-o)); mix-blend-mode:overlay; }
[data-theme="light"] .ground > .grain { opacity:.025; mix-blend-mode:multiply; }
.gate { position:relative; z-index:1; width:min(400px, 100%); }
/* Sign-up carries eight fields. At 400px that is a scroll; at 560 it is a form. */
.gate.wide { width:min(568px, 100%); }
.mark { text-align:center; margin-bottom:var(--sp-5); }
.mark .wordmark { font-family:var(--f-hero); font-size:var(--fs-lg); text-transform:uppercase;
letter-spacing:var(--ls-head); color:var(--text); }
.mark .wordmark span { color:var(--accent-lit); }
/* --subtle sits near the AA floor, and these captions have to be read, so they
take --muted. Same finding as the app and as KAA's own front door. */
.mark .sub { font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600;
letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:9px; }
.gate .card { padding:var(--sp-5); }
.gate h1 { font-family:var(--f-head); font-size:var(--fs-lg); font-weight:400;
text-transform:uppercase; letter-spacing:var(--ls-head); line-height:var(--lh-head);
color:var(--text); margin:0 0 6px; }
.gate-lede { font-family:var(--f-body); font-size:var(--fs-sm); color:var(--muted);
margin:0 0 var(--sp-5); line-height:1.55; max-width:38ch; }
.gate.wide .gate-lede { max-width:56ch; }
.rows { display:flex; flex-direction:column; gap:var(--sp-4); }
.rows.pair { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
@media (max-width:520px){ .rows.pair { grid-template-columns:1fr; }}
/* One action on the page is the definition of a primary, so the front door
takes the accent key at full width. */
.gate .btn-accent, .gate .btn-key { width:100%; justify-content:center; margin-top:var(--sp-5); }
.gate .btn-accent[disabled] { pointer-events:none; }
/* The reveal lives INSIDE the well, the same way the shortcut hint lives inside
the search well. It is never a checkbox below the field. */
.pw { display:flex; align-items:center; padding-right:6px; }
.pw .well-input { flex:1; }
.peek { display:grid; place-items:center; width:30px; height:30px; border-radius:calc(var(--r-xs)*.8);
color:var(--subtle); cursor:pointer; flex-shrink:0; background:none; border:none;
transition:color var(--d-fast) var(--ease-hover), background var(--d-fast) var(--ease-hover); }
.peek:hover { color:var(--text); background:var(--accent-tint); }
.peek:active { transform:scale(.94); transition-duration:70ms; }
.peek svg { width:15px; height:15px; }
/* Requirements are a CHECKLIST, not a coloured strength bar. A bar says "weak"
without saying what to change, and it signals with colour alone. */
.reqs { display:flex; flex-direction:column; gap:5px; margin-top:10px; }
/* The UNMET line is the one somebody needs to read, so it takes the readable
tier and the met one recedes. The first pass had this the wrong way round,
which put the only text that matters at 2.95:1. */
.req { display:flex; align-items:center; gap:8px; font-family:var(--f-body);
font-size:var(--fs-caps); color:var(--muted); transition:color var(--d-fast) var(--ease-hover); }
.req .box { width:13px; height:13px; border-radius:4px; flex-shrink:0; display:grid;
place-items:center; background:var(--surface-deep); box-shadow:var(--e-sunk); color:transparent;
transition:background var(--d-fast) var(--ease-hover), color var(--d-fast) var(--ease-hover); }
.req .box svg { width:8px; height:8px; }
.req.met { color:var(--subtle); }
.req.met .box { background:var(--accent-lit); color:var(--on-accent); box-shadow:none; }
[data-theme="light"] .req.met .box { color:var(--on-accent); }
.gate .f-err { display:none; margin-top:var(--sp-4); line-height:1.5; }
.gate .f-err.on { display:block; }
/* The done state borrows the accent, not the status colour: finishing a reset is
not an alert. */
.gate .f-done { display:none; margin-top:var(--sp-4); font-family:var(--f-ui);
font-size:var(--fs-sm); font-weight:600; color:var(--accent-text); line-height:1.5; }
.gate .f-done.on { display:block; }
.authrow { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
margin-top:var(--sp-4); }
.authlink { font-family:var(--f-body); font-size:var(--fs-sm); color:var(--muted);
text-decoration:none; border-bottom:1px solid var(--line-strong); cursor:pointer;
transition:color var(--d-fast) var(--ease-hover), border-color var(--d-fast) var(--ease-hover); }
.authlink:hover { color:var(--text); border-color:var(--accent-live); }
.foot { margin-top:var(--sp-5); text-align:center; font-family:var(--f-body);
font-size:var(--fs-caps); color:var(--muted); line-height:1.7; }
.foot a { color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line-strong); }
.foot a:hover { color:var(--text); }
/* ═══ FROM THE APPS ════════════════════════════════════════════════════════
Built 23-08-2026 from an inventory of Pulse, Knox Artiste Accounts and
Darkroom. Everything here already existed in at least one app, and several
existed in two or three under different names, which is the whole argument
for having it in one place. Nothing below is speculative. */
/* ── SEARCH · four shapes, because they are four different jobs ─────────────
The apps had all four and the system had one, so each app kept re-inventing
the other three. */
/* 1 · Inline filter. Lives above a table and filters it live. */
.srch { display:flex; align-items:center; gap:var(--sp-2); padding:0 var(--sp-3); }
.srch svg { width:14px; height:14px; color:var(--subtle); flex-shrink:0;
transition:color var(--d-fast) var(--ease-hover); }
.srch:focus-within svg { color:var(--accent-text); }
.srch input { flex:1; min-width:0; background:none; border:none; outline:none; line-height:1.2;
font-family:var(--f-body); font-size:var(--fs-md); color:var(--text); padding:12px 0; }
.srch input::placeholder { color:var(--disabled); }
.srch .clr { width:20px; height:20px; border-radius:50%; display:none; place-items:center;
color:var(--subtle); flex-shrink:0; }
.srch.has .clr { display:grid; }
.srch .clr:hover { color:var(--text); background:var(--hover); }
/* 2 · The result line under a live filter. Says what the search did. */
.srch-found { display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-2);
font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600; letter-spacing:var(--ls-caps);
text-transform:uppercase; color:var(--muted); }
.srch-found b { font-family:var(--f-num); font-weight:var(--num-wt); color:var(--text);
font-variant-numeric:tabular-nums; }
/* 3 · Grouped picker: sticky category heads, a value on the right, and a way
to add what is not there yet. A flat list cannot do a price column. */
.optgrp { position:sticky; top:0; z-index:1; background:var(--surface-raise);
font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600; letter-spacing:var(--ls-caps);
text-transform:uppercase; color:var(--subtle); padding:var(--sp-2) var(--sp-3) 5px; }
.optrow { display:flex; align-items:baseline; gap:var(--sp-3); width:100%; text-align:left;
padding:9px var(--sp-3); border-radius:calc(var(--r-xs) * .8); font-family:var(--f-body);
font-size:var(--fs-sm); color:var(--muted); }
.optrow:hover, .optrow.hi { background:var(--accent-tint); color:var(--text); }
.optrow .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.optrow .px { font-family:var(--f-num); font-weight:var(--num-wt); color:var(--text);
font-variant-numeric:tabular-nums; flex-shrink:0; }
.optrow.none { color:var(--subtle-text); font-style:italic; pointer-events:none; }
.optrow.addnew { color:var(--accent-text); font-weight:600;
border-top:1px solid var(--line); border-radius:0; margin-top:var(--sp-1); padding-top:var(--sp-3); }
/* ── FILTER BAR ── KAA and Darkroom each built this separately. */
.filters { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.filters .well { flex:1 1 240px; min-width:0; }
.fchip { font-family:var(--f-ctrl); font-size:var(--fs-caps); font-weight:600; letter-spacing:.07em;
text-transform:uppercase; line-height:1; color:var(--muted); background:none;
border:1px solid var(--line-strong); border-radius:var(--r-pill); padding:8px 14px; cursor:pointer;
transition:background var(--d-fast) var(--ease-hover), color var(--d-fast) var(--ease-hover),
border-color var(--d-fast) var(--ease-hover); }
.fchip:hover { color:var(--text); border-color:var(--ctrl-hi); }
.fchip.on { background:var(--accent-lit); color:var(--on-accent); border-color:transparent; }
[data-theme="light"] .fchip.on { color:var(--on-accent); }
.fchip .n { font-family:var(--f-num); font-weight:var(--num-wt); margin-left:6px; opacity:.75;
font-variant-numeric:tabular-nums; }
/* ── DATE RANGE ── a start and an end, two months side by side, presets above.
The single-month single-date .cal cannot express a range at all. */
.rangep { display:inline-block; }
.range-panel { background:var(--surface-raise); border-radius:var(--r); box-shadow:var(--e3);
padding:var(--sp-4); width:max-content; max-width:100%; }
.range-presets { display:flex; flex-wrap:wrap; gap:var(--sp-1); padding-bottom:var(--sp-3);
margin-bottom:var(--sp-3); border-bottom:1px solid var(--line); }
.range-months { display:flex; gap:var(--sp-5); }
@media (max-width:640px){ .range-months { flex-direction:column; gap:var(--sp-4); }}
.range-foot { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--line); }
.range-read { font-family:var(--f-num); font-weight:600; font-size:var(--fs-sm); color:var(--text);
font-variant-numeric:tabular-nums; }
.range-read .sep { color:var(--subtle-text); margin:0 6px; }
.range-read .un { color:var(--subtle-text); font-family:var(--f-body); font-weight:400; }
/* The two ends are solid; everything between them is a continuous tinted band,
so a range reads as one thing rather than a row of separate marks. */
.cal-grid span.r-in { background:var(--accent-tint); border-radius:0; color:var(--text); }
.cal-grid span.r-a { border-radius:var(--r-xs) 0 0 var(--r-xs); }
.cal-grid span.r-b { border-radius:0 var(--r-xs) var(--r-xs) 0; }
.cal-grid span.r-a, .cal-grid span.r-b { background:var(--accent-lit); color:var(--on-accent); box-shadow:var(--e2); }
[data-theme="light"] .cal-grid span.r-a, [data-theme="light"] .cal-grid span.r-b { color:var(--on-accent); }
.month-nav { display:inline-flex; align-items:center; gap:var(--sp-1); }
.month-nav b { font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600;
letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--text);
min-width:112px; text-align:center; }
/* ── EXPORT ── five surfaces across two apps fired exports from bare buttons. */
.export .sp-menu button svg { width:13px; height:13px; flex-shrink:0; color:var(--subtle); }
.exform { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4) var(--sp-5); }
@media (max-width:560px){ .exform { grid-template-columns:1fr; }}
.exform .ex-head { grid-column:1/-1; font-family:var(--f-ui); font-size:var(--fs-caps);
font-weight:600; letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--subtle-text); }
.exacts { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between;
gap:var(--sp-3); padding-top:var(--sp-4); border-top:1px solid var(--line); }
/* ── LINE ITEMS AND TOTALS ──
KAA has the editor, Pulse has the cart. Same component at opposite ends of
the estate, in neither case in the system. */
.lines { display:flex; flex-direction:column; gap:var(--sp-2); }
.line { display:grid; grid-template-columns:minmax(0,1fr) 92px 116px 132px auto; gap:var(--sp-3);
align-items:center; padding:var(--sp-3); border-radius:var(--r-xs);
background:var(--surface-deep); box-shadow:var(--e-sunk); }
@media (max-width:820px){ .line { grid-template-columns:1fr 1fr; } .line .l-desc { grid-column:1/-1; }}
.line .l-desc b { display:block; font-family:var(--f-body); font-size:var(--fs-md); font-weight:600; color:var(--text); }
.line .l-desc small { display:block; font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600;
letter-spacing:.08em; text-transform:uppercase; color:var(--subtle-text); margin-top:3px; }
.line .num { font-family:var(--f-num-col); font-weight:var(--num-wt-col); font-size:var(--fs-sm);
color:var(--text); text-align:right; font-variant-numeric:tabular-nums; }
.line .l-rm { width:28px; height:28px; border-radius:calc(var(--r-xs)*.8); display:grid;
place-items:center; color:var(--subtle-text); }
.line .l-rm:hover { color:var(--danger-text); background:color-mix(in srgb, var(--danger) 12%, transparent); }
.line .l-rm svg { width:13px; height:13px; }
.totals { margin-left:auto; width:min(320px,100%); background:var(--surface-deep);
border-radius:var(--r-xs); box-shadow:var(--e-sunk); padding:var(--sp-4); }
.totals .row { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4);
padding:6px 0; font-family:var(--f-body); font-size:var(--fs-sm); color:var(--muted); }
.totals .row .v { font-family:var(--f-num-col); font-weight:var(--num-wt-col); color:var(--text);
font-variant-numeric:tabular-nums; }
.totals .row.grand { margin-top:var(--sp-2); padding-top:var(--sp-3);
border-top:1px solid var(--line-strong); color:var(--text); }
.totals .row.grand .v { font-size:var(--fs-lg); }
/* Reserved height, so a live figure appearing under a field cannot shift the
layout under somebody's cursor. */
.f-calc { min-height:1.4em; font-family:var(--f-num); font-weight:600; font-size:var(--fs-caps);
color:var(--muted); font-variant-numeric:tabular-nums; }
.f-calc.bad { color:var(--danger-text); }
/* ── FIGURE STRIP ── subgrid, so labels, values and notes align across every
card no matter how long the content is. */
/* `1fr` SPREADS THREE FIGURES ACROSS THE FULL WIDTH and turns a compact strip
into a banner, while six figures at a fixed width clip. The same `1fr` cannot
serve both, and both are real: Knox Artiste Accounts has strips of three
(subscriptions, VAT) and a strip of six (who owes what).
`max-content` with a 150px floor serves both. Three sit together at the left
instead of spreading; six need 1,000px and get it; a genuinely huge figure
pushes its own column wider, because a clipped number is worse than an uneven
row. `overflow-x:auto` catches the rest.
Found in KAA, fixed here 27-08-2026, because a strip of three is not a KAA
problem. */
.figs { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(150px, max-content);
grid-template-rows:auto auto auto; gap:4px var(--sp-4); align-items:start; overflow-x:auto; }
.fig { display:grid; grid-row:1/4; grid-template-rows:subgrid; gap:4px; }
.fig .l { font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600;
letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--muted); }
.fig .v { font-family:var(--f-num); font-weight:var(--num-wt); font-size:var(--fs-2xl);
color:var(--text); line-height:1.05; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.fig .n { font-family:var(--f-body); font-size:var(--fs-caps); color:var(--subtle-text); }
/* ── ROW LIST ── all three apps built this. Name, sub, value, selectable. */
.rows-list { display:flex; flex-direction:column; }
/* NO HORIZONTAL PADDING. A row's padding is its hit height, not an indent, and
15px of it on each side pushed the row's text 15px inboard of everything else
in the same container while the divider underneath still spanned the full
width. That is the whole fault: a rule wider than the text it sits under, and
an invoice number that did not line up with the figure above it. Vertical
padding stays, because that IS the target height. */
.rowitem { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) 0;
border-bottom:1px solid var(--line); cursor:pointer; text-align:left; width:100%;
transition:background var(--d-fast) var(--ease-hover); }
.rowitem:last-child { border-bottom:none; }
/* The fill bleeds back out to where the padding used to be, so a row still
reads as a band rather than a tight box around the words. */
.rowitem:hover { background:var(--hover); box-shadow:calc(var(--sp-3) * -1) 0 0 var(--hover),
var(--sp-3) 0 0 var(--hover); }
.rowitem .rl { flex:1; min-width:0; }
.rowitem .rl b { display:block; font-family:var(--f-body); font-size:var(--fs-md);
font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rowitem .rl small { display:block; font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600;
letter-spacing:.08em; text-transform:uppercase; color:var(--subtle-text); margin-top:3px; }
.rowitem .rv { font-family:var(--f-num-col); font-weight:var(--num-wt-col); font-size:var(--fs-sm);
color:var(--text); font-variant-numeric:tabular-nums; flex-shrink:0; }
/* ── TABLE ROW ACTIONS ── a fixed grid so the icons line up down the column
whatever each row can actually do. A flex row wanders and looks broken. */
.acts { display:grid; grid-auto-flow:column; gap:2px; justify-content:end; }
.act { width:28px; height:28px; border-radius:calc(var(--r-xs)*.8); display:grid; place-items:center;
color:var(--subtle-text); transition:color var(--d-fast) var(--ease-hover), background var(--d-fast) var(--ease-hover); }
/* ── the touch floor for row actions ──────────────────────────────────────
28px is right beside a mouse and a miss under a thumb, and a table cell can
hold six of them. THIS BLOCK HAS TO SIT AFTER `.act`, not with the rest of
the coarse-pointer floor near the top of the sheet: at equal specificity the
later rule wins, so the one up there computed 28px anyway and measured as
though nothing had been fixed. Found 27-08-2026 against Knox Artiste
Accounts at 375px. The strip gives the width back by closing its own gap. */
@media (pointer: coarse) {
.act { width:40px; height:40px; }
.acts { gap:0; }}
.act:hover { color:var(--text); background:var(--hover); }
.act svg { width:14px; height:14px; }
.act.attn:hover { color:var(--danger-text); background:color-mix(in srgb, var(--danger) 12%, transparent); }
.act-gap { width:28px; }
/* ── NOTIFICATIONS ── KAA has one, Pulse builds it five times. */
.bell { position:relative; width:36px; height:36px; border-radius:var(--r-pill); display:grid;
place-items:center; color:var(--muted); cursor:pointer;
transition:color var(--d-fast) var(--ease-hover), background var(--d-fast) var(--ease-hover); }
.bell:hover { color:var(--text); background:var(--hover); }
.bell svg { width:17px; height:17px; }
.bell .n { position:absolute; top:3px; right:3px; min-width:15px; height:15px; padding:0 4px;
border-radius:var(--r-pill); background:var(--danger); color:var(--on-accent); font-family:var(--f-num);
font-weight:var(--num-wt); font-size:calc(var(--fs-caps) * .82); line-height:15px; text-align:center;
font-variant-numeric:tabular-nums; box-shadow:0 0 0 2px var(--surface); }
.bell.quiet .n { display:none; }
.nlist { display:flex; flex-direction:column; gap:var(--sp-3); }
.nitem { padding:var(--sp-4); border-radius:var(--r-xs); background:var(--surface-deep);
box-shadow:inset 3px 0 0 var(--nsev, var(--line-strong)); }
.nitem.urgent { --nsev:var(--danger); } .nitem.attention { --nsev:var(--warning); }
.nitem.info { --nsev:var(--info); }
.nitem .nsev { font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600;
letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--nsev, var(--muted)); }
.nitem b { display:block; font-family:var(--f-body); font-size:var(--fs-md); font-weight:600;
color:var(--text); margin-top:5px; }
.nitem p { font-size:var(--fs-sm); color:var(--muted); margin-top:4px; }
.nitem .nact { display:flex; gap:var(--sp-2); justify-content:flex-end; margin-top:var(--sp-3); }
/* Handled items stay visible and recede. Removing them destroys the audit trail. */
.nitem.was { opacity:.55; box-shadow:inset 3px 0 0 var(--line-strong); }
.nitem.was .nact { display:none; }
/* ── COLLAPSIBLE TABLE GROUP ── a tbody that opens and closes. */
.t6 tbody.mgroup > tr.mhead td { background:var(--surface-deep); cursor:pointer;
font-family:var(--f-ui); font-size:var(--fs-caps); font-weight:600; letter-spacing:var(--ls-caps);
text-transform:uppercase; color:var(--muted); }
.t6 tbody.mgroup > tr.mhead td .mchev { display:inline-block; width:9px; height:9px; margin-right:8px;
transition:transform var(--d-base) var(--ease-spring); }
.t6 tbody.mgroup.open > tr.mhead td .mchev { transform:rotate(90deg); }
/* Rows collapse by SHRINKING, never display:none: the height animates and the
DOM stays intact for the audit trail. V6 law, from the Accounts accordion. */
.t6 tbody.mgroup > tr:not(.mhead) td { transition:padding calc(240ms * var(--dur)) var(--ease-entrance),
opacity calc(160ms * var(--dur)) ease, line-height calc(240ms * var(--dur)) var(--ease-entrance); }
.t6 tbody.mgroup:not(.open) > tr:not(.mhead) td { padding-top:0; padding-bottom:0;
border-bottom-width:0; font-size:0; line-height:0; opacity:0; }
.t6 tbody.mgroup:not(.open) > tr:not(.mhead) td > * { display:none; }
.t6 tbody.mgroup:not(.open) > tr:not(.mhead) { pointer-events:none; }
/* ── PROMPT COMPOSER ──
REPLACED IN V6 by the console instrument (section: The console). The flat
glass card is gone; the class name .composer survives on the new build so
app markup survives. The new rules live in the V6 layer further down. */
/* A chip that opens a value list. It shows what is SET; the setting's name is on
hover. The value takes the accent, because it is the thing that changed. The
chevron sits in a fixed slot so the label is not shunted off centre by it. */
.pchip { display:inline-flex; align-items:center; gap:9px; height:var(--ctrl-h); font-family:var(--f-ctrl); /* carries its OWN height as of V6: it once took it from .composer .cbot > * and rendered half size anywhere else */
font-size:var(--fs-caps); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
/* --accent-text is accent TYPE on a surface, for a link or an accent figure.
It was never a control label colour, and using it here is why the model and
ratio keys read light red on this system and light blue on Royal Onyx. A key
label is --text, the same as every other key on the bar. */
line-height:1; color:var(--text); background:var(--ctrl); border-radius:var(--bar-r);
padding:0 12px 0 14px; cursor:pointer; box-shadow:var(--e1); white-space:nowrap;
transition:background var(--d-fast) var(--ease-hover), color var(--d-fast) var(--ease-hover); }
.pchip:hover { background:var(--ctrl-hi); color:var(--text); }
.pchip svg { width:9px; height:9px; color:var(--subtle); flex-shrink:0;
transition:transform var(--d-base) var(--ease-spring); }
.pchip.open svg { transform:rotate(180deg); }
/* A panel the composer docks into, for the demo and for any app that wants one. */
.sidepanel { display:flex; flex-direction:column; height:100%; min-height:0;
background:var(--grad-ground); border-left:1px solid var(--line); }
.sidepanel .sp-head { flex-shrink:0; padding:var(--sp-4);
border-bottom:1px solid var(--line); display:flex; align-items:center; gap:var(--sp-3); }
.sidepanel .sp-head b { flex:1; font-family:var(--f-head); font-size:var(--fs-md); font-weight:400;
text-transform:uppercase; letter-spacing:var(--ls-head); }
.sidepanel .sp-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
scrollbar-gutter:stable; padding:var(--sp-4); }
/* ── SPEND METER ── any metered app needs the balance where it can be seen. */
.spend { display:flex; align-items:center; gap:var(--sp-3); white-space:nowrap; }
.spend .m { width:96px; height:6px; border-radius:99px; background:var(--surface-deep);
box-shadow:var(--e-sunk); overflow:hidden; }
.spend .m > i { display:block; height:100%; border-radius:99px; background:var(--accent-lit); }
.spend .v { font-family:var(--f-num-col); font-weight:var(--num-wt-col); font-size:var(--fs-sm);
color:var(--text); font-variant-numeric:tabular-nums; }
.spend .v small { font-family:var(--f-ui); font-weight:600; font-size:var(--fs-caps);
letter-spacing:.08em; text-transform:uppercase; color:var(--subtle-text); margin-left:5px; }
/* ── MODAL VARIANTS ──
A modal that scrolls needs its own architecture: a head that stays, a body
that scrolls and does not chain to the page, and a gutter so the rounded
corner does not clip the scrollbar. */
.modal.tall { display:flex; flex-direction:column; max-height:min(78vh, 720px); padding:0; }
/* THE HEAD AND FOOT RESERVE THE SAME SCROLLBAR GUTTER AS THE BODY.
The body is the only part that scrolls, so it was the only part reserving a
gutter, and every right edge inside it therefore sat 10px inboard of the head
and the foot. That is why the status read further right than the figures and
the amounts below it: not a padding mistake, a gutter only one of the three
was paying for.
scrollbar-gutter applies to any scroll container, and overflow:hidden makes
one, so hidden plus stable reserves EXACTLY what the body reserves, in
whatever browser, with no hardcoded scrollbar width to drift. Measured: a
200px box gives 190px of content under both overflow:hidden and overflow:auto
with stable, and 200px without. */
/* STRUCTURE BELONGS TO EVERY MODAL WITH A HEAD. SCROLLING BELONGS TO .tall.
These were one block scoped to .modal.tall, so a plain confirm dialog
written as head/body/foot got no padding on the body and no alignment on
the foot, and the only way to fix it was to add a class whose name says
the dialog is tall when it is not. The two concerns are now separate and
.tall means one thing: the body scrolls. */
.modal:has(> .m-head) { padding:0; }
.modal .m-head { flex-shrink:0; padding:var(--sp-5) var(--sp-5) var(--sp-4);
border-bottom:1px solid var(--line); display:flex; align-items:center;
gap:var(--sp-3); }
.modal .m-head h3 { margin:0; flex:1; min-width:0; font-size:var(--fs-md);
text-wrap:balance; overflow-wrap:anywhere; }
.modal .m-head .status { flex-shrink:0; }
.modal .m-body { padding:var(--sp-5); }
/* THE HEAD AND FOOT RESERVE THE SAME GUTTER THE BODY DOES, and only when
the body actually scrolls. overflow:hidden makes a scroll container, so
hidden plus stable reserves exactly what auto plus stable reserves, with
no hardcoded scrollbar width to drift. Without this the status in the
head read 10px further right than the figures below it. */
.modal.tall .m-head, .modal.tall .m-foot { overflow:hidden; scrollbar-gutter:stable; }
.modal.tall .m-body { flex:1; overflow-y:auto; overscroll-behavior:contain;
scrollbar-gutter:stable; }
.modal .m-foot { flex-shrink:0; padding:var(--sp-4) var(--sp-5);
border-top:1px solid var(--line); display:flex; align-items:center;
justify-content:flex-end; gap:var(--sp-2); }
.m-back { width:28px; height:28px; border-radius:calc(var(--r-xs)*.8); display:grid;
place-items:center; color:var(--subtle-text); flex-shrink:0; }
.m-back:hover { color:var(--text); background:var(--hover); }
.m-back svg { width:14px; height:14px; }
/* A destructive confirm names the thing and asks twice. Colour is never the
only signal here, because the status hue sits close to the brand accent. */
/* The stripe is an inset shadow on a square head sitting inside a 20px
radius, so it ran straight across the curve instead of following it. */
.modal.destructive .m-head { box-shadow:inset 0 3px 0 var(--danger);
border-top-left-radius:var(--r-lg); border-top-right-radius:var(--r-lg); }
.confirm-name { font-family:var(--f-num); font-weight:var(--num-wt); color:var(--text);
background:var(--surface-deep); border-radius:calc(var(--r-xs)*.7); padding:2px 7px; }
.btn-danger { background:none; border-color:var(--danger); color:var(--danger-text); }
.btn-danger:hover { background:color-mix(in srgb, var(--danger) 14%, transparent); }
.btn-danger.armed { background:var(--danger); color:var(--on-accent); border-color:transparent; }
.btn-danger:active { transform:scale(.98); transition-duration:calc(70ms * var(--dur)); box-shadow:var(--e-sunk); }
/* ═══ V6 · WHAT V5 WAS MISSING ═════════════════════════════════════════════
Added 27-08-2026 from three weeks of applying V5 to Darkroom, Knox Artiste
Accounts and Pulse. Four laws, measured on real failures:
1 · If the system ships it, the app calls it. An app layer is 400 lines or
less, and nothing in it sets padding, height or font-size on a control.
2 · No load-bearing rule is scoped to a demo wrapper or to one parent.
Every surface, scrim and finish below is global, and every component
carries its own height.
3 · Keyboard keys render as symbols: ⌘K, ⇧⏎, ⌥drag. One keycap component.
4 · State classes and required elements are part of each component's
contract, documented beside its markup. */
/* ── THE INSTRUMENT ── the four-layer physics, named, so any hero component
can use the recipe: ground (lit from the top left, falls away), bezel (1px
masked ring, light catches the top edge), grain (fractal tile at 120px),
rest shadow (--e-rest: it sits above the canvas, it does not float off it). */
/* A DATA CELL NEVER WRAPS MID-VALUE. An invoice id, a date, a name or a money
figure reads as one unit or not at all; when the table is wider than its box,
the .t6-wrap/.scrollx wrapper scrolls instead. DD-MM-YYYY in every data
field is a law on this page — a date split across lines breaks it. */
.t6 th, .t6 td { white-space:nowrap; }
.instrument { position:relative; isolation:isolate; border-radius:var(--r-lg);
background:var(--grad-ground); box-shadow:var(--e-rest); }
.instrument::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
pointer-events:none; z-index:3; background:var(--edge-ring);
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite:exclude; }
.instrument::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
background-image:var(--noise); background-size:120px; opacity:calc(.045 * var(--noise-o)); mix-blend-mode:overlay; }
[data-theme="light"] .instrument::after { opacity:.03; mix-blend-mode:multiply; }
/* ═══ THE CONSOLE ═══ the prompt instrument, replacing V5's flat composer.
Ported from the original Darkroom creation bar, re-seeded to the locked
studio accent. The class name .composer survives so app markup survives.
CONTRACT · the root carries data-mode="stills" or "video". Row keys are