/* ════════════════════════════════════════════════════════════════════════════
   guided.css — THE GUIDED LAYER'S WHOLE STYLESHEET.  GUIDED-2 (the luxury pass).
   ════════════════════════════════════════════════════════════════════════════
   Law: `GUIDED-2-direction.md` — the type scale (§2), the plate (§3), the five
   constructions (§4), space and rhythm (§5), the four ceremony motions (§6),
   the first screen (§7), what is cut (§8) and §9's compositions. Sequence and
   content are the flow document's; treatment is this file's.

   Everything here is scoped to `#guidedLayer` or to `body.guided`. Under
   `body.guided` it touches the corridor in ONE way and for one reason: the
   corridor's chrome is taken out of the picture while the wizard is the page.

   Every colour, space, size, weight, duration and easing is a token. There is
   not one hex value in this file and not one font stack: the two faces are
   `--font-family-sans-stack` and `--font-family-serif-stack`, declared on the
   layer AND on its controls, because a `<button>` inherits neither.

   ── WHAT GUIDED-2 CHANGED HERE, IN ONE PLACE ────────────────────────────────
   · THE RAIL IS CUT.  `.gRailWrap` / `.gRail` / `.gRailStep` are gone — 656px
     of places in 342px of rail, 40% legible, a nav bar on a page that is not
     navigable.  In its place `.g2Settled`: one line above the question, the
     house saying back what is settled.  The layer is two grid rows now, which
     returns ~48px to the reading area (775 with no money foot at 390×844).
   · THE GREY OUTLINED BOX IS RETIRED.  `.gChip` — one rectangle on six screens
     — is replaced by exactly two answer constructions, and the first of them is
     a photograph: the PLATE TILE (§4.1) and the WORD ROW (§4.2).  Plus one
     primary (§4.3), one door row and one quiet line (§4.4).  Five, and no sixth.
     The COMPAT block at the foot of this file keeps a legacy `.gChip` walking as
     a word row while the three step files are rebuilt; it is a deletion, dated,
     not a construction.
   · THE QUESTION IS `--type-size-600` (32 at 390, 40 at ≥600), in the serif, at
     regular weight.  The first screen of the guided commission is no longer
     typographically smaller than the door it came through.
   · ONE BREAKPOINT, AT 600 — the token set's own rung.  The layer used to turn
     at 640 while the token set turned at 600: two breakpoints 40px apart is a
     self-disagreement, and it ends here.  The ≥1024 block is not a second
     breakpoint in that sense — it is the one composition change the direction
     asks for (§5.1: one composition above 1024, at every width).
   · FOUR MOTIONS, none over 240ms, all through the token set, so
     `prefers-reduced-motion` zeroes every one of them in one place.

   ── WHAT GUIDED-4 CHANGED HERE · 29 August 2026 · THE LIGHT SYSTEM ──────────
   Law: `design/guidance/GUIDED-4-apple-spec.md`, ratified. DATED AMENDMENT to
   this file's own GUIDED-2 sentences about the serif, recorded here rather than
   quietly overwritten. THE CLIENT'S DIRECTION, 29 August 2026, verbatim: "too
   dark… I don't like beige, it feels dated… go all-sans, Apple-like."
   · THE LADDER IS ALL INTER (spec §2). Where the serif carried hierarchy BY
     FACE — the question, the house line, the reading title, the answer's name —
     weight 600 and negative tracking carry it now, which is three channels
     where the face was one. The GUIDED-2 sentence "weight is regular everywhere
     on the serif" is superseded for those four roles and stands for none.
   · THE SERIF SURVIVES IN THIS FILE AT EXACTLY TWO SELECTORS, and both of them
     ARE the house mark: `.g2Wordmark` and `.gMastIn`. Spec §2.6 names them by
     file and line. A third use is a defect, and `type.role.wordmark` upstream is
     what makes that auditable.
   · THE GROUNDS AND THE INKS MOVE UNDER THIS FILE WITHOUT IT (spec §1). Every
     surface, ink and line here is already a `var()`, so the ivory→white,
     #161616→#EFEFEF and warm→exact-neutral moves land through `tokens.css`.
     RULING-002 is satisfied BY CONSTRUCTION now: every ground in the product is
     R=G=B exactly, not merely the cloth-adjacent ones.
   · THE CONTROLS ROUND AND THE CLOTH DOES NOT (spec §3.1). `radius.control`
     2→10 reaches `.g2Primary`, `.gPrimary`/`.place` and the layer's inputs
     through `--control-button-radius` / `--control-input-radius`. Every plate,
     tile, row, door and photograph stays `--radius-none`, without exception:
     a rounded swatch crops real cloth away and re-frames a material as a UI
     object.

   ── WHAT GUIDED-3 BATCH 2 (WP3) CHANGED HERE · 28 August 2026 ───────────────
   Law: `GUIDED-3-direction.md` §3 (Batch 2, WP3) and the three expert items it
   cites. Each change is marked with its item where it stands.
   · V10 · THE FOUR-SIDED SELECTION BOX IS RETIRED, everywhere in the layer.
     The chosen state is MOB-B3's three parts and no fourth: a 2px ink rule on
     the LEADING EDGE, the 10px mark in its reserved gutter, and the word. The
     box was the heaviest object on every screen it stood on, and on a
     full-bleed plate it degraded into two meaningless black bars (V12, measured
     on the cloth screen at 390) — a leading-edge rule cannot degrade that way.
     The mark takes `--color-accent-house`; the rule and the word carry the
     state in grayscale, so the accent is additive and never load-bearing.
   · V21 · THE WORD IS AN EYEBROW ON ITS OWN LINE. "Half canvas · Chosen" was
     serif-then-sans spliced mid-baseline; the eyebrow role (§2.4) is where a
     state belongs, and it belongs on a line of its own.
   · V6 · THE SCROLLER'S TWO ENDS: honest `scroll-padding-block`, so nothing a
     client scrolls TO ever rests under a band, and §5.2's ≥96 of clearance at
     the foot restated for the screens where the stage takes the block padding.
   · V7 · ONE DESKTOP COMPOSITION: the plinth stands on the spread's own two
     left edges instead of a 720 measure inherited from the phone, and the
     wordmark returns above the walk at ≥1024.
   · V9 · THE PLINTH: figure · basis · THE ACT · one back. The workshop escape
     is not chrome; it stands once, quietly, at the foot of the scroller.
   · V14 · VIEW CONTROLS STOP DRESSING AS LINKS. · V18 · the step heading's
     programmatic focus stops painting a rectangle. · V20 · the vertical steps.
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   PENDING UPSTREAM — the one token this round adds, with its value, its rule
   and its reason.  Written in the same form the page's own pending block uses.
   ════════════════════════════════════════════════════════════════════════════ */
/* THE HOUSE LINE. The one size above the page title, for the one role the scale
   has no name for: a serif line that is the ONLY thing on its half of a screen.
   `--type-size-600` is a PAGE TITLE — it shares its screen with a record, a
   figure and two actions, and at 40px in a 1280px spread it is a heading, not a
   voice. The guided commission opens and closes on the house speaking, and those
   two moments are the whole of this token's licence.
   UPSTREAM ASK: `type.size.700` / `type.lineHeight.700`, responsive at the
   `compact` rung — then delete this block and the two lines below it.
   GUIDED-4 (29 Aug 2026) — DATED AMENDMENT, spec §2.3. The two line-heights
   move, and only because the FACE moved: these steps were calibrated on Source
   Serif 4 at 400, and Inter at 600 with −0.03em tracking is optically taller,
   so it needs less leading, not more. 42→44 (1.10 on 40) and 66→70 (1.09→1.10
   on 64) — the same 1.10 ratio at both rungs, which is the ratio the token
   set's own `lineHeight.600` takes to `size.600` after §2.3. Nothing else in
   this block moves: the sizes are the sizes, and the licence is unchanged.
   GUIDED-4 BOUNDARY (29 Aug 2026) — THE DEFINITION MOVED, THE VALUES DID NOT.
   The door's display line now consumes this rung (the coherence judge measured
   its 1.06 literal against the walk's 64/70), and this file is linked at the
   FOOT of the body: on a throttled load the door painted un-tokened and then
   jumped when this file arrived — L13 measured CLS 0.0422 at 768. The `:root`
   rung now lives in modern.html's head style block, before first paint, one
   definition for both consumers; the upstream ask above stands unchanged. */

/* ── the floor under the controls ───────────────────────────────────────────
   A `<button>` inherits neither face nor size, so something must tell every
   control in the layer what it is set in. That "something" is NOT an unlayered
   blanket: an unlayered declaration beats a layered one at every specificity,
   and in GUIDED-1 the blanket silently ate every caps role the three step files
   authored inside their own `@layer` blocks (ledger, coherence B2). So the
   floor lives in `@layer guided-floor`, which `guided.js` registers FIRST —
   before any of the three step files exist — and every rule any of them writes
   outranks it. It is a floor, not a ceiling: nothing falls to the browser's
   13.33px, and nothing else is decided here. */
@layer guided-floor {
  #guidedLayer button{
    font-size:var(--type-size-300);
    line-height:var(--type-line-height-300);
    letter-spacing:var(--type-tracking-normal);
    font-weight:var(--type-weight-regular);
  }
  #guidedLayer button,
  #guidedLayer input,
  #guidedLayer select,
  #guidedLayer textarea{
    font-family:var(--font-family-sans-stack);
    color:var(--color-ink-primary);
  }
}

/* ── the corridor, while the wizard is the page ────────────────────────────
   `display:none` and not `visibility` or an opacity: hidden is what we mean,
   and it is the only form of hiding that also takes the chrome out of the
   accessibility tree. The reading column is NOT hidden — it is covered, and the
   engine marks it inert. */
body.guided > .skip,
body.guided > header,
body.guided > #phasebar,
body.guided > #plinth { display:none; }
/* …and the stage's own control band, which is NOT a direct child of <body>: it
   rides into the layer with `#viz` when a step opens its window onto the page's
   stage. A live "Compare" the wizard never offered, carrying a stale accessible
   name, is a control that is not part of the walk (ledger, reduction nit 2). */
body.guided #vizToggles { display:none; }

/* the layer scrolls inside itself, so the page beneath it does not scroll at
   all: two scrollbars over one another is jank. */
body.guided { overflow:hidden; }

/* ── the layer ──────────────────────────────────────────────────────────────
   `position:fixed; inset:0` rather than a viewport height: it gives the layer
   the real visual viewport on a phone without `100vh`'s address-bar lie, and
   the two rows (the reading area · the foot) are laid by the grid, so nothing
   is measured in JavaScript and nothing shifts on the first paint.

   z-index 90 is a position in the page's own stack, not a token: it stands
   ABOVE the corridor's chrome (40 and 50) and BELOW the book sheet (100), the
   close-up and the receipt (150). The wizard opens all three over itself by
   design and they must land on top. */
#guidedLayer{
  position:fixed; inset:0; z-index:90;
  /* V7 · three rows now: the masthead, the reading area, the plinth. Each is
     PLACED by name below rather than left to auto-flow, because the masthead is
     `display:none` below 1024 — and a grid whose rows are filled in order gives
     the scroller the masthead's `auto` row the moment the masthead is not a
     grid item, which measured as a plinth 25px tall standing 844px down a
     844px screen. The rows are stated; the children are placed. */
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  background:var(--color-surface-page);
  color:var(--color-ink-primary);
  font-family:var(--font-family-sans-stack);
  font-size:var(--type-size-300);
  line-height:var(--type-line-height-300);
  letter-spacing:var(--type-tracking-normal);
  font-weight:var(--type-weight-regular);
}
#guidedLayer input,
#guidedLayer select,
#guidedLayer textarea{
  font-size:var(--type-size-300);
  line-height:var(--type-line-height-300);
  letter-spacing:var(--type-tracking-normal);
}

/* ── the reading area, and the column ──────────────────────────────────────
   §5.1's grid: 24 of margin at ≤599, 32 to 1023, 48 above; the column is capped
   at the ledger measure until 1024, where a composed screen (a SPREAD or a
   GRID) may take the whole 1184 of content and an uncomposed one stays at 720
   — §9.6's rule, verbatim: a bay of grey where a photograph would go is the
   leftover space we are not reintroducing under a new name.
   §5.2's air above the question is the reading area's own top padding: 48 at
   compact, 96 at ≥600. */
#guidedLayer .gScroll{
  overflow-y:auto; overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  padding-inline:var(--layout-margin-compact);
  /* §5.2's two figures, and the second one is the luxury signal: 48 of air above
     the question, and a MINIMUM of 96 beneath the last answer. A screen that
     ends flush against its chrome reads as a form that ran out of room. */
  padding-block:var(--space-1200) var(--space-2400);
  /* ── V6 · HONEST SCROLL PADDING ──────────────────────────────────────────
     The visual lead offered two remedies for type sliced at the scroller's
     ends: a mask, or an opaque band and honest padding. The mask is prettier
     and it is also a soft-focus effect on type, which this house does not do;
     opaque bands and honest padding are the tailor's answer, and this is the
     padding half of it. `scroll-padding` is what the ENGINE uses when it scrolls
     to something — a caret arriving on a control, `scrollIntoView`, a snap — so
     with it declared nothing a client is sent to can come to rest under a band
     or against an edge. It is `auto` by default, which means "flush", and
     flush is where the slicing was measured. */
  scroll-padding-block:var(--space-1200) var(--space-2400);
  /* ── GUIDED-3 FIX WAVE 2 · CLARITY 5 + COHERENCE 2 + ADVOCATE 2, 29 Aug 2026
     THE READING AREA'S TWO EDGES FADE OVER ONE LINE, SO NOTHING IS EVER CUT
     THROUGH THE MIDDLE OF ITS GLYPHS. ────────────────────────────────────────
     DATED AMENDMENT, and it OVERTURNS the paragraph directly above this one
     ("The mask is prettier and it is also a soft-focus effect on type, which
     this house does not do"). Three judges have now asked for it by name and
     measured what the alternative costs:
       · coherence 8/2 — the sticky settled band bisecting running type at every
         scroll offset sampled (1200/1500/1800/1920/1980/2200/2600): "exactly.
         One of these two is true for you; nothing is" cut horizontally through
         its x-height with ZERO clearance (clip-1800.png).
       · devil's advocate 7/2 — the honest-padding half landed and worked at
         first paint, and at rest positions the hairline still cut letter bodies
         at BOTH edges: 'Paul and the atelier that answers his post can see'
         [753–804] against a dock top of 761 (r53-commit-scrolled.png).
       · purpose clarity 5 — the product SCROLLS ITSELF after the colour answer
         and comes to rest with "Navy plain 75401-2 is measured from the cloth.
         Your screen is not." bisected at y=73 by the settled band.
     THE ARGUMENT THAT LOST. Honest padding governs where the ENGINE puts
     something (`scroll-padding`, kept and unchanged below) and where the screen
     comes to rest at first paint (the picture's own reservation, and now the
     fold guard). Neither can govern the INTERMEDIATE scroll positions a thumb
     passes through, and there are an infinite number of them: at those, a hard
     edge always cuts some line in half. The house's real rule is "no line of
     type is ever shown cut through its middle", and a one-line fade is the only
     construction that keeps it while the client is actually moving.
     IT IS HALF A LINE AND NOT A VIGNETTE, and the figure was chosen on the
     running screen rather than from the judge's "~24 px". Photographed at both:
     over a full reading line (26) the LAST WHOLE line above the plinth — "Two-
     piece suit in Navy plain," on `commit` at 390, which the fold guard has just
     put entirely above the edge — was washed to about 40% of its ink, so the
     fix turned a legible sentence grey to soften an edge it was not crossing.
     Over 12 (`--space-300`, §5.2's smallest step) a line that is WHOLE keeps its
     x-height and loses only the air under its descenders, while a line the edge
     actually passes through dissolves instead of being guillotined — which is
     the whole of what was asked for. */
}
/* the fade's one measurement, declared on the layer so both edges read it. */
#guidedLayer{ --g2-fade:var(--space-300); }
/* IT IS PAINTED PAPER, NOT A MASK, AND THAT IS A MEASURED CORRECTION.
   `mask-image` on the scroller was tried first and photographed: while a stage
   is up the layer is TRANSPARENT over the viewer's iframe — the paper a client
   reads on is painted by the step's own words bay, INSIDE the scroller — so
   masking the scroller's two edges did not fade type into paper, it cut a
   26px hole through to the 3D stage and drew a black band across the screen
   directly under the settled line (clip-1800.png, first attempt). A fade has to
   ADD the house's paper, not subtract the words. So both edges are a gradient
   of `--color-surface-page` drawn OVER the reading area, in the two places the
   chrome actually meets the type:
     · the plinth's own top edge, always — the ground beneath the last line is
       the layer's paper at every step and every width;
     · the settled band's bottom edge, and ONLY once the type has come up under
       it (`gsee-under`, set from the picture's own rect in guided-see's `fit`).
       At rest the thing under that band is the PHOTOGRAPH, and §3.2 does not
       permit this house to paint a wash of paper over cloth to soften an edge
       nothing is crossing. */
/* the plinth is above the reading area it ends — one rank over the settled
   band's own 3, so its fade is drawn over the last line rather than under it. */
#guidedLayer .gFoot{ position:relative; z-index:4; }
/* ── GUIDED-3 MICRO WAVE 3 · FABRIC 1, 29 August 2026 ───────────────────────
   THE FADE FALLS ON PAPER. IT NEVER FALLS ON CLOTH.
   ────────────────────────────────────────────────────────────────────────────
   DATED AMENDMENT, and it is the fabric judge's own remedy: "gate `.gFoot::
   before` the way `.g2Settled::after` is already gated … so the fade only ever
   falls on paper". His measurement, reproduced on the running page before this
   was written: at 1280 AT REST the plinth's 12px transparent→#F7F4EC gradient
   lies over the last 7 CSS px of the garment moment's photograph (rendered
   [152.6,150.2,148.2] where the mill file is [72.5,69.4,72.8]); at 390 a 8px
   scroll sweep of the whole scroller finds 24.3 CSS px of the 298.3px picture
   hidden at its BEST offset, 12 of them this wash. The stylesheet two rules
   above already forbids exactly that for the settled band ("§3.2 does not
   permit this house to paint a wash of paper over cloth to soften an edge
   nothing is crossing") — the plinth was left ungated.
   THE GATE IS HORIZONTAL, NOT A SWITCH, and that is deliberate. Suppressing the
   whole band whenever a plate reached the edge would also un-fade the RUNNING
   TYPE that shares the edge in the other column at ≥1024 — the advice line the
   purpose-clarity judge measured at [471,486] against a foot top of 488 — and
   would trade one judge's finding for another's. So the band is drawn in two
   segments and the plate's own inline extent is the gap between them:
   `--g2-fade-to` is where the left segment stops and `--g2-fade-from` where the
   right one starts, both written by guided-see's `fit()` from the plate's live
   rect and both defaulting to the layer's right edge — which is one full-width
   band, byte for byte the rule that stood here before. */
