/* 11.5 - FOUR LITERAL DURATIONS LIVED HERE AND NO CENSUS COULD SEE THEM. This file is loaded by 91 coloured screens and sits in neither corpus the stage counts: `--source` walks `design/system/**.css` and `design/**.html`, and a stylesheet at the ROOT of `design/` is in neither. It reported «screens: 1 file with motion» for four stages while this one moved on ninety-one pages. The reduce audit found it, because that half asks the OUTPUT: whatever the browser resolves, whoever declared it. It already reads `--bg-action`, `--space-16` and the rest, so there was never a reason for the durations to be literals - the screens that load this also load `system/index.css`, and `var(--dur-fast)` resolves here exactly as it does in a component. `.15s` -> `--dur-fast`, `.2s` -> `--dur-fast`, and the two `.24s` -> `--dur-base`, which is the rung a transition inside one component takes. */ /* design/_stand.css - prototype and stand chrome, NOT part of the system. WHAT LIVES HERE. The screen shell (.wf-canvas, .wf-bar, .wf-page), the design/ screen panel (.uiv-side, .us-*) and the compact top bar it collapses into. design/_nav.js injects all of it, so a product screen still carries exactly ONE stylesheet of its own: design/system/index.css. WHAT LEFT AT STEP 7.26. The phone's burger menu (.wf-drawer, 9 lines) and the catalogue overlay (.wf-catov*, 28 lines) were PRODUCT interface filed under chrome - the first screen a customer taps, sitting in the file that paints the frame around the screenshot, and therefore absent from anyone's reading of design/system/components/. Their marks were split further still, 100 lines below the rows they coloured. They are components/nav-drawer.css and components/cat-overlay.css now, and the goal chip's mark went home to chip.css. This file draws the frame; it does not draw what is inside it. HOW THE FRAME TELLS THE PRODUCT IT IS THERE - `--shell-top` and `--shell-left`, and they are the only thing this file EXPORTS. A product rule may read them; it may not know the numbers. Off the stand they are 0 and every rule that reads them is a no-op, which is the whole point. The `--stand-*` scrims below are the opposite: declared here, read here, and read nowhere else - the frame's own greys are the frame's business, not the system's. */ /* ---------- the frame's two numbers ----------------------------------------- `--shell-top` how much of the top of the screen the harness has taken `--shell-left` how much of the left Before 7.26 these were four literals - 216, 40, 899, 900 - copied into header.css, auth-dialog.css, cart-drawer.css and checkout-form.css, each with its own media query. Step 7.25 moved the shell's own threshold to 1076 and every one of those copies stayed at 899, so between 900 and 1075 the auth dialog was pushed right of a panel that was not there, the cart drawer opened under the top bar and the checkout page did both. Four files holding a number that belongs to a fifth is not a style question, it is the same fact written five times, and the fifth edition moved. */ :root{ --shell-top: 0px; --shell-left: 0px; } /* ---------- the frame's own scrims, and why they have two halves ------------ THE PANEL STANDS ON `--bg-inverse`, WHICH MOVES. «Inverse» means «opposite of the page», so in the dark theme the plate goes from charcoal #1C1C1C to #FAF9F7 - and that is correct, it is how the frame keeps saying «I am not the product» when the product itself goes dark. What was not correct is that this file painted sixteen `rgba(255,255,255,.x)` literals onto it. White at .5 on charcoal is a quiet grey; white at .5 on #FAF9F7 is nothing at all. Measured 2026-08-13 on design/index.html in the dark theme: the flow heads, the node numbers, the caption, the arrows and the foot links all read **1.05** - 32 words of navigation, invisible, on the panel a person uses to walk the other 87 screens. THE PAIR IS NOT THE SAME ALPHA WITH A DIFFERENT INK. It is the alpha that reproduces the light half's CONTRAST against the plate it actually has, solved per line: .66 white on #1C1C1C is 8.02, and 8.03 on #FAF9F7 needs ink at .75, not at .66. tokens.css says «the direction flips, the opacity does not» over its own scrim block, and that sentence is what put --text-oninverse-muted at 3.66 in the dark against 8.02 in the light. Five variables where there were nine values, and the merges are named: the caption's .55 joined .66 (8.02), the flow head's .40 joined .50 (5.17), three hairlines at .08 / .10 / .13 became one, and the hover fill at .07 joined the current row's .08 - the current row is said by the orange bar down its left edge, never by a 1% difference in fill. */ :root{ --stand-ink-2: rgba(255,255,255,.66); /* 8.02 - the second line: caption, state row, foot link */ --stand-ink-3: rgba(255,255,255,.50); /* 5.17 - the quiet mark: node number, flow head, grey row */ --stand-ink-4: rgba(255,255,255,.28); /* 2.53 - a state this screen does not have. Disabled, and it fails its threshold in BOTH themes on purpose */ --stand-rule: rgba(255,255,255,.10); /* every hairline of the frame */ --stand-fill: rgba(255,255,255,.08); /* hover and the current row */ } [data-theme="dark"]{ --stand-ink-2: rgba(20,20,15,.75); /* 8.03 */ --stand-ink-3: rgba(20,20,15,.63); /* 5.25 */ --stand-ink-4: rgba(20,20,15,.39); /* 2.50 */ --stand-rule: rgba(20,20,15,.14); --stand-fill: rgba(20,20,15,.11); } .wf-canvas{ min-height: 100vh; margin-left: var(--shell-left); } /* 10.2: the page frame reads `--container-page` instead of writing 1200. It is the first reader of the token, and it is the right one - this rule has been the page frame of every coloured screen since stage 07. `.co-wrap` and `.cc-wrap` still write their own number and move onto it at step 4. */ .wf-page{ max-width: var(--container-page); margin: 0 auto; padding: 0 var(--space-16) var(--space-40); } /* 12.11 - A DOCUMENT PAGE IS A NARROWER PAGE, and the frame is where that has to be said. The three service screens grew an index rail beside their prose, and the pair - 68ch of text, a gap, a 16rem rail - comes to about 1014 inside a 1200 frame: the block sat at the left with 186px of air after it. Centring the LAYOUT alone would have been wrong in a way that is easy to miss - the H1, the dateline, the breadcrumb and the «Далі» row are its SIBLINGS, so the prose would have stepped right while the title it belongs to stayed put. The whole column moves or nothing does. WRITTEN AS THE RELATION, never as 1014: the same three tokens the layout reads, plus this rule's own horizontal padding. Change the rail and the frame follows. `ch` is a unit of the font it lands on, and both this element and `.info-body` are drawn at `--fs-16`, so 68ch means one number on both - the trap this file's neighbour `info-page.css` paid for at 12.7 and names in full. AND IT LIVES HERE BECAUSE THE FRAME LIVES HERE, which is a debt rather than a preference: `--container-page`'s own comment in `tokens.css` says the page frame has been `design/_stand.css .wf-page` since stage 07. The system loads before this file, so a `:has()` rule of equal specificity written in `info-page.css` would lose the tie on source order - the same tie, broken the same way, that ate four focus rings at 10.6. When the frame moves into the system, this rule moves with it. */ .wf-page:has(> .info-layout){ max-width: calc(var(--container-text) + var(--space-40) + var(--container-index) + 2 * var(--space-16)); } /* checkout is the one flow with no `.wf-canvas` - it draws its own bare header - so the margin above cannot reach it and the page is offset directly. The rule came out of checkout-form.css at 7.26: whether a harness is there is this file's fact, not the checkout's. */ body:has(.co-head){ padding-left: var(--shell-left); padding-top: var(--shell-top); } .wf-states{ background: var(--bg-sunken); border-bottom: 1px solid var(--line-hair); font-size: var(--fs-12); padding: var(--space-8) var(--space-16); color: var(--text-secondary); display: flex; gap: var(--space-8) var(--space-16); flex-wrap: wrap; align-items: center; } .wf-states b{ color: var(--text-primary); text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-12); } .wf-states a{ color: var(--text-secondary); text-decoration: underline; } .wf-states a.cur{ color: var(--text-primary); font-weight: var(--fw-black); text-decoration: none; } /* THE STAND BAR DOES NOT RENDER ON THIS LAYER, AND SIX RULES WERE PAINTING IT - step 8.42, measured rather than read: `getComputedStyle` gives `.wf-bar` `display: none` and height 0 on coach-home, coach-tariff-cancel, coach-session-addclient and cart-coach-empty at 390. The one line below has said so since 2026-08-06, when the sidebar `.uiv-side` took over as this layer's chrome. The element still EXISTS, because `wireframes/_nav.js` builds it and the grey layer shows it - one script, two layers, and the design side hides what it does not use. What went, and not one of them could draw: `background`, `color`, `font-size`, `padding`, `display: flex`, `gap`, `flex-wrap` and `align-items` on `.wf-bar`; `.wf-bar a`, `.wf-bar a:hover`, `.wf-bar .sepb`, `.wf-bar .cur`; and `body:has(.cart-drawer) .wf-bar{ position: relative; z-index: 80 }`, which was ALSO a verbatim repeat of the rule it followed. AND ALL SIX ARE `wireframes/_wf.css:1093-1097` AND `:1612`, TOKENISED. The grey layer draws its bar and needs every one of them; this file took the copy across at the colour split and hid it four lines later. Nothing here is missing from the prototype, which is why deleting them costs the grey layer nothing - it never read this file. AND THIS IS WHERE STEP 8.31b PUT TWO PRIVATE RULES. It lifted `#wf-bar{ position: relative; z-index: 80 }` off coach-session-addclient and coach-session-addempty and wrote nine lines on why the bar must stay above overlay.css's scrim at 55. The reasoning is right about the grey layer and the subject had been hidden ten days earlier, by this file, four lines further down. A migration that verifies the DESTINATION and never asks whether the subject renders moves dead code INTO the system and gives it a home. `!important` stays. The markup writes `id="wf-bar"` next to the class, and an id selector outranks a class: it is the one thing that could switch the bar back on by accident. */ .wf-bar{ display:none !important; } .uiv-side{ position:fixed; top:0; left:0; bottom:0; width:216px; z-index:90; background:var(--bg-inverse); color:var(--text-oninverse); display:flex; flex-direction:column; font-family:'Inter',system-ui,sans-serif; font-size:var(--fs-14); line-height:var(--lh-snug); border-right:1px solid var(--stand-rule); } .uiv-side .us-top{ padding:var(--space-16) var(--space-16) var(--space-12); border-bottom:1px solid var(--stand-rule); } .uiv-side .us-all{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-8); background:var(--bg-action); color:var(--text-onaction-ink); font-weight:var(--fw-bold); text-decoration:none; border-radius:var(--radius-8); padding:var(--space-12) var(--space-12); font-size:var(--fs-14); letter-spacing:var(--ls-lead); transition:filter var(--dur-fast) var(--ease-standard); } .uiv-side .us-all:hover{ filter:brightness(1.06); } .uiv-side .us-tagrow{ display:flex; align-items:center; gap:var(--space-8); margin-top:var(--space-12); } .uiv-side .uiv-tag{ background:var(--bg-action); color:var(--text-onaction-ink); font-weight:var(--fw-bold); letter-spacing:var(--ls-caps); border-radius:var(--radius-4); padding:var(--space-2) var(--space-8); text-transform:uppercase; font-size:var(--fs-10); } .uiv-side .us-cap{ font-size:var(--fs-12); color:var(--stand-ink-2); } .uiv-side .us-nav{ flex:1; overflow-y:auto; padding:var(--space-16) var(--space-12) var(--space-12); } .uiv-side .us-nav::-webkit-scrollbar{ width:0; } .uiv-side .us-flow{ font-size:var(--fs-12); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--stand-ink-3); padding:var(--space-2) var(--space-8) var(--space-8); } .uiv-side .us-page{ display:block; font-weight:var(--fw-bold); color:var(--text-oninverse); text-decoration:none; padding:var(--space-8) var(--space-12); border-radius:var(--radius-8); } .uiv-side .us-page:hover{ background:var(--stand-fill); } .uiv-side .us-page.on{ background:var(--stand-rule); box-shadow:inset 2px 0 0 var(--line-action); } .uiv-side .us-page .nd{ font-family:var(--font-mono); font-size:var(--fs-12); color:var(--stand-ink-3); } .uiv-side .us-states{ margin:var(--space-4) 0 var(--space-4) var(--space-8); padding-left:var(--space-8); border-left:1px solid var(--stand-rule); } .uiv-side .us-st{ display:block; color:var(--stand-ink-2); text-decoration:none; padding:var(--space-8) var(--space-12); border-radius:var(--radius-8); font-size:var(--fs-14); margin-bottom:var(--space-2); } .uiv-side .us-st:hover{ color:var(--text-oninverse); background:var(--stand-fill); } .uiv-side .us-st.on{ color:var(--text-onaction-ink); background:var(--bg-action); font-weight:var(--fw-bold); } .uiv-side .us-st.off{ color:var(--stand-ink-4); } .uiv-side .us-st.grey{ color:var(--stand-ink-3); } .uiv-side .us-st.grey .gr{ font-size:var(--fs-10); opacity:.55; margin-left:var(--space-2); } .uiv-side .us-foot{ border-top:1px solid var(--stand-rule); padding:var(--space-12) var(--space-16) var(--space-16); display:flex; flex-direction:column; gap:var(--space-8); } .uiv-side .us-foot a{ color:var(--stand-ink-2); text-decoration:none; font-size:var(--fs-12); } .uiv-side .us-foot a:hover{ color:var(--text-oninverse); } /* 1076, AND THE NUMBER IS 216 + 860 - step 7.25. The panel is 216 wide and it PUSHES the canvas, but the product inside the canvas switches layouts on `@media`, which reads the viewport and knows nothing about the 216 taken from it. So between 900 and 1075 the header drew its >=860 desktop row inside a canvas of only viewport-216: measured on index.html, the action row ran 61px past the page at 900, 41 at 920, 21 at 940, and the whole page scrolled sideways. The mega menu, 940 wide, was cut the same way and much longer. 860 is the width at which the product itself says the desktop layout fits, so the panel may not appear until the canvas still has that much: 216 + 860. Below it the shell already has an answer - the 40px top bar. This is the ONE place either threshold is written. Everything that has to move with it reads `--shell-top` / `--shell-left` - step 7.26. */ @media(min-width:1076px){ :root{ --shell-left:216px; } } @media(max-width:1075px){ :root{ --shell-top:var(--size-40); } body:not(:has(.wf-canvas)) #wf-header{ margin-top:var(--shell-top); } } .uiv-topbar{ display:none; } .uiv-sidescrim{ display:none; } @media(max-width:1075px){ .uiv-topbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-12); position:fixed; top:0; left:0; right:0; height:var(--size-40); z-index:92; padding:0 var(--space-12); background:var(--bg-inverse); color:var(--text-oninverse); border:none; cursor:pointer; border-bottom:1px solid var(--stand-rule); font-family:'Inter', system-ui, sans-serif; } .uiv-topbar .ut-l{ display:inline-flex; align-items:center; gap:var(--space-8); } .uiv-topbar .ut-label{ font-weight:var(--fw-bold); font-size:var(--fs-14); } .uiv-topbar .uiv-tag{ background:var(--bg-action); color:var(--text-onaction-ink); font-weight:var(--fw-bold); border-radius:var(--radius-4); padding:var(--space-2) var(--space-8); font-size:var(--fs-10); text-transform:uppercase; letter-spacing:var(--ls-caps); } .uiv-topbar .ut-chev{ color:var(--stand-ink-2); transition:transform var(--dur-fast) var(--ease-standard); } body.uiv-side-open .uiv-topbar .ut-chev{ transform:rotate(180deg); } /* `margin-left:0` is gone: `--shell-left` is already 0 in this range, and a second answer to the same question is how the four component files got out of step in the first place. */ .wf-canvas{ margin-top:var(--shell-top); transition:margin-top var(--dur-base) var(--ease-standard); } .uiv-side{ position:absolute; z-index:20; top:var(--shell-top); left:0; right:0; bottom:auto; width:auto; max-height:0; overflow:hidden; border-right:none; border-bottom:none; box-shadow:none; transform:none; transition:max-height var(--dur-base) var(--ease-standard); } body.uiv-side-open .uiv-side{ max-height:var(--uiv-side-h, calc(100vh - var(--shell-top))); overflow-y:auto; border-bottom:1px solid var(--stand-rule); } body.uiv-side-open .wf-canvas{ margin-top:calc(var(--shell-top) + var(--uiv-side-h, 0px)); } .uiv-side .us-tagrow{ display:none; } .uiv-sidescrim{ display:none !important; } } /* step 7.26: the seven lines that stood here painted the marks of the burger menu, the goal chip and the catalogue overlay - three components, coloured from the chrome file, a hundred lines below the rules that shape them. They are in nav-drawer.css, chip.css and cat-overlay.css now, each beside its own control. Nothing about a mark's colour was the stand's business. */