/* ========================================================================== nanocosmos Product Theme ========================================================================== A dark, technical UI theme extracted from player-diagnostics.html (nanoStudio Player Diagnostics), re-based 2026-09-03 on captions-workflow's in-production redesign (see the :root block below) — panels now carry a real shadow rather than being fully flat; the rest of the visual language (orange for primary/committing actions, blue for secondary actions and status, pill-shaped buttons and badges) is unchanged. VERSION -------------------------------------------------------------------------- 4.0.0 — 2026-10-20 CHANGELOG -------------------------------------------------------------------------- Reconstructed 2026-09-22 from the dated comments already in this file. The file carried no version of its own before that date, so every entry below 3.2.0 is a reading of those inline comments after the fact, not a record kept at the time — treat the dates as reliable and the version numbers as assigned in hindsight. The inline dated comments stay exactly where they are: they carry the WHY, this list carries the WHAT and WHEN. Semver as the rest of this skill uses it: MAJOR = a change every consuming page sees, MINOR = additive components, PATCH = a fix to an existing rule. 3.1.0 and 3.2.0 are two passes of the same day's work, kept separate because the second changed shipped components and the first did not. 4.0.0 — 2026-10-20 Changed: --panel-soft is #131d25, the exact midpoint of --bg #0d171e and --panel #19222b (direct request). It was #202a32, lighter than the panel. MAJOR because every consumer sees it: --panel-soft fills (hover states, disabled fills, dropdown options, the range thumb's drag fill) now sit DARKER than --panel, between it and --bg, instead of lifting above it. 3.7.2 — 2026-10-07 Fixed: .form-result's margin is symmetric, with first/last resets. It shipped in 3.7.0 as margin-top alone, which was invisible while every usage had it LAST in a panel under a caption. Moving it to the top of the gate's form made it obvious — measured 0.0px between the error box and the label beneath it. Measured ripple: the gate gains its 14px (0.0 → 14.0); the moodboard's gaps do not move, because its captions' own top margins collapse with the new bottom margin (14.0 → 14.0 twice, 11.5 → 14.0 once); and :first-child pulls the moodboard's first result flush to its panel padding (14.0 → 0.0), which is what .notice-item and .button-row already do at that position. :last-child is dormant — no usage has a result last. Kept anyway, and labelled as dormant in the rule, because unlike the .color-swatch rule this file deleted for doing nothing, this one can fire; it just has not yet. Zero consumers use .form-result, so nothing downstream changes. 3.7.1 — 2026-10-07 Changed: .modal-overlay's CONTRACT example is no longer UNVERIFIED. It is now taken from tests/archetype-stream.html, which carries a sign-in gate shipped hidden — the first reviewed page in this skill to use a modal at all, and a standing test of governing rule 2a: .modal-overlay sets display: flex and overrides the UA [hidden] rule, so if that gating ever breaks again the archetype shows a full-screen backdrop. Comment only. No declaration changed, nothing renders differently. 3.7.0 — 2026-10-06 (the auth investigation: three primitives, two discoveries) Investigated three downstream sign-in implementations before writing any rule. The headline finding is not that each invented its own — it is that MOST OF WHAT THEY INVENTED ALREADY EXISTED HERE: .field--stacked is declaration-for-declaration identical to live-recorder's hand-rolled `.login-card .field` override, and its own CONTRACT already says "a narrow modal". .modal-panel__title / __sub carry the same 19px/700 and 13.5px values as both consumers' .login-card__title / __sub, and .modal-overlay's CONTRACT example is already a sign-in form. So the gap was three small primitives, none of them about authentication — plus one fix, which this release does NOT pretend is additive: Added: .form-result / --attn / --ok — the outcome of a form SUBMISSION, as opposed to one field failing (.field .error) or a persistent state (.status-strip) or something that happened elsewhere (.toast). All three consumers built this; none gave it a live region, so a screen reader gets silence on a failed sign-in. role="alert" is REQUIRED here. Added: .btn-link — a button that looks like a link, for a real action that reads as navigation. Two consumers hand-rolled it, each twice. Added: .btn--block — a width modifier on .btn, replacing the inline style="width:100%" both consumers reached for. Added: NON-RULE — there is no sign-up form here, with the decision table. Both product consumers link out to the dashboard; the real sign-up needs seven fields plus consent and cross-field validation. Changed: note 6 now states the single-orange rule outright. It forbade green/red/amber but never said that #F48220 is the ONLY orange, which is how two consumers kept the retired #E5883C alive in a hand-typed rgba() past the 2026-09-07 unification. See BATCH-FINDINGS item 23. Fixed: .field--stacked, and the automatic body:has(.workbench) .stats-row rule that shares its declarations, left the CONTROL at its intrinsic ~192px instead of filling the width the stacking frees — the exact problem the modifier exists to solve, present since 2026-09-22. align-items: stretch on both. Measured 192px → 362px in a 420px card and 192px → 278px in a stats-row panel. THIS RELEASE IS ADDITIVE PLUS THIS ONE FIX, not purely additive. Two pages render differently: tests/archetype-workbench.html (Stream name, Fit mode and Opacity now fill their panels) and the moodboard. Zero consumer pages change — no consumer uses .field--stacked at all, and the .workbench and .stats-row page sets are disjoint, re-verified 2026-10-06 rather than taken from the 2026-09-24 note. It is folded in here rather than held for 3.7.1 because this release ships a moodboard section whose centrepiece is a sign-in card built from .field--stacked. Shipping a showcase that demonstrates a component failing at its one job is worse than giving up a clean release note. Verified: no retired value survives in this file. Both pre-unification accents were grepped as hex AND as RGB triples — the hand-typed rgba() case is exactly what a hex grep misses. Zero hits outside history comments. The only rgb triples present are white, black and rgba(13, 23, 30) on three overlay backdrops, which is --bg's own value (logged as item 25 — not a retired colour, but the same hazard class). 3.6.0 — 2026-10-05 Changed: .btn padding 10px/22px → 6px/15px and .btn-neutral 9px/21px → 5px/14px, GLOBALLY. Every button on every consuming page renders 8px shorter and 14px narrower. This is the only entry in this list that changes rendering everywhere rather than inside one scope. The justification is DENSITY, not colour judgement: 10px/22px is a marketing-page button size in a tool UI, and that is as true on a log viewer as it is beside a preview. The colour-judgement version of this same value was correctly rejected twice — 3.5.0 scoped it, 3.5.1 deleted it. It returns under a different argument that passes the review test instead of failing it. Changed: .btn-icon's and .btn-chip's "not .btn's size" comments. Both argued from a 10px/22px .btn. A .btn is now 28.8px tall against a chip's 28.4px and an icon button's 30px, so neither argument survives as written. What separates the three is type, weight and role. Fixed: the CONTROL PADDING scale's entry for 15px still named "[data-color-critical] .btn padding-x" — a rule 3.5.1 deleted. 3.5.1's own entry says six places were updated; this was a seventh, and it was missed. It now names the global rule. 3.5.1 — 2026-10-05 Removed: [data-color-critical] .btn / .btn-neutral padding. The scope resized buttons, which no other rule in it does — every other one removes accent, while this only made an accented button smaller. Buttons are now 10px/22px in both modes. Six places that documented the rule were updated in the same change; see the postscript on the scoping discipline's worked example for the lesson. Removed: .color-swatch from the scope's selector list (2026-10-01) — it set the border colour the default already had, so it did nothing. 3.5.0 — 2026-09-25 (the file becomes its own styleguide) This release adds almost no CSS. It makes the file usable without reading its declarations, which was the point of the exercise: a product page should need no per-page CSS, and nobody should have to reverse- engineer a component to know what it is for. Added: a CONTRACT comment above all 54 components — what it is, when to use it and when NOT to (naming the alternative), required markup with ARIA, which states exist and which deliberately don't, constraints, and whether it may carry accent. Markup examples say whether they are VERIFIED against a reviewed page or not, so a reader knows which to trust. Added: COMPONENT INDEX, TYPOGRAPHY CONTRACT and STATE VOCABULARY at the top, beside the spacing and radius scales. The state block carries the variant-vs-state test: does it change during interaction (state — use an attribute) or is it chosen once when the markup is written (variant — use a class)? Added: TWO CORES section — nanoStream (streaming) and nanoStudio (production), in the order SKILL.md's naming rules require, with the consumer pages of each, why one stylesheet serves both, and why the trigger for the colour-critical scope is COLOUR-JUDGEMENT rather than product line. Added: the SCOPING DISCIPLINE, the condition attached to keeping one stylesheet rather than forking. Any change justified solely by colour-judgement reasoning belongs in [data-color-critical]. The review test: would this change still be right on a log viewer? If no, it is scoped. Two worked examples, both real: .status-strip's blue edge (passes, stays global) and .btn's padding (fails, scoped). Changed: .btn reverted to 10px/22px globally, with the tighter 6px/15px moved into [data-color-critical]; .btn-neutral's compensating padding moved in step. This was the scoping discipline's first application, and it changed a page that had already been approved — the discipline has to cost something the first time or it is not one. Verified: every documentation write in this release was checked by diffing 25 computed properties across all 159 elements of product-sample.html, before and after. Twelve writes, zero differences. 3.4.0 — 2026-09-24 (Phase A: close the component set + the governing rule) Added: GOVERNING RULE at the top of this file — styling changes APPEARANCE ONLY and must never interfere with behaviour, with the nine specific ways CSS breaks a control and a required click-test. Written because a CSS-ONLY change to the chroma-key setup tuner made the Preview/Live toggle and the Player and Multiplayer buttons unclickable and had to be diagnosed with document.elementFromPoint. Added: note 10 — text in a button or a tag is ALWAYS centred explicitly, never with a compensating offset. Six controls were missing it. Added: the last components — .empty-state, progress (both engines, determinate-only), meter (its native green/yellow/red bands collapsed onto this file's two hues), hr, kbd, code/samp, radio + fieldset/legend, .notice-item, .switch-item, .helper promoted out of .field. Added: three documented NON-RULES, each with a decision table rather than silence — no tooltip, no blockquote, no skeleton loader. A stated omission is more useful than a gap somebody fills. Fixed: the checkbox was a native control tinted with accent-color, so an UNCHECKED box was OS-painted light-on-dark. Now custom, like the radio. Fixed: .modal-overlay had no inactive state, so each consumer invented one; worse, it sets display: flex, which OVERRIDES [hidden], meaning (UNVERIFIED example — checked in a scratch page during development, but no reviewed page demonstrates this component; tests/gap-probe.html shows the unstyled case only, by design) STATES None. DOES NOT DO No icon or illustration slot, deliberately: decoration that signals neither action nor state is what this theme rejects. Does not centre itself vertically in the panel — it sits where it falls. ACCENT POLICY The block carries none. A single .btn-primary inside it may, as the one action. -------------------------------------------------------------------------- */ /* Empty state (2026-09-24). A composition of .panel + heading + text + .button-row would work, but two pages would compose it two different ways; the part composition will not give you for free is the constrained measure. Deliberately NO icon slot: an illustration in an empty state signals neither action nor state, and decoration that signals nothing is what this theme rejects. Body text is --text-primary, not --text-muted, despite the instinct to quieten it: --text-muted is reserved for things that are INACTIVE (placeholders, disabled state, control handles), and an empty state is not inactive — it is waiting. Widening that token a third time would blur what it means. Size carries the hierarchy instead. Markup: .panel > .empty-state >

+

+ .button-row */ .empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 20px; text-align: center; } .empty-state h3 { margin: 0; } .empty-state p { margin: 0; max-width: 40ch; font-size: 13px; line-height: 1.5; color: var(--text-primary); } /* ========================================================================== Form panel — label-beside-input layout ========================================================================== */ .form-panel { padding: 20px; } /* -------------------------------------------------------------------------- CONTRACT — .field WHAT IT IS One labelled form row: label beside control. WHEN TO USE Any input, select or textarea that needs a label. NOT inside a .control-rail — the 200px label column does not fit; that is .control-row. NOT for a checkbox or radio, whose label follows the control: .checkbox-item / .radio-item. MARKUP

Stream name or ABR group ID.
(verified example, from tests/archetype-workbench.html) STATES None itself. Its CONTROL carries them. DOES NOT DO Does not validate; [aria-invalid] is set by the page. Does not fit a container under ~400px — it stacks automatically inside a workbench's panels, and .field--stacked forces it elsewhere. ACCENT POLICY None at rest. Its control takes accent-blue on hover (select), the focus ring, and accent-orange on [aria-invalid]. -------------------------------------------------------------------------- */ .field { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 16px; } .field:last-of-type { margin-bottom: 0; } .field label { flex: 0 0 200px; /* fixed label column so inputs align vertically */ padding-top: 10px; /* optically aligns label baseline with input text */ font-size: 14px; /* 2026-09-04: labels 14px, field content (input/select) 16px — deliberately different sizes now, not both 16px */ font-weight: 500; color: var(--text-primary); } /* -------------------------------------------------------------------------- CONTRACT — .field-control WHAT IT IS The column holding the control and anything under it. WHEN TO USE Always, inside .field. Not used alone. MARKUP see the .field contract above STATES None. DOES NOT DO Does not style the control — the element selectors do. ACCENT POLICY Never carries accent. -------------------------------------------------------------------------- */ .field-control { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } /* -------------------------------------------------------------------------- CONTRACT — input[type="text"|"password"|"email"] / textarea / select WHAT IT IS The field-shaped box: a recessed control on the darkest surface with a bordered edge. WHEN TO USE Inside a .field-control. A select outside a form (a toolbar, a button row) gets the same treatment from the bare `select` rule further down. NOT for a value you cannot edit — that is .info-row.wrap .value, which looks like a field but is a readout. MARKUP
(verified example, from tests/archetype-workbench.html) STATES default, hover (select only: accent-blue border), focus-visible (blue ring), disabled, and [aria-invalid="true"] (orange border on ALL sides). No active or selected state. DOES NOT DO Does not size itself to its content. A textarea resizes VERTICALLY only — horizontal resize would break the label/control alignment. A select's OPEN dropdown is drawn by the OS and ignores most styling; only the closed control is ours. ACCENT POLICY Neutral at rest. Accent-blue on focus and select-hover; accent-orange on [aria-invalid]. Never fills. -------------------------------------------------------------------------- */ /* Plain uniform border on every side, deliberately — no colored left-accent "stripe" on any field, ever (confirmed 2026-09-01, direct request after a consuming page — captions-workflow — had grown its own orange-left-accent form style; removed there too once it was pointed out it didn't match this theme). If a page needs to flag an error state, use border-color on ALL sides (e.g. var(--accent-orange)), never a single accented edge. */ /* email is in this list because sign-in forms need it and a page that vendors this file can't add it without hand-copying all seven declarations below (live-recorder had exactly that duplicate, 2026-09-07). */ .field input[type="text"], .field input[type="password"], .field input[type="email"], .field textarea, .field select { background: var(--panel-inset); border: 1px solid var(--border); border-radius: 8px; color: var(--text-secondary); /* now white like everything else — the box reads as "a box" via --panel-inset's darker background, not text color; see note above :root */ padding: 10px 12px; font-size: 16px; width: 100%; } /* Vertical-only resize (2026-09-22): a horizontally resizable textarea can be dragged wider than the .field-control column it sits in, breaking the form's label/control alignment. */ .field textarea { resize: vertical; min-height: 84px; line-height: 1.5; } /* A select inside .field needs the same treatment, as its own rule rather than joining the grouped selector above -- that group covers text inputs and a textarea too, and none of those wants a chevron. It also has to restate the background: the grouped rule sets the `background` SHORTHAND, which resets background-image, so a chevron declared only on the bare `select` rule would be wiped inside a form. (2026-09-23) */ .field select { -webkit-appearance: none; appearance: none; font-family: var(--font-body); background: var(--panel-inset) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239aa1a8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center; background-size: 12px 8px; padding: 10px 34px 10px 12px; } .field select:hover { border-color: var(--accent-blue); } .field select:disabled { color: var(--text-primary); cursor: not-allowed; opacity: 0.6; } /* see select:disabled */ /* A (verified example, from tests/archetype-workbench.html) STATES default and disabled only. The button part has no hover state — the pseudo-element cannot carry one reliably across engines. DOES NOT DO Deliberately has NO field-shaped box of its own: it is a button plus a filename, not something you type into. Does not truncate the filename — a short container will. ACCENT POLICY Never carries accent. -------------------------------------------------------------------------- */ /* No field-shaped box of its own (corrected 2026-09-22, same day it was added). A file input is not a box you type into — it is a BUTTON plus the name of the chosen file. Wrapping that in --panel-inset with a border gave it the same shape as a text input, which reads as a disabled field and boxed the filename into a truncating well. The button part below carries the whole affordance; the filename is just text beside it. */ input[type="file"] { background: none; border: 0; padding: 0; color: var(--text-primary); font-size: 13px; width: 100%; cursor: pointer; } input[type="file"]::file-selector-button { background: var(--panel-soft); border: 1px solid var(--border); border-radius: 999px; color: var(--text-primary); padding: 5px 14px; margin-right: 10px; font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; } input[type="file"]::-webkit-file-upload-button { background: var(--panel-soft); border: 1px solid var(--border); border-radius: 999px; color: var(--text-primary); padding: 5px 14px; margin-right: 10px; font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; } .field input::placeholder, .field textarea::placeholder { color: var(--text-muted); } /* Stack label above input below 640px so the fixed label column doesn't crowd the field on narrow viewports. */ @media (max-width: 640px) { .field { flex-direction: column; gap: 6px; } .field label { flex-basis: auto; padding-top: 0; } } /* Fields stack automatically inside a workbench's panels (2026-09-24). The pinch is driven by CONTAINER width, not viewport: inside .workbench the rail takes up to 440px, so each .stats-row panel is ~218px at a 960 viewport and ~353px at 1280 — leaving .field's 200px label column with -42px and 93px of control respectively. A viewport media query cannot fix that; it never fires in the range where the problem exists. A container query is the correct long-term answer and is deliberately NOT used here: container-type implies contain: layout, which changes the containing block for absolutely-positioned descendants, and four of the nine registered consumers are not cloned on any machine that has checked this — see BATCH-FINDINGS item 11. :has() is a plain structural selector with no containment semantics, and this file already requires it. Checked 2026-09-24: no downstream page combines .workbench + .stats-row + .field at all. Declarations are identical to .field--stacked, so this introduces no appearance the theme does not already have. */ body:has(.workbench) .stats-row .field { flex-direction: column; align-items: stretch; /* 2026-10-06, same bug and same fix as .field--stacked below — BATCH-FINDINGS 27 */ gap: 6px; } body:has(.workbench) .stats-row .field label { flex-basis: auto; padding-top: 0; } /* -------------------------------------------------------------------------- CONTRACT — .field--stacked WHAT IT IS A .field with its label above the control. WHEN TO USE A .field in a container under ~400px wide where the automatic workbench rule does not apply — a narrow modal, a half-width panel on a .container page. Also correct for a file input, whose control is wide and whose filename truncates in a short column. NOT needed inside a workbench's .stats-row panels: those stack automatically. MARKUP
(verified example, from tests/archetype-workbench.html) STATES None. DOES NOT DO Does not change the control's INTRINSIC size — it stretches the control to the field's full width (2026-10-06; before that it left it at ~192px, which was the bug in BATCH-FINDINGS 27). A control that must stay narrow needs its own width. ACCENT POLICY Never carries accent. -------------------------------------------------------------------------- */ /* Explicit stacked variant (2026-09-22). The media query above already stacks .field — but it tests the VIEWPORT, and the real constraint is the CONTAINER. .field's 200px label column is a desktop form layout; in a half-width .stats-row panel (about 413px, less 40px of panel padding) it leaves under 150px for the control, which truncates a file input's filename and overflows a select — at any viewport width, so the 640px breakpoint never fires. This applies the same declarations on demand. The general fix is a container query rather than a modifier; see BATCH-FINDINGS for why that isn't in this batch. */ /* align-items: stretch (2026-10-06) — see BATCH-FINDINGS item 27. .field's base rule sets align-items: flex-start, which governs the CROSS axis; turning the row into a column turns that axis HORIZONTAL, so flex-start was shrink-wrapping the control to its intrinsic ~192px while .field-control's flex: 1 1 0% acted on the vertical axis and did nothing. The modifier stacked the label but left the freed width unused, which is the problem it exists to solve. Measured 192px → 362px in a 420px card. MUST stay identical to the automatic rule above it. */ .field--stacked { flex-direction: column; align-items: stretch; gap: 6px; } .field--stacked label { flex-basis: auto; padding-top: 0; } /* -------------------------------------------------------------------------- CONTRACT — .helper WHAT IT IS A line of explanatory text under a control or a row. WHEN TO USE Explaining one field, always visible. Also the body of an inline explanation toggled by a .btn-icon with aria-expanded — see the tooltip non-rule. NOT for an error: that is .field .error, which replaces it while the error stands. NOT for a mode or status message: that is .status-strip. MARKUP Stream name or ABR group ID. (verified example, from tests/archetype-workbench.html) toggled form:

(UNVERIFIED example — no reviewed page wires this yet) STATES None. Hidden with the [hidden] attribute, owned by the page. DOES NOT DO Does not truncate or clamp; a long helper wraps. ACCENT POLICY Never carries accent — it is explanation, not state. -------------------------------------------------------------------------- */ /* Promoted from `.field .helper` 2026-09-24. The helper line is now needed outside a form too — under a .switch-item, as the inline explanation an `i` affordance toggles — and scoped to .field it rendered unstyled there. Same move select and input[type="range"] got this batch. */ .helper { font-size: 11.5px; line-height: 1.5; color: var(--text-primary); } /* Error state (2026-09-22). The rule this implements was ALREADY written in prose above the field-input block — a field in error takes border-color on ALL sides, never a single accented edge — but nothing in this file ever implemented it, so every page needing validation invented its own treatment. Orange, not red: per note 6 at the top of this file there is no red/green/amber anywhere in this theme, and error/warning/live all share the single attention hue. The message text carries the specific meaning; the color only says "this needs attention". Driven from aria-invalid="true" rather than a class, so the visual state can't drift from the state assistive tech is told about. */ .field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--accent-orange); } /* Same idea as .btn-primary:focus-visible — the ring follows the element's own accent rather than the default blue. */ .field input[aria-invalid="true"]:focus-visible, .field select[aria-invalid="true"]:focus-visible, .field textarea[aria-invalid="true"]:focus-visible { outline-color: var(--accent-orange); } /* Sits in the same slot as .helper (the .field-control column, under the control) and replaces it while the error stands — don't show both. */ /* -------------------------------------------------------------------------- CONTRACT — .field .error WHAT IT IS The validation message for a field in error. WHEN TO USE With [aria-invalid="true"] on the control. Set both — the attribute drives the border, this carries the message. NOT for a warning about something other than this field: that is .status-strip--attn. MARKUP
Ingest URL must include a stream name.
(verified example, from tests/gap-probe.html — the approved reference does not demonstrate an error state) STATES None. Its presence IS the state. DOES NOT DO Does not hide the .helper — the page removes or replaces it. Showing both reads as contradictory. ACCENT POLICY Orange, always. Orange is the attention bucket; there is no red in this theme. NOT neutralised under data-color-critical — an error must stay visible. -------------------------------------------------------------------------- */ .field .error { font-size: 12px; line-height: 1.5; color: var(--accent-orange); } /* -------------------------------------------------------------------------- CONTRACT — .form-result / --attn / --ok WHAT IT IS The outcome of a form SUBMISSION, shown inside the form. WHEN TO USE The attempt as a whole succeeded or failed — wrong credentials, an expired token, a rate limit, "reset link sent". Always combined with exactly one variant, the way .btn takes exactly one tier. NOT for one field failing validation: that is [aria-invalid="true"] plus .field .error. NOT for a persistent mode or connection state: that is .status-strip. NOT for something that happened elsewhere on the page: that is .toast. MARKUP (UNVERIFIED example — no reviewed page in this skill submits a form; three downstream consumers each invented this component independently) STATES Presence is the state. The page shows it and clears it on the next attempt. DOES NOT DO Spaces ITSELF — 14px above and below, reset at the first and last position the way .notice-item and .button-row do, so a container's padding is not doubled. Do not add margin to it from outside. Does not dismiss itself and carries NO dismiss control — a result is replaced by the next attempt, not closed. For a dismissible line that is .notice-item. role="alert" is REQUIRED, not optional. Two of the three consumer implementations have no live region at all, so a screen reader gets silence on a failed sign-in. ACCENT POLICY --attn orange, --ok blue, per note 6. The base class carries no colour and must NEVER be used alone. -------------------------------------------------------------------------- */ /* Form-submission result (2026-10-06). The fourth message component, and the one every consumer had to invent, because the other three are each about something else: .field .error is one field, .status-strip is a standing state, .toast is elsewhere on the page. This is "the thing you just pressed did not work, and here is why", and it belongs inside the form it failed. NEUTRAL FILL, ACCENT BORDER — no alpha. All three consumers used a tinted rgba() background and all three got the tint wrong in some way (see BATCH-FINDINGS item 23). This file has no alpha accent token and should not grow one for a message box: --panel-soft with a 1px accent border is the same device .btn-chip[aria-pressed] uses, and it is the smallest saturated area that still reads. LEFT-ALIGNED, which all three consumers are not — they centre it. A one-line "incorrect password" centres fine; a two-line rate-limit explanation does not, and this is the component that carries the long rejections. captions-workflow's own code comments that a generic message "is actively misleading for a rate limit, a suspended account, or any other rejection". .status-strip and .helper are left-aligned and this reads beside them. Text stays --text-primary rather than taking the accent the way .field .error does. That rule has no box, so colour is its only channel; this one has a border to carry the hue, and a full sentence in orange is harder to read than the same sentence in white. */ .form-result { padding: 10px 12px; background: var(--panel-soft); border: 1px solid var(--border); border-radius: 4px; /* structural, per the radius scale */ font-size: 13px; line-height: 1.5; color: var(--text-primary); /* SYMMETRIC, with first/last resets (2026-10-07). Shipped 3.7.0 as margin-top: 14px alone, which was invisible for two days because every usage had it LAST in a panel with a caption under it. Putting it at the top of the sign-in gate's form made it obvious: measured 0.0px between the error box and the "Email" label it sat on top of. The moodboard does not move as a result — its captions carry their own top margin, so the new bottom margin collapses into theirs. Measured 14.0 → 14.0 on two of three, and 11.5 → 14.0 on the third, which only makes it match the other two. Same shape as .notice-item, .button-row and .field: a component spaces itself, and the edges reset so a container's padding is not doubled. */ margin: 14px 0; } /* :first-child fires on the moodboard, where it pulls the first result flush to the panel's padding (measured 14.0px → 0.0px). It does nothing in the gate, where the top margin was already collapsing through the form to .modal-panel__sub's 20px. */ .form-result:first-child { margin-top: 0; } /* DORMANT TODAY, deliberately kept: no current usage has .form-result last — all four are followed by a caption or by the method blocks. It is here because the moment someone ends a panel with a result, its absence is a visible bug. Note the difference from the .color-swatch rule this file deleted for doing nothing: that one set a value the default already had and could NEVER fire; this one simply has not yet. Do not reason from it as if it were proven in a render. */ .form-result:last-child { margin-bottom: 0; } .form-result--attn { border-color: var(--accent-orange); } .form-result--ok { border-color: var(--accent-blue); } /* A helper toggled by an `i` affordance sits under its row. 6px from the spacing scale — tight, because it belongs to the row above it. Hide it with the `hidden` attribute; .helper declares no display, so the UA rule applies and no CSS is needed for the toggle. (2026-09-24) */ .switch-item + .helper { margin-top: 6px; } /* -------------------------------------------------------------------------- CONTRACT — .checkbox-row WHAT IT IS A bordered band holding a group of checkbox or radio items. WHEN TO USE A group of related toggles inside a form panel. NOT for a single checkbox — use .checkbox-item alone. NOT for switches — those are .switch-item rows. MARKUP
(verified example, from tests/gap-probe.html) STATES None. DOES NOT DO Does not lay out its items — each is its own .checkbox-item. Its top and bottom borders make it a section divider, so do not nest one inside another. ACCENT POLICY Never carries accent. -------------------------------------------------------------------------- */ .checkbox-row { display: flex; flex-wrap: wrap; gap: 16px; margin: 20px 0; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* -------------------------------------------------------------------------- CONTRACT — .checkbox-item + input[type="checkbox"] WHAT IT IS A checkbox with its label. WHEN TO USE A non-exclusive choice, or a form value submitted later. NOT for an on/off setting that takes effect immediately — that is [role="switch"]. NOT for an exclusive choice — that is .radio-item. MARKUP
(verified example, from tests/gap-probe.html) STATES default, checked, disabled. No hover and no selected state distinct from checked. DOES NOT DO Does not wrap the label around the control — use `for`. The 17px box is under the 24x24 hit-area minimum on its own; the associated label extends the target, which is why `for` is not optional. ACCENT POLICY Neutral unchecked. Accent-blue fill with a white tick when checked. Goes fully neutral under data-color-critical — the tick's presence carries the state. -------------------------------------------------------------------------- */ .checkbox-item { display: flex; align-items: center; gap: 8px; } /* Checkbox (2026-09-24). Same fix the radio got, for the same reason: this was a NATIVE control tinted with accent-color, which styles the CHECKED state and leaves the unchecked one drawn by the OS — a light box on a dark panel. It went unnoticed because every checkbox in product-sample.html happens to be checked. :not([role="switch"]) rather than relying on source order. The switch rule further down is also an input[type="checkbox"], and would win today on specificity and order — but protecting one control's geometry with cascade order is a trap for whoever reorders this file, the same reason .switch-item does not reuse .checkbox-item. Excluding it explicitly means the two rules never overlap at all. 17px matches the radio exactly so mixed groups line up; 4px radius is the structural step from the radius scale (a checkbox is a small box, not a pill). Neutral at rest, accent only when checked. Sizing and colour moved here from .checkbox-item input[type="checkbox"] so that EVERY checkbox is covered, not only those inside .checkbox-item — keeping a scoped duplicate is how the .field select font-family omission survived. accent-color is gone with the native rendering it tinted. */ input[type="checkbox"]:not([role="switch"]) { -webkit-appearance: none; appearance: none; width: 17px; height: 17px; flex-shrink: 0; margin: 0; border-radius: 4px; background: var(--panel-inset); border: 1px solid var(--border-strong); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } /* The tick is an SVG centred with background-position, so it is centred by construction at any box size — no offsets to re-derive, per note 10. The stroke is a literal #ffffff because a data-URI SVG cannot read a custom property; it duplicates --text-on-accent and must be updated by hand if that token ever changes. Same limitation as the select chevron — both are logged in BATCH-FINDINGS item 9. */ input[type="checkbox"]:not([role="switch"]):checked { background: var(--accent-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.5 2.5 4.5-5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; background-size: 11px 11px; border-color: var(--accent-blue); } input[type="checkbox"]:not([role="switch"]):disabled { opacity: 0.6; cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { input[type="checkbox"]:not([role="switch"]) { transition: none; } } .checkbox-item label { font-size: 13px; color: var(--text-primary); } /* ========================================================================== NON-RULE: there are no tooltips in this theme (2026-09-24, deliberate) ========================================================================== [role="tooltip"] has no rule ON PURPOSE. tests/gap-probe.html section 7 renders one as permanently-visible inline text — that is the probe demonstrating the omission, not a bug to fix. WHAT YOU WANT WHAT TO USE -------------------------------------------------------------------------- Explain one field, always visible .helper, under the control Explain on demand, inline .btn-icon with aria-expanded + a .helper toggled by [hidden] Reference material that would crowd .detail-rail (wide screens; must the page degrade to one of the above) Explain a mode or a state .status-strip A plain hover hint, no styling the native title attribute The title attribute is UNTHEMEABLE BY DESIGN, not by oversight: the OS draws it. That is the trade — an unstyled OS tooltip beats a themed one that clips. WHY NOT: six components here declare overflow: hidden (.player-panel, .monitor, .journey, .snippet, and two .mb-* classes), so an absolutely-positioned tooltip is clipped inside the densest parts of a workbench. This file has no positioning machinery — no popover, no anchor positioning — so a correct one needs collision detection that does not exist here. Hover content is also unreachable on touch and carries real WCAG 1.4.13 obligations (dismissible, hoverable, persistent), and the AV-workbench copy rules already call for labels that explain themselves. A tooltip is usually a symptom that the label failed. */ /* Radio (2026-09-24, gap #6 from the original probe ranking). There was no input[type="radio"] rule at all, so a radio was painted in the VISITOR'S OS accent colour — the same hole that produced pink sliders before the parameter-controls section landed. This goes further than .checkbox-item above, which tints a NATIVE control with accent-color. That works for a checked box, but it leaves the UNCHECKED state drawn by the OS — a light circle on a dark panel. Every other control in this batch (select, range, switch) had to drop native rendering for exactly that reason, so the radio does too. "Neutral at rest" has to mean neutral on every OS, not just a dark one. NOTE: .checkbox-item still carries this latent issue — its unchecked box is OS-painted. Every checkbox in product-sample.html happens to be checked, which is why no screenshot has caught it. Worth its own pass. Element selector, not scoped to .radio-item: a radio outside the row component should not fall back to an OS-painted control either — matching how `select` and `input[type="range"]` are handled in this file. Neutral at rest, accent only when selected, per the approved reference. 17px matches .checkbox-item exactly so a mixed group lines up. */ input[type="radio"] { -webkit-appearance: none; appearance: none; position: relative; width: 17px; height: 17px; flex-shrink: 0; margin: 0; border-radius: 50%; background: var(--panel-inset); border: 1px solid var(--border-strong); cursor: pointer; transition: border-color 0.15s ease; } input[type="radio"]:checked { border-color: var(--accent-blue); } /* The dot is inset from the PADDING box (17px less the 1px borders = 15px), so inset: 4px leaves a 7px dot centred by construction — no offsets. */ input[type="radio"]:checked::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--accent-blue); } input[type="radio"]:disabled { opacity: 0.6; cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { input[type="radio"] { transition: none; } } /* Row component, mirroring .checkbox-item exactly — flex, centred per note 10, 8px gap from the spacing scale. */ /* -------------------------------------------------------------------------- CONTRACT — .radio-item + input[type="radio"] WHAT IT IS A radio with its label. WHEN TO USE Exactly one of a small set, all options visible at once. NOT for more than about five options — that is a select. NOT for a non-exclusive choice — that is .checkbox-item. MARKUP
Preview engine
(verified example, from tests/gap-probe.html) STATES default, checked, disabled. No hover state. DOES NOT DO Does not group or name itself — the shared `name` and the
/ belong to the page. Same 24x24 hit-area note as .checkbox-item: the label extends it. ACCENT POLICY Neutral unselected. Accent-blue ring and dot when selected. Goes fully neutral under data-color-critical. -------------------------------------------------------------------------- */ .radio-item { display: flex; align-items: center; gap: 8px; } .radio-item label { font-size: 13px; color: var(--text-primary); } /* -------------------------------------------------------------------------- CONTRACT — fieldset / legend WHAT IT IS Semantic grouping for a set of related controls, reset to no visual chrome. WHEN TO USE Wrap a radio group so the legend names it for assistive tech. NOT as a visual container — that is .panel or .control-section. MARKUP see the .radio-item contract above (verified example, from tests/gap-probe.html) STATES None. DOES NOT DO Draws nothing — no border, no background, no padding. If a group needs to look like a group, put it in a panel. ACCENT POLICY Never carries accent. -------------------------------------------------------------------------- */ /* fieldset / legend (2026-09-24). Neither had a rule, so a grouped set of radios drew the browser's pale inset border with a notched legend cut into it — the most obviously off-theme thing left in the form section. Reset to nothing: grouping is semantic here, and the visual grouping is already done by .field, .checkbox-row or a .control-section. min-width: 0 is load-bearing, not tidiness: the UA stylesheet gives fieldset `min-inline-size: min-content`, which makes it refuse to shrink below its widest child and quietly overflow any flex or grid column it sits in — including .field-control. */ fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } /* The legend labels the group, so it takes the same treatment as a field label at the rail's 13px size. */ legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--text-primary); } /* ========================================================================== Buttons ========================================================================== */ /* -------------------------------------------------------------------------- CONTRACT — .button-row WHAT IT IS A horizontal row of controls, with its own vertical rhythm as a panel child. WHEN TO USE Any group of buttons, and any row mixing buttons with a select or a line of metadata. NOT a separate thing from a toolbar of selectable tokens — a .btn-chip row is still a .button-row container. MARKUP
(verified example, from tests/archetype-workbench.html) STATES None. DOES NOT DO Does not stretch its children — align-items: center is deliberate, so a text span beside a button sits on the same line rather than being stretched with its text at the top. Does not right-align or space-between. ACCENT POLICY Never carries accent itself. -------------------------------------------------------------------------- */ .button-row { display: flex; flex-wrap: wrap; /* align-items: center (2026-09-24). Without it a flex row defaults to `stretch`, so a non-button child -- a metadata span, a select, a helper line sitting beside the buttons -- is stretched to the row's full height and its single line of text renders at the TOP of that stretched box. The BOXES were already centred (all 40px, spread 0.00px), which is why this reads as fine until you measure the text: the span's text centre sat 8.59px above the buttons' at 1338.19 against 1346.78. Every other flex row in this file already declares align-items deliberately -- .log-actions, .status-bar, .status-left, .checkbox-item, .switch-item, .header-left and .footer-inner all centre; .info-row uses baseline and .toast flex-start on purpose. .button-row was the only one that declared none. */ align-items: center; gap: 10px; /* Even space above and below (2026-09-23). .field carries margin-bottom: 16px and nothing carried margin-top, so a button row followed by a field got 16px above and 0 below — "Source file" sat hard against the buttons over it. 16px is the .control-section step from the spacing scale, and it collapses against .field's own 16px rather than stacking to 32. The first/last resets keep a row flush with the panel's own padding when it opens or closes a panel. */ margin: 16px 0; } .button-row:first-child { margin-top: 0; } .button-row:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- CONTRACT — .btn + .btn-primary / .btn-secondary / .btn-neutral WHAT IT IS The standard action button. Always combined with exactly one tier. WHEN TO USE .btn-primary the ONE committing action in a view — apply, load, save, start. Orange. At most one per panel. .btn-secondary the positive primary-path action that is not the commit — play, resume, connect. Blue. .btn-neutral plain utility — stop, clear, export, copy, revert. Bordered, no fill. NOT for a toolbar-scale control: that is .btn-chip. Since 2026-10-05 the two are nearly the same HEIGHT — 28.8px against 28.4px — so size no longer tells you which to reach for. Type does: 14px Lexend Deca 700 performing an action, against 12px 500 holding a selection. NOT for an icon-only control: that is .btn-icon, used ALONE, never with .btn. MARKUP (verified example, from tests/archetype-workbench.html) STATES default, hover (tier-specific), focus-visible (blue ring; orange on .btn-primary), active (1px translateY), disabled (opacity 0.6). No selected state — a button that holds a selection is .btn-chip. DOES NOT DO Does not size itself to a container. Does not carry an icon slot. Its label DOES wrap if it is longer than the container — unlike .btn-chip and .theme-pill, which set white-space: nowrap. That difference is deliberate: a chip holds a short token, .btn can hold a sentence, and for .btn wrapping is safer than overflowing. See BATCH-FINDINGS item 15. Keep labels short anyway, which the workbench copy rules ask for. ACCENT POLICY .btn-primary and .btn-secondary are accent-filled: they ARE the action, which is what accent is for. .btn-neutral carries none. UNCHANGED under data-color-critical, in geometry as well as in colour: that scope removes accent, and a smaller orange button is still orange. The 2026-10-05 tightening is global and argued from density, so the scope has nothing left to say about this control. -------------------------------------------------------------------------- */ .btn { font-family: var(--font-heading); /* Lexend Deca */ border: none; border-radius: 999px; /* pill */ /* Label centring is explicit (2026-09-23): a bare (UNVERIFIED example — no reviewed page uses it; two consumers hand-rolled it as .login-link and .login-alt__toggle) STATES default, hover (underline), focus-visible (blue ring), disabled. No active and no selected state. DOES NOT DO Does not submit. Keep type="button": a bare (UNVERIFIED example — both consumers use an inline style="width:100%", which this replaces) STATES Inherits every .btn state unchanged. DOES NOT DO Does not change padding, height or font. Width only. ACCENT POLICY None of its own — the tier decides. -------------------------------------------------------------------------- */ /* Width modifier (2026-10-06). Both consumers reached for an inline style="width:100%" on their sign-in button, which is the signal that a modifier was missing rather than that a one-off was wanted. One declaration, so the inline style has somewhere to go. */ .btn--block { width: 100%; } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } /* ========================================================================== Parameter controls — sliders, switches, swatches, icon buttons ========================================================================== Added 2026-09-22. None of these had any rule in this file, so a tuner page's most-repeated controls were also its least designed — and an unstyled native control is painted in the VISITOR'S OS accent colour, not this theme's. Observed in the wild 2026-09-22 as pink sliders on a macOS machine whose system accent was pink; the same mechanism the focus-ring reset near the top of this file was added for ("green outline on a blue button"). Styling these is what stops the OS leaking into the page. Accent rule for this whole section: colour signals ACTION or STATE, never decoration or identity. A control at rest is neither, so it is fully neutral; accent appears only on focus, while dragging, or to mark a selection — always as the smallest area that still reads. Why this goes beyond taste: on a chroma-key, despill or colour-balance page the operator judges hue, spill and alpha edges in the video itself, and saturated chrome beside the preview shifts that judgement — simultaneous contrast is a real perceptual effect, and it is why colour tools sit in neutral surrounds. Blue rather than orange for focus/drag: the global :focus-visible ring is already blue, and orange is this file's attention bucket (note 6), which a control you are deliberately operating is not. ========================================================================== */ /* -------------------------------------------------------------------------- CONTRACT — input[type="range"] WHAT IT IS A slider: a 6px neutral track with an outlined ring thumb. WHEN TO USE A continuous numeric parameter, normally in a .control-row with a .badge--value showing the figure. NOT for a discrete choice of a few values — that is .radio-item or a select. MARKUP
42
(verified example, from tests/archetype-workbench.html) STATES default, focus-visible (accent-blue thumb border), active (blue border, slightly lifted fill), disabled. No hover. DOES NOT DO Does not show a filled portion on either side of the thumb — only Firefox can do that, and an engine-dependent slider is worse on a colour tool than a plain one. Does not display its own value; pair it with .badge--value. The control box is 24px tall for the hit area while the visible track stays 6px. ACCENT POLICY Fully neutral at rest. Accent-blue appears ONLY while focused or being dragged — transient, one control at a time. NOT neutralised under data-color-critical: that feedback is what tells you the tool is responding. -------------------------------------------------------------------------- */ input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; /* Governing rule 9 (2026-09-24). The track is drawn by the pseudo-element, not this box, so the input's own height is free: 24px gives a real drag target without thickening the visible 6px track by a pixel. Measured before this: 402 x 6 — a 6px-tall drag target, the worst hit area in the file. A transparent wrapper would have needed markup on every page; a transparent border would have fought the thumb's margin arithmetic. */ height: 24px; background: transparent; /* the track pseudo-element draws the bar */ cursor: pointer; } /* WebKit and Moz pseudo-elements must be written as SEPARATE rules — one unrecognised selector invalidates an entire selector list, so grouping them silently drops the rule in both engines. Deliberately NO filled/progress portion on either side of the thumb: Firefox can do it (::-moz-range-progress), WebKit cannot without script, so implementing it would make the same tuner render differently in Chrome and Firefox. On a colour-judgement tool that inconsistency is worse than a plainer control — do not "fix" this by adding the Firefox half alone. (2026-09-22) */ input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: var(--panel-inset); border: 1px solid var(--border); border-radius: 999px; } input[type="range"]::-moz-range-track { height: 6px; background: var(--panel-inset); border: 1px solid var(--border); border-radius: 999px; } /* Light stroke, dark fill (2026-09-23). History, because this rule has now been through three passes: it began --panel-soft on --panel (one tone apart — the handle was unfindable), was changed 2026-09-22 to a solid --text-muted fill to make it visible, and that solid light disc then read as too prominent beside a video preview. An OUTLINED thumb resolves both: a --panel-inset fill recedes like the track it sits in, while a light --text-muted ring keeps it locatable. No box-shadow — it added exactly the lift being removed here. --text-muted on a border, rather than a new --border-light: the token's documented scope was widened on 2026-09-22 to cover neutral control handles, and this is the same handle, just drawn as a ring instead of a disc. That is NOT the .theme-pill situation, where --text-on-accent would have described neither text nor an accent. A --border-light holding #9aa1a8 would be a second name for a value that already has one, which is how remaps go wrong. THUMB OFFSET — derived from measurement, not theory (2026-09-23): Measured at 3x device scale, the track renders 6.00px tall in total (#2e343d border, #0d171e fill, #2e343d border), so `height: 6px` INCLUDES its 1px borders. An earlier comment here derived the offset as -((16 - (6 + 2)) / 2), treating 6px as a content height with borders added — content-box arithmetic in a border-box file. It was wrong. Measured with that -4px value: track centre 748.00, thumb centre 750.00 — the thumb sat 2.00px BELOW the track's centre line. The same measurement shows WebKit positions the thumb against the track's CONTENT box (inside the 1px top border), not its border box: thumbTop = trackTop + margin-top + 1. So, to centre: margin-top = (trackHeight / 2) - (thumbHeight / 2) - 1. For a 13px thumb on a 6px track: 3 - 6.5 - 1 = -4.5px. Re-derive from that formula if either size changes. Firefox centres its own thumb and must NOT get the offset. */ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; margin-top: -4.5px; border-radius: 50%; background: var(--panel-inset); border: 1px solid var(--text-muted); transition: background 0.12s ease, border-color 0.12s ease; } input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--panel-inset); border: 1px solid var(--text-muted); transition: background 0.12s ease, border-color 0.12s ease; } input[type="range"]:focus-visible::-webkit-slider-thumb { border-color: var(--accent-blue); } input[type="range"]:focus-visible::-moz-range-thumb { border-color: var(--accent-blue); } /* Drag state is carried by the border, not by lightening the fill — a light fill on drag would reintroduce the solid disc this treatment removes. The fill lifts only to --panel-soft, which stays darker than the stroke. (2026-09-23) */ input[type="range"]:active::-webkit-slider-thumb { background: var(--panel-soft); border-color: var(--accent-blue); } input[type="range"]:active::-moz-range-thumb { background: var(--panel-soft); border-color: var(--accent-blue); } /* Disabled (2026-09-24). This was the only control in the file with no disabled treatment at all, so a locked parameter was pixel-identical to a live one — functional, not cosmetic, on a tuner page where a mode lock freezes parameters. Dims the whole control rather than the thumb alone, so the track reads as inactive too. */ input[type="range"]:disabled { opacity: 0.6; cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { input[type="range"]::-webkit-slider-thumb { transition: none; } input[type="range"]::-moz-range-thumb { transition: none; } } /* Switch. Hooked on [role="switch"] rather than a class, so the visual state can't drift from the state assistive tech is told about — same reasoning as [aria-invalid="true"] in the form section. The theme's plain checkbox (.checkbox-item) keeps its own blue accent-color: a switch is a different control, not a restyled checkbox. NEUTRAL IN BOTH STATES (2026-09-22, decided against an earlier draft that tinted the on-state blue). The argument for blue was that a toggle's on-state IS state, so accent is earned rather than decorative — true of one switch, false of a rail carrying five at once, where five blue tracks read as decoration by volume whatever each one means individually. State is carried by THREE things, only one of which was ever colour — thumb position, thumb luminance (--text-muted → --text-primary), and the track/border lift. That redundancy is exactly what makes dropping the tint cost nothing: no information lives in the colour. */ input[type="checkbox"][role="switch"] { -webkit-appearance: none; appearance: none; position: relative; width: 34px; height: 20px; flex-shrink: 0; margin: 0; border-radius: 999px; background: var(--panel-inset); border: 1px solid var(--border); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } /* Travel = track content box (34 - 2px border) - thumb (14) - inset (2 * 2) = 14px. Re-derive together with the sizes above. */ input[type="checkbox"][role="switch"]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-muted); transition: transform 0.15s ease, background 0.15s ease; } input[type="checkbox"][role="switch"]:checked { background: var(--panel-soft); border-color: var(--border-strong); } input[type="checkbox"][role="switch"]:checked::after { transform: translateX(14px); background: var(--text-primary); } input[type="checkbox"][role="switch"]:disabled { opacity: 0.6; cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { input[type="checkbox"][role="switch"], input[type="checkbox"][role="switch"]::after { transition: none; } } /* Switch row (2026-09-23). Nothing in this file owned "switch + label + info affordance", so a page had to hold them in an ad-hoc container — the archetype used a bare

, which is display: block, so the three boxes aligned on the TEXT BASELINE instead of a common centre. Measured before this rule: switch centreY 160.53, label 165.53, .btn-icon 166.53 — a 6px spread, with the switch reading high. Structure follows .checkbox-item (display: flex + align-items: center + gap) rather than inventing a pattern; the gap and the row-to-row margin are both steps on the documented spacing scale. Deliberately NOT .checkbox-item itself: that rule sizes input[type="checkbox"] to 17x17, and while the switch rule out-orders it today, relying on source order to protect a control's dimensions is a trap for whoever reorders this file. The explicit line-height on the label matters as much as align-items: centring aligns BOXES, and a label left on `normal` gets whatever line box the font's metrics produce, so the text can still read low inside a correctly centred box. No compensating offsets anywhere: the switch, the label and the icon all keep their own geometry and the flex container does the aligning. */ /* -------------------------------------------------------------------------- CONTRACT — .switch-item + input[type="checkbox"][role="switch"] WHAT IT IS An on/off control that takes effect immediately, with its label and an optional affordance. WHEN TO USE A setting that applies the moment it is toggled. NOT for a form value submitted later — that is a checkbox. The distinction is when the change takes effect, not how it looks. MARKUP

(verified example, from tests/archetype-workbench.html) STATES default, checked, disabled. No hover state. DOES NOT DO Does not submit anything. role="switch" is REQUIRED — without it the checkbox rule applies and you get a box instead of a track. The two rules exclude each other explicitly rather than relying on source order. ACCENT POLICY NONE, in either state — the only control here that is neutral when on. Thumb position and thumb luminance carry the state. Five accented tracks in one rail would be decoration by volume. Nothing to neutralise under data-color-critical. -------------------------------------------------------------------------- */ .switch-item { display: flex; align-items: center; gap: 10px; } .switch-item + .switch-item { margin-top: 12px; } .switch-item label { line-height: 1.2; color: var(--text-primary); } /* -------------------------------------------------------------------------- CONTRACT — .notice-item WHAT IT IS A line of text with a dismiss control, as one row. WHEN TO USE A local, dismissable message inside a panel — "key applied from preset X". NOT for a transient corner notification — that is .toast. NOT for a persistent mode or state — that is .status-strip, which has no dismiss. MARKUP

Key applied from preset “Studio A”

(verified example, from tests/archetype-workbench.html) STATES None. Its presence is the state; the page removes it. DOES NOT DO Does not dismiss itself. Its first child takes flex: 1, so the dismiss sits at the row's END rather than crowding the end of the sentence — do not add a spacer. ACCENT POLICY Never carries accent. -------------------------------------------------------------------------- */ /* Inline notice with a dismiss (2026-09-24). The last of the controls the workbench archetype had to hold in a bare

: a line of status text with a .btn-icon dismiss beside it. Inline layout gave it exactly one space character of separation — about 4px — so the affordance crowded the text it belonged to. Same structure as .checkbox-item and .switch-item (flex + align-items: center, per note 10) with a wider gap: 12px from the spacing scale rather than their 10px, because here the two parts are a message and its control rather than a control and its own label, and they should not read as one tight unit. The text takes flex: 1 so the dismiss stays at the row's end when the notice is short, instead of sitting immediately after the words. */ .notice-item { display: flex; align-items: center; gap: 12px; margin: 12px 0; } .notice-item:first-child { margin-top: 0; } .notice-item:last-child { margin-bottom: 0; } .notice-item > :first-child { flex: 1; min-width: 0; line-height: 1.4; color: var(--text-primary); } /* Icon-only button (2026-09-22) — presets, small tool actions, an info affordance beside a label. Named into the .btn-primary/.btn-secondary family, but use it ALONE, not combined with .btn: .btn's 10px/22px padding fights the fixed square size. (Since 2026-10-05 .btn is 6px/15px and 28.8px tall, so an icon button beside one is now the TALLER of the two at 30px — it was the shorter until that change. Mixing them in a row has always been a judgement call about rhythm; it is a different-looking call now.) Deliberately not filled — a row of six filled buttons is six competing accents. The selected one carries a 1px --accent-blue border, the smallest saturated area that still reads across a row. Always give it an aria-label; there is no visible text. */ /* Dark fill, lighter stroke (2026-09-23). These were a --panel-soft fill on a --panel rail, i.e. LIGHTER than their surroundings, so a row of six read as six bright dots competing with the preview. Recessed --panel-inset with a --border-strong outline makes them read as wells rather than chips — the stroke does the work, the fill stays quiet. */ /* -------------------------------------------------------------------------- CONTRACT — .btn-icon WHAT IT IS A 30px round button holding one icon. WHEN TO USE Presets, an inline dismiss, an info affordance beside a label. Always with an aria-label — there is no visible text. NOT combined with .btn: .btn's padding fights the fixed square size. NOT for a labelled action — that is .btn. MARKUP (verified example, from tests/archetype-workbench.html) STATES default, hover, selected via aria-pressed, disabled. DOES NOT DO Does not size its own icon beyond 10px, and does not accept a text glyph in place of an SVG: a character sits on its font's own metrics, not the circle's centre — "×" measured 1.00px low before it was replaced. ACCENT POLICY Neutral at rest. Selected takes a 1px accent-blue border only. Goes fully neutral under data-color-critical. -------------------------------------------------------------------------- */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; background: var(--panel-inset); border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text-primary); font-family: var(--font-heading); font-size: 12px; font-weight: 700; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .btn-icon:hover:not(:disabled) { background: var(--panel-soft); border-color: var(--text-muted); } .btn-icon[aria-pressed="true"] { background: var(--panel-soft); border-color: var(--accent-blue); } /* Give .btn-icon an SVG, not a text glyph (2026-09-24). An icon button centres its BOX correctly via note 10, but a character still sits wherever its own font metrics put it: measured at 3x, "×" (U+00D7 MULTIPLICATION SIGN) painted 1.00px BELOW the circle's centre line, because it is a math operator positioned on the font's math axis rather than the line-box centre. Note 10 forbids correcting that with a nudge, and it would be the wrong fix anyway — it is per-glyph and per-face, so the next icon would need its own number. An SVG is centred geometrically instead, and inherits the button's colour through currentColor. This matches .drawer-panel__close, which already carries an inline SVG cross. 10px, reduced from 12px (2026-09-24): at 12px the cross painted 8.67px of ink in a 30px circle and read heavier than the control warrants — a dismiss is a secondary action. 10px lands the ink near 7px, between the old text glyph's 5.67px (too faint to read as a control) and the 12px SVG's 8.67px. The drawn cross occupies 10 of the viewBox's 16 units, so ink is roughly 0.72 of whatever size is set here. */ .btn-icon svg { display: block; width: 10px; height: 10px; } .btn-icon:disabled { opacity: 0.6; cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { .btn-icon { transition: none; } } /* Toolbar chip (2026-09-22) — a small neutral pill for toolbar-scale controls: a mode toggle (Preview / Live), a row of selectable file tokens, or a compact action (Reset all, Load preset…). Those were three separate gaps on the workbench archetype, all rendering as white native browser buttons; they are the same shape, so this is one component, not three. Geometry is .theme-pill's (5px/14px, 12px, 999px) — this file's existing small-pill precedent — with the neutral surface language of .btn-neutral / .btn-icon / .color-swatch instead of the header's white outline, because these sit on a panel or the page rather than on the brand bar. It was explicitly NOT .btn's geometry, which at the time was 10px/22px and swamped a toolbar. That argument expired on 2026-10-05, when .btn went to 6px/15px globally: a chip is 28.4px tall, a .btn 28.8px. The two components stay separate on the distinction that actually survived — a chip is 12px weight 500 on a neutral fill and HOLDS A SELECTION (aria-pressed / aria-selected); a .btn is 14px weight 700 and PERFORMS AN ACTION. Size was never the real difference, only the visible one. Do not merge them because they now measure alike. (Note the chip's padding-y is 6px, not the 5px this paragraph inherits from .theme-pill's geometry — see the rule's own comment below for why.) --panel-soft is the theme's neutral CONTROL fill, shared with the three components above, so a chip reads as the same kind of thing as an icon button beside it. The other two steps of the neutral ramp, if a page ever needs a quieter chip, are --panel and --panel-inset. Named .btn-chip rather than .chip: a generic name in a shared theme is exactly how the .swatch collision happened (see BATCH-FINDINGS item 7), and one downstream page already defines a bare .chip of its own. */ /* -------------------------------------------------------------------------- CONTRACT — .btn-chip WHAT IT IS A small neutral pill for toolbar-scale controls. WHEN TO USE A mode toggle (Preview / Live), a row of selectable tokens, a compact action, or a tab in a [role="tablist"]. NOT for a page's main action — that is .btn. NOT for a non-interactive status pill — that is .badge. MARKUP toggle (verified example, from tests/archetype-workbench.html) tab

...
(UNVERIFIED example — no reviewed page uses a tablist yet) STATES default, hover, selected via aria-pressed OR aria-selected, disabled. No active state distinct from hover. DOES NOT DO Does not hide or show tab panels — that is the [hidden] attribute on the panel, owned by the page. ACCENT POLICY Neutral at rest. Selected takes a 1px accent-blue border only — the smallest area that reads. Goes fully neutral under data-color-critical. -------------------------------------------------------------------------- */ .btn-chip { /* Same explicit centring as .btn and .btn-icon (2026-09-23) — this was the last control still relying on the default line box, which puts the label wherever the font's metrics land rather than in the middle of the pill. */ display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; background: var(--panel-soft); border: 1px solid var(--border); border-radius: 999px; color: var(--text-primary); /* 6px, not the original 5px: the explicit line-height above replaced the font's own `normal` leading (about 1.45 at this size) and took 3px off the rendered height. Padding gives it back, so a chip stays the height it was before the centring fix. (2026-09-23) */ padding: 6px 14px; font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease; } .btn-chip:hover:not(:disabled) { background: var(--panel); border-color: var(--border-strong); } /* Two hooks, one treatment (2026-09-24): aria-pressed for a toggle, and aria-selected so the same chip serves as a [role="tab"] without a third component. A tab strip is .button-row + .btn-chip + ARIA + [hidden]. NOTE .detail-rail__tab is NOT a tab despite the name — it is a step picker that borrowed the word; don't reach for it expecting tabs. */ .btn-chip[aria-pressed="true"], .btn-chip[aria-selected="true"] { background: var(--panel); border-color: var(--accent-blue); } .btn-chip:disabled { opacity: 0.6; cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { .btn-chip { transition: none; } } /* -------------------------------------------------------------------------- CONTRACT — .color-swatch / .color-swatch__sample WHAT IT IS A neutral pill naming a colour, with a 10px sample of the literal colour inside it. WHEN TO USE Choosing a key colour on a chroma page, or any control where the colour itself is the value. NOT for a status colour — the theme has two hues and a swatch is not one of them. NOT for a general toggle — that is .btn-chip. MARKUP (verified example, from tests/archetype-workbench.html) STATES default, hover, selected via aria-pressed. DOES NOT DO Does not carry its own colour — --swatch-color is set INLINE, per element. That is the ONE sanctioned inline style in this system: a key colour is data the control carries, not styling, and it cannot come from a token without putting literal green and blue hexes in this file, which note 6 forbids. A sample with no --swatch-color falls back to --panel-inset. ACCENT POLICY The pill is neutral; selection is a --border-strong ring plus aria-pressed. AREA, not hue, is what is controlled here: a 10px sample is ~95% less saturated surface than a full-size chip. UNCHANGED under data-color-critical, and that is correct rather than an omission: the control is already neutral at rest, so the scope has nothing to remove. (It WAS in the scope's selector list until 2026-10-01, setting the border colour it already had — see the note there.) -------------------------------------------------------------------------- */ /* Colour swatch (2026-09-22). A chroma key colour is one of the very few literal colours in this system: the hue IS the data the control carries, so it cannot come from a token. What CAN be controlled is its AREA — a 10px sample inside a neutral pill puts roughly 95% less saturated surface beside the preview than a full-size colour chip. Named .color-swatch, NOT .swatch: chromakey already defines `.preset-btn .swatch` in both styles.css and setup-brand.css, on two pages that also link this file. A page's scoped rule only wins for the properties it declares, so a bare .swatch here would leak this rule's padding, display, gap and 999px radius onto a 16px circular preset swatch — a break nobody would trace back to the theme. Checked 2026-09-22: .color-swatch is free in every locally-cloned consumer. THE SAMPLE COLOUR IS SET INLINE, per element: This is the ONE sanctioned inline style in this system. It is permitted because it is data, not styling — the same reason a page hardcodes a stream name. Do NOT add key-colour hexes to this file: green and blue as literal values here would read as status colours, which note 6 forbids. Selection is carried by aria-pressed, not a class, matching [aria-invalid] and [role="switch"]. (.lang-switch__btn still uses .active — a known inconsistency, deliberately not migrated in this pass.) */ .color-swatch { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 8px; background: var(--panel-soft); border: 1px solid var(--border); border-radius: 999px; color: var(--text-primary); font-family: inherit; font-size: 13px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .color-swatch:hover { border-color: var(--border-strong); } .color-swatch[aria-pressed="true"] { background: var(--panel); border-color: var(--border-strong); box-shadow: inset 0 0 0 1px var(--border-strong); } .color-swatch__sample { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--swatch-color, var(--panel-inset)); } @media (prefers-reduced-motion: reduce) { .color-swatch { transition: none; } } /* ========================================================================== Monitor / player surface ========================================================================== */ /* -------------------------------------------------------------------------- CONTRACT — .player-panel / .video-surface / .video-el / .status-bar WHAT IT IS A video panel with a status bar beneath it. WHEN TO USE Video inside a .container page — a player demo, a diagnostics page — where the video needs a status line. NOT for a workbench's hero preview — that is .monitor, which has no status bar and fills the main column. MARKUP
Paused Paused (medianotavailable)
Latency — · Bitrate —
(verified example, from product-sample.html — the approved reference uses .monitor instead) STATES None itself; the .badge inside carries the player state. DOES NOT DO .player-panel sets padding: 0 deliberately — that zero is LOAD-BEARING since .panel gained padding, and it is what keeps the video flush to the panel edge. Its 16:10 ratio differs from .monitor's 16:9: the status bar sits in the difference. ACCENT POLICY Never carries accent. The .badge inside does, by variant. -------------------------------------------------------------------------- */ .player-panel { overflow: hidden; /* clips the video element to the panel's border-radius */ /* Load-bearing since 2026-09-22: .panel now carries 20px padding, so this zero is what keeps the video flush to the panel edge. Before that it was merely redundant. */ padding: 0; } .video-surface { position: relative; width: 100%; aspect-ratio: 16 / 10.5; background: #000000; display: flex; align-items: center; justify-content: center; } .video-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000000; } .status-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 14px 20px; } .status-left { display: flex; align-items: center; gap: 10px; } /* ========================================================================== Badges — status pills ========================================================================== */ /* -------------------------------------------------------------------------- CONTRACT — .badge + .paused / .playing / .loading WHAT IT IS A non-interactive status pill. WHEN TO USE The current state of a stream, a player, a job — paused, playing, loading. NOT for a numeric readout — that is .badge--value. NOT for anything clickable — that is .btn-chip. NOT for a sentence about state — that is .status-strip. MARKUP Live (verified example, from tests/archetype-workbench.html) STATES Three variants, not states: .paused (orange), .playing and .loading (both blue). The base class alone has NO background — it is unfinished without a variant. DOES NOT DO Does not animate, ever — including .loading's dot. Note 5 forbids it: state is already carried by colour and label, and motion on a page someone sits with reads as distracting rather than informative. ACCENT POLICY Accent-filled by variant — orange for attention (paused), blue for positive (playing, loading). This is state, which is what accent is for. There is no third hue: if you need a fourth meaning, the LABEL carries it. -------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 13px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; } .badge.paused { background: var(--accent-orange); color: var(--text-on-accent); } .badge.playing { background: var(--accent-blue); color: var(--text-on-accent); } .badge.loading { background: var(--accent-blue); color: var(--text-on-accent); } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Static, not animated — deliberate (2026-09-01, per repeated direct feedback on two separate product-mode pages, instant-test/instanttest.html and captions-workflow/index.html): infinite looping animations on status dots/spinners (pulse, breathe, ping, spin) read as distracting rather than informative on a page a visitor sits with. State changes (paused → loading → playing) already carry the state via color/label; motion adds nothing the badge doesn't already say. Applies to every status/loading indicator in this theme, not just this one dot — don't reintroduce `infinite` animations elsewhere in this file without checking with the user first. */ .badge.loading .dot { opacity: 0.9; } /* -------------------------------------------------------------------------- CONTRACT — .badge--value WHAT IT IS A neutral mono readout of a number. WHEN TO USE The current value of a slider or parameter, normally in a .control-row. NOT for state — that is .badge with a variant. A value is data, not a status. MARKUP 42 (verified example, from tests/archetype-workbench.html) STATES None. DOES NOT DO Does not format its number — the page does. Does not right-align itself; .control-row's grid does. ACCENT POLICY NEVER carries accent. A value is neither an action nor a state. tabular-nums is functional, not decorative: it stops the badge changing width, and the row reflowing, while a slider is dragged. -------------------------------------------------------------------------- */ /* Numeric readout badge (2026-09-22). A value is DATA — not an action and not a state — so it takes no accent. The base .badge sets no background at all, which meant a page wanting a neutral readout had to reach for .badge.playing (blue) or invent something; this is the missing variant. Uses the same "field-shaped box" language as .info-row.wrap .value (--panel-inset + --border), so a readout looks like every other readout in this theme. Mono + tabular-nums is functional, not stylistic: it stops the number changing width, and the row reflowing, while a slider is dragged. */ .badge--value { background: var(--panel-inset); border: 1px solid var(--border); color: var(--text-primary); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 400; padding: 2px 8px; } .status-left .status-text, .status-right { font-size: 12px; color: var(--text-primary); } /* ========================================================================== Stats / info panels — label/value row list ========================================================================== */ /* -------------------------------------------------------------------------- CONTRACT — .stats-row + .stats-panel WHAT IT IS A two-column grid of panels (.stats-row), and the padded panel companion that sits in it (.stats-panel). WHEN TO USE Two panels side by side. Despite the name nothing in .stats-row is stats-specific — it is the theme's only two-column grid, and the approved reference uses it for Foreground/Background. NOT for three or more columns; there is no such rule. MARKUP

Foreground

...

Background

...
(verified example, from tests/archetype-workbench.html) STATES None. DOES NOT DO Collapses to one column below 640px VIEWPORT — a viewport test, so a narrow panel at a wide viewport stays two-column. That is why .field auto-stacks inside a workbench; see BATCH-FINDINGS item 11. ACCENT POLICY Never carries accent. -------------------------------------------------------------------------- */ /* Panel-level vertical rhythm (2026-09-23). A panel's direct children each have to carry their own margin — .panel sets padding, not a flex gap — and only .field (16px bottom) and .checkbox-row (20px) ever did. .button-row got 16px 0 on 2026-09-22; .stats-row, .status-strip and bare tables had none at all, so any sequence mixing them spaced unevenly. All three now match .field's 16px from the documented spacing scale, with first/last resets so a child opening or closing a panel stays flush with the panel's own padding. Adjacent margins collapse to 16px rather than stacking to 32. .checkbox-row keeps its 20px: it carries border-top/border-bottom and acts as a section divider rather than an ordinary child, and it is shipped. .control-row's 14px is the rail's internal row rhythm inside .control-section, not a panel-level gap — both deliberately left alone. */ .stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 16px 0; } .stats-row:first-child { margin-top: 0; } .stats-row:last-child { margin-bottom: 0; } @media (max-width: 640px) { .stats-row { grid-template-columns: 1fr; } } .stats-panel { padding: 20px; } .stats-panel h2 { font-family: var(--font-heading); margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--text-primary); } /* -------------------------------------------------------------------------- CONTRACT — .info-row / .info-row.wrap WHAT IT IS A label/value line, optionally with the value in a field-shaped box on its own line. WHEN TO USE Read-only facts inside a panel — stream state, latency, a URL, an ID. Use .wrap when the value is long enough to need its own line. NOT for editable values — that is .field. NOT for more than two columns — that is a table. MARKUP
State Live
(verified example, from tests/archetype-workbench.html) STATES None. DOES NOT DO Does not truncate a long value — .wrap breaks it instead. Its last child drops the bottom border, so a list ends on content rather than a rule. ACCENT POLICY Never carries accent itself. A .badge inside a value may. -------------------------------------------------------------------------- */ .info-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; } .info-row:last-child { border-bottom: none; } /* Use for long values (URLs, IDs) that need to wrap onto their own line instead of squeezing next to the label */ .info-row.wrap { flex-direction: column; gap: 6px; align-items: stretch; padding: 10px 0; } .info-row .label { color: var(--text-primary); flex-shrink: 0; } .info-row .value { color: var(--text-primary); font-weight: 500; text-align: right; } /* Renders as a field-shaped box (background/border, --panel-inset) — matching selects/inputs above, which is what reads as "a box" now, not the text color (--text-secondary is white like everything else). */ .info-row.wrap .value { text-align: left; word-break: break-all; font-weight: 400; font-family: var(--font-mono); font-size: 13.5px; color: var(--text-secondary); background: var(--panel-inset); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; } /* -------------------------------------------------------------------------- CONTRACT — .raw-toggle + .raw-payload WHAT IT IS The theme's only disclosure control, and its body. WHEN TO USE Hiding machine detail behind a click — a raw payload, a diagnostic dump, an overlay section. NOT for an inline explanation beside a control — that is a .btn-icon with aria-expanded plus a .helper (see the tooltip non-rule). .raw-toggle is full-width with its chevron at the far right: it is a section header, not an affordance. MARKUP
...
(verified example, from tests/archetype-workbench.html) STATES aria-expanded false/true, which rotates the chevron. Hover tints the label blue. DOES NOT DO Does not open or close anything — the page toggles .raw-payload's .open class and the aria-expanded value. The CSS only reflects them. ACCENT POLICY Accent-blue on hover only. The chevron rotation, not colour, carries the open state. -------------------------------------------------------------------------- */ /* Expandable "raw payload" disclosure row */ .raw-toggle { width: 100%; background: none; border: none; display: flex; justify-content: space-between; align-items: center; padding: 7px 0 0; font-size: 13px; color: var(--text-primary); cursor: pointer; font-family: inherit; } .raw-toggle:hover { color: var(--accent-blue-hover); } .raw-toggle .chevron { transition: transform 0.15s ease; display: inline-block; } .raw-toggle[aria-expanded="true"] .chevron { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .raw-toggle .chevron { transition: none; } } .raw-payload { display: none; margin-top: 10px; background: var(--panel-inset); border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-primary); overflow-x: auto; white-space: pre; } .raw-payload.open { display: block; } /* ========================================================================== Data table — multi-column row list ========================================================================== Added 2026-09-22. This file had no table rules at all: a page needing more columns than .info-row's two either hand-rolled its own CSS or bent .info-row into a shape it doesn't fit. Borders, dividers and type sizes below are deliberately the ones .info-row already uses — 1px var(--border) row rules, no vertical lines, 14px text, last row unruled — so a table and a stats panel read as the same component family rather than two systems. The caption matches .stats-panel h2 (15px/700 heading font) for the same reason: a table's title and a panel's title are the same thing. A table wider than its container does NOT scroll on its own — put it in a wrapper with overflow-x: auto if the column count needs it. ========================================================================== */ /* -------------------------------------------------------------------------- CONTRACT — table / caption / th / td / td.num WHAT IT IS A multi-column row list. WHEN TO USE More columns than .info-row's two — a channel list, a breakdown, a log summary. NOT for two columns of facts — .info-row reads better and stacks. NOT for layout, ever. MARKUP
Ingest channels
StreamBitrate
XXXXX-YYYYY4200 kbps
(verified example, from tests/gap-probe.html — the approved reference has no table) STATES None. DOES NOT DO DOES NOT SCROLL. A table wider than its container overflows the page — put it in a wrapper with overflow-x: auto if the column count needs it. No zebra striping and no vertical rules: row rules only, matching .info-row. ACCENT POLICY Never carries accent. Put .num on BOTH the th and the td of a numeric column, or the header sits left of its figures. -------------------------------------------------------------------------- */ table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 16px 0; /* panel-level rhythm, 2026-09-23 — see the note on .stats-row */ } table:first-child { margin-top: 0; } table:last-child { margin-bottom: 0; } caption { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--text-primary); text-align: left; padding-bottom: 12px; } th { font-weight: 600; color: var(--text-primary); text-align: left; padding: 7px 12px 7px 0; border-bottom: 1px solid var(--border); white-space: nowrap; } td { color: var(--text-primary); padding: 7px 12px 7px 0; border-bottom: 1px solid var(--border); } /* Same as .info-row:last-child — the list ends on content, not on a rule. */ tbody tr:last-child td { border-bottom: none; } /* No trailing gutter on the last column, so the row's right edge lines up with the panel's content edge. */ th:last-child, td:last-child { padding-right: 0; } /* Right-aligned numerics, following .info-row .value's precedent (added 2026-09-22). Figures compare down a column far better right-aligned, and tabular-nums stops digit width shifting between rows as values change. */ th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; } /* Horizontal rule (2026-09-24).
had no rule, so it rendered as the browser's harsh near-white inset line — conspicuously unlike the eight places this file already draws a divider (.control-section, .info-row, .checkbox-row, .station, .detail-rail__head, .snippet__head, table rows, .field boundaries), every one of them 1px solid var(--border). This just makes the element agree with them. 16px from the spacing scale. */ hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; } /* Keyboard key (2026-09-24). Borrows .badge--value's language exactly — mono on --panel-inset with a --border edge — because a keycap and a numeric readout are the same idea: a small boxed literal. 4px is the structural step from the radius scale. */ kbd { font-family: var(--font-mono); font-size: 0.92em; background: var(--panel-inset); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--text-primary); } /* Standalone monospace (2026-09-24). --font-mono was previously reachable only through classes that drag a box or a layout with them (.log-line, .raw-payload, .info-row.wrap .value, .badge--value, .snippet pre code), so an inline literal in a sentence — a stream name, a parameter, a header — had nowhere to go. No box: this is inline type, not a container. The more specific rules above still win where they apply. */ code, samp { font-family: var(--font-mono); font-size: 0.92em; color: var(--text-primary); } /* NON-RULE: no blockquote (2026-09-24). A product page is an interface, not prose — there is no interface use for a pull quote. If you are quoting MACHINE output use .raw-payload; if you are calling out a mode or a consequence use .status-strip; if you are explaining a control use .helper. A customer quote belongs on a marketing page, which is a different tier with a different stylesheet. */ /* ========================================================================== NON-RULE: there is no skeleton loader in this theme (2026-09-24) ========================================================================== A shimmer, a pulsing block and a spinner are all infinite animations, which note 5 forbids outright. That rule came from direct, repeated feedback on two real product pages — it is not negotiable here, and a skeleton is the conventional answer it removes. WHAT YOU WANT WHAT TO USE -------------------------------------------------------------------------- Say that something is loading .badge.loading — already static by deliberate design Say it at more length .status-strip Show content arriving a ONE-SHOT entrance; note 5 permits these, see .toast and .station__body Show determinate progress below Show indeterminate progress nothing — give it a value ESCAPE HATCH, so this door is not closed by accident: if a real page turns up where content takes long enough that a held placeholder genuinely beats an empty panel, the answer is a STATIC placeholder block in --panel-soft at the content's shape — no motion — with the label carrying the meaning. That is ~8 lines and has not been written because no page has needed it. The risk to weigh at that point: a static skeleton can read as BROKEN rather than pending, which is the problem shimmer exists to solve. */ /* -------------------------------------------------------------------------- CONTRACT — progress WHAT IT IS A determinate progress bar. WHEN TO USE A task with a known proportion complete — an upload, an encode, a batch. NOT for "something is happening" with no known end — that is .badge.loading. NOT for a measurement within a range — that is meter. MARKUP (UNVERIFIED example — checked in a scratch page during development; no reviewed page uses progress) STATES None. DOES NOT DO MUST have a value. An indeterminate progress animates forever, which note 5 forbids. These rules suppress that animation in WebKit (measured) but Firefox is UNVERIFIED — do not rely on the theme for it. ACCENT POLICY Accent-blue fill. A determinate bar is STATE — how far along — which is what accent is for. -------------------------------------------------------------------------- */ /* Progress (2026-09-24). Same bug class as the pink sliders: with no rule at all, progress renders in the VISITOR'S OS accent colour. 6px track to match the slider, so a rail showing both reads as one system. The accent fill is defensible under the accent policy: a determinate progress bar is STATE — how far along something is — not decoration. DETERMINATE ONLY. This is a requirement, not a preference: an indeterminate (one with no value attribute) animates forever by definition, which note 5 forbids outright. Measured 2026-09-24 in Chrome 153, by screenshotting the same page at 600ms and 2400ms of virtual time and diffing: a RAW indeterminate progress animates, and the same element with appearance: none plus an explicit background is STATIC. So these rules do suppress it in WebKit. Firefox is NOT verified — no Firefox was available — so the animation: none on ::-moz-progress-bar is precautionary. Do not assume this file handles an indeterminate progress on every engine: give the element a value. */ progress { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: 999px; overflow: hidden; background: var(--panel-inset); } /* Separate rules per engine — one unrecognised selector invalidates a whole list, the same trap as the range pseudo-elements. */ progress::-webkit-progress-bar { background: var(--panel-inset); border-radius: 999px; } progress::-webkit-progress-value { background: var(--accent-blue); border-radius: 999px; } progress::-moz-progress-bar { background: var(--accent-blue); animation: none; } /* -------------------------------------------------------------------------- CONTRACT — meter WHAT IT IS A measurement within a known range, with optimum and sub-optimum bands. WHEN TO USE A level, a health figure, a quota — anything where the same number can be good or bad depending where it falls. NOT for task completion — that is progress. MARKUP (UNVERIFIED example — checked in a scratch page during development; no reviewed page uses meter) STATES None. Its bands are driven by value against low/high/optimum, which the page sets. DOES NOT DO Does not distinguish the two sub-optimum bands: both read as attention. The theme has two hues and the native green/yellow/red is forbidden by note 6, so the VALUE and its label must say which is which. ACCENT POLICY Accent-blue at optimum, accent-orange for both sub-optimum bands. This is state, not decoration. -------------------------------------------------------------------------- */ /* Meter (2026-09-24). Identical bug class to progress and the pink sliders — no rule, so the OS paints it. The reason meter needs more than progress does: its NATIVE rendering is green / yellow / red, straight through the three value bands. That is precisely the palette note 6 forbids on any product page. Collapsing those three bands onto this file's two-hue system is the whole point of styling it: optimum reads positive (--accent-blue), and BOTH sub-optimum bands read as attention (--accent-orange) — there is no third hue, so the two worse bands deliberately look the same. The value and its label carry which is which; colour only says whether it needs attention. Track matches progress and the slider at 6px. */ meter { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: 999px; overflow: hidden; background: var(--panel-inset); } meter::-webkit-meter-bar { background: var(--panel-inset); border-radius: 999px; } meter::-webkit-meter-optimum-value { background: var(--accent-blue); border-radius: 999px; } meter::-webkit-meter-suboptimum-value { background: var(--accent-orange); border-radius: 999px; } meter::-webkit-meter-even-less-good-value { background: var(--accent-orange); border-radius: 999px; } /* Firefox routes all three bands through one pseudo-element, switched by a pseudo-CLASS on the meter itself. Separate rules, same invalidation trap. */ meter::-moz-meter-bar { background: var(--accent-blue); } meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--accent-orange); } meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--accent-orange); } /* ========================================================================== Event log ========================================================================== */ /* -------------------------------------------------------------------------- CONTRACT — .log-panel / .log-box / .log-line / .ts / .evt WHAT IT IS A scrolling monospace event log in a panel. WHEN TO USE A running list of timestamped events — player events, connection changes, diagnostics. NOT for a one-off payload — that is .raw-payload. NOT for tabular data with columns — that is a table. MARKUP

Event log

00:00:41onPlay
(verified example, from product-sample.html — the approved reference has no log panel) STATES None. DOES NOT DO Does not auto-scroll, cap its line count, or virtualise — the page owns all three. Its fixed 210px height makes it the one scrolling container in the theme. ACCENT POLICY Never carries accent. Timestamps and events are both white; the mono face and the inset box carry the distinction. -------------------------------------------------------------------------- */ .log-panel { padding: 20px; } .log-panel h2 { font-family: var(--font-heading); margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--text-primary); } .log-box { background: var(--panel-inset); border: 1px solid var(--border); border-radius: 8px; height: 210px; overflow-y: auto; padding: 12px 14px; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; } .log-line { white-space: pre-wrap; word-break: break-word; } .log-line .ts { color: var(--text-primary); margin-right: 10px; } .log-line .evt { color: var(--text-primary); } /* -------------------------------------------------------------------------- CONTRACT — .log-actions / .copy-confirm WHAT IT IS A row of log controls, and the transient "Copied" line beside them. WHEN TO USE Under a .log-box — a copy button, a clear button, and the confirmation. NOT as a general toast — that is .toast, which is fixed to the corner. .copy-confirm is inline and local to its action. MARKUP
Copied
(verified example, from product-sample.html) STATES .copy-confirm has two: hidden (opacity 0) and .show. DOES NOT DO Does not time itself out — the page adds and removes .show. Does not animate beyond a 0.15s fade, which is a transition rather than a looping animation. ACCENT POLICY .copy-confirm is accent-blue-hover — a positive confirmation, which is state. The row itself carries none. -------------------------------------------------------------------------- */ .log-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; } .copy-confirm { font-size: 12px; color: var(--accent-blue-hover); opacity: 0; transition: opacity 0.15s ease; } .copy-confirm.show { opacity: 1; } @media (prefers-reduced-motion: reduce) { .copy-confirm { transition: none; } } /* ========================================================================== Permission / consent gate — full-screen overlay with a single primary action, shown before the page requests a sensitive browser permission (camera, mic, location, notifications, etc.) so the browser's own prompt doesn't come out of nowhere. Extracted from instanttest.html's camera/mic gate (2026-08) — optional section, only needed by pages that gate a permission request behind an explicit user action. Usage: swap .engage-title / .engage-hint copy for the page's own — title states the payoff, hint states what's about to be asked for and why (plus a privacy reassurance, e.g. "nothing is recorded or stored"). Deliberately no pulsing/blinking animation on .engage-btn: a blinking CTA reads as attention-grabbing at first glance but becomes visually noisy on a static page and can be uncomfortable for some users. A static shadow still stands out against the dimmed backdrop without relying on motion — see .btn-primary/#startButton-style CTAs elsewhere on the page for the same rule if they need extra emphasis. ========================================================================== */ /* -------------------------------------------------------------------------- CONTRACT — .engage-overlay and its parts WHAT IT IS A full-screen consent gate with a single large action, shown before the page asks for a browser permission. WHEN TO USE ONLY when the page requests a sensitive permission — camera, mic, location, notifications — so the browser's own prompt does not arrive unannounced. Skip the section entirely otherwise. NOT as a splash screen or a marketing interstitial. NOT for a dialog — that is .modal-overlay. MARKUP

Test your camera

We'll ask for camera and mic access. Nothing is recorded or stored.

(UNVERIFIED example — no page in this skill demonstrates the gate; instanttest.html downstream does) STATES default and .fadeout, which the page adds once permission is granted. DOES NOT DO Does not request the permission — the button's handler does. Deliberately no pulsing or blinking on the button: a blinking CTA becomes noise on a static page, and note 5 forbids it. The copy must say what is about to be asked for AND give the privacy reassurance. ACCENT POLICY .engage-btn is accent-orange — the page's one committing action, which is what accent is for. The overlay tint carries none. -------------------------------------------------------------------------- */ .engage-overlay { position: fixed; inset: 0; background: rgba(13, 23, 30, 0.88); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 15vh; z-index: 10002; transition: opacity 0.6s ease; } .engage-overlay.fadeout { opacity: 0; pointer-events: none; } .engage-content { display: flex; flex-direction: column; align-items: center; gap: 16px; } .engage-title { font-family: var(--font-heading); font-size: 1.3em; font-weight: 700; color: var(--text-primary); text-align: center; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: -4px; } .engage-hint { color: var(--text-primary); font-size: 14px; text-align: center; max-width: 380px; line-height: 1.5; opacity: 0.85; } .engage-btn { /* Label centring — see note 10 at the top of this file. */ display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; padding: 18px 42px; background: var(--accent-orange); color: var(--text-on-accent); border: none; border-radius: 999px; font-family: var(--font-heading); font-size: 1.15em; font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); transition: background-color 0.15s ease, transform 0.15s ease; opacity: 1; } .engage-btn.fadeout { opacity: 0; } .engage-btn:hover { background: var(--accent-orange-hover); transform: translateY(-2px); } @media (max-width: 640px) { .engage-btn { padding: 16px 28px; font-size: 1em; max-width: 90%; text-align: center; } } /* ========================================================================== Modal / dialog panel — centered overlay with a bordered panel, for a sign-in form, confirmation dialog, or settings panel. Optional — only include if the page needs one; skip it entirely otherwise. Added 2026-09-01, generalized from captions-workflow's sign-in popup restyle: same .panel radius/border as everywhere else in this theme (this is NOT a separate "modal" visual language, just the standard panel, centered over a dimmed backdrop) — reuse .field/.btn/.badge inside it rather than inventing modal-specific form styling. ========================================================================== */ /* -------------------------------------------------------------------------- CONTRACT — .modal-overlay / .modal-panel / __title / __sub WHAT IT IS A centred dialog over a dimmed backdrop. WHEN TO USE A sign-in form, a confirmation, a settings panel. NOT for content too large to centre — that is the drawer. NOT for a notification — that is .toast. MARKUP (verified example, from tests/archetype-stream.html, whose sign-in gate ships hidden. That page is also a standing test of the [hidden] rule below: if the gating breaks, the gate renders as a backdrop over the player.) STATES Hidden via [hidden] or aria-hidden. There is no "open" class in this file — visible is the default. DOES NOT DO Does not trap focus, close on Escape, or close on backdrop click — all three are the page's job. Reuse .field, .btn and .badge inside it: this is not a separate visual language, just the standard panel centred. CRITICAL: .modal-overlay sets display: flex, which OVERRIDES the UA [hidden] rule. Hiding it depends on the rule below that re-asserts display: none — without that,