#guidedLayer .gFoot::before,
#guidedLayer .gFoot::after{
  content:'';
  position:absolute; bottom:100%;
  height:var(--g2-fade, var(--space-300));
  background:linear-gradient(to bottom, transparent, var(--color-surface-page));
  pointer-events:none;
}
#guidedLayer .gFoot::before{ left:0; right:calc(100% - var(--g2-fade-to, 100%)); }
#guidedLayer .gFoot::after{ left:var(--g2-fade-from, 100%); right:0; }
/* ── GUIDED-3 FIX WAVE 2 · PURPOSE CLARITY 1 · THE FOLD FALLS IN A GAP ───────
   The reading area's block-start takes the smallest measured offset that puts
   its own bottom edge BETWEEN two lines rather than through one, on the widths
   where the picture cannot pay for that (≥1024's spread, where the words bay
   stands beside the picture and does not move when the picture's height does).
   `--g2-fold-nudge` is written by `holdFold()` in guided.js, measured from a
   zeroed baseline on every layout, and it is 0 on every screen at 390 because
   FX2's picture rule already put the fold in a gap there. Nothing is typed.

   ── GUIDED-4 · 29 AUGUST 2026 · THE RESERVATION MOVES THE EDGE, NOT THE WORDS
   DATED AMENDMENT, and it is a craft fix the light system's own type metrics
   forced into the open. What stood here was `margin-block-start` on `.gStep` —
   the reservation pushed the whole composition DOWN by d, which puts the fold
   in the gap and also MOVES EVERY PAINTED LINE ON THE SCREEN. That is a layout
   shift by definition, and `holdFold()` runs after the stage settles, well
   outside the 500 ms input window. MEASURED at 1440×900 on the garment moment:
   CLS 0.00115, one entry, source `.gBody`, y 65→68 and height 603→600 — the
   step's own margin going 0→3px at t≈2.4 s. It reproduced 3 runs of 3, and an
   A/B isolated the cause exactly: with `type.lineHeight.600` restored to its
   pre-GUIDED-4 45px the nudge is 0 and CLS is 0.0000; at the spec's 44px a line
   of the words bay crosses the fold by 3px and the guard pays for it.
   THE GEOMETRY IS THE SAME EITHER WAY. Pushing the content down by d and
   raising the fold by d put the fold in exactly the same gap — the relation
   between the reading area's bottom edge and the line above it is what the
   guard is about, and it is unchanged. But raising the edge moves NO painted
   content: the scroller's block-start is untouched, so every line stays where
   it was drawn and only the scrollport's own bottom edge (and the clip it
   carries) moves up. Measured after the change: CLS 0.00000 at 1440×900 and at
   1280×720, with the fold guard still reserving its 3px. The 3px it leaves
   between the reading area and the plinth is paper on paper — `surface.page`
   above and below — and the plinth's own 12px fade already covers that band. */
#guidedLayer .gScroll{ margin-block-end:var(--g2-fold-nudge, 0px); }
/* ── V6 · AND THE FOOT'S CLEARANCE IS NOT NEGOTIABLE ───────────────────────
   While a stage is up, guided-see gives the scroller its whole block padding
   away so the photograph can run to the screen edge — `padding-block:0`, and
   that reasoning is right about the TOP of the screen and says nothing about
   the bottom. Measured on the garment moment at 390 before this rule: the last
   line of the card ends at the scroller's own bottom edge (belowLast 0), so the
   final line of type is guillotined by the plinth's rule — which is the
   descender collision the visual lead measured on the settled band ('275 g/m²',
   706.3→727.3 against a band at 722.0, 5.3px into the line) and the same
   6.3px cut this build measures on the standing sentence.
   §5.2's ≥96 belongs to every screen, whoever else is writing the padding. It
   is stated here through the scroller's own ID — two ids beat the one in
   guided-see's runtime stylesheet, which is appended after this file and would
   otherwise win on document order at equal specificity. */
body.guided.gsee-stage #guidedLayer #guidedScroll{
  padding-bottom:var(--space-2400);
}
/* …and the head of that reservation, which is stated separately because the
   DOCKED strip has its own and larger one (guided-see.js, `.gsee-docked
   .gScroll`: the picture, the band beneath it and 48 of air). Two ids beat that
   rule wherever both apply, so this one stands down while the strip is up
   rather than quietly halving its headroom — measured, 94px against a chrome
   foot at 390 (WP3's own clause). */
body.guided.gsee-stage #guidedLayer:not(.gsee-docked) #guidedScroll{
  /* ── GUIDED-3 FX2 · 29 August 2026 · THE SETTLED BAND IS CHROME INSIDE THE
     SCROLLER, SO THE SCROLLER RESERVES IT ────────────────────────────────────
     DATED AMENDMENT, and it is the judges' "the settled band gets scroll-margin
     treatment" (purpose clarity 3 · coherence 8). While a stage is up the
     settled line is `position:sticky; top:0` INSIDE this scroller — so the
     engine's own way of putting something on the screen (`scrollIntoView`, a
     caret arriving on a control, the outstanding question the act scrolls to)
     landed the target UNDER an opaque band: measured at 390 on `commit`, the
     headline "The colour on your screen" sliced through its ascenders at
     scrollTop 1920 and the line "Your screen is not, and no screen can show a
     cloth" cut in half at 1980. `scroll-padding-block-start` is the property
     that governs exactly that, and the band's height is not a number a
     stylesheet can know — it is `--gsee-qh`, measured off the band itself by
     `fit()` (guided-see.js) on every layout — so the reservation is the band
     plus §5.2's smallest step, and it follows the band when the sentence wraps.
     The FOOT needs no such reservation: the plinth is grid row 3 of the layer,
     not a floating bar, so the scroller's own box already ends where the plinth
     begins (see the FX2 note in guided-see.js's `fit`). */
  scroll-padding-block:calc(var(--gsee-qh, 0px) + var(--space-300)) var(--space-2400);
}
#guidedLayer .gBody{
  width:100%;
  max-width:var(--layout-max-width-ledger);
  margin-inline:auto;
}
#guidedLayer .gSlot{ display:block; }
/* V20 · §5.2 allows three vertical steps — 12 · 32 · 48–96 — and 16 is not one
   of them. A paragraph inside one block of prose is the smallest step. */
#guidedLayer .gSlot p{
  max-width:var(--layout-measure-prose);
  margin:0 0 var(--space-300);
  color:var(--color-ink-secondary);
}
#guidedLayer .gSlot p:last-child{ margin-bottom:0; }

/* FLOW-2 (31 Aug 2026) · the settled BAND (`.g2Settled`) is deleted with the
   stations it summarised — the settled COLUMN (`.gbCol`, at the end of this
   file) states every answer, always, and each one is a control. */
/* ── the type ladder (§2.2) ────────────────────────────────────────────────
   the question · the house line · the reading title · the answer's name · the
   fact line · the eyebrow.
   GUIDED-4 (29 Aug 2026) — DATED AMENDMENT, spec §2.1/§2.4. THE LADDER IS ALL
   INTER. What stood here was "weight is regular everywhere on the serif — a
   serif at 40px does not need 600", and it was true of a serif. The client's
   direction of this date ("go all-sans, Apple-like") takes the face away, and
   the face was one whole channel of the hierarchy: delete it and the question
   would separate from body text by SIZE alone. So the four display roles below
   take weight 600 and negative tracking — three channels where the serif used
   one, which is the Apple ladder (SF Display semibold over SF Text regular) and
   is reachable with the three Inter weights already vendored. No 700 is
   synthesised and none is added locally (spec §2.7, §6.10). */
#guidedLayer .gQ{
  font-family:var(--font-family-sans-stack);
  font-size:var(--type-size-600);
  line-height:var(--type-line-height-600);
  letter-spacing:var(--type-tracking-display);
  font-weight:var(--type-weight-semibold);
  color:var(--color-ink-primary);
  max-width:var(--layout-measure-prose);
  margin:0 0 var(--space-800);
}
/* V20 · AND ONE SCREEN GROUPS ITS QUESTION WITH THE ROW THAT NARROWS IT. On
   `looks` the line under the question is not an answer — it is the ways to view
   the answers, and it belongs to the question, so it takes §5.2's SMALLEST step
   (12) instead of its middle one (32), and the 32 is spent where the eye needs
   it: between the words and the photographs. It is the same three steps, in the
   order the composition actually reads. */
#guidedLayer .gStep[data-step="looks"] > .gQ{ margin-bottom:var(--space-300); }

/* THE HOUSE LINE. Its rule, and it is absolute: `--type-size-700` is spoken
   exactly twice in the whole walk — on the first screen, and on the letter's
   arrival. Never on an ask screen, never on the record, never twice on one
   screen, never in the sans. If a third use is proposed, it is refused; the
   answer is `--type-size-600`.
   GUIDED-4 · the rule is untouched — twice in the walk, and no third use. What
   moved is the face: spec §2.4's display line is 64/600/−0.03em/70, compact
   40/600/−0.03em/44. */
#guidedLayer .g2HouseLine{
  font-family:var(--font-family-sans-stack);
  font-size:var(--type-size-700);
  line-height:var(--type-line-height-700);
  font-weight:var(--type-weight-semibold);
  letter-spacing:var(--type-tracking-display);
  color:var(--color-ink-primary);
  max-width:var(--layout-measure-prose);
  margin:0;
}
/* the reading title — the record's and the letter's section heads, and a
   sheet's own heading.
   GUIDED-4 · spec §2.4's section/reading title: 28/600/−0.02em/35, compact
   24/…/31. It resolves identically to the price total, and §2.1 DECLARES that
   equality rather than inventing a difference to avoid it: no screen renders
   both, they stay two token names, and a Round-2 theme can part them. */
#guidedLayer .g2Title{
  font-family:var(--font-family-sans-stack);
  font-size:var(--type-size-500);
  line-height:var(--type-line-height-500);
  letter-spacing:var(--type-tracking-tight);
  font-weight:var(--type-weight-semibold);
  color:var(--color-ink-primary);
  margin:0 0 var(--space-300);
}
/* the wordmark, ranged left, on the one screen that carries it (§7).
   V20 · 24 is not one of §5.2's three steps; 32 is.
   GUIDED-4 · THE SERIF SURVIVES HERE, AND IN ONE OTHER PLACE IN THIS FILE.
   Spec §2.6: Source Serif 4 400 / 20 / +0.10em / 28 is `type.role.wordmark`,
   and the wordmark is the only consumer the family has left in the product. It
   is not a heading that happens to be old-fashioned — it is the house's mark,
   and a mark is drawn, not set. Do not "finish the sweep" here. */
#guidedLayer .g2Wordmark{
  display:block;
  font-family:var(--font-family-serif-stack);
  font-size:var(--type-size-400);
  line-height:var(--type-line-height-400);
  letter-spacing:var(--type-tracking-caps);
  font-weight:var(--type-weight-regular);
  color:var(--color-ink-primary);
  margin:0 0 var(--space-800);
}

/* ── V7 · THE MASTHEAD — the wordmark returns above the walk ────────────────
   Measured before this: at 1280 the guided layer opened with 96px of blank
   paper above the question and NO house mark anywhere, so the page lost its
   identity at the exact moment the commission began — while the threshold one
   tap earlier sets it correctly. The band is the wordmark in the serif, caps-
   tracked at `--type-size-400`, over a hairline, on the same content box the
   walk beneath it stands on.
   IT COSTS THE PHONE NOTHING. Below 1024 it is `display:none`: at 390×844 the
   reading area is 775px and §5.1's one-column composition has no room to spend
   on a second statement of a name the threshold has already made. Above the
   rung it pays for itself out of the scroller's own top air — the band and the
   48 beneath it are the 96 §5.2 was already spending on nothing. */
#guidedLayer .gMast{ display:none; grid-row:1; }
#guidedLayer .gScroll{ grid-row:2; }
#guidedLayer .gFoot{ grid-row:3; }
/* THE ANSWER'S NAME — the cloth's name, the make, the tone. GUIDED-4 (29 Aug
   2026) — DATED AMENDMENT, spec §2.1: this is the hierarchy collision the
   all-sans move actually creates, and 600 is what closes it. In sans at 400 the
   name would be (a) one 1.25× size step from body text, which is far too weak
   for "this is the cloth's name", and (b) IDENTICAL to the measurement figure
   (`recordValue`, 20/500) — a cloth's name and a chest measurement drawn the
   same. So the name is 20/600/−0.02em and the figure stays 20/500: parted by
   weight, which is the one channel a record and a name may not share. */
#guidedLayer .g2Name{
  display:block;
  font-family:var(--font-family-sans-stack);
  font-size:var(--type-size-400);
  line-height:var(--type-line-height-400);
  letter-spacing:var(--type-tracking-tight);
  font-weight:var(--type-weight-semibold);
  color:var(--color-ink-primary);
}
#guidedLayer .g2Fact{
  display:block;
  font-size:var(--type-size-200);
  line-height:var(--type-line-height-200);
  color:var(--color-ink-secondary);
  font-variant-numeric:var(--type-figures-default);
}
/* the tailor's own words about an answer, never a claim about other people. It
   is a STATEMENT, not an input: no border, no radius, no box — outside a chip
   it never was one, and inside one there is no longer a chip to sit in. */
#guidedLayer .g2Advice{
  display:block;
  font-size:var(--type-size-100);
  line-height:var(--type-line-height-100);
  color:var(--color-ink-tertiary);
}
/* caps are eyebrows only — one to three words, and never an action (§2.4). */
#guidedLayer .g2Eyebrow{
  display:block;
  font-size:var(--type-size-100);
  line-height:var(--type-line-height-100);
  letter-spacing:var(--type-tracking-caps);
  font-weight:var(--type-weight-semibold);
  text-transform:uppercase;
  color:var(--color-ink-secondary);
}

/* ════════════════════════════════════════════════════════════════════════════
   THE PLATE (§3.2) — one construction, and the whole of our honesty method.
   ════════════════════════════════════════════════════════════════════════════
   A declared box on `fabricSurround.book` into which the photograph is FITTED,
   never FILLED. This is the corridor's close-up mechanism, generalised, and it
   carries three guarantees the builder gets for free and must not defeat:
     1 · the box never exceeds the file's own pixel width — `guided.js` takes
         `min(box, file)` before it writes `--g2-plate-w`;
     2 · the box takes the photograph's aspect and the photograph is never
         cropped to the box — `object-fit:contain` makes that true even where a
         builder gets the arithmetic wrong, and the GROUND takes the difference:
         empty and honest beats furnished and false;
     3 · `--layout-surround-band-cloth` of pure ground on all four sides of any
         cloth plate before any other colour, image or text.
   `background-size:cover` is banned on any element whose face is licensed
   cloth. There is no `background-image` in this file at all. */
#guidedLayer .g2Plate{
  display:grid; place-items:center; overflow:hidden;
  background:var(--color-surface-fabric-surround-book);
  border-radius:var(--radius-none);          /* EVERY fabric image, without exception */
  width:min(100%, var(--g2-plate-w, 100%));
  height:var(--g2-plate-h, auto);
  max-height:52svh;
  margin-inline:auto;
}
#guidedLayer .g2Plate img{
  display:block;
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
}
/* the one exemption, and it is the corridor's own: a plate that runs full-bleed
   to the viewport edge at ≤599 carries the full band above and below and the
   screen edge at its sides. */
#guidedLayer .g2Plate--bleed{
  width:100vw;
  max-width:100vw;
  margin-inline:calc(var(--layout-margin-compact) * -1);
}
/* …and at ≤599 the bleed carries the band WITHOUT taking a pixel off the
   photograph. `box-sizing` is border-box everywhere in this product, so padding
   on a plate whose box is declared from the file's own aspect would shrink the
   picture by 48px in each axis. On the full-bleed plate the room is there for
   the asking: the CONTENT box stays exactly the declared box, the band is added
   around it, and the total is the screen. The photograph is the size it was;
   the ground beside it is now drawn. (§3.2's exemption said "the full band
   above and below and the screen edge at its sides"; a 344px file in a 342px
   content box leaves the sides painted too, which is more than the exemption
   asks and no less honest.) */
@media (max-width:599px){
  #guidedLayer .g2Plate--bleed{
    box-sizing:content-box;
    width:calc(100vw - var(--layout-surround-band-cloth) * 2);
    max-width:calc(100vw - var(--layout-surround-band-cloth) * 2);
    padding:var(--layout-surround-band-cloth);
  }
}
/* ── GUIDED-3 FX2 · 29 August 2026 · THE BAND IS PAINTED, NOT LEFT TRANSPARENT
   ─────────────────────────────────────────────────────────────────────────────
   DATED AMENDMENT (fabric & colour fidelity 2). What stood here was
   `margin-block:var(--layout-surround-band-cloth)` — and a margin paints
   nothing. The fabric judge sampled ONE CSS PIXEL outside the photograph on all
   four sides of the garment moment, the attestation screen, the letter and the
   book grid and read #F7F4EC (the warm page paper, OKLCH C=1.107) at every
   width: the plate's own background IS the achromatic book ground, but the box
   is sized from the file's own aspect, so the painted band measured 0.00px at
   390 and 0.05px at 1280/1440 and not one pixel of ground was ever drawn.
   RULING-002 says the surface directly adjacent to a fabric image must be
   effectively zero chroma, and names this exact test. So the band becomes
   PADDING: the plate's ground is drawn on all four sides before any other
   colour, image or text, and the photograph — `object-fit:contain`, never
   enlarged — takes what is left. §3.2(3), realised. */
/* ── GUIDED-3 FIX WAVE 2 · FABRIC & COLOUR FIDELITY 1, 29 August 2026 ───────
   …AND THE QUALIFIER GOES, BECAUSE THE PLATE THAT NEEDED THE BAND MOST WAS NOT
   IN EITHER BAY. DATED AMENDMENT.
   The rule above reached `.gSlot > .g2Plate` and `.g2PlateBay > .g2Plate`. The
   attestation screen's and the letter's cloth plate is neither: it is
   `.g2Plate.gfin-cloth` inside `.gfin-plateWrap` (guided-finish.js), one level
   deeper than the selector could see. Re-measured by the fabric judge at 390 on
   `commit` and on `letter`: computed `padding:0px`, plate box 342×299 against an
   image of 341.98×298.63 — a painted band of 0.00px on all four sides — and the
   adjacent pixel sampling #F7F4EC = rgb(247,244,236), chroma 11, the warm page
   paper, one CSS px from the photograph. Breakpoint sweep on the same screen:
   390 pad 0 · 599 pad 0 · 600 pad 0 · 768/1023/1280 pad 24 — the ≥768 tier was
   healed by a different rule and the phone was not.
   RULING-002 requires the surface directly adjacent to a fabric image to be
   effectively zero chroma, and names this exact test. So the plate carries the
   band wherever it stands. It is a `.g2Plate` and the band is what a
   `.g2Plate` IS; the two bay qualifiers were an accident of where the first two
   plates happened to live. */
#guidedLayer .gSlot > .g2Plate,
#guidedLayer .g2PlateBay > .g2Plate,
#guidedLayer .g2Plate.gfin-cloth{ padding:var(--layout-surround-band-cloth); }

/* ════════════════════════════════════════════════════════════════════════════
   1 · THE PLATE TILE — the answer, wherever the answer can be photographed.
   ════════════════════════════════════════════════════════════════════════════
   The WHOLE tile is one button. No CTA inside it, no second control, no "See it
   close" row: the photograph is the boundary, so there is no box and no
   card-in-card. Rest is the photograph on ground and the caption on paper —
   no border, no fill, no shadow, no radius. */
#guidedLayer .g2Tile{
  display:block; width:100%;
  padding:0; margin:0;
  background:none; border:0; border-radius:var(--radius-none);
  text-align:left;
  cursor:pointer;
}
#guidedLayer .g2Tile + .g2Tile{ margin-top:var(--space-800); }
/* FLOW-1(m) (30 Aug 2026) · ON THE CLOTH SPREAD THE RACK IS ONE UNIT. The
   hero and its alternatives share one radiogroup — one question, one group —
   so their step is §5.2's WITHIN-unit 12, not the between-units 32 the
   generic tile rule assumes. Measured at 1440×900 with the figure in the
   plinth: the first alternative stood at 730 against a pane cut at 724 — a
   false floor (GUIDED-4/clarity 2's own finding, reopened by the shelf
   recomposition); at 12 the row stands at 710 and the shelf shows its own
   continuation. ≥1024 only — the stacked phone reads tile-by-tile. */
