/* The public site's COMPONENT layer (AC-M1-W7b-01, -02, -03, -05). * * Ported from the layout package Marcin generated outside this repository, which is a * REFERENCE IMPLEMENTATION: its markup, class names and structure are the deliverable and its * template language is not. `main.css` owns the base layer -- reset, body, headings, focus, * skip link -- and its rules are under test, so the package's duplicate base was NOT brought * across. Only what is genuinely additive is restated below. * * "THE CSS IS ADOPTABLE AS-IS" WAS FALSE, AND THIS FILE IS WHERE IT WAS FALSE (RC-079). The * delivered stylesheet inlined four colour literals and six rgb() values, two of which are * `--color-ink` and `--color-ink-inverse` written out by hand -- which is exactly what * AC-M1-W7b-05's positive control plants on purpose. Every one is now derived from the token * it was a copy of, through color-mix() rather than a new token, because the tokens are a * closed SET that docs/design-system.md declares and this file may not extend it. * * EVERY VALUE COMES FROM A TOKEN. No component reads a hue and none invents a spacing value: * per §3.3, a value not on the scale means the scale is wrong and the DOCUMENT is amended. */ /* --- additive base: the parts main.css does not already own ------------------------------ */ html { -webkit-text-size-adjust: 100%; } ::selection { background: var(--color-accent-secondary-muted); color: var(--color-ink); } /* Media never overflows its column. The image and gallery blocks depend on this. */ img, svg, video { max-width: 100%; height: auto; display: block; } .u-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- Layout primitives (§3.4) ------------------------------------------- */ /* ⑧ "jakieś dziwne coś przyklejone do stopki" -- the last block sat hard against the footer, with nothing between the content and the ink panel. v3's sections carry `padding: var(--space-8) var(--space-5)`; ours had padding on the inline axis only. */ /* THE OUTER ELEMENT SINCE AC-M5-W6-02: it wraps the card rather than sitting inside it, and it is what carries the measure -- for every page since `D-108`, which is why no modifier widens it any more. `padding-block` IS GONE, and `AC-M5-W6-07` is why. IT HELD TWO DIFFERENT PROPERTIES AT TWO DIFFERENT TIMES AND THE SECOND ONE WAS NOBODY'S. While `.l-page` sat INSIDE the shell, this was ⑧ — the content's own inset, the thing keeping the last block off the footer. `-02` made `.l-page` the OUTER element, and ⑧ moved with the content to `main#main` below. What was left here was no longer ⑧: it was a second helping of ①, the space around the card, which `.c-shell`'s `margin-block` already supplies. SO THE GAP ABOVE THE CARD WAS THE SUM OF TWO GAPS. Measured on the rendered page at 6259d98: `.l-page` padding-top 32px + card margin-top 32px = 64px above, and 64 + 32 = 96px below. A gap that is the sum of two former gaps answers "nie powinno być marginesu od góry" backwards. It is ONE value now and ① carries it, which is the declaration that was ruled to stand. The delivery's `.l-page` has no vertical padding either. Content that needs vertical rhythm gets it from `main#main` below — the element that holds CONTENT — never from the element that positions the card. */ /* DIVERGENCE, DECLARED (`D-108`). PACKAGE 18 CAPS THIS AT `--container-default` AND WE DO NOT. Marcin, unprompted, looking at staging: *"pozostałe strony poza SG mają inną szerokość niż SG. Wszystkie mają mieć taką jak SG"*. `D-091` IS NOT OVERTURNED; ITS OWN CONDITION IS MET. It read "every other page keeps the default measure UNTIL A DELIVERY SAYS OTHERWISE", and its argument was evidential: the delivery is a STANDALONE HOME PAGE and says nothing about the other twenty-one, so widening this on its authority would have been a guess. What arrived is not a wider delivery — it is the person the delivery was standing in for. THIS IS A DIVERGENCE AND NOT A DRIFT, and the difference is the whole point: package 18 genuinely puts the other pages at 68rem. `public-assets.test.ts` records it and cites this decision rather than being loosened, because a relaxed gate and a declared divergence look identical in a green run and are opposites. `--container-default` STAYS IN `tokens.css` although nothing reads it now: it is design-system vocabulary shared with the delivery, and dropping it would diverge the token file too, for nothing. It is not dead. */ .l-page { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); } /* THE CONTENT WRAPPER INSIDE THE CARD, AND ⑧'S ONLY HOME SINCE `AC-M5-W6-07`. The delivery has no `
` and its sections carry their own padding; ours keeps the landmark, so the vertical rhythm `.l-page` used to supply lives here instead — on the element that holds CONTENT rather than the one that holds the card. The block-END padding is ⑧: "jakieś dziwne coś przyklejone do stopki", the last block sitting hard against the ink panel. The home page overrides it to nothing: its sections are full-bleed inside the card, exactly as the delivery draws them. */ main#main { padding-inline: var(--gutter); padding-block: var(--space-6) var(--space-10); } /* `--flush`, NOT `--wide`, AND THE RENAME IS THE POINT (`D-108`). This rule has never been about width: it is what makes the home page's sections full-bleed inside the card, and it rode `.l-page--wide` only because the home page happened to be the wide one. Now that EVERY page is that width, a rule keyed on `--wide` would either match everything — insetting nothing, undoing `AC-M5-W8-03` on twenty-two pages — or keep a class whose name states a width it no longer confers. MEASURED BEFORE THE RENAME: home `main#main` padding 0/0, every other page 32px/56px. Removing the modifier from `core/home.html` without moving this rule would have given the home page back the inset and the top gap Marcin has asked about three times ("NADAL jest margines od góry"). The brief for this wave said `.l-page--wide` had no users left; it had this one. */ .l-page--flush > .c-shell > main#main { padding: 0; } /* THE SHELL IS A CARD WITH NO PADDING, AND ONE CLASS CANNOT SAY SO (measured, not reasoned). `.c-shell` set `padding: 0` and `.c-card` sets `padding: var(--space-5)` 370 lines later; both are one class, so the LATER one won and the shell rendered with 25px of padding it was documented as not having. Rendering `/en/instruments/region-en/` is what found it — the declaration was written, the comment described it, and the cascade disagreed with both. Two classes, so it cannot be lost to source order again. The space inside the card belongs to `main#main` above, which is the element that holds CONTENT; the card is a surface. */ .c-card.c-shell { padding: 0; } /* The page shell is the box the header, hero and split actually live in — it is narrower than the window (835px inside 924px, straddling the breakpoint), so those components query the SHELL, not the viewport. Same reason as @container measure below. */ /* THE SHELL IS THE CARD, AND THE DELIVERED CSS CANNOT TELL YOU THAT (AC-M1-W7d-02). * * It says only `container-type` here, and W7d read that silence as "the shell is unbounded". * It is a GAP, not a statement: no package has ever delivered a page shell. Every one of the * eight ships `blocks/`, `instruments/` and `partials/` and nothing above them, so `.c-shell` * is a class the design NAMES and never wraps -- the delivered stylesheet was written for * partials dropped into a shell it does not define. * * MEASURED FROM MARCIN'S MOCKUP rather than argued. Sampling a horizontal line across the * header of the design canvas thumbnail: * * x 0-105 rgb(248,239,226) ~ --color-surface the page ground * x 124-531 rgb(255,251,243) = --color-surface-raised the CARD * x 537-639 rgb(248,239,224) ~ --color-surface the ground again * * A bounded panel, centred, on a distinct ground. So the shell carries the width AND the * raised surface -- without the background there is no card, only a narrower column, which is * the same page with less of it. * * BOTH BOUNDS ARE LOAD-BEARING AND NOT REDUNDANT. `.c-shell` bounds the CARD, so the Deco band * and the header rule span it edge to edge. `.l-page` bounds the CONTENT COLUMN inside it, and * its `padding-inline: var(--gutter)` is what insets the text from the band's ends. Remove * either and the mockup stops being reproducible: without the first the card is the viewport, * without the second the text runs into the band's edges. */ /* THE SHELL IS A CONTAINER AND A CARD, AND AC-M5-W6-02 SPLIT THOSE APART. It used to carry both: the width, the centring, the margins, the raised surface, the edge AND the container query, all on one class. The delivery keeps them in two — `div.l-page.l-page--wide` OUTER for the measure, `div.c-card.c-shell` INNER for the card — and `D-091` concluded the width had to ride `.c-shell` "because the nesting is inverted". The nesting WAS inverted; un-inverting it is the fix, and the declarations go where the delivery keeps them. WHAT LEFT AND WHERE IT WENT. width/max-width/margin-inline -> `.l-page`, which is now the outer element. background/border/radius -> `.c-card`, which the shell now carries and whose values ARE the delivery's. box-shadow and margin-block -> GONE: the delivery has neither, and Marcin's note on the top of the page is "nie powinno być marginesu od góry, za to powinien być ten lekki pasek" — no top margin, the Deco band instead. `AC-M1-W7e-01`'S REASONING SURVIVES ITS DECLARATIONS. It copied v3's four card lines here because the card read as flat without them — `--color-surface-raised` and `--color-surface` are two per cent apart, so with no border, no radius and no edge the card and the ground are one surface. That is still true and `.c-card` is still what makes it false; the class simply says so now instead of the shell restating it. `padding: 0` CANCELS `.c-card`'s `--space-5`, which is what the delivery does inline (`style="padding: 0; overflow: hidden"`). A page shell is not a card of content. `overflow: hidden` is not decoration: the Deco band and the hero are square-cornered and full-bleed inside this box and would otherwise poke through the rounded corners. */ .c-shell { /* ① IS GONE, AND `AC-M5-W8-03` IS THE THIRD TIME MARCIN HAS ASKED FOR IT. "nie powinno być marginesu od góry", then "NADAL jest margines od góry, strona miała zaczynać się od samej góry". Package 18 agrees with him: its `.c-shell` is `container-type` and `container-name` and NOTHING else, and its `.l-page` carries `padding-inline` only. WHY THE MARGIN SURVIVED TWO ROUNDS OF THIS. ① was written when `.c-shell` was the OUTER element and his complaint then — "the card met the browser chrome with no breathing room" — was about that arrangement. `AC-M5-W6-02` made `.l-page` the outer element, and the sentence in the gate went on describing a page that no longer existed. The gate asserted the MECHANISM, so it defended the margin every time the property was questioned; ① is the fourth proxy in `R-164`'s sequence and the only one that was actively argued for. What is left here is containment and the container registration, neither of which is spacing: `overflow` keeps the square-cornered Deco band and the full-bleed hero inside the card's rounded corners, and the `container-*` pair is what every `@container shell` query in this file resolves against. */ /* `clip` RATHER THAN `hidden`, AND THAT ONE WORD IS WHY THE STICKY HEADER WAS NOT STICKING. `overflow: hidden` makes a SCROLL CONTAINER, and `position: sticky` sticks to its nearest SCROLLING ancestor — so `.c-header--compact` has declared `position: sticky; top: 0` all along and scrolled away with the page, because this box was the scroller and this box never scrolls. Measured: scroll 600px and the header top goes to -597 under `hidden`; it holds at 0 under `clip`. `clip` CLIPS IDENTICALLY AND MAKES NO SCROLL CONTAINER, which is the whole difference and is why package 19 uses it. Shell box and radius unchanged at 1163x2481 / 6px. THE FALLBACK ORDER IS DELIBERATE. A browser without `clip` DROPS the declaration and lands on `visible` — no clipping at all, worse than where we started. `hidden` first means it clips correctly and merely loses the stickiness; a current browser takes the second line and gets both. */ overflow: hidden; overflow: clip; container-type: inline-size; container-name: shell; } /* `.l-page--wide` IS GONE (`D-108`), because every page is that width and a modifier that modifies nothing is a class the next reader has to test to understand. The width lives on `.l-page` itself; a page that ever wants a different one gets a modifier then, named for what it does. THE PARAGRAPH THAT STOOD HERE WAS STALE AND SAID THE OPPOSITE OF THE TREE. It read "Both `.c-shell` and `.l-page` cap at `--container-default`, and the shell is the OUTER one, so the modifier has to lift both" — true when `D-091` was ruled and false since `AC-M5-W6-02` un-inverted the nesting. `.c-shell` carries `overflow` and the container registration and no width at all; `home-layout.test.ts` has asserted that for three waves. A comment describing the arrangement its own neighbour replaced is how a session reasons its way to the wrong fix. `.l-page--narrow` STAYS AND IS UNTOUCHED. It sits on an `
` INSIDE the card, not on the card, so the legal and search pages take the same page width as everything else and keep a 44rem reading column within it. The thing Marcin was looking at is the card. */ .l-page--narrow { max-width: var(--container-narrow); } .l-stack { display: flex; flex-direction: column; gap: var(--space-4); } .l-stack--lg { gap: var(--space-6); } /* AC-M6-W16-05. A MARGIN AND A GAP WERE BOTH APPLIED AND NEITHER KNEW ABOUT THE OTHER. `main.css` gives `h1`–`h4` and `p` a `margin: 0 0 var(--space-4)`, written for document flow where adjacent margins COLLAPSE. `.l-stack` is `display: flex`, and FLEX GAP DOES NOT COLLAPSE MARGINS — it adds to them. Measured on the guide page before this rule: h2 margin-bottom 16px + .l-stack gap 16px = 32px BELOW, 0px ABOVE Exactly doubled, and doubled on the wrong side: Marcin's complaint is that a heading belongs to what FOLLOWS it, which is right and is the opposite of what the arithmetic produced. THE RULE IS THE FIX AND THE FIVE DEFECTS WERE ITS SYMPTOMS. Inside a gap-based container the CONTAINER owns the rhythm and children carry no block margins of their own. That principle was already written down twice in this stylesheet — `.b-heading` says "no margin of its own: `.l-article`'s rhythm supplies every gap in the column", and `.c-placeholder` says the same. Both are OUR components. The GENERIC elements never got it, so every heading and paragraph brought a margin into a container that had already spaced it. THE CHILD COMBINATOR IS WHAT MAKES THIS SAFE, and it is the whole reason `-05` has a control. `.c-prose` is DOCUMENT FLOW, where margins collapse correctly and are the right mechanism — `.c-prose > * + *` at the end of this file is that rhythm and must not change. A `.c-prose` nested inside a stack has only its OWN margins zeroed here; its children are not children of the stack, so `>` never reaches them. Without the combinator this fix would move the defect onto every page that renders prose. IT IS ALSO A DECLARED DIVERGENCE FROM `jigs_web`, WHICH HAS THIS DEFECT TOO. `jigs.css:52` and `:59` carry the identical `margin: 0 0 var(--space-4)`, and `jigs.css:132` the identical `.l-stack` gap. Nothing was mis-ported; the doubling is the source's, and this is us diverging to fix it rather than to differ. */ .l-stack > * { margin-block: 0; } /* AC-M6-W16-01. THE SWAP SLOT IS NOT A BOX UNTIL IT HOLDS ONE. `#bundle-card` sits after the workbench and the result card lands in it by `hx-swap="outerHTML"`, so before a generate it is an empty `
` and afterwards it is `.c-result` carrying the same id. Measured before this: button bottom to card top was 0px at 1280 and at 1024 — the card met the GENERUJ button with nothing between them. The rhythm comes from the stack that now wraps both, per `-05`; this rule is what stops that stack's gap becoming dead space on the far commoner state, which is the page before anybody has generated anything. THE CONTROL IS WHY IT IS KEYED ON `:empty` RATHER THAN ON `.c-result`. A rule that only exists once a bundle has been generated reappears as the same defect the first time somebody loads the page without generating; this one belongs to the swap TARGET, which is always there. */ #bundle-card:empty { display: none; } .l-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .l-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } /* Article beside a sidebar. Flex rather than fixed grid tracks so it collapses on its own content, at whatever width the host gives it. */ .l-split { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: flex-start; } /* container-type so the image block can ask about the COLUMN's width rather than the window's — a float beside a 356px aside is still too narrow for a measure well above the 52rem breakpoint. */ .l-split__main { flex: 3 1 20rem; min-width: 0; max-width: var(--measure); container-type: inline-size; container-name: measure; } .l-split__aside { flex: 1 1 21rem; min-width: 0; max-width: 25rem; display: flex; flex-direction: column; gap: var(--space-5); position: sticky; top: var(--space-5); } .c-journal__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); align-items: start; } /* THE FEATURED REGION -- BETWEEN THE NAV AND THE CONTENT COLUMN (AC-M1-W11-02, RC-110). Marcin, on the deployed demo page: "bloczki od wyróżnionych są pod treścią, jeśli one są aktywne, mają być zawsze zaraz pod menu, a ew. treści dopiero niżej." v3 agrees, and is the reason the region is not merely REORDERED but UNMEASURED: its hero (line 57) and facet row (line 74) are siblings of the header inside the shell, above the body grid at line 117 and wider than the prose in it. Inside `.l-article` a featured block was capped at `--measure` like a paragraph -- the half of his complaint that is not about order. IT IS EMITTED CONDITIONALLY, BY THE TEMPLATES, AND NOT HIDDEN BY THIS FILE. With no featured block the element is ABSENT from the DOM rather than present and empty. An empty wrapper here would contribute its own `margin-bottom` below nothing -- `RC-103` ⑧'s stray margin, the "dziwne coś przyklejone do stopki", one element up the page. Hiding it in CSS instead would leave an element that assertions can find and that the next rule can silently give a margin back to, which is the same defect wearing a repair's name. THE INSETS ARE v3's, AND THE FIRST DRAFT OF THIS RULE HAD THEM WRONG. I reasoned that `.l-page`'s `padding-inline: var(--gutter)` already supplied the region's inset. Measuring every ancestor of v3's hero says otherwise: line 21
[data-block-run="featured_card"] { padding-inline: var(--space-5); } /* TWO SELECTORS, FOR `.l-article`'s REASON AND WITH ITS EXCEPTION (BT-84). A block is a GRANDCHILD of the region -- `render_blocks` wraps each run -- so the first selector alone spaces the hero from the card row and leaves NOTHING between two adjacent heroes. That case is editor-reachable: filtering by region changes ADJACENCY, so two `featured` blocks with only body blocks between them arrive here as one run of two, flush, with no error. Found by BACKEND against the shape rather than by either of us against the page. AND THE `featured_card` EXCLUSION IS LIVE HERE, which is where it belongs. A run laid out as a grid spaces itself with `gap`, and a margin-top on a grid item would double it and push the item down inside its own track. It retired from `.l-article` in this same commit because no grid run can be drawn in the column any more; it returns here because one is drawn here. */ .l-featured > * + *, .l-featured > [data-block-run]:not([data-block-run="featured_card"]) > * + * { margin-top: var(--space-8); } /* Article column: never wider than the measure, in either locale. */ /* THE IMAGE BLOCK'S FLOAT ASKS THIS ELEMENT HOW WIDE IT IS, so it must be a container. `container-name: measure` was declared only on `.l-split__main`, so an article rendered in any other layout -- which is every page that is not a two-column split -- had a `@container measure` query that could never match. The floats silently did nothing: valid CSS, no error, and `align: left|right` behaving exactly like `full`. */ /* THE MEASURE IS A PROPERTY OF PROSE, NOT OF THE COLUMN (AC-M1-W7f-01). `max-width: var(--measure)` used to sit HERE, on the container, so every block inside it was capped at ~66 characters -- images, galleries, video, dividers and the CTA along with the text. On a 1024px card the content occupied about 550px and the rest was blank, which is the complaint Marcin made about the built page. v3 caps a measure on exactly THREE elements and all three are prose: the hero `h1` and two `p`. Nothing else in that page is measured. So the cap moves onto the prose blocks below and the column keeps its full width for everything else. `container-type` STAYS. The image block's float asks this element how wide it is, and it is now asking about the real column rather than a 66ch box. */ .l-article { line-height: var(--leading-loose); container-type: inline-size; container-name: measure; } /* THE VERTICAL RHYTHM, AND WHY IT NOW HAS TWO SELECTORS (BT-84, AC-M1-W7g-07). `render_blocks` groups a consecutive run of same-type blocks into one `[data-block-run]`, so a block is a GRANDCHILD of the article, not a child. The first selector alone therefore spaces runs from each other and leaves NO space between two paragraphs, because they are siblings inside one run rather than children of the column. Every SET we assert survived that change -- the types, the ids, the observation point -- because a SET cannot see an adjacency, and `>` and `+` are adjacencies. THE `featured_card` EXCLUSION IS GONE, NOT RELAXED (AC-M1-W11-02). It read `:not([data-block-run="featured_card"])` and it was correct: a run laid out as a grid spaces itself with `gap`, and a margin-top on a grid item would both double that and push the item down inside its own track. `W11` draws every featured run OUTSIDE this element, so the clause can no longer match anything -- a styled selector with no producer, which is the shape this milestone has gated three times. Deleted rather than kept for safety, because "harmless" is how the other three arrived. The clause is not lost: `.l-featured` below needs exactly it, for exactly this reason, and gains it in this same commit -- the exception moved with the thing it excepts rather than being kept where nothing could trip it. */ .l-article > * + *, .l-article > [data-block-run] > * + * { margin-top: var(--space-5); } /* THE HEADING RULE IS GONE RATHER THAN REPAIRED, and that was decided against v3 rather than by taste. `.l-article > * + .b-heading { margin-top: var(--space-8) }` had never matched anything: it needed a heading that is a direct child, and the only one is `page_detail.html`'s

, which is the FIRST child, so `* +` could not reach it. Before moving the intent onto the run I checked whether the design has it, and it does not -- v3's prose gives its

`margin: 0 0 var(--space-5)`, the same rhythm as its paragraphs, with no extra space above. One value throughout the column; v3's only exception is its pull quote at --space-6. So there was nothing to keep, and a rule nobody could see was carrying an intent the design never had. */ /* --- Type utilities ----------------------------------------------------- */ .t-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-muted); } .t-lead { font-size: var(--text-lg); } .t-meta { font-size: var(--text-sm); color: var(--color-ink-muted); } .t-data { font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; } /* --- Header, nav, locale switch ---------------------------------------- */ /* Deco banding under the header: the wordmark's own colour proportions. */ .c-band { display: flex; height: 6px; } .c-band > * { display: block; } .c-band__ochre { flex: 3; background: var(--color-accent-secondary); } .c-band__accent { flex: 2; background: var(--color-accent); } .c-band__rose { flex: 1; background: var(--color-accent-muted); } .c-band__ink { flex: 2; background: var(--color-ink); } .c-band__sand { flex: 1; background: var(--color-accent-secondary-muted); } .c-header { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-5) 0; } /* One continuous rule across the whole nav row — nav and utility sit inside it, so the line cannot break between them. */ .c-header__bar { width: 100%; border-top: 2px solid var(--color-ink); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); padding: var(--space-4) 0; } .c-header__utility { display: flex; align-items: center; gap: var(--space-3); } /* The wordmark is the supplied artwork, not set type. IT SHIPS AS A 256-COLOUR PNG since `AC-M5-W7-01`; the SVGs stay TRACKED and are no longer SERVED. What is drawn, and from where: wordmark.png full colour — light grounds SERVED wordmark-paper.png line cut, #F7EEDC baked — dark scheme, photos SERVED wordmark*.svg the vector source of all of the above — NOT served `backend/static/img/README.md` says what deleting the SVGs would cost. currentColor does NOT cross an boundary — an image is its own document and resolves currentColor to black — so each cut has its colour baked, and that is as true of the PNGs as it was of the SVGs. Do not recolour a cut with filters; ask for the artwork in the colour you need. */ /* The wordmark is dense, faceted lettering with an "est. 2026" banner set at caption size. Scaled to a header-bar height it is illegible, so it leads the shell at full width and the nav sits on a rule beneath it. */ .c-header__wordmark { display: block; line-height: 0; width: 100%; max-width: 26rem; text-decoration: none; } .c-header__wordmark img { width: 100%; height: auto; display: block; } /* THE RATIO IS THE FILE'S, AND IT IS NOT THE SVG'S (`AC-M5-W7-02`). It read 2664 / 1180 — the SVG viewBox — while the served file is 833 x 369. Those are 2.2576271 and 2.2574526, a disagreement of 0.012px at the widest the mark is ever drawn (22rem), so nothing was visibly wrong and nothing would have been until somebody trusted the number. A declared ratio that is ALMOST the file's is a wrong number that looks right, which is worse than an obviously wrong one. Pinned to the PNG's own dimensions, so all three — the `width`/`height` attributes, this rule, and IHDR — carry one value. (A PNG has intrinsic dimensions, so this pin is no longer load-bearing the way it was for a viewBox-only trace. It stays because the attributes can be lost in an edit and the collapse that follows is silent.) */ .c-header__wordmark img, .c-wordmark--on-dark img, .c-wordmark--ink img { aspect-ratio: 833 / 369; } /* THE FULL-COLOUR MARK IS THE BRAND AND IS USED ON LIGHT GROUNDS (AC-M1-W7c-02). W7b substituted the ink line-cut for it on a byte budget — 407 KB against 111 KB — which was sound engineering applied to a question that was not engineering's. The mark is Marcin's: faceted Cubist lettering in ochre, terracotta and cream with a LUTHIER WORKSHOP banner, and the line cut throws away everything that makes it this workshop's. The cost is ~95 KB more once, on an edge that compresses SVG, and it is a price rather than an obstacle. The paper cut keeps its jobs: the dark scheme, --color-ink grounds and photography, where a colour mark on a dark field is unreadable rather than merely expensive. */ /* On --color-ink and on photography, use the paper cut directly. */ .c-wordmark--on-dark { display: block; max-width: 22rem; } .c-wordmark--on-dark img { width: 100%; height: auto; display: block; } /* On light grounds where colour would compete — the printed label, the QR card — use the ink cut. AC-M6-W3-03: the CHILD rule was ported and the PARENT was not, so the ink cut was inline and unbounded while its sibling --on-dark was block and capped. The package has both. */ .c-wordmark--ink { display: block; max-width: 22rem; } .c-wordmark--ink img { width: 100%; height: auto; display: block; } .c-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-5); } .c-nav__toggle { display: none; } .c-nav__link { /* THE FLOOR IS DECLARED HERE, IN THE BASE RULE, NOT ONLY WHEN NARROW. It was set only inside the narrow-viewport block, as though a hit target were a small-screen concern. WCAG 2.5.8 is about the POINTER, not the width: a tablet in landscape is wide and is touched, and a wide window on a touch laptop is the same. Found by the gate below, which reads the base rule and did not find it. */ display: inline-flex; align-items: center; min-height: var(--target-min); font-family: var(--font-display); font-weight: var(--weight-medium); letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--text-sm); color: var(--color-ink-muted); text-decoration: none; padding-bottom: var(--space-1); border-bottom: 2px solid transparent; } .c-nav__link:hover { color: var(--color-ink); border-bottom-color: var(--color-accent-muted); } .c-nav__link[aria-current="page"] { color: var(--color-ink); border-bottom-color: var(--color-accent); } /* Reachable without opening a menu (AC-M0-W8-04). Sized for the longer locale label, never for the English one. AND THIS ::after ALONE NEVER DELIVERED THE TARGET, ON ANY PAGE. `.c-locale` below is `overflow: hidden` for its pill radius, and a 44px pseudo-element centred on a 34px box overflows that box by 5px at each end — so the clip removed exactly the part the repair added. Hit-tested with `elementFromPoint` rather than read off `getComputedStyle`, which reports 44px whether or not anything clips it: .c-locale__link box 34px EFFECTIVE 35px <- before .c-unit__option box 31px EFFECTIVE 32px <- the same shape, same cause .c-nav__link · .c-btn · .c-tab box 44px effective 45px `RC-088` is the finding that this control lost its target once. IT NEVER GOT IT BACK — what it got was a declaration `design-tokens.test.ts` can see and a browser cannot honour, because that gate reads the CSS text and nothing in the CSS text says an ancestor clips it. NOT REPAIRED HERE, AND THE REASON IS A GATE RATHER THAN A DOUBT. The house pattern is `min-height: var(--target-min)` on the control, and `delivered-structure.test.ts` ⑦ asserts this selector does NOT carry one: W7c decided the pill keeps v3's VISUAL box — about 32px — while a finger gets 44px from the pseudo-element. Adding `min-height` makes the box 44px and changes the delivered design, so it fails that gate, correctly. `AC-M6-W16-03` is about the `mm`/`in` pill and this is a different criterion's subject. THE REPAIR THAT KEEPS BOTH is to remove the clip rather than to grow the box — `.c-locale` below is `overflow: hidden` only so its pill radius cuts the `[aria-current]` background, and per-link `border-radius` on the first and last child does that without clipping anything. That is one decision by somebody who owns `AC-M1-W7g-01`, and it is reported rather than taken. `.c-unit__option` has no such gate and IS repaired, in this wave, by `-03`. */ .c-locale__link::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; height: var(--target-min); } /* THE CLIP IS GONE AND THE BOX IS UNCHANGED (`AC-M6-W18-01`). This carried `overflow: hidden` for exactly one job — its pill radius cutting the square corners off the `[aria-current]` background — and that clip also removed the half of `.c-locale__link::after` that sticks out of a 34px box to make a 44px target. Hit-tested before: box 34px, EFFECTIVE 35px, on all 24 pages. `getComputedStyle` reported 44px throughout, because a clip is a property of the ANCESTOR and nothing in the rule can see it. TWO CONSTRAINTS THAT LOOKED OPPOSED AND WERE NOT. `W7c` decided the pill keeps v3's VISUAL box — about 32px — and `delivered-structure.test.ts` ⑦ asserts this control declares no `min-height`, so growing the box to 44px is refused, correctly; I tried that in `W16` and the gate caught it. The third option is to stop clipping and give the END LINKS the radius instead: the corners are cut by the things that have corners, the container needs no `overflow` at all, and the pseudo-element is free to extend past a box that is still 34px. `:first-child`/`:last-child` rather than `:nth-child(1)`/`(2)` because the switcher is two links today and the rule should not acquire a third-language bug. */ .c-locale { display: flex; border: var(--border-hairline) solid var(--color-border); border-radius: var(--radius-pill); } .c-locale__link:first-child { border-start-start-radius: var(--radius-pill); border-end-start-radius: var(--radius-pill); } .c-locale__link:last-child { border-start-end-radius: var(--radius-pill); border-end-end-radius: var(--radius-pill); } .c-locale__link { /* MEASURED BELOW THE FLOOR AND REPAIRED. At --text-xs with --leading-normal and 11px of vertical padding this box was 40.6px at the narrow end of the clamp — under WCAG 2.5.8's 44px, on the control §4 requires to be reachable without opening a menu, which is exactly the control a thumb has to hit. The padding arithmetic said 44 and the type token it was computed against is not --text-sm. */ /* ⑦ v3's VISUAL BOX, our TAP TARGET, and they are not the same box. v3's pill button is `padding: 7px 12px` on --text-xs -- about 32px tall. RC-088 measured ours at 40.6px and WCAG 2.5.8 wants 44, so W7c gave it `min-height: var(--target-min)` and it became visibly taller than the design. Neither had to lose. The visual box keeps v3's padding; the ::after below extends the HIT AREA past it without occupying any layout space. A finger gets 44px, an eye gets the pill Marcin drew. */ position: relative; display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; padding: var(--space-2) var(--space-3); color: var(--color-ink-muted); text-decoration: none; transition: background var(--duration-fast) var(--ease-standard); } .c-locale__link:hover { background: var(--color-surface); color: var(--color-ink); } .c-locale__link[aria-current="true"] { background: var(--color-ink); color: var(--color-ink-inverse); } /* --- Buttons ------------------------------------------------------------ */ .c-btn { /* DECLARED, NOT COMPUTED. The height was `padding: 11px` chosen so that 11 + 11 + the line box reached 44px — arithmetic over a FLUID font size (--text-sm is a clamp), so it was only exactly true at one viewport width, and it silently moves whenever the type scale does. `min-height` states the floor instead of deriving it, and cannot drift. */ display: inline-flex; align-items: center; justify-content: center; min-height: var(--target-min); font-family: var(--font-display); font-weight: var(--weight-medium); letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--text-sm); line-height: var(--leading-normal); padding: var(--space-2) var(--space-5); border: var(--border-hairline) solid transparent; border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .c-btn--primary { background: var(--color-accent); color: var(--color-ink-inverse); } .c-btn--primary:hover { background: var(--color-accent-hover); color: var(--color-ink-inverse); } .c-btn--primary:active { background: var(--color-accent-active); } .c-btn--quiet { background: transparent; color: var(--color-ink); border-color: var(--color-ink); } .c-btn--quiet:hover { background: var(--color-ink); color: var(--color-ink-inverse); } .c-btn--on-photo { background: transparent; color: var(--color-ink-inverse); border-color: var(--color-ink-inverse); } .c-btn--on-photo:hover { background: color-mix(in srgb, var(--color-ink-inverse) 14%, transparent); color: var(--color-ink-inverse); } /* --- Card, chip, panel ------------------------------------------------- */ .c-card { background: var(--color-surface-raised); border: var(--border-hairline) solid var(--color-rule); border-top: 3px solid var(--color-accent-secondary); border-radius: var(--radius-md); padding: var(--space-5); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } /* A CARD THAT IS A LINK IS A CONTROL, so it declares the floor like every other one (`RC-088`, WCAG 2.5.8). It is comfortably over 44px today -- padding alone is two `--space-5` -- and the floor is DECLARED rather than computed anyway, because a computed check re-runs the author's arithmetic and agrees with it. A floor that does not currently bind is still the floor. */ a.c-card { display: block; min-height: var(--target-min); text-decoration: none; color: inherit; } a.c-card:hover, .c-card--interactive:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); } /* A GRID WHOSE ITEMS ARE LIST ITEMS STILL NEEDS THE LIST RESET (AC-M2-W4-05). `.c-gallery` carries its own; `.l-grid` is a layout primitive used on `
`s until the instrument index put it on a `
    `, and a stray marker column is the whole difference between a gallery and a bulleted list. Element-qualified so the primitive stays a primitive. */ ul.l-grid, ol.l-grid { list-style: none; margin: 0; padding: 0; } /* THE CARD AS A STACK. `.c-card--featured` already declares exactly these three, under a name that says where it is USED rather than what it DOES -- so this is the same layout, not a variant of it. Not consolidated here because `.c-card--featured` is named in `featured_card.html` and in `block-partials.test.ts`, and renaming a class across another wave's partial and its gate is not this criterion's business. Recorded so the duplication is a known one rather than a discovered one. */ .c-card--stack { display: flex; flex-direction: column; gap: var(--space-3); } /* THE CARD'S PICTURE (`AC-M2-W4-05b`). Full bleed to the card's padding edge on the inline axis only -- the negative margin cancels `.c-card`'s own `var(--space-5)` -- so the photograph meets the card's border the way v3's facet card does, while the text keeps its inset. `aspect-ratio` with `object-fit: cover` because instruments are photographed portrait and landscape and a ragged grid reads as a mistake; the `width`/`height` attributes stop the reflow before the CSS loads, and this decides the shape after it. */ .c-card__media { display: block; width: calc(100% + 2 * var(--space-5)); margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md) var(--radius-md) 0 0; } .c-card--stack > * { margin: 0; } .c-chip { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-accent-secondary-muted); color: var(--color-ink); } /* Rule 1: sunken is DARK. It always carries inverse ink. */ .c-panel--sunken { background: var(--color-surface-sunken); color: var(--color-ink-inverse); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); } .c-panel--sunken .t-eyebrow, .c-panel--sunken .t-meta { color: color-mix(in oklab, var(--color-ink-inverse) 78%, var(--color-surface-sunken)); } .c-divider { display: flex; align-items: center; gap: var(--space-4); } .c-divider::before, .c-divider::after { content: ""; flex: 1; height: var(--border-hairline); background: var(--color-rule); } /* --- Data table (serials, jig parameters, BOM) ------------------------- */ .c-spec { width: 100%; border-collapse: collapse; } .c-spec th, .c-spec td { font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; text-align: left; padding: var(--space-3) var(--space-5) var(--space-3) 0; border-bottom: var(--border-hairline) solid var(--color-rule); } .c-spec th { font-weight: var(--weight-regular); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-muted); white-space: nowrap; } .c-panel--sunken .c-spec th, .c-panel--sunken .c-spec td { border-bottom-color: color-mix(in srgb, var(--color-ink-inverse) 16%, transparent); } .c-panel--sunken .c-spec th { color: color-mix(in oklab, var(--color-ink-inverse) 72%, var(--color-surface-sunken)); } /* --- Form (rendered generically; styled by field type, never by name) --- */ /* A FORM FIELD IS NOT PROSE, AC-M5-W2-04. `main.css` caps every `p` at `--measure`, and the enquiry block's fields are `

    ` -- so the two `c-enquire__wide` rows, which `grid-column: 1 / -1` puts across the whole form, rendered at 544px inside a 724px form. Measured against the delivery: 544 | 724 on both wide rows. The package has no global `p` cap at all; ours predates the delivery and is right for prose, which a labelled input is not. Scoped to the class rather than removed from `p`, because the global cap is correct for the twenty-two pages that are prose -- and `c-field` is on a `p` in exactly one template. */ .c-field { display: flex; flex-direction: column; gap: var(--space-2); max-width: none; } .c-field__label { font-size: var(--text-sm); color: var(--color-ink); } .c-field__hint { font-size: var(--text-xs); color: var(--color-ink-muted); } /* Rule 2 (OQ-012 A): control boundaries take --color-border, which is now the 3:1 floor. --color-rule is decorative and is never a control's boundary. */ .c-field input, .c-field select, .c-field textarea { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-ink); background: var(--color-surface-raised); border: var(--border-hairline) solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3); width: 100%; } /* THE HIT TARGET IS DECLARED ON EVERY FORM CONTROL, NOT COMPUTED FROM ITS PADDING (`RC-088`, WCAG 2.5.8, `AC-M2-W8-04`). `--text-*` are `clamp()`, so any arithmetic over padding is exact at one viewport width and drifts at every other -- and a check that recomputed the box would re-run the author's model and agree with it (`FT-24`). Declared, so the runtime does the arithmetic. */ .c-field input, .c-field select, .c-field textarea { min-height: var(--target-min); } .c-field input[type="number"], .c-field input[inputmode="numeric"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .c-field textarea { resize: vertical; min-height: 6rem; } .c-field input:focus-visible, .c-field select:focus-visible, .c-field textarea:focus-visible { border-color: var(--color-ink); } .c-field[data-invalid] input, .c-field[data-invalid] textarea { border-color: var(--color-accent); } /* A CHECKBOX IS A ROW, AND THE LABEL IS THE TARGET (`AC-M2-W8-04`). The shared rule above makes a field a column and its control full-width, which is right for a text input and wrong for a consent tick. The floor goes on the LABEL rather than on the box: clicking a label toggles its checkbox natively, so the label IS the control surface, and a 44px checkbox would be a 44px checkbox. `width: auto` undoes the shared full-width. */ .c-field--check { flex-direction: row; align-items: flex-start; gap: var(--space-3); } .c-field--check input[type="checkbox"] { width: auto; min-height: auto; margin-top: var(--space-1); accent-color: var(--color-accent); } .c-field--check .c-field__label { display: flex; align-items: center; min-height: var(--target-min); cursor: pointer; } /* --- The newsletter signup (AC-M2-W8-04) -------------------------------- */ /* A bounded column on the prose measure: a signup is read like prose and filled in like a form, and a full-width row of inputs on a 68rem card reads as a settings screen. */ .c-signup__form { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--measure); margin-top: var(--space-5); } /* THE ANSWERED STATES ARE HIDDEN BY `hidden`, NOT BY A CLASS, so a state is absent from the accessibility tree rather than merely invisible -- `role="status"` on an element only `opacity: 0` would still be announced. `[hidden]` needs the explicit rule because `display: flex` on an ancestor does not stop a child's own display from winning. */ .c-signup__note[hidden] { display: none; } .c-signup__note { margin: 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-success); background: var(--color-surface-raised); font-size: var(--text-sm); line-height: var(--leading-normal); } .c-signup__note--bad { border-left-color: var(--color-accent); } /* Rule 3: warning and danger are FILLS and take --color-ink, never inverse. */ .c-notice { display: flex; gap: var(--space-2); font-size: var(--text-sm); padding: var(--space-3); border-radius: var(--radius-sm); color: var(--color-ink); } .c-notice--warning { background: var(--color-warning); } .c-notice--danger { background: var(--color-danger); } .c-notice--success { background: var(--color-success); color: var(--color-ink-inverse); } @media (prefers-color-scheme: dark) { /* Binding rule 3 is written in the light scheme's terms — "a warning fill takes --color-ink, never --color-ink-inverse" — and inverts in the dark one, where --color-ink IS the light colour. Measured on the dark fills: --color-ink gives 1.13:1 on warning and 2.30:1 on danger, both illegal; --color-ink-inverse gives 12.2:1 and 6.2:1. Success needs no flip: it already carries --color-ink-inverse, which is the dark one here. */ .c-notice--warning, .c-notice--danger { color: var(--color-ink-inverse); } } /* --- Photography ------------------------------------------------------- */ /* Hero text sits on its own opaque scrim, not on a gradient, so contrast does not move when the photograph changes. */ .c-hero { position: relative; display: flex; align-items: center; min-height: clamp(340px, 42vw, 500px); } .c-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .c-hero__body { position: relative; max-width: 40rem; padding: var(--space-8); background: linear-gradient(90deg, color-mix(in srgb, var(--color-ink) 78%, transparent) 0%, color-mix(in srgb, var(--color-ink) 78%, transparent) 68%, transparent 100%); color: var(--color-ink-inverse); } .c-hero__body h1, .c-hero__body h2, .c-hero__body .t-eyebrow, .c-hero__body p { color: var(--color-ink-inverse); } /* Captions over photography get an opaque chip, never a gradient. */ .c-caption { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted); } .c-caption--on-photo { color: var(--color-ink); background: var(--color-surface); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); } /* image block: align left|right|full, wrap bool (architecture.md §4.2). Floated images never break the measure of the surrounding text. */ .b-image { margin: 0; } /* Default is unfloated. The float is opt-in and only when the column can still hold a measure beside it (§3.4: a floated image never breaks the measure of the surrounding text). */ .b-image[data-wrap="true"] { float: none; width: 100%; max-width: none; } @container measure (min-width: 480px) { .b-image[data-align="left"][data-wrap="true"] { float: left; width: 45%; max-width: 14rem; margin: 0 var(--space-5) var(--space-4) 0; } .b-image[data-align="right"][data-wrap="true"] { float: right; width: 45%; max-width: 14rem; margin: 0 0 var(--space-4) var(--space-5); } } .b-image[data-align="full"] { width: 100%; max-width: none; } .l-article::after { content: ""; display: block; clear: both; } /* --- ② featured, ③ the row (AC-M1-W7g-03) ------------------------------ */ .c-hero__heading { margin: 0 0 var(--space-3); font-size: var(--text-2xl); } .c-hero__body .t-lead { margin: 0; } .c-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0 0; } /* No asset means no photograph, and the scrim exists only to hold text off one. Over the card's own surface it reads as a smudge, so the flat variant is an ordinary bordered panel and the inverse ink goes with it. */ .c-hero--flat { min-height: 0; } .c-hero--flat .c-hero__body { max-width: none; background: none; border: var(--border-hairline) solid var(--color-rule); border-left: 4px solid var(--color-accent); border-radius: var(--radius-md); } .c-hero--flat .c-hero__body h2, .c-hero--flat .c-hero__body .t-eyebrow, .c-hero--flat .c-hero__body p { color: var(--color-ink); } /* v3's facet card is already `.c-card`; only its internal layout is new. The modifier and not the base, because `.c-card` is also the search result item and a flex column would change it. */ .c-card--featured { display: flex; flex-direction: column; gap: var(--space-3); } /* h3 and p both carry `margin: 0 0 var(--space-4)` from main.css, which would add to the gap. */ .c-card--featured > * { margin: 0; } .c-card__heading { font-size: var(--text-lg); letter-spacing: 0.04em; text-transform: uppercase; } .c-card--featured .c-chip { align-self: flex-start; margin-top: var(--space-1); } /* ③ THE ROW — v3'S OWN DECLARATION, ON THE RUN (AC-M1-W7g-07). `render_blocks` now wraps a consecutive run of same-type blocks in one `[data-block-run]`, which is the container three sibling cards never had. So this is v3's facet row verbatim, and `auto-fit` does in layout what a `:has()` lookahead chain was doing in the selector: one card fills the width, two take half each, three take a third, with no rule per length and nothing to assert structurally because there is nothing that cannot be evaluated. The float mechanism this replaces is gone entirely -- widths, the forwards-only clears, the run-edge padding and the two-step lookahead whose second step our test engine silently drops (FT-28). What made it necessary was the absence of a container, not a property of floats. THE DECLARATIONS BELOW ARE W7g-07's, UNCHANGED. THE ANCHOR IS NOT, AND THAT DISTINCTION IS THE WHOLE OF W11's RISK (AC-M1-W11-02). This rule was keyed `.l-article > [data-block-run="featured_card"]`, and `AC-M1-W11-02` draws the featured region outside `.l-article` -- so the ancestor stops matching the moment the region moves, and three cards render as three stacked blocks: valid CSS, no error, and EVERY SET we assert survives it, because a SET cannot see a layout. `BT-84` is the same shape one week older, and "the grid is unchanged" was true of these three declarations and false of the selector carrying them. The rule now keys on the RUN and asks nothing about its ancestor, so it holds wherever the region is drawn -- which is also what makes it survive the next move without a fourth reading. `.l-article` IS STILL A PLAIN BLOCK CONTAINER, and dropping the ancestor does not touch that: this rule has always applied to the run wrapper and never to the column. The image block's run is still an ordinary block box inside the article, and its `data-wrap` float still escapes to wrap the text of following blocks -- see `.l-article::after` above, which exists only because that float escapes today. Making the ARTICLE a grid would trap the float in a grid item and kill a feature `wrap` marks REQUIRED on every image, with no error. */ [data-block-run="featured_card"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-4); } /* ========================================================================== Narrow viewports One breakpoint at 52rem, because that is where the article column and the aside stop fitting side by side — not because it is a device size. Measured against the shell container, never the window. Everything above is already fluid (auto-fit tracks, flex-wrap, clamp()). ========================================================================== */ /* THE NAV WRAPS; IT DOES NOT COLLAPSE BEHIND A DISCLOSURE, and the toggle's rules have been removed rather than left unused. The delivered header bound `hidden` through Alpine to a `matchMedia` result evaluated once at init, which does not survive a resize or an orientation change -- a control that can be silently wrong is worse than no control on a nav this size. The LANGUAGE SWITCHER never collapsed either way: AC-M0-W8-04 requires it reachable without opening a menu. */ @container shell (max-width: 52rem) { .c-header { padding: var(--space-4) var(--gutter) 0; } .c-header__wordmark { max-width: 22rem; } .c-header__bar { justify-content: space-between; row-gap: var(--space-3); } /* PORTED FROM THE DELIVERY (AC-M1-W7d-01), with ONE deliberate change: the hit target is declared with --target-min instead of the delivered `padding: 9px 14px`. RC-088 measured that arithmetic below the WCAG floor on a sibling control, and this button is a thumb target on exactly the widths where it appears. Everything else -- the border, the radius, the uppercase display face, the two-bar ::before glyph -- is the delivery's. */ .c-nav__toggle { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--target-min); font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; background: transparent; color: var(--color-ink); border: var(--border-hairline) solid var(--color-ink); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); cursor: pointer; } .c-nav__toggle[aria-expanded='true'] { background: var(--color-ink); color: var(--color-ink-inverse); } .c-nav__toggle::before { content: ''; width: var(--space-4); height: var(--space-2); border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; } .c-nav { order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 0; } .c-nav[hidden] { display: none; } /* THE HIT TARGET IS DECLARED WITH --target-min, NOT COMPUTED FROM IT. These were `13px`/`11px` paddings chosen so padding + line box reached 44. The plan was to rewrite them as calc() from the token; measuring first showed why that is still wrong. The line box is FLUID (every --text-* token is a clamp) and the four controls use three different type tokens, so any padding arithmetic is right at one width and drifts at every other. Hand-checking it got the answer wrong twice here, and .c-locale__link was genuinely 40.6px — below the floor — because its arithmetic had been done against the wrong type token. min-height states the requirement; nothing has to be re-derived. */ .c-nav__link { /* min-height comes from the base rule; this only widens the row and squares the edge. */ display: flex; padding: var(--space-1); border-bottom: var(--border-hairline) solid var(--color-rule); } .c-nav__link[aria-current="page"] { border-bottom-color: var(--color-accent); } /* Hero text takes the full width, on a flat scrim rather than a horizontal gradient: there is no room for the gradient to resolve. */ .c-hero__body { max-width: none; width: 100%; padding: var(--space-6) var(--space-5); background: color-mix(in srgb, var(--color-ink) 82%, transparent); } /* The article/aside pair stacks; the aside stops being sticky, or it would pin a card over the text it belongs to. */ .l-split { flex-direction: column; } .l-split > .l-split__aside { position: static; max-width: none; width: 100%; } /* Tap targets and thumb reach. */ /* Both controls now DECLARE min-height: var(--target-min), so there is nothing left for a breakpoint to re-derive. Only the horizontal breathing room changes. */ .c-locale__link { padding: var(--space-2) var(--space-4); } .c-field input, .c-field select, .c-field textarea { font-size: var(--text-base); } } @container shell (max-width: 30rem) { /* The wordmark's "est. 2026" banner is caption-sized artwork; below this it stops being legible, so it gets the full column. */ .c-header__wordmark { max-width: none; } .c-header__utility { width: 100%; justify-content: space-between; } .c-panel--sunken { padding: var(--space-6) var(--space-4); } .c-spec th, .c-spec td { display: block; padding-right: 0; } .c-spec th { padding-bottom: var(--space-1); border-bottom: 0; } .c-journal__row { grid-template-columns: 64px minmax(0, 1fr); } } /* --- Footer ------------------------------------------------------------ */ .c-footer { background: var(--color-ink); color: var(--color-ink-inverse); padding: var(--space-8) var(--space-5); } .c-footer a { color: var(--color-ink-inverse); } .c-footer .c-wordmark--on-dark { margin-bottom: var(--space-4); } .c-footer .t-meta { color: color-mix(in oklab, var(--color-ink-inverse) 80%, var(--color-ink)); } .c-footer .t-eyebrow { color: var(--color-accent-secondary-muted); } /* =================================================================================== THE JIG PAGE (`AC-M6-W12-02`, `-03`, `-04`). Marcin opened it and annotated it. THREE OF HIS FIVE NOTES ARE ANSWERED BY THE DESIGNER'S OWN STYLESHEET, WHICH WE NEVER PORTED. `M6-W9` brought eight templates and left `jigs_web/static/css/jigs.css` to `W10`, so the cards have been rendering with no `.c-card__title` or `.c-card__body` rule at all. What he saw is what an unstyled card does, and the rules below at `ceda0e9` are his designer's: .c-card display: flex; flex-direction: column; gap: var(--space-3) .c-card__title margin: 0; font-size: var(--text-xl) .c-card__body flex: 1; margin: 0 `.c-card__body { flex: 1 }` is the whole of `-02`: the body absorbs the slack, so the row after it lands on the bottom edge whatever the blurb says. That is alignment as a PROPERTY of the card rather than a value somebody tuned once. =================================================================================== */ /* A MODIFIER, AND NOT `.c-card` ITSELF, WHICH WOULD HAVE BEEN A SITE-WIDE ACCIDENT. The delivery puts `display: flex; flex-direction: column` on `.c-card`, because in `jigs_web` every card is that shape. Here it cannot go there: `

    ` in `base.html` is the page shell of all 24 pages, the same class, so the bare selector would have turned every page's shell into a flex column. MY FIRST ATTEMPT WAS `:has(> .c-card__body)` AND A GATE REFUSED IT. `block-partials.test.ts` asserts the SET of `:has()` selectors in this stylesheet is EMPTY — it records that a run-length lookahead chain was replaced by `auto-fit`, and its mechanism is a ban on the whole feature. Mine had nothing to do with block runs, but the honest move is to write the rule another way rather than widen somebody else's gate to admit my exception. A modifier is also what this stylesheet already does — `c-card--stack`, `c-card--featured` — and it says the shape at the point of use, where a reader of the template can see it. */ .c-card--stretch { display: flex; flex-direction: column; gap: var(--space-3); } .c-card--stretch > .c-card__body { flex: 1; margin: 0; } /* The trailing row holds the OPEN button. `margin: 0` because the card's own `gap` is the rhythm now, and a paragraph margin would add a second one on top of it. */ .c-card--stretch > :last-child { margin: 0; } /* `-03`. OGRANICZNIK RENDERED AS OGRANICZNI, and the cause is two things, not one. Measured before: `scrollWidth 294` inside `clientWidth 233`, at `font-size: 39.36px`, `text-transform: uppercase`, `overflow-wrap: normal`. Unstyled, the title took the global `h2` size; at that size one Polish word is wider than a third-of-a-row card. THE DESIGNER'S `--text-xl` IS THE FIX FOR TODAY'S WORDS. `overflow-wrap` IS THE FIX FOR TOMORROW'S. A single word longer than its box overflows at ANY font size — the registry is a list somebody will extend, and a fourth jig with a longer name would put this straight back. Breaking a long word is ugly; a word sticking out of its card is a defect. */ .c-card__title { margin: 0; font-size: var(--text-xl); overflow-wrap: break-word; } /* `-04`. ONE GAP FOR THE WHOLE OVERVIEW, so no seam on this page can be zero by itself. Measured before: the card grid met "WHAT GOES TO WHOM" at 0px. */ .c-jig-overview { display: grid; gap: var(--space-8); } /* The intro and the photograph. Proportions are the delivery's own workbench — a wide column beside a ~22rem one — reversed, because here the prose leads and the picture follows. It collapses at the same `@container shell` step as everything else on the site rather than at `jigs_web`'s `@media (max-width: 56rem)`, since our breakpoints are the shell's. */ .c-jig-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: var(--space-6); align-items: start; } /* THE PLACEHOLDER. `AC-M5-W4-02`'s idiom, in CSS rather than in a PNG: a solid ground with a lighter inset frame, so it cannot be mistaken for a photograph that failed to load. `aspect-ratio` IS WHAT KEEPS THE EMPTY STATE FROM COLLAPSING — the box exists at its full height with nothing in it, which is the state this page will be in for weeks, and it is the same box the photograph will occupy. */ .c-jig-photo { position: relative; margin: 0; /* THE JIG'S PROPORTIONS, AND THE ONE LINE TO CHANGE WHEN THE PHOTOGRAPH ARRIVES. Marcin is still assembling the jig, so its real shape is not known yet; 4/3 is a workshop object's usual one. The slot is sized by `aspect-ratio`, so correcting this moves nothing around it. NOT A TOKEN, DELIBERATELY. `--jig-photo-ratio` was the first draft and `design-tokens.test.ts` refused it: token NAMES must equal the SET `docs/design-system.md` declares, which is ARCHITECT-owned. Making a placeholder's aspect ratio wait on a design-system amendment would be the wrong trade, and a literal in one rule is just as much "one value to change" as a custom property would have been. */ aspect-ratio: 4 / 3; background: var(--color-surface-sunken); border-radius: var(--radius-sm); overflow: hidden; display: grid; place-items: center; } .c-jig-photo::after { content: ''; position: absolute; inset: var(--space-4); border: 2px solid color-mix(in srgb, var(--color-ink-inverse) 22%, transparent); pointer-events: none; } .c-jig-photo__note { color: color-mix(in oklab, var(--color-ink-inverse) 70%, var(--color-surface-sunken)); text-align: center; padding: var(--space-4); } /* A real photograph fills the slot with no inset frame over it: the frame is what marks the placeholder AS one, and drawn over a photograph it would say the opposite. */ .c-jig-photo--filled::after { content: none; } .c-jig-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; } @container shell (max-width: 52rem) { .c-jig-intro { grid-template-columns: minmax(0, 1fr); } } /* THE HONEYPOT'S HIDING PLACE, PORTED WITH THE TEMPLATES IT BELONGS TO (`AC-M6-W9-02`). From `jigs_web/static/css/jigs.css` at `ceda0e9`, verbatim. THE REST OF THE JIG STYLESHEET IS `W10`'s AND THIS ONE RULE IS NOT WAITING FOR IT, because it is not appearance. `generator/_form.html` renders a `website` field that no human should fill; `apps/jigs/views.py` refuses any submission that carries one. Without this rule the field is an ORDINARY VISIBLE TEXT BOX — measured on the rendered page at 881x26 px, sitting between two real fields with an empty label — so a sighted visitor fills it in and has their submission rejected with "This request could not be accepted." The trap catches the people it was built to protect. OFF-SCREEN RATHER THAN `display: none`, which is the source's choice and worth keeping: a bot that skips hidden inputs is exactly the bot this is trying to catch. `aria-hidden` on the wrapper is what keeps it away from a screen reader. The other fifteen jig classes have no rule here and that is deliberate — they are layout and type, the page renders unstyled without them, and `W10` brings the stylesheet. This one changes what the form DOES. */ .c-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* =================================================================================== THE JIG PAGES' STYLESHEET (`AC-M6-W10-07`). Marcin, on the tab bar: "na każdej stronie powtarza się to — paskudne". IT IS NOT THE BAR. TWENTY-TWO CLASSES ACROSS TEN JIG TEMPLATES HAD NO RULE ANYWHERE — the whole post-generate card (`c-result`, `c-facts`, `c-license-note`), every error and status state, the BOM table, the unit switch and the workbench columns. `M6-W9` ported eight templates and `W10` six more; the "1 css" in both waves' deferral lists is this, and it was never brought. What he is looking at is what unstyled markup does, repeated on every page. PORTED from `jigs_web/static/css/jigs.css` at `ceda0e9`, rule for rule. EVERY TOKEN THESE RULES USE IS ALREADY DECLARED IN OUR `tokens.css` — 34 of 34, differenced before porting. The two token sets have converged far enough that the jig stylesheet needs nothing new, so this adds no name to the SET `docs/design-system.md` normatively declares and needs no amendment to it. `htmx-indicator` IS NOT HERE AND IS NOT MISSING. It is in the templates and in neither stylesheet: htmx injects its own `.htmx-indicator { opacity: 0 }` at load. Checked in both trees rather than assumed from its absence here. =================================================================================== */ /* DIVERGENCE, DECLARED: the source's scroll shadows are `rgb(0 0 0 / 12%)` and ours are the same shape through the ink token. `design-tokens.test.ts` forbids a colour literal outside `tokens.css`, and this is the treatment this stylesheet already gives a delivered literal — the carousel scrim is `rgb(31 26 22 / 0.9)` in the package and `color-mix(in srgb, var(--color-ink) 90%, transparent)` here, which is the same value because `--color-ink` IS `#1f1a16`. IT IS ALSO A BEHAVIOUR CHANGE AND IN THE RIGHT DIRECTION. `--color-ink` flips to `#f2e9d9` under `prefers-color-scheme: dark`, so the shadow that marks a scrollable tab row follows the scheme instead of staying a black smudge nobody can see on a dark ground. */ .c-tabs { display: flex; flex-wrap: nowrap; gap: var(--space-1); margin-bottom: var(--space-6); border-bottom: var(--border-hairline) solid var(--color-rule); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 1px; background: linear-gradient(to right, var(--color-surface-raised) 30%, transparent) left center / 2.5rem 100% no-repeat, linear-gradient(to left, var(--color-surface-raised) 30%, transparent) right center / 2.5rem 100% no-repeat, radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--color-ink) 12%, transparent), transparent) left center / 1rem 100% no-repeat, radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--color-ink) 12%, transparent), transparent) right center / 1rem 100% no-repeat; background-attachment: local, local, scroll, scroll; } .c-tab { flex: none; display: inline-flex; align-items: center; min-height: var(--target-min); padding: var(--space-2); font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink-muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; } .c-tab:hover { color: var(--color-ink); border-bottom-color: var(--color-accent-muted); } .c-tab[aria-current="page"] { color: var(--color-ink); border-bottom-color: var(--color-accent); } /* DIVERGENCE, DECLARED: the source sizes this with `@media (max-width: 56rem)` and ours asks the SHELL. `AC-M5-W8-02` measured that a media query and a container query are different questions — the shell is inset by two gutters and capped by a max-width, so they disagree across a band of widths — and every breakpoint on this site is the shell's. */ /* THE BETA NOTICE on every jig page while the panel's switch is on (`AC-M8-W13-04`): a quiet note under the tab row, not an alert — it describes the jig, nothing has gone wrong. */ .c-beta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border: var(--border-hairline) solid var(--color-rule); border-left: 3px solid var(--color-accent-secondary); border-radius: var(--radius-sm); background: var(--color-surface-raised); font-size: var(--text-sm); color: var(--color-ink); } .c-beta__tag { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-muted); } .c-workbench { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: start; } @container shell (max-width: 52rem) { .c-workbench { grid-template-columns: minmax(0, 1fr); } } /* NO PREVIEW, THE FORM TAKES THE ROOM (`AC-M8-W13-08`). One column for the workbench, and the form's FIELDS in two; everything in the form that is not a field — the note, the honeypot, the Generate row — spans both, so the button is never stranded in one half. At the shell's phone breakpoint it is one column again. `c-workbench--form` is set only when the view has no preview, so a tab with a drawing keeps exactly the layout above. */ .c-workbench--form { grid-template-columns: minmax(0, 1fr); } .c-workbench--form #jig-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); align-items: start; } .c-workbench--form #jig-form > :not(.c-field) { grid-column: 1 / -1; } @container shell (max-width: 52rem) { .c-workbench--form #jig-form { grid-template-columns: minmax(0, 1fr); } } .c-preview { position: sticky; top: var(--space-4); padding: var(--space-4); background: var(--color-surface); border: var(--border-hairline) solid var(--color-rule); border-radius: var(--radius-md); min-height: 12rem; } /* THE LIVE SHEET'S FRAME (`AC-M6-W10-04`). Three rules from `jigs_web/static/css/jigs.css` at `ceda0e9`, ported verbatim apart from the tokens, all five of which we already declare — so nothing here is a new name and nothing is a literal. `width: 100%; height: auto` ON THE SVG IS WHAT MAKES THE SHEET RESPONSIVE, and it is the rule doing the work rather than the figure's. The generator emits a document with its own intrinsic size in millimetres; left alone it would render at that size and overflow the pane on a phone. The caption says "1:1 on the laser bed" and that remains true of the FILE — the link beside it opens the drawing at its real dimensions. What is scaled is the picture of it. */ .c-preview__sheet { margin: 0; } .c-preview__sheet svg { width: 100%; height: auto; display: block; background: var(--color-surface-raised); border: var(--border-hairline) solid var(--color-rule); border-radius: var(--radius-sm); } .c-preview__sheet figcaption { margin-top: var(--space-2); } /* The three post-generate states. One shell, three left edges — which is what makes them read as the same card in different conditions rather than three components. */ .c-status, .c-result, .c-error { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); border: var(--border-hairline) solid var(--color-border); background: var(--color-surface); } .c-status { border-left: 4px solid var(--color-accent-secondary); } .c-result { border-left: 4px solid var(--color-success); } .c-error { border-left: 4px solid var(--color-danger); } .c-error ul { margin: 0; padding-left: var(--space-5); } .c-license-note { font-size: var(--text-sm); color: var(--color-ink-muted); border-top: var(--border-hairline) solid var(--color-rule); margin-top: var(--space-3); padding-top: var(--space-3); } .c-facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-4) 0 0; } .c-facts > div { display: flex; flex-direction: column; gap: 2px; } .c-facts dt { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-muted); } .c-facts dd { margin: 0; } /* The unit switch. `::after` carries the 44px hit area without changing the pill's visual box — the same idiom `.c-locale__link` uses here, and `RC-088` is why both have one. */ /* AC-M6-W16-03. THE PILL HUGS ITS CONTENT. It is a block-level `
    `, so `display: flex` with no width filled the column — 352px at 1280 and 621px at 760, around two buttons summing 78px. In `jigs_web` this same rule sat in a header utility row where the surrounding flex shrink-wrapped it; here it is divergence ⑥'s geometric consequence, not a mis-port: the rule is byte-identical to `jigs.css:623`. Marcin asked for either half-and-half or `in` narrowed to `mm`'s width. `mm` and `in` are both two characters in the same mono face with equal padding, so a pill that hugs its content gives the second exactly and the first to within a pixel — measured at 39px and 39px. No choice was needed and none was made. */ .c-unit { display: flex; width: fit-content; border: var(--border-hairline) solid var(--color-border); border-radius: var(--radius-pill); overflow: hidden; } .c-unit__option { position: relative; display: inline-flex; align-items: center; min-height: var(--target-min); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; padding: var(--space-2) var(--space-3); color: var(--color-ink-muted); background: none; border: 0; cursor: pointer; transition: background var(--duration-fast) var(--ease-standard); } .c-unit__option::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; height: var(--target-min); } .c-unit__option:hover { background: var(--color-surface); color: var(--color-ink); } .c-unit__option[aria-current="true"] { background: var(--color-ink); color: var(--color-ink-inverse); } .c-field--error input, .c-field--error select { border-color: var(--color-danger); } .c-field--split { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); align-items: center; } .c-field--split > label { grid-column: 1 / -1; } .c-field--split > .c-field__help, .c-field--split > .c-field__error, .c-field--split > .u-visually-hidden { grid-column: 1 / -1; } .c-field__unit { font-size: var(--text-sm); color: var(--color-ink-muted); } .c-field__help { font-size: var(--text-xs); color: var(--color-ink-muted); } .c-field__error { font-size: var(--text-sm); color: var(--color-danger); } /* Rendered markdown — the assembly guide and the licence. */ .l-prose { max-width: var(--measure); } .l-prose h2 { font-size: var(--text-xl); margin-top: var(--space-8); } .l-prose h3 { font-size: var(--text-lg); margin-top: var(--space-6); } .l-prose ul, .l-prose ol { padding-left: var(--space-5); } .l-prose li { margin-bottom: var(--space-2); } .l-prose hr { border: 0; border-top: var(--border-hairline) solid var(--color-rule); margin: var(--space-8) 0; } .l-prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-5); } .l-prose :is(th, td) { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3); border-bottom: var(--border-hairline) solid var(--color-rule); } .l-prose thead th { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); border-bottom: 2px solid var(--color-ink); } .l-prose code { font-family: var(--font-mono); font-size: 0.92em; } /* The BOM table. `c-table-wrap` is one of exactly TWO things allowed to scroll sideways — this and `.c-tabs` above — and the two are the SET of scroll containers the page ever exercises. This comment said "three" for six waves; `admin-ui/scripts/scroll-audit.mjs` measured the population at 360/390/400px and found {nav.c-tabs, div.c-table-wrap}, nothing else, so the claim is now the measured number (`AC-M7-W9-01`). Everything else that runs off a phone's edge is either decoration the shell's `overflow: clip` is for, or a defect the audit prints. */ .c-table-wrap { overflow-x: auto; } .c-table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); } .c-table th, .c-table td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3); border-bottom: var(--border-hairline) solid var(--color-rule); } .c-table thead th { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-muted); border-bottom: 2px solid var(--color-ink); } .c-table tbody th { font-weight: var(--weight-medium); min-width: 9rem; } .c-table__where { display: block; margin-top: var(--space-1); } .c-placeholder { margin: 0; padding: var(--space-6); border: 1px dashed var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); text-align: center; } /* =================================================================================== THE 3D VIEWER (`AC-M6-W10-05`, `D-099`). Marcin, on staging: "po wygenerowaniu nie ma podglądu 3d, w starych jigach był". Ported from `jigs_web/static/css/jigs.css` at `ceda0e9`, selectively — keyed on the SET of classes the two viewer templates use that had no rule here, the same method as `-07`. 18 of 19 tokens these rules need were already declared; the nineteenth is not a token at all. THE SOURCE'S `--swatch` CUSTOM PROPERTY IS NOT PORTED, AND THE EFFECT IS. It wrote the part's colour into `style="--swatch: …"` and read it back as `var(--swatch, var(--color-border))`. That is a DATA CHANNEL, not a design token — three producers write it: both viewer templates and `viewer.js`, once per part, from the generator's own per-part colours. But `design-tokens.test.ts` asserts every `var(--x)` in this stylesheet names a token `docs/design-system.md` §3 declares, and it is right to: its control is an invented `--color-brand-new`, and a custom property nothing writes resolves to NOTHING. The gate has no category for a data channel, and `docs/design-system.md` is ARCHITECT-owned, so the choice was to widen somebody else's gate for the session that wants through, or to find a form that does not need the exception. The indirection is what the gate objects to, and the indirection buys nothing here: the colour is written straight into `background`, and the DEFAULT lives below in this rule. An empty value makes the inline declaration invalid, the parser drops it, and this rule stands — which is exactly what the `var(…, fallback)` did, with one moving part instead of two. Named in the `-05` report: if the ARCHITECT would rather the gate learned the category, that is their file and their call. ONE COLOUR LITERAL CONVERTED, as in the tab bar: the swatch border was `rgb(0 0 0 / 25%)` and is `color-mix(in srgb, var(--color-ink) 25%, transparent)` here. Same reasoning — the literal is refused outside `tokens.css`, the ink token IS `#1f1a16`, and the token follows `prefers-color-scheme` where a fixed black does not. =================================================================================== */ .c-viewer { margin: var(--space-4) 0; } .c-viewer__controls { margin-block-start: var(--space-3); } .c-viewer__head { position: sticky; top: var(--space-3); z-index: 1; background: var(--color-surface-raised); } @media (max-width: 48rem) { .c-viewer__head { position: static; } } .c-viewer__stage { aspect-ratio: 16 / 9; min-height: 35rem; border: var(--border-hairline) solid var(--color-rule); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); max-inline-size: 100%; } .c-viewer__stage[data-state="loaded"] > .t-meta { display: none; } @media (max-width: 48rem) { .c-viewer__stage { aspect-ratio: auto; min-height: 16rem; height: 60vw; } } .c-viewer__stage canvas { display: block; width: 100%; height: 100%; } .c-viewer__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding-block: var(--space-2); border-bottom: var(--border-hairline) solid var(--color-rule); } .c-viewer__toolbar .c-modes { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-inline-size: 0; } .c-viewer__toolbar .c-modes > legend { float: none; padding: 0; margin: 0; } .c-viewer__toolbar .c-modes label { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); } .c-viewer__toggle { font-size: var(--text-xs); display: flex; align-items: center; gap: var(--space-1); } .c-viewer__controls > .c-viewer__slider { padding-block: var(--space-2); max-width: 32rem; } .c-viewer__panel { columns: 2; column-gap: var(--space-5); } @media (max-width: 43.75rem) { .c-viewer__panel { columns: 1; } } .c-viewer__section { break-inside: avoid; page-break-inside: avoid; display: flow-root; margin-block-end: var(--space-3); } .c-viewer__section > .t-eyebrow { display: block; margin-block-end: var(--space-1); } .c-viewer__stage > .t-meta { padding: var(--space-4); } /* THE LOADING NOTE IS HIDDEN ONCE THERE IS SOMETHING TO SEE. `data-state` is written by `viewer.js` — `element.dataset.state = 'loaded'` on success, `'error'` on failure — and the error branch also REWRITES the note's text, so this rule must hide it in exactly one of the two states and not the other. I DROPPED THIS RULE AND WAS WRONG. `styled-attributes.test.ts` reported no producer, I grepped the tree for `data-state=`, found none, and concluded it was dead in the source too. The producer is `element.dataset.state`, which that grep cannot match and neither can the gate: `hasProducer` consults the JS producer set ONLY for a selector with no class, and falls back to template tags the moment one is named. The gate has been widened to see the chain it already intended to see, with a control — not for this rule's benefit: `nav-toggle.js` was in its producer list from the start for exactly this reason. WHAT CAUGHT IT WAS NOT THE ARGUMENT, IT WAS THE BROWSER. With the rule gone the probe reported `status: "Loading the model…"` on a page whose model had loaded and whose canvas was up. A missing `display: none` is invisible to every check that reads the stylesheet. */ .c-viewer__parts { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: var(--text-xs); display: flex; flex-direction: column; gap: var(--space-1); } .c-viewer__parts label { display: flex; gap: var(--space-2); align-items: baseline; } .c-part { display: flex; flex-direction: column; gap: 2px; padding: var(--space-1) var(--space-2); margin-inline: calc(-1 * var(--space-2)); border-radius: var(--radius-sm); } .c-part.is-pointed { background: var(--color-surface); } .c-part__swatch { inline-size: 0.8em; block-size: 0.8em; flex: none; border-radius: 2px; background: var(--color-border); border: var(--border-hairline) solid color-mix(in srgb, var(--color-ink) 25%, transparent); } .c-part__name { font-family: var(--font-body); font-size: var(--text-sm); } .c-part__role, .c-part__note { font-family: var(--font-body); font-size: var(--text-xs); line-height: 1.45; } .c-part__note { font-style: italic; } .c-part--alternative .c-part__name { color: var(--color-ink-muted); } .c-part--reference .c-part__name { color: var(--color-ink-muted); } /* THE SOURCE WRITES THIS `.c-part--alternative:has(:checked) .c-part__name`, and `block-partials.test.ts` asserts the SET of `:has()` selectors here is EMPTY — it records that a run-length lookahead chain was replaced by `auto-fit`, and its mechanism is a ban on the feature. Rewritten rather than widening somebody else's gate to admit an exception: the checkbox and the name are SIBLINGS inside the same `