/* Light-only structural base — the vocabulary every cluster maps onto.
═════════════════════════════════════════════════════════════════════════════════════════════
WHY THIS FILE EXISTS
The other seven files in this directory are per-cluster and fix per-cluster problems. This one
holds what is true across all of them: the shared shapes of a Stripe-grade light UI, so that
seven files (and any future eighth) are not each inventing a badge, a chip and a row height.
It loads BEFORE the cluster files, so a cluster can still override deliberately. It loads AFTER
app.css, so it can consume every token declared there.
WHY IT IS STRUCTURE AND NOT JUST COLOUR
Light is no longer a re-skin of dark; it is a different design on the same DOM. Dark builds depth
with tint over near-black and carries state in coloured text and glow. Light builds depth with
occlusion — an off-white canvas, white surfaces, a 1px keyline — and carries state in a filled
badge with a shape-distinct icon. Those are different MECHANISMS, and a mechanism is expressed in
geometry and spacing, not only in hex values.
Every rule here is prefixed html[data-theme="light"], so dark cannot match by construction. That
is what makes a second visual system safe to author: `compare.mjs` proves, declaration by
declaration, that dark did not move.
THE COST, STATED HONESTLY: this is a second layout system to maintain. A new page now needs a
light structural pass, not merely tokens that resolve. That is the deliberate trade.
RULES FOR ANYONE EDITING THIS FILE
- No !important. `html[data-theme="light"] .foo` is (0,2,0) and already beats a page's (0,1,0).
Against a two-class page selector, add a class or an element to stay ahead.
- No colour literals. Every colour is a token from app.css, or it does not belong here.
- Nothing that should be true in BOTH themes. That goes in the page sheet or app.css.
═════════════════════════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
/* ── Density and control geometry MOVED to public/app.css, 2026-08-12, and deleted here.
`--row-h-compact/--row-h/--row-h-comfy/--row-h-coarse/--row-pad-x/--row-gap-coarse/--ctl-h/
--ctl-h-lg` are LENGTHS, and a length declared in a theme file forks the two themes by
construction. They already did: `src/lib/listLedgerStyle.ts` reads `var(--row-h-comfy, 48px)`
and `var(--row-pad-x, 16px)` with fallbacks written precisely because these were undefined in
dark. The values are transcribed unchanged, so light resolves exactly as before. See
§ THE TOUCH LAYER — GEOMETRY, BOTH THEMES at the end of app.css. */
/* --ctl-pad-x stays: tighter than dark, because a control in a dense light data view is a
rectangle with a hairline, not a soft capsule. --r-control is already 4px in light. */
--ctl-pad-x: 12px;
/* ── THERE WERE TWO CANVASES, AND THE ONE YOU SEE IS NOT THE ONE THE TOKENS NAME ──────────
MEASURED 2026-08-12, /vehicles, light:
body background-color rgb(246,248,250) (= --ground)
.glow-field background-color rgb(227,232,238) (= --canvas)
`.glow-field` (BackgroundGlow.vue) is `position: fixed; inset: 0` and, in light, fully
OPAQUE — the orbs are `display: none` and the gradient is replaced by a flat `var(--canvas)`.
So it covers the viewport edge to edge and `--ground` is never seen anywhere in the app. Two
tokens claimed the page ground; only one of them was ever painted.
Dark has never had this problem, and says so in a comment beside app.css's own
`--canvas: #050309`, which reads "= --ground". (Not quoted verbatim here: a nested comment
terminator inside this block closes it early, the next 20 lines parse as one invalid
declaration, and the `--ground` line below is swallowed with them. That is exactly what
happened on the first attempt at this fix — css-parse-check.mjs PASSED, because the selector
count was untouched; only a probe of the resolved value caught it.)
The invariant is that they are THE SAME COLOUR. Light broke it by deriving --ground/--ground-deep
mechanically from dark's gradient pair while --canvas was re-derived from Stripe's scale.
Resolved in favour of --canvas, which is the value actually on screen, the value the two
signed-off pages (Work Queue, Telefon/Ekonomi) were designed and accepted against, and the
one --surface-inset / --tile-fill are stepped off. --ground becomes an alias of it rather
than a second opinion, so body and canvas can no longer disagree.
DELIBERATELY NOT DONE HERE: changing the VALUE. `--canvas: #e3e8ee` really does read blue-grey
on a register, where no white surface is present to be lighter than it (see /vehicles at
tablet). Moving it to a near-white also collapses `--surface-inset: #f3f6f8` (−3) and
`--tile-fill: #f7fafc` (+1) into the canvas, i.e. it is a re-derivation of the whole ramp and
a re-verification of two signed-off pages. That is a design call, not a defect fix.
ALSO NOT FIXED, NOT OURS: index.html's inline pre-paint script carries a THIRD literal,
`GROUND = { light: '#f0eff5' }`, feeding and the Android splash.
It is stale — no token has held #f0eff5 since WP-4. */
--ground: var(--canvas);
--ground-deep: var(--canvas);
/* ── The eyebrow: 11px, uppercase, tracked, muted. This is what replaces a coloured section
heading. Colour as a section label is a dark-theme device — on white it reads as a
highlighter mark, and it spends the accent budget on something that is not an action. ─── */
--eyebrow-size: 0.6875rem;
--eyebrow-track: 0.06em;
/* ── The page measure. ONE number for every page's centred column. ────────────────────────
The app had three: 1560 on the registers and the Work Queue console (registers.css raised
them there, and 1560 is the width the user has actually looked at and signed off), 1240 from
app.css's --measure on the boards, and 1180 hard-coded into SettingsDesktop.css. Walking
/vehicles -> /settings slid the page's left edge 190px, which reads as the shell moving
rather than the content changing.
It is NOT a light override of --measure itself: app.css's --measure is also the width of a
wide modal (modalShellStyle.ts:87, .ibx-sheet, .rtx-add, .vsx-sheet), and a 1560px dialog on
a 1900px monitor is a full-bleed sheet, not a dialog. A page measure and a dialog measure are
two different decisions that happened to share a token. This one names only the page. ───── */
/* --page-measure MOVED to public/app.css, 2026-08-11, and deleted here.
The reasoning above is right and stays; the only thing wrong with it was the FILE. A length
declared in a theme file forks the two themes by construction — it is why /customers measured
170/1560 in light and 402/1096 in dark, and why five other pages sat 320-464px apart. It is
now one value in app.css for both themes. */
}
/* ═══════════════════════════════════════════════════════════════════════════════════════════════
1. STATUS BADGES — fill + tint border + dark ink + a MANDATORY shape-distinct icon
═══════════════════════════════════════════════════════════════════════════════════════════════
Contrast passes and colour vision fails. All four pairs clear AA at 6.37-9.45:1, but under
deuteranopia success and danger collapse — fills at dE 0.027 and TEXT at dE 0.040. Two olives.
In a male-dominated trade that is roughly 1 in 12 mechanics who cannot tell betald from avvisad.
So the icon is not decoration, it is the second carrier, and it is mandatory. It must be
SHAPE-distinct (check / cross / bang / dot) — four coloured dots would reintroduce the exact
failure it exists to prevent.
It is a ::before rather than markup for three reasons: it needs no change to 240 call sites, it
cannot appear in dark, and generated content is not in the accessibility tree, so the word keeps
sole ownership of the accessible name without an aria-hidden attribute anywhere.
The fills sit at 1.03-1.15:1 against the canvas ON PURPOSE. A badge has no edge, only ink; the
tint border is what gives it a boundary. Do not raise the fill to "make it visible". */
html[data-theme="light"] .badge,
html[data-theme="light"] .status-badge,
html[data-theme="light"] .st-badge {
display: inline-flex;
align-items: center;
gap: 4px;
border-radius: 4px; /* a rectangle, not a pill */
padding: 2px 6px;
font-size: 0.6875rem;
font-weight: var(--fw-label);
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
border: 1px solid transparent;
background: var(--surface-inset);
color: var(--ink-dim);
border-color: var(--keyline);
/* app.css:627 gives every badge `inset 0 1px 0 rgba(255,255,255,.1)` and a light-only block
further down that file used to raise it to 0.6 — a lit top edge, which §"GRADIENT AND GLOW
HYGIENE" below lists as "-> nothing". The stale light block is deleted; this reset is what
stops dark's 10% white inset from surviving into light, and it has to be NAMED here because a
superseding rule at equal specificity only overrides the properties it actually writes. */
box-shadow: none;
}
/* ── THE PAGE EYEBROW IS A LABEL, NOT A STATUS ────────────────────────────────────────────────
A bare `.badge` in this app is the page eyebrow and essentially nothing else: 20-odd page views
render `{{ t('…_badge') }}` above the h1, and a grep of the source
finds no dynamic `.badge` class binding anywhere — the only bare-badge uses that are NOT an
eyebrow are `.badge.sent` on the invoice draft (a real status, restyled at (0,4,0) in money.css
and therefore untouched by this rule) and the product stamp on the two public screens, restored
immediately below.
The treatment is the one the /vehicles author already reasoned out and then scoped to their own
wrapper: "It is a label, not a status, so it loses the fill." Promoted here so the eyebrow reads
the same on all six pages instead of five different ways. The per-page copies — the `.vx-header
.badge` block in registers.css and the `.cx-eyebrow` fill in boards.css — are deleted.
`display: inline-block` is load-bearing, not cosmetic: `::first-letter` needs a block container,
and the shared rule above sets `inline-flex`. The case has to come from CSS because the strings
are capitals in the DATA (localization.ts: 'VEHICLES', 'INLÄMNINGAR', 'ARBETSKÖ'), which
`text-transform: none` cannot touch. */
html[data-theme="light"] .badge {
display: inline-block;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: var(--ink-muted);
font-size: var(--eyebrow-size);
letter-spacing: 0;
text-transform: lowercase;
}
html[data-theme="light"] .badge::first-letter {
text-transform: uppercase;
}
/* The exception, and it is the only one. `/login` and the pre-login hero render "PROMETHEUS AI
v1.0" in a `.badge` — a product stamp on a marketing surface, not a page eyebrow, and it is not
sitting above an h1 it would be labelling. It keeps the neutral chip the shared rule gives every
other badge. Sentence-casing a version string would also mangle it ("Prometheus ai v1.0"). */
html[data-theme="light"] .login-wrapper .badge,
html[data-theme="light"] .hero .badge {
display: inline-flex;
padding: 2px 6px;
border: 1px solid var(--keyline);
border-radius: 4px;
background: var(--surface-inset);
color: var(--ink-dim);
text-transform: none;
}
/* The glyph is attached ONLY to badges that carry a status class — never to a bare `.badge`.
A bare `.badge` in this app is often a plain label chip (the page eyebrow uses one), and giving
every one of them a leading dot puts a bullet in front of words that are not statuses. Caught on
the first Work Queue screenshot: the page title chip rendered as "• ARBETSKÖ".
The neutral/info dot therefore belongs to an explicit neutral class, not to the base selector. */
html[data-theme="light"] .badge.is-neutral::before,
html[data-theme="light"] .badge.neutral::before,
html[data-theme="light"] .badge.info::before,
html[data-theme="light"] .status-badge.is-neutral::before,
html[data-theme="light"] .st-badge.is-neutral::before {
content: "•";
font-size: 1em;
line-height: 1;
}
html[data-theme="light"] .badge.is-ok::before,
html[data-theme="light"] .badge.ok::before,
html[data-theme="light"] .badge.success::before,
html[data-theme="light"] .badge.is-bad::before,
html[data-theme="light"] .badge.bad::before,
html[data-theme="light"] .badge.danger::before,
html[data-theme="light"] .badge.overdue::before,
html[data-theme="light"] .badge.is-warn::before,
html[data-theme="light"] .badge.warn::before,
html[data-theme="light"] .badge.pending::before {
font-size: 1em;
line-height: 1;
}
/* The glyphs land at ~10-12px inside an 11px badge. Below that they are a smudge, which is why the
badge type floor is 11px and not 10px. */
html[data-theme="light"] .badge.is-ok::before,
html[data-theme="light"] .badge.ok::before,
html[data-theme="light"] .badge.success::before { content: "✓"; }
html[data-theme="light"] .badge.is-bad::before,
html[data-theme="light"] .badge.bad::before,
html[data-theme="light"] .badge.danger::before,
html[data-theme="light"] .badge.overdue::before { content: "✕"; }
html[data-theme="light"] .badge.is-warn::before,
html[data-theme="light"] .badge.warn::before,
html[data-theme="light"] .badge.pending::before { content: "!"; }
/* ═══════════════════════════════════════════════════════════════════════════════════════════════
2. CHIPS AND TABS — rectangles and underlines, not capsules
═══════════════════════════════════════════════════════════════════════════════════════════════
--r-pill is for TRUE pills only. A filter chip in a dense board is a rectangle: capsules read as
consumer-app, they waste horizontal room at the ends, and a row of nine of them is a row of nine
lozenges rather than a control bar.
An active tab is an underline, not a filled capsule. The underline is the strongest available
"you are here" that spends no fill and no accent area. */
html[data-theme="light"] .chip,
html[data-theme="light"] .fc-chip,
html[data-theme="light"] .wq-pill,
html[data-theme="light"] .cx-chip,
html[data-theme="light"] .rt-chip,
html[data-theme="light"] .do-chip,
html[data-theme="light"] .dt-chip,
html[data-theme="light"] .dp-chip,
html[data-theme="light"] .vs-chip-btn {
border-radius: var(--r-control);
min-height: var(--ctl-h);
padding: 0 var(--ctl-pad-x);
font-size: 0.8125rem;
font-weight: var(--fw-label);
background: var(--surface);
border: 1px solid var(--keyline-strong);
color: var(--ink-dim);
}
/* ⚠ THE SELECTED CHIP HAD FOUR RECIPES AND LOAD ORDER WAS THE ONLY ARBITER — resolved 2026-08-12.
The four, all at (0,3,1)ish, all matching overlapping sets of the same eight classes:
A _base.css, HERE --surface-inset fill + --accent border, no bar TINT ALONE
B _base.css § the buttons --surface + a firmer ring, no fill, no bar EDGE ALONE
C boards.css § 1 --surface-selected wash + --accent-hairline
+ `inset 3px 0 0 --accent-bar` THE HOUSE IDIOM
D settings.css § 5 --accent-solid FILL + --text-on-accent A FILL
C is the rulebook: selection is a quiet wash PLUS a 3px leading bar, never a fill, and never a
tint on its own — the bar is what carries the state through glare and through CVD, and it does
not multiply into a lavender field when nine chips are on screen. A and B were therefore both
DEAD-ish and both LIVE-ish depending on the class: boards.css loads after _base.css, so C won
every selector the two share, while `.chip.on` (named only here) kept A, `button.pb-chip.on`
(0,3,2 — one extra element) outranked C and kept B, and settings.css loads LAST so D won
`.pt-chip.on` and both `*-sort-btn.on`. One control, four selection idioms, decided by
`index.html`. That is why `_base`'s stated rule "a chip is never a fill" read as dead.
FIXED BY REMOVING THE LOSERS, NOT BY OUT-SPECIFYING THEM. Every selector this block shared with
boards.css § 1 is deleted from here, so each class is now declared in exactly ONE place. Only
`.chip.on` — the generic name, which boards.css does not carry — stays, restated in C's terms so
the base vocabulary and the cluster agree by value rather than by cascade.
NOT OURS, REPORTED: boards.css § 1 is C and is correct — left untouched. */
html[data-theme="light"] .chip.on {
color: var(--text);
background: var(--surface-selected);
border-color: var(--accent-hairline);
box-shadow: inset 3px 0 0 var(--accent-bar);
}
/* ═══════════════════════════════════════════════════════════════════════════════════════════════
3. THE WRAPPER PANEL — deleted
═══════════════════════════════════════════════════════════════════════════════════════════════
A page-level rounded card floating on a ground is the single most consumer-app thing left in the
layout. Stripe, Linear and Carbon all run content full-bleed and separate it with keylines and a
header rule instead — the chrome disappears and the data is the page.
Only the OUTER container is flattened. Cards inside it keep their surface, because now they are
the only card on screen and they mean something again. */
html[data-theme="light"] .page-panel,
html[data-theme="light"] .glass-panel.page-shell,
html[data-theme="light"] .app-shell > .panel {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
padding-left: 0;
padding-right: 0;
}
/* ═══════════════════════════════════════════════════════════════════════════════════════════════
4. EMPTY STATES — a line, not a hero
═══════════════════════════════════════════════════════════════════════════════════════════════
A centred block of large muted type in the middle of a pane is a marketing device. In an ops tool
an empty state is a fact, stated where the data would have been. */
html[data-theme="light"] .state-msg {
text-align: left;
font-size: 0.8125rem;
font-weight: var(--fw-body);
color: var(--ink-muted);
padding: 16px var(--row-pad-x);
}
/* ═══════════════════════════════════════════════════════════════════════════════════════════════
5. FIGURES — tabular everywhere a number can be compared down a column
═══════════════════════════════════════════════════════════════════════════════════════════════
Scoped to money/time/count, not global: proportional figures are better in prose, and tnum in a
sentence looks like a ransom note. */
html[data-theme="light"] .fig,
html[data-theme="light"] .money,
html[data-theme="light"] .amount,
html[data-theme="light"] .num {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* ═══════════════════════════════════════════════════════════════════════════════════════════════
PROMOTED FROM THE WORK QUEUE PROTOTYPE — the recipes every cluster maps onto
═══════════════════════════════════════════════════════════════════════════════════════════════
Work Queue was built end-to-end first and signed off as the target. Everything below is the part
of it that is NOT specific to that page, lifted here so six cluster files cannot each invent a
badge. That has already happened once in this codebase: `.purple-gradient` is violet in six page
sheets and emerald in a seventh, and nobody caught it because there was no single declaration to
diff against.
HOW A CLUSTER FILE USES THIS
1. Anything below with a GENERIC selector (element selectors, shared class names) already applies
to your pages. Do not restate it.
2. Anything that needs a page's own class name is a RECIPE — the comment says what to write. Add
your selectors in YOUR cluster file, pointing at the same tokens. Never invent a value.
3. If a page needs a shape this file has no recipe for, escalate. Do not improvise a literal.
═══════════════════════════════════════════════════════════════════════════════════════════════ */
/* ── FORM SURFACES — app-wide, generic, already done for every cluster ────────────────────────
The single highest-value rule in the light theme, and it needs no per-page mapping because it
keys on elements rather than classes.
A grey fill on a white card is the universal signal for read-only, so a form of grey inputs reads
as a form you cannot fill in. In dark the identical declaration is a LIFT — lighter than its
surround — which is the inversion this whole rebuild exists to catch: one value meaning "raised"
on one ground and "disabled" on the other.
White fill, structural keyline, inset micro-shadow so the field still has a floor. Focus darkens
the border and adds a 2px halo rather than glowing: a glow on white is a smudge. */
/* `input:not([type])` and `input[type="url"]` were BOTH missing from this list, and the omission is
app-wide rather than a settings quirk: a typeless `` does not match `input[type="text"]`,
so any bare or url field in any cluster silently misses the light field treatment. On the settings
sheet that produced a self-contradiction on one card — a number field rendering white and
fillable, and the review-link field beside it staying transparent inside a grey wrapper, i.e.
reading as read-only, which is the exact inversion this whole rule exists to kill. */
html[data-theme="light"] input:not([type]),
html[data-theme="light"] input[type="url"],
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="tel"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="time"],
html[data-theme="light"] textarea,
html[data-theme="light"] select {
background: var(--surface);
border: 1px solid var(--keyline);
border-radius: var(--r-control);
box-shadow: var(--field-floor);
color: var(--ink);
}
html[data-theme="light"] input:hover:not(:disabled):not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] textarea:hover:not(:disabled),
html[data-theme="light"] select:hover:not(:disabled) {
border-color: var(--keyline-strong);
}
html[data-theme="light"] input:focus-visible:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] textarea:focus-visible,
html[data-theme="light"] select:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--field-ring);
}
/* Grey no longer means "read-only" by default, so a field that IS disabled has to say so. */
html[data-theme="light"] input:disabled,
html[data-theme="light"] textarea:disabled,
html[data-theme="light"] select:disabled {
background: var(--surface-inset);
color: var(--ink-muted);
box-shadow: none;
}
/* ── THE GRADIENT HEADING — shared vocabulary, so it lives here ───────────────────────────────
`.purple-gradient` is declared independently by ~14 page sheets across every cluster. A bare rule
for it in ONE cluster file is exactly the drift that already made this class violet in six sheets
and emerald in a seventh, with nothing to diff against.
In light the two stops resolve to #7c3aed → #6d28d9: a heavy pigment bar across the top of a
white page. The heading is the most important text on its page, so it takes the ink that says so.
`-webkit-text-fill-color` is the load-bearing line. It beats `color`, so setting `color` alone
leaves the clipped gradient rendering and the fix looks applied while changing nothing. */
html[data-theme="light"] .purple-gradient {
background: none;
-webkit-background-clip: border-box;
-webkit-text-fill-color: var(--ink);
color: var(--ink);
}
/* ── THE SHARED SEARCH BOX ────────────────────────────────────────────────────────────────────
`.list-search` is the search control on every register and board in the app. It was a grey capsule
with no edge — the same "read-only" signal the field rule above exists to kill, applied to the
control these pages are most often driven from.
Here rather than in a cluster file because it is shared vocabulary: a rule for it living in one
cluster is how a shared class drifts. */
html[data-theme="light"] .list-search {
background: var(--surface);
border: 1px solid var(--keyline);
border-radius: var(--r-card);
box-shadow: var(--field-floor);
}
html[data-theme="light"] .list-search:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--field-ring);
}
html[data-theme="light"] .list-search .ls-ic {
color: var(--ink-muted);
}
/* A FIELD INSIDE A FIELD — measured 2026-08-12, /vehicles at tablet, and visible in the render.
`.list-search` is a flex row of [icon, input, clear]. The rule above frames the row; `.list-search`
was ALSO listed in the bare-field treatment further down this file, and `.ls-input` — which
declares `background: none; border: none` in `listSearchStyle.ts` — matched `input:not([type])`
there too. Both won, so light painted a white ringed box, and then a second white ringed box
inside it. Before/after computed, light:
.list-search #fff + 1px ring + padding 4px 7px 2px -> #fff + 1px --keyline + 10px 13px
.ls-input #fff + 1px ring + padding 4px 7px 2px -> transparent, no ring, no padding
WHICH ONE YIELDS. The brief proposed the wrapper, by analogy with `.dlr-hours` in detail.css.
Measured against DARK, that is the wrong half here: dark paints the WRAPPER (padding 10px 13px,
border, fill) and leaves `.ls-input` transparent at padding 1px 2px. `.dlr-hours` is a wrapper
whose only content IS the input — nothing is orphaned when it yields. This one also holds the
magnifier and the clear button, and a wrapper that yields puts both of them OUTSIDE the field
they belong to, forking light's search box from dark's for no gain. So the INPUT yields, and the
two themes keep one structure: one framed capsule, icon and control inside it.
Removing `.list-search` from the field list below also lets `listSearchStyle.ts`'s shared
`padding: 10px 13px` resolve again, which is how the two themes come back to the same height. */
html[data-theme="light"] .list-search input.ls-input {
padding: 1px 2px;
background: none;
background-color: transparent;
box-shadow: none;
border: 0;
color: var(--ink);
font-size: 0.875rem;
}
html[data-theme="light"] .list-search input.ls-input:focus {
box-shadow: none;
outline: 0;
}
/* ── THE PACE / VERDICT RULE — the most transferable decision on the board ────────────────────
RECIPE. Applies wherever a page states a routine verdict on most of its rows: behind schedule,
days waiting, capacity used, stock low.
A colour that appears on nearly every row has stopped carrying information. Stripe's own stated
position is that restricting colour is an accessibility measure rather than a taste, so the
ORDINARY case goes neutral and the hue is kept for the case that is actually wrong:
ordinary / behind -> background --surface-inset, border --keyline-strong, ink --ink-dim
actually wrong -> --st-breach-soft / --st-breach-line / --st-breach
good news -> --st-logged-soft / --st-logged-line / --st-logged
There is also no good dark amber, and that is a fact about the hue: to clear 3:1 on a light track
an amber must be darkened, and a darkened yellow IS mustard. This supersedes the original brief's
"keep the amber" instruction, on the user's explicit later call after seeing it rendered. */
/* ── METERS AND PROGRESS BARS ─────────────────────────────────────────────────────────────────
RECIPE. Point every bar TRACK at --surface-inset with a --keyline border, and every FILL at the
--meter-* family. Never at the --st-* family: a bar owes 3:1 under SC 1.4.11, not the 4.5:1 that
text owes, so the status text tokens overshoot and render as olive-brown, bottle green and washed
pink when laid down as 6px of solid fill.
Kill gradient fills. A two-stop gradient reads as a lit bar on near-black and as a smear on white.
The tracks keep --r-pill and that is deliberate: on a 4-6px-tall bar a full round is the correct
terminal shape, and a 4px radius on a 4px-tall bar is a rectangle with damaged corners. The rule
is "no capsules for CONTROLS", not "no round anywhere". */
/* ── ONE PRIMARY PER PANE ─────────────────────────────────────────────────────────────────────
RECIPE. Two filled buttons on one surface is no primary. Find the terminal action — the one that
closes out the record — and leave it filled. Every other button on that surface becomes:
background --surface · border 1px --keyline-strong · color --ink-dim · --fw-label
hover: background --surface-inset · border-color --accent · color --accent
Scope it to the container, not to the shared button class: the same class elsewhere is genuinely
primary. A "link" that is really a