@media (min-width:1024px){
  #guidedLayer .g2ClothSpread .g2Tile + .g2Tile{ margin-top:var(--space-300); }
}
/* ── FLOW-1(m) · 30 August 2026 · ON `need`, THE NAME LEADS THE PHOTOGRAPH ──
   DATED, station-scoped. The clarity judge measured the walk's first question
   at 1440×900: three 759px tiles whose names render at y=919–930 — the
   viewport ends at 900, so the screen asked "What are we making?" over three
   near-identical dark suits and ZERO named answers (at 390, one name of five).
   The name is what the question asks for, so on this station the caption
   stands ABOVE its photograph — `column-reverse` flips the visual order while
   the DOM (and the reader's order, name after picture) stays the engine's
   own. The chosen ring still paints on the caption's leading edge, which is
   now the tile's first painted line. At compact the plate also yields — a
   439px photograph of a suit carries no more of the ANSWER than a 300px one,
   and the five answers cost 2.9 screens of scroll (the reduction judge's own
   measure) before the cap. */
/* FLOW-2 · the need station retired; its tile rules went with it — and the
   block's own brace with them: a stray `}` here made the parser drop the
   NEXT rule, which was `.g2Cap` and V10's reserved leading rule with it. */
/* V10 · THE CAPTION CARRIES THE LEADING RULE, and here is why it is the
   caption and not the button. The rule is drawn on the tile's leading edge in
   every construction that has one — but a plate tile's leading edge is where
   its PHOTOGRAPH begins, and at ≤599 the photograph runs full-bleed past it
   (§3.2's exemption, and the rail's own cells start at x=0): a border on the
   button would be painted UNDER the picture and would not exist. The caption is
   type, and type does not bleed, so the caption's leading edge is the one edge
   of a plate tile that is always on paper and always in the reading column —
   which is also where the mark and the word already stand. The rule is
   RESERVED and transparent at rest, so a state change paints and moves
   nothing, and no ink ever touches the cloth (RULING-002's second case). */
#guidedLayer .g2Cap{
  display:flex; align-items:flex-start; gap:var(--space-300);
  margin-top:var(--space-300);
  border-inline-start:var(--border-width-emphasis) solid transparent;
}
#guidedLayer .g2CapWords{ display:block; min-width:0; }
#guidedLayer .g2CapWords > * + *{ margin-top:var(--space-100); }
/* the 2px hover gutter, RESERVED and transparent at rest, so nothing moves.
   This is the corridor's own phase-tab construction, reused rather than
   invented. Nothing on the photograph changes on hover — a cloth whose
   appearance changes under a pointer is a cloth we have just lied about. */
#guidedLayer .g2Tile::after{
  content:''; display:block;
  height:var(--border-width-emphasis);
  margin-top:var(--space-300);
  background:transparent;
}
@media (hover:hover){
  #guidedLayer .g2Tile:hover::after{ background:var(--color-line-strong); }
}
/* SELECTED — MOB-B3 verbatim, all three parts, and no fourth: the 2px ink rule
   on the LEADING EDGE of the tile's caption, the 10px mark in the caption's
   reserved leading gutter, and the word. Never a fill, never a tint, never
   colour. Selection is legible in a grayscale screenshot or it is not legible.
   The rule is UN-ANIMATED: a selection ring that fades in reads as a decision
   the machine is still thinking about.
   GUIDED-3 · V10 (28 Aug 2026) — AMENDED, AND WHAT IT REPLACES. This was a
   four-sided `outline` around the photograph. The visual lead measured it as
   the single heaviest object on every screen it stood on — heavier than the
   price, heavier than the cloth, heavier than the question — and on the cloth
   screen's full-bleed hero its left and right strokes fell off the viewport, so
   all that rendered was TWO FULL-WIDTH BLACK BARS with no meaning (V12,
   `bars.mjs`, and visible in every screenshot of that screen). A rule on one
   edge cannot degrade that way, and no ink now touches the cloth at all. */
#guidedLayer .g2Tile[aria-checked=true] > .g2Cap,
#guidedLayer .g2Tile[aria-pressed=true] > .g2Cap{
  border-inline-start-color:var(--color-line-strong);
}

/* ════════════════════════════════════════════════════════════════════════════
   2 · THE WORD ROW — the answer where no honest photograph exists.
   ════════════════════════════════════════════════════════════════════════════
   For the weather, a tone, a date, a name. NOT a box: a hairline above each row
   and below the last, no left/right border, no fill, no radius. This is an
   editorial contents page, and at 20px serif it is the calmest screen in the
   walk. A screen with no honest photograph gets no photograph — we do not dress
   the weather question with a stock sky, a gradient, or a suit that has nothing
   to do with the answer (§3.3, rider 3). */
#guidedLayer .g2Row{
  display:flex; align-items:flex-start; gap:var(--space-300);
  width:100%;
  /* 72 — §4.2's own figure, said on the space scale rather than as a number. */
  min-height:calc(var(--space-1200) + var(--space-600));
  padding:var(--space-400) 0;
  margin:0;
  text-align:left;
  background:none;
  border:0;
  border-top:var(--border-width-hairline) solid var(--color-line-hairline);
  /* V10 · the leading rule, RESERVED and transparent at rest. It stands INSIDE
     the row's own box so the row's hairline and its rule begin at the same x —
     a rule that hung outside would overhang the content it divides, which is
     the misregistration V12 measured on the calendar. The 2px it costs the
     words is the rule's own width and every row pays it, selected or not, so
     nothing moves when a state changes and the answers keep one left edge. */
  border-inline-start:var(--border-width-emphasis) solid transparent;
  border-radius:var(--radius-none);
  cursor:pointer;
}
/* ── FLOW-1(m) · 30 August 2026 · THE SEVENTH OCCASION SURFACES AT COMPACT ──
   DATED AMENDMENT to §4.2's 72px row on this one station at ≤599. The clarity
   judge measured the occasion list at 390×844: the seventh row (Black tie —
   the occasion for the dinner suit the station before offers) fell entirely
   past the clip at 753, and its divider landed exactly ON the cut, so the
   list read as finished at six. The rows tighten one space step (still ≥44px
   targets by an easy margin), which brings the seventh row's title into the
   frame — a half-visible row being the only honest scroll cue. */
@media (max-width:599px){
  /* FLOW-2 · the occasion station retired with its row rule. */
}
#guidedLayer .g2Row:last-child{
  border-bottom:var(--border-width-hairline) solid var(--color-line-hairline);
}
/* the tone rows under the garment moment are the same row at §9.5's height. */
#guidedLayer .g2Row--tight{
  min-height:calc(var(--space-1600) - var(--space-200));   /* 56 — §9.5 */
  padding:var(--space-300) 0;
}
#guidedLayer .g2RowWords{ display:block; flex:1 1 auto; min-width:0; }
#guidedLayer .g2RowWords > * + *{ margin-top:var(--space-100); }
@media (hover:hover){
  #guidedLayer .g2Row:hover{ border-top-color:var(--color-line-strong); }
  #guidedLayer .g2Row:hover + .g2Row{ border-top-color:var(--color-line-strong); }
  #guidedLayer .g2Row:last-child:hover{ border-bottom-color:var(--color-line-strong); }
}
/* selected: MOB-B3 again — one grammar, two placements, each with its reason.
   GUIDED-3 · V10 (28 Aug 2026) — AMENDED. This was `outline: 2px solid ink;
   outline-offset:-1px`, which CSS draws on four sides: the outlined box this
   round retired, redrawn in ink around the answer. It is the leading edge and
   nothing else now. */
#guidedLayer .g2Row[aria-checked=true],
#guidedLayer .g2Row[aria-pressed=true]{
  border-inline-start-color:var(--color-line-strong);
}

/* ── the mark and the word, one grammar for both answer constructions ───────
   The gutter is RESERVED at rest and the word is in the DOM at rest, so a state
   change flips one attribute and moves nothing. The mark paints in 90ms
   (`--motion-duration-acknowledge`) and that is the entire acknowledgement: no
   scale, no pulse, no fill sweep, no ripple. */
/* V10 / R-G3-2 · THE ONE PLACE THE HOUSE SPENDS ITS COLOUR. The mark takes
   `--color-accent-house` (#6E1F2E, 10.06:1 on the paper) — a mark, not a
   surface, so RULING-002 is untouched and no ground beside cloth moves. It is
   ADDITIVE and never load-bearing: the 2px rule and the word both survive
   desaturation, so BM13's grayscale test passes without the hue. The fallback
   is the ink, so a layer drawn without the page's token loses the colour and
   keeps the state. */
#guidedLayer .g2Mark{
  flex:none;
  width:var(--state-selected-mark-size);
  height:var(--state-selected-mark-size);
  margin-top:var(--space-100);
  background:var(--color-accent-house, var(--state-selected-mark-color));
  opacity:0;
  transition:opacity var(--motion-duration-acknowledge) var(--motion-easing-settle);
}
#guidedLayer [aria-checked=true] > .g2Mark,
#guidedLayer [aria-pressed=true] > .g2Mark,
#guidedLayer [aria-checked=true] .g2Cap > .g2Mark,
#guidedLayer [aria-pressed=true] .g2Cap > .g2Mark,
/* …and the view control's, which holds its mark inside the box that carries
   the rule, so the rule is the height of the line and not of the target. */
#guidedLayer [aria-pressed=true] .g2ViewIn > .g2Mark,
/* T6 · …and the one place the mark is not a selection: the house's own
   acknowledgement that it has taken a note. Same mark, same 10px, same accent —
   a state the client caused, said in the grammar he has already learned. */
#guidedLayer .g2Saved > .g2Mark{ opacity:1; }
/* `.g2Word` is the same span under the name a step file gave it while the wave
   was in flight; one grammar, so both names take it.
   GUIDED-3 · V21 (28 Aug 2026) — THE WORD IS AN EYEBROW, ON ITS OWN LINE.
   It was `display:inline` with a ` · ` before it, so the caption read
   "Half canvas · Chosen" — the serif name and a sans state spliced onto one
   baseline, at two sizes, in two faces. §2.2 gives the answer's NAME the serif
   at `--type-size-400` and a state the EYEBROW role (§2.4: caps, 12px, one to
   three words, never an action). So it takes the eyebrow's own declarations,
   below the name and above the fact, and the separator goes with the splice. */
#guidedLayer .g2Chosen{ display:none; }
#guidedLayer [aria-checked=true] .g2Chosen,
#guidedLayer [aria-pressed=true] .g2Chosen,
#guidedLayer [aria-current=true] .g2Chosen,
#guidedLayer [aria-checked=true] .g2Word,
#guidedLayer [aria-pressed=true] .g2Word{
  display:block;
  margin-top:var(--space-100);
  font-family:var(--font-family-sans-stack);
  font-size:var(--type-size-100);
  line-height:var(--type-line-height-100);
  letter-spacing:var(--type-tracking-caps);
  text-transform:uppercase;
  font-weight:var(--type-weight-semibold);
  color:var(--color-ink-primary);
}

/* ════════════════════════════════════════════════════════════════════════════
   3 · THE PRIMARY — one construction, one per screen, never two.
   ════════════════════════════════════════════════════════════════════════════
   The rack's `.place` — 60px tall with its own padding and its own edge —
   collapses into this, closing the last of the ledger's "two primary
   constructions" finding. AND ON A SINGLE-SELECT ASK THERE IS NO PRIMARY AT
   ALL: the tile is the commit. A primary appears only where the screen is a
   multi-select, a continue, or a commitment. */
#guidedLayer .g2Primary{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--control-button-height);
  padding:var(--space-400) var(--control-button-padding-x);
  background:var(--control-button-primary-fill);
  color:var(--control-button-primary-label);
  border:0; border-radius:var(--control-button-radius);
  font-family:var(--font-family-sans-stack);
  font-size:var(--type-size-300);
  line-height:var(--type-line-height-300);
  font-weight:var(--type-weight-semibold);
  letter-spacing:var(--type-tracking-normal);   /* sentence case, never caps */
  width:100%;
  cursor:pointer;
}
#guidedLayer .g2Primary:hover{ background:var(--control-button-primary-fill-hover); }
#guidedLayer .g2Primary:active{ background:var(--control-button-primary-fill-pressed); }
/* THE ACT ROW — a step that keeps its act in flow (§9.8's qualifying sentence
   immediately above the primary it qualifies) rather than in the pinned foot.
   §5.2's second figure is not optional here: a MINIMUM of 96 beneath the last
   answer, "a screen that ends flush against its chrome reads as a form that ran
   out of room". It is padding and not a margin on purpose — while a stage is up
   the scroller gives away its own block padding (guided-see.js), and a margin on
   the last child of a scroller is the one box a scroll height is entitled to
   forget. Measured before this rule, on the screen that buys: belowLast 0. */
#guidedLayer .g2ActRow{
  margin-top:var(--space-800);
  padding-bottom:var(--space-2400);
}
/* …AND THE SAME FLOOR FOR THE SCREEN THAT BUYS, whose act now stands in the
   foot. While a stage is up the scroller gives away its own block padding so
   the photograph can run to the screen edge (guided-see.js) — which is right at
   the TOP of the screen and has nothing to say about the bottom. The garment
   moment's own card pays the 96 itself; the record's last band did not, and the
   record measured belowLast 0. So the engine's frame states it for the one step
   that ends on words: exactly 96, never twice, whoever else writes it. */
#guidedLayer .gStep[data-step="commit"] > .gSlot > :last-child{
  padding-bottom:var(--space-2400);
}

/* ════════════════════════════════════════════════════════════════════════════
   4 · THE DOOR ROW — the whole book, the whole workshop, or a route out.
   ════════════════════════════════════════════════════════════════════════════
   Verbatim the corridor's `.bookdoor`. It replaces BOTH of GUIDED-1's door
   dialects — the caps 12/1.2px `.gask-doorbtn` / `.gfin-doorbtn` and the
   sentence-16 `gQuiet gsee-other` — closing the "two door languages" nit.

   AND AT ≤599 IT STACKS.  Three columns in 342px is not a row, it is three
   columns of wrapping: measured at 390 the three doors on the record ran
   78 / 78 / 138 against the 56 the construction declares, and read as
   "Ask Paul to measure / you again" beside "a demonstration / calendar". So
   under the rung the door is a small grid — the label on its own line, its fact
   beneath it, the arrow trailing the pair — and above the rung it is the row it
   was, unchanged. Same parts, same order, same one construction. */
#guidedLayer .g2Doors{ margin-top:var(--space-800); }
#guidedLayer .g2Door{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;       /* the words · the arrow */
  align-items:center;
  column-gap:var(--space-300);
  row-gap:var(--space-100);
  width:100%;
  min-height:calc(var(--space-1600) - var(--space-200));   /* 56 — §4.4 */
  padding:var(--space-300) 0;
  background:none;
  border:0;
  border-top:var(--border-width-hairline) solid var(--color-line-hairline);
  border-bottom:var(--border-width-hairline) solid var(--color-line-hairline);
  border-radius:var(--radius-none);
  text-align:left;
  font-size:var(--type-size-300);
  line-height:var(--type-line-height-300);
  color:var(--color-ink-primary);
  cursor:pointer;
}
#guidedLayer .g2Door + .g2Door{ border-top:0; }
#guidedLayer .g2DoorLabel{ flex:0 1 auto; min-width:0; grid-column:1; grid-row:1; }
#guidedLayer .g2DoorFact{
  flex:1 1 auto; min-width:0;
  grid-column:1; grid-row:2;
  font-size:var(--type-size-200);
  line-height:var(--type-line-height-200);
  color:var(--color-ink-secondary);
  font-variant-numeric:var(--type-figures-default);
}
#guidedLayer .g2DoorArrow{
  flex:none; color:var(--color-ink-secondary);
  grid-column:-2; grid-row:1 / span 2; align-self:center;
}
/* a door that shows what is behind it keeps its photograph in a leading column —
   the plate leads, the two words lines stack beside it, the arrow trails. The
   track is the plate's OWN declared box and not `auto`: an `auto` track asks a
   photograph for its max-content width, and a photograph answers with the file's
   pixels — measured, that gave the shirts door a 224px column and left its words
   80px to wrap in, four lines deep. */
#guidedLayer .g2Door:has(> .g2Plate){
  grid-template-columns:min-content minmax(0,1fr) auto;
}
#guidedLayer .g2Door > .g2Plate{
  grid-column:1; grid-row:1 / span 2;
  width:var(--g2-plate-w, auto);
}
#guidedLayer .g2Door:has(> .g2Plate) .g2DoorLabel,
#guidedLayer .g2Door:has(> .g2Plate) .g2DoorFact{ grid-column:2; }
/* AND THE FACT RANGES WITH THE LABEL IT BELONGS TO. Two step files range their
   door's fact to the far edge (`.gfin-shirtsdoor`, `.gsee-clothdoor`), which is
   right in a ROW — the fact is the far end of a line. Stacked under its own
   label it is not the far end of anything, and a right-ranged second line under
   a left-ranged first one reads as two unrelated things. This is the same 600
   rung as everywhere else in this file, stated from below it, because it exists
   only to undo a row's alignment where there is no row. */
@media (max-width:599px){
  #guidedLayer .g2DoorFact{ text-align:left; }
}
@media (hover:hover){
  #guidedLayer .g2Door:hover{ border-color:var(--color-line-strong); }
}

/* ════════════════════════════════════════════════════════════════════════════
   5 · THE QUIET LINE — Back, the escape, "Ask for a free swatch".
   ════════════════════════════════════════════════════════════════════════════
   ONE size, `--type-size-200`, everywhere including both lines of the foot: the
   16px Back beside the 14px escape was "two quiet sizes in one row" and it ends
   here. A word, underlined, with a real target around it. */
#guidedLayer .g2Quiet{
  display:inline-flex; align-items:center;
  min-height:var(--layout-target-min);
  padding:0;
  background:none; border:0;
  color:var(--color-ink-secondary);
  font-family:var(--font-family-sans-stack);
  font-size:var(--type-size-200);
  line-height:var(--type-line-height-200);
  letter-spacing:var(--type-tracking-normal);
  font-weight:var(--type-weight-regular);
  text-align:left;
  text-decoration:underline;
  text-decoration-color:var(--type-underline-color);
  text-decoration-thickness:var(--type-underline-thickness);
  text-underline-offset:var(--type-underline-offset);
  cursor:pointer;
}
#guidedLayer .g2Quiet:hover{
  color:var(--color-ink-primary);
  text-decoration-color:var(--type-underline-color-hover);
}

/* ── V14 / BM12 · A VIEW CONTROL IS NOT AN ANSWER AND IT IS NOT A LINK ─────
   GUIDED-3 · 28 August 2026. The narrowing row on `looks` and the facet strip
   on `cloth` are the same act — they re-order what is already on the screen and
   commit nothing — and they took the quiet line's declarations whole, which
   dressed them as a row of underlined links: "■ All · 7 · Showing" read as
   three links and a status word. BM12 asks for view controls STRUCTURALLY
   DISTINCT from answers, and an underline is this layer's mark for "this goes
   somewhere", which a view control does not.
   So the underline goes. What is left is a rail of quiet sans words, each
   carrying its own live count, and the house's own selected grammar on the one
   in force: the 2px leading rule (reserved, so nothing moves), the 10px accent
   mark, and the word — which on a view is "Showing", and which is spoken to
   assistive technology and drawn to nobody, because the rule and the mark have
   already said it to the eye (V14: "Showing leaves the chip's label").
   The pointer still gets its affordance: on a device with hover, the underline
   comes back under the cursor and nowhere else. */
