/* * Order-flow stylesheet — step 1, "Delivery & Install", and the persistent * order rail. * * Served as a static asset and pulled in by `` rather than * `import`ed, for exactly the reasons given at the top of chrome.css: a bundled * import attaches the chunk to the shared `[brand]` layout segment and Next then * emits a to it on every brand's every page. A hoisted to a public * asset is rendered only by the page that needs it. * * Transplanted from design/produnk/FlowStep1.dc.html (drawn at 1440), * mechanically tokenised: colours and typefaces read `--brand-*`, sizes and * radii read the platform constants in globals.css. Board values ship verbatim — * the odd numbers (5.5px paddings elsewhere on this site, this board's 26px * inset indent, its 76px option label) are measured, not sloppy (playbook §3). * * Class prefix `sf-flow-`, which the partition in `tests/order-flow.test.ts` * sweeps against this flow's markup. SAME FLAG THE PRODUCT SHEET RAISED: * `tests/category-page.test.ts` sweeps chrome.css with `/\.sf-(?!cat-|home-)/`, * which now also claims every `sf-pdp-` and every `sf-flow-` name and has markup * for neither. Both prefixes have to join that exclusion; this pass does not * edit that file (another agent owns it), so it is FLAGGED, not applied. * * THE RAIL IS FLOW-LOCAL, DELIBERATELY. It is the unified cart/rail/drawer * pattern (tokens §4) and it has exactly one consumer today. When the SECOND * one lands — the parts drawer, or step 3's checkout summary — the rail's rules * (`.sf-flow-rail*`, `.sf-flow-line*`, `.sf-flow-inset*`, `.sf-flow-badge`, * `.sf-flow-edit*`, `.sf-flow-option*`, `.sf-flow-chip`, `.sf-flow-qty*`) move * to a shared sheet with a shared prefix and this one keeps what is genuinely * the flow's: the step indicator and the two step states. A shared component * with one caller is a guess about the second. * * THE BOARDS DECLARE NO LEADING, so every line box on them that does not name * one is `normal`. globals.css's body 1.65 would otherwise deepen every card, * every chip and every mono figure; `.sf-flow` resets it once, the same way * `.sf-pdp` and `.sf-cat-hero` do. globals.css also styles every h1-h3 with the * heading face at weight 500, a -0.015em track, 1.12 leading and `text-wrap: * balance` — every heading below restates what the board draws instead. * * THE BOARD IS CONTENT-BOX and this site is border-box, so every place the * drawing carries an EXPLICIT width or height ALONGSIDE padding or a border — * the zip field, the step dots — ships the border-box equivalent with its * arithmetic written beside it, not the board's authored number. Copying the * authored numbers instead is a proven ~0.8% reading against a board (the * product page's zip rows). */ .sf-flow { /* THE BOARD'S DEFAULT TEXT is the browser's own 16px at `normal` leading — * its sets neither. globals.css sets the site's body to 17/1.65, so * everything the board leaves unstyled (its quiet links, its bare divs) would * render a size and a leading larger than drawn. Both are restated once here * rather than per element, the same way `.sf-pdp` restates the leading. */ font-size: var(--text-emphasis); line-height: normal; /* NO `padding-bottom` ANY MORE (Ryan's ruling A3, 2026-08-27). The board's * wrapper carries 48px under the grid before the page ends, and that job * belongs to the FOOTER now: `.sf-footer` owns its own space above, on every * page, so no page carries footer clearance of its own. Leaving this here * would be 48px added to the site-wide 80. */ } /* ------------------------------------------------------------ focus ring -- */ /* * The site-wide ruled ring (Ryan, 2026-08-26): thickened, WCAG-compliant, and * the same on every surface. `--sf-focus-ring` and its halo are declared on * `:root` by chrome.css; the fallbacks repeat the value exactly once, in this * sheet's own focus block, so a page that somehow loaded this sheet without that * one still draws a compliant ring — same discipline as category.css and * home.css. */ .sf-flow a:focus-visible, .sf-flow button:focus-visible, .sf-flow input:focus-visible, .sf-flow select:focus-visible { outline: var(--sf-focus-ring, 2px solid var(--brand-color-accent, #c4530a)); outline-offset: var(--sf-focus-ring-offset, 2px); } /* The rail's controls sit on white inside a bordered card; the halo separates * the ring from the card's own hairline. */ .sf-flow-rail button:focus-visible, .sf-flow-rail a:focus-visible { box-shadow: var(--sf-focus-halo, 0 0 0 4px var(--brand-color-surface, #ffffff)); } /* Screen-reader-only text. `position: absolute` needs a positioned ancestor or * it extends the DOCUMENT's scrollable overflow (playbook §5, the sr-span * overflow bug) — `.sf-flow-rail__disclose` is `position: relative` for exactly * this. */ .sf-flow-sr { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } /* ------------------------------------------------------ the calc mark -- */ /* * "WE ARE WORKING ON IT" — three pulsing dots (Ryan, 2026-09-01). * * WHY IT IS HERE, ABOVE THE BLOCKS, and not inside `.sf-flow-ck__` or * `.sf-flow-rail__`: it is drawn in THREE places that are in two different * blocks — the address card's band, the rail's note under the money moment, * and the place-order button — and a mark that lives inside one of them would * have to be reached from the others by selector. It is a utility beside * `.sf-flow-sr` above, which is the only other thing in this sheet with the * same shape of life. * * IT IS THE HOUSE'S OWN FIGURE, redrawn rather than invented: `sections.css`'s * `.sf-embed__dot` behind the AI answer card is the same three dots at the same * cadence. That sheet is not loaded on the checkout (flow.css is a static asset * served by path), so the drawing is repeated where it is needed rather than * imported to no effect — the same trade `flow-title.tsx` makes in the other * direction with chrome.css. * * NO RING, NO SWEEP, NO GRADIENT. The storefront is flat and its accent is the * orange on the button this usually sits under; a spinner would be the only * rotating thing on the site, and a second orange under an orange button reads * as two states arguing. * * `position: relative` because the label is sometimes an `.sf-flow-sr` span, * which needs a positioned ancestor or it extends the document's scrollable * overflow (playbook §5, the sr-span overflow bug). */ .sf-flow-calc { align-items: center; display: inline-flex; gap: 8px; position: relative; } .sf-flow-calc__dots { align-items: center; display: inline-flex; flex: none; gap: 5px; } /* The sentence beside the dots. It carries no size or colour of its own — * the band, the note and the button each set their own type, and a mark that * imposed one would look pasted into two of the three. */ .sf-flow-calc__label { min-width: 0; } .sf-flow-calc__dot { animation: sf-flow-calc-pulse 1.05s ease-in-out infinite; background: currentcolor; border-radius: var(--radius-pill, 999px); height: 5px; width: 5px; } /* `currentcolor` above and nothing here: the dots take the ink of whatever * they were dropped into — muted in the band, muted in the rail's note, the * button's own disabled ink on the bar — so one drawing reads correctly on * three grounds without three modifiers. */ .sf-flow-calc__dot:nth-child(2) { animation-delay: 0.15s; } .sf-flow-calc__dot:nth-child(3) { animation-delay: 0.3s; } @keyframes sf-flow-calc-pulse { 0%, 80%, 100% { opacity: 0.28; } 40% { opacity: 1; } } /* A reader who asked for less motion gets a still row of dots. The STATE is * still drawn — three dots and a sentence saying what is being calculated — * only the pulse stops, which is the same bargain `sections.css` strikes. */ @media (prefers-reduced-motion: reduce) { .sf-flow-calc__dot { animation: none; opacity: 0.6; } } /* ----------------------------------------------------------- page title -- */ /* * THE FLOW'S TITLE BAND — the platform band, minus the crumbs (Ryan's ruling, * 2026-08-26; the component is `flow-title.tsx` and carries the reasoning). * * chrome.css owns every rule that draws it. What is left here is the ONE thing * that is only true of a band with no crumb row: `.sf-title-band__row` carries * `margin-top` — 18px at desktop, 10 on a phone — and that margin is the air * BETWEEN the crumbs and the title. With no crumbs above it, it is 18px of * nothing at the top of the band, on top of the band's own 26. * * Written as a modifier rather than by overriding the row wherever it appears, * because the crumbed band on the category page is the same element and must * not move. */ .sf-title-band--flow .sf-title-band__row { margin-top: 0; } /* * AND ON THE PHONE IT PINS — WHOLE, WHICH IS WHAT MAKES IT CHEAP (Ryan's * ruling, 2026-08-27, reversing the "deliberately not sticky" line above and in * `flow-title.tsx`: title sticky, stepper not, order band pinned beneath it). * * NOT the chrome's driven band. `.sf-title-band[data-driven]` pins at * `--sf-pinned-offset − band-h + stuck-h` and shrinks its title into a line so a * crumb row and a page control can travel off the top behind the bar. This band * has neither: one word, one row, nothing to shed. So it pins at the chrome's * own offset with the height it already has, and BECAUSE nothing changes size * when it sticks there is no flow-height invariant to keep — which is the whole * reason it may be `position: fixed` rather than driven. * * AND IT MUST NOT BE DRIVEN, which is now a MEASUREMENT rather than a taste * (checked against the category batch that landed the same day). chrome.css's * mobile stuck line is built around the category band's QUIET DROPDOWN: * `--sf-band-stuck-line-m` is that control's 44px box, and the stuck height it * makes is 20 + 44 + 12 + 1 = 77px. This band's WHOLE resting height at 390 is * 56.516. Mounting a driver here would therefore pin it at * `54 − 56.516 + 77 = 74.5` — the band hanging 20px below the nav bar with a * strip of page behind it — and would have every reader of the token, this * page's order band included, reserve 77px for a 56.5px band. The band is not a * title-and-control line; it is a title. So the driver stays off and the token * is this band's own height. * * `fixed` RATHER THAN `sticky`, and the difference is the point (see * `flow-pin.tsx`): a sticky band travels only inside its containing block, and * `
` on this page ends where the footer begins — a hundred-odd pixels * below the flow in the short states. Its RESTING position is already the pinned * one (it sits directly under the pinned nav row), so taking it out of flow * changes nothing at rest, and `.sf-flow` reserves the height it no longer * occupies. * * `--sf-band-stuck-h` IS THEREFORE ITS WHOLE HEIGHT, not zero. The token means * "the height a band occupies once it is stuck under the nav row", and * everything that pins below the chrome reads it — `html { scroll-padding-top }` * on this page, and the order band's own offset below. Measured by `flow-pin.tsx` * and published on `:root`; the declared values here are its pre-driver * fallback, and they are the two cuts' RENDERED heights (measured 2026-08-27, * Schibsted Grotesk 700): 26 + 37 + 26 + 1 = 90 above the mobile cut, where the * title sets at 30px, and 14 + 23.516 + 18 + 1 = 56.516 below it, where it sets * at 21. The fraction is kept for the reason `title-band-sticky.tsx` keeps its * own: this height lands one band's top edge on another's bottom, and a rounded * pair would show a seam of page between them. * * ABOVE THE COLLAPSED-BAND CUT IT IS STILL STATIC, and the token still zero: the * ruling is the phone's choreography, the desktop rail is a column that pins * itself, and a 90px band pinned across a desktop viewport is furniture nobody * asked for. * * The doubled `:has()` is deliberate and is not a specificity trick for its own * sake: chrome.css's selector scores (0,2,0) and this must beat it from a sheet * whose position in the cascade is decided by React's hoisting order, not by * anything written down. Two matched conditions score (0,3,0) and win wherever * they are, and the second condition — `.sf-flow` — is a true statement about * this page rather than a repeat of the first. */ :root:has(.sf-title-band--flow):has(.sf-flow) { --sf-flow-title-h: 90px; --sf-band-stuck-h: var(--sf-flow-title-h); } @media (max-width: 767.98px) { :root:has(.sf-title-band--flow):has(.sf-flow) { --sf-flow-title-h: 56.516px; } } @media (min-width: 920px) { :root:has(.sf-title-band--flow):has(.sf-flow) { --sf-band-stuck-h: 0px; } } @media (max-width: 919.98px) { .sf-title-band--flow { left: 0; position: fixed; right: 0; /* The chrome's own rung, and nothing added: the band IS the row under the * nav bar. */ top: var(--sf-pinned-offset, 54px); /* chrome.css's own band z-index — over the page, under the header's 40, so * the nav bar and the badge hanging off it stay in front. */ z-index: 20; } /* THE HEIGHT IT NO LONGER OCCUPIES, given back to the page as padding rather * than as a margin: `.sf-flow` is `
`'s first in-flow child once the band * is fixed, and a top margin there would collapse out through `
` and * appear above the page instead of inside it. Padding cannot collapse. */ .sf-flow { padding-top: var(--sf-flow-title-h, 56.516px); } } /* -------------------------------------------------------- step indicator -- */ /* * THE PROGRESSION BAR HAS A GROUND (Ryan's ruling, 2026-08-26): with the order * rail below it gone full-bleed, the stepper needed to read as a band too, and * the ruling names it "slightly darker than the body". That is `well` (#F1F0EC) * — tokens §1's own "gray bands" job, and the one step down from the page's * `paper` (#FBFBFA) that the palette actually has. `line` (#E8E7E3) is the * hairline value and would have been a band the width of a border; `surface` * is lighter, not darker. * * SO THE STACK AT THE TOP OF THE PAGE IS THREE DECLARED GROUNDS, darkening * downwards and then resolving: nav blue, paper title band, well stepper band, * page. Each one is separated from the next by a change of ground rather than * by a rule, which is what stops the region reading as four stacked cards. * * FULL-BLEED, AND STRUCTURALLY so — this element is now OUTSIDE `.sf-container` * and renders one inside itself (`flow-steps.tsx`). A negative margin would * have been half a band above 1440. Nothing here can overflow: the band is a * plain block at 100% and the measure inside it is the same `.sf-container` * every other row on the page uses. */ .sf-flow-steps { background: var(--brand-color-well, #f1f0ec); /* Symmetric, because it is a band now: the board's lone `padding-top: 22px` * described a row of marks floating on the page ground with the grid's own * 28px margin under it. A ground needs both edges. 18 either side sets the * band at 64px tall against the 28px step dots. */ padding-block: 18px; } /* The board draws the row as a `space-between` flex with ONE child, so the step * list is a flex ITEM and shrinks to fit. As a block `
    ` it would fill the * measure, and the crop would not be the same region. That flex now lives on * the band's inner measure rather than on the band, which is the only thing the * band-ification moved. */ .sf-flow-steps > .sf-container { display: flex; justify-content: space-between; } .sf-flow-steps__list { align-items: center; display: flex; /* The board's items carry their own 16px connector margins; the list itself * draws no gap. */ gap: 0; list-style: none; margin: 0; padding: 0; } .sf-flow-steps__item { align-items: center; display: flex; gap: 10px; } .sf-flow-steps__rule { background: var(--brand-color-line-mid, #d8d6d0); flex: none; height: 1px; /* The board draws the connector as a SIBLING between two items, 16px clear on * each side, in a row with no gap. Here it is the first child of the item it * precedes, in a row that HAS a 10px gap — so it carries the full 16 on its * left and 6 on its right, and the item's own gap makes that 16 too. */ margin: 0 6px 0 16px; width: 56px; } .sf-flow-steps__dot { align-items: center; background: var(--brand-color-surface, #ffffff); border: 1.5px solid var(--brand-color-line-mid, #d8d6d0); border-radius: 50%; color: var(--brand-color-muted, #6c6a62); display: flex; flex: none; font-size: var(--text-caption); font-weight: 700; /* The board's 26 is its CONTENT box, plus its border on each side — and the * border is the measured 1px, not the authored 1.5: Chrome rounds a * fractional border width to whole device pixels, so at DPR 1 the board's own * dot renders 28x28 (measured on the board itself). 1.5px selection borders * elsewhere on the site are unaffected — they sit on auto-sized boxes where * nothing does arithmetic with them. */ height: 28px; justify-content: center; width: 28px; } .sf-flow-steps__dot--current { background: var(--brand-color-ink, #17181a); border-color: var(--brand-color-ink, #17181a); color: var(--brand-color-surface, #ffffff); } /* * A COMPLETED STEP: the same ink fill as the current one, with a check in place * of the numeral. Unreachable from step 1 — the only step that exists — and it * is here because the phone rung above drops the labels: without the check, a * filled dot behind the current step would be indistinguishable from it, and * the row would say two steps are current. */ .sf-flow-steps__dot--done { background: var(--brand-color-ink, #17181a); border-color: var(--brand-color-ink, #17181a); color: var(--brand-color-surface, #ffffff); } /* A COMPLETED STEP IS A LINK (2026-08-27, with step 2) — the flow's way back, * and the reason no step draws a Back button. It wraps the dot and the label * without changing either: the row's own metrics are on those two elements, so * this box only has to stop being an underlined text link and keep the pair * on one line. */ .sf-flow-steps__back { align-items: center; display: inline-flex; gap: 10px; text-decoration: none; } .sf-flow-steps__label { color: var(--brand-color-muted, #6c6a62); font-size: var(--text-support); font-weight: 500; } .sf-flow-steps__label--current { color: var(--brand-color-ink, #17181a); font-weight: 700; } /* * A COMPLETED STEP'S LABEL IS `ink-soft`, NOT `muted` — the step-2 board draws * three DIFFERENT label treatments, and step 1's board could only show two of * them (nothing is completed on step 1), so this rung was missing and the * completed label was rendering as an upcoming one. Found by the `a2-steps` * gate at the ACCEPTANCE threshold: #6C6A62 against #44464A is a max-channel * delta of 40, well over 24, on the only region that draws the state. * * It reads correctly as well as faithfully: a step behind you is darker than * one ahead of you and lighter than the one you are on, which is the ordering * the three greys are for. */ .sf-flow-steps__label--done { color: var(--brand-color-ink-soft, #44464a); } /* ------------------------------------------------------------- the grid -- */ /* * THE BOARD'S TWO-COLUMN GRID, AT THE WIDER OF THE TWO WIDTHS ITS BOARDS DRAW: * `1fr 380px` with a 32px gap, `align-items: start` so the rail can stick. The * board draws it inside `margin: 0 64px`, which is the page gutter * `.sf-container` already owns — duplicating it here would double it (the same * call the product page's grid made). * * 360/28 → 380/32 (Ryan's ruling, 2026-08-27: "go with a wider rail, give the * dense order room to breathe"). THE BOARDS THEMSELVES DISAGREED and the ruling * is which one the shell renders: `FlowStep1` and `FlowAccessories` draw * `1fr 360px` at 28, `FlowCheckout` and `ConfirmPage` draw `1fr 380px` at 32. * Neither family is a typo — both are measured drawings — and the shell is ONE * grid across all three steps, so this was never a per-step choice. The * checkout/confirmation family wins; steps 1 and 2's drawings become DELIBERATE * DIVERGENCES, declared per region in `flowgate.mjs` as a 24px-narrower content * crop and a 20px-wider rail crop. What the same move settles for free: step 3 * and `/order-confirmation` (`confirm.css`, `1fr 380px` at 32) stop being * flagged AGAINST the shell and now measure the same rail on both surfaces. * * THE RAIL STILL NARROWS TO 300 at the 1239.98 rung (the board's own caption * rule, below) — the ruling widened the rail, it did not delete the ladder. The * 32px gap is inherited there, and stops at the 919.98 cut where the band goes * full-bleed and names its own 20. * * WHAT THE 20px DOES NOT AUTOMATICALLY BUY BACK: the option rows' label still * takes its own line (see `.sf-flow-option__label`). At 380 the board's * label-beside-chips row FITS AGAIN at this rung — measured, not assumed — but * only at this rung, and reversing a drawing decision is Ryan's call, not a * consequence of a width. */ .sf-flow__grid { align-items: start; display: grid; /* `minmax(0, 1fr)`, not a bare `1fr`: an `fr` track's automatic minimum is its * MIN-CONTENT, and this column holds nowrap furniture (the wide Continue, the * install price row). A bare `1fr` is floored by them well before the mobile * cut. */ grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; margin-top: 28px; } /* The pinned stack's sentinel: a marker at the order band's resting top, in * normal flow and worth nothing in it. What it CARRIES is declared at the * collapsed-band cut. */ .sf-flow__pin { height: 0; } .sf-flow-step { display: flow-root; } /* --------------------------------------------------------- the furniture -- */ /* The board's `.card`. */ .sf-flow-card { background: var(--brand-color-surface, #ffffff); border: var(--border-hairline); border-radius: var(--radius-control); } /* * The board's `.btn` — accent is commerce (tokens §3). * * NORMALISED TO THE 48px PLATFORM PRIMARY (Ryan, 2026-08-26). The board's own * `15px 28px` on a 16/normal line box renders 50 tall, which is not a value the * scale has — §3 says primary buttons are 48 and the product page's buy bar is * the reference implementation (`min-height: 48px`, padding on the sides only). * This is the same box by the same means: the height is DECLARED and the text is * centred in it, so the button no longer changes size with whatever leading a * line box happens to inherit. Widths are unchanged — the side padding is the * board's. */ .sf-flow-btn { align-items: center; background: var(--brand-color-accent, #c4530a); border: 0; border-radius: var(--radius-control); color: var(--brand-color-surface, #ffffff); cursor: pointer; display: inline-flex; font-family: inherit; /* THE PRIMARY RUNG, from globals.css §3 (Ryan's "a button is a button", * 2026-09-01). The numbers below are exactly what this rule already carried — * this button was the one the whole site is now normalised TO — so reading * them from the tokens is a no-op here by construction, and the fallbacks * repeat each value once, the `--sf-pinned-offset` discipline. */ font-size: var(--button-text, 16px); font-weight: var(--button-weight, 700); justify-content: center; min-height: var(--control-height, 48px); padding: 0 var(--button-pad-x, 28px); text-align: center; /* BOTH OF THESE ARE WORN BY AN `` NOW (2026-08-27): every Continue out of * step 1 became a link when step 2 landed, because the order is the URL and * a control that changes it goes somewhere. globals.css sets `a { color: * inherit }` and nothing else, so the UA's underline is still on and has to * be said off. A no-op on the buttons that also wear it. */ text-decoration: none; } .sf-flow-btn:hover { background: var(--brand-color-accent-strong, #9c420a); } /* The board draws the tier-2 primary at 56px of side padding. */ .sf-flow-btn--wide { padding: 0 56px; } /* * THE ACCESSORY ROW's height (step 2's board): the card's control row is * unified at 40 — "Full details · stepper · Add to order" all measure the same, * which is the caption's own word for it and what `--control-height-sm` is. */ .sf-flow-btn--row, .sf-flow-ghost--row { align-items: center; display: inline-flex; font-size: var(--button-text-sm, 14.5px); /* THE WEIGHT COMES DOWN WITH THE RUNG (2026-09-01). `.sf-flow-btn` above is * 700 because the primary rung is; dropping only its height left an "Add to * order" drawing 40/14.5/700 next to a "Full details" drawing 40/14.5/600 in * the SAME control row. A rung is a height AND a type — that is the whole * point of pinning them together. */ font-weight: var(--button-weight-sm, 600); justify-content: center; min-height: var(--control-height-sm, 40px); padding: 0 var(--button-pad-x-sm, 18px); /* BOTH OF THESE HOST AN `.sf-flow-sr` SPAN — "Add to order" and "Remove" are * the same words on eight cards, so each carries the accessory's name for a * reader listing the page's controls. An absolutely-positioned span whose * ancestors are all static takes the PAGE as its containing block and extends * the document's scrollable overflow (playbook §5, the sr-span overflow bug), * so the control it belongs to is positioned. */ position: relative; } /* * ═══ W84 — THE ORDER MARK ON "ADD TO ORDER" (Ryan, 2026-09-03) ═══ * * "Add To Order button gains the order icon." The mark is `CartMark` — the same * glyph the rail draws beside "Your order" and the product page's buy bar draws * on its own primary — so the three conversion controls a shopper meets on the * way through wear one mark rather than three. * * `inline-flex`, NOT `block`, and this is the trap the playbook records: an * `` inside a `display: block` span stays inline and picks up the line * box's 3px descender, which would sit the mark low against a centred label. A * flex wrapper blockifies it. * * THE GAP IS THE BUY BAR'S, SCALED TO THE RUNG. That button draws a 17px mark * 10px from its words inside a 48px box; this row is 40, so the mark is 15 and * the gap 8 — the same proportion, not a second convention. */ .sf-flow-btn__mark { align-items: center; display: inline-flex; margin-right: 8px; } /* THE ROW MODIFIER IS NOW THE BASE GHOST'S OWN BOX (2026-09-01). It used to be * the one place the ghost was told to declare its height, because the base was * padding-derived; the button audit moved that discipline into `.sf-flow-ghost` * itself, so the pair above only still exists to give `.sf-flow-btn--row` — the * PRIMARY — the compact rung for the accessory row. The ghost's own weight is * already the rung's, and the shared rule now says it for both, so the separate * `.sf-flow-ghost--row { font-weight }` declaration retires here. */ /* The rail's CTA: full width, at the same declared 48. */ .sf-flow-btn--block { display: flex; margin-top: 14px; padding: 0; width: 100%; } /* * The board's `.ghost`: ink-outlined, wayfinding, never commerce. * * TRANSPARENT, NOT WHITE — and it took a threshold-2 reading to see it. The * board declares no background on `.ghost`, so on the tier-1 self-install card * (which is `paper`, not `surface`) the button shows the card through it. White * against paper is a max-channel delta of 4: invisible to the acceptance * threshold, and a 2.959% region at threshold 2. A `

    `s — the chrome's title band * and this one. It now has the band's, alone. */ /* The chip row, in the head row now: no top margin of its own (the flex row * owns the spacing) and it may wrap under itself on a narrow measure. */ .sf-flow-step2__facets { display: flex; flex-wrap: wrap; gap: 8px; } /* * ═══ W88 — A FILTER IS A BUTTON'S HEIGHT (Ryan: "are you sure we're keeping * our button consistent?") ═══ * * The board drew these as `.ghost-sm` chips — 13px/500 inside a box that * measured 32 tall — and that was defensible while they sat on a row of their * own under a heading. W88 stands them BESIDE Continue, and a 32px control next * to a 48px one in the same row is the exact defect BTN-UNIFY was written to * catch. Ryan named it on sight. * * SO THEY TAKE THE PRIMARY RUNG, whole: 48px tall, 16/700 type, the house's * `--radius-control`. Not the compact 40 — the ruling is "the same height as * Continue", and Continue is the page's primary. * * AND THEY JOIN THE SWEPT FAMILY. `btngate` used to EXCLUDE `sf-flow-facet` * with the note "chips = pill; a filter is not an action". Two things about * that exclusion were wrong here and are recorded in the gate itself: these * chips never were pills (they have drawn `--radius-control` since they were * built), and a filter standing in a row of actions is judged by the row it is * in. The exclusion still holds for the genuine pills it was written for. * * IT IS A LINK, not a toggle — the filter is in the URL — so the UA underline * has to be said off, and the state it carries is `aria-current` rather than * `aria-pressed` (see the component). `inline-flex` + `justify-content` because * a declared height needs its label centred in it; `display: inline-block` on a * 48px box would leave the words riding the top. */ .sf-flow-facet { align-items: center; border: var(--border-control); border-radius: var(--radius-control); color: var(--brand-color-ink, #17181a); display: inline-flex; font-size: var(--button-text, 16px); font-weight: var(--button-weight, 700); justify-content: center; min-height: var(--control-height, 48px); padding: 0 18px; text-decoration: none; } /* THE ACTIVE CHIP IS THE ACCENT BORDER at the board's own weight — the site's * selection language, and the board draws it at 1px here rather than the 1.5 * the rail's chips use. Board values ship verbatim (playbook §3). * * ITS WEIGHT IS THE RUNG'S NOW (W88). The board's 600-on-selection was a step * up from an unselected 500; at the primary rung both are 700, and a selected * chip that changed WEIGHT as well as border colour would also change width, * which moves every chip after it. The accent edge is the whole signal. */ .sf-flow-facet--on { border-color: var(--brand-color-accent, #c4530a); } .sf-flow-step2__empty { color: var(--brand-color-muted, #6c6a62); font-size: var(--text-body); margin: 18px 0 0; } /* The board's foot: 26px of air under the last card. Its Continue is CENTRED on * the drawing and right-aligned here — the platform rule (tokens §3, Ryan * 2026-08-26) postdates the board and was recorded on this flow's step 1. */ .sf-flow-step2__foot { margin-top: 26px; } /* ---- the card list ---- */ /* * THE AIR ABOVE THE FIRST CARD IS W88'S — Ryan asked for a "nice air gap * between that row and the cards", and the row it is measured from is now a row * of 48px controls rather than a heading and a chip strip. 32px is the site's * own section step (the checkout's cards are 24 apart, its sections 32), so the * gap says "a new region starts here" in a number the page already uses. The * 18 that stood here was the gap under a chip row that was itself 18 under a * heading — it never had to separate two regions on its own. */ .sf-flow-acc { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; } /* THE FRAME IS `.sf-card`'s (W89) — ground, border, radius and lift. What is * left here is what is genuinely this card's. See card.css's header for why a * frame property must not come back to this rule. */ .sf-flow-acc__card { display: flex; gap: 20px; padding: var(--sf-flow-acc-pad); /* * THE CARD'S OWN INSET, NAMED — the installer card's `--sf-inst-card-pad` * move, for the same reason. The review view (W86) bleeds to the card's edge * by cancelling this number and pays it back as its own row padding, so the * two have to BE one number: a bar that bled 18 and paid back 16 would sit a * hair off-centre against the bullets it replaced. */ --sf-flow-acc-pad: 18px; } /* * ON THE ORDER — derived (no board draws it). The platform's selection language * is a 1.5px accent perimeter, and a card cannot simply take one: changing a * 1px border to 1.5 moves every pixel inside it by half. So the card keeps its * 1px border, in accent, and an inset 0.5px shadow completes the 1.5 — nothing * reflows, and the perimeter measures what the token says. * * IT COMPOSES THE LIFT RATHER THAN REPLACING IT (W89). `box-shadow` is one * property: a bare `inset` here would silently delete the shared card's two * shadow layers, so an ADDED card would be the only flat card in the list. The * inset ring is drawn FIRST — shadow layers paint front to back — so the accent * perimeter sits on top of its own lift. */ .sf-flow-acc__card[data-added] { border-color: var(--brand-color-accent, #c4530a); box-shadow: inset 0 0 0 0.5px var(--brand-color-accent, #c4530a), var(--sf-card-lift); } /* ---- the media column ---- */ /* * ═══ W107 — THE MEDIA COLUMN FILLS ITS HEIGHT (Ryan, 2026-09-04) ═══ * * "Desktop: wasted space under the left photo — thumbnails become a 2x2 GRID * (four photos = two rows of two)." * * MEASURED, at 1440, before the change: the stage ended 214px into a column the * card stretched to 272-546px, so every card carried between 58 and 332 pixels * of nothing under a single 40px row of tiles. The row was five tiles wide * because the board drew five; it is four now (`ACCESSORY_THUMB_SLOTS`), which * is what "two rows of two" means. * * A COLUMN THAT FILLS, NOT A TALLER FIXED STRIP. The card's height is set by * whichever column is longer, and the body column's length varies with the * description — so any FIXED strip height is right for one card and wrong for * the other four. `flex: 1` on the grid with `1fr` rows spends whatever is left, * on every card, at every content length: the dead space is gone by * construction rather than by a number that happened to fit today. * * WITH A FLOOR AND A CEILING, because "fills the space" alone has two bad ends: * the shortest card would squeeze the tiles under the useful size, and the pole * pad's card — whose 190px lettering simulator makes it half again as tall as * any other — would draw four tiles 200px tall. 72 and 110 bound it; the pole * pad card keeps some dead space, which is honest, and it is FLAGGED rather than * chased with a special case. */ .sf-flow-acc__media { display: flex; flex: none; flex-direction: column; width: 220px; } /* The board's stage: a 168px well. It is a BUTTON, so the UA's own control * paint has to be said off — `.sf-flow-well` supplies the ground. * * `overflow: hidden` SINCE W87: it holds a photograph now, and the well's own * radius has to clip it. */ .sf-flow-acc__stage { border: 0; cursor: pointer; height: 168px; overflow: hidden; padding: 0; position: relative; width: 100%; } /* * ═══ W87 — THE PHOTOGRAPH ON THE STAGE ═══ * * `object-fit: cover` because the box is a FIXED 220 x 168 the board drew for a * placeholder that had no aspect ratio, and the catalog's photographs run from * 3:2 landscape to 2:3 portrait. Letterboxing them into it would draw the * media-well's dark ground down both sides of half the cards. * * IT COVERS THE MONO LABEL rather than replacing it: the label is still in the * markup, still positioned by `.sf-flow-well`, and a document whose photograph * has not been mirrored draws it exactly as before. `inset: 0` + `position: * absolute` is what lets one element sit over the other without either of them * changing the button's box. */ .sf-flow-acc__stage-img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; } /* * TWO COLUMNS, ROWS AS NEEDED (W107). Four slots make exactly two rows; the * board's 5px gap and 6px lead are unchanged, because what Ryan moved is the * arrangement, not the spacing. * * `minmax(0, 1fr)` ON BOTH AXES, not a bare `1fr`: an `fr` track's automatic * minimum is its MIN-CONTENT, and these tiles hold a mono label that would floor * the column and push the grid past the 220px media width — the same trap * `.sf-flow__grid` records one screen up. */ .sf-flow-acc__thumbs { display: grid; flex: 1; gap: 5px; grid-auto-rows: minmax(0, 1fr); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6px; /* Two 110px rows plus the gap, and two 72px rows plus the gap. See the media * column's note for what each end is protecting against. */ max-height: 225px; min-height: 149px; } /* A GRID ITEM NOW (W107). `flex: 1` and the board's fixed 40px height were what * made it one of five in a row; the grid sizes it on both axes, so the tile is * whatever its cell is and the `min-width: 0` that kept a flex item from being * floored by its label is now carried by the track's own `minmax(0, 1fr)`. */ .sf-flow-acc__thumb { border: 0; cursor: pointer; min-width: 0; overflow: hidden; padding: 0; position: relative; } /* W87: the tile's photograph — the same cover-and-clip the stage makes, at the * strip's 40px. The tile draws the 280px derivative, which is the file the * shared viewer's own 44px rail draws: one rendition, two consumers. */ .sf-flow-acc__thumb-img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; } /* The board's `+N` tile: the dark media-well end of the gradient, white and * bold, which is the signpost reading as a control rather than a photograph. */ .sf-flow-acc__thumb--more { align-items: center; background: var(--brand-color-media-well-a, #23262e); border-radius: var(--radius-inner); display: flex; justify-content: center; } .sf-flow-acc__thumb-label { color: var(--brand-color-muted, #6c6a62); font-family: var(--brand-font-mono, monospace); font-size: 7px; } .sf-flow-acc__thumb--more .sf-flow-acc__thumb-label { color: var(--brand-color-surface, #ffffff); font-size: var(--text-micro); font-weight: 700; } /* The play badge: a 14px accent circle in the tile's corner, the mark centred * in it. */ .sf-flow-acc__play { align-items: center; background: var(--brand-color-accent, #c4530a); border-radius: 50%; bottom: 3px; color: var(--brand-color-surface, #ffffff); display: flex; height: 14px; justify-content: center; position: absolute; right: 3px; width: 14px; } /* ---- the body column ---- */ /* * ═══ W106 — FOUR SECTIONS, WITH REAL AIR BETWEEN THEM (Ryan, 2026-09-04) ═══ * * "The card reads as four sections — (1) name+price (2) reviews (3) stocking * (4) description — with real air BETWEEN sections; and WITHIN stocking, 'In * stock' and 'delivers with your hoop…' move CLOSER (they're related and it * doesn't read). The existing website has done a very good job of that." * * ─── THE REFERENCE, MEASURED RATHER THAN RECALLED ─────────────────────────── * * Ryan named the live site, so the live site was read: the accessory detail * page's right column authors its rhythm in plain numbers — * * #order_now_top the price row * #rating margin-top: 20px (the tight pair after the price) * #description margin-top: 40px (a section step) * #description_bullets margin: 40px 0 0 20px, each bullet margin-bottom: 10px * #specs margin-top: 70px (a different KIND of block) * * So the site's answer is a RATIO, not a number: sections are four times the * intra-list gap (40 against 10), and a different kind of block is bigger again. * What was here before had ONE gap — 8px — between all five rows, which is * precisely "it doesn't read as sections". * * ─── WHY 18 AND NOT 40 ────────────────────────────────────────────────────── * * The legacy 40 is 2.5x its 16px body, set in a 900px detail column. Scaling * that ratio to this card's 13.5px body gives ~34px, which is more air than the * card's own 18px padding — a card whose internal gaps exceed its inset reads as * four cards, not one. So the section step is THE CARD'S OWN INSET, * `--sf-flow-acc-pad`: one number, already declared, and the internal rhythm * then agrees with the frame around it by construction. Against the 8px that * stays INSIDE a section that is a 2.25:1 contrast — the legacy's own tight pair * is 20 against 10, which is 2:1. */ .sf-flow-acc__main { display: flex; flex-direction: column; flex: 1; gap: var(--sf-flow-acc-pad); min-width: 0; } /* * SECTION FOUR IS ONE SECTION. The paragraph and the bullets are the same claim * at two grains — the legacy site authors them as one block — so they share a * wrapper, the wrapper takes the section step above, and inside it the pair * keeps the tight 8 that used to separate everything. */ /* * A BLOCK, NOT A FLEX COLUMN (W185). It was a flex column so its two children * could share one `gap`; a FLOAT does not apply to a flex item and text does * not wrap around one, so the film player Ryan asked to "right align in the * description and bullet section" could not have worked inside it. The 8px is * a margin now — one number, moved, not lost. */ .sf-flow-acc__about { display: block; } /* THE TIGHT STEP W106 PUT BETWEEN THE PARAGRAPH AND ITS BULLETS, restated as a * margin now that the section is a block. `:first-child` because the paragraph * is absent on a document that writes none, and the list must not then push * itself away from the section's own top. */ .sf-flow-acc__about > .sf-flow-bullets:not(:first-child) { margin-top: 8px; } .sf-flow-acc__head { align-items: baseline; display: flex; gap: 12px; justify-content: space-between; } /* The board's `.h3` at its card size. globals.css styles every h1-h3 with the * heading face at weight 500 and a negative track; the board draws the family's * own 700 at 16, so both are restated. */ /* * ═══ W105 — THE NAME MATCHES THE PRICE (Ryan, 2026-09-04) ═══ * * "Accessory NAME matches the PRICE's size (bump up)." Measured: the name drew * `--text-emphasis` (16) beside a `--text-product` (21) price, so the figure was * the loudest thing on a card whose subject is the product. They are the two * halves of one row and they now take one size — `--text-product`, the price's * own token, read rather than restated so the pair cannot drift apart. * * The board's own 700 and its `letter-spacing: normal` are unchanged (globals * styles every h1-h3 with the heading face at weight 500 and a negative track; * the board draws the family's own 700, so both are still restated here). */ .sf-flow-acc__name { color: var(--brand-color-ink, #17181a); font-family: inherit; font-size: var(--text-product); font-weight: 700; letter-spacing: normal; line-height: normal; margin: 0; text-wrap: initial; } /* Money is a mono duty (tokens §2). */ .sf-flow-acc__price { flex: none; font-family: var(--brand-font-mono, monospace); font-size: var(--text-product); font-weight: 700; } /* * ═══ W110 — THE MARKDOWN (Ryan, 2026-09-04: "check your data") ═══ * * The data was right and this step was asking it the wrong question — see * `order/accessories.ts`'s `packageIdOf`. What is drawn is the product page's * own two-span shape (`.sf-pdp-buy__total-money`: muted struck figure, then the * price it sells at), which is ALSO what the live accessory page draws in * `#order_now_top` — `span.retail { text-decoration: line-through; color: * light-gray; font-weight: normal }` beside `span.total`. Two independent * precedents, one shape; nothing here is invented. * * THE STRUCK FIGURE IS ONE STEP DOWN in size as well as in colour. The product * page draws its strike at `--text-body` against a `--text-page-title` price; * the same relation here is `--text-small` against `--text-product`, so the * pair reads as one price with a history rather than as two prices. */ .sf-flow-acc__money { align-items: baseline; display: inline-flex; flex: none; gap: 8px; } .sf-flow-acc__strike { color: var(--brand-color-muted, #6c6a62); font-family: var(--brand-font-mono, monospace); font-size: var(--text-small); font-weight: 400; text-decoration: line-through; } /* * ═══ W85 — THE REVIEW LINE, SECOND IN THE CARD ═══ * (Ryan, 2026-09-03: "product name, reviews, stocking, description, bullets") * * The board drew "· 306 reviews" beside the name and this card never drew it, * because when it was built nothing joined an accessory to the legacy review * corpus. It does now (see the route's `page.tsx`), and 306 is the real figure. * * IT IS ITS OWN ROW rather than a run inside the head, which is Ryan's order * read literally — and it is also what keeps the price on the head row's right * edge where the board put it, instead of pushing it past a star row. */ .sf-flow-acc__rating { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } /* The stars, in the accent — the site's own review colour, and the same glyph * the product page and the installer card draw. `letter-spacing` because five * `★` at a text face's default tracking read as a smear at this size. */ .sf-flow-acc__stars { color: var(--brand-color-accent, #c4530a); font-size: var(--text-small); letter-spacing: 1px; line-height: 1; } /* The tail a corpus has not earned. Drawn rather than dropped, so five cards * with different averages keep one star-row width and the counts under them * line up. */ .sf-flow-acc__stars-rest { color: var(--brand-color-line-mid, #d8d6d0); } /* The score itself, in mono — a measured figure is a mono duty (tokens §2), the * same call the money and the quantity make on this card. */ .sf-flow-acc__score { font-family: var(--brand-font-mono, monospace); font-size: var(--text-small); font-weight: 700; } /* * W86: THE COUNT IS THE DOOR. It opens the reviews in place, so it is a BUTTON * wearing the quiet link's treatment — the same call `.sf-flow-rail__edit` used * to make and the same one the installer card's "203 Reviews" makes. * * DELIBERATELY NOT IN `btngate`'s FAMILY: underlined text is not a button and * must not grow a box (the gate's own "QUIET LINKS" exclusion, which already * names `sf-flow-quiet` and `sf-pdp-quiet`). Its target is the line's height * plus the row's padding, which is the same floor the installer card's is. */ .sf-flow-acc__reviews { background: none; border: 0; color: var(--brand-color-muted, #6c6a62); cursor: pointer; font-family: inherit; font-size: var(--text-small); padding: 0; text-decoration: underline; } .sf-flow-acc__reviews:hover { color: var(--brand-color-ink, #17181a); } /* * W106, THE SECOND HALF: "In stock" and the delivery note are ONE THOUGHT. * * 12 -> 8. They are two runs on one line, and at 12px apart — with the section * step above and below them now at 18 — they read as two facts that happen to * share a row. 8 is the same tight value section four uses INSIDE itself, so * the card has exactly two spacings: a section step and an intra-section step. * That is the whole of what makes four sections legible, and it is the legacy * page's own 40/10 discipline at this card's scale. */ .sf-flow-acc__stock { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } /* * W83 — THE DESCRIPTION, between the stocking line and the bullets. * * IT WEARS `.sf-flow-bullets`' OWN VOICE — `ink-soft`, `--text-small`, 1.6 — * and that is deliberate rather than lazy: on the legacy site the paragraph and * the bullets are ONE authored block (`description` and `description_bullets` * on the same config), and drawing the prose half a size up would present them * as two claims of different rank. A `max-width` because a paragraph running * the full body column at this size is past the comfortable measure, where a * bulleted line is not. */ .sf-flow-acc__desc { color: var(--brand-color-ink-soft, #44464a); font-size: var(--text-small); line-height: 1.6; margin: 0; max-width: 64ch; } .sf-flow-acc__good { align-items: center; color: var(--brand-color-good, #1f7a4d); display: inline-flex; font-size: var(--text-small); font-weight: 700; gap: 6px; } /* The board types a ● glyph in the run; drawn, for the reason the stock card's * own dot is (a glyph's optical centring is the text font's, not ours). */ .sf-flow-acc__dot { background: var(--brand-color-good, #1f7a4d); border-radius: 50%; display: inline-block; height: 7px; width: 7px; } .sf-flow-acc__note { color: var(--brand-color-muted, #6c6a62); font-size: var(--text-small); } /* ---- the personalisation simulator ---- */ /* * The board's own module, inside the description: a 260px pad photo beside the * field, on `paper` inside a hairline box. */ /* * `overflow: hidden` SINCE W186: the photograph bleeds to this box's edges now, * and the box has a radius, so it has to clip its own corners. */ .sf-flow-acc__sim { align-items: center; background: var(--brand-color-paper, #fbfbfa); border: var(--border-hairline); border-radius: var(--radius-control); display: grid; gap: 16px; grid-template-columns: 260px minmax(0, 1fr); overflow: hidden; padding: var(--sf-flow-acc-sim-pad); /* THE MODULE'S OWN INSET, NAMED — the installer card's `--sf-inst-card-pad` * move, for the same reason. W186's bleed cancels this number and the padding * pays it, so the two have to BE one number or the photograph lands a pixel * off the module's edge. */ --sf-flow-acc-sim-pad: 14px; } /* * ═══ W178 — THE LEGACY COMPOSITE (Ryan, 2026-09-04) ═══ * * "Look very closely at the existing website... we need to copy that." * * WHAT THIS REPLACES: a 190px `well` with a mono word in it, invented in batch * 9 because no pad photograph had been mirrored. The legacy site has had the * real thing since 2022 — `images/order/pole_pad_lettering.png`, a 338 x 505 * cut-out of an in-ground adjustable hoop with its pole pad — and it is * mirrored now beside the accessory stills. * * NO DECLARED HEIGHT ANY MORE. The box is the photograph's, so its aspect comes * from the ``'s own intrinsic size and the composite cannot letterbox or * crop at any width. That is also what lets the strip's percentages be true: * they are fractions of a box that is exactly the image. * * `container-type: inline-size` IS LOAD-BEARING, not decoration — it is what * `--sf-pad-font`'s `cqw` unit measures against, and it is why the lettering * keeps the legacy's 13-on-338 RATIO instead of its 13 literal pixels. The * legacy has no media query for this simulator at all, so its own fixed offsets * drift off the pad on a phone; holding the ratio is the one place this * transplant deliberately improves on its source, and it is flagged as such. */ /* * ═══ W186 — THE HOOP GOES FULL BLEED (Ryan, 2026-09-04) ═══ * * "The lettering simulator's hoop photo goes full bleed to the section — the * current gap looks odd." * * It did look odd, and the reason is that the composite is a CUT-OUT on * transparency: the module's 14px padding put a band of `paper` above a * photograph whose own top edge is already empty sky, so the hoop appeared to * float in a margin rather than to sit in the panel. Cancelling the padding on * three sides — top, left and bottom — lands the photograph on the module's own * edges; the RIGHT side keeps the grid's 16px gap, because that is the gutter * between the picture and the field beside it, not padding. * * THE STRIP DOES NOT MOVE, and that is by construction rather than by luck: its * four offsets are FRACTIONS of the image box (W178), so widening the image by * the 14px it just reclaimed scales the lettering with it. Asserted after the * bleed by `accgate`'s six measured ratios and its driven typing check, which * is the whole reason those were written as ratios in the first place. */ .sf-flow-acc__sim-pad { container-type: inline-size; margin: calc(-1 * var(--sf-flow-acc-sim-pad, 14px)) 0 calc(-1 * var(--sf-flow-acc-sim-pad, 14px)) calc(-1 * var(--sf-flow-acc-sim-pad, 14px)); position: relative; } .sf-flow-acc__sim-pad-img { display: block; height: auto; width: 100%; } /* * THE LETTERS STAND ON THE PAD, one glyph per line — the legacy's own * `#ppl_preview`, transplanted (W178). * * #ppl_preview{ position:absolute; left:30px; top:232px; width:25px; * height:210px; color:white; font-size:13px; * text-align:center; font-weight:bold; } * * The four offsets arrive as custom properties because they are FRACTIONS of * the photograph, computed from the legacy's integers in the component — see * `accessories.ts` for the numbers and `flow-content.ts` for the one derivation * (the legacy measures `left` from its own box, not from the image). * * THE SCRIM IS GONE, and that is a correction rather than a loss: batch 9 drew * a 55% black panel behind the glyphs to keep white vinyl legible over "a * photograph that does not exist yet and will not be uniformly dark when it * does". The photograph exists now and it IS uniformly dark — the strip lands * on the black pad, which is why the legacy needs no scrim either. * * `white-space: pre-line` IS THE LEGACY'S `
    `s. It writes one character per * line into a single element; this holds them in a single text-shaping run, * which `pre-line` breaks on the newlines the component joined with. A blank * line is a SPACE, which the whitelist allows and the legacy renders the same * way. * * 1.15 IS ARIAL'S OWN `normal` AT 13px, MEASURED (~15px), pinned so the stack * does not depend on whatever `normal` our body face computes to. Thirteen * characters then occupy ~195 of the strip's 210 legacy pixels, which is the * fit the legacy ships. */ .sf-flow-acc__sim-letters { color: var(--brand-color-surface, #ffffff); /* * ═══ W188 — THE COLLEGIATE FACE (Ryan, 2026-09-04) ═══ * * "See if you can find a blocky collegiate font for the pole pad lettering." * * THIS IS THE ONLY RULE ON THE SITE THAT NAMES IT, deliberately: the face is * part of a PICTURE of cut vinyl, not part of the storefront's typography, and * `flow-lettering-font.tsx` (which carries the whole comparison against the * real product) explains why it is not the brand's own `googleFontsUrl`. * * 400, NOT 700. Graduate ships one weight; asking for bold makes the browser * synthesise it and smears the thin slab serifs that made it the right face. * The legacy's own preview is Arial BOLD, so this is a deliberate departure * from the transplant — and the one W178 flagged when it shipped. * * THE FALLBACK IS A REAL SLAB STACK, not `serif` alone: Rockwell ships with * Office on Windows and Roboto Slab is common on Android, so a reader who * never gets the webfont still sees slab lettering rather than a book face. */ font-family: "Graduate", Rockwell, "Roboto Slab", Georgia, serif; font-size: var(--sf-pad-font, 3.846cqw); font-weight: 400; height: var(--sf-pad-h, 41.584%); left: var(--sf-pad-left, 47.337%); line-height: 1.15; position: absolute; text-align: center; top: var(--sf-pad-top, 45.941%); white-space: pre-line; width: var(--sf-pad-w, 7.396%); } /* * `.sf-flow-acc__sim-letters:empty` AND `.sf-flow-acc__sim-letter` STOOD HERE * AND ARE GONE (W178). * * The first hid an empty SCRIM, and there is no scrim any more — an empty run * of white type on a black pad draws nothing on its own, which is exactly what * the legacy does when the field is cleared. * * The second dressed thirteen per-character boxes at a fixed 22px. The legacy * has no per-character element at all: it is one div whose `innerHTML` is the * characters joined by `
    `, and its glyphs are sized by one `font-size`. * Thirteen fixed 22px boxes could not scale with the photograph in any case. */ .sf-flow-acc__sim-field { display: flex; flex-direction: column; gap: 8px; } .sf-flow-acc__sim-label { color: var(--brand-color-ink-soft, #44464a); font-size: var(--text-small); font-weight: 600; } /* The board's `.input`, at the platform's control height. */ .sf-flow-acc__sim-input { background: var(--brand-color-paper, #fbfbfa); border: var(--border-control); border-radius: var(--radius-control); color: var(--brand-color-ink, #17181a); font-family: inherit; font-size: var(--text-emphasis); max-width: 260px; min-height: var(--control-height); padding: 0 14px; width: 100%; } .sf-flow-acc__sim-counter { color: var(--brand-color-muted, #6c6a62); font-size: var(--text-small); margin: 0; } .sf-flow-acc__sim-note { color: var(--brand-color-ink-soft, #44464a); font-size: var(--text-small); margin: 6px 0 0; } /* ---- the control row ---- */ /* `margin-top: auto` pins it to the bottom of the body column, so two cards of * different description lengths still line their actions up. */ .sf-flow-acc__controls { align-items: center; display: flex; gap: 12px; margin-top: auto; padding-top: 8px; } /* The board's quiet ghost, at the row's 40px. Not `.sf-flow-ghost`: that one is * the INK-outlined wayfinding button, and this is the quieter `line-mid` box * the board draws for a control that opens a modal rather than moving anyone. * * ITS TYPE IS THE RUNG'S NOW (Ryan's button audit, 2026-09-01): it drew 13.5/500 * inside a 40px box whose two neighbours in the same control row — the stepper * and "Add to order" — draw 14.5/600, which is two of the five type sizes Ryan * counted. THE BORDER STAYS `line-mid`: quiet-vs-ink is a treatment the board * drew on purpose, and the ruling was about SIZE, not about flattening every * button to one colour. */ .sf-flow-acc__details { align-items: center; background: transparent; border: var(--border-control); border-radius: var(--radius-control); color: var(--brand-color-ink-soft, #44464a); cursor: pointer; display: inline-flex; font-family: inherit; font-size: var(--button-text-sm, 14.5px); font-weight: var(--button-weight-sm, 600); min-height: var(--control-height-sm, 40px); padding: 0 16px; } .sf-flow-acc__actions { align-items: center; display: flex; gap: 10px; margin-left: auto; } .sf-flow-acc__qty { align-items: center; border: var(--border-control); border-radius: var(--radius-control); display: inline-flex; min-height: var(--control-height-sm); } /* One rule for both shapes the stepper's halves take — a button while the card * is composing a quantity, a link once it is editing the order (see the * component). They have to measure the same, or a card would change size when * it was added. */ .sf-flow-acc__step { background: none; border: 0; color: var(--brand-color-muted, #6c6a62); cursor: pointer; display: inline-flex; font-family: inherit; font-size: var(--text-small); padding: 0 12px; text-decoration: none; } .sf-flow-acc__step:disabled, .sf-flow-acc__step--off { cursor: default; opacity: 0.45; } .sf-flow-acc__value { font-family: var(--brand-font-mono, monospace); font-size: var(--text-small); padding: 0 6px; } /* ---- W185: the film player ---- */ /* * ═══ THE FILM IS AN EMBED-EXPAND PLAYER (Ryan, 2026-09-04) ═══ * * "I'm wondering if we should use the embed and expand functionality we made… * let's try it. Right align it in the description and bullet section. Allow it * to grow pushing description and bullets down." * * `.sf-flow-bullets__film`, `.sf-flow-acc__film` (the button) AND * `.sf-flow-acc__film-mark` STOOD HERE AND ARE GONE — W177's film BULLET, which * lived for one walkthrough. The class name `.sf-flow-acc__film` survives as the * SLOT class the shared frame wears, which is why the sweep still finds it. * * ─── THE TWO WIDTHS ARE PERCENTAGES, AND THAT IS THE WHOLE MECHANISM ──────── * * The shared frame reserves its rectangle with `.sf-xp::before { width: * var(--sf-xp-w) }` and draws the box over it, so a caller's only job is to say * how wide the slot is at each state. The Rust Armor film says `296px` and * `calc(100% + 218px)` because it sits in a pop-up whose panel is a fixed 780; * this one sits in a card column that is 622px at 1440 and narrower at every * rung below, so PIXELS WOULD BE RIGHT AT ONE WIDTH AND WRONG EVERYWHERE ELSE. * * 40% and 100% of the section keep the ratio exact at every width, which is * also what makes `FILM_EXPAND_FACTOR` a constant the hook can trust — see the * card, where the number is derived from these two rather than typed. * * ─── WHY A FLOAT ─────────────────────────────────────────────────────────── * * It is the one mechanism that does BOTH halves of the ruling: at 40% the * description and bullets wrap beside it, and at 100% the same float forces * every following line below it — "pushing description and bullets down" — * with no state to toggle and nothing to re-flow. A grid column would have * needed a second layout for the grown state and could not wrap text at all. * * IT STAYS FLOATED WHEN GROWN, deliberately: a 100%-wide float already clears * everything after it, so switching `float: none` at the same moment the width * animates would be two changes racing to describe one state. */ /* * ─── THE TWO WIDTHS LIVE ON A WRAPPER, AND THAT IS A REAL CSS CONSTRAINT ──── * * MEASURED, by `accgate`, when they did not: a floated `.sf-xp` reported 1280px * wide inside a 622px section. A FLOAT IS SHRINK-TO-FIT — its width comes from * its contents — and the shared frame sizes itself from `.sf-xp::before { width: * var(--sf-xp-w) }`. A percentage there resolves against the float's own width, * which is the thing it is being used to compute: circular, and browsers resolve * it to nonsense rather than to an error. * * So the FLOAT carries a definite width and the slot inside it fills that. The * shared frame's `--sf-xp-w` is therefore 100% on this consumer — it is already * as wide as it is allowed to be — and the 40/100 pair moves one element out. * The parity roster asserts the pair WHEREVER it lives against the caller's * factor; the invariant is that the CSS's growth ratio and the hook's predicted * one agree, not which selector spells it. * * `:has()` IS WHAT LETS THE WRAPPER FOLLOW THE STATE. `data-big` is written on * the slot by the shared frame, so the wrapper reads its own child rather than * needing a second piece of state — the same move `.sf-flow-rail:has(...)` * already makes in this sheet. */ .sf-flow-acc__film-wrap { float: right; /* The section's own tight step to the left of it and under it, so wrapped * text keeps W106's rhythm rather than touching the frame. */ margin: 0 0 8px 14px; width: 40%; } .sf-flow-acc__film-wrap:has(> .sf-xp[data-big="true"]) { margin: 0 0 12px; width: 100%; } /* THE SLOT FILLS ITS FLOAT. See the wrapper's note for why the growth is not * spelled here. */ .sf-flow-acc__film { --sf-xp-w: 100%; } /* ---- W124: the per-hoop offer ---- */ /* * ═══ THE OFFER IS THE RAIL'S NUDGE, ONE COMPONENT OVER (W124) ═══ * * Ryan's ruling is behavioural — offer, never act — and the storefront already * has a shape that means exactly "this is addressed to you, and you may ignore * it": `.sf-flow-nudge`, the framed inset the rail draws when an install is * offered and not taken. Its values are transplanted here rather than * re-invented, for the reason the card standard was written for: a second * quiet-suggestion treatment would be a second thing to sweep. * * WHAT IS THE SAME: the `paper` ground on `surface`, the 2px accent left rule, * the radius flattened on that edge so the rule reads as a mark rather than as * a border, the caption type in `ink-soft`. * * WHAT DIFFERS, AND WHY: the rail's nudge indents 26px past the thumbnail * column it sits beside, and carries its dismiss as an absolute X in the * corner. This one spans the card's body column, which has no thumbnail to * clear, and its two answers are BOTH words — accepting is a real destination * ("Set to 3") and declining is a real refusal ("No thanks"), so neither is a * glyph a reader has to interpret. A question with two named answers is the * shape this needed and the corner X was not it. */ .sf-flow-acc__offer { align-items: baseline; background: var(--brand-color-paper, #fbfbfa); border-left: 2px solid var(--brand-color-accent, #c4530a); border-radius: 0 var(--radius-inner) var(--radius-inner) 0; display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0; padding: 10px 12px; } .sf-flow-acc__offer-body { color: var(--brand-color-ink-soft, #44464a); font-size: var(--text-caption); line-height: 1.45; /* The question takes the row and pushes its two answers to the far end, so a * wrapped offer reads sentence-then-answers rather than interleaved. */ margin-right: auto; } /* * ═══ THE QUESTION TAKES ITS OWN LINE, SO TWO BANDS ARE ONE SHAPE ═══ * * Caught on the fix round's own screenshots rather than in the review: with the * body merely greedy (`margin-right: auto`), whether an answer fits beside the * sentence depends on how long the PRODUCT'S NAME is. So the goal light's band * drew its accept beside the question and its decline below, while the pole * pad's — two characters longer — pushed both answers onto their own row. Two * adjacent instances of one control in two different shapes, which is precisely * the inconsistency W171 was called for. * * A FULL-WIDTH BASIS MAKES THE SHAPE INDEPENDENT OF THE CONTENT: the question * always takes its own line(s), the two answers always sit together on one row * beneath it. That also keeps the pair adjacent, which is what the 44px targets * (F6) are for — a decline that lands on its own line half a band away from the * accept is the harder thing to hit, not the easier one. */ .sf-flow-nudge--offer .sf-flow-nudge__body { flex: 1 0 100%; } /* * ACCEPTING WEARS THE NUDGE'S OWN DOOR — `accent-strong`, 600, underlined. * * DELIBERATELY NOT A BUTTON'S BOX, and therefore deliberately not in * `btngate`'s family: this is the gate's own "QUIET LINKS" exclusion (underlined * text is not a button and must not grow a box). A 40px accent button inside a * suggestion band would out-shout "Add to order" two rows below it — which is * the control that actually closes the sale, and the one the eye must land on. */ .sf-flow-acc__offer-yes { color: var(--brand-color-accent-strong, #9c420a); font-size: var(--text-caption); font-weight: 600; text-decoration: underline; white-space: nowrap; } /* AND DECLINING IS QUIETER STILL. It is the answer the shopper already gave by * doing nothing, so it is drawn as the smallest thing that is unmistakably a * control. */ .sf-flow-acc__offer-no { background: none; border: 0; color: var(--brand-color-muted, #6c6a62); cursor: pointer; font-family: inherit; font-size: var(--text-caption); padding: 0; text-decoration: underline; white-space: nowrap; } .sf-flow-acc__offer-no:hover { color: var(--brand-color-ink, #17181a); } /* ---- W86: the in-line reviews the count opens ---- */ /* * ═══ THE ACCESSORY CARD'S REVIEW VIEW (Ryan's W86, 2026-09-03) ═══ * * "Clicking the review total opens IN-LINE reviews, the installer-card pattern * (in-place content swap)." So these rules are `installers.css`'s * `.sf-inst-rev__*` block, transplanted value-for-value, which is itself * `pdp.css`'s `.sf-pdp-rev__item*` block transplanted value-for-value. W38's * ruling — "a review is a review" — is honoured in the MARKUP by * `review-card.tsx`, which all three surfaces share; what each sheet carries is * the ground its own surface stands on. * * WHY NOT ONE SHARED SHEET YET: installers.css records the same flag and the * same reason, and it applies unchanged here — converging three review blocks * into an `sf-rev-` block in sections.css would re-open `pdpgate`'s recorded * pixel ceilings to buy a tidiness nobody has asked for. FLAGGED, twice now, * which is the point at which the next pass should take it. * * WHAT THIS SURFACE DOES NOT TRANSPLANT, and why: W49/W61's measured box (that * arithmetic is against an installer pop-up's next profile photo, which does * not exist here), W50's phone carousel (a different answer to a complaint this * surface has not had), and W65b's fade (which marks an INTERNALLY scrolling * review; these reviews are as tall as they are). */ /* * THE PANEL BLEEDS TO THE CARD'S EDGES, then pays the padding back on each row * — the installer card's own W35 move, at this card's 18px. It is what lets the * control bar's ground and the rows' hairlines run the full width of the body * column instead of stopping short of it. * * NOTE IT BLEEDS ONLY THE INLINE AXIS: the card's flex row puts the media * column to the left of this, so a block-axis bleed would climb over the name. */ .sf-flow-rev { margin-block: 6px 0; margin-inline: calc(-1 * var(--sf-flow-acc-pad)); } /* * THE CONTROL BAR — W46's shape and W46's reasoning, unchanged. * * `position: sticky` rather than a scroll listener: the browser owns the * arithmetic and it behaves correctly against whichever ancestor is actually * scrolling — here the review list below it. `top: 0` because its job is to * stay reachable within THAT scroller. * * THE GROUND IS `paper` ON `surface`, a four-per-channel delta: deliberately * quiet, because the bar has to read as chrome the reviews slide under rather * than as a second card. The hairline under it is what actually separates it * from the first review (playbook §4's tint trap, from the other side — this * one is a tint that is MEANT to be nearly invisible, and it does not carry the * separation on its own). */ .sf-flow-rev__bar { align-items: center; background: var(--brand-color-paper, #fbfbfa); border-bottom: 1px solid var(--brand-color-line, #e8e7e3); display: flex; gap: 14px; padding: 10px var(--sf-flow-acc-pad); position: sticky; top: 0; /* ABOVE THE ROWS THAT SLIDE UNDER IT. The reviews draw hairlines and * photographs; without a stacking order the bar's own ground would be painted * under a tile that happens to come later in the document (W71a's lesson: a * positioned element paints in a later step than static flow content, so the * bar has to be positioned AND ordered). */ z-index: 2; } /* W59's shape: the compact rung, the arrow AND the word. A bare arrow at the * head of a review list reads as chrome rather than as the way out. */ .sf-flow-rev__back { align-items: center; appearance: none; background: var(--brand-color-surface, #ffffff); border: var(--border-control); border-radius: var(--radius-control); color: var(--brand-color-ink, #17181a); cursor: pointer; display: inline-flex; flex: none; font-family: inherit; font-size: var(--button-text-sm, 14.5px); font-weight: var(--button-weight-sm, 600); gap: 7px; justify-content: center; min-height: var(--control-height-sm, 40px); padding: 0 12px; } /* FLEX, so the inline SVG cannot pick up its line box's descender and push the * word off the button's optical centre (playbook §5, the glyph trap). */ .sf-flow-rev__back-mark { display: flex; } /* A STATEMENT, NOT A CONTROL — muted, because a fact about the list drawn in a * control's ink reads as a control. `auto` holds the far end of the bar. */ .sf-flow-rev__sort { color: var(--brand-color-muted, #6c6a62); font-size: var(--text-small); margin: 0 0 0 auto; } /* * ═══ THE LIST IS A SCROLLER WITH A DECLARED CEILING ═══ * * W49's conclusion by the short route. The installer pop-up MEASURES its box, * because it has to leave the next installer's photograph peeking; this card is * in a page's own scroll with nothing below it whose position must be * preserved, so a CSS maximum does the same job with no layout effect, no * `ResizeObserver` and none of W67's stale-measurement class of bug. * * 520px because that is a little over three reviews at this measure — enough * that the list obviously continues, and short enough that the card does not * take a whole viewport when a shopper opens it out of curiosity. Infinite * scroll happens INSIDE it, so the card's own height stops changing after the * first batch lands. * * `position: relative` because the list hosts the rows' photo strips: every * `overflow != visible` container that can host an absolutely-positioned * descendant gets one, unconditionally, so the sr-span overflow trap (playbook * §5) cannot be reintroduced by a later addition. * * `overscroll-behavior: contain` so reaching the end of the reviews does not * scroll the page out from under the card the reader is reading. * * A REAL SCROLLBAR, thin and low-contrast rather than hidden — the same call * the pop-up shell's content row makes, and for the research-backed reason * recorded there: a fully hidden scrollbar is a mouse/trackpad hazard when * nothing else gives a position cue. */ .sf-flow-rev__list { max-height: 520px; overflow-y: auto; overscroll-behavior: contain; position: relative; scrollbar-color: var(--brand-color-line-mid, #d8d6d0) transparent; scrollbar-width: thin; } /* ─── one review, transplanted from installers.css's `.sf-inst-rev__item*` ── */ .sf-flow-rev__item { border-top: 1px solid var(--brand-color-line, #e8e7e3); display: flex; gap: 20px; padding: 22px var(--sf-flow-acc-pad); } /* THE FIRST REVIEW DRAWS NO RULE OF ITS OWN. The control bar above it already * closes with a hairline, and two lines a pixel apart is the seam a sticky bar * makes visible the moment it lifts off the first row. */ .sf-flow-rev__item:first-child { border-top: 0; } .sf-flow-rev__item-main { flex: 1; min-width: 0; } /* W51's column: stars on their own line, title under them. The measure here is * the accessory card's body column less the photo strip — narrower than the * product page's 565 — so a real title wrapping beside the stars would start * its second line under them, which is the ragged shape W51 named. */ .sf-flow-rev__item-head { align-items: flex-start; display: flex; flex-direction: column; gap: 6px; } /* THE CARD'S OWN STAR GLYPH — the `★` text run this sheet already draws in * `.sf-flow-acc__stars` four lines above, not the installer widget's SVG. A * review row wearing a different star from the rating on the same card would be * the visible seam. */ .sf-flow-rev__stars { color: var(--brand-color-accent, #c4530a); flex: none; font-size: var(--text-small); letter-spacing: 1px; line-height: 1; } .sf-flow-rev__stars-rest { color: var(--brand-color-line-mid, #d8d6d0); } .sf-flow-rev__item-title { /* NO TRACKING. globals.css gives every h1/h2/h3 `letter-spacing: -0.015em` * and the review title is drawn with none — the same declaration, and the * same measured reason, as `.sf-pdp-rev__item-title`'s. */ letter-spacing: normal; color: var(--brand-color-ink, #17181a); font-family: inherit; font-size: var(--text-emphasis); font-weight: 700; line-height: normal; margin: 0; text-wrap: wrap; } .sf-flow-rev__item-meta { color: var(--brand-color-muted, #6c6a62); font-size: var(--text-caption); margin: 4px 0 0; } /* `pre-line` for the reason installers.css records: the ERP turns the rows that * carry `
    ` into NEWLINES rather than dropping them, which is only worth * doing if something draws them. It collapses runs of spaces the way normal * text does and keeps the line breaks — the pair of behaviours a pasted review * wants. */ .sf-flow-rev__item-body { color: var(--brand-color-ink-soft, #44464a); font-size: var(--text-small); line-height: 1.6; margin: 10px 0 0; white-space: pre-line; } .sf-flow-rev__strong { color: var(--brand-color-ink, #17181a); font-weight: 700; } /* W47's measured answer: the product page draws review photographs as a 120px * RIGHT-HAND COLUMN at the desktop rung. This conforms rather than improves. */ .sf-flow-rev__item-photos { display: flex; flex: none; gap: 8px; overflow-x: auto; /* A clipping box with no positioned ancestor is how an abs-positioned * descendant escapes into the DOCUMENT's overflow (playbook §5). */ position: relative; scroll-snap-type: x proximity; scrollbar-width: none; width: 120px; } .sf-flow-rev__item-photos::-webkit-scrollbar { display: none; } .sf-flow-rev__item-photo { align-items: center; background: var(--brand-color-well, #f1f0ec); border: 0; border-radius: var(--radius-inner); cursor: pointer; display: flex; flex: none; height: 120px; justify-content: center; padding: 0; /* THE PHOTOGRAPH'S CONTAINING BLOCK. The `` is absolutely positioned so * the well stays underneath it unconditionally, and a strip whose files have * not loaded draws the ground rather than white-on-white. */ position: relative; scroll-snap-align: start; width: 120px; } .sf-flow-rev__item-photo-img { border-radius: inherit; display: block; height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; } .sf-flow-rev__well-label { color: var(--brand-color-muted, #6c6a62); font-family: var(--brand-font-mono, monospace); /* The placeholder-caption exemption (tokens §2). */ font-size: 9px; /* THE LABEL IS THE FALLBACK, and it must not push the tile open when a long * one lands in the box. */ overflow: hidden; padding: 0 4px; text-align: center; } /* THE STATUS LINES SIT WHERE THE FIRST REVIEW WOULD, so a panel that is * loading, empty or failed is the same shape as one that is full — nothing * jumps when the answer lands. */ .sf-flow-rev__status { color: var(--brand-color-muted, #6c6a62); font-size: var(--text-small); margin: 0; padding: 22px var(--sf-flow-acc-pad); } /* * THE SENTINEL, WHICH IS ALSO THE FALLBACK (W45's shape). * * A REAL BUTTON the observer watches, so the enhancement and the keyboard floor * can never drift apart. It has no border and no ground — the quiet treatment * `btngate` deliberately does not sweep — and takes the compact rung's height * so a row of chrome in a list of content matches everything around it. */ .sf-flow-rev__more { background: none; border: 0; color: var(--brand-color-ink-soft, #44464a); cursor: pointer; display: block; font-family: inherit; font-size: var(--button-text-sm, 14.5px); font-weight: var(--button-weight-sm, 600); min-height: var(--control-height-sm, 40px); padding: 0 var(--sf-flow-acc-pad); text-align: left; width: 100%; } .sf-flow-rev__more:disabled { color: var(--brand-color-muted, #6c6a62); cursor: default; } /* --------------------------------------------------- step 3: the checkout -- */ /* * STEP 3 — CHECKOUT, transplanted from design/produnk/FlowCheckout.dc.html * (drawn at 1440). * * The board's own numbers, verbatim: cards at `26px 28px` with 24px between * them, a 36px tinted section-header circle with 12px to its heading and 22px * under the header, 16px between field rows, 14px between the fields in a row, * a 13.5/600 label with 6px under it, and the board's `.input` at 48 tall with * 14px of side padding. * * THREE PLACES THE BOARD IS DELIBERATELY SUPERSEDED, each by something that * postdates it or outranks it. All three are declared in `flowgate.mjs` beside * the ceilings they explain, so none of them is a silent difference: * * THE GRID — NO LONGER SUPERSEDED, AND THIS BOARD IS WHY. It draws * `1fr 380px` with a 32px gap; the shell drew `minmax(0,1fr) 360px` with 28 * until Ryan ruled the rail wider on 2026-08-27, and the shell now draws THIS * board's grid on all three steps (see `.sf-flow__grid`). The supersession * moved to the other end: steps 1 and 2's boards are the ones the build no * longer follows. Every `a3-*` content region in `flowgate.mjs` therefore * dropped its +24 and the rail crop dropped its −20. * * THE CONTROL TYPE SIZE. The board's `.input` is 15px; Ryan normalised this * flow's controls to the platform standard on 2026-08-26 (the zip field came * down from 18 to `--text-emphasis`, its button from 50 to 48) and the * accessory simulator's field followed. Fourteen fields one rung below every * other control on the flow would be the same defect the ruling was about, * pointing the other way. * * THE FIGURES. The board draws a $253.47 tax, a $214 freight overage and a * $3,500.47 total. Nothing computes any of them (`quote-totals.ts` declines), * so the SHAPE ships and the slots carry the pending mark. Not a style * decision — see `flow-step3.tsx` and the rail's `Totals`. * * ONE PLACE THE CAPTION AND THE DRAWING DISAGREE, and the drawing wins * (playbook §3): the caption calls the terms block "its own BOUNDED * sub-section (well bg, generous padding)"; the artboard draws two plain * checkbox rows on the card's white, 28px apart. Shipped as DRAWN, flagged. */ .sf-flow-step3__title { color: var(--brand-color-ink, #17181a); font-family: inherit; font-size: var(--text-product); font-weight: 700; letter-spacing: normal; line-height: normal; margin: 0; text-wrap: initial; } /* * `.sf-flow-step3__sub` STOOD HERE AND IS GONE (W73, Ryan 2026-09-03). It set * the muted line under the title — "One page. Guest checkout — no account * needed." — one of four section sub-headers he struck in a single ruling. * * ITS SPACING RULE MOVED RATHER THAN GOING WITH IT. The board leads the first * card at 20px and the rest at 24; that 20 was expressed as * `.sf-flow-step3__sub + .sf-flow-ck`, so deleting the element would have * silently promoted the first card to 24 as a side effect of a copy change. * The adjacency now hangs off the title, which is the element the card * genuinely follows. */ /* ---- the cards ---- */ /* The board's `padding: 26px 28px`, and 20px under the head for the first card, * 24 between the rest. `:first-of-type` is deliberately NOT used — it counts * every element sibling of the same TAG, and the step's first `
    ` is * what is wanted (the same trap that silently removed the rail's install * hairline on 2026-08-26). */ .sf-flow-ck { margin-top: 24px; padding: 26px 28px; } .sf-flow-step3__title + .sf-flow-ck { margin-top: 20px; } /* The PDP's section-header pattern, at the board's checkout size: a 36px * `nav-text` circle carrying an 18px mark in `nav`, 12px to the heading. */ .sf-flow-ck__head { align-items: center; display: flex; gap: 12px; margin-bottom: 22px; } .sf-flow-ck__mark { align-items: center; background: var(--brand-color-nav-text, #d9e8ff); border-radius: 50%; color: var(--brand-color-nav, #192950); display: flex; flex: none; height: 36px; justify-content: center; width: 36px; } /* * THE HEADING IS A CONTAINER, AND ITS NAME IS A RUN INSIDE IT — which looks * like indirection and is the board's own structure, verbatim. The drawing puts * an 18/700 span and a 13.5/400 span side by side inside a plain div, so the * SPACE BETWEEN THEM is set at the div's own metrics (the browser default 16 at * weight 400), not at the heading's. Setting the h2 itself to 18/700 makes that * space ~1px wider and pushes the whole context run sideways — measured, at * threshold 24, on the `a3-contact` crop. So the element carries the board's * container metrics and the name carries the board's name metrics. * * globals.css styles every h2 with the heading face at weight 500, a -0.015em * track, 1.12 leading and `text-wrap: balance`; all four are restated here, * which is what every heading on this flow does. */ .sf-flow-ck__heading { color: var(--brand-color-ink, #17181a); font-family: inherit; font-size: var(--text-emphasis); font-weight: 400; letter-spacing: normal; line-height: normal; margin: 0; text-wrap: initial; } .sf-flow-ck__heading-name { font-size: var(--text-card-header); font-weight: 700; } /* * `.sf-flow-ck__context` STOOD HERE AND IS GONE (W73, Ryan 2026-09-03). * * It drew the 13.5 muted run on each card's heading line — "· who we call to * schedule delivery", "· tax confirms as you type", "· card, Apple Pay or * Affirm". All three are struck, along with the page's own subtitle above. * * `.sf-flow-ck__heading-name` STAYS, and it is not now redundant: the heading * element carries the BOARD's container metrics (16/400, the browser default) * and the name carries the board's name metrics (18/700), which is the split * the block above this one explains at length. Folding the name back into the * `

    ` would move the type by the amount that comment was written about. */ /* The board's `flex-direction: column; gap: 16px` under every header. * * `position: relative` IS AN ANCHOR AND NOTHING ELSE (2026-09-01, address * autocomplete). The suggestion listbox is absolutely positioned against this * card so it can sit under the street field, and a positioned ancestor with no * offsets of its own moves nothing: the flex column lays out identically with * and without it, which is what keeps the recorded flow gates recorded. */ .sf-flow-ck__stack { display: flex; flex-direction: column; gap: 16px; position: relative; } /* * THE AUTOFILL HOOK — a zero-effect animation whose only job is to fire an * event. * * There is NO event for "the browser just autofilled this field". The one * documented signal is that Chrome and Safari apply `:-webkit-autofill`, so a * keyframe attached to that pseudo-class produces an `animationstart` a script * can listen for. `flow-address-suggest.tsx` listens for this exact name and * suppresses its suggestion list for a beat — the WooCommerce #63423 failure * mode is a Google dropdown appearing over a form the browser has just * completed, where one stray click replaces good state with a differently * parsed value. * * It animates a property that is already its own value, so nothing paints, * nothing moves and no pixel gate sees it. */ @keyframes sf-autofill-start { from { opacity: 1; } to { opacity: 1; } } .sf-flow-ck__input:-webkit-autofill { animation-duration: 1ms; animation-name: sf-autofill-start; } /* ---- the street field's suggestion list ---- */ /* * DRAWN OVER THE CARD, ANCHORED TO THE STREET FIELD, and it exists only while * there are suggestions — see `flow-address-suggest.tsx` for why this is a * headless list over our own input rather than Google's own web component. * * `top`/`left`/`width` are written INLINE by the component from the field's own * box, because the field is one of three in a grid row whose tracks are data: * the sheet cannot know where it is, and hard-coding a track weight here would * put the row's arrangement in two places. */ .sf-flow-ck__suggest { background: var(--brand-color-surface, #ffffff); border: var(--border-hairline); border-radius: var(--radius-control); box-shadow: 0 6px 18px rgb(0 0 0 / 12%); list-style: none; margin: 0; max-height: 264px; overflow-y: auto; padding: 4px 0; position: absolute; z-index: 20; } /* 44 tall: a touch target, not a menu row. The board draws no phone state for * this list, so the size is the platform's own minimum rather than a guess. */ .sf-flow-ck__suggest-row { align-items: baseline; color: var(--brand-color-ink, #17181a); cursor: pointer; display: flex; flex-wrap: wrap; font-size: var(--text-support); gap: 0 8px; line-height: 1.35; min-height: 44px; padding: 9px 14px; } .sf-flow-ck__suggest-row--active, .sf-flow-ck__suggest-row:hover { background: var(--brand-color-well, #f4f3ef); } .sf-flow-ck__suggest-main { font-weight: 600; } .sf-flow-ck__suggest-rest { color: var(--brand-color-muted, #6c6a62); } /* THE PAYMENT CARD'S OWN RHYTHM. Its board draws no uniform gap — 6px above the * billing row, then 28 to the terms and 24 to each block after it — so the * column carries no gap of its own and each block declares the air above it. */ .sf-flow-ck__pay { display: flex; flex-direction: column; } /* ---- fields ---- */ /* The board's grids: `1fr 1fr`, `2fr 1fr`, `2fr 1fr 1fr`. The tracks come from * the DATA (a field's `span`), so the row's arrangement lives in one place — * see `CheckoutRow`. */ .sf-flow-ck__row { display: grid; /* THE TRACKS COME FROM THE ROW's OWN FIELDS, as a custom property the * component sets (see `CheckoutRow`). Read here rather than written inline as * `grid-template-columns`, because an inline declaration beats every rule in * this sheet and the phone rung below would be dead. */ grid-template-columns: var(--sf-ck-cols, 1fr); gap: 14px; } .sf-flow-ck__field { display: flex; flex-direction: column; /* `min-width: 0` so a grid track may be narrower than its input's intrinsic * width — without it a 2fr/1fr/1fr row is floored by three controls and their * padding, and the row stops honouring its weights before the mobile cut. */ min-width: 0; } /* The board's `.label`, at the 13.5 its own inline override sets. */ .sf-flow-ck__label { color: var(--brand-color-ink-soft, #44464a); font-size: var(--text-small); font-weight: 600; margin-bottom: 6px; } /* "(optional)" — the board sets it at weight 400 in `muted` inside a 600 * label. */ .sf-flow-ck__optional { color: var(--brand-color-muted, #6c6a62); font-weight: 400; } /* * The board's `.input`. Its own rule declares `box-sizing: border-box`, so its * 48 is already a border box and ships unchanged — the one place this board is * not content-box, exactly as `FlowStep1.dc.html`'s was. * * The TYPE is the platform's 16 rather than the board's 15 — see this block's * header for the ruling. */ .sf-flow-ck__input { background: var(--brand-color-paper, #fbfbfa); border: var(--border-control); border-radius: var(--radius-control); color: var(--brand-color-ink, #17181a); font-family: inherit; font-size: var(--text-emphasis); min-height: var(--control-height); padding: 0 14px; width: 100%; } .sf-flow-ck__input::placeholder { color: var(--brand-color-muted, #6c6a62); opacity: 1; } /* THE STATE SELECT keeps the UA's own indicator and its own picker — see * `CheckoutStateField` for why the board's typed chevron is not reproduced. All * it needs from here is the same box every other field wears; a select's * vertical padding is a UA affair, so the height is declared and the side * padding steps back to leave room for the indicator. */ .sf-flow-ck__select { appearance: auto; height: var(--control-height); padding: 0 10px; } /* * `.sf-flow-ck__note` STOOD HERE AND IS GONE (W77, Ryan 2026-09-03). It drew * the muted line under a card's fields, and its only two instances were the * receipt-email explainer and the backup-number explainer, both struck. */ /* ---- W78: what a field says when it is wrong ---- */ /* * THE ERROR LINE, BESIDE THE FIELD IT IS ABOUT. * * NN/g's first rule for form errors is that the message is TEXT and not only a * colour, and its second is that the text sits next to the control — "users can * see the error message while fixing the error instead of having to remember * it". Both are structural here rather than stylistic: the paragraph is a child * of `.sf-flow-ck__field`, so it is in the same flex column as the label and * the input and cannot drift away from them at any width. * * `danger`, AT THE SUPPORTING SIZE, and the field's own 6px rhythm inverted — * the label leads the control by 6 and the message follows it by 6. * * IT IS RENDERED ONLY WHEN THERE IS ONE. No empty slot, no reserved height: * with nothing typed and nothing blurred this page's markup is what the * recorded flow gates measured, which is the property the whole of W78 was * built to keep. */ .sf-flow-ck__error { color: var(--brand-color-danger, #a3261a); font-size: var(--text-small); line-height: 1.4; margin: 6px 0 0; } /* * AND THE CONTROL SAYS SO TOO — the second signal, never the only one. The * board's own `line-mid` hairline becomes a `danger` one at the same width, so * the box does not move by a pixel when it goes wrong; a border that thickened * on error would reflow the row it is in. * * THE RING IS UNTOUCHED. Focus is a different state from invalid and the two * are drawn by different properties (`outline` vs `border-color`), so a field * that is both wears both — which is exactly what a reader who has come back to * fix it should see. */ .sf-flow-ck__input--invalid { border-color: var(--brand-color-danger, #a3261a); } /* ---- the advisory bands ---- */ /* The board's own stack: 8px between the bands. */ .sf-flow-ck__bands { display: flex; flex-direction: column; gap: 8px; } /* * The board's left-ruled band: white on the card's own white with a hairline * all round, a 3px coloured rule at the left, and the radius squared off on * that side so the rule reads as an edge rather than a stripe. */ .sf-flow-ck__band { align-items: center; background: var(--brand-color-surface, #ffffff); border: var(--border-hairline); border-left: 3px solid var(--brand-color-faint, #9a988f); border-radius: 0 var(--radius-control) var(--radius-control) 0; color: var(--brand-color-ink-soft, #44464a); display: flex; flex-wrap: wrap; font-size: var(--text-support); gap: 0 10px; line-height: 1.45; margin: 0; padding: 12px 16px; } /* THE CONFIRMED BAND — green rule, green tick. It is the branch the tax service * takes the day it answers; today the quiet one below renders instead, and both * are written so that day is a data change and not a build. */ .sf-flow-ck__band--good { border-left-color: var(--brand-color-good, #1f7a4d); } .sf-flow-ck__band--quiet { border-left-color: var(--brand-color-faint, #9a988f); } /* * THE PUSH-THROUGH BAND — accent rule, and a column rather than a wrapped line. * * ACCENT AND NOT DANGER, deliberately. Ryan's whole framing is that the * validator "is not always right", so a red band over a shopper's own correct * address would be the site telling them they are wrong about where they live. * Accent is the site's "look at this", which is what this is. * * It overrides the shared band's `align-items: center` because it stacks a * sentence, an optional suggested address and a row of actions — three blocks, * left-aligned, rather than one line of text with a figure in it. */ .sf-flow-ck__band--warn { align-items: flex-start; border-left-color: var(--brand-color-accent, #e2711d); flex-direction: column; gap: 8px; } .sf-flow-ck__band-body { color: var(--brand-color-ink-soft, #44464a); } /* The postal service's own spelling, set apart from the sentence offering it — * a shopper has to be able to READ the address before they accept it. */ .sf-flow-ck__band-suggest { color: var(--brand-color-ink, #17181a); font-weight: 600; } .sf-flow-ck__band-actions { display: flex; flex-wrap: wrap; gap: 8px 18px; } /* * PLAIN TEXT BUTTONS, and both of them equally plain. * * "Keep what I typed" is not the lesser option — Baymard measured 69% of * shoppers completing manually when suggestions did not match them — so drawing * the accept as a solid button and the keep as a hint would be steering people * away from the answer that is right for two thirds of them. Same size, same * weight, one carries the accent. */ .sf-flow-ck__band-action { background: none; border: 0; color: var(--brand-color-ink-soft, #44464a); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; text-underline-offset: 3px; } .sf-flow-ck__band-action--accept { color: var(--brand-color-accent, #e2711d); font-weight: 600; } .sf-flow-ck__band-tick { color: var(--brand-color-good, #1f7a4d); font-weight: 700; } .sf-flow-ck__band-money { color: var(--brand-color-ink, #17181a); font-family: var(--brand-font-mono, monospace); } /* * W145's SECOND DOOR, in the address card's tax band. * * THE SAME QUIET TREATMENT AS THE RAIL'S RUNG, deliberately: it is the same * offer and pressing either opens the same pop-up, so two different-looking * controls for one action would be two things to a reader rather than one. * Muted, underlined, at the band's own size — the storefront's quiet-link * idiom (tokens §1). */ .sf-flow-ck__band-exempt { background: none; border: 0; color: var(--brand-color-muted, #6c6a62); cursor: pointer; font-family: inherit; font-size: inherit; margin-left: 8px; padding: 0; text-decoration: underline; white-space: nowrap; } .sf-flow-ck__band-exempt:hover { color: var(--brand-color-ink, #17181a); } .sf-flow-ck__band-trailer { color: var(--brand-color-muted, #6c6a62); } /* ---- the terms gate, and the veil ---- */ /* The board's checkbox rows: 15px ink, 12px to the words. */ .sf-flow-ck__check { align-items: center; color: var(--brand-color-ink, #17181a); cursor: pointer; display: flex; font-size: var(--text-body); gap: 12px; margin-top: 6px; padding: 2px 0; } .sf-flow-ck__check--terms { margin-top: 28px; } /* * THE REAL CHECKBOX, CLIPPED INSIDE THE DRAWN BOX. * * Clipped rather than `display: none`, because a hidden control is not a * control — it leaves the tab order, and this one is the page's only gate. It * is `position: absolute` inside a `position: relative` box for the reason the * playbook's sr-span bug records: an absolutely-positioned descendant whose * ancestors are all static takes the PAGE as its containing block and extends * the document's scrollable overflow. */ .sf-flow-ck__box { height: 100%; inset: 0; margin: 0; opacity: 0; position: absolute; width: 100%; } /* The drawn box: 20px, 1.5px accent border, radius 4 — the platform's selection * language at the board's own weight. */ .sf-flow-ck__box-mark { align-items: center; background: var(--brand-color-surface, #ffffff); border: var(--border-selected); border-radius: var(--radius-inner); color: var(--brand-color-surface, #ffffff); display: inline-flex; flex: none; height: 20px; justify-content: center; position: relative; width: 20px; } /* Checked: the box FILLS and its mark shows. Unchecked, the check is still in * the DOM at the same metrics — so nothing reflows when it is ticked. */ .sf-flow-ck__box-mark > svg { visibility: hidden; } .sf-flow-ck__box-mark:has(> .sf-flow-ck__box:checked) { background: var(--brand-color-accent, #c4530a); } .sf-flow-ck__box-mark:has(> .sf-flow-ck__box:checked) > svg { visibility: visible; } /* THE RING MOVES TO THE DRAWN BOX — tokens §3's one sanctioned case, in its own * words: "a bare input inside a drawn field, where the ring moves to the FIELD * (`:has(… :focus-visible)` on the wrapper) because that is the box the reader * is looking at". The clipped input's own outline would be a ring around a 20px * transparent square nobody can see. */ .sf-flow-ck__box-mark:has(> .sf-flow-ck__box:focus-visible) { outline: var(--sf-focus-ring, 2px solid var(--brand-color-accent, #c4530a)); outline-offset: var(--sf-focus-ring-offset, 2px); } .sf-flow-ck__box:focus-visible { outline: none; } /* * The board's legal links: PLAIN TEXT — same colour, same size, no underline * (its caption says so in as many words). * * THEY ARE `