/* Light-only overrides — boards cluster. ───────────────────────────────────────────────────────────────────────────────────────────── WHY THIS FILE EXISTS, AND WHY IT IS NOT IN A PAGE STYLESHEET A light-only rule cannot live in a page sheet. usePageStyle confines those by CSS nesting when a page renders inside a pane, which compiles `html[data-theme="light"] .foo` into a DESCENDANT of the page scope — and the root element has no ancestors, so it can never match. Silently. One instance of that already shipped. It also cannot live in app.css while six agents are working, so the cluster gets its own file. HOW IT WINS These load after app.css but BEFORE the runtime-injected page sheets, so document order is not on their side. They win on SPECIFICITY: `html[data-theme="light"] .foo` is (0,2,0) against a page's (0,1,0). Against a two-class page selector, add one more class or an element to stay ahead. WHAT BELONGS HERE Only rules that must differ in light and whose dark value must not move. Every rule is prefixed `html[data-theme="light"]`, so dark cannot match by construction — which is what makes this file safe to write in parallel with the dark baseline frozen. WHAT DOES NOT BELONG HERE Anything that should be true in both themes; that goes in the page sheet. Anything needing a new token; that is escalated to the lead, who owns app.css. */ /* ═══════════════════════════════════════════════════════════════════════════════════════════════ 1. SELECTION — the pale-lavender chip, in nine dialects ═══════════════════════════════════════════════════════════════════════════════════════════════ Every board in this cluster composes its own "applied" state out of `rgba(--ch-violet-7c3aed, α)` at α .20–.30, which in dark is a violet glow over near-black and in light is 109,40,217 laid at a fifth strength over white — i.e. lavender emulsion. Five of them sit in the same control bar on /work-queue, which is what made that page read as a lavender field. One answer for all of them, and it is the rulebook's: `--surface-selected` (a deliberately quiet wash) plus the 3px `--accent-bar` leading edge that actually carries the state. The bar is the carrier — it survives glare, it survives colour-blindness, and it does not multiply into a field when nine of them are on screen. The wash only has to say "this one, not that one". These cannot be sheet edits: `--surface-selected` is α .16 in dark against these sites' .20–.30, so pointing the sheet at it would move dark. */ html[data-theme="light"] .fc-chip.on, html[data-theme="light"] .fc-sort-btn.on, html[data-theme="light"] .lx-tab.active, html[data-theme="light"] .rt-chip.active, html[data-theme="light"] .rt-cell.active, html[data-theme="light"] .rt-cell.due.active, html[data-theme="light"] .cx-chip.on, html[data-theme="light"] .wq-pill.on, html[data-theme="light"] .wq-seg-btn.on, html[data-theme="light"] .vs-tab.active, html[data-theme="light"] .vs-dens-btn.on, html[data-theme="light"] .vs-place-mini.on, html[data-theme="light"] .vs-eq-unit.on, html[data-theme="light"] .vs-chip-btn.on, html[data-theme="light"] .do-chip.on, html[data-theme="light"] .dt-chip.on, html[data-theme="light"] .dp-chip.on { color: var(--text); background: var(--surface-selected); border-color: var(--accent-hairline); box-shadow: inset 3px 0 0 var(--accent-bar); } /* The counts riding inside a selected chip follow its ink rather than carrying a second violet. */ html[data-theme="light"] .fc-chip.on i, html[data-theme="light"] .cx-chip.on > b, html[data-theme="light"] .rt-chip.active .rt-chip-n, html[data-theme="light"] .rt-seg button.active .rt-chip-n, html[data-theme="light"] .do-chip.on i, html[data-theme="light"] .dt-chip.on i, html[data-theme="light"] .cx-lane.on > b { color: var(--text-muted); background: none; } /* (`.vs-tab.active` is in that list because it was a SOLID accent gradient with a violet drop-shadow — a selected tab wearing the primary action's whole costume, louder than the "Checka in bil" beside it that is the page's actual primary.) */ /* The complaint clock's keys already carry a 3px status edge (fresh / watch / over) on the leading side, so they get the wash and an accent hairline instead of a second bar in the same place. */ html[data-theme="light"] .cx-key.on { background: var(--surface-selected); border-color: var(--accent-hairline); } html[data-theme="light"] .cx-key.on .cx-key-label { color: var(--text); } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ 2. THE LEDGER ROW — hover is not a selection ═══════════════════════════════════════════════════════════════════════════════════════════════ lib/listLedgerStyle is consumed by six boards, so its hover wash is the most-repeated violet in the app. In dark, `rgba(--ch-indigo-a78bfa, .06)` over near-black is a lift; in light the same channel is 124,58,237 and every row a cursor crosses tints lavender. The state tokens go DARKER, which is the direction light actually has. The leading edge stays accent — that is the one thing on a row allowed to be violet, and it is what tells hover from picked. */ /* ── ONE TONE FOR ROW HOVER, and one mechanism ──────────────────────────────────────────────── MEASURED: `.lx-row:hover` and `.bt-row:hover` came up rgb(228,230,235) (--surface-hover) while /settings' `.set-rail-item:hover` came up rgb(243,246,248) (--surface-inset). Two tones for one gesture, and the app has no way to tell a user that the difference means nothing. --surface-inset is the base file's own choice for `.lx-row:hover` (_base.css §rows) and it is the lighter, calmer step: on white, hover is an acknowledgement, not a selection, and 228 is close enough to --surface-selected to read as one. --surface-hover keeps its meaning on controls, where a press target genuinely does need the deeper step. `box-shadow: none` is the second half and it is NOT redundant. _base.css's `.lx-row:hover` re-declares `inset 0 -1px 0 --keyline` — correct under _base's idiom, where the divider IS the shadow and hover must not drop it. But boards.css:398 below switched `.lx-row` to a real `border-bottom`, and a rule at equal specificity only overrides the properties it NAMES, so this line's `background` won and _base's `box-shadow` survived underneath it: hovering a row drew the shadow divider ON TOP of the border and the rule thickened to 2px under the pointer. boards.css owns `.lx-row`'s boundary, so boards.css cancels the shadow. */ html[data-theme="light"] .lx-row:hover { background: var(--surface-inset); box-shadow: none; } /* The tablet drop-off board keeps its own row, same wash by copy. */ html[data-theme="light"] .dt-row-main:hover { background: var(--surface-inset); } html[data-theme="light"] .dt-row-main:focus-visible { background: var(--surface-active); } /* Same tone as `.lx-row` above — one gesture, one step. */ html[data-theme="light"] .cx-row:hover, html[data-theme="light"] .cx-row:active { background: var(--surface-inset); } /* Group hairlines: a rule that separates two groups is furniture, not an accent. */ /* FLAT, not a fade — corrected in the compliance sweep. A rule that dissolves into the ground exists because on near-black a hard hairline reads as a scratch; on white the fade is what looks like a rendering artefact, a line the renderer gave up on halfway across. (_base, GRADIENT HYGIENE.) */ html[data-theme="light"] .dt-group-head::after { background: var(--keyline); } html[data-theme="light"] .lx-row:focus-visible { background: var(--surface-active); } html[data-theme="light"] .lx-row.picked { background: var(--surface-selected); } /* Scrollbar furniture is not a state. */ html[data-theme="light"] .lx-list { scrollbar-color: var(--border-strong) transparent; } html[data-theme="light"] .lx-list::-webkit-scrollbar-thumb { background: var(--border-strong); } html[data-theme="light"] .lx-sheet.wq-pane { scrollbar-color: var(--border-strong) transparent; } html[data-theme="light"] .lx-sheet.wq-pane::-webkit-scrollbar-thumb { background: var(--border-strong); } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ 3. SECONDARY ACTIONS — violet does not mean "button" ═══════════════════════════════════════════════════════════════════════════════════════════════ "Logga arbete" is the most repeated control on /work-queue (one per live row) and it is painted from an indigo gradient. Its own stylesheet says, correctly, that every row action wears the SECONDARY look whatever it does — but secondary in this app is a surface and a hairline, not a quieter violet. Fifteen quiet violets still add up to a violet page. Sheet edits are unavailable: dark's gradient is the identity of that control on the dark board. */ html[data-theme="light"] .wq-rowact.go, html[data-theme="light"] .wq-rowact.claim, html[data-theme="light"] .rt-dueact.primary, html[data-theme="light"] .wqt-chip, html[data-theme="light"] .wq-act.reach, html[data-theme="light"] .wq-counter-open, html[data-theme="light"] .dt-preset, html[data-theme="light"] .dp-preset, html[data-theme="light"] .dt-more, html[data-theme="light"] .dp-more { color: var(--text); background: var(--surface-3); border-color: var(--border-default); box-shadow: none; } html[data-theme="light"] .wq-rowact.go:hover:not(:disabled), html[data-theme="light"] .wq-rowact.claim:hover:not(:disabled), html[data-theme="light"] .rt-dueact.primary:hover:not(:disabled), html[data-theme="light"] .wqt-chip:active:not(:disabled), html[data-theme="light"] .wq-act.reach:hover:not(:disabled), html[data-theme="light"] .wq-counter-open:hover, html[data-theme="light"] .dt-preset:hover:not(:disabled), html[data-theme="light"] .dt-more:hover { color: var(--text); background: var(--surface-3-hover); border-color: var(--border-strong); } /* The disclosure that opens the estimate correction: an open row is a state, and it was saying so in violet on a sheet that already has a violet primary at its foot. */ html[data-theme="light"] .wq-inlinetoggle:hover:not(:disabled), html[data-theme="light"] .wq-inlinetoggle[aria-expanded="true"] { color: var(--text); background: var(--surface-3-hover); border-color: var(--border-strong); } html[data-theme="light"] .wq-inlinetoggle .chev { color: var(--text-secondary); background: var(--well-a12); } html[data-theme="light"] .wq-history-row:hover { background: var(--surface-2-hover); border-color: var(--border-strong); } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ 4. DECORATIVE VIOLET — panels, notices, eyebrows, counts ═══════════════════════════════════════════════════════════════════════════════════════════════ None of these is an action, a focus, a selection or the logo, so none of them is allowed the accent. In dark each is a faint bloom on black; in light each is a lavender slab. */ /* The preview-mode notice — a full-measure lavender band across /complaints. It is a NOTICE, and the theme has a token for exactly that meaning. */ html[data-theme="light"] .cx-demo { color: var(--st-info); background: var(--st-info-soft); border-color: var(--st-info-line); } /* Storage: the "no stations yet" banner, the header count pill and the occupancy meter. Occupancy is not progress toward the shop's goal — a full shop is not a win — so the meter carries no accent. */ html[data-theme="light"] .vs-nostations { background: var(--surface-1); border-color: var(--border-default); } html[data-theme="light"] .vs-total { color: var(--text); background: var(--surface-3); border-color: var(--border-default); } html[data-theme="light"] .vs-hero-meter > i { background: var(--text-secondary); } /* A place's name is a group heading, not a state: "GARAGE 1" printed in accent violet, with an accent hairline running off it, repeated once per station down the board. */ html[data-theme="light"] .vs-group-head { color: var(--text-muted); } /* Flat, for the same reason as .dt-group-head::after above. */ html[data-theme="light"] .vs-group-head::after { background: var(--keyline); } html[data-theme="light"] .vs-places-label { color: var(--text-muted); } /* Routines: the year strip's month counts are a count, not a state, and they sat in accent chips above an axis that is already carrying two categorical season hues. */ html[data-theme="light"] .rt-strip-n b { color: var(--text-secondary); background: var(--well-a12); } /* "Due soon" is a STATUS. It was coded in the accent — which put the page's most repeated data value in the one colour reserved for the primary action, on a board where the primary action ("+ Ny rutin") is six inches away in the same violet. --st-info is the theme's own token for exactly this meaning: a notice, not a warning. Red still outranks it for overdue, so the ordering holds. */ html[data-theme="light"] .rt-row.soon .rt-row-when b { color: var(--st-info); } html[data-theme="light"] .rt-row.soon .rt-row-when em { color: var(--st-info); } html[data-theme="light"] .rt-cell.due b { color: var(--text); } /* Eyebrows over the drop-off quick-log pad: an uppercase caption is not an accent site. Both are painted with --astra-accent-soft, which in light is still the PRE-re-derivation #7c3aed — see the escalation note at the foot of this file. */ html[data-theme="light"] .dt-quick-eyebrow, html[data-theme="light"] .dp-quick-eyebrow { color: var(--text-muted); } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ ESCALATIONS — not fixable from this file, listed so they are not re-discovered ═══════════════════════════════════════════════════════════════════════════════════════════════ 1. `--astra-accent-soft` resolves to `#7c3aed` in the light block of app.css — the accent value that was retired this morning in favour of `#6c3cb8` (~30% less chroma). It is consumed as accent TEXT at roughly twenty sites in this cluster alone (.do-rowbtn:hover, .do-pacebtn-go, .do-arrival-state, .do-detail-customer.link, .do-penbtn, .do-infobtn, .do-daychip.own, .wq-pcfg-btn:hover, .wq-daychip.own, .vs-*, .rt-*, plus lib/errorPageStyle). Repointing that one declaration at `--accent-solid` fixes all of them at once and cannot move dark, where the token is `#a78bfa` and shared with --accent-bar/--focus-ring. Only the lead can make that edit. Its focus-ring and selection-bar uses have already been migrated to --focus-ring / --accent-bar in this cluster's sheets, which IS dark-identical. 2. `.btn-astra-glass` — the app's SECONDARY button — is an indigo gradient with indigo ink in light (app.css). It is the "Historik" button on /work-queue and the "Logga tid" on the drop-off tablet board, i.e. the loudest remaining violet on both. Per the accent rule a secondary is `--surface-3` + `--border-default` + `--text`. This is a shared component in app.css and an app-wide decision; diverging one page for it would be worse than leaving it. 3. `.badge` (the page eyebrow pill) is likewise a violet-tinted app.css component and reads as a lavender chip at the top of all five pages in this cluster. 4. `.rt-season.summer` / `.rt-strip-run.summer` are the routines board's CATEGORICAL season pair (winter cyan / summer violet), not accent misuse — but the summer half is indistinguishable from the accent in light. That is a --cat-* mapping decision, not a page decision (§10.6). */ /* ═══════════════════════════════════════════════════════════════════════════════════════════════ 5. STRUCTURE — the boards stop being a re-skin (light-only, 2026-08-10) ═══════════════════════════════════════════════════════════════════════════════════════════════ Everything above this line is a COLOUR correction: the same shapes, repainted. Everything below changes geometry — heights, radii, borders, type size, case, tracking — because the two themes carry the same information by different mechanisms, and a mechanism lives in shape. Dark builds a board out of tint over near-black: a coloured heading, a glowing dot, a filled capsule. Every one of those survives on near-black because a saturated pixel there is the only light source in its neighbourhood. On white the identical device is PIGMENT — an amber heading reads as a highlighter mark, a filled capsule reads as a consumer-app lozenge, and a row of nine of them reads as a toy. So light carries the same facts as: a bordered badge with a shape-distinct icon, an uppercase muted eyebrow, a rectangle, an underline, and a 1px keyline. All of it composes with _base.css rather than restating it: the badge recipe, the density tokens and the eyebrow tokens are declared there, and this file only extends their selector lists onto the class names these five boards actually use. */ /* ── 5.1 STATUS-AS-COLOURED-TEXT → BADGES ────────────────────────────────────────────────────── The clearest instances in the cluster, all of them "the state, spelled in a hue": .lx-state.s-attention / .s-ready the work-queue row's one word (amber / emerald text) .lx-state.waiting the shared ledger's own tone, six boards deep .cx-row-state.warn / .pending the complaints row — PLAIN TEXT tinted amber, no chip at all .wq-sched-chip.today / .overdue the schedule verdict None of these is a class _base.css targets, so the selector list is extended here. The RECIPE is not duplicated: fill + tint border + dark ink + a ::before, exactly _base §1, at the same 11px and 4px, so a badge on a board is the same object as a badge anywhere else. The icon is the second carrier and is mandatory, for the reason _base states: under deuteranopia the success and danger fills collapse to two olives at ΔE 0.027 and the TEXT at 0.040. Four coloured dots would reintroduce exactly that; check / bang / cross are shape-distinct. */ html[data-theme="light"] .lx-state, html[data-theme="light"] .cx-row-state, html[data-theme="light"] .wq-sched-chip, html[data-theme="light"] .wq-tag-lead { display: inline-flex; align-items: center; gap: 4px; border-radius: 4px; padding: 2px 6px; font-size: var(--t-micro); font-weight: var(--fw-label); line-height: 1.4; letter-spacing: 0; text-transform: none; background: var(--surface-inset); color: var(--ink-dim); border: 1px solid var(--keyline); } /* Neutral takes the dot. .wq-tag-lead is deliberately NOT in this list: it is the leading FINDING ("Bromsar"), a data value rather than a state, and a bullet in front of a noun is noise. It keeps the badge's geometry and loses the badge's glyph. */ html[data-theme="light"] .lx-state::before, html[data-theme="light"] .cx-row-state::before, html[data-theme="light"] .wq-sched-chip::before { content: "•"; font-size: 1em; line-height: 1; } html[data-theme="light"] .lx-state.s-ready { color: var(--st-logged); background: var(--st-logged-soft); border-color: var(--st-logged-line); } html[data-theme="light"] .lx-state.s-ready::before { content: "✓"; } html[data-theme="light"] .lx-state.waiting, html[data-theme="light"] .lx-state.s-attention, html[data-theme="light"] .cx-row-state.warn, html[data-theme="light"] .cx-row-state.pending, html[data-theme="light"] .wq-sched-chip.today, html[data-theme="light"] .wq-mark { color: var(--st-expected); background: var(--st-expected-soft); border-color: var(--st-expected-line); } html[data-theme="light"] .lx-state.waiting::before, html[data-theme="light"] .lx-state.s-attention::before, html[data-theme="light"] .cx-row-state.warn::before, html[data-theme="light"] .cx-row-state.pending::before, html[data-theme="light"] .wq-sched-chip.today::before { content: "!"; } html[data-theme="light"] .wq-sched-chip.overdue { color: var(--st-breach); background: var(--st-breach-soft); border-color: var(--st-breach-line); } html[data-theme="light"] .wq-sched-chip.overdue::before { content: "✕"; } /* .wq-mark is already a shape-carrier by construction — an 18px disc holding a glyph the markup supplies, with an accessible name. It keeps its circle (that IS its distinctness against the square badges beside it) and only takes the amber badge's three values, above. */ /* ── 5.2 SECTION HEADINGS → THE EYEBROW ──────────────────────────────────────────────────────── The work-queue ledger prints its three bucket headings in amber, neutral and emerald, at reading size and sentence case. That is the single loudest use of colour-as-label in the cluster, and the page sheet says so itself: "the hue belongs to the WORD, and the row's flag below only repeats it". On near-black that is a quiet tint; on white the page opens with a green word and an amber word before a single row of data. The eyebrow replaces it: 11px, uppercase, tracked, --ink-muted. The state has not been lost — it is still on the row's flag, still in the row's badge, and still in the heading's own words. What is gone is the third statement of it, in the one channel a light UI cannot afford. */ html[data-theme="light"] .lx-bucket .lx-bucket-name, html[data-theme="light"] .lx-bucket.b-customer .lx-bucket-name, html[data-theme="light"] .lx-bucket.b-us .lx-bucket-name, html[data-theme="light"] .lx-bucket.b-progress .lx-bucket-name, html[data-theme="light"] .cx-bucket .cx-bucket-name, html[data-theme="light"] .vs-group-head, html[data-theme="light"] .dt-group-head, html[data-theme="light"] .vs-places-label, html[data-theme="light"] .cx-eyebrow, html[data-theme="light"] .dt-quick-eyebrow, html[data-theme="light"] .dp-quick-eyebrow { font-size: var(--eyebrow-size); font-weight: var(--fw-label); text-transform: uppercase; letter-spacing: var(--eyebrow-track); color: var(--ink-muted); } /* The count and the sum that ride on a heading are FACTS ABOUT the section, not states of it. The sum was mint green (--st-logged) because everywhere else in the app that slot is money; here it is bay hours, and hours are not a success. */ html[data-theme="light"] .lx-bucket .lx-bucket-n, html[data-theme="light"] .lx-bucket .lx-bucket-sum, html[data-theme="light"] .cx-bucket .cx-bucket-n, html[data-theme="light"] .cx-bucket .cx-bucket-sev { color: var(--ink-muted); font-weight: var(--fw-label); } /* The heading's trailing rule is furniture: a keyline, at keyline weight, not a fading tint. */ html[data-theme="light"] .lx-bucket::after, html[data-theme="light"] .cx-bucket::after { background: var(--keyline); } /* The windowed list's sticky heading. Its dark value is a 72% near-black fill plus a blur, so light resolves it to a pale blue slab with a filter that is `none` — i.e. a bar of a colour nothing else on the page uses, and no boundary. It becomes the surface it sits on, with a keyline under it, which is the only thing that has to be true of a sticky heading: that rows pass BEHIND it. */ html[data-theme="light"] .wq-ledger.windowed .lx-bucket { background: var(--surface); border-bottom: 1px solid var(--keyline); backdrop-filter: none; -webkit-backdrop-filter: none; } /* ── 5.3 THE ROWS ────────────────────────────────────────────────────────────────────────────── Heights are authored from the --row-h* rungs and the vertical padding is DERIVED from them; the horizontal padding holds at --row-pad-x across every board so the columns of two different boards still agree. These rows are 2–3 grid lines tall, so the rung is a MIN-height rather than a height: a fixed height on a row whose third line appears only on live jobs would clip it. DERIVED PADDING — exempt from the --sp-* scale, and labelled so per the spec. Rounding 6px to 8 here silently changes the height of every row on five boards. The divider is --keyline at 1px and it is the whole boundary: no per-row radius, no per-row shadow, no card. That was already the idiom's intent in dark ("no card, no box"); light just needs the hairline to be a real hairline rather than a 5.5% white wash that composites to nothing. */ /* `.lx-row`'s SIZE LEFT THIS FILE. `min-height: var(--row-h-comfy)` and `padding: 6px var(--row-pad-x)` are now listLedgerStyle.ts, unprefixed, for both themes — the reasoning above is about a dense ledger row, not about a light one, and stating it here made the shared component render at two densities. MEASURED before the move, the same markup on the same route: /vehicles light 48px dark 71px /quote-drafts light 58px dark 80px /phone-bookings light 61px dark 73px `--row-h-comfy` and `--row-pad-x` are declared in _base.css, a light-only file, so the shared rule reads them through `var(--…, 48px)` / `var(--…, 16px)` fallbacks: light keeps the ladder (including the 56/64px touch-shell bumps at _base.css:2470) and dark gets the same 48/16 desktop numbers without this file having to exist for it. Lifting the tokens themselves into app.css is the tidier end state and is flagged rather than done — they serve six components, not just this one. The BORDER stays: a 1px keyline is paint, and it is the whole reason this block was written. */ html[data-theme="light"] .lx-row, html[data-theme="light"] .cx-row, html[data-theme="light"] .rt-row { border-bottom: 1px solid var(--keyline); border-radius: 0; box-shadow: none; } /* The complaints row carries severity on a 2px leading edge, which must survive the reset above. */ html[data-theme="light"] .cx-row { border-left: 2px solid transparent; } /* The last hairline in a bordered column would double with the column's own edge. */ html[data-theme="light"] .lx-list > .lx-row:last-child, html[data-theme="light"] .rt-list > .rt-row:last-child { border-bottom-color: transparent; } /* Hover and pick keep the leading bar as the carrier (§2 above) and lose the row-level lift. */ /* --surface-inset per §2's one-tone rule. The leading bar stays: on the routines ledger it is the only thing distinguishing hover from the row simply being there. */ html[data-theme="light"] .rt-row:hover { background: var(--surface-inset); box-shadow: inset 2px 0 0 var(--keyline-strong); } html[data-theme="light"] .rt-row:focus-visible { background: var(--surface-active); box-shadow: inset 2px 0 0 var(--focus-ring); } html[data-theme="light"] .rt-row.picked { background: var(--surface-selected); box-shadow: inset 3px 0 0 var(--accent-bar); } /* ── 5.4 A BOARD'S LEFT COLUMN NEEDS A BOUNDARY ──────────────────────────────────────────────── On /work-queue the ledger column (.lx-list.wq-ledger) has no surface, no border and no fill at all — in dark it reads because the rows' hairlines sit on a near-black ground and the pane beside it is glass. In light the pane is a bordered white card and the list is nothing: rows floating on the canvas next to a framed object, which reads as an unfinished half of the page. THE CHOICE MADE, and why. Two answers were available — self-separating rows on the bare canvas (Linear's inbox), or a bordered surface (Stripe's list). The surface wins here for one structural reason: this column SCROLLS INDEPENDENTLY of the pane beside it. A scroll region with no edge has no visible start or end, so a row half-clipped at the top rail looks like a rendering fault rather than like more list. The border is where the scroll begins. And it is a surface WITH a border, deliberately: white on #f6f8fa with no hairline is the light theme's silent failure — nothing throws and the element is simply absent. */ html[data-theme="light"] .lx-list, html[data-theme="light"] .rt-list { background: var(--surface); border: 1px solid var(--keyline); border-radius: var(--r-card); padding-bottom: 0; } /* The complaints list already had a surface; it only needed the boundary raised to a real keyline and the fill taken to the surface rung, so it matches the pane it sits beside. */ html[data-theme="light"] .cx-list { background: var(--surface); border-color: var(--keyline); border-radius: var(--r-card); } /* Inside a bordered column a heading no longer needs a 24px air gap to say "new section" — the rule and the case do that. The first one loses its indent entirely. */ /* THE BUCKET HEADING'S SPACING ALSO LEFT THIS FILE — same fault, same fix. `margin-top: var(--sp-4)` / `padding: 10px var(--row-pad-x) 6px` / `:first-child { margin-top: 0 }` are listLedgerStyle.ts now, unprefixed. The argument written above ("inside a bordered column a heading no longer needs a 24px air gap") is about a heading sitting in a ledger, and the shared component's own 32px gap was authored before the ledger had buckets at all — it was never a dark decision, only an unrevised one. Light's numbers are the ones that were looked at, so they are the ones that ship, for both. Only the bucket's PAINT stays in this file (§5.2 above: case, tint, and the ::after rule). */ /* ── 5.5 CHIPS AND TABS — rectangles, and an underline for "you are here" ────────────────────── _base §2 puts the filter chips on --r-control; these are the two objects it does not reach: the ledger's lane pills and the complaints board's segmented lane control, both 999px capsules with a FILLED active state. An underline rather than a fill, for the reason _base gives: it is the strongest available "you are here" that spends no fill area and no accent budget. Note this deliberately reverses the complaints sheet's own comment ("the active lane is a filled pill, not an underline") — that comment is about DARK, where a fill is the only thing that separates from near-black, and it stays true there. On white a filled capsule is the loudest object in a bar that also holds the page's real primary action. This also supersedes the §1 SELECTION treatment for .lx-tab.active / .vs-tab.active specifically: a wash plus a leading bar is right for an applied FILTER (one of nine, any number on) and wrong for a TAB (one of three, exactly one on). Later in the file at equal specificity, so it wins. */ html[data-theme="light"] .lx-tabs, html[data-theme="light"] .cx-lanes, html[data-theme="light"] .vs-tabs { gap: 0; padding: 0; border: 0; border-bottom: 1px solid var(--keyline); border-radius: 0; background: none; } html[data-theme="light"] .lx-tab, html[data-theme="light"] .cx-lane, html[data-theme="light"] .vs-tab { display: inline-flex; align-items: center; min-height: var(--ctl-h-lg); padding: 0 var(--ctl-pad-x); border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; /* the tab's rule sits ON the strip's keyline */ background: none; box-shadow: none; font-size: var(--t-sm); font-weight: var(--fw-label); color: var(--ink-muted); } html[data-theme="light"] .lx-tab:hover, html[data-theme="light"] .cx-lane:hover, html[data-theme="light"] .vs-tab:hover { background: none; color: var(--ink); } html[data-theme="light"] .lx-tab.active, html[data-theme="light"] .cx-lane.on, html[data-theme="light"] .vs-tab.active { color: var(--ink); background: none; border-color: transparent; border-bottom-color: var(--accent); box-shadow: none; } html[data-theme="light"] .lx-tab.active .lx-tab-count, html[data-theme="light"] .cx-lane.on > b { color: var(--ink-muted); background: none; } /* The density pair on the storage board is a true segmented control (two values of one property), so it stays a bordered group — but a rectangle group, with the pressed half filled from the inset rung rather than from a violet at 30%. */ html[data-theme="light"] .vs-density { border-radius: var(--r-control); border-color: var(--keyline-strong); background: var(--surface); } html[data-theme="light"] .vs-dens-btn { border-radius: 2px; } html[data-theme="light"] .vs-dens-btn.on { color: var(--ink); background: var(--surface-inset); box-shadow: none; } /* ── 5.6 CONTROLS ────────────────────────────────────────────────────────────────────────────── The row action, the presets and the counter-offer's opener: one height, one radius, one weight, and a secondary that is --surface plus a real 1px --keyline-strong. Not a tint — §3 above already took the violet out of them, and a quieter violet is still a violet; what a secondary needs on white is an EDGE. */ html[data-theme="light"] .wq-rowact, html[data-theme="light"] .rt-dueact, html[data-theme="light"] .dt-preset, html[data-theme="light"] .dp-preset, html[data-theme="light"] .dt-more, html[data-theme="light"] .dp-more, html[data-theme="light"] .wq-counter-open, html[data-theme="light"] .cx-chip, html[data-theme="light"] .vs-place-mini { min-height: var(--ctl-h); padding: 0 var(--ctl-pad-x); border-radius: var(--r-control); font-size: var(--t-sm); font-weight: var(--fw-label); background: var(--surface); border: 1px solid var(--keyline-strong); color: var(--ink-dim); box-shadow: none; } html[data-theme="light"] .wq-rowact:hover:not(:disabled), html[data-theme="light"] .rt-dueact:hover:not(:disabled), html[data-theme="light"] .dt-preset:hover:not(:disabled), html[data-theme="light"] .dp-preset:hover:not(:disabled), html[data-theme="light"] .dt-more:hover, html[data-theme="light"] .dp-more:hover, html[data-theme="light"] .wq-counter-open:hover, html[data-theme="light"] .cx-chip:hover:not(:disabled) { background: var(--surface-inset); border-color: var(--keyline-strong); color: var(--ink); } /* On the touch shells the row action is a real target; the coarse rung, not a re-typed 48. */ @media (max-width: 1279px) { html[data-theme="light"] .wq-rowact { min-height: var(--row-h-comfy); } } /* Work Queue: the "more below" cue and the counter-offer quote block. */ html[data-theme="light"] .wq-morecue-pill { color: var(--text-secondary); background: var(--surface-4); border-color: var(--border-default); } html[data-theme="light"] .wq-counter { background: var(--recess-a03); border-color: var(--border-default); } html[data-theme="light"] .wq-counter-label { color: var(--text-muted); } html[data-theme="light"] .wq-daychip.own { background: var(--surface-selected); border-color: var(--accent-hairline); } /* Ledger rows on a drag target and the log-entry rail: violet marking a list item's ordinary state. */ html[data-theme="light"] .wq-logentry { border-left-color: var(--border-strong); } html[data-theme="light"] .wq-tl-dot { background: var(--text-secondary); box-shadow: none; } html[data-theme="light"] .wq-tl-row:not(:last-child)::before { background: var(--border-default); } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ WORK QUEUE — the light structural prototype ═══════════════════════════════════════════════════════════════════════════════════════════════ This is the worked example the rest of the light theme gets mapped onto. Everything below is light-only: `html[data-theme="light"]` is (0,2,0) against the page sheet's (0,1,0), so it wins on specificity without !important, and dark cannot match it by construction. The page is dense and it is read on a bay tablet at arm's length. Every change below is either "replace a dark-mode device with a light-mode one" or "let the data have the room". ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* ── 1. THE LEDGER COLUMN GETS A BOUNDARY ───────────────────────────────────────────────────── The fault that made the point: with glass removed, the list column had NO surface at all — it floated on the page while the record beside it was a bordered card. In dark it separated as a tint over near-black; here white-on-white has no edge, and nothing errors. A surface and one vertical keyline. Not a card: the ledger IS the page's left half. */ /* §5.4 above already gives `.lx-list` a bordered surface, and its reasoning is right: this column scrolls independently, and a scroll region with no edge has no visible start or end. So the ledger needs nothing further here. That argument applies just as much to the pane BESIDE it, which also scrolls independently — so the pane keeps its border too. An earlier draft of this file stripped it on the grounds that two bordered boxes side by side are "two cards arguing". That was wrong: they are not cards, they are two scroll regions, and each one needs to show where it begins. What the pane does lose is the shadow (it is not floating) and the violet scrollbar, which was the last saturated thing on the page. */ html[data-theme="light"] .wq-wrapper .lx-sheet.wq-pane { background: var(--surface); border: 1px solid var(--keyline); border-radius: var(--r-card); box-shadow: none; scrollbar-color: var(--keyline-strong) transparent; } html[data-theme="light"] .wq-wrapper .lx-sheet.wq-pane::-webkit-scrollbar-thumb { background: var(--keyline-strong); } /* ── 2. SECTION HEADINGS BECOME EYEBROWS ────────────────────────────────────────────────────── "Väntar på kund" was amber and "Pågår" was emerald. Colour as a section label is a dark device: on white it reads as a highlighter mark, and it spends the accent budget on something that is not an action and cannot be clicked. The status still lives on every row's own badge, which is where it belongs — a heading does not need to repeat it in hue. The sticky heading also loses its indigo wash and its blur, for a plain surface and a hairline. */ html[data-theme="light"] .wq-wrapper .lx-bucket .lx-bucket-name, html[data-theme="light"] .wq-wrapper .lx-bucket.b-customer .lx-bucket-name, html[data-theme="light"] .wq-wrapper .lx-bucket.b-us .lx-bucket-name, html[data-theme="light"] .wq-wrapper .lx-bucket.b-progress .lx-bucket-name { /* SENTENCE CASE, 2026-08-10, superseding the tracked uppercase this block shipped with. This page was signed off BEFORE the sentence-case decision existed, and approving a page does not freeze a rule that had not been made yet. The measured evidence is one-sided: nine letter-spacing declarations in 3.6 MB of shipped stylesheet, not one of them on a section label, with the tracked uppercase header actively being retired. Swedish compounds suffer worst in caps. And a shared class meaning two different things on two pages is exactly the drift that made `.purple-gradient` violet in six sheets and emerald in a seventh — Finished Jobs now reads sentence case, so Work Queue had to follow or the app would disagree with itself about what a bucket heading is. */ font-size: var(--eyebrow-size); font-weight: var(--fw-label); text-transform: none; letter-spacing: 0; color: var(--ink-muted); } html[data-theme="light"] .wq-ledger.windowed .lx-bucket { background: var(--surface); border-bottom: 1px solid var(--keyline); } html[data-theme="light"] .wq-wrapper .lx-bucket::after { background: var(--keyline); } /* The bucket's hour sum was emerald. A number is not a status. */ html[data-theme="light"] .wq-wrapper .lx-bucket .lx-bucket-sum { color: var(--ink-muted); font-weight: var(--fw-label); font-variant-numeric: tabular-nums; } /* ── 3. THE STATUS FLAG BECOMES A BADGE WITH A GLYPH ────────────────────────────────────────── The most important change on this page, and the one that generalises furthest. `.lx-flag` is a 6px dot with a coloured glow. Both halves are dark devices: a glow needs darkness to read as emission, and a coloured dot is colour doing a job alone. Under deuteranopia the amber and the emerald dots collapse — roughly 1 in 12 mechanics, in a trade that skews male, unable to tell "waiting on the customer" from "being worked on". In light it becomes a 16px rounded square carrying a SHAPE-distinct glyph, and the grid's first column widens to match. The glyph is generated content, so it needs no markup change, cannot leak into dark, and stays out of the accessibility tree — the row's text keeps sole ownership of the accessible name. */ /* DELIBERATELY LEFT LIGHT-ONLY, 2026-08-11, after being proposed for both themes and rejected on evidence. The proposal was sound in principle: the deuteranopia argument above ("colour alone cannot tell 'waiting on the customer' from 'being worked on'") is a fact about eyes, not about themes, so dark's 6px hue-only dot fails 1-in-12 mechanics exactly as light's did. It cannot be executed as a GEOMETRY move, which is what this pass is allowed to do. Dark's flag fills are saturated and live unprefixed in the page sheet (`WorkQueueDesktop.css:294-297`: `--st-expected`, `--st-logged`, `--st-breach`). Light pairs its 16px badge with a per-state INK (`color:` on each `.f-*` rule below). Widening the box in both themes without that ink would put a `currentColor` glyph on a saturated square — an unreadable badge, and a worse outcome than the dot. Supplying the ink means changing dark's `color`, which is exactly what `compare.mjs` records. So this is a dark PAINT decision, not a width fork, and it needs an explicit re-baseline rather than being smuggled in under geometry parity. Recorded here so the next reader inherits the argument and the reason it stopped, rather than rediscovering both. */ html[data-theme="light"] .wq-wrapper .wq-row { grid-template-columns: 18px minmax(0, 22rem) auto 1fr 7rem; } html[data-theme="light"] .wq-wrapper .wq-row .lx-flag { width: 16px; height: 16px; border-radius: 4px; margin-top: 0; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; font-size: 10px; font-weight: var(--fw-label); line-height: 1; border: 1px solid transparent; } html[data-theme="light"] .wq-wrapper .wq-row .lx-flag::before { content: "•"; } /* Waiting on the customer: amber, with a bang. The amber stays — that is explicit instruction. */ html[data-theme="light"] .wq-wrapper .wq-row .lx-flag.f-customer { background: var(--st-expected-soft); border-color: var(--st-expected-line); color: var(--st-expected); } html[data-theme="light"] .wq-wrapper .wq-row .lx-flag.f-customer::before { content: "!"; } /* Ours, unstarted. A backlog item is not a status, so it earns no hue — only a boundary. */ html[data-theme="light"] .wq-wrapper .wq-row .lx-flag.f-us { background: var(--surface-inset); border-color: var(--keyline-strong); color: var(--ink-muted); } /* Being worked. */ html[data-theme="light"] .wq-wrapper .wq-row .lx-flag.f-progress { background: var(--st-logged-soft); border-color: var(--st-logged-line); color: var(--st-logged); } html[data-theme="light"] .wq-wrapper .wq-row .lx-flag.f-progress::before { content: "▸"; } /* Overdue outranks the bucket: it is a fact about the card, not about where it sits. */ html[data-theme="light"] .wq-wrapper .wq-row .lx-flag.f-breach, html[data-theme="light"] .wq-wrapper .lx-flag.overdue { background: var(--st-breach-soft); border-color: var(--st-breach-line); color: var(--st-breach); } html[data-theme="light"] .wq-wrapper .wq-row .lx-flag.f-breach::before, html[data-theme="light"] .wq-wrapper .lx-flag.overdue::before { content: "✕"; } html[data-theme="light"] .wq-wrapper .lx-flag.waiting { background: var(--st-expected-soft); border-color: var(--st-expected-line); color: var(--st-expected); } html[data-theme="light"] .wq-wrapper .lx-flag.waiting::before { content: "!"; } /* ── 4. ROWS: A DIVIDED LIST, NOT A STACK OF CARDS ──────────────────────────────────────────── The divider is the separation mechanism, so the hover must not introduce a second one. The violet wash and the inset accent bar both go: hover is a quiet fill. Selection keeps a bar, because selection genuinely needs a carrier that survives a glance down a long column. */ /* THE SIZE DECLARATIONS ARE GONE from this rule too, and this one was a fork INSIDE light as well as between the themes: `min-height: var(--row-h)` (40px) contradicted §5's own `--row-h-comfy` (48px) for the same class, 360 lines apart in one file, and `padding: var(--sp-2) var(--row-pad-x)` was already being beaten by WorkQueueDesktop.css — measured, the light row computes 12px/16px, not 8px/16px, so that half of this declaration has never once applied. A row floor BELOW the shared ledger's is not a decision anyone made; it is the older number surviving. Nothing moves visually: the Work Queue row carries three lines and a meter and renders ~100px, so it has never met either floor. What changes is that the two themes now agree about what the floor IS, and the page sheet's padding is the only padding, for both. */ html[data-theme="light"] .wq-wrapper .lx-row { border-bottom: 1px solid var(--keyline); } html[data-theme="light"] .wq-wrapper .lx-row:hover { background: var(--surface-inset); box-shadow: none; } html[data-theme="light"] .wq-wrapper .lx-row:focus-visible { background: var(--surface-inset); box-shadow: inset 2px 0 0 var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; } html[data-theme="light"] .wq-wrapper .lx-row.picked { background: var(--surface-inset); box-shadow: inset 2px 0 0 var(--accent); } /* ── 5. FIGURES ─────────────────────────────────────────────────────────────────────────────── The money slot was emerald at weight 700. On this page it carries bay hours rather than money, and a duration is not a success state. Ink, tabular, one weight down. */ html[data-theme="light"] .wq-wrapper .lx-money { color: var(--ink); font-weight: var(--fw-label); font-variant-numeric: tabular-nums; } html[data-theme="light"] .wq-wrapper .lx-when, html[data-theme="light"] .wq-wrapper .wq-band-figures, html[data-theme="light"] .wq-wrapper .wq-band-pct { font-variant-numeric: tabular-nums; } /* ── 6. TAGS: RECTANGLES ────────────────────────────────────────────────────────────────────── --r-pill is for true pills. A finding chip in a dense ledger is a rectangle; a row of capsules reads as consumer-app and wastes width at both ends of every one. */ html[data-theme="light"] .wq-wrapper .wq-tag-lead { border-radius: 4px; background: var(--surface-inset); border-color: var(--keyline); color: var(--ink-dim); font-weight: var(--fw-label); } /* ── 7. EMPTY STATES: A LINE, NOT A HERO ────────────────────────────────────────────────────── A centred block of muted type in the middle of an 1100px pane is a marketing device. In an ops tool an empty state is a fact, stated where the data would have been — and it should not reserve 18rem of vertical space to say that nothing is there. */ html[data-theme="light"] .wq-wrapper .wq-pane .lx-empty { align-items: flex-start; justify-content: flex-start; text-align: left; min-height: 0; height: auto; margin: 0; padding: var(--sp-5) var(--row-pad-x); } html[data-theme="light"] .wq-wrapper .wq-pane .lx-empty svg { display: none; } html[data-theme="light"] .wq-wrapper .wq-pane-empty-head { font-size: var(--t-h2); font-weight: var(--fw-strong); color: var(--ink); } html[data-theme="light"] .wq-wrapper .wq-bucket-empty { color: var(--ink-muted); padding: var(--sp-2) var(--row-pad-x) var(--sp-3); } /* ── 8. THE CONTROL BAR: SORT BUTTONS ARE RECTANGLES TOO ────────────────────────────────────── The filter chips took the rectangle treatment from _base.css, but the SORT buttons did not — they are `.fc-sort-btn`, a different class in the same bar, so "Äldsta" was left as the one capsule on a line of rectangles. A control bar has to agree with itself. */ html[data-theme="light"] .fc-sort-btn { border-radius: var(--r-control); font-weight: var(--fw-label); color: var(--ink-muted); } html[data-theme="light"] .fc-sort-btn.on { background: var(--surface-inset); border-color: var(--keyline-strong); color: var(--ink); } html[data-theme="light"] .fc-sort-label { font-size: var(--eyebrow-size); text-transform: uppercase; letter-spacing: var(--eyebrow-track); color: var(--ink-muted); } /* ── 9. COMPOSITION: THE LEDGER'S MEASURE — MOVED OUT, 2026-08-11 ───────────────────────────── `--lx-col: 34rem` lived here, in a PAINT file, against `27rem` in the page sheet. That is the mechanism that made one component render at two widths: measured at 1900, the same `.lx-split` resolved `544 | 1220` in light and `432 | 1332` in dark. A width in a theme file forks the themes by construction, and it re-forks them the next time somebody edits the page sheet. The 34rem VALUE was right and survives — it now lives in `WorkQueueDesktop.css`, unprefixed, governing both themes, with the derivation that used to be here (22rem name cap + 7rem figure + the 18px badge column + the row's 16px padding + the gaps). The five-track row grid that stood here went with it, and it was carrying a real defect: `18px minmax(0,24rem) auto 1fr 7rem` resolved to `18 · 204 · 109 · 0 · 112`. Columns 4 and 5 held NOTHING — the page sheet places every child in tracks 1–3 — so 132px of a 523px row, a quarter of it, was reserved for children that do not exist, and the vehicle name paid for it. That is why the identity truncated to "2010 Volkswag…" inside a 544px ledger with 1220px of empty pane beside it. Both replacements are in the page sheet so the two themes cannot disagree about them again. */ /* ── 10. THE HEADER RULE ────────────────────────────────────────────────────────────────────── One hairline under the page header, so the board reads as beginning somewhere. Stripe separates its header from its content with exactly this and nothing else. */ html[data-theme="light"] .wq-wrapper .wq-header { border-bottom: 1px solid var(--keyline); padding-bottom: var(--sp-3); } /* ── 11. SECTION EYEBROWS INSIDE THE RECORD ─────────────────────────────────────────────────── `.wq-eyebrow` is a label followed by a gradient hairline that fades to nothing. A gradient rule is a dark-theme device — it fades because on near-black a hard line reads as a scratch. On white a rule is just a rule, and a fading one looks like a rendering artefact. Flat keyline, and the label drops from weight 700 to the label rung. */ html[data-theme="light"] .wq-wrapper .wq-eyebrow > span { font-weight: var(--fw-label); letter-spacing: var(--eyebrow-track); color: var(--ink-muted); } html[data-theme="light"] .wq-wrapper .wq-eyebrow > i { background: var(--keyline); } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ WORK QUEUE — the 1% pass ═══════════════════════════════════════════════════════════════════════════════════════════════ A review pass against the rendered page. The mechanisms below are adopted wholesale; three of the review's proposed HEX values were rejected on measurement and the reasons are recorded inline, so nobody re-proposes them: - amber badge text #B54708 on #FFF8EB measures 5.14:1 against the shipping 6.37:1. More luminous, less legible. This is read at arm's length under glare. - muted ink #64748B measures 4.76:1 on white against the shipping #5D6B80 at 5.08:1 on canvas, so the "microcopy is too light" finding is already answered by a DARKER value than proposed. - amber solid fill #E39B0A measures 2.34:1 on white. A progress bar is a meaningful graphical object and owes 3:1 under SC 1.4.11, so that value fails as a fill. Solid fills use the status tokens, which are measured. The accent stays BLUE (#2f4fd0, hue 228). The review specifies Stripe's blurple #533afd, which is hue 253 — violet — and the standing rule is that everything violet becomes blue in light. ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* ── 12. FORM SURFACES: A FIELD IS WHITE, OR IT READS AS DISABLED ───────────────────────────── The strongest point in the review. 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 same fill is a lift — it is lighter than its surround — which is exactly the inversion this rebuild exists to catch: the same declaration means "raised" on one ground and "disabled" on the other. White fill, structural keyline, and an inset micro-shadow so the field still has a floor. The focus ring darkens the border and adds a 2px halo rather than glowing, because a glow on white is a smudge. */ html[data-theme="light"] .wq-wrapper input[type="text"], html[data-theme="light"] .wq-wrapper input[type="number"], html[data-theme="light"] .wq-wrapper input[type="search"], html[data-theme="light"] .wq-wrapper input[type="tel"], html[data-theme="light"] .wq-wrapper textarea, html[data-theme="light"] .wq-wrapper select, html[data-theme="light"] .wq-wrapper .modal-field input, html[data-theme="light"] .wq-wrapper .modal-field textarea { 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"] .wq-wrapper input:hover:not(:disabled), html[data-theme="light"] .wq-wrapper textarea:hover:not(:disabled) { border-color: var(--keyline-strong); } html[data-theme="light"] .wq-wrapper input:focus, html[data-theme="light"] .wq-wrapper input:focus-visible, html[data-theme="light"] .wq-wrapper textarea:focus, html[data-theme="light"] .wq-wrapper textarea:focus-visible, html[data-theme="light"] .wq-wrapper select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--field-ring); } /* A field that IS disabled now has to say so, since grey no longer means it by default. */ html[data-theme="light"] .wq-wrapper input:disabled, html[data-theme="light"] .wq-wrapper textarea:disabled { background: var(--surface-inset); color: var(--ink-muted); box-shadow: none; } /* ── 13. THE LAST OF THE PILLS ──────────────────────────────────────────────────────────────── `.wq-pill` and the search box were still fully rounded. A capsule is consumer-app language and it costs width at both ends of every instance. DELIBERATE EXCEPTION, so it is not "fixed" later: the progress TRACKS (.wq-row-track, .wq-progress-track) keep --r-pill. They are 4-6px tall bars, where a full round IS the correct terminal shape — 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". */ html[data-theme="light"] .wq-pill, html[data-theme="light"] .wq-seg-btn { border-radius: var(--r-control); } /* ── 14. THE SEARCH BAR ─────────────────────────────────────────────────────────────────────── It was a grey floating capsule with no edge — the same "disabled" signal as the inputs above, applied to the control the page is most often driven from. */ html[data-theme="light"] .wq-wrapper .list-search { background: var(--surface); border: 1px solid var(--keyline); border-radius: var(--r-card); box-shadow: var(--field-floor); } html[data-theme="light"] .wq-wrapper .list-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--field-ring); } html[data-theme="light"] .wq-wrapper .list-search .ls-ic { color: var(--ink-muted); } /* ── 15. THE EMOJI TRAP ─────────────────────────────────────────────────────────────────────── `WorkQueueDesktop.vue:213` renders a raw 🔒 next to "TID SOM FAKTURERAS". An OS emoji renders as a different picture on Windows, macOS, Android and iOS — full-colour on three of them — so one data row is drawn by the operating system rather than by this design system. The markup cannot be touched: that file is shared with dark, and editing it would move dark. So the glyph is suppressed and replaced with a monochrome mask that inherits `currentColor`, which keeps it exactly the colour of the text it sits beside. Light-only, no markup change, no network request. The `font-size: 0` is what hides the emoji; the mask is drawn on the ::after box. */ html[data-theme="light"] .wq-wrapper .wq-bf-lock { font-size: 0; display: inline-flex; align-items: center; } html[data-theme="light"] .wq-wrapper .wq-bf-lock::after { content: ""; width: 12px; height: 12px; background-color: currentColor; -webkit-mask-image: var(--icon-lock); mask-image: var(--icon-lock); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } /* ── 16. THE TIMELINE ───────────────────────────────────────────────────────────────────────── The dots were solid violet with a violet glow ring — a dark device twice over. A ring made of the SURFACE colour reads as engineered rather than drawn: the dot punches through the connector line instead of sitting on top of it. The connector drops to the keyline. A timeline's line is a guide, not a wall. */ html[data-theme="light"] .wq-wrapper .wq-tl-dot { background: var(--ink-dim); box-shadow: 0 0 0 2px var(--surface); } html[data-theme="light"] .wq-wrapper .wq-tl-row:not(:last-child)::before { background: var(--keyline-strong); } /* ── 17. THE STICKY ACTION BAR ──────────────────────────────────────────────────────────────── The footer needs to be a footer: a rule above it, so the actions read as belonging to the record rather than floating after it. The secondary action stops being blue. Two blue things side by side is two primaries; the text link goes to ink and picks up the accent only on hover, which is where a link's colour actually earns its keep. */ html[data-theme="light"] .wq-wrapper .wq-detail-actions { border-top: 1px solid var(--keyline); padding-top: var(--sp-3); } html[data-theme="light"] .wq-wrapper .wq-detail-actions .wq-act:not(.primary) { background: none; border-color: transparent; color: var(--ink-dim); } html[data-theme="light"] .wq-wrapper .wq-detail-actions .wq-act:not(.primary):hover { color: var(--accent); background: none; } html[data-theme="light"] .wq-wrapper .wq-act.primary { border-radius: var(--r-control); padding: 8px 16px; font-weight: var(--fw-label); } /* ── 18. THE NOTIFICATION DOT — MOVED OUT ───────────────────────────────────────────────────── `.ntf-badge` belongs to NotificationCenter, which MainLayout mounts on every route, so it was never a boards-cluster surface — and the split left the badge's geometry in _base.css and its ring here, two files for one 18px object. The ring is now folded into the _base.css rule (§A7/A9, "the counts keep their hue"), with the order-tie audit written up there. */ /* ── 19. DATA LABELS ────────────────────────────────────────────────────────────────────────── The field labels above inputs are eyebrows and should be sized like them. The review asks for weight 600; they stay on the label rung, because 600 is reserved for ONE element per container (here, the value the label describes) and a form of six 600-weight labels spends that budget on the captions instead of on the data. */ html[data-theme="light"] .wq-wrapper .wq-bf-label, html[data-theme="light"] .wq-wrapper .modal-field > label { font-size: var(--eyebrow-size); font-weight: var(--fw-label); letter-spacing: var(--eyebrow-track); text-transform: uppercase; color: var(--ink-muted); } /* The value the label describes IS the one 600 in that block. */ html[data-theme="light"] .wq-wrapper .wq-bf-val { font-weight: var(--fw-strong); color: var(--ink); font-variant-numeric: tabular-nums; } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ WORK QUEUE — the 1% pass, second round (against the opened record) ═══════════════════════════════════════════════════════════════════════════════════════════════ The first round was written against the list view, which meant half the review's findings were about a pane I had not photographed. These are the ones only visible with a job open. */ /* ── 20. THE STICKY FOOTER BAND ─────────────────────────────────────────────────────────────── `.wq-detail-foot` is a sticky bar over a tinted scrim. In dark the tint is what separates it from the record scrolling underneath; in light it renders as a pale blue slab across the bottom of the pane, which reads as a selected state rather than as chrome. Surface plus a rule. The rule is the separation — that is the whole premise of this theme. */ html[data-theme="light"] .wq-wrapper .wq-detail-foot { background: var(--surface); border-top: 1px solid var(--keyline); } /* ── 21. THE CLOSING ACTION ─────────────────────────────────────────────────────────────────── 56px tall and 200px wide is a bay-tablet floor and it is correct THERE — a gloved hand needs 15mm. On a mouse-driven desktop it is a billboard. The height comes down to the comfortable rung on pointer-fine devices only, so the tablet keeps its target. Radius to the control rung, weight to the label rung. */ @media (pointer: fine) { html[data-theme="light"] .wq-wrapper .wq-detail-actions .wq-act.big { min-height: var(--row-h-comfy); min-width: 0; padding: 0 var(--sp-5); font-size: var(--t-sm); } } html[data-theme="light"] .wq-wrapper .wq-act.big, html[data-theme="light"] .wq-wrapper .wq-act.primary, html[data-theme="light"] .wq-wrapper .wq-act.claim { border-radius: var(--r-control); font-weight: var(--fw-label); } /* "Öppna bilens jobb" sits beside the primary as a blue underlined link — two blue things in one footer is two primaries. It goes to ink and picks the accent up on hover, which is where a link's colour actually does work. */ html[data-theme="light"] .wq-wrapper .wq-detail-foot a, html[data-theme="light"] .wq-wrapper .wq-detail-actions a { color: var(--ink-dim); text-decoration: none; font-weight: var(--fw-label); } html[data-theme="light"] .wq-wrapper .wq-detail-foot a:hover, html[data-theme="light"] .wq-wrapper .wq-detail-actions a:hover { color: var(--accent); text-decoration: underline; } /* ── 22. THE PROGRESS METER ─────────────────────────────────────────────────────────────────── Every fill is a two-stop gradient built from the raw palette — a dark device: on near-black a gradient reads as a lit bar. On white it reads as a smear, and the behind/overdue variants land as dirty mustard and washed pink. Flat status fills. The review proposed #E39B0A for the amber; it measures 2.34:1 on white and a progress meter is a meaningful graphical object owing 3:1 under SC 1.4.11, so the measured status token is used instead. The track goes to the inset rung so the unfilled portion is a recess rather than a grey bar. */ html[data-theme="light"] .wq-wrapper .wq-progress-track, html[data-theme="light"] .wq-wrapper .wq-row-track { background: var(--surface-inset); border: 1px solid var(--keyline); } html[data-theme="light"] .wq-wrapper .wq-progress-track i, html[data-theme="light"] .wq-wrapper .wq-row-track b { background: var(--st-logged); } html[data-theme="light"] .wq-wrapper .wq-progress-track i.done { background: var(--st-logged); } html[data-theme="light"] .wq-wrapper .wq-progress-track i.behind { background: var(--st-expected); } html[data-theme="light"] .wq-wrapper .wq-progress-track i.overdue { background: var(--st-breach); } /* ── 23. THE PACE BADGE ─────────────────────────────────────────────────────────────────────── "1H 30M EFTER PLAN" was a filled amber capsule. It becomes the badge recipe: soft fill, tint border, dark ink, rectangle. Same treatment as every other status in the app, which is the point — a mechanic should not have to learn two badge shapes. */ /* NOT `.wq-band-pace` — that is the flex ROW the badge sits in, and painting it amber put a band across the whole line. Caught on the second screenshot. The badge is `.wq-act.pace`. */ html[data-theme="light"] .wq-wrapper .wq-act.pace, html[data-theme="light"] .wq-wrapper .wq-act.pace.unset { border-radius: 4px; background: var(--st-expected-soft); border: 1px solid var(--st-expected-line); color: var(--st-expected); font-weight: var(--fw-label); } /* ── 24. THE FREE-TEXT NOTE ─────────────────────────────────────────────────────────────────── The note box at the bottom of the record kept a tinted fill, so it read as a quote block rather than as an editable field. Same rule as every other input: white, keyline, inset floor. */ html[data-theme="light"] .wq-wrapper .wq-note, html[data-theme="light"] .wq-wrapper .wq-detail-note, html[data-theme="light"] .wq-wrapper .wq-freetext { background: var(--surface); border: 1px solid var(--keyline); border-radius: var(--r-control); box-shadow: var(--field-floor); color: var(--ink-dim); } /* ── 25. THE WORK LOG ROW ───────────────────────────────────────────────────────────────────── The logged-hours row carried a pale blue band with every word at one weight, so the figure — the only thing on the row anybody scans for — had no anchor. The band goes to the inset rung (it is a recess in the record, not a highlight) and the figure takes the one strong weight in the block. */ html[data-theme="light"] .wq-wrapper .wq-logreceipt { background: var(--surface-inset); border: 1px solid var(--keyline); border-radius: var(--r-control); } html[data-theme="light"] .wq-wrapper .wq-logreceipt b, html[data-theme="light"] .wq-wrapper .wq-logreceipt strong { font-weight: var(--fw-strong); color: var(--ink); font-variant-numeric: tabular-nums; } /* ── 26. THE CONTEXT RAIL ───────────────────────────────────────────────────────────────────── The collapsed rail down the right edge was still a violet-indigo column — the last saturated surface on the page, and the one furthest from the work. It is chrome: surface, keyline, muted glyphs. It earns colour when it is opened, not while it is a 60px strip. */ html[data-theme="light"] .crail { background: var(--surface); border: 1px solid var(--keyline); } html[data-theme="light"] .crail:hover, html[data-theme="light"] .crail:focus-within { background: var(--surface); border-color: var(--keyline-strong); box-shadow: var(--elevation-3); } /* ── 27. THE RECORD HEADING ─────────────────────────────────────────────────────────────────── The record's status ("Pågår") is still a coloured dot plus coloured text at the top right. It takes the badge treatment like every other status on the page. */ /* Geometry only on the base — `.lx-state` has s-attention / s-ready variants that already carry the right soft fill and tint border. What they do NOT have is light-legible INK: both spend a pale dark-theme hue (--c-emerald-a7f3d0, --c-amber-fde68a) that measures under 2:1 on its own fill. So the shape is set once here and each variant gets its ink corrected, rather than one blanket rule flattening a distinction the page is making on purpose. */ html[data-theme="light"] .wq-wrapper .lx-state { border-radius: 4px; padding: 2px 6px; font-size: var(--eyebrow-size); font-weight: var(--fw-label); letter-spacing: var(--eyebrow-track); } html[data-theme="light"] .wq-wrapper .lx-state.s-ready { color: var(--st-logged); } html[data-theme="light"] .wq-wrapper .lx-state.s-attention { color: var(--st-expected); } /* ── 28. THE METERS TAKE BAR-WEIGHT STATUS ──────────────────────────────────────────────────── Overrides §22 above, which reused the status TEXT tokens and produced an olive-brown bar. See the --meter-* block in app.css for the measurement. */ html[data-theme="light"] .wq-wrapper .wq-progress-track i, html[data-theme="light"] .wq-wrapper .wq-row-track b, html[data-theme="light"] .wq-wrapper .wq-progress-track i.done { background: var(--meter-ok); } html[data-theme="light"] .wq-wrapper .wq-progress-track i.behind { background: var(--meter-warn); } html[data-theme="light"] .wq-wrapper .wq-progress-track i.overdue { background: var(--meter-bad); } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ WORK QUEUE — round 3: the amber verdict, the second primary, the timeline ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* ── 29. THE PACE VERDICT STOPS SPENDING A HUE ──────────────────────────────────────────────── "1h 30m efter plan" appears on very nearly every card, and a colour that is always on screen has stopped carrying information. Stripe's own position is that restricting colour is an accessibility measure rather than a taste — so the common case goes neutral and the hue is saved for the case that is actually wrong. There is also no good dark amber, and that is a fact about the hue rather than a failure to find the right one: to clear 3:1 on a light track an amber has to be darkened, and a darkened yellow IS mustard. The previous value sat at hue 35, squarely in the yellow-brown band. So: BEHIND is a neutral slate badge at 9.45:1. OVERDUE keeps red — it is the one that means something is wrong. AHEAD keeps green. The warning tier is preserved; it just no longer fires on the ordinary case. This overrides the "keep the amber" instruction from the original brief, on the user's explicit later call. Recorded here so it is not restored by someone reading only the older document. */ html[data-theme="light"] .wq-wrapper .wq-pchip.behind { background: var(--surface-inset); border-color: var(--keyline-strong); color: var(--ink-dim); } html[data-theme="light"] .wq-wrapper .wq-pchip.ontrack { background: var(--surface-inset); border-color: var(--keyline); color: var(--ink-muted); } html[data-theme="light"] .wq-wrapper .wq-pchip.overdue { background: var(--st-breach-soft); border-color: var(--st-breach-line); color: var(--st-breach); } html[data-theme="light"] .wq-wrapper .wq-pchip.ahead { color: var(--st-logged); } /* Rectangle, not capsule — the round-2 rule guessed the wrong class and this is the real one. */ html[data-theme="light"] .wq-wrapper .wq-pchip, html[data-theme="light"] .wq-wrapper .wq-pcfg-btn { border-radius: 4px; font-weight: var(--fw-label); letter-spacing: var(--eyebrow-track); } html[data-theme="light"] .wq-wrapper .wq-pcfg-btn, html[data-theme="light"] .wq-wrapper .wq-band-takt.unset { color: var(--ink-muted); } /* ── 30. ONE PRIMARY PER PANE ───────────────────────────────────────────────────────────────── "Logga" and "Markera klar" were both filled blue. Two primaries is no primary — and they are not peers: logging an hour is routine and repeated, closing out a job is terminal. Recolouring the button would only have moved the problem, so the hierarchy is what changes. `.btn-astra` is the app's shared primary, so this is scoped to the log form rather than to the class — the same button elsewhere is genuinely primary. */ html[data-theme="light"] .wq-wrapper .wq-logform .wq-wp-btn, html[data-theme="light"] .wq-wrapper .wq-logform .btn-astra { background: var(--surface); background-image: none; border: 1px solid var(--keyline-strong); color: var(--ink-dim); box-shadow: none; font-weight: var(--fw-label); border-radius: var(--r-control); } html[data-theme="light"] .wq-wrapper .wq-logform .wq-wp-btn:hover:not(:disabled), html[data-theme="light"] .wq-wrapper .wq-logform .btn-astra:hover:not(:disabled) { background: var(--surface-inset); border-color: var(--accent); color: var(--accent); } /* "Öppna bilens jobb" is a