#guidedLayer .g2View{ text-decoration:none; }
#guidedLayer .g2ViewIn{
  display:inline-flex; align-items:center; gap:var(--space-200);
  padding-inline-start:var(--space-200);
  border-inline-start:var(--border-width-emphasis) solid transparent;
}
#guidedLayer .g2View[aria-pressed=true] .g2ViewIn{
  border-inline-start-color:var(--color-line-strong);
}
#guidedLayer .g2View[aria-pressed=true]{
  color:var(--color-ink-primary);
  font-weight:var(--type-weight-medium);
}
@media (hover:hover){
  #guidedLayer .g2View:hover{ text-decoration:underline; }
}
/* the word is the third part of MOB-B3 and it is still said — to the screen
   reader, in the chip's own accessible name and in the DOM, and not a second
   time in ink beside a mark that has just said it. */
#guidedLayer .g2View .g2Chosen{ display:none; }
#guidedLayer .g2View[aria-pressed=true] .g2Chosen{
  display:block;
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* ── one scroll-snap container (flow §7.4) ─────────────────────────────────
   Not a sixth construction: a container, holding tiles. Cards in DOM order
   reached by Tab — a rail is a list of things, not a radiogroup. */
#guidedLayer .g2Rail{
  display:flex; gap:var(--space-800);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  /* V20 · NO SECOND STEP HERE. The step files' own floor already gives every
     unit in a step body `--space-800` of air above it; a margin of its own on
     top of that made the gap above and below the rail 44 — not one of §5.2's
     three figures, and the most visible off-scale gap on the first screen. */
  margin-block:0;
}
#guidedLayer .g2Rail::-webkit-scrollbar{ display:none; }
#guidedLayer .g2RailCell{ flex:none; scroll-snap-align:start; }
#guidedLayer .g2RailCell .g2Tile + .g2Tile{ margin-top:0; }
/* STYLIST-1 FIX WAVE (5 Sept 2026) · B6 · AT ≤599 THE LOOKS STAND IN A COLUMN.
   Measured at 390×844 before: this container held 2,548 px of scroll in a
   390 px viewport — seven cards one to a screen, 21 px of the next photograph
   as the only cue, and only "Back" in the foot. A rail is the construction for
   a bay a thumb flicks along; on one column the honest list is the list, read
   down, and the layer's own scroller carries it. Scoped to the looks step: the
   review room's rail of saved looks is a shelf of things already taken, and it
   keeps the row. The gap is the rail's own 32, now the step between cards. */
@media (max-width:599px){
  #guidedLayer .gStep[data-step="looks"] .g2Rail{
    flex-direction:column; overflow:visible; scroll-snap-type:none;
  }
}

/* ── the sheets — offers, never gates (flow §5) ────────────────────────────
   A full-screen surface over the layer with one heading, one act, and a close
   that returns the client exactly where he was. It is a surface, not a step: it
   is in no walk, it appears in no line, and it costs no tap on the default
   path. */
#guidedLayer .g2Sheet{
  /* FLOW-2 · the sheet owns the whole field, plinth included: z 5 outranks the
     foot's own 4, so no figure and no act stand under an open room (build
     concept §3.6 — "while a sheet is open the plinth is not rendered"). */
  position:absolute; inset:0; z-index:5;
  background:var(--color-surface-page);
  overflow-y:auto; overscroll-behavior-y:contain;
  padding:0 var(--layout-margin-compact) var(--space-1200);
}
#guidedLayer .g2SheetIn{
  width:100%;
  max-width:var(--layout-max-width-ledger);
  margin-inline:auto;
}
/* the sheet's head: the name of the room and the way out, one row, sticky —
   the close is in view at every scroll position. */
#guidedLayer .g2SheetTop{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-400);
  background:var(--color-surface-page);
  padding-block:var(--space-800) var(--space-300);
  border-block-end:1px solid var(--color-line-hairline);
  margin-block-end:var(--space-600);
}
#guidedLayer .g2SheetTop .gQ{ margin:0; }
#guidedLayer .g2SheetClose{ flex:0 0 auto; white-space:nowrap; }

/* ── the stage's own state, and the one thing this file says about it ──────
   `body.gsee-stage` is the ENGINE's class now (flow §6): it is added and
   removed from `step.stage`, and the geometry that hangs off it — the hole, the
   fit, the viewer's liveness — stays in guided-see.js, which is good at it.
   The one rule that has to live HERE is this: while the stage is up,
   guided-see's own block takes pointer events off the layer so the client can
   drag the garment through it, and re-enables them on a NAMED LIST of classes.
   That list was written when the layer's controls were `.gChip` and
   `.gsee-card`; the five constructions did not exist. So the layer states, in
   the file that owns the constructions, that its own controls are pressable —
   which is true whichever file is asked, and costs nothing the day guided-see
   stops taking the events at all. */
body.guided.gsee-stage #guidedLayer .gbSet,
body.guided.gsee-stage #guidedLayer .gbPanel,
body.guided.gsee-stage #guidedLayer .gbCol,
body.guided.gsee-stage #guidedLayer .g2Tile,
body.guided.gsee-stage #guidedLayer .g2Row,
body.guided.gsee-stage #guidedLayer .g2Primary,
body.guided.gsee-stage #guidedLayer .g2Door,
body.guided.gsee-stage #guidedLayer .g2Quiet,
body.guided.gsee-stage #guidedLayer .g2ActRow,
body.guided.gsee-stage #guidedLayer .g2Sheet,
body.guided.gsee-stage #guidedLayer .gSwatchLine{ pointer-events:auto; }

/* ── the colour statement and the free swatch, as one unit ─────────────────
   DOMAIN LAW B: every cloth judgement surface carries both, once. */
#guidedLayer .gSwatchLine{
  max-width:var(--layout-measure-prose);
  margin:var(--space-800) 0 0;
  font-size:var(--type-size-200);
  line-height:var(--type-line-height-200);
  color:var(--color-ink-secondary);
}
#guidedLayer .gSaid{ display:block; margin-bottom:var(--space-200); }
#guidedLayer .gRec{ display:block; color:var(--color-ink-primary); }
#guidedLayer .gAskLede{
  font-size:var(--type-size-200); line-height:var(--type-line-height-200);
  color:var(--color-ink-secondary); margin:0 0 var(--space-300);
}
#guidedLayer .gField{
  display:block; margin-bottom:var(--space-300);
  font-size:var(--type-size-200); line-height:var(--type-line-height-200);
  color:var(--color-ink-secondary);
}
/* ── THE FIELD'S OWN VISIBLE LABEL ─────────────────────────────────────────
   A field whose only label is off the screen is a box a sighted client cannot
   name, and at the moment of commitment the walk had two of them: `#ctName` and
   `#ctEmail` measured 1×1 with no placeholder (clarity B3). The house's carrier
   sentence stays — it is the voice — and each field also carries its own quiet
   label above it, in the EYEBROW role the ladder already owns (§2.4: caps are
   eyebrows, one to three words, never an action). Not a new type role and not a
   sixth construction: the same declarations as `.g2Eyebrow`, on a real `<label>`
   that keeps its `for=`, so the accessible name is unchanged and the visible one
   finally exists. */
#guidedLayer .g2FieldLabel{
  display:block;
  font-size:var(--type-size-100);
  line-height:var(--type-line-height-100);
  letter-spacing:var(--type-tracking-caps);
  font-weight:var(--type-weight-semibold);
  text-transform:uppercase;
  color:var(--color-ink-secondary);
}
#guidedLayer .gField input,
#guidedLayer .g2FieldLabel + input,
#guidedLayer .g2FieldLabel + select{
  display:block; width:100%;
  margin-top:var(--control-input-label-gap);
  height:var(--control-input-height);
  padding-inline:var(--control-input-padding-x);
  background:var(--control-input-background);
  border:var(--control-input-border-width) solid var(--control-input-border-color);
  /* GUIDED-4 (29 Aug 2026) — DATED AMENDMENT, spec §3.1. What stood here was
     `--radius-none` with the comment "nothing in this layer is rounded", and
     that sentence is now false by ruling: `radius.control` moves 2→10 and the
     product's rule becomes THE CONTROLS ROUND, THE CLOTH DOES NOT. A writing
     line is a control, so it takes the control's own token — which also means
     this file stops hard-coding a radius the token set is entitled to decide.
     Every plate, tile, row, door and photograph in this file keeps
     `--radius-none`, and that is not an oversight: a rounded swatch crops real
     cloth away and re-frames a material as a UI object. */
  border-radius:var(--control-input-radius);
}
#guidedLayer .gField input:focus,
#guidedLayer .g2FieldLabel + input:focus{ border-color:var(--control-input-border-color-focus); }
#guidedLayer .gProblem{
  min-height:var(--type-line-height-200);
  font-size:var(--type-size-200); line-height:var(--type-line-height-200);
  color:var(--color-alert-ink);
  margin:0 0 var(--space-300);
}
#guidedLayer .gAsk .g2Quiet{ margin-top:var(--space-300); }

/* ── the foot: the figure, then the ways out ───────────────────────────────
   The running figure is pinned here — a docket, never a meter — with what it
   covers and the basis it stands on, which are two fields of the same `fig()`
   call the corridor's own docket uses. Back and the escape sit beneath it,
   where the thumb is on a 390 screen, and both are quiet lines at one size. */
#guidedLayer .gFoot{
  border-top:var(--border-width-hairline) solid var(--color-line-hairline);
  background:var(--color-surface-page);
  padding:var(--space-300) var(--layout-margin-compact)
          max(var(--space-300), env(safe-area-inset-bottom));
}
#guidedLayer .gFoot > *{
  width:100%;
  max-width:var(--layout-max-width-ledger);
  margin-inline:auto;
}
/* ── J2 P13 · 6 September 2026 · THE PLINTH DECLARES ITS EDGE ONLY OVER SOMETHING
   The settled band's own law (R-G3-1(b), above: the rule is on the band and
   appears only while it stands over something), read downward. The engine
   writes `data-more` on the layer while the scroller has more beneath the
   plinth; with the last line in view the hairline goes and the plinth stands on
   paper as the band above does. Measured before: at 1440×900 the column ended
   flush at the pane with two acts and the escape below it and nothing on the
   screen said the pane scrolled — and nothing may peek (the fold sits in a gap
   by law), so the band is the cue. */
#guidedLayer:not([data-more]) .gFoot{ border-top-color:transparent; }
/* ── V21 · THE FIGURE CONSTRUCTION, AND IT IS THE HOUSE'S OWN ──────────────
   GUIDED-3 · 28 August 2026. The plinth printed "$950 for the cloth and the
   making" on ONE baseline — a 20px medium figure, then a 14px regular phrase,
   then the basis — which is the mixed-role splice V21 measured, on the line
   that matters most. The three parts are three ROLES and §2.2 gives each its
   own line, at the size the ladder gives it.
   It is not invented here: this is the threshold's `.thfigure` construction,
   declaration for declaration (modern.html:1521–1526) — the figure at
   `--type-size-500`, what it covers at `--type-size-200`, the basis beneath at
   `--type-size-100`. The door and the walk now print money the same way, which
   is the whole of why the plinth may print it at all: one `fig()` call, one
   construction, so the wizard's foot cannot say a thing the workshop's docket
   would say differently. */
#guidedLayer .gMoney{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:0;
  margin:0 0 var(--space-300);          /* V20 · 8 is not one of the three steps */
}
/* GUIDED-4 (29 Aug 2026) — one declaration added, spec §2.2/§2.4: the PRICE
   TOTAL is 28/600/−0.02em, and `tracking.tight` is the token that says −0.02em
   now. Without it a 28px figure would be the one thing on the ladder set at its
   size with the tracking of a 16px line — and §2.1 DECLARES that the price
   total and the section title resolve to one spec, which they cannot do if one
   of them tracks and the other does not. Nothing else here moves. */
#guidedLayer .gFig{
  flex-basis:100%;
  font-size:var(--type-size-500);
  line-height:var(--type-line-height-500);
  letter-spacing:var(--type-tracking-tight);
  font-weight:var(--type-weight-semibold);
  font-variant-numeric:var(--type-figures-default);
  color:var(--color-ink-primary);
}
#guidedLayer .gCovers{
  flex-basis:100%;
  font-size:var(--type-size-200); line-height:var(--type-line-height-200);
  color:var(--color-ink-secondary);
}
#guidedLayer .gBasis,
#guidedLayer .gMoney--nofigure{
  flex-basis:100%;
  font-size:var(--type-size-100); line-height:var(--type-line-height-100);
  color:var(--color-ink-tertiary);
  margin:var(--space-100) 0 0;
}
/* ── THE ACT, IN THE FOOT (flow §4.5i, §7.3) ───────────────────────────────
   One full-width ink primary, above the ways row and below the money row. The
   foot is a GRID ROW OF THE LAYER, not a floating overlay — the house prints no
   floating bars — so the act is reachable from anywhere on the screen without
   inventing furniture, and the screen that buys stops being the one screen in
   the walk with nothing to press in the reading area. Above the rung it takes
   its own width, like every other primary in the layer. */
#guidedLayer .gAct{ margin:0 0 var(--space-300); }
#guidedLayer .gFoot.has-act{ padding-top:var(--space-400); }
/* ── GUIDED-3 FX2 · 29 August 2026 · THE ACT STANDS BESIDE THE WAY BACK ─────
   DATED AMENDMENT, at the phone width only, and it is arithmetic before it is
   taste. Purpose clarity 1 moved the garment moment's forward act into this
   plinth — the judge's own words: "Put the forward act in `.gFoot` beside the
   figure, as the commit screen and the corridor plinth already do." Stacked,
   that plinth measures 228px at 390×844: 27% of the screen, and every pixel of
   it comes out of the reading area, which comes out of the PICTURE (the
   reservation in guided-see.js is subtractive). Measured: the stage fell from
   523 to 449 and R-G3-6/G11's painted garment from 42.3% of its stage to 37.4%
   — under the 40% floor. Two laws, one screen, and neither may be spent.
   The act and the one quiet Back are one row: the primary at its own width on
   the leading edge, the way back beside it, in the DOM's own order so the caret
   and the eye read the same sequence. The money block keeps the full width
   above them, because its basis sentence is a sentence and a 140px column turns
   it into four lines. Measured after: the plinth is ~155, the picture is back at
   §9.5's own `min(62svh, 560px)`, the first-use line is whole on all seven
   looks, and G11 is 43%.
   ≥600 KEEPS THE STACK, deliberately: V7's two-edge law lives there (the figure
   and the act range with the words bay, Back with the plate bay), the reading
   area is not squeezed, and §5.1 licenses one composition per width. */
@media (max-width:599px){
  #guidedLayer .gFoot.has-act{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    column-gap:var(--space-800);
    row-gap:var(--space-300);
    align-items:center;
    padding-top:var(--space-300);
  }
  /* ── GUIDED-3 FIX WAVE 2 · PURPOSE CLARITY 2 + CRAFT 3, 29 August 2026 ────
     ONLY THE ACT AND THE WAY BACK SHARE A ROW. EVERYTHING ELSE THE PLINTH
     CARRIES SPANS IT. DATED AMENDMENT, and it is a regression this grid caused.
     Measured at 390×844 on `commit`, before and after a blocked press: BEFORE —
     plinth 83 tall, Back at left 299 / right 343, inside the viewport. AFTER —
     the outstanding sentence lifts into the plinth (the correct fix for clarity
     7), the plinth goes 83 → 153, and Back lands at left 366 / right 410 with
     `innerWidth` 390 and `document.documentElement.scrollWidth` 390: 20 of its
     44px unreachable by any scroll, rendering as "Bac". Reproduced in two
     states (the colour block and the email block) and at 360 / 390 / 414, +20px
     every time.
     THE CAUSE IS ARITHMETIC AND IT IS HERE. `.gfin-hold` is auto-placed into
     column 1 of this two-column grid, and column 1 is `auto` — so it sized to
     the SENTENCE (310px) instead of to the button (219px), `minmax(0,1fr)`
     collapsed column 2 to 0, and `justify-content:flex-end` pushed the quiet
     Back off the right edge. The money block never did this because it declares
     `1 / -1`.
     So the plinth states the rule rather than listing the exceptions: anything
     it carries takes the whole row, and the two members of the action row say
     so by name. A row that says "you cannot go on" may not take the way back
     off the screen. */
  #guidedLayer .gFoot.has-act > *{ grid-column:1 / -1; }
  #guidedLayer .gFoot.has-act > .gMoneyWrap{ grid-column:1 / -1; }
  #guidedLayer .gFoot.has-act > .gMoneyWrap .gMoney{ margin-bottom:0; }
  #guidedLayer .gFoot.has-act > .gAct{ grid-column:1; margin:0; width:auto; }
  #guidedLayer .gFoot.has-act > .gAct .g2Primary{ width:auto; }
  #guidedLayer .gFoot.has-act > .gWays{
    grid-column:2; width:auto; justify-content:flex-end;
    /* …and belt and braces: a primary whose label grows past the row's budget
       wraps the quiet line under it rather than off the screen. */
    min-width:0;
  }
}
/* ── FLOW-1(m) · 30 August 2026 · THE DESKTOP PLINTH JOINS THE PAGE'S FRAME ──
   DATED AMENDMENT, superseding FX2's "≥600 KEEPS THE STACK" clause above. That
   clause kept the stack for V7's two-edge law — the figure and the act ranging
   with the words bay, Back with the plate bay — and FLOW-1 RETIRED that
   composition: on `count`, `wear`, `occasion` and `identify` there is no plate
   bay and no words bay, and on `form` the bays moved. The devil's advocate
   measured what was left: the forward act was the ONLY element in the desktop
   walk off the page's frame line — x=48 against a content frame at x=128
   (1024–1440) and x=368 (1920), a 320px orphan at the widest width — because
   `.gAct`'s own margin shorthand (line ~1236) stomps the `.gFoot > *`
   `margin-inline:auto` that already centres Back and the money block. On the
   sign-in screen the button sat 312px left and 372px below the field it
   submits.
   THE FIX IS THE PHONE'S OWN GRAMMAR, EXTENDED — which is M2's literal text
   ("the phone plinth grammar extends to desktop"): act and the one quiet Back
   share a row, everything else the plinth carries spans it, and the row stands
   ON the frame line — the padding resolves to the same centred ledger column
   `.gFoot > *` already gives the money block, so the act ranges with the
   content at every width and grows with it at 1920. `.gfin-hold` spans the
   row by the same `> *` rule that saved Back from the "Bac" clipping at 390. */
/* …and the row stands on the WALK'S OWN CONTENT BOX, not on a ledger of its
   own: `--g2-content` is §5.1's box, stated once on the layer, and the plinth
   inset machinery below (`--g2-plinth-inset` on `.gMoneyWrap`/`.gAct`) still
   ranges the figure and the act with the words bay wherever a spread declares
   one — V7's law ("the plinth never invents an edge of its own") holds under
   the new grammar: the act stands on the content box's edge or the words
   bay's; Back rides the act's own row, ranged to the content box's other
   edge. */
