/* builder.css — the builder's glue over the style reset's winner (tokens.css + system.css; PLAN row 6b, 2026-10-05).
   system.css carries the components (the groups and their summary rows, chips, detailed choices, the option card with
   its swatches, fields, the time field, buttons, the strip and its truth bar, the crop editor, the cart); this file
   only fits the real page to them: B2's preview component in the look pane and in the strip's three modes, the style
   rail you can judge a style by, the field messages, the phone/desk split. Values come from the tokens. */

[hidden] { display: none !important; }
.b-skip { position: absolute; left: -9999px; }
.b-skip:focus { left: 8px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 70; }
fieldset.b-fs { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.b-fs > legend { padding: 0; }
legend.label, p.label { display: block; font-size: 14.5px; font-weight: 500; margin: 0 0 6px; }
legend.label.q, p.label.q { color: var(--ink-2); font-weight: 400; }
.chips + .label, .options + .label, .hint + .label, fieldset.b-fs + fieldset.b-fs > legend, .b-after + fieldset.b-fs > legend { margin-top: 14px; }
.b-preview-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.b-noscript { padding: 16px; }

/* ---------------------------------------------------------------- the page: the race's line, the promise, the gift */
/* the desk's page heading: the race's name, "Change race" on the column's right edge (the field pattern, 2026-10-07) */
.b-race { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0 0 2px; }
.groups .b-race a { flex: none; margin-left: 0; font-weight: 400; font-size: 14.5px; padding: 10px 0; margin-block: -10px; }   /* a 40 px tap, as the fields' Change (the visual seat's LOW-2) */
.b-promise { margin: 0 0 14px; }
header.tool .wordmark { padding: 4px 0; }

/* ---------------------------------------------------------------- the phone and the desk (the rig's 960 px line) */
@media (min-width: 960px) { .strip { display: none; } }
@media (max-width: 959px) {
  .builder > .look { display: none; }
  #main { padding-top: 12px; }
  /* the last group's room: the viewport under the strip, so any group's heading can sit under its edge (founder 2026-09-27, B5) */
  #group-list > .group:last-child { min-height: calc(100vh - var(--strip-h, 0px) - 12px); }
}

/* ---------------------------------------------------------------- the poster: one element, the look pane or the strip */
.b-poster { position: relative; }
.look .b-poster { margin: 0 auto; }
.look .b-poster .pp { max-width: none; }   /* the column sets the size (system.css caps .look .poster at 440) */
/* the desk (his notes 2026-10-08, his pick A the same evening): the poster alone in its column, kept whole in view while the
   questions scroll — sticky in the column's full height where it starts, level with the form's first heading, never riding
   up (his word 2026-10-09: 24 px from the window's edge looked cramped; --pz-stick, measured by builder.mjs, ≈ 84 px); narrower
   on a short screen so it stays whole, to the form's end; the framed sheet at most 4:3 plus its frame. Its column 480 px, 560 on a wide window (his word 2026-10-09 — the small print larger, the wall kept around it for
   the light); a size container, so an unframed caption can follow the paper's inset (5.5 % of the poster) */
@media (min-width: 960px) {
  .builder { grid-template-columns: minmax(320px, 480px) 1fr; }
  /* where its travel ends (6b5 (a), his option 2, 2026-10-09): level with the form's last element, the footer one gap (48 px) after
     the form; a form shorter than the poster (the review) — no travel, 72 px of wall under it (the shadow's reach). builder.mjs
     scrollEnd() measures the two and sets the column's height and its wall; on a short window the poster's top may leave the screen
     at the very foot (his word) */
  .builder > .look > #poster-home { height: var(--pz-travel, auto); }
  .look .b-poster { position: sticky; top: var(--pz-stick, 84px); max-width: min(100%, calc((100vh - var(--pz-stick, 84px) - 100px) / 1.34)); container-type: inline-size; }   /* 100 px: whole to the form's end on a 680 px window, the footer in and the shadow's grey under it (28 px let it ride 37 px off the top) */
  .builder > .look { padding-bottom: var(--pz-wall, 72px); }   /* the wall under the poster where its travel ends (was 72 px always: the visual seat's MEDIUM, 40 px cut the shadow at the footer) */
}
@media (min-width: 1440px) {
  body.builder-page { --maxw: 1280px; }   /* the header, the form and the footer on one edge — and the look's bleed (system.css) reckoned from it (the code seat's MEDIUM: the poster sat 40 px off the grey's centre) */
  .builder { grid-template-columns: minmax(320px, 560px) 1fr; }
}
.b-poster > .cap { margin: 12px 0 0; text-align: center; text-wrap: balance; }   /* no word alone on its last line (8e2's line) */
.b-fail { margin: 10px 0 0; }
.b-fail .recover { margin: 0; }
/* Edit photo on the placed photo (the rig's .onphoto): a pencil alone in the photo space's bottom-right corner, inset with
   the poster (row 10h2, his pick 1 C — the centred pill covered the photo's middle; the top right is the zoom button's) */
.poster .onphoto.b-edit-photo { --in: clamp(4px, 1.8cqw, 9px); transform: translate(calc(-100% - var(--in)), calc(-100% - var(--in))); width: clamp(28px, 9cqw, 36px); height: clamp(28px, 9cqw, 36px); min-height: 0; padding: 0; justify-content: center; border: 0; cursor: pointer; z-index: 2; }
.poster .onphoto.b-edit-photo svg { width: 52%; height: 52%; }
.poster .onphoto.b-edit-photo::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }   /* a 44 px tap on a phone's 28 px mark (the code seat) */
.poster .onphoto.b-edit-photo:hover { background: rgba(0,0,0,.8); }
/* the photo can't print as it is: the form's red "!" in the pencil's place (his look at 10h2's preview, card 4 B) */
.poster .onphoto.b-edit-photo.b-mark-warn, .poster .onphoto.b-edit-photo.b-mark-warn:hover { background: var(--error); font: 700 clamp(14px, 4.6cqw, 18px)/1 var(--font-ui); }
/* … and when the photo itself is too small, greyed on the poster as on the card (.b-dim) */
.pp-sheet.b-photo-grey .pp-photo { filter: url(#pz-grey); opacity: .6; }   /* an SVG filter (builder.mjs): WebKit ignores a CSS grayscale() on an SVG child (the last seat) */
.poster .onphoto.b-edit-photo:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }   /* two-tone, as the editor's canvas: seen on a pale corner of the photo and a dark one (10h2's visual seat) */

/* the strip's view: the poster is its one child, shown per mode (system.css hides the rig's own children) */
.strip[data-mode] .view > .b-poster { display: block; }
.strip .view { position: relative; }
/* footer: the poster's footer on the product's grey, the paper inset (his second look at 6b: Engrave's and Plate's white
   paper ran into the page around it — the grey comes with the poster, as in the full mode); the paper edge to edge of its own box — the band's content, 286–382 of the sheet's 400 mm (the panels
   end at 281; the title's first line sits at ~300, the times' sub-lines end by ~375), not its bottom margin (the visual QA:
   the whole band made the strip 300 px at rest against §11.5's 254) */
.strip[data-mode=footer] .view { padding: 6px var(--gutter-phone) 8px; background: var(--ground-product); }
.strip[data-mode=footer] .b-poster { aspect-ratio: 300 / 96; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 0 0 1px var(--sheet-edge); }
.strip[data-mode=footer] .pp-slot { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 3 / 4; transform: translateY(4.5%); }
.strip[data-mode=footer] .pp .sheet { padding: 0; background: none; box-shadow: none; }
.strip[data-mode=footer] .pp .sheet::after, .strip[data-mode=footer] .poster.pp button.pp-zoom, .strip[data-mode=footer] .b-edit-photo,
.strip[data-mode=footer] .b-poster > .cap, .strip[data-mode=footer] .b-fail { display: none; }
.strip[data-mode=footer] .pp .pp-sheet { box-shadow: none; }
/* The footer's window (286–382 of the sheet) lies inside the live footer's paper (from FOOTER_TOP, 281.5 — poster-preview.mjs):
   the picture under it is never seen in this mode, so it is not painted, and a 900 px picture waiting on its download behind
   the paper is no longer the first screen's largest paint (row 7's preview smoke: the phone's LCP 2.9 s) — the form, drawn
   in the same frame as the footer, is */
.strip[data-mode=footer] .pp picture { visibility: hidden; }
/* The first paint on a phone holds Your race's strip (row 7's preview smoke: 6l opened Your race with the footer — his pick
   3 A — and the strip grew 136 px under the first paint, Lighthouse's CLS 0.149): the footer's view, its height and its grey,
   until the script puts the poster in it, the rule above the truth line, and the step buttons' row; the view's and the rule's
   not where the builder opens at the review (`?line=`: the Worker's b-from-line — folded there) */
@media (max-width: 959px) {
  /* the footer's own box (its padding, a 300 : 96 child at the view's width — as .b-poster in the footer mode), not arithmetic
     on the viewport: exact at any width, zoom or scrollbar (the code seat's LOW-1) */
  body.builder-page:not(.b-drawn):not(.b-from-line) .strip .view { padding: 6px var(--gutter-phone) 8px; background: var(--ground-product); }
  body.builder-page:not(.b-drawn):not(.b-from-line) .strip .view::before { content: ""; display: block; aspect-ratio: 300 / 96; }
  body.builder-page:not(.b-drawn):not(.b-from-line) .strip .truth { border-top: 1px solid var(--hairline); }   /* the footer's rule above the line (folded, it has none) */
  body.builder-page:not(.b-drawn) .strip .segbar .segs { min-height: 23px; }   /* the step buttons' row before they are drawn: 3 px + 20 px of tap (system.css .seg) */
}
/* full: the framed poster at ≈ 270 px tall (W8 note 10) on the product grey */
.strip[data-mode=full] .view { display: grid; place-items: center; padding: 14px var(--gutter-phone) 6px; }   /* 14: room for the zoom out over the frame's corner (8e2) — the view clips */
.strip[data-mode=full] .b-poster { width: calc(min(270px, 34vh) / 1.297); max-width: 100%; }
.strip[data-mode=full] .b-poster > .cap { font-size: 12.5px; margin-top: 8px; }
/* the caption in the strip's full view: what the picture is — an undrawn race's location map (§11.10 item 8), and on a drawn
   race, where the course or year chosen isn't the drawing's, the line of what we'll draw (8e2, his pick A) */
.strip[data-mode=full] .b-undrawn { width: auto; max-width: 100%; }
.strip[data-mode=full] .b-undrawn .pp-slot { width: calc(min(270px, 34vh) / 1.297); margin: 0 auto; }
/* the stand-in sheet's note, larger in the strip — ~0.6 px a unit there (his note, 2026-10-06: it read ~5 px) */
.strip .pp-standin text { font-size: 22px; }   /* user units of the sheet's viewBox: ≈ 13.6 px on a phone, 11.4 on a 667 px one (6b4's visual seat, LOW-1) */
/* collapsed: the style · price line alone */
.strip[data-mode=collapsed] .view > .b-poster { display: none; }
.strip .truth .link-btn { white-space: nowrap; min-height: 28px; padding: 3px 0; margin: -3px 0; font-size: 13.5px; }   /* the rig's truth line: 28 px target, 39 px bar */
.strip .readback .bad { color: var(--error); font-size: 12.5px; }

/* ---------------------------------------------------------------- the look: the style rail, the format */
.b-look-form .grouplabel { margin: 0 0 14px; }   /* 20 px from a label to its choices with their own 6 (his note 2026-10-10: the style examples' room, Format's to match) */
.b-look-form .b-rail { margin-top: 6px; }   /* a drawn race's tiles bring their 6 too (the code seat's MEDIUM-1: 14 px); under the examples' row it collapses into its 8 */
.b-look-form p.grouplabel { margin-bottom: 20px; }   /* a pilot's fixed Format: its margin and the options' 6 collapse — 20 on its own */
.b-look-form > :is(fieldset, p.grouplabel) { margin-top: 22px; }
#look-in-style .b-look-form > :first-child { margin-top: 0; }
.b-rail.rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 440px; }
@media (min-width: 960px) { .b-rail.rail, .b-look-form .options { max-width: none; } .b-rail.rail { gap: 18px; } }   /* the desk's step: the questions' column to its edge, the styles larger to judge them by (the visual seat's NIT-1) */
.b-style { position: relative; display: block; text-align: center; font-size: 13.5px; line-height: 1.3; color: var(--text-3); cursor: pointer; }
.b-style input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.b-rail .b-style .poster { display: block; width: 100%; margin: 0 0 7px; aspect-ratio: 3 / 4; }
.b-rail .b-style .poster .sheet, .b-rail .b-style .poster img { height: 100%; }   /* the tile's box is its own: a picture that fails keeps it (Safari drew a failed one square, and the step's Continue moved under a tap — 8f2) */
/* The first paint is the poster alone (the form is the script's): the main held a screen tall until it is drawn, so the legal
   footer starts below the fold and is never pushed down in view (6g: Lighthouse's CLS 0.22 on a phone); without the script
   the footer is still there, a scroll away */