@media (min-width:600px){
  #guidedLayer .gFoot.has-act{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    column-gap:var(--space-800);
    row-gap:var(--space-300);
    align-items:center;
    padding-inline:max(var(--layout-margin-regular, var(--layout-margin-compact)),
                       calc((100% - var(--g2-content, 100%)) / 2));
  }
  #guidedLayer .gFoot.has-act > *{ grid-column:1 / -1; width:100%; max-width:none; margin-inline:0; }
  #guidedLayer .gFoot.has-act > .gMoneyWrap .gMoney{ margin-bottom:0; }
  /* the words-bay inset was the OLD stack's way of ranging the act — under
     the one-row grammar the act stands on the content edge itself (V7 permits
     either edge; the figure above keeps its inset and its bay). */
  #guidedLayer .gFoot.has-act > .gAct{ grid-column:1; margin:0; width:auto; padding-inline-start:0; }
  #guidedLayer .gFoot.has-act > .gAct .g2Primary{ width:auto; }
  #guidedLayer .gFoot.has-act > .gWays{ grid-column:2; width:auto; justify-content:flex-end; min-width:0; }
}
#guidedLayer .gWays{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--space-300) var(--space-800);        /* V20 · the three steps */
}
/* ── V9 · THE ESCAPE IS NOT CHROME ─────────────────────────────────────────
   GUIDED-3 · 28 August 2026. The plinth used to hold the figure, its basis and
   TWO underlined links of identical weight — Back, and "Browse the full
   workshop instead" — while the act stood below the fold inside the scroller.
   Three greys in a row have no hierarchy and the longest string wins the eye,
   which was the exit. The plinth's hierarchy is now the one V9 states: the
   figure · its basis · THE ACT · one back, and nothing else. The workshop is
   still always available and it is still one press away — it stands ONCE, at
   the bottom of the scroller, in §4.4's quiet construction, which is where the
   direction puts a way sideways that is not the answer to this screen.
   `.gOut` keeps its class and its `data-g="exit"` so nothing that knows the
   escape by name has to learn a new one. */
#guidedLayer .g2Escape{
  /* §5.2's middle step, not its largest: on the screens that carry a stage the
     card above already pays a bottom band of its own, and 48 on top of it
     measured 188px of paper between the last thing said and the way out. */
  margin-top:var(--space-800);
}
/* STYLE-1 (13 Sept 2026, law 38(e)) · the row is empty now — the band of air
   it left keeps the scroller's range (the quiet control's own 65 px at 390) */
#guidedLayer .g2Escape--air{ min-height:65px; }
#guidedLayer .gOut{ color:var(--color-ink-tertiary); }
/* ── GUIDED-3 FX2 · 29 August 2026 · THE PLINTH'S QUIET CONTROLS ARE 44 WIDE ─
   DATED AMENDMENT (accessibility 3). MOBILE_ROUND.md:81 is standing law —
   "Touch targets ≥44×44 CSS px (§10.7 stays a law)" — and `.g2Quiet` already
   carries the height. It does not carry the WIDTH, and the two shortest strings
   in the walk are in the plinth, where the thumb is: `Back` measured 33×44 on
   every guided step at both widths and `Skip` 29×44 on the fitting calendar.
   A minimum width is the whole of the fix: the box grows to the law, the
   underline stays under the glyphs (it is drawn on the text, not on the box),
   and nothing on the screen moves. */
#guidedLayer .gBack,
#guidedLayer .gSkip{ min-width:var(--layout-target-min); }
/* …and the letter's lining row, which is a door inside a table and measured
   61×26. It is declared in guided-finish.js's own runtime block, which is
   appended after this file, so this rule is written one element-selector
   stronger (element + class + id) to land whatever the document order. The row
   keeps its type and its underline; only its hit area grows. */
#guidedLayer button.gfin-liningrow{
  min-height:var(--layout-target-min);
  align-items:center;
  /* STYLIST-1 FIX WAVE (5 Sept 2026) · B12 · …and the 44 px hit area no
     longer grows the row. Measured at 390×844 and 1440×900: the LINING row
     stood 61 px tall against its siblings' 43 — the value cell had become a
     147×44 button and read as one. The target stays 44 (FX2/accessibility 3);
     it now overhangs the line box equally above and below, so the name and
     the code sit inline on the row's own line like every other value. */
  margin-block:calc((var(--type-line-height-300) - var(--layout-target-min)) / 2);
}
/* …and in the plinth, on the one screen that still keeps it there (a step may
   say `escape:false` / `ways:false`), it is ranged to the far end. */
#guidedLayer .gWays .gOut{ margin-inline-start:auto; }

/* ── the layer's one live region ───────────────────────────────────────────
   Off the screen, in the tree. It is not `display:none` — a hidden region is
   never announced. */
/* GUIDE-2 (16 Sept 2026, law 44(c)) · the house's line is a visible status
   above the plinth for a few seconds after every act, and a polite live region
   for the reader always. Hidden by opacity alone (the ceremony's settle), so
   the reader's region is never removed. */
#guidedLayer .gSay{
  position:absolute; left:0; right:0; bottom:calc(var(--gsee-foot, 96px) + var(--space-200));
  z-index:5; margin:0 auto; padding:var(--space-200) var(--space-400);
  width:max-content; max-width:min(100% - 2 * var(--layout-margin-compact), 52ch);
  background:var(--color-surface-page);
  border:var(--border-width-hairline) solid var(--color-line-rule);
  font-size:var(--type-size-200); line-height:var(--type-line-height-200); color:var(--color-ink-primary);
  text-align:center;
  opacity:0; pointer-events:none;
  transition:opacity var(--motion-duration-enter) var(--motion-easing-settle);
}
#guidedLayer .gSay.is-shown{ opacity:1; }
@media (prefers-reduced-motion:reduce){ #guidedLayer .gSay{ transition:none; } }

/* ── the focus ring is the page's, and it is declared once ─────────────────
   `modern.html` builds one ring for the whole product — two strokes, ink over
   paper, measured to clear 3:1 over all forty catalogue extremes — on a bare
   `:focus-visible`, which reaches into this layer as it reaches everywhere
   else. A second, quieter ring drawn here would be a second construction to
   keep true, so this file draws none: every control in the layer wears the
   page's. What it owns is the two cases below. */
/* ── V18 · THE HEADING TAKES THE CARET AND NOT THE RECTANGLE ───────────────
   GUIDED-3 · 28 August 2026. §2.6 sends the caret to the question on every
   screen change, so `#gH` carries `tabindex="-1"`; on a keyboard advance the
   page's focus ring then painted a hard 2px box tight around the question —
   the exact rectangle V10 has just removed from every answer, reintroduced on
   the one element of the screen that is NOT operable. A focus indicator states
   "this is what your next keystroke will act on", and nothing acts on a
   heading: the announcement is the live region's and the caret's, and both are
   unchanged. Every CONTROL in the layer keeps the house's ring untouched —
   that is the half of V18 this rule must not spend, and the §12 suite measures
   both halves on the same screen. */
#guidedLayer .gQ:focus-visible,
#guidedLayer .g2SheetH:focus-visible,
#guidedLayer .gStep:focus-visible{ outline:none; box-shadow:none; }

/* the caption a screen reader hears and a client does not: a state that has
   already been said by a rule and a mark, or a route that costs an assistive
   client taps he should not have to spend. It is NOT `display:none` — a hidden
   control is not reachable, and reachability is the whole reason it exists. */
#guidedLayer .g2SrOnly{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
/* ── GUIDED-3 FX2 · 29 August 2026 · …AND IT COMES BACK FOR THE CARET ────────
   DATED AMENDMENT (accessibility 1 · WCAG 2.2 AA 2.4.7 Focus Visible). These
   are real tab stops — that is the whole reason they exist — and they were
   1×44 px under `clip-path:inset(50%)`, so the house's own 2px focus ring was
   painted and then clipped away with the element. Measured on the cloth branch:
   ELEVEN CONSECUTIVE invisible stops (31–41 of 46) at 390 AND at 1280; a
   sighted keyboard client tabbed off the second cloth tile and lost the caret
   for eleven presses. The house already owns the answer — `.skip` at
   modern.html:242–246 reveals itself on focus — and this is that treatment,
   scoped to the layer. Not `:focus-within`, and not `:focus`: `:focus-visible`
   is the state that means "a caret is here", so a pointer client never sees a
   line appear under his thumb. */
#guidedLayer .g2SrOnly:focus-visible{
  position:static;
  width:auto; height:auto;
  min-height:var(--layout-target-min);
  clip-path:none; overflow:visible; white-space:normal;
  margin:0; padding:var(--space-200) 0;
}

/* GUIDED-3 · V10 (28 Aug 2026) — THE COLLISION IS GONE WITH THE BOX, and so is
   the rule that answered it. A selected answer used to take the element's one
   `outline` for its selection, so the focus ring had to be drawn INSIDE the
   edge as an inset pair. Selection is a border on ONE edge now: the outline is
   free, and the page's own ring reaches a selected answer exactly as it reaches
   every other control in the product. Two rings drawn at once would be the
   second construction this file exists not to keep. */

/* ════════════════════════════════════════════════════════════════════════════
   THE CEREMONY (§6) — four motions, none over 240ms, and there is no fifth.
   ════════════════════════════════════════════════════════════════════════════
   1 · THE ENTRY, and the split that makes it feel engineered. The words arrive
       on opacity with `translateY(--space-200)`; going back they arrive from
       -8px, which is the whole of what "back" means to a hand. THE PLATE DOES
       NOT TRANSLATE — it arrives on opacity alone. Cloth does not slide across
       a table, and a photograph that moves is a photograph in motion rather
       than a thing being looked at. One element still, one element settling.
       The split is one selector: anything CONTAINING a plate is exempt from the
       transform.
   4 · THE CROSS-SETTLE. The words leave at 140, the next words arrive at 240,
       and the element common to both screens — `data-g2-persist` — does not
       move at all. Everything changes around the cloth; the cloth stands still.
   Excluded by name, so nobody has to ask: confetti, checkmark draws, counting
   figures, progress fills, skeleton shimmer, parallax, scroll-triggered
   reveals, auto-advancing anything, looping ambient motion, hover transforms on
   photographs, page-turn effects, and any celebration that happens TO the
   client rather than FOR him. */
#guidedLayer .gStep > *,
#guidedLayer .gStep > .gSlot > *{
  opacity:1; transform:none;
  transition:opacity var(--motion-duration-enter) var(--motion-easing-settle),
             transform var(--motion-duration-enter) var(--motion-easing-settle);
}
#guidedLayer .gStep.is-entering > *:not(.gSlot),
#guidedLayer .gStep.is-entering > .gSlot > *{ opacity:0; }
#guidedLayer .gStep.is-entering > *:not(.gSlot):not(:has(.g2Plate)),
#guidedLayer .gStep.is-entering > .gSlot > *:not(.g2Plate):not(:has(.g2Plate)):not([data-g2-persist]){
  transform:translateY(var(--space-200));
}
#guidedLayer .gStep.is-entering.is-back > *:not(.gSlot):not(:has(.g2Plate)),
#guidedLayer .gStep.is-entering.is-back > .gSlot > *:not(.g2Plate):not(:has(.g2Plate)):not([data-g2-persist]){
  transform:translateY(calc(var(--space-200) * -1));
}
/* the persisting element does not arrive at all: it was already there. */
#guidedLayer .gStep.is-cross > .gSlot > [data-g2-persist]{ opacity:1; transition:none; }
#guidedLayer .gStep.is-leaving > *:not(.gSlot),
#guidedLayer .gStep.is-leaving > .gSlot > *:not([data-g2-persist]){
  opacity:0;
  transition:opacity var(--motion-duration-exit) var(--motion-easing-exit);
}

/* ════════════════════════════════════════════════════════════════════════════
   600 — THE LAYER'S ONE BREAKPOINT, and it is the token set's own rung (§2.3).
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width:600px){
  #guidedLayer .gScroll{
    padding-inline:var(--layout-margin-medium);
    padding-block:var(--space-2400) var(--space-2400);
  }
  #guidedLayer .gFoot{
    padding-inline:var(--layout-margin-medium);
  }
  /* ── J2 P11 · 6 September 2026 · THE VISIT DOOR'S TWO FIELDS DO NOT ABUT ──
     On the first-suit door the two named fields stand in a row with no joining
     words between them (the sign-in's " at " is what keeps ITS two apart), and
     they were measured abutting at the desk — "Your city" at x360 w174, "Email"
     at x534 w214, one continuous 388 px rule with both labels under it. One
     step of air between the two boxes, above the rung only: below it they are
     two writing lines the width of the column. The rule lives HERE and not in
     guided-finish.js because that file's rules sit in `@layer gfin-fallback`
     and a margin there loses to the page's unlayered `* { margin:0 }` —
     measured: the layered rule matched and computed 0. */
  #guidedLayer .gfin-visit .gfin-named + .gfin-named{ margin-inline-start:var(--space-600); }
  #guidedLayer .g2Plate{ max-height:76svh; }
  /* plates are inset above 599 and never full-bleed (§5.1). */
  #guidedLayer .g2Plate--bleed{ width:min(100%, var(--g2-plate-w, 100%)); max-width:100%; margin-inline:auto; }
  #guidedLayer .g2Primary{ width:auto; }
  #guidedLayer .g2Sheet{ padding-inline:var(--layout-margin-medium); }
  /* the door is a row again above the rung: the column is wide enough for the
     label, the fact and the arrow to stand side by side without wrapping, which
     is the 56px construction §4.4 declares. `display` is the only thing that has
     to change — a flex container ignores the grid placements above. */
  #guidedLayer .g2Door{ display:flex; }
}

/* ── ≥1024: ONE composition, at every width above it (§5.1, §5.3) ──────────
   A screen with one subject is a SPREAD; a screen offering a choice among
   photographs is a GRID. A screen with no honest photograph is neither — it is
   the full-width single column at the ledger measure, centred, because a SPREAD
   with an empty plate bay is forbidden (§9.6). The margin grows above 1440; the
   design does not. */
@media (min-width:1024px){
  #guidedLayer .gScroll,
  #guidedLayer .gMast,
  #guidedLayer .gFoot{ padding-inline:var(--layout-margin-regular); }
  #guidedLayer:has(.gStep[data-compose]) .gBody{
    max-width:calc(var(--layout-max-width-page) - var(--layout-margin-regular) * 2);
  }
  /* ── WALK-1 A6 (9 Sept 2026, law 35(b)) · THE WALK IS A COMPOSITION TOO ────
     Measured at 1280×800: every walk stop stood in a 720 px ledger column with
     232 px of empty paper either side of it, because a stop that draws a stage
     beside its answers declares no `data-compose` and so inherited the measure
     written for a column of PROSE. The consequences were both of the owner's
     complaints in one: the stage got 241 px of the 720 — "the viewport isn't
     big enough to show the suit" — and the answers got the other 447, at which
     four shirt names wrapped to three lines each and the shoes fell off the
     fold. A stop with a stage and answers side by side IS a composition; it
     takes §5.1's content box, exactly as the spread does, and its left edge
     lands on the mast's. */
  #guidedLayer:has(.gwalk-split) .gBody{
    max-width:calc(var(--layout-max-width-page) - var(--layout-margin-regular) * 2);
  }

  /* ── V7 · ONE COMPOSITION, AND ITS TWO LEFT EDGES ────────────────────────
     GUIDED-3 · 28 August 2026. Measured before this: the look/make screen at
     1280 carried THREE unrelated left edges — the plate bay at 48, the words
     bay at 759, and the plinth's contents at 280, which was a 720 measure
     inherited from the phone sitting under a two-bay spread that does not use
     it. An art director reads alignment before they read anything else.
     The content box is stated once, here, and everything that composes on it
     takes it: §5.1's 1184 at margin 48, and the ledger measure where a screen
     states no composition (§9.6 — a spread with an empty plate bay is
     forbidden, so an uncomposed screen keeps its single centred column and the
     plinth keeps it with it). */
  #guidedLayer{
    /* the content box, as the elements that take it see it: every one of them
       stands INSIDE a band that has already paid the margin, so `100%` here is
       that band and the cap is §5.1's 1184. */
    --g2-content:min(100%,
                     calc(var(--layout-max-width-page) - var(--layout-margin-regular) * 2));
    /* the words bay's own left edge inside that box, derived from §5.1's own
       track list (7fr · 48 · 5fr) rather than typed: 710.67 on a 1184 box. */
    --g2-words-bay:calc((var(--g2-content) - var(--space-1200)) * 7 / 12 + var(--space-1200));
    /* the plinth stands on the plate bay's edge until a composition tells it
       otherwise. It never invents an edge of its own — that is the whole law. */
    --g2-plinth-inset:0px;
  }
  #guidedLayer:has(.gStep[data-compose]) .gFoot > *{ max-width:var(--g2-content); }
  /* and the plinth stands on the same box the stops do (the law below) */
  #guidedLayer:has(.gwalk-split) .gFoot > *{ max-width:var(--g2-content); }
  /* THE FIGURE AND THE ACT RANGE WITH THE WORDS BAY; BACK RANGES WITH THE
     PLATE BAY. Two edges, both meaningful, both derived from the spread above
     them — and the inset is only spent where THIS FILE owns the tracks the
     spread is cut on. On the garment moment and the record, guided-see and
     guided-finish declare their own bays (M3's 400 · 344 · words triple, which
     batch 1 built and this batch may not touch — the garment moment wears this
     file's `.g2Spread` AND its own `.gsee-spread`, and the second one re-cuts
     the columns), so the plinth there stands on the plate bay's single edge
     rather than guessing at a second one from a track list that is not ours to
     read. THE LAW, and it is what the §12 suite measures: the plinth never
     invents an edge of its own. It stands either on the content box's left edge
     or on the words bay's, and never anywhere else. */
  #guidedLayer:has(.gStep .g2Spread:not(.gsee-spread)){
    --g2-plinth-inset:var(--g2-words-bay);
  }
  /* §9.4's cloth judgement is cut on four equal columns rather than 7fr·5fr —
     the shortlist runs 4-up beneath the spread and the words bay takes the last
     two — so its own words edge is two tracks and two gutters in: 616 on the
     1184 box. Same law, that composition's own arithmetic. */
  #guidedLayer:has(.gStep .g2ClothSpread){
    --g2-plinth-inset:calc((var(--g2-content) - var(--space-1200) * 3) / 2
                           + var(--space-1200) * 2);
  }
  /* BRIEF-2 (13 Sept 2026, law 39(i)) · THE SPLIT'S OWN SECOND EDGE. The
     owner: "the location of show me my looks button is not good". Measured at
     1440 on the brief: the act at 128, the content box's left edge, under the
     suit; the questions it concludes at 563. The brief, the looks, the look
     and the lookbook are cut on `.gwalk-split` (0.7fr · 32 · 1.3fr), and the
     answers' edge is that grid's own second track: (content − 32) × 0.35 + 32,
     which is 563 on the 1184 box. The wide split (the compare) reverses the
     share. Same law as V7: the plinth never invents an edge of its own. */
  #guidedLayer:has(.gStep:not([hidden]) .gwalk-split){
    --g2-plinth-inset:calc((var(--g2-content) - var(--space-800)) * 0.35 + var(--space-800));
  }
  #guidedLayer:has(.gStep:not([hidden]) .gwalk-split--wide){
    --g2-plinth-inset:calc((var(--g2-content) - var(--space-800)) * 0.625 + var(--space-800));
  }
  /* AMENDED 13 Sept 2026, DATED (BRIEF-2): the one-row grammar's "the act
     stands on the content edge itself" (the has-act rule above, ≥600) is
     amended for the SPLIT compositions at the desk: there the act concludes
     the answers and stands on their edge, the inset the split declares. Back
     keeps the row's other end. Everywhere else the one-row grammar stands. */
  /* …and it is a TRACK, not a padding: a percentage inside a padding on an
     auto-sized grid column resolves against that column, which is sized by
     the padding (measured: 95 px of 435, and a button three lines tall). The
     inset is the row's first track, less the gap that follows it, so the
     act's edge is the answers' edge exactly; Back keeps the row's other end. */
  #guidedLayer:has(.gStep:not([hidden]) .gwalk-split) .gFoot.has-act{
    grid-template-columns:calc(var(--g2-plinth-inset) - var(--space-800)) auto minmax(0,1fr);
  }
  #guidedLayer:has(.gStep:not([hidden]) .gwalk-split) .gFoot.has-act > .gAct{ grid-column:2; padding-inline-start:0; }
  #guidedLayer:has(.gStep:not([hidden]) .gwalk-split) .gFoot.has-act > .gWays{ grid-column:3; }
  #guidedLayer .gMoneyWrap,
  #guidedLayer .gAct{ padding-inline-start:var(--g2-plinth-inset); }
  #guidedLayer .g2Spread{
    display:grid;
    grid-template-columns:7fr 5fr;      /* 662 · 473 on a 1184 content box */
    gap:var(--space-1200);
    align-items:center;
  }
  #guidedLayer .g2PlateBay{
    display:grid; place-items:center;
    height:min(76svh, 640px);
  }
  #guidedLayer .g2PlateBay .g2Plate{ max-height:100%; }
  #guidedLayer .g2WordsBay > * + *{ margin-top:var(--space-800); }

  /* ── V7 · THE MASTHEAD, and it is paid for out of the air above it ───────
     The band is the wordmark over a hairline on the content box; the scroller
     then opens on 48 of air instead of 96, which is §5.2's own smaller step and
     leaves the reading area the height it had before the band existed. Nothing
     below the band moved: measured at 1280×720, the scroller keeps 651px. */
  #guidedLayer .gMast{
    display:block;
    padding-block:var(--space-300);
  }
  /* GUIDED-4 · THE SECOND AND LAST SERIF IN THIS FILE, and it is the same mark:
     the masthead band IS the wordmark (spec §2.6 names `guided.css:1469–1477`
     by line). Caps-tracked at `--type-size-400` over a hairline — identical
     declarations to `.g2Wordmark`, because it is identical type doing identical
     work at a different width. */
  #guidedLayer .gMastIn{
    width:100%; max-width:var(--g2-content);
    margin-inline:auto;
    padding-bottom:var(--space-300);
    border-bottom:var(--border-width-hairline) solid var(--color-line-hairline);
    font-family:var(--font-family-serif-stack);
    font-size:var(--type-size-400);
    line-height:var(--type-line-height-400);
    letter-spacing:var(--type-tracking-caps);
    font-weight:var(--type-weight-regular);
    color:var(--color-ink-primary);
  }
  /* the air above the question is §5.2's middle step here, not its largest:
     the masthead's hairline is what separates the walk from the page above it
     now, and 96 of blank paper UNDER a ruled band is air twice. The 16px this
     returns is reading area on every composed screen at every width ≥1024. */
  #guidedLayer .gScroll{ padding-block:var(--space-800) var(--space-2400); }
  #guidedLayer .g2Grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:var(--space-1200);
  }
  #guidedLayer .g2Grid[data-cols="2"],
  #guidedLayer .g2Grid[data-cols="4"]{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  #guidedLayer .g2Grid .g2Tile + .g2Tile{ margin-top:0; }
  /* the ledger cap, for the one case that keeps the single column (§9.6). */
  #guidedLayer .g2Ledger{
    max-width:var(--layout-max-width-ledger);
    margin-inline:auto;
  }

  /* ── §9.4 · THE CLOTH JUDGEMENT, at ≥1024 ────────────────────────────────
     "SPREAD. Plate bay: the cloth in hand at its own size (median 481×420) on
     ground. Words bay: question, the in-hand block, the colour unit, the door
     row. The shortlist runs 4-up at 266 wide full width beneath the spread."
     The two bays are the ones declared above — `.g2PlateBay` and `.g2WordsBay`,
     this file's own published names — and they are dressed there, once, for
     every screen that states them, INCLUDING the cloth judgement's own grid.
     The columns that carry them are the cloth screen's (the ask pack owns
     `.g2Cloths`, and nothing here claims it): a screen states which composition
     it is in, and this file says what that composition looks like.
     The plate keeps its own declared box inside the bay — a bay is where a
     photograph stands, not a size it is stretched to, and the detail tier's
     files run from ~220 to 940 wide, so a box wider than the declared 481 would
     put ground, not cloth, on the screen.
     No rule of its own is needed here, and that is the point: the bays above
     already carry §5.3's arithmetic — the plate bay `min(76svh, 640px)` tall
     with its plate fitted to it, the words bay's own vertical step — so a
     screen that states the composition gets it without a second dialect.

     ── GUIDED-4 FIX WAVE · PURPOSE CLARITY 2 (judge round 1, 29 Aug 2026) ──
     DATED AMENDMENT — one rule of its own after all, and it is the judge's:
     "at 1440×900 'Which cloth?' paints zero choosable cloths: the list starts
     at y=779 inside a scroll pane cut at ≈747 … the visible composition ends
     cleanly with the whole-book door, $950 and Back" — a false floor with no
     scroll scent, where 390's is blessed because the in-hand card is visibly
     cut mid-element. Reproduced before this was written: first alternative
     tile top 779, pane cut 742 on the commit→change→cloth route.
     THE ANSWER RISES BY COMPOSITION: on windows tall enough to pay for it
     (≥840 of height), the in-hand plate gives up width so the first shortlist
     row can stand — the pane cut sits at ≈100svh−158 and the hero's caption
     + the tile step spend ≈153 beneath the plate, so a plate held to
     `(100svh − 565px) × 481/420` puts the first shortlist row's top edge
     ≈48px ABOVE the cut at every height the cap binds (measured 694 against
     742 at 900 — deep enough that the PHOTOGRAPH's own edge crosses the cut
     even at DPR 1, where the 224-tier file centres in the 260 box with 26px
     of ground above it; the cap lets go above ≈985 where the full 481 fits
     with the row still in view). Below 840 of height the cap is off and the cut
     crosses the hero itself — the same mid-element scent 390 was judged on.
     THE WIDTH IS THE LEVER AND NOT `max-height`, BY MEASUREMENT: the plate's
     height is derived from its own `aspect-ratio`, so a narrower box is a
     shorter box with the photograph FITTED into it — never cropped, never
     enlarged, `.g2Plate`'s own contract. A `max-height` cap was built and
     measured first and BACKED OUT: the plate's height is `auto`, so the
     image's percentage `max-height` resolves against nothing and
     `overflow:hidden` CROPPED the mill's photograph by 28px at 900 — exactly
     what §3.2 forbids. At 840 the plate still draws ≥315px of the mill's
     file. The square fallback tier (`.g2Hand--square`, aspect 1:1) takes the
     same ceiling at its own aspect. */
  @media (min-height:840px){
    #guidedLayer .g2ClothSpread .g2TileHand .g2Plate{
      width:min(100%, var(--g2-plate-w, 100%), calc((100svh - 565px) * 481 / 420));
    }
    #guidedLayer .g2ClothSpread .g2TileHand .g2Plate.g2Hand--square{
      width:min(100%, var(--g2-plate-w, 100%), calc(100svh - 565px));
    }
  }

  /* ── §9.9 · THE LETTER'S ARRIVAL, at ≥1024 ───────────────────────────────
     "SPREAD, plates left and sticky, letter right, house line at 64."
     Measured before this: the arrival was the 390 column — the portrait card at
     338 in the left bay, an EMPTY first row where the record's head stands on
     the screen before it, and therefore the whole right half of the round's
     emotional payoff blank down 730px before a word of the letter began (L1
     0.161). The record's spread has a head row and the letter has no head, so
     the letter states its own two areas: the plates stack down the plate bay
     from the top, the letter fills the words bay from the top, and both start
     at the head of the page. The `body.guided` on the plate rule is not for
     weight's sake — it matches the sticky rule this file's neighbour writes for
     the record, which would otherwise take the row back. */
  #guidedLayer .gStep[data-step="letter"] > .gSlot:has(> .gfin-words){
    grid-template-rows:auto 1fr;
    align-items:start;
  }
  #guidedLayer .gStep[data-step="letter"] > .gSlot > .gfin-words{
    grid-column:2; grid-row:1 / -1;
  }
  /* the plate bay, and it is the same box §5.3 gives every plate bay: the
     photograph stands in it at its own size, fitted, never filled, never
     cropped — `.g2Plate`'s own contract, with a definite height for it to
     resolve against. */
  #guidedLayer .gStep[data-step="letter"] > .gSlot > .gfin-bay{
    grid-column:1; grid-row:1;
    display:grid; grid-template-rows:minmax(0,1fr) auto;
    justify-items:center; align-items:center;
    row-gap:var(--space-300);
    height:min(76svh, 640px);
  }
  #guidedLayer .gStep[data-step="letter"] .gfin-portrait > .g2Plate{
    width:auto; max-width:100%;
    height:100%; max-height:100%;
  }
  /* the photograph takes the bay's height and its own aspect keeps the width —
     STILL under the file's own pixels (the card is 600×780 and the tallest this
     bay ever asks for is 547, which is 421 wide), so G3 holds and nothing is
     enlarged past what the mill sent. */
  #guidedLayer .gStep[data-step="letter"] .gfin-portrait > .g2Plate > img{
    height:100%; width:auto;
  }
  body.guided #guidedLayer .gStep[data-step="letter"] > .gSlot > .gfin-plateWrap{
    grid-column:1; grid-row:2;
    align-self:start; position:sticky; top:0;
  }
}

/* ── the reduced-motion path, stated ───────────────────────────────────────
   The durations above already resolve to 0ms here (the token set does it in one
   place), so this block exists to say the thing outright rather than to rely on
   a resolution three files away: NO transition, no offset, nothing moves, and
   the walk completes normally — including the letter's arrival, where the
   cloth plate still persists, because the persistence is a fact about the DOM
   and not about an animation. */
@media (prefers-reduced-motion:reduce){
  #guidedLayer .gStep > *,
  #guidedLayer .gStep > .gSlot > *,
  #guidedLayer .gStep.is-entering > *,
  #guidedLayer .gStep.is-entering > .gSlot > *,
  #guidedLayer .gStep.is-entering.is-back > *,
  #guidedLayer .gStep.is-entering.is-back > .gSlot > *,
  #guidedLayer .gStep.is-leaving > *,
  #guidedLayer .gStep.is-leaving > .gSlot > *,
  #guidedLayer .g2Mark{
    transition:none; opacity:1; transform:none;
  }
  #guidedLayer .g2Mark{ opacity:0; }
  #guidedLayer [aria-checked=true] > .g2Mark,
  #guidedLayer [aria-pressed=true] > .g2Mark,
  #guidedLayer [aria-checked=true] .g2Cap > .g2Mark,
  #guidedLayer [aria-pressed=true] .g2Cap > .g2Mark,
  #guidedLayer [aria-pressed=true] .g2ViewIn > .g2Mark,
  #guidedLayer .g2Saved > .g2Mark{ opacity:1; }
  #guidedLayer .g2Rail{ scroll-behavior:auto; }
}

/* ════════════════════════════════════════════════════════════════════════════
   THE WAY BACK IN.
   ════════════════════════════════════════════════════════════════════════════
   The wizard keeps everything it has committed when the client leaves for the
   workshop — that is the spec's own promise — and a scan of every visible
   control in the corridor after `G.exit()` returned zero ways back to it. The
   state was there and unreachable, which makes the guided walk a mode you can
   only leave. This is the layer's own element, injected by `G.exit()` and
   removed by `G.start()`, and it is the only rule in this file that paints
   outside `#guidedLayer`. One line, in the corridor's own quiet grammar, at the
   head of the column where the escape lands, and it RESUMES. */
#gReentry{
  margin:0 0 var(--space-600);
  font-family:var(--font-family-sans-stack);
}
#gReentry p{
  max-width:var(--layout-measure-prose);
  margin:0 0 var(--space-100);
  font-size:var(--type-size-200);
  line-height:var(--type-line-height-200);
  color:var(--color-ink-secondary);
}
#gReentry button{
  display:inline-flex; align-items:center;
  min-height:var(--layout-target-min);
  padding:0 var(--space-200);
  margin-inline-start:calc(var(--space-200) * -1);
  background:none; border:0; cursor:pointer;
  font-family:var(--font-family-sans-stack);
  font-size:var(--type-size-200);
  line-height:var(--type-line-height-200);
  font-weight:var(--type-weight-regular);
  color:var(--color-ink-secondary);
  text-decoration:underline;
  text-decoration-color:var(--type-underline-color);
  text-decoration-thickness:var(--type-underline-thickness);
  text-underline-offset:var(--type-underline-offset);
}
@media (hover:hover){
  #gReentry button:hover{
    color:var(--color-ink-primary);
    text-decoration-color:var(--type-underline-color-hover);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   COMPAT — A DELETION IN PROGRESS, NOT A CONSTRUCTION.  Delete on integration.
   ════════════════════════════════════════════════════════════════════════════
   The three step files are being rebuilt to the same two documents, and when
   they are, NONE of the class names below is emitted by anything and this whole
   block goes. It exists so that a step file that has not landed yet still WALKS
   — and, more importantly, so that it cannot draw the retired grey box or a
   cropped cloth while it waits:

     .gChip     → the word row's geometry. No border box, no fill, no radius.
     .gChipFace → NOT DRAWN. It was a 40–48px `background-size:cover` square,
                  and cover crops licensed cloth (G3). A cropped cloth is worse
                  than an absent one, so it is absent until the step file draws
                  a `.g2Plate` instead.
     .gPrimary / .place       → the one primary (§4.3).
     .gSecondary / .seeclose  → the quiet line. There is no second outlined
                                secondary in this layer.
     .gQuiet / .gOut          → the quiet line, at ONE size.
     .gAdvice / .gChipLabel / .gChipNote → the caption's three type roles.
   ════════════════════════════════════════════════════════════════════════════ */
#guidedLayer .gChip{
  display:flex; align-items:flex-start; gap:var(--space-300);
  width:100%; min-height:calc(var(--space-1200) + var(--space-600));
  padding:var(--space-400) 0; margin:0;
  text-align:left;
  background:none;
  border:0;
  border-top:var(--border-width-hairline) solid var(--color-line-hairline);
  border-radius:var(--radius-none);
  color:var(--color-ink-primary);
  cursor:pointer;
}
#guidedLayer .gChip:last-child{
  border-bottom:var(--border-width-hairline) solid var(--color-line-hairline);
}
/* V10 · the retired construction is retired in the retired grammar too: if a
   step file that has not been rebuilt still emits one, it must not be the only
   four-sided ink box left in the layer. */
#guidedLayer .gChip{
  border-inline-start:var(--border-width-emphasis) solid transparent;
}
#guidedLayer .gChip[aria-checked=true],
#guidedLayer .gChip[aria-pressed=true]{
  border-inline-start-color:var(--color-line-strong);
}
#guidedLayer .gChipFace{ display:none; }
#guidedLayer .gChipWords{ display:block; flex:1 1 auto; min-width:0; }
/* GUIDED-4 · the legacy label is an answer's NAME, so it takes the answer-name
   role whole (spec §2.4, and §2.6's site list names this line): a deletion in
   progress still may not be the one place in the walk where a name is set in a
   face the product no longer uses. */
#guidedLayer .gChipLabel{
  display:block;
  font-family:var(--font-family-sans-stack);
  font-size:var(--type-size-400);
  line-height:var(--type-line-height-400);
  letter-spacing:var(--type-tracking-tight);
  font-weight:var(--type-weight-semibold);
  color:var(--color-ink-primary);
}
#guidedLayer .gChipNote,
#guidedLayer .gAdvice{
  display:block;
  font-size:var(--type-size-200);
  line-height:var(--type-line-height-200);
  color:var(--color-ink-secondary);
}
#guidedLayer .gAdvice{
  font-size:var(--type-size-100);
  line-height:var(--type-line-height-100);
  color:var(--color-ink-tertiary);
  border:0; padding:0;
}
#guidedLayer .gPrimary,
#guidedLayer .place{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--control-button-height);
  padding:var(--space-400) var(--control-button-padding-x);
  background:var(--control-button-primary-fill);
  color:var(--control-button-primary-label);
  border:0; border-radius:var(--control-button-radius);
  font-family:var(--font-family-sans-stack);
  font-size:var(--type-size-300);
  line-height:var(--type-line-height-300);
  font-weight:var(--type-weight-semibold);
  letter-spacing:var(--type-tracking-normal);
  width:100%;
  cursor:pointer;
}
#guidedLayer .gSecondary,
#guidedLayer .seeclose,
#guidedLayer .gQuiet,
#guidedLayer .gOut{
  display:inline-flex; align-items:center;
  min-height:var(--layout-target-min);
  padding:0;
  background:none; border:0;
  color:var(--color-ink-secondary);
  font-family:var(--font-family-sans-stack);
  font-size:var(--type-size-200);
  line-height:var(--type-line-height-200);
  letter-spacing:var(--type-tracking-normal);
  font-weight:var(--type-weight-regular);
  text-align:left;
  text-decoration:underline;
  text-decoration-color:var(--type-underline-color);
  text-decoration-thickness:var(--type-underline-thickness);
  text-underline-offset:var(--type-underline-offset);
  cursor:pointer;
}
#guidedLayer .gSecondary:hover,
#guidedLayer .seeclose:hover,
#guidedLayer .gQuiet:hover,
#guidedLayer .gOut:hover{
  color:var(--color-ink-primary);
  text-decoration-color:var(--type-underline-color-hover);
}
@media (min-width:600px){
  #guidedLayer .gPrimary,
  #guidedLayer .place{ width:auto; }
}

/* ════════════════════════════════════════════════════════════════════════════
   FLOW-2(b) (31 Aug 2026) · THE RAIL IS DELETED — FLOW-1(e) reversed with its
   reason measured (one tap out, seven taps back). The settled column on the
   build surface is the map, and the review's own facts are the way back. The
   grid returns to its three rows.
   ════════════════════════════════════════════════════════════════════════════ */

/* FLOW-1 (30 Aug 2026) · THE SUIT'S SCREEN ARRIVES STANDING. The enter fade is
   240ms of compositor work, and the one screen that boots a WebGL context can
   freeze exactly that compositor: measured under the suite's own rasteriser,
   the words column held ~10% opacity for SECONDS while the stage compiled — a
   working screen reading as a broken one (the owner's "glitchy", D2 in the
   round's diagnosis). Less motion, not more (RULING-003 unharmed): the form
   enters at rest, and the stage's own poster-to-live swap remains the only
   thing that changes in front of the client. */
#guidedLayer .gStep[data-step="build"].is-entering > .gSlot > *{ opacity:1; transition:none; }

/* FLOW-1(f) (30 Aug 2026) · THE HERO'S HEADROOM. The hole the stage gets is
   clamped to the reading area, so every band above the bay is subtracted from
   the SUIT. Measured at 1440×900: window top 256 — masthead, rail, the §5.2
   air, and a settled band saying what the words bay's own caption says again
   ("Two-piece suit · Navy plain") a hand's width from it. On the suit's own
   screen, at the spread: the settled band stands down (the rail names the
   place, the caption names the garment — one surface, one sentence, G10) and
   the air above the spread drops to one step. The hole grows ~90px, all of it
   suit. */
@media (min-width:1024px){
  /* FLOW-2 · the two settled-band display:none rules died with the band
     (kill list #12). The one-step air above the spread stays, on the build
     surface the form became. */
  #guidedLayer:has(.gStep[data-step="build"]) .gScroll{ padding-block-start:var(--space-300); }
}