body.builder-page:not(.b-drawn) #main { min-height: 100svh; }
.b-style .poster .sheet { display: block; position: relative; }
.b-style .b-foot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }   /* the footer composed live over the baked one (6g) */
.b-style .poster img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; }
.b-style .poster.unframed img, .b-style .poster.unframed .b-noface { box-shadow: 0 0 0 1px var(--sheet-edge), 0 1px 3px rgba(0,0,0,.14); }   /* the paper's edge: the style alone, no frame */
.b-style:hover { color: var(--ink); }
.b-style:has(input:checked) { color: var(--ink); font-weight: 600; }
/* the chosen style: a ring with a gap, the frame-colour swatches' own idiom (his second look at 6b: the tight black ring
   read as a black frame, and vanished on Night's dark paper) — the gap shows the ground, so it reads on every paper */
.b-style:has(input:checked) .poster { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }   /* rounded: a selection, never a frame (the visual QA's watch) */
.b-style:has(input:focus-visible) .poster { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.b-style:has(input:focus-visible) > span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.b-noface { display: block; aspect-ratio: 3 / 4; background: var(--paper-warm); }
.b-stylenote { margin: 10px 0 0; }
/* "See style examples" for a race we draw after the order: on the "Poster style" label's row, at its right end, desk and phone
   (6b5 (c), his note 2026-10-09: under the location maps it floated, not grouped with them); the label names the choice alone */
.b-stylehead { display: flex; align-items: center; justify-content: space-between; gap: 4px 16px; margin: -12px 0 8px; }   /* the 40 px link centred on the label's line, the label where the legend sat; 8 px clear of the tiles, 20 from the label (his note 2026-10-10: a hover read as one on Plate) */
.b-stylehead > .grouplabel { display: block; margin: 0; }
/* the style's group closes 24–32 px above Format, its promise 8–12 px under its choices (a UX review, his yes 2026-10-08) */
fieldset.b-stylegroup { margin-bottom: 28px; }
fieldset.b-stylegroup + fieldset.b-fs > legend, fieldset.b-stylegroup + .grouplabel { margin-top: 0; }
.option.b-fixed { cursor: default; }
@media (max-width: 959px) { .b-rail.rail { gap: 12px; padding-inline: 5px; } }   /* the selected ring (5 px out) stays inside the gutter and off its neighbours */

/* ---------------------------------------------------------------- the race's line: the page heading on the desk; on the phone
   no race line (his word 2026-10-19, 6l B: the footer in the strip says the race; his sheet C09's line in Your race retired),
   the heading kept for screen readers */
@media (max-width: 959px) {
  .b-race { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
  .b-race a { display: none; }   /* nothing focusable out of sight: no Change race on a phone (6l B) */
  .b-promise { display: none; }  /* the review carries the promise (the rig's phone page starts with the groups) */
  /* the step's name said once (6l, his pick 1 A 2026-10-19): the stepper says it; the open step's own heading out of sight,
     kept for screen readers and the focus; the steps done and to come keep theirs */
  .group:not(.next):not(.done) > .ghead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
  /* no rule under the strip where nothing sits above the first step (a pilot's link: no gift) */
  #gift-top[hidden] ~ #group-list > .group:first-child:not(.done) { border-top: 0; }
}

/* ---------------------------------------------------------------- the order just placed (6l, his pick 4 B 2026-10-19):
   the notice alone, "Start another poster" under it on its own line; the builder and the poster out of sight until then */
.b-placed { margin: 4px 0 14px; }
.b-placed .b-placed-h { font: 600 16px/1.35 var(--font-ui); margin: 0; }
.b-another { margin: 0 0 24px; }
.b-placed-on #strip, .b-placed-on .builder > .look, .b-placed-on #groups > :not(.b-placed):not(.b-another), .b-placed-on .b-skip { display: none; }
.b-placed-on .builder { display: block; }   /* one column: the desk's poster column is out of sight (the code seat's L2) */
@media (min-width: 960px) { .b-placed-on #groups { max-width: 560px; padding-top: 40px; } }

/* ---------------------------------------------------------------- the groups */
.sum h2.sh { margin: 0; }
.sum p.ss { margin: 0; }
.group.done .sum { cursor: pointer; }
.group.done > .b-error { margin: 0 0 10px; }
.group.b-problem .sum .sh::before { content: none; }   /* no ✓ over a group's own error (his second look at 6b) */
.body > .field, .body > fieldset.b-fs { max-width: 560px; }
/* ---------------------------------------------------------------- the field pattern (his word 2026-10-07, after a
   third-party UX review of Your race): one pattern at both widths — the label on its own line in the secondary colour,
   regular; the value under it, 6 px down, semibold; Change on the column's right edge; 22 px between fields; no card per
   field. Name and time's labels take the same style (the consistency pass); its checkboxes and chips stay controls. */
.b-field, fieldset.b-fs.b-field { margin: 0 0 22px; }
.body .b-fl, .body .field > label:not(.check), .body legend.label { display: block; padding: 0; margin: 0 0 6px; font-size: 14.5px; font-weight: 400; line-height: 1.35; color: var(--text-3); }
.b-fv { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; font-size: 16px; line-height: 1.4; }
.b-fv > b { min-width: 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.b-fv > .link-btn { flex: none; font-size: 14.5px; padding: 10px 0; margin: -10px 0; }   /* Change: a 44 px tap without moving the line */
.b-field > .chips, .b-field > .options { margin: 0; }
.body fieldset.b-field > legend.b-fl { margin-top: 0; }   /* never the 14 px of fieldset + fieldset (the code seat's LOW-5) */
/* the course's legs, a column each: the leg's name over its distance (each pair kept together) */
.b-legs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 16px; max-width: 420px; margin: 8px 0 0; }
.b-legs dt { font-size: 14px; line-height: 1.35; color: var(--text-3); }
.b-legs dd { margin: 2px 0 0; font-size: 15px; line-height: 1.4; color: var(--text); white-space: nowrap; }
.b-draw { margin: 10px 0 0; }   /* what we'll draw, under Course — on a phone (the poster folded while choosing); the desk says
   it under the poster (8e2) */
@media (min-width: 960px) { .b-draw { display: none; } }
.b-field > .field.date { margin: 10px 0 0; }
.b-field.total { margin-bottom: 0; }   /* its hints follow it */
/* the exception, quiet: small, under a divider (his word 2026-10-07) */
.b-note { margin: 0 0 12px; padding-top: 14px; border-top: 1px solid var(--hairline); }
/* 9h2 (his pick 3 A): the race-details link the Course block's last line — quiet, no divider */
.b-note.b-note-course { margin: 10px 0 0; padding-top: 0; border-top: 0; }
.b-note-course + #f-note-box { margin-top: 10px; }
/* 9h2 (his idea 2026-10-30): a course or an answer by its headline until chosen; the chosen box opens under its text column
   (14 + 20 + 12, the framed option's swatches) — its distances, km or miles, "Change the distances", the route's action */
.option-card > .b-open { padding: 0 14px 12px 46px; margin-top: -6px; display: flex; flex-direction: column; gap: 6px; }
.b-open > p { margin: 0; }
.b-open .b-dline { color: var(--text-3); font-size: var(--small); line-height: 1.4; }
.b-open .b-units .link-btn, .b-units-fact .link-btn { font-size: 14px; padding: 10px 0; margin: -10px 0; }   /* a 40 px tap, as the note's */
.b-units-fact { margin: 4px 0 0; }   /* with the legs it follows; the note a line apart (LOW-6) */
.b-units-fact + .b-note-course { margin-top: 14px; }
.b-open > .b-field, .b-open > #b-own-cat > .b-field, .b-open .b-fs, .b-open fieldset.b-fs.b-field { margin: 6px 0 0; }   /* the field pattern's 22 px kept outside the box (MEDIUM-1) */
.b-open fieldset.b-fs > legend { margin-bottom: 6px; }
.b-open > p.b-msg:empty { display: none; }
#b-route .b-route-line { font-size: var(--small); color: var(--text-3); }   /* the files' line a hint in the own race's box too (.reqblock p won — the visual seat's A) */   /* no gap for an empty message (LOW-5) */
.b-open .row { font-size: 14.5px; gap: 4px 12px; }   /* the own race's route row (.course .row) in a box too (MEDIUM-2) */
.b-open .b-help { font-size: 14.5px; white-space: nowrap; }
.b-open .row small { font-size: 13.5px; }   /* "GPX, TCX or FIT" at the system's small size (the re-check's LOW) */
.b-open .b-km input { padding-inline: 6px; }   /* "180.25" whole in a box's narrower field (the re-check's LOW; as 320 px's L5) */
.b-open .b-dists { gap: 0 8px; } .b-open .b-km { gap: 3px; }
.b-open .b-help { display: inline-block; padding: 10px 0; margin: -10px 0; }   /* 44 px taps, as the own race's */
.b-open .b-linkbox { margin: 0; }
.b-open .b-linkbox > .hint { margin: 0 0 8px; font-size: 14px; color: var(--text-3); }
.field .labelcheck.b-dayunknown { margin: -4px 0 -14px; }   /* over system.css's .field .labelcheck (the re-check's LOW-4) */   /* the date's tick, under its field (9h2; the mock-ups' measure) */
.b-note .link-btn { font-size: 14px; padding: 10px 0; margin: -10px 0; }   /* a 40 px tap (the visual seat's LOW-1) */
.b-earlier { width: auto; min-width: 220px; min-height: 44px; max-width: 100%; }   /* as wide as the date under it (9h, the visual seat's LOW) */
.b-fhint.b-under { margin: 6px 0 0; }   /* a year we don't hold: the hint under its date (9h) */
/* three race years and Earlier on one row at 320 px (9h, his note on card 2): the year chips a little tighter on the narrowest phones */
@media (max-width: 359px) { .b-years .chip { padding-inline: 11px; } }   /* the chips' own gap kept: a selected ring clear of its neighbour (the visual seat's LOW) */
.course .ok { font-weight: 700; }
/* the compact Your race (his call 2026-10-07): the courses as wide as the longest option, not the column's width */
.options.b-courses { width: fit-content; max-width: 100%; }
/* 9h2 (his idea 2026-10-30, headlines until chosen): still as wide as the longest option — an open box never widens the group (the
   visual seat's MEDIUM-3: it changed width with each choice); at least wide enough for a chosen course's distances and fields */
.options.b-courses { min-width: min(100%, 352px); }
.option-card > .b-open { contain: inline-size; }
.b-courses .option { grid-template-columns: 20px minmax(0, 1fr); }   /* no price column: the inside edges even (the visual QA) */
@media (max-width: 599px) { .options.b-courses { width: auto; } }   /* the phone: the column's width, short of it read as an offset (the visual QA) */
/* the route recording under the course line (6b2): the action, the files used, the intake's reply, its notes */
.course .b-file { display: inline-flex; align-items: center; min-height: 32px; }
.course .row .link-btn { min-height: 32px; }
.b-route-files { margin: 6px 0 0; font-size: 14.5px; color: var(--text-2); overflow-wrap: anywhere; }
/* the files held, one a line with what each gave and its Remove (row 9i, his picks 2026-10-30: cards 1 B, 2 A) */
.b-route-list { list-style: none; margin: 8px 0 6px; padding: 0; border-top: 1px solid var(--hairline); }
.b-route-list li { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--hairline); }
.b-route-fn { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 14.5px; color: var(--text-2); }
.b-route-gave { display: block; font-size: 13.5px; color: var(--text-3); }
.b-route-list .link-btn { flex: none; padding: 9px 0; margin: -9px 0; }   /* a 44 px tap without moving the line (the visual seat's 1) */
.b-open .b-route-list .link-btn { font-size: 14.5px; }   /* a year we don't hold's box: the size of its actions (the visual seat's 2) */
#b-route .row.b-route-acts { justify-content: flex-end; gap: 4px 16px; }   /* on the right edge in every box, as the own race's (D05; the visual seat's 2) */
#b-route .row.b-route-acts .link-btn { min-height: 32px; }
#b-route .row.b-route-acts .b-file { display: inline-flex; align-items: center; }   /* on the help link's line in every box (the visual re-check: 4 px low in a year's box) */
.b-open .b-route-list .link-btn { padding: 10px 0; margin: -10px 0; }   /* a 44 px tap at its 14.5 px (the visual re-check's LOW) */
#b-route .b-route-lost { margin: 4px 0 0; }
.b-route-reply { margin: 4px 0 0; font-size: 15px; line-height: 1.45; max-width: var(--measure); }
.b-route-reply.note { color: var(--text-2); }
#b-route .busy { margin: 4px 0 0; font-size: 14.5px; color: var(--text-2); }
#b-route .hint, #b-route .b-error { margin: 6px 0 0; max-width: var(--measure); }
/* the visual QA (2026-10-06), measured: a long file name breaks inside its line, never past the screen (the flex row's
   text span kept its full width — 611 px of page on a 390 px phone); the detail stays with its link when the row wraps
   (the rig's 15 px, not the row's gap); the help link whole; each file name whole where it fits on a line */
#b-route .b-error > span { min-width: 0; overflow-wrap: anywhere; }
#b-route .hint { overflow-wrap: anywhere; }
#b-route .b-error a { white-space: nowrap; }
.course .row { row-gap: 0; }
#b-route .row + .b-error, #b-route .row + .hint { margin-top: 10px; }
.b-route-files .fn { display: inline-block; max-width: 100%; }
/* the own race (PLAN row 6b3): its fields in the field pattern; the distances a column each, the leg over its field; the
   route recording the rig's required group (system.css .reqblock), its help beside the action, the way out under it */
.b-fhint { margin: -2px 0 12px; font-size: 14px; color: var(--text-3); }   /* nearer its label than its field: 12 px to the field (part 3's visual seat, LOW-1 — the total's and Race name's alike) */
#f-category { width: auto; min-width: 220px; max-width: 100%; min-height: 44px; }
.b-dists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; max-width: 420px; }
.b-dists .field { margin: 0; }
.body .b-dists .field > label { margin-bottom: 4px; }
.b-km { display: flex; align-items: center; gap: 6px; }
.b-km input { width: 100%; min-width: 0; min-height: 44px; }
.b-km > span { font-size: 15px; color: var(--text-2); }
.b-dists > p { grid-column: 1 / -1; }   /* each message a row under the three, whatever say() names it */
.b-dists > p:empty { display: none; }
@media (max-width: 359px) { .b-dists { gap: 0 8px; } .b-km { gap: 3px; } }   /* 320 px: "180.25" whole in its field (the visual seat's L5) */
/* every date field sized to what it holds, as the category (the visual seat's L3) — the input, not its message (the re-check's N1);
   the gift's too, which took the column and on his iPhone ran past it (his look at 8db1bfd4, 2026-10-10) */
.body .field.date input[type=date] { max-width: 220px; min-width: 0; }
@media (max-width: 389px) { .b-km input { padding-inline: 6px; } }   /* "180.25" whole at 320–375 (the re-check: L5 not yet held) */
.b-required .b-error { color: var(--error); font-size: 14px; margin: 6px 0 0; }   /* never the group's grey (the visual seat's M1: .reqblock p won) */
.b-required .b-help { display: inline-block; padding: 10px 0; margin: -10px 0; }   /* 44 px taps (the visual seat's L6) */
.b-required .check.b-share { align-items: flex-start; margin: 12px 0 0; }   /* the box by the label's first line (the visual seat's L2) */
.b-required .b-share input { margin-top: 2px; }
/* a field the focus moves to (Continue's error) shows its label below the phone's strip (the visual seat's M2) */
.body .b-field :is(input, select, textarea) { scroll-margin-top: 32px; }
.b-required { max-width: 560px; }
.b-required .lab .req { color: var(--text-3); font-weight: 400; }
.b-required .b-file { display: inline-flex; align-items: center; min-height: 32px; }   /* as the course line's (6b2) */
.b-required .row .link-btn { min-height: 32px; }
.b-required .ok { font-weight: 700; }
.b-required .b-help { font-size: 14.5px; white-space: nowrap; }
.b-required .row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.b-required .b-share { font-size: 14.5px; line-height: 1.4; max-width: var(--measure); }
/* his cull of 6b3 (2026-10-07): the category's part patched in place, laid out as before (T01); the one required action a
   button at full tap size (D02); the actions on the group's right edge, as the photo's (D05); a recording from another day
   a warning at the reply's size (C02) */
#b-own-cat { display: contents; }
.b-required .btn.b-file { min-height: 44px; }
.b-required .row.b-route-acts { justify-content: flex-end; gap: 4px 16px; }
.b-route-reply.b-warn { font-size: 14.5px; margin: 4px 0 10px; color: #7A4F00; }   /* the amber over .reqblock p's grey, a gap under it (the cull's visual seat: HIGH 1, MEDIUM 2) */
.b-warn.rv-note { margin: 8px 0 0 26px; }   /* the review's warnings at the rows' indent (its MEDIUM 3: .b-warn's margin won) */
.b-required.reqblock { max-width: none; }   /* the group to the column's edge on the desk, its actions with the photo's (its LOW 4) */
select[aria-invalid=true] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
/* 6b4 (a) — the course from a link (founder 2026-10-08): the question under the upload, at a full tap; the field under it,
   its label over its hint over the input, as the group's own lines */
.b-required .b-linkq { margin: 6px 0 0; font-size: 14.5px; }
.b-required .b-linkq .link-btn { display: inline-flex; align-items: center; min-height: 44px; text-align: left; }
.b-required .b-linkbox { margin: 8px 0 0; max-width: var(--measure); }
.b-required .b-linkbox > .hint { margin: -2px 0 12px; font-size: 14px; color: var(--text-3); }   /* as Race name's hint (.b-fhint — .reqblock p had won: the visual re-check) */
.b-required .b-linkbox .b-warn { color: #7A4F00; font-size: 14px; margin: 6px 0 0; }   /* a link beside a recording that isn't one: the warnings' amber, under the field as an error (the visual re-check: .reqblock p's grey had won) */
.b-required .b-linkbox input { width: 100%; min-height: 44px; }
.b-required .b-linkbox .b-msg:empty { display: none; }
/* 6b4 (b) — "Check this route recording" (a third-party UX review, his yes 2026-10-08): a restrained amber notice under the
   file, never the error's red; its table's pairs on one row at every width, a value wrapping inside its cell (b-rcheck:
   .b-check is the builder's checkboxes') */
.b-rcheck { margin: 12px 0 0; padding: 12px 14px 10px; border: 1px solid #E2D2A6; border-left: 3px solid #7A4F00; border-radius: var(--radius); background: #FCF8EC; }
.b-rcheck-h { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 600 15px/1.35 var(--font-ui); color: #7A4F00; }
.b-rcheck-i { display: inline-flex; flex: none; }
.b-required .b-rcheck p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.b-rcheck-t { width: 100%; border-collapse: collapse; margin: 2px 0 10px; font-size: 14.5px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.b-rcheck-t :is(th, td) { padding: 6px 10px 6px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline); }
.b-rcheck-t thead th { padding-top: 0; font-size: 13.5px; font-weight: 500; color: var(--text-3); }
.b-rcheck-t tbody th { font-weight: 500; white-space: nowrap; }
.b-rcheck-t :is(th, td):last-child { padding-right: 0; }
.b-required .b-rcheck .row.b-rcheck-acts { gap: 0 18px; justify-content: flex-end; }   /* actions on the right edge, as the file's above (the visual seat's LOW-5) */
.b-required .b-rcheck .row.b-rcheck-acts .link-btn { min-height: 44px; }   /* a full tap (his notes 2026-10-08, the UX review's 3) */
/* a phone: the actions stacked at the notice's left, one under the other (the same review: "Edit distances" wrapped alone to the right) */
@media (max-width: 959px) { .b-required .b-rcheck .row.b-rcheck-acts { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; } }
/* 6b4 (c) — "See style examples" with the style buttons (his word 2026-10-09): after Plate on their row, centred on them; under
   them at the column's left where the row is full (a phone) */
.b-stylerow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 6px 0 0; }
.b-stylerow > .chips { flex: 0 1 auto; min-width: 0; margin: 0; }
.b-examples-open { min-height: 40px; display: inline-flex; align-items: center; font-size: 14.5px; }
/* the dialog at the desk: the four examples across (two by two on a narrow desk), each with its name and its Use */
dialog.b-examples { width: min(1040px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px); padding: 22px 28px 28px; border: 0; border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sheet); overflow: auto; }
dialog.b-examples::backdrop { background: rgba(23, 23, 23, .55); }
.b-ex-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.b-ex-top h2 { margin: 0; font: 600 17px/1.3 var(--font-ui); }   /* as Edit photo's (system.css): the builder's headings are Inter (the visual seat's LOW-4) */
.b-ex-close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-right: -10px; border: 0; background: none; color: var(--ink); font-size: 20px; cursor: pointer; }
.b-ex-close:focus-visible, .b-ex-names button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.b-ex-lead { margin: 4px 0 20px; max-width: var(--measure); font-size: 15px; color: var(--ink-2); }
.b-ex-names, .b-ex-bar { display: none; }
.b-ex-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.b-ex-pic { display: block; aspect-ratio: 3 / 4; }   /* the example's box is its own: a picture that fails keeps it (8f2: Safari shrank the dialog, and its ✕ moved under a tap) */
.b-ex-item img { display: block; width: 100%; height: 100%; box-shadow: 0 0 0 1px var(--sheet-edge), 0 1px 3px rgba(0, 0, 0, .14); }
.b-ex-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 10px 0 8px; font-size: 15px; }
.b-ex-sel { font-size: 13.5px; color: var(--text-3); }
/* the selected example ringed, the rail's own idiom (his notes 2026-10-08, the UX review's 4: "Selected" alone was easy to miss) */
.b-ex-on img { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.b-ex-use { width: 100%; }
/* a phone: the whole screen; one example at a time with the next peeking, the names in step, one Use for the one shown */
@media (max-width: 959px) {
  dialog.b-examples { width: 100vw; height: 100dvh; max-height: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none; overflow: hidden; }
  dialog.b-examples[open] { display: flex; flex-direction: column; }
  .b-ex-top { padding: 8px 8px 0 16px; }
  .b-ex-close { margin-right: 0; }
  .b-ex-lead { margin: 2px 16px 10px; font-size: 14.5px; }
  .b-ex-names { display: flex; padding: 0 16px; border-bottom: 1px solid var(--hairline); }   /* on the 16 px gutter (the visual seat's NIT) */
  .b-ex-names button { flex: 1; min-height: 44px; border: 0; border-bottom: 2px solid transparent; background: none; font: 500 15px/1 var(--font-ui); color: var(--text-3); cursor: pointer; }
  .b-ex-names button[aria-current=true] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
  .b-ex-track { display: flex; flex: 1; min-height: 0; gap: 12px; padding: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
  .b-ex-track::-webkit-scrollbar { display: none; }
  .b-ex-item { flex: 0 0 min(84%, calc((100dvh - 300px) * .75)); scroll-snap-align: start; }   /* larger, the next still peeking (the visual seat's LOW-6); the poster whole on a short phone too */
  .b-ex-item .b-ex-use { display: none; }
  /* his note on the sheet (6b5 (d), 2026-10-09 — style_examples_modal.jpg): no name under each card (the tabs name it); "Use
     {style}" the page's primary button, close under the card — the track as tall as its card, the bar after it; the close a
     44 px round button with an outline; no pinch-zoom inside the sheet (a pinch broke its view) — the swipe and the scroll kept */
  .b-ex-track { flex: 0 0 auto; padding-bottom: 12px; }
  .b-ex-item .b-ex-meta { display: none; }
  .b-ex-bar { display: block; padding: 4px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); }
  .b-ex-usebar { display: flex; width: 100%; }
  .b-ex-top { padding: 10px 12px 0 16px; }
  .b-ex-close { width: 44px; height: 44px; padding: 0; border: 1px solid var(--control-border); border-radius: 50%; background: var(--surface); font-size: 17px; }   /* 1 px: Chrome drew 1.5 as 1, Safari as 1.5 (the visual seat's NIT) */
  dialog.b-examples, dialog.b-examples * { touch-action: pan-x pan-y; }
}
.b-ask { margin: 0 0 4px; }
.b-photo-actions { margin-top: 10px; }
.b-photo-actions .btn { flex: 1 1 220px; }
.b-file { position: relative; cursor: pointer; }
.b-file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.b-file:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* after a tap or a click, no ring on what the page focuses (his note 2026-10-09: a black box round "See style examples" back
   from the examples, and round Upload a file after Remove); the keyboard keeps every ring, text fields always keep theirs;
   the review's pointed fix keeps its own (6b's UX walkthrough) */
html[data-pz-input=pointer] :is(a, button, summary, [tabindex], .b-ex-names button):focus-visible:not(.rv-pointed),
html[data-pz-input=pointer] :is(.option, .sw):has(input:focus-visible),
html[data-pz-input=pointer] .b-file:focus-within { outline: none; }
html[data-pz-input=pointer] .b-style:has(input:focus-visible) .poster { outline: 2px solid var(--ink); outline-offset: 3px; }   /* the chosen style's ring, not the focus's */
html[data-pz-input=pointer] .chip:has(input:focus-visible) { box-shadow: none; }   /* a chip's focus is its outer ring (system.css); its outline is the chosen ring and stays (6b5 (f)) */
/* the right pane itself (tabindex -1) never wears a ring: a click on its empty space focuses it, and a key after it (Space, an
   arrow to scroll) drew one round the whole form — his note 2026-10-09; a ring there says nothing */
#groups:focus { outline: none; }
/* a step's heading takes the focus when the step opens — for a screen reader, which says where it is; it is not a control, and a
   ring there read as an error box ("Review your order" — his note 2026-10-09, black_outline.png) — never one, from any input */
.groups :is(.ghead, .sh)[tabindex="-1"]:focus { outline: none; }
.b-dim { filter: grayscale(1); opacity: .6; }
.photo .acts .b-file { display: inline-flex; align-items: center; min-height: 32px; }
/* the thumbnail shows the whole photo in its own shape (his note, 2026-10-06: cut to the rig's 4:3 box, a portrait lost
   half its height) — the column's width, its height following the photo, a very tall one contained */
.photo { grid-template-rows: auto auto auto 1fr; }   /* a tall thumbnail's height goes to a last row, the text stays together (the visual QA) */
/* the photo card on the column's width, its actions on the column's right edge (the field pattern's consistency pass) */
.body > .photo { max-width: none; }
.photo .acts { justify-content: flex-end; }
.photo img.th { grid-row: 1 / -1; width: auto; max-width: 100%; height: auto; max-height: 128px; aspect-ratio: auto; object-fit: fill; }
.photo span.th { grid-row: 1 / -1; }
.upload progress { display: block; width: 100%; height: 6px; margin: 10px 0 8px; accent-color: var(--ink); }
/* a relay's names, then its times as their own question — spaced as "Your times" sits under the relay link (his note,
   2026-10-06: "The team's times" read as the names' last row) */
fieldset.b-fs.b-relay { margin-bottom: 24px; }
.b-relaytoggle { margin: 0 0 12px; }
.check.b-check { align-items: center; min-height: var(--target); margin: 6px 0 8px; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.check.b-check input { margin: 0; }
/* a leg's time as it prints, under its field (his word 2026-10-09): "On your poster", quiet, over the line as printed at body size
   in ink — the line is what the buyer checks (6b5 (e), his notes 2026-10-09: a third-party UX review; was all in the hint's size) */
.b-prints { margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.b-prints > span { display: block; }
.b-prints > .b-prints-l { font-size: 13px; line-height: 1.35; color: var(--text-3); }
.b-prints > .b-prints-v { margin-top: 1px; font-size: var(--body); line-height: 1.4; font-weight: 500; color: var(--ink); white-space: nowrap; }   /* never broken (the visual seat: it wrapped unevenly leg by leg) */
.b-prints[hidden] { display: none; }
/* a relay's three names across where each holds a name (168 px a column), one per row on a phone */
.legs { margin-top: 10px; row-gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); }
@media (max-width: 599px) { .legs { grid-template-columns: minmax(0, 1fr); } }
/* the leg TIMES one per row at every width (his look 2026-10-10: at the desk three across read busy — their "On your poster" lines
   in a row; the relay's names keep theirs — the code seat's M2), 16 px between the rows: a leg's label groups with its own field */
.legs.b-timelegs { grid-template-columns: minmax(0, 1fr); }
/* the one time hint (his notes 2026-10-10): an inset block "Entering times" before "Include leg times", every time field's — a thin
   grey rule at its left, 12 px in, on the page's own ground, ≈ 22 px of air above and below; how to type a time, how one reads, its
   heading and example times a shade stronger. Set apart from the total's description, which sits with its label (a UX review's) */
.b-timehint { margin: 22px 0 9px; padding: 1px 0 1px 12px; border-left: 2px solid var(--rule); max-width: var(--measure); font-size: var(--small); line-height: 20px; color: var(--soft); }   /* whole pixels: nothing under it on a half (the visual seat's NIT-2) */   /* 9 + the checkbox centred in its 44 px row ≈ 22 to the box */
.b-timehint > p { margin: 0; text-wrap: pretty; }   /* never "a time." alone on a line (the visual seat's LOW-1) */
.b-timehint > p + p { margin-top: 4px; }
.b-timehint > .b-timehint-h { font-weight: 600; color: var(--text-2); }
.b-timehint b { font-weight: 600; color: var(--text-2); }
.b-timehint + .check.b-check { margin-top: 0; }   /* the inset's own margin is the gap */
.field.time.total { max-width: none; }   /* its description on one line (the field's own width is .b-tin's — the code seat's L2: 240 px wrapped it) */
/* every time field, every width — the total and each leg (his notes 2026-10-10; was the phone's alone): its label (the total's
   description too) over its field, the line as printed beside it where the column holds both, under it where it doesn't —
   decided once for the column (one container width for the total and the legs), never field by field (the visual seat's
   MEDIUM-1 of 6b5: at 360 the swim's dropped under, the bike's stayed beside) */
.legs.b-timelegs, .field.time.total { container: pz-times / inline-size; }
.field.time { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.body .field.time > label { flex: 0 0 100%; margin: 0; }   /* the row gap alone, 6 px — .body .field > label's own 6 px would add to it in a flex box (the code seat's M1) */
.field.time > .b-fhint { flex: 0 0 100%; margin: -2px 0 6px; }   /* 4 px under its label, 12 px over its field, as in a block (the row gap is 6) */
.field.time > .b-tin { flex: 0 1 max(152px, 6em + 44px); min-width: 0; }   /* never wider than its column */
.field.time > .b-prints { order: 3; margin: 0; flex: 0 0 100%; }   /* under, until the column holds both */
.field.time > [id$="-err"] { order: 4; flex: 0 0 100%; margin-top: 0; }   /* by its id: a shown message's class is its kind's, not .b-msg (the re-check); 6 px under the field, the row gap (the code seat's L1) */
.field.time > [id$="-err"]:empty { display: none; }   /* no line of its own until it says something (the code seat's NIT) */
.field.time > .b-prints:empty { display: none; }   /* no time yet: nothing beside the field */
@container pz-times (min-width: 340px) { .field.time > .b-prints { flex: 0 1 auto; } }   /* 152 + 16 + the widest line, 168 */
/* the total's line in the poster's idiom: the unit letters small and grey (the footer's T1) */
.b-prints-v .b-unit { font-size: .72em; font-weight: 500; color: var(--text-3); margin-left: 1px; }   /* never heavier than the digits, as on the poster (the visual seat's NIT-2) */
.legs + .b-legscalc { margin-top: 14px; }
#group-list > .group:first-child:not(.done) { border-top: 1px solid var(--hairline); padding-top: 18px; }   /* the rig's rule above the first group */
.strip .readback .v .nowrap { white-space: nowrap; }
.field.total { margin: 6px 0 0; }
/* fields sized to what they hold (his second look at 6b: the total and the name ran the column's width) — a time
   h:mm:ss with its clear control; a name or a title the subtitle and the title line can carry */
.field.time .b-tin { max-width: max(152px, 6em + 44px); }   /* grows with the text where a phone scales it (the code seat's LOW-3) */   /* the total and every leg one compact width: a time and its clear control (his note 2026-10-10 — the legs ran the column on a phone; the total 190) */
#f-name, #f-lookup-name, #f-title { max-width: 360px; }
.b-bib .req { color: var(--text-3); font-weight: 400; }
/* the time field: the clear control inside the input's own box (the label above may wrap) */
.field.time .b-tin { position: relative; display: block; }
.field.time .b-tin .clear { top: 0; }
.field.time .b-tin input:disabled + .clear { display: none; }
.field.time.empty .clear { display: none; }
/* ---------------------------------------------------------------- the review (his UX review, 2026-10-06): one summary in
   sections — Your race · Name and times · Your photo · Your print — each with its status: ✓ in the trust green, or an
   outlined "!" (an unfinished choice, not a failure) with what stops it and its fix in a box on the error's tint. Every
   section on the column's edges, the marks in one column, the rows and the notes at one indent (his note, 2026-10-06:
   the whole section tinted and pulled 16 px out of the column — measured since by the journeys' reviewGeometry) */
.rv { border-top: 1px solid var(--rule-deco); padding: 14px 0; }
.rv-head { display: flex; align-items: baseline; gap: 12px; }
.rv-head h3 { flex: 1 1 auto; display: flex; align-items: baseline; gap: 8px; margin: 0; font: 600 15.5px/1.4 var(--font-ui); letter-spacing: 0; }
.rv-st { flex: none; width: 18px; text-align: center; color: var(--trust); font-weight: 700; }
.rv-bad .rv-st { align-self: center; display: inline-flex; height: 18px; color: var(--error); }   /* the mark drawn (an SVG): a glyph in a circle never centres — his note */
.rv-st svg { display: block; }
.rv .ed { white-space: nowrap; font-size: 14.5px; padding: 6px 2px; margin: -6px -2px; }   /* a 32 px tall target around the word */
.rv-rows { margin: 6px 0 0 26px; }
.rv-rows > div { display: grid; grid-template-columns: minmax(84px, 128px) minmax(0, 1fr); gap: 2px 16px; align-items: baseline; padding: 3px 0; }   /* "Title on the poster" whole (125 px), the values their room (the visual seat: 150 px pushed a long date off a phone) */
.rv-rows dt { font-size: 14.5px; color: var(--text-3); }
.rv-rows dd { display: flex; align-items: baseline; gap: 12px; margin: 0; font-size: 15px; min-width: 0; }
.rv-rows dd > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rv-line { margin: 6px 0 0 26px; font-size: 15px; overflow-wrap: anywhere; }
.rv-note { margin: 8px 0 0 26px; }
/* a problem in its section: lighter (6b6, his note 2026-10-10 — the pink panels took space and looked alarming): a compact group
   behind a 2 px red rule, no fill — the inset idiom of "Entering times" */
.rv-problem { margin: 10px 0 0 26px; padding: 2px 0 2px 12px; border-left: 2px solid var(--error); max-width: 560px; }   /* the reading measure of a problem's box */
.rv-msg { margin: 0; font-size: var(--small); color: var(--error); line-height: 1.45; max-width: var(--measure); overflow-wrap: anywhere; }
.rv-fixes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 8px; }
.rv-fixes .btn { min-height: var(--target); }
.rv-fixes .link-btn { display: inline-flex; align-items: center; min-height: 32px; }   /* the review's other links' 32 px (his look at 8db1bfd4: less air between an either-or's two ways out) */
/* the review's last section (6b6, his note 2026-10-10, a UX review): from "Price" down on the sections' text edge (26 px: the
   ✓'s column), the price's rule the column's width; price → information → action three groups 28 px apart */
.rv-price { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 1px solid var(--rule-deco); padding: 16px 0 0 26px; }
.rv-pl { font-size: 15px; }
.rv-amt { font-size: 22px; font-weight: 600; }
.rv-pn { font-size: 14px; color: var(--text-3); }
.rv-narrow { display: none; }
/* on a narrow phone "Delivery included" under the amount, without its dot (his look at 8db1bfd4: at 390 it reads well beside it) */
@media (max-width: 374px) {
  .rv-pv { display: flex; flex-direction: column; align-items: flex-end; }
  .rv-pv .rv-wide { display: none; }
  .rv-pv .rv-narrow { display: inline; }
}
/* the format on a phone: two deliberate lines, "Framed print" over "30 × 40 cm", its dot gone (his look at 8db1bfd4) */
@media (max-width: 599px) {
  .rv-rows .rv-dot { display: none; }
  .rv-rows .rv-size { display: block; }
}
.rv-after { margin: 28px 0 0 26px; max-width: 560px; }
.rv-after h3 { margin: 0 0 6px; font: 600 15px/1.4 var(--font-ui); letter-spacing: 0; }
.rv-after ul { margin: 0; padding: 0 0 0 20px; }
.rv-after li { font-size: 15px; line-height: 1.5; }   /* one body style: the size, the ink and the leading of every point */
.rv-after li + li { margin-top: 6px; }
/* the open choices: the mark in the marks' column, the words on the text edge; one — its sentence; several — the count over
   their list, each a link to its fix */
.rv-open { margin: 28px 0 0; }
.rv-need { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 15px; line-height: 1.45; color: var(--error); max-width: calc(26px + var(--measure)); }
.rv-need > span:last-child { min-width: 0; overflow-wrap: anywhere; }   /* a long first name in the sentence wraps, never widens a phone (the code seat's LOW-3) */
.rv-need .rv-st { display: inline-flex; height: 18px; margin-top: 2px; color: var(--error); }   /* on the first line's middle (21.75 px) */
.rv-count { font-weight: 600; }
.rv-opens { list-style: none; margin: 4px 0 0 26px; padding: 0; }
.rv-opens li + li { margin-top: 4px; }   /* two wrapped links never read as one (the visual seat's NIT) */
.rv-opens .link-btn { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 0; font-size: 15px; line-height: 1.45; text-align: left; overflow-wrap: anywhere; min-width: 0; }   /* a 32 px target around each */
/* the button on the text edge at the desk; on a phone the bar at the screen's bottom has its own (below — the code seat's LOW-1) */
@media (min-width: 960px) {
  #g-review .commit { margin-top: 28px; padding-left: 26px; }
  #g-review .rv-open + .commit { margin-top: 12px; }
  #g-review .rv-open:has(.rv-opens) + .commit { margin-top: 7px; }   /* the last link's 32 px box: its words 12 px over the button, as one sentence's (the visual seat's NIT) */
}
.commit > .b-error { flex: 1 1 100%; margin: 0; }
.b-nw { white-space: nowrap; }
.b-ib { display: inline-block; }
.rv-rows .b-ib { white-space: normal; max-width: 100%; }   /* whole where it fits; inside itself on the narrowest phones (the re-check's MEDIUM: 320 px) */   /* an atomic part: WebKit wraps it whole where it would not break before a nowrap span (the visual seat's HIGH-1) */
.rv-fixes .rv-pointed:focus { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
#continue > span { margin-left: .4em; }   /* the arrow: a flex item drops its leading space (the visual QA) */
/* the review's heading alone (his note, 2026-10-06): no race line above it (kept for screen readers — the race's name is
   Your race's first row), no bullet, no rule above or under it */
.b-on-review .b-race { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.b-on-review .b-race a { display: none; }
#group-list > #g-review:not(.next) { border-top: 0; padding-top: 19px; }   /* the room the rule's padding gave: under the strip, below the window's top */
#g-review:not(.next) > .ghead::before { content: none; }
#g-review .body > .rv:first-child { border-top: 0; padding-top: 4px; }
/* the review's heading, once reached, opens it as the other rows open theirs */
.b-headbtn { all: unset; cursor: pointer; }
.b-headbtn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.b-headbtn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.b-poster > .cap span { display: block; }
.b-poster > .cap span + span { margin-top: 2px; }
/* the phone: Continue to checkout stays at the screen's bottom while the review is read (his second look at 6b) */
@media (max-width: 959px) {
  #g-review .commit { position: sticky; bottom: 0; z-index: 5; margin: 16px calc(-1 * var(--gutter-phone)) 0;
    padding: 10px var(--gutter-phone) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--ground); border-top: 1px solid var(--hairline); }
}

/* ---------------------------------------------------------------- field messages (the rig's .err · .fits) */
p.b-msg { margin: 0; }
.b-error { display: flex; gap: 8px; align-items: flex-start; font-size: var(--small); color: var(--error); margin: 6px 0 0; line-height: 1.45; max-width: var(--measure); text-wrap: pretty; }   /* no word alone on its last line, as running text (10h2's visual seat) */
.b-error::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--error); color: #fff; font: 700 12px/18px var(--font-ui); text-align: center; margin-top: 1px; }
.b-error:empty { display: none; }
.b-ok { font-size: 13.5px; color: var(--trust); margin: 5px 0 0; }
.b-warn { font-size: var(--small); color: #7A4F00; margin: 6px 0 0; line-height: 1.45; }
.field .with > p { flex: 1 1 100%; margin: 5px 0 0; }
input[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.photo .st .b-error { margin: 2px 0 0; }

/* ---------------------------------------------------------------- the crop editor: the rig's sheet on a <dialog> */
dialog.cropper { margin: 0; padding: 0; border: 0; max-width: none; max-height: none; width: 100%; height: 100%; color: var(--ink); }
dialog.cropper:not([open]) { display: none; }
@media (min-width: 700px) { dialog.cropper { margin: auto; inset: 0; transform: none; width: min(760px, calc(100vw - 48px)); height: min(640px, calc(100vh - 48px)); } }
dialog.cropper::backdrop { background: rgba(0, 0, 0, .45); }
.cropper .head .link-btn { min-height: var(--target); padding: 0 4px; }
.cropper .work canvas { position: absolute; inset: 0; margin: auto; max-width: calc(100% - 32px); max-height: calc(100% - 64px); outline: 2px solid #fff; touch-action: none; cursor: grab; }
.cropper .work canvas:focus-visible { outline: 3px solid var(--focus-ring); box-shadow: 0 0 0 5px #fff; }
.b-crop-label { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font: 500 12px/1 var(--font-ui); letter-spacing: .04em; color: rgba(255, 255, 255, .85); white-space: nowrap; pointer-events: none; }
.cropper .tools .actions { display: flex; gap: 10px; margin: 0; }
.cropper .tools .b-crop-help { flex-basis: 100%; margin: 0; }   /* the rig's: the hint under the tools, its own row */
/* the zoom's limit, a label inside the photo at its bottom — the on-photo controls' look (row 10h2, his look's card 3 A);
   placed by builder-crop.mjs on the canvas as drawn */
.cropper .b-crop-limit { position: absolute; transform: translate(-50%, -100%); box-sizing: border-box; width: max-content;   /* one line where it fits — the JS's max-width wraps it inside the photo (the last seat) */ font: 500 13px/1.25 var(--font-ui); color: #fff; background: rgba(0,0,0,.66); padding: .45em .9em; border-radius: 999px; text-align: center; pointer-events: none; }
.cropper .b-crop-limit:empty { padding: 0; background: none; }   /* empty, still there: a status region that appears with its words is often not read (the last seat) */
.cropper .rot label { font-size: 13.5px; font-weight: 400; margin: 0; }
@media (pointer: coarse) { .b-kbd-help { display: none; } }

/* the hidden radio of a chip, a style and a swatch covers its whole control: the tap lands on the input itself (the rig's
   1 px input under its label left a pointer nothing to hit but the label — fine for a mouse, not for every engine's tap) */
.chip input, .b-style input, .sw input { inset: 0; width: 100%; height: 100%; pointer-events: auto; cursor: pointer; z-index: 1; appearance: none; -webkit-appearance: none; border: 0; background: none; }
.sw { position: relative; }

/* ---------------------------------------------------------------- checkout: the rig's cart (W7 · M8) */
.b-page-h { font: 600 24px/1.3 var(--font-ui); letter-spacing: -0.01em; margin: 0 0 20px; }
.b-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* the rig's cart has no visible page heading: "Your order" leads */
.checkout h2 { font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.005em; }   /* the serif is not loaded on the shop's working pages (§16.2) */
.b-lines { list-style: none; margin: 0; padding: 0; }
.b-lines .line .poster .sheet img, .b-lines .line .b-noface { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; }
.b-lines .line .poster.unframed .sheet { box-shadow: 0 0 0 1px var(--sheet-edge), 0 1px 3px rgba(0,0,0,.12); }
.b-lines .line .acts .link-btn { min-height: 32px; }
.b-empty { padding: 16px 0; border-top: 1px solid var(--rule-deco); }
.b-code { margin: 4px 0 12px; }
.b-code > .link-btn { min-height: var(--target); }
.b-code .field { margin: 8px 0 0; }   /* the column's width at the desk (6k's open points: the visual seat's 2) */
.b-code:has(> .field) { padding-bottom: 6px; }   /* open: 22 px from the field to the totals' rule, the form's own field-to-label gap — padding, as the field's margin collapses into the block's (its 1) */
.b-code-row { display: flex; gap: 8px; }
.b-code-row input { flex: 1 1 auto; min-width: 0; }
.b-code-row .btn { flex: none; min-height: var(--target); }
.checkout .grid-2 { max-width: 560px; }
.checkout .grid-2 .field { margin-bottom: 16px; }
.b-place { display: flex; width: 100%; max-width: 560px; margin-top: 16px; }
.checkout .b-error#form-error { margin-top: 12px; }
.checkout .b-error#form-error:not(:empty) { margin-top: 16px; }   /* a message reads with the button it is about (the visual seat's 3) */
.checkout .b-error#form-error:not(:empty) + .b-place { margin-top: 8px; }
.b-done p { max-width: 560px; }

/* ---------------------------------------------------------------- the checkout laid out again (PLAN row 6k, his picks 2026-10-19 —
   product-design/checkout/6k-record.md): the phone (A) — a slim line, the form, then Your order before the links and the button;
   the desktop (L4) — the builder's columns, Your order where the poster stood, held in view while the form scrolls */
.co-bar:not([hidden]) { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 0 12px; align-items: center; padding: 4px 0 14px; margin: 0 0 24px; border-bottom: 1px solid var(--rule-deco); }
.co-bar .poster { width: 40px; }
.co-bar .poster .sheet img, .co-bar .b-noface { display: block; aspect-ratio: 3 / 4; width: 100%; object-fit: cover; }
.co-bar .poster.unframed .sheet { box-shadow: 0 0 0 1px var(--sheet-edge), 0 1px 3px rgba(0,0,0,.12); }
.co-bar .poster.framed .sheet { box-shadow: 0 0 0 1px var(--frame-outline), 0 1px 3px rgba(0,0,0,.18); }   /* the rail's small shadow: the poster's own crossed the line's rule (the visual seat's LOW-4) */
.co-bar b { display: block; font-weight: 600; font-size: 15px; line-height: 1.35; }
.co-bar small { display: block; color: var(--text-2); font-size: 13.5px; line-height: 1.4; }
.co-bar .co-sum { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
#details > h2:first-child { margin-top: 0; }
#email-h label { cursor: pointer; }   /* the heading names the field (his pick, Email A) */
.checkout .field > .hint { margin: -2px 0 6px; }   /* a hint between a field's name and its box (Email, Recipient) */
#email-h + .field > .hint { margin-top: -4px; }
.co-country { margin: 0 0 14px; color: var(--text-2); font-size: 15px; }
.co-advice:empty { display: none; }
.co-advice .b-warn { margin: 6px 0 0; }
.co-advice .link-btn { min-height: var(--target); font-size: 15px; }
#order { margin-top: 40px; }
#details:has(> #email-h[hidden]) > #order { margin-top: 0; }
@media (max-width: 959px) { .co-bar:not([hidden]), #order { max-width: 560px; } }   /* one right edge with the fields, the links and the button (the visual seat's LOW-1, a tablet's width) */
@media (max-width: 600px) { .checkout .grid-2 { row-gap: 0; } }   /* stacked, Postcode to Town as the other fields: the field's own 16 px (the visual seat's LOW-2) */   /* the empty cart: Your order alone, at the top (the re-check's note) */
.co-legal { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 20px 0 0; font-size: 14.5px; max-width: 560px; }
.co-legal a { display: inline-flex; align-items: center; min-height: 32px; }
@media (min-width: 960px) {
  .co-bar:not([hidden]) { display: none; }
  .checkout { max-width: none; }
  /* the builder's columns (.builder, system.css · above): Your order where the poster stood — one grid, the form's own elements in
     the right column, so the phone keeps one reading order */
  #details { display: grid; grid-template-columns: minmax(320px, 480px) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  #details > * { grid-column: 2; min-width: 0; }
  #details > .field { margin-bottom: 0; }   /* a grid's margins don't collapse: Email to Delivery as on the phone, Delivery's own 36 px (the visual seat's MEDIUM-1) */
  #details > #order { grid-column: 1; grid-row: 1 / span 9; align-self: stretch; margin-top: 0; }   /* beside the form's six (Email's heading and field, Delivery, the links, the error, the button) and room for three more — an empty row takes no height (the code seat's LOW-2: 9b's total line above the button is foreseen) */
  .co-stick { position: sticky; top: 32px; }
}
@media (min-width: 1440px) {
  body.checkout-page { --maxw: 1280px; }   /* the builder's wide window (body.builder-page): the columns where the builder's were */
  #details { grid-template-columns: minmax(320px, 560px) minmax(0, 1fr); }
}

/* The move (his idea, 6k): a page transition between the builder and the checkout — the builder's framed poster and the
   checkout's picture under one name (builder.mjs, checkout.mjs set it as the page changes), so the poster shrinks into the
   order's picture, and back on Edit where the builder's poster is drawn by its first frame. Only these two pages load this
   file. Nothing moves under reduced motion: the pages skip the transition as they change (builder.mjs, checkout.mjs) and
   any that runs has no animation. The opt-in itself is in each page's head (order/new.html, order/checkout.html), inline:
   here, a page's script that touched the DOM before this file had loaded let Chrome see no opt-in and drop the transition
   ("ViewTransition opt-in disabled", found by 6k's K7). */
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
::view-transition-group(pz-poster) { animation-duration: .48s; animation-timing-function: cubic-bezier(.2, .75, .25, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }

/* the visual re-check (2026-10-05): a wrapped text action reads from the start, its bullet with its first line; the
   checkout's sections share one rhythm; English running text does not break words (the German keeps its hyphens) */
.link-btn { text-align: start; }
#delivery > h2 { margin-top: 36px; }
:is(p, li, .hint, .note, .cap):lang(en) { hyphens: manual; }

/* his look at 6b (2026-10-05): the desk's grey poster column runs down to the footer — no white band between them */
@media (min-width: 960px) {
  body.builder-page #main { padding-bottom: 0; }
  body.builder-page footer.legal { margin-top: 0; }
}

/* ---------------------------------------------------------------- the poster's depth (his ask 2026-10-09: the poster "feels a bit
   flat"; the trial's two options, his yes to both the same day — b1-design §24.1) */
/* react (builder.mjs, poster-preview.mjs opts.react): the old face fades out over the new; a framed ↔ unframed change settles;
   a frame colour eases; the footer's mark behind the subtitle line or a leg's time, once per change */
.pp-ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: opacity .22s ease-out; }
.pp-ghost.pp-ghost-out { opacity: 0; }
.pp-settle { animation: pz-settle .26s ease-out; }
@keyframes pz-settle { from { opacity: .55; transform: scale(.992); } to { opacity: 1; transform: none; } }
.b-poster .pp.framed .sheet { transition: background-color .25s ease-out; }
.pp-cue { fill: rgba(255, 196, 61, .42); animation: pz-cue 1.4s ease-out forwards; }
.pp[data-style=night] .pp-cue { fill: rgba(255, 255, 255, .16); }   /* the soft grey subtitle still reads at its height (the visual seat: .22 took it to ≈ 2.3:1) */
@keyframes pz-cue { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.b-poster > .cap { transition: margin-top .26s ease-out; }   /* with a format change (below) */
@media (prefers-reduced-motion: reduce) { .pp-ghost, .pp-settle, .pp-cue, .b-poster .pp.framed .sheet, .b-poster > .cap { transition: none; animation: none; } .pp-cue { display: none; } }
/* lit: a soft light on the wall behind the poster, and a two-layer shadow — tight where it meets the wall, wide and faint
   around it — at the desk and in the phone's strip */
:is(.look, .strip) .b-poster { isolation: isolate; }
.look .b-poster::before, .strip[data-mode=full] .b-poster::before {
  content: ""; position: absolute; z-index: -1; inset: -12% -30% -4%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0)); }
/* an undrawn race's box in the strip is as wide as its caption (≈ 300 px against the poster's 208): the light shaped by the
   poster — its slot's width — not the box (the code seat's finding; the strip's view clips it either way) */
.strip[data-mode=full] .b-undrawn::before { left: 50%; right: auto; width: calc(min(270px, 34vh) / 1.297 * 1.6); transform: translateX(-50%); }
:is(.look, .strip) .pp {
  --pp-shadow-frame: 0 1px 1px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.10), 0 30px 52px -20px rgba(0,0,0,.38);
  --pp-shadow-sheet: 0 1px 2px rgba(0,0,0,.16), 0 24px 44px -18px rgba(0,0,0,.32); }
/* the caption (a race we draw after the order's alone, his word 2026-10-09) close under the poster, as a caption — in the
   shadow (his word the same day: 36 px under it, clear of the shadow, read marooned), so a shade darker than the page's
   captions: ≥ 4.5:1 on the shadow's darkest. The unframed paper sits a frame's width inside the frame's space (5.5 % of the
   poster): its caption as near the paper as the framed one to its frame */
:is(.look, .strip) .b-poster > .cap { color: var(--text-2); }
.look .b-poster:has(.pp.unframed:not(.pp-fill)) > .cap { margin-top: calc(12px - 5.5cqw); }
.strip[data-mode=full] .b-poster:has(.pp.unframed:not(.pp-fill)) > .cap { margin-top: calc(8px - min(270px, 34vh) / 1.297 * .055); }

/* ---------------------------------------------------------------- 7b (his picks 2026-10-20, all A — design-todos/7b-record.md) */
/* card 1: the footer's view in the strip shows no moulding; a frame colour changed — the grain fades in as the colour eases */
.strip[data-mode=footer] .pp .sheet::before { content: none; }
.pp-reframe .sheet::before { animation: pz-grain-in .25s ease-out; }
@keyframes pz-grain-in { from { opacity: 0; } }
/* card 2: at the desk, while the page moves, the poster rises a touch off the wall — the whole poster, its zoom too (his note
   on the sheet) — 1.5 px, its shadow a little longer and softer; a fifth of a second after the last scroll it settles, over half a second
   (builder.mjs, the scroll listener by `reacts`). The light on the wall stays. A transform and a shadow: no layout shift */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .look .b-poster .pp { transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
  .look .b-poster .pp.framed .sheet { transition: background-color .25s ease-out, box-shadow .55s cubic-bezier(.2, .7, .2, 1); }
  .look .b-poster .pp.unframed .pp-sheet { transition: box-shadow .55s cubic-bezier(.2, .7, .2, 1); }
  /* half the strength first built (his look 2026-10-20: "maybe a little too strong" → "Go for half") */
  .look .b-poster.pz-moving .pp { transform: translateY(-1.5px); }
  .look .b-poster.pz-moving .pp.framed .sheet { box-shadow: 0 0 0 1px var(--pp-frame-outline), 0 1px 1px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.10), 0 38px 61px -21px rgba(0,0,0,.40); }
  .look .b-poster.pz-moving .pp.unframed .pp-sheet { box-shadow: 0 0 0 1px var(--pp-sheet-edge), 0 1px 2px rgba(0,0,0,.14), 0 31px 52px -19px rgba(0,0,0,.34); }
}
@media (prefers-reduced-motion: reduce) { .pp-reframe .sheet::before { animation: none; } }
/* card 4: a photo still uploading — a ring (turning, where motion is allowed), its line and bar; over the waiting button the
   open choices' pattern with the same ring, both in ink — a status, not a problem (his look 2026-10-20, follow-up 1 A) */
.rv-up .rv-st { align-self: center; display: inline-flex; height: 18px; color: var(--ink); }
.rv-need.rv-wait, .rv-need.rv-wait .rv-st { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .rv-up .rv-ring, .rv-wait .rv-ring { animation: pz-turn 1.1s linear infinite; } }
@keyframes pz-turn { to { transform: rotate(360deg); } }
.rv-bar { display: block; width: calc(100% - 26px); height: 6px; margin: 8px 0 0 26px; accent-color: var(--ink); }
.commit > .rv-wait { flex: 1 1 100%; margin: 0 0 10px; }
@media (min-width: 960px) { #g-review .commit > .rv-wait { margin-left: -26px; } }   /* the desk indents the button's block: the ring back in the marks' column */

/* A second own race (his feedback on 9c, 2026-10-26, 6 B): asked once before the form — the question, what starting anew
   does, Continue it and Start a new one */
.b-ask .b-ask-q { margin: 0 0 4px; font-size: 16px; }
.b-ask .hint { margin: 0; }
.b-ask .b-ask-do { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 16px 0 24px; }   /* clear of the next step (the visual seat's 3) */