/* ════════════════════════════════════════════════════════════════════════════
   FLOW-2(a) (31 Aug 2026) · THE SETTLED COLUMN — the build surface's four
   lines and the review's four controls, one grammar (build concept §3.2).
   Label in the caption role, a spaced em dash, the value in working-text
   emphasis, and the quiet word Change/Close underlined as the affordance.
   No caret, no chevron, no icon, no numeral of position. The whole row is one
   button; hairlines above each row and below the last; nothing fills, nothing
   tints, nothing rounds.
   ════════════════════════════════════════════════════════════════════════════ */
#guidedLayer .gbCol{
  display:block;
  width:100%;
  margin-block-start:var(--space-300);
}
#guidedLayer .gbSet{
  display:flex; align-items:baseline; gap:var(--space-300);
  width:100%; min-height:var(--layout-target-min);
  padding:var(--space-300) 0; margin:0;
  background:none; border:0; border-top:1px solid var(--color-line-hairline);
  text-align:left; cursor:pointer;
  font-family:var(--font-family-sans-stack);
}
#guidedLayer .gbCol > .gbSet:last-of-type,
#guidedLayer .gbCol > .gbSet + .gbPanel{ border-bottom:0; }
#guidedLayer .gbCol{ border-bottom:1px solid var(--color-line-hairline); }
#guidedLayer .gbSetWords{ flex:1 1 auto; min-width:0; }
#guidedLayer .gbLabel{
  font-size:var(--type-size-200); line-height:var(--type-line-height-200);
  font-weight:var(--type-weight-regular); color:var(--color-ink-secondary);
}
#guidedLayer .gbDash{ color:var(--color-ink-tertiary); }
#guidedLayer .gbValue{
  font-size:var(--type-size-300); line-height:var(--type-line-height-300);
  font-weight:var(--type-weight-medium); color:var(--color-ink-primary);
  letter-spacing:0;
}
#guidedLayer .gbChange{
  flex:0 0 auto;
  font-size:var(--type-size-200); line-height:var(--type-line-height-200);
  color:var(--color-ink-secondary);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--color-line-rule);
}
@media (hover:hover){
  #guidedLayer .gbSet:hover .gbChange{ text-decoration-color:currentColor; }
}
#guidedLayer .gbSet[aria-expanded="true"] .gbChange{ text-decoration-color:currentColor; }
/* the cloth line's square — the actual cloth, in the reserved gutter */
#guidedLayer .gbSet .gb-swatch{ flex:0 0 auto; align-self:center; }
#guidedLayer .gbSet .gb-swatch img{ display:block; }
/* the open panel: directly beneath its own line, full column width */
#guidedLayer .gbPanel{ padding:0 0 var(--space-300); }
/* ── ASSIST-1 · 6 September 2026 · THE ASSISTANT'S FIELD IN THE CLOTH SHEET ──
   One writing line and one quiet act, above the three questions, drawn only
   when the demo server answers for it (guided-ask.js, assistProbe). The field
   is the house's own control grammar — the input height, the hairline, the
   page's ink — and the answer stands beneath it in the advice role. */
#guidedLayer .gask-assist{ display:flex; flex-direction:column; gap:var(--space-300); align-items:stretch; }
#guidedLayer .gask-assistlabel{ display:block; font-size:var(--type-size-200); line-height:var(--type-line-height-200); color:var(--color-ink-secondary); }
#guidedLayer .gask-assistrow{ display:flex; gap:var(--space-300); align-items:stretch; margin-top:var(--space-100); }
#guidedLayer .gask-assistfield{
  flex:1 1 auto; min-width:0; height:var(--control-input-height);
  padding:0 var(--space-300); margin:0;
  border:var(--border-width-hairline) solid var(--color-line-strong); border-radius:var(--radius-none);
  background:var(--color-surface-page); color:var(--color-ink-primary);
  font-family:var(--font-family-sans-stack); font-size:var(--type-size-300); line-height:var(--type-line-height-300);
}
#guidedLayer .gask-assistfield::placeholder{ color:var(--color-ink-tertiary); }
#guidedLayer .gask-assistfield:focus-visible{ outline:2px solid var(--color-ink-primary); outline-offset:2px; }
#guidedLayer .gask-assistgo{ flex:0 0 auto; }
#guidedLayer .gask-assistsaid{ margin:0; }
#guidedLayer .gask-assistask, #guidedLayer .gask-assistbusy{ margin:0; }

/* ── SHIRT-2 · 6 September 2026 · THE SHIRT LINE'S PANEL ─────────────────
   Four shirtings as photographs, two by two, in the column's own width (344
   at the desk, the column at 390): each tile is one press that puts the shirt
   on the form. The lede above and the two quiet acts below take the small
   step; the tiles never stand as adjacent siblings (each in its own cell), so
   the layer's list rule for stacked tiles does not reach them. */
#guidedLayer .gsee-shirtpanel{ display:flex; flex-direction:column; gap:var(--space-300); align-items:flex-start; }
#guidedLayer .gsee-shirtpanel .gsee-shirtlede{ margin:0; }
#guidedLayer .gsee-shirtgrid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-300); width:100%; }
#guidedLayer .gsee-shirtcell{ min-width:0; }
#guidedLayer .gsee-shirtcell .g2Tile{ width:100%; margin:0; align-self:start; }
#guidedLayer .gsee-shirtcell .g2Plate{ width:100%; }
#guidedLayer .gsee-shirtcell .g2Plate img{ width:100%; height:auto; aspect-ratio:1 / 1; object-fit:cover; display:block; }
/* the head lines */
#guidedLayer .gb-record{ margin:0 0 var(--space-100); color:var(--color-ink-primary); }
#guidedLayer .gb-demo{ margin:0 0 var(--space-300); }
#guidedLayer .gb-teach{ margin:0 0 var(--space-300); }
#guidedLayer .gb-note{ margin:var(--space-100) 0 var(--space-300); }
/* the review's four controls share the grammar, inside the words column */
#guidedLayer .gfin-four{ margin-block:var(--space-800) 0; }
#guidedLayer .gfin-restartrow{ margin-block-start:var(--space-800); }

/* ── REDUCE-1 · 6 September 2026 · THE THREE QUESTIONS ARE LINES, NOT DROPDOWNS
   The sheet's questions wear the column's settled-line grammar (.gbSet, .gbPanel,
   the word rows) and open in place; the selects and their labels are gone. */
#guidedLayer .gask-lines{ margin:0 0 var(--space-600); }
#guidedLayer .gask-panel .gsee-rows{ display:flex; flex-direction:column; }
/* the working: the line, and its reason behind one quiet word */
#guidedLayer .gask-workwrap{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 var(--space-300); }
#guidedLayer .gask-workwrap .gask-work{ flex:1 1 auto; min-width:0; margin:0; }
#guidedLayer .gask-why{ flex:0 0 auto; }
#guidedLayer .gask-basis{ margin:0 0 var(--space-300); }
#guidedLayer .gask-fit{ margin:0 0 var(--space-300); }
/* A9 (STYLIST-1 audit, measured 390×844): the grid was ragged — the second and
   third tiles stood 32 px lower than the first — because `.g2Tile + .g2Tile`'s
   stacked-list margin was zeroed for grids only at ≥1024. In a grid the gap is
   the rhythm; the list margin is never wanted, at any width. */
#guidedLayer .gask-six .g2Tile + .g2Tile{ margin-top:0; }
/* REDUCE-1 (6 Sept 2026) · and they START LEVEL: a <button> centres its content
   in a stretched grid cell, so a tile with a shorter caption stood its photograph
   10 px lower than the checked one beside it (measured at 1440 — the same defect
   guided-ask's own note records for the old six, fixed there with align-self). */
#guidedLayer .gask-six .g2Tile{ align-self:start; }
/* the sheet's close is a target, never a sliver (MOBILE_ROUND §10.7). */
#guidedLayer .g2SheetClose{ min-width:var(--layout-target-min, 44px); }
/* the head line is TWO fixed rows — the label over the value and Change — so a
   label that changes length (assuming → you told us) moves nothing under it
   (§4.3.4, the zero-displacement law). */
/* D1 (12-flow2, the phone's rest state): the cloth line must begin ≥24 px above
   the plinth at 390×844 — the swatch square is the scroll cue. The line is the
   quiet line's own 44 px target and not a pixel more: its two rows (17 + 26)
   sit inside the minimum; no padding, no row gap, no margin of its own. */
#guidedLayer .gsee-askline{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline;
  column-gap:var(--space-300); row-gap:0;
  padding:0; margin:0;
}
#guidedLayer .gsee-askline .gbSetWords{ display:contents; }
/* the quiet line's underline belongs to its ACT alone here — the label and the
   value read as the settled lines do; only "Change" is drawn as a link. */
#guidedLayer .gsee-askline,
#guidedLayer .gsee-askline .gbLabel,
#guidedLayer .gsee-askline .gbValue{ text-decoration:none; }
#guidedLayer .gsee-askline .gbLabel{ grid-column:1 / -1; }
#guidedLayer .gsee-askline .gbDash{ display:none; }
#guidedLayer .gsee-askline .gbValue{ grid-column:1; grid-row:2; min-width:0;
  /* one line by construction (J2 B1); the words are fitted to the box by
     measure in guided-see (`fitAskLine`), so nothing is ever clipped mid-word */
  white-space:nowrap; overflow:hidden; }
#guidedLayer .gsee-askline .gbChange{ grid-column:2; grid-row:2; }
@media (min-width:1024px){
  /* B1 (STYLIST-1 fix wave, measured 1440×900): the shirts line sat 22 of 44 px
     under the pane's edge before the consultation line, and wholly under it
     after. Two remedies, both §5.2 steps: the measured-colour unit says its two
     sentences as one paragraph at the desk (one size, one voice), and the two
     quiet lines under the column stand at the small step, as the column's own
     tail rather than two islands. Measured after: shirts line wholly inside
     the pane, tappable at its centre. */
  #guidedLayer .gSwatchLine .gSaid{ display:inline; margin:0; }
  #guidedLayer .gSwatchLine .gInHand{ display:inline; font-size:inherit; line-height:inherit; margin-inline-start:.35em; }
}
/* the column and its two quiet lines are one block (`.gsee-col`): the bay's
   step falls around the block; inside it the lines take the large step on a
   phone, as they always did, and the small step at the desk (B1). */
body.guided.gsee-stage #guidedLayer .gsee-col > * + *{ margin-top:var(--space-800); }
/* the column's own top margin was zeroed by the bay's child rule before the
   block existed; the block keeps that at every width (the bay's step already
   stands above, and at 390 the four pixels are the cloth line's scroll cue). */
body.guided.gsee-stage #guidedLayer .gsee-col > .gbCol{ margin-block-start:0; }
@media (min-width:1024px){
  body.guided.gsee-stage #guidedLayer .gsee-col > * + *{ margin-top:var(--space-300); }
}

/* ══════════════════════════════════════════════════════════════════════════
   WALK-1 (9 Sept 2026, law 35) · THE FIVE STOPS.
   ══════════════════════════════════════════════════════════════════════════
   One decision per stop, and the stop's own answers laid out so a client sees
   all of them at once rather than scrolling a column. Nothing here invents a
   construction: every answer is the layer's own word row (`.g2Row`) or plate
   tile (`.g2Tile`); this block only lays them out and heads them. */

#guidedLayer .gwalk{ display:block; }
/* A5 · the rhythm between the groups is §5.2's 32, not 48: measured at
   1280×800 the look stop ran 1044 px against an 800 px screen and "Your shoes"
   landed ON the fold, which reads as a screen that was cut off rather than one
   that continues. */
#guidedLayer .gwalk-q + .gwalk-q{ margin-block-start:var(--space-600); }

/* The sub-heading over a group of answers. It is NOT the step's question —
   the engine owns that — so it sits a rung below it and does not compete. */
#guidedLayer .gwalk-qh{
  margin:0 0 var(--space-200);
  font-family:var(--font-family-sans-stack);
  font-size:var(--type-size-200);
  line-height:var(--type-line-height-200);
  font-weight:var(--type-weight-semibold);
  color:var(--color-ink-primary);
}
#guidedLayer .gwalk-qhint{
  margin:0 0 var(--space-300);
  font-size:var(--type-size-100, 13px);
  line-height:var(--type-line-height-200);
  color:var(--color-ink-secondary);
}

/* THE TILES. Two across where the paper holds two, one where it does not.
   `.g2Row` is a full-width button, so the grid is the only thing that changes
   and the row's own inside — mark, name, chosen word — is untouched. */
#guidedLayer .gwalk-tiles{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-200);
}
/* A7 (measured 390×844) · AND THE PHONE DOES NOT STACK WHAT IT CAN RANGE.
   A word row wants the full width — its name can be five words and its target
   is the whole line. A PLATE tile is a picture with two words under it, and one
   per row cost the cloth stop 2,235 px of scroll on a 844 px screen to show
   three swatches. Pictures range two across on the phone; the target is still
   the tile, and half of 390 is four times the 44 px minimum. */
#guidedLayer .gwalk-shirts .gwalk-tiles,
#guidedLayer .gwalk-shoes .gwalk-tiles{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (min-width:600px){
  #guidedLayer .gwalk-tiles{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  /* the shirts are photographs and want their own room */
  #guidedLayer .gwalk-shirts .gwalk-tiles{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (min-width:600px) and (max-width:899px){
  #guidedLayer .gwalk-shirts .gwalk-tiles{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* THE THREE CLOTHS. Three across from 600 up — the whole point of the stop is
   that he compares them without scrolling. */
#guidedLayer .gwalk-three{
  display:grid;
  /* three across AT EVERY WIDTH. The stop exists so he sees the three together;
     stacked on the phone it was 2,235 px of scroll for three swatches, which is
     the book again wearing a stop's name. A third of 390 is 119 px — a swatch
     that reads, and a target near three times the 44 px minimum. */
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--space-200);
}
@media (min-width:600px){
  #guidedLayer .gwalk-three{ gap:var(--space-300); }
}

/* A8 (measured 390×844) · AND THE THREE NAMES START ON ONE LINE.
   The eyebrows are the stylist's own roles — "On your suit", "Same colour",
   "Another colour" — and at a third of 390 some wrap to two lines and some do
   not, which set the three cloth NAMES at three different heights. The eyebrow
   holds two lines of room on the phone whether it needs them or not; the names
   range, and nothing is shortened to make it so. */
@media (max-width:599px){
  #guidedLayer .gwalk-three .g2Eyebrow{
    display:block;
    min-height:calc(var(--type-line-height-100, 16px) * 2);
  }
}

/* COMPARE. Two lines of plain words naming what stands beside what — the
   difference is said, not left for him to spot. */
#guidedLayer .gwalk-pair{ margin:0 0 var(--space-300); }
#guidedLayer .gwalk-pairline{
  margin:0 0 var(--space-100);
  font-size:var(--type-size-200);
  line-height:var(--type-line-height-300);
  color:var(--color-ink-primary);
}
#guidedLayer .gwalk-none{
  margin:0 0 var(--space-400, 16px);
  font-size:var(--type-size-200);
  line-height:var(--type-line-height-300);
  color:var(--color-ink-secondary);
}

/* THE SPLIT — the suit beside the answers, from 900 up.
   Law 35(b) says the suit leads; law 29(d) says the client always knows what to
   do next. A stage that takes the fold's height and a column below it satisfies
   the first and breaks the second: the answers were off the screen. So above
   900 the two stand side by side, the picture holding its place while he reads
   and taps; below it they stack and the stage takes half the fold, which is the
   phone geometry FLOW-2 measured and this round does not re-open. */
@media (min-width:900px){
  #guidedLayer .gwalk-split{
    display:grid;
    /* the picture is shaped to the suit, so it needs less paper than the
       answers do — measured at 1280: three cloth tiles want ~240 each. */
    grid-template-columns:minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap:var(--space-800);
    align-items:start;
  }
}
/* WALK-1 A1 (9 Sept 2026, measured 1280×800) · AND THEY START LEVEL.
   The same defect the six were fixed for on 6 Sept, in a new grid: a <button>
   centres its content in a stretched grid cell, so the shortest tile of the
   three stood 27 px lower than the tallest — measured, tile 2's plate top at
   y=196 against tile 1's at y=169. In a grid the gap is the rhythm and the
   stacked-list margin is never wanted. Both, once, for every walk grid. */
#guidedLayer .gwalk-three .g2Tile,
#guidedLayer .gwalk-tiles .g2Tile,
#guidedLayer .gwalk-tiles .g2Row{ align-self:start; }
#guidedLayer .gwalk-three .g2Tile + .g2Tile,
#guidedLayer .gwalk-tiles .g2Tile + .g2Tile,
#guidedLayer .gwalk-tiles .g2Row + .g2Row{ margin-top:0; }

/* WALK-1 A4 · AND WIDER WHERE TWO SUITS STAND. The compare stop's words are
   two lines and a door; the picture is the whole point of the stop, so the
   share is reversed there and nowhere else. */
@media (min-width:900px){
  #guidedLayer .gwalk-split--wide{
    grid-template-columns:minmax(0, 1.25fr) minmax(0, 0.75fr);
  }
}
/* WALK-1 A5 · THE SHORT ANSWERS GO THREE ACROSS. A garment kind and a shoe
   colour are two or three words each; at two across they took three rows of the
   fold between the client and his shirts. Measured 1280×800: the look stop ran
   1202 px against an 800 px screen. The shirts keep four across — they are
   photographs and read at that size. */
@media (min-width:900px){
  #guidedLayer .gwalk-garment .gwalk-tiles,
  #guidedLayer .gwalk-shoes .gwalk-tiles{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
/* and above 1024 the answers column is the composition's own (A6), so the four
   shoe colours stand on one line and the group costs one row instead of two. */
@media (min-width:1024px){
  #guidedLayer .gwalk-shoes .gwalk-tiles{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

/* ── ASSIST-2 (10 Sept 2026, law 35(e)) · THE HELPER STANDS AS A PEER ───────
   On the cloth sheet the field is a quiet second offer beside three filters.
   On stop 1 it is one of TWO ways through the same two questions — "never as
   the only way through", and never a footnote to them either — so its label
   takes the weight and the ink the question headings beside it take, and the
   questions keep §5.2's 40 between them and the answer above.
   Measured before this: the house's sentence butted into "What is it for?". */
#guidedLayer .gwalk-side .gask-assistlabel{
  font-weight:var(--type-weight-semibold);
  color:var(--color-ink-primary);
}
#guidedLayer .gask-assist + .gwalk{ margin-block-start:var(--space-600); }

#guidedLayer .gwalk-side{ min-width:0; }
/* TEXT-2 (15 Sept 2026) · two quiet acts on one line ("See the lining inside the coat", "Back to the whole suit") stood flush; measured 0 px between them at 390 and 1440 */
#guidedLayer .gwalk-side .g2Quiet{ margin-inline-end:var(--space-600); }
@media (max-width:899px){
  #guidedLayer .gwalk-side{ margin-block-start:var(--space-300); }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOTION-2 (15 September 2026, law 41) · "RESPONSIVE AND ANIMATED FOR
   WHATEVER DEVICE IT'S ON. LIKE NEXT.JS." — the owner, 15 Sept.
   ════════════════════════════════════════════════════════════════════════════
   The ceremony above keeps its four motions and its 240 ceiling; nothing new
   is added to the list. What changes is the ORDER things arrive in. A screen
   whose question, answers and act all land in the same frame reads as a page
   load; the same elements landing one after another, each on the same 240 ms
   settle, read as a hand laying them down. The stagger is a DELAY, not a
   duration: every element still moves for 240 and no longer, and the last one
   has begun before the first has finished. Reduced motion zeroes the enter
   token, so every delay below is zero there too, in the same place.
   1 · THE STEP'S OWN CHILDREN — the question, the body, the act — a beat
       apart, in document order. */
   The delays are stated on the ARRIVING frame only (`.is-arriving`, which the
   engine holds for two beats after the frame is placed): a transition takes
   its delay from the state it lands in, so the arrival carries the stagger
   and a press a moment later carries none. */
#guidedLayer .gStep.is-arriving > .gSlot > *:nth-child(2),
#guidedLayer .gStep.is-arriving > *:not(.gSlot):nth-child(2){ transition-delay:calc(var(--motion-duration-enter) * .12); }
#guidedLayer .gStep.is-arriving > .gSlot > *:nth-child(3),
#guidedLayer .gStep.is-arriving > *:not(.gSlot):nth-child(3){ transition-delay:calc(var(--motion-duration-enter) * .24); }
#guidedLayer .gStep.is-arriving > .gSlot > *:nth-child(4),
#guidedLayer .gStep.is-arriving > *:not(.gSlot):nth-child(4){ transition-delay:calc(var(--motion-duration-enter) * .36); }
#guidedLayer .gStep.is-arriving > .gSlot > *:nth-child(n+5),
#guidedLayer .gStep.is-arriving > *:not(.gSlot):nth-child(n+5){ transition-delay:calc(var(--motion-duration-enter) * .48); }
/* 2 · THE ANSWERS INSIDE THE BODY — a question's rows, the looks' cards, the
       fitting's preferences, the side of a split — arrive after the frame
       they stand in, one beat each, so the eye is led down the list. Anything
       holding a photograph arrives on opacity alone (the ceremony's own
       split); the suit's bay does not take part at all — it is the one thing
       on the screen that was already there. */
#guidedLayer .gwalk-q,
#guidedLayer .gwalk-side > *,
#guidedLayer .gfin-fit > *,
#guidedLayer .gfin-slots > .g2Row,
#guidedLayer .gstyle-card{
  transition:opacity var(--motion-duration-enter) var(--motion-easing-settle),
             transform var(--motion-duration-enter) var(--motion-easing-settle);
}
#guidedLayer .gStep.is-entering .gwalk-q,
#guidedLayer .gStep.is-entering .gwalk-side > *,
#guidedLayer .gStep.is-entering .gfin-fit > *,
#guidedLayer .gStep.is-entering .gfin-slots > .g2Row,
#guidedLayer .gStep.is-entering .gstyle-card{ opacity:0; }
#guidedLayer .gStep.is-entering .gwalk-q:not(:has(.g2Plate)),
#guidedLayer .gStep.is-entering .gwalk-side > *:not(:has(.g2Plate)),
#guidedLayer .gStep.is-entering .gfin-fit > *:not(:has(.g2Plate)),
#guidedLayer .gStep.is-entering .gfin-slots > .g2Row,
#guidedLayer .gStep.is-entering .gstyle-card:not(:has(.g2Plate)){ transform:translateY(var(--space-200)); }
#guidedLayer .gStep.is-arriving .gwalk-q:nth-child(1), #guidedLayer .gStep.is-arriving .gwalk-side > *:nth-child(1),
#guidedLayer .gStep.is-arriving .gfin-fit > *:nth-child(1), #guidedLayer .gStep.is-arriving .gfin-slots > .g2Row:nth-child(1),
#guidedLayer .gStep.is-arriving .gstyle-card:nth-child(1){ transition-delay:calc(var(--motion-duration-enter) * .18); }
#guidedLayer .gStep.is-arriving .gwalk-q:nth-child(2), #guidedLayer .gStep.is-arriving .gwalk-side > *:nth-child(2),
#guidedLayer .gStep.is-arriving .gfin-fit > *:nth-child(2), #guidedLayer .gStep.is-arriving .gfin-slots > .g2Row:nth-child(2),
#guidedLayer .gStep.is-arriving .gstyle-card:nth-child(2){ transition-delay:calc(var(--motion-duration-enter) * .30); }
#guidedLayer .gStep.is-arriving .gwalk-q:nth-child(3), #guidedLayer .gStep.is-arriving .gwalk-side > *:nth-child(3),
#guidedLayer .gStep.is-arriving .gfin-fit > *:nth-child(3), #guidedLayer .gStep.is-arriving .gfin-slots > .g2Row:nth-child(3),
#guidedLayer .gStep.is-arriving .gstyle-card:nth-child(3){ transition-delay:calc(var(--motion-duration-enter) * .42); }
#guidedLayer .gStep.is-arriving .gwalk-q:nth-child(n+4), #guidedLayer .gStep.is-arriving .gwalk-side > *:nth-child(n+4),
#guidedLayer .gStep.is-arriving .gfin-fit > *:nth-child(n+4), #guidedLayer .gStep.is-arriving .gfin-slots > .g2Row:nth-child(n+4),
#guidedLayer .gStep.is-arriving .gstyle-card:nth-child(n+4){ transition-delay:calc(var(--motion-duration-enter) * .54); }
/* the bay is the one element that was already there: it neither fades nor
   waits, on any screen. */
#guidedLayer .gStep.is-entering .gwalk-side > .gsee-bay,
#guidedLayer .gStep.is-entering .gwalk-split > .gsee-bay{ opacity:1; transform:none; transition:none; }
/* 3 · LEAVING IS ONE MOTION, NOT A STAGGER. The words go together at 140, as
       the ceremony says; a delay on the way out would hold the old screen in
       front of the new one. */
#guidedLayer .gStep.is-leaving > *,
#guidedLayer .gStep.is-leaving > .gSlot > *,
#guidedLayer .gStep.is-leaving .gwalk-q,
#guidedLayer .gStep.is-leaving .gwalk-side > *,
#guidedLayer .gStep.is-leaving .gfin-fit > *,
#guidedLayer .gStep.is-leaving .gfin-slots > .g2Row,
#guidedLayer .gStep.is-leaving .gstyle-card{ transition-delay:0ms; }
/* 4 · THE PRESS IS FELT. An answer, a door, a quiet act and the primary act
       give under the finger by a hair (98.5 percent) for the acknowledge beat
       and come back on release. It is the acknowledgement the token was cut
       for, on `:active` only — never on hover, and never on a tile that holds
       a photograph (the ceremony's own exclusion). */
#guidedLayer .g2Primary,
#guidedLayer .g2Row,
#guidedLayer .g2Door,
#guidedLayer .g2Quiet{
  transition-property:transform, opacity, background-color, color, border-color;
  transition-duration:var(--motion-duration-acknowledge);
  transition-timing-function:var(--motion-easing-settle);
}
#guidedLayer .g2Primary:active,
#guidedLayer .g2Row:active,
#guidedLayer .g2Door:active,
#guidedLayer .g2Quiet:active{ transform:scale(.985); transition-delay:0ms; }
/* the answers inside a body keep the enter beat for their arrival; the
   acknowledge beat is only for the press. Both are stated on the row, so the
   transform that arrives and the transform that presses share one property
   and the shorter one wins while the finger is down. */
#guidedLayer .gStep.is-arriving .gfin-slots > .g2Row{
  transition-duration:var(--motion-duration-enter);
}
#guidedLayer .gStep .gfin-slots > .g2Row:active{ transition-duration:var(--motion-duration-acknowledge); }
@media (prefers-reduced-motion:reduce){
  #guidedLayer .gStep .gwalk-q,
  #guidedLayer .gStep .gwalk-side > *,
  #guidedLayer .gStep .gfin-fit > *,
  #guidedLayer .gStep .gfin-slots > .g2Row,
  #guidedLayer .gStep .gstyle-card,
  #guidedLayer .gStep > *,
  #guidedLayer .gStep > .gSlot > *{ transition:none; transition-delay:0ms; opacity:1; transform:none; }
  #guidedLayer .g2Primary:active,
  #guidedLayer .g2Row:active,
  #guidedLayer .g2Door:active,
  #guidedLayer .g2Quiet:active{ transform:none; }
}
/* 5 · THE WIDE SCREEN IS COMPOSED, NOT CENTRED. At 1920 the whole walk stood
       in a 1184 band with 368 of paper either side; the band opens to 1440
       from the token set's own next rung (1600), the split gives the suit a
       fairer share of it, and the compare keeps the reversed share. */
@media (min-width:1600px){
  /* 1440 is the width the whole walk was composed and measured at (the desk
     project of playwright.config.js); a 1920 screen shows that composition
     with 240 of paper either side rather than the 1280 page with 368. The
     body's cap (the 1024 rule above) opens to the same band. */
  #guidedLayer{ --g2-content-wide:1440px; --g2-content:min(100%, var(--g2-content-wide)); }
  #guidedLayer:has(.gStep[data-compose]) .gBody,
  #guidedLayer:has(.gwalk-split) .gBody{ max-width:var(--g2-content-wide); }
  #guidedLayer .gwalk-split{
    grid-template-columns:minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap:var(--space-1200);
  }
  #guidedLayer .gwalk-split--wide{
    grid-template-columns:minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   GUIDE-1 (15 September 2026, law 42) · GUIDANCE FROM PAUL.
   ════════════════════════════════════════════════════════════════════════════
   The brief opens on the house's question. Its words stand first in the
   column, in the reading size and the page's ink (law 42(c): "the ai stylist
   suggestion should be prominent"); its quick answers are the layer's own
   word rows; its line is the same writing line every field in the walk uses.
   Beneath it, WHAT WE HAVE SO FAR: three dropdowns in the layer's own field
   grammar (the label eyebrow, the 48 px control, the control's own radius);
   the one that takes more than one answer is a <details> whose face is drawn
   exactly as the two natives beside it, and whose menu is a list of the
   page's own checkboxes. Tokens only. No motion is added: the rows and the
   quiet acts keep the ceremony's press; a menu opens and closes with no beat
   of its own (a beat on a dropdown is a decoration, not an acknowledgement). */
#guidedLayer .gguide{ display:flex; flex-direction:column; gap:var(--space-300); align-items:stretch; }
#guidedLayer .gguide .g2Eyebrow{ margin:0; }
#guidedLayer .gguide-say{
  margin:0;
  font-size:var(--type-size-400);
  line-height:var(--type-line-height-400);
  color:var(--color-ink-primary);
  max-width:52ch;
}
#guidedLayer .gguide-say:focus{ outline:none; }
#guidedLayer .gguide-fail{ color:var(--color-ink-secondary); }
#guidedLayer .gguide-busy{ margin:0; font-weight:var(--type-weight-semibold); color:var(--color-ink-primary); }
/* the answers stand in one column at every width: two-up, the last row of one
   column carried the closing rule and the other did not (judge-clarity A1) */
#guidedLayer .gguide-options{ margin-block-start:var(--space-100); grid-template-columns:1fr; }
#guidedLayer .gguide-or{ margin:var(--space-300) 0 0; }
#guidedLayer .gguide-form{ margin:0; }
#guidedLayer .gguide-label{ display:block; margin:0 0 var(--space-100); }
#guidedLayer .gguide-form .gask-assistrow{ margin:0; }
/* the guidance's Send is the secondary button the pack's own floor draws
   (guided-style.js GEOMETRY): one declaration, not a third copy (A3) */
#guidedLayer .gguide-fine{ margin:0; }
#guidedLayer .gguide-note{ margin:var(--space-300) 0 0; max-width:52ch; }
/* GUIDE-2 (judge-accessibility F2) · the headline stands on paper wherever the
   stage stands behind it: at 200 percent zoom on a phone the suit ran under
   the question and the ink measured 1.3:1 over the jacket */
body.guided.gsee-stage #guidedLayer .gStep > .gQ{ position:relative; z-index:2; background:var(--color-surface-page); }
/* GUIDE-2 (judge-accessibility F3) · at 320 the act's words wrap so Back is
   never pushed past the screen's edge (measured: Back's right edge at 340 in
   a 320 viewport, unreachable) */
@media (max-width:359px){
  #guidedLayer .gFoot.has-act{ grid-template-columns:minmax(0, 1fr) auto; }
  #guidedLayer .gFoot .gActBtn{ white-space:normal; min-width:0; }
}
/* GUIDE-2 (16 Sept 2026, law 44(c)) · the headline keeps its air at the top of
   a phone. Under the stage the scroller gives up its block padding and the
   bands carry the air themselves; the stylist's stops draw the question above
   their split, with no band, so at 390 the question stood on the screen's top
   edge (measured 0 px by two testers). */
@media (max-width:1023px){
  body.guided.gsee-stage #guidedLayer .gStep:has(> .gSlot > .gwalk-split) > .gQ{ margin-block-start:var(--space-600); }
}
/* GUIDE-2 (16 Sept 2026) · his own last answer, kept on the screen for the
   sitting under the house's reply; and the looks' composing line, which takes
   the guidance's own reading size because it is the one thing on that screen */
#guidedLayer .gguide-you{ margin:0; max-width:52ch; }
#guidedLayer .gstyle-composing{ margin:0 0 var(--space-400); max-width:52ch; }
/* the rhythm between the guidance and what follows it is the walk's own 32 */
#guidedLayer .gguide + .gwalk-q{ margin-block-start:var(--space-600); }

/* the dropdowns */
#guidedLayer .gsel-grid{ display:grid; gap:var(--space-400); grid-template-columns:1fr; }
/* three across only where each takes its longest label whole ("Warm rooms and
   summer" at the reading size needs about 190 px beside its chevron); measured
   at 1024 the three shared a 582 column and the third clipped its own words. */
@media (min-width:1200px){ #guidedLayer .gsel-grid{ grid-template-columns:repeat(auto-fit, minmax(236px, 1fr)); } }   /* GUIDE-2 · as many across as take their longest label whole */
#guidedLayer .gsel{ min-width:0; position:relative; }
#guidedLayer .gsel-wrap{ display:block; position:relative; }
#guidedLayer .gsel-native{
  display:block; width:100%; box-sizing:border-box;
  margin-top:var(--control-input-label-gap);
  height:var(--control-input-height);
  padding-inline:var(--control-input-padding-x) calc(var(--control-input-padding-x) + var(--space-400));   /* the chevron's own room; the scale has no 500 (judge-coherence B1) */
  background:var(--control-input-background);
  border:var(--control-input-border-width) solid var(--control-input-border-color);
  border-radius:var(--control-input-radius);
  color:var(--color-ink-primary);
  font-family:var(--font-family-sans-stack);
  font-size:var(--type-size-300);
  line-height:calc(var(--control-input-height) - 2 * var(--control-input-border-width));
  appearance:none; -webkit-appearance:none;
  cursor:pointer;
}
#guidedLayer .gsel-native:focus-visible{ outline:2px solid var(--color-ink-primary); outline-offset:2px; }
#guidedLayer .gsel-native:focus{ border-color:var(--control-input-border-color-focus); }
/* the chevron is drawn in the control's own ink, so it takes no colour of its own */
#guidedLayer .gsel-wrap::after,
#guidedLayer .gsel-details::after{
  content:""; position:absolute; right:var(--space-400); top:calc(var(--control-input-label-gap) + var(--control-input-height) / 2);
  width:8px; height:8px; box-sizing:border-box;
  border-right:var(--border-width-hairline) solid currentColor; border-bottom:var(--border-width-hairline) solid currentColor;
  transform:translateY(-70%) rotate(45deg); pointer-events:none; color:var(--color-ink-secondary);
}
#guidedLayer .gsel-details{ position:relative; }
#guidedLayer .gsel-details[open]::after{ transform:translateY(-30%) rotate(225deg); }
#guidedLayer .gsel-face{ list-style:none; display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#guidedLayer .gsel-face::-webkit-details-marker{ display:none; }
#guidedLayer .gsel-facetext{ display:block; overflow:hidden; text-overflow:ellipsis; }
/* the face opens IN PLACE into the walk's own word rows, one column, in
   flow: nothing floats over the page and no new construction is drawn
   (judge-coherence B2; REDUCE-1's precedent) */
#guidedLayer .gsel-menu{ margin-top:var(--space-300); grid-template-columns:1fr; }
#guidedLayer .gsel-menu .g2Row{ margin-top:0; }
#guidedLayer .gsel-hint{ display:block; margin-top:var(--space-200); }

/* the wardrobe's swatches: the colour is the cloth's own (a measured hex from
   the book, or the middle of his photograph); the pattern is drawn over it in
   the page's paper, faintly, so a stripe reads as a stripe at 28 px */
#guidedLayer .gstyle-swatch{
  display:block; width:28px; height:28px;
  background-color:var(--gstyle-sw);
  border:var(--border-width-hairline) solid var(--color-line-rule);
  border-radius:var(--radius-none);
}
#guidedLayer .gstyle-swatch[data-pattern="stripe"]{
  background-image:repeating-linear-gradient(90deg, transparent 0 5px, color-mix(in srgb, var(--color-surface-page) 45%, transparent) 5px 6px);
}
#guidedLayer .gstyle-swatch[data-pattern="check"]{
  background-image:repeating-linear-gradient(90deg, transparent 0 8px, color-mix(in srgb, var(--color-surface-page) 35%, transparent) 8px 9px),
                   repeating-linear-gradient(0deg, transparent 0 8px, color-mix(in srgb, var(--color-surface-page) 35%, transparent) 8px 9px);
}
#guidedLayer .gstyle-swatch[data-pattern="texture_melange"]{
  background-image:repeating-linear-gradient(45deg, transparent 0 2px, color-mix(in srgb, var(--color-surface-page) 22%, transparent) 2px 3px);
}
#guidedLayer .gstyle-swatch[data-pattern="print"],
#guidedLayer .gstyle-swatch[data-pattern="jacquard"]{
  background-image:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-surface-page) 40%, transparent) 0 2px, transparent 2.5px);
  background-size:9px 9px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAW 45 (16 September 2026) · THE PASS AFTER THE PASS. The head of design's
   seven, the reductionist's counts, the clarity judge's five, Lena's caret.
   ═══════════════════════════════════════════════════════════════════════════ */
/* B4 · the house's line is a line on paper above the plinth, ranged left in the
   reading size: never a bordered, centred box floating over the suit. */
#guidedLayer .gSay{
  left:var(--layout-margin-compact); right:var(--layout-margin-compact);
  width:auto; max-width:none; margin:0;
  padding:var(--space-100) 0;
  border:0; text-align:left;
}
/* B5 · once a reply is on the screen the question is spoken, not printed on a
   hoarding: it drops to the large reading size and the stage takes its short
   height, so the answers stand on the first screen of a phone and a tablet. */
#guidedLayer .gStep[data-step="purpose"]:has(.gguide-you) > .gQ{
  font-size:var(--type-size-500); line-height:var(--type-line-height-500);
}
@media (max-width:1023px){
  body.guided.gsee-stage #guidedLayer .gStep[data-step="purpose"]:has(.gguide-you) .gsee-window{
    height:min(24svh, 200px);
  }
}
/* B8 · the serif returns to exactly one class of thing: the name of a cloth and
   the name of a suit. A tailor writes the cloth's name in his book by hand.
   GUIDED-4's sweep (above, at the wordmark) is overruled here on the record:
   that ruling stood under "as little design as possible"; tonight's standard
   is the owner's, later and different. Nowhere else: not headlines, not UI. */
#guidedLayer .gstyle-card .g2Name,
#guidedLayer .gstyle-book .g2Name,
#guidedLayer .gsee-rows .g2Name,
#guidedLayer .gfin-clothname{
  font-family:var(--font-family-serif-stack);
  font-weight:400;
  letter-spacing:0;
}
/* Lena · a white shirt on a white ground needs its hairline */
#guidedLayer .gwalk-shirt .g2Plate{ box-shadow:inset 0 0 0 var(--border-width-hairline) var(--color-line-rule); }
/* the clarity judge · a phone number never breaks across a line */
#guidedLayer .gfin-tel{ white-space:nowrap; }