/* mp-sheet — the Book dialog and the booking wizard's frame. COMPONENTS.md §7.6;
   wizard spec §A3 (shell), §A4 (Step 1 cards), §A5 (step parts), §A10 (motion),
   §A12 (accessibility).
   Phone: a fixed-height bottom sheet (every step the same height, so it never
   jumps; content scrolls inside). From md: a centred modal; from step 2 a live
   summary pane on the right. Tokens only, flat selectors, transforms and opacity
   only; reduced motion zeroes every duration (tokens). */
@layer components {
  html:has(dialog[open]) { overflow: hidden; }

  /* ---------- the dialog ---------- */
  .mp-sheet {
    --_drag: 0px;
    --_kb: 0px; /* the on-screen keyboard's height (iOS overlays it; sheet.js measures it) */
    position: fixed;
    inset: auto 0 var(--_kb);
    inline-size: 100%;
    max-inline-size: none;
    block-size: min(var(--mp-h-sheet), calc(100dvh - var(--_kb) - var(--mp-space-l)));
    max-block-size: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--mp-radius-xl) var(--mp-radius-xl) 0 0;
    background: var(--mp-color-surface);
    color: var(--mp-color-text);
    box-shadow: var(--mp-shadow-float);
    overflow: hidden;
    translate: 0 100%;
    transition: translate var(--mp-dur-slow) var(--mp-ease-sheet);
  }
  .mp-sheet[open],
  .mp-sheet--page {
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* content never widens the frame (it was clipped at 320 px) */
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    container-type: inline-size; /* the bar below reads the frame's width */
  }
  .mp-sheet.is-open { translate: 0 var(--_drag); }
  .mp-sheet[data-dragging] { transition: none; }
  .mp-sheet[data-closing] { transition-duration: var(--mp-dur); transition-timing-function: var(--mp-ease-in-out); }
  .mp-sheet::backdrop {
    background: var(--mp-color-backdrop);
    opacity: 0;
    transition: opacity var(--mp-dur) var(--mp-ease-out);
  }
  .mp-sheet.is-open::backdrop { opacity: 1; }

  /* The /book/ page: the same frame, in the page. */
  .mp-sheet--page {
    position: static;
    block-size: auto;
    max-inline-size: var(--mp-w-modal);
    margin-inline: auto;
    border: var(--mp-border) solid var(--mp-color-line);
    border-radius: var(--mp-radius-xl);
    box-shadow: none;
    translate: none;
    overflow: visible;
  }

  /* ---------- top bar: back · label · close (56 px, 44 px targets) ---------- */
  .mp-sheet__head {
    position: relative;
    display: grid;
    grid-template-columns: var(--mp-tap) minmax(0, 1fr) var(--mp-tap);
    align-items: center;
    gap: var(--mp-space-2xs);
    padding: var(--mp-space-xs) var(--mp-space-2xs) var(--mp-space-3xs);
    touch-action: none;
  }
  .mp-sheet__head::before { /* drag handle, phone */
    content: "";
    position: absolute;
    inset-block-start: var(--mp-space-2xs);
    inset-inline-start: 50%;
    inline-size: var(--mp-space-xl);
    block-size: var(--mp-space-3xs);
    margin-inline-start: calc(-.5 * var(--mp-space-xl));
    border-radius: var(--mp-radius-pill);
    background: var(--mp-color-line);
  }
  .mp-sheet--page .mp-sheet__head::before { content: none; } /* nothing to drag in the page */
  .mp-sheet__back { grid-column: 1; }
  .mp-sheet__back .mp-icon { scale: -1 1; }
  .mp-sheet__back[hidden] { display: inline-flex; visibility: hidden; }
  .mp-sheet__label {
    grid-column: 2;
    margin: 0;
    color: var(--mp-color-text-2);
    font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui);
    letter-spacing: var(--mp-track-label);
    text-align: center;
    text-transform: uppercase;
  }
  .mp-sheet__close { grid-column: 3; }

  /* ---------- progress: one segment per step, done = green ---------- */
  .mp-sheet__progress {
    display: flex;
    gap: var(--mp-space-3xs);
    margin: 0;
    padding: 0 var(--mp-space-s);
    list-style: none;
  }
  .mp-sheet__progress[hidden] { display: none; }
  .mp-sheet__seg {
    position: relative;
    flex: 1;
    block-size: var(--mp-space-3xs);
    border-radius: var(--mp-radius-pill);
    background: var(--mp-color-line);
    overflow: hidden;
  }
  .mp-sheet__seg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--mp-color-accent);
    scale: 0 1;
    transform-origin: left;
    transition: scale var(--mp-dur-slow) var(--mp-ease-out);
  }
  .mp-sheet__seg:has(~ [aria-current="step"])::after,
  .mp-sheet__seg[aria-current="step"]::after { scale: 1 1; }

  /* ---------- summary chips: choices so far; a tap jumps back ---------- */
  .mp-sheet__summary {
    display: flex;
    gap: var(--mp-space-2xs);
    margin: 0;
    padding: var(--mp-space-xs) var(--mp-space-s) 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
  }
  .mp-sheet__summary[hidden] { display: none; }
  .mp-sheet__summary > li { flex: none; animation: mp-sheet-chip var(--mp-dur) var(--mp-ease-out); }
  @keyframes mp-sheet-chip { from { opacity: 0; translate: var(--mp-space-s) 0; } }

  /* ---------- body: the step; scrolls inside the fixed sheet ---------- */
  .mp-sheet__body {
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    /* The step change's view transition names the body (the scroll container), not the step: a named
       element's snapshot is its whole painted size and no ancestor clips it, so a step taller than the
       body slid past the sheet's edge and the previous step showed first (Nick, 2026-11-06). The body's
       snapshot is the scroll port, clipped as the live DOM is. */
    view-transition-name: mp-wizard-step;
  }
  /* The summary pane is named on its own, so it cross-fades in place instead of sliding with the step. */
  .mp-sheet__aside { view-transition-name: mp-wizard-aside; }
  .mp-sheet--page .mp-sheet__body { overflow: visible; }
  .mp-sheet__step {
    display: grid;
    gap: var(--mp-space-s);
    align-content: start;
    padding: var(--mp-space-s) var(--mp-space-s) var(--mp-space-l);
  }
  .mp-sheet__title {
    margin: 0;
    font: var(--mp-weight-display) var(--mp-fs-display-s) / var(--mp-lh-display) var(--mp-font-display);
    letter-spacing: var(--mp-track-display);
    text-transform: uppercase;
    outline: 0;
  }
  .mp-sheet__help {
    margin: calc(-1 * var(--mp-space-2xs)) 0 0;
    color: var(--mp-color-text-2);
    font-size: var(--mp-fs-base);
    line-height: var(--mp-lh-snug);
  }
  .mp-sheet__resume { margin: 0; }
  .mp-sheet__resume[hidden] { display: none; }
  .mp-sheet__more { margin: 0; text-align: center; }
  /* A text-link action that is a <button> (Add another booking, Fix it): drop the UA's button chrome. */
  .mp-sheet button.mp-link {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  /* Step change (fallback for browsers without view transitions; spec §A10). */
  .mp-sheet__step[data-enter="forward"] { animation: mp-step-in-fwd var(--mp-dur) var(--mp-ease-out); }
  .mp-sheet__step[data-enter="back"] { animation: mp-step-in-back var(--mp-dur) var(--mp-ease-out); }
  @keyframes mp-step-in-fwd { from { opacity: 0; translate: var(--mp-space-m) 0; } }
  @keyframes mp-step-in-back { from { opacity: 0; translate: calc(-1 * var(--mp-space-m)) 0; } }

  /* ---------- sticky footer: total left, primary pill right ---------- */
  .mp-sheet__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mp-space-s);
    min-block-size: calc(var(--mp-h-control) + 2 * var(--mp-space-xs));
    padding: var(--mp-space-xs) var(--mp-space-s) calc(var(--mp-space-xs) + var(--mp-safe-b));
    background: var(--mp-color-surface);
    box-shadow: inset 0 var(--mp-border) 0 var(--mp-color-line);
  }
  .mp-sheet__bar[hidden] { display: none; }
  /* A frame under 18rem (the /book/ card on a 320 px phone) can't hold "Go to secure checkout" (~213 px)
     beside the total: one above the other. From 375 px up the total wraps beside the button, as before. */
  @container (width < 18rem) {
    .mp-sheet__bar { flex-wrap: wrap; }
    .mp-sheet__bar > * { flex: 1 1 100%; }
  }
  /* /book/ on a phone: the bar stays in view above the dock (it began under it: battery U8). */
  @media (width < 48rem) {
    .mp-sheet--page { overflow: clip; }
    .mp-sheet--page .mp-sheet__bar { position: sticky; inset-block-end: calc(var(--mp-h-dock) + var(--mp-border) + var(--mp-safe-b)); z-index: 1; }
  }
  .mp-sheet__total {
    display: grid;
    margin: 0;
    font: var(--mp-weight-ui) var(--mp-fs-sm) / var(--mp-lh-tight) var(--mp-font-ui);
  }
  .mp-sheet__total-sub { color: var(--mp-color-text-2); font-weight: var(--mp-weight-body); font-size: var(--mp-fs-xs); }
  .mp-sheet__go { min-block-size: var(--mp-h-control); margin-inline-start: auto; }
  .mp-sheet__go[aria-disabled="true"] { background: var(--mp-color-surface-2); color: var(--mp-color-text-2); }

  /* ---------- Step 1: the intent cards (spec §A4, 06 Clean) ---------- */
  .mp-intents {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mp-space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .mp-intents__item { display: grid; container-type: inline-size; }
  .mp-intents__item--wide { grid-column: 1 / -1; }

  .mp-intent {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-block-end: var(--mp-space-s);
    border: var(--mp-border) solid var(--mp-color-line);
    border-radius: var(--mp-radius-md);
    background: var(--mp-color-surface);
    color: var(--mp-color-text);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition:
      border-color var(--mp-dur-fast) var(--mp-ease-out),
      translate var(--mp-dur-fast) var(--mp-ease-out),
      scale var(--mp-dur-fast) var(--mp-ease-spring);
  }
  .mp-intent:active { scale: .97; transition-duration: var(--mp-dur-press); transition-timing-function: var(--mp-ease-out); }
  .mp-intent:focus-visible { outline: var(--mp-focus-width) solid var(--mp-color-focus); outline-offset: var(--mp-focus-offset); }
  .mp-intent[aria-pressed="true"],
  .mp-intent[aria-current="true"] { border-color: var(--mp-color-line-hover); box-shadow: 0 0 0 var(--mp-border) var(--mp-color-line-hover); }

  .mp-intent__img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--mp-ratio-strip);
    background: var(--mp-color-surface-2);
    object-fit: cover;
    transition: scale var(--mp-dur-reveal) var(--mp-ease-out);
  }
  .mp-intent--featured .mp-intent__img { aspect-ratio: var(--mp-ratio-band); }
  /* No photo yet (none set, or its @media: ref not uploaded): a compact card, never an empty band. */
  .mp-intent--nophoto { padding-block-start: var(--mp-space-s); }
  .mp-intent--nophoto .mp-intent__icon { margin: 0 var(--mp-space-s); background: var(--mp-color-surface-2); box-shadow: none; }

  .mp-intent__icon {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: var(--mp-h-btn);
    block-size: var(--mp-h-btn);
    margin: calc(-.5 * var(--mp-h-btn)) var(--mp-space-s) 0;
    border-radius: var(--mp-radius-round);
    background: var(--mp-color-surface);
    box-shadow: var(--mp-shadow-raised);
  }
  .mp-intent__label {
    margin: var(--mp-space-2xs) var(--mp-space-s) 0;
    font: var(--mp-weight-display) var(--mp-fs-display-xs) / var(--mp-lh-display) var(--mp-font-display);
    letter-spacing: var(--mp-track-display);
    text-transform: uppercase;
  }
  .mp-intent__line {
    margin: var(--mp-space-3xs) var(--mp-space-s) 0;
    color: var(--mp-color-text-2);
    font-size: var(--mp-fs-xs);
    line-height: var(--mp-lh-snug);
  }
  .mp-intent__status {
    display: flex;
    align-items: center;
    gap: var(--mp-space-2xs);
    margin: auto var(--mp-space-s) 0;
    padding-block-start: var(--mp-space-2xs);
    font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui);
    letter-spacing: var(--mp-track-ui);
  }
  /* A card under 8rem (the /book/ page at 320 px: 111 px) can't fit "MEMBERSHIP" in display type:
     the lead size, tighter sides, and a dictionary break as the last resort. */
  @container (width < 8rem) {
    .mp-intent__label { font-size: var(--mp-fs-lead); -webkit-hyphens: auto; hyphens: auto; }
    .mp-intent__icon { margin-inline-start: var(--mp-space-2xs); }
    .mp-intent__label,
    .mp-intent__line,
    .mp-intent__status { margin-inline: var(--mp-space-2xs); }
  }

  /* Gift card: a slim full-width row on the soft scheme. */
  .mp-intent--gift { background: var(--mp-color-accent-soft); } /* the gift card in the grid, not its own row: the slim card's tint */
  .mp-intent--slim {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon label status" "icon line status";
    align-items: center;
    column-gap: var(--mp-space-xs);
    padding: var(--mp-space-xs) var(--mp-space-s);
    background: var(--mp-color-accent-soft);
  }
  .mp-intent--slim .mp-intent__icon { grid-area: icon; margin: 0; box-shadow: none; }
  .mp-intent--slim .mp-intent__label { grid-area: label; margin: 0; font-size: var(--mp-fs-display-2xs); }
  .mp-intent--slim .mp-intent__line { grid-area: line; margin: 0; }
  .mp-intent--slim .mp-intent__status { grid-area: status; margin: 0; padding: 0; }

  /* Off-season: still a button (it opens "email me on opening day"), visibly quieter. */
  .mp-intent--off { background: var(--mp-color-surface-2); }
  .mp-intent--off .mp-intent__img { opacity: .5; }
  .mp-intent--off .mp-intent__label,
  .mp-intent--off .mp-intent__status { color: var(--mp-color-text-2); }

  @media (hover: hover) and (pointer: fine) {
    .mp-intent:hover { border-color: var(--mp-color-line-hover); translate: 0 calc(-.5 * var(--mp-space-3xs)); }
    .mp-intent:hover .mp-intent__img { scale: 1.04; }
  }

  /* ---------- step parts (spec §A5) ---------- */
  .mp-sheet__lede { margin: 0; font-size: var(--mp-fs-base); line-height: var(--mp-lh-body); }
  .mp-sheet__note { margin: 0; color: var(--mp-color-text-2); font-size: var(--mp-fs-xs); line-height: var(--mp-lh-snug); }
  .mp-sheet__aside { display: none; }

  /* Single-choice cards: a tap advances (camp, pass, amount, event, type, lesson). */
  .mp-options {
    display: grid;
    gap: var(--mp-space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .mp-options--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title side" "line side";
    align-items: center;
    gap: var(--mp-space-3xs) var(--mp-space-s);
    inline-size: 100%;
    min-block-size: calc(var(--mp-h-control) + var(--mp-space-s));
    padding: var(--mp-space-xs) var(--mp-space-s);
    border: var(--mp-border) solid var(--mp-color-line);
    border-radius: var(--mp-radius-md);
    background: var(--mp-color-surface);
    color: var(--mp-color-text);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--mp-dur-fast) var(--mp-ease-out), scale var(--mp-dur-fast) var(--mp-ease-spring);
  }
  .mp-option:active { scale: .98; transition-duration: var(--mp-dur-press); }
  .mp-option:focus-visible { outline: var(--mp-focus-width) solid var(--mp-color-focus); outline-offset: var(--mp-focus-offset); }
  .mp-option__title {
    grid-area: title;
    display: flex;
    align-items: center;
    gap: var(--mp-space-2xs);
    font: var(--mp-weight-display) var(--mp-fs-display-2xs) / var(--mp-lh-display) var(--mp-font-display);
    text-transform: uppercase;
  }
  .mp-option__line { grid-area: line; color: var(--mp-color-text-2); font-size: var(--mp-fs-xs); line-height: var(--mp-lh-snug); }
  .mp-option__side { grid-area: side; font: var(--mp-weight-ui) var(--mp-fs-sm) / var(--mp-lh-tight) var(--mp-font-ui); color: var(--mp-color-accent-text); }
  /* A list price struck in a sale (Vet and Racer): quiet, so the price paid leads. Also in the week note. */
  .mp-option__side s,
  .mp-sheet__note s { color: var(--mp-color-text-2); font-weight: var(--mp-weight-body); }
  @media (hover: hover) and (pointer: fine) { .mp-option:hover { border-color: var(--mp-color-line-hover); } }

  /* How to pay (review, while the sale is on): two radio cards in the option look. */
  .mp-pays {
    display: grid;
    gap: var(--mp-space-2xs);
    margin: var(--mp-space-s) 0 0;
    padding: 0;
    border: 0;
  }
  .mp-pays__legend {
    margin-block-end: var(--mp-space-2xs);
    padding: 0;
    font: var(--mp-weight-ui) var(--mp-fs-sm) / var(--mp-lh-tight) var(--mp-font-ui);
  }
  .mp-pay { position: relative; }
  .mp-pay__input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  .mp-pay:has(.mp-pay__input:focus-visible) { outline: var(--mp-focus-width) solid var(--mp-color-focus); outline-offset: var(--mp-focus-offset); }
  /* A card that cannot be picked (the stay step's Bunkhouse when a week has no bunks left, 2026-11-06): muted as a disabled week. */
  .mp-pay[aria-disabled="true"] { background: var(--mp-color-surface-2); color: var(--mp-color-text-2); cursor: default; }
  .mp-pay[aria-disabled="true"] .mp-pay__input, .mp-pay__input:disabled { cursor: default; }

  /* Camp weeks: one card per week; status in words + dot (never colour alone). */
  .mp-weeks { display: grid; gap: var(--mp-space-2xs); margin: 0; padding: 0; list-style: none; }
  .mp-weeks[aria-busy="true"] .mp-avail { visibility: hidden; }
  .mp-week {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "no dates chip" "no meta cta";
    align-items: center;
    gap: var(--mp-space-3xs) var(--mp-space-s);
    inline-size: 100%;
    min-block-size: calc(var(--mp-h-control) + var(--mp-space-s));
    padding: var(--mp-space-xs) var(--mp-space-s);
    border: var(--mp-border) solid var(--mp-color-line);
    border-radius: var(--mp-radius-md);
    background: var(--mp-color-surface);
    color: var(--mp-color-text);
    font: inherit;
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--mp-dur-fast) var(--mp-ease-out), background-color var(--mp-dur-fast) var(--mp-ease-out), color var(--mp-dur-fast) var(--mp-ease-out), scale var(--mp-dur-fast) var(--mp-ease-spring);
  }
  .mp-week:active { scale: .98; transition-duration: var(--mp-dur-press); }
  .mp-week:focus-visible { outline: var(--mp-focus-width) solid var(--mp-color-focus); outline-offset: var(--mp-focus-offset); }
  /* Picked = a green card with white words, on every text choice in the wizard: the weeks first (Nick,
     2026-11-06: "make the background completely green… invert the text to white… the little chip light grey"),
     then the single-choice cards, the radio cards (stay, how to pay), the chips and the checkboxes (Nick,
     2026-11-07: "use this for any text label style selections for the entire wizard"). The deep green
     (--mp-color-pick), not the brand green, so white holds AA (5.4:1; white on --mp-green is 2.4:1); the
     secondary words at 92% white hold 4.8:1 (84% was 4.3, under AA at 13 px). Anything drawn in the accent
     green (a side price, "Sale ends", a deposit) turns white, or it would vanish into the fill. The photo
     cards of the first step (mp-intent) keep their outline. */
  .mp-week[aria-pressed="true"],
  .mp-option[aria-pressed="true"],
  .mp-pay:has(.mp-pay__input:checked) { border-color: var(--mp-color-pick); background: var(--mp-color-pick); color: var(--mp-color-on-pick); box-shadow: none; }
  :is(.mp-option[aria-pressed="true"], .mp-pay:has(.mp-pay__input:checked)) :is(.mp-option__side, .mp-price__now) { color: var(--mp-color-on-pick); }
  .mp-week[aria-pressed="true"] :is(.mp-week__meta, .mp-week__cta),
  :is(.mp-option[aria-pressed="true"], .mp-pay:has(.mp-pay__input:checked)) :is(.mp-option__line, .mp-price__was, .mp-price__tax, .mp-price__ends, .mp-price__line, .mp-price__balance, .mp-price__deposit, s) { color: color-mix(in srgb, var(--mp-color-on-pick) 92%, transparent); }
  .mp-week[aria-pressed="true"] .mp-avail { --_bg: var(--mp-color-surface-2); --_fg: var(--mp-color-text); }
  .mp-sheet .mp-seg .mp-seg__opt:has(:checked) { background-color: var(--mp-color-pick); color: var(--mp-color-on-pick); box-shadow: none; }
  .mp-sheet .mp-choice > input:checked { border-color: var(--mp-color-pick); background-color: var(--mp-color-pick); }
  .mp-week[aria-disabled="true"] { background: var(--mp-color-surface-2); color: var(--mp-color-text-2); cursor: default; }
  .mp-week[data-status="full"] .mp-week__dates { color: var(--mp-color-text-2); }
  .mp-week__no {
    grid-area: no;
    font: var(--mp-weight-display) var(--mp-fs-display-2xs) / var(--mp-lh-display) var(--mp-font-display);
    text-transform: uppercase;
  }
  .mp-week__dates { grid-area: dates; font: var(--mp-weight-ui) var(--mp-fs-base) / var(--mp-lh-tight) var(--mp-font-ui); }
  .mp-week__meta { grid-area: meta; color: var(--mp-color-text-2); font-size: var(--mp-fs-xs); }
  .mp-week .mp-avail,
  .mp-week .mp-skeleton { grid-area: chip; justify-self: end; }
  /* A closed or unknown week's words are long ("Online booking closed", "Call 519-794-2434 for spots"):
     their own row under the dates, so the dates keep their width on a phone. */
  .mp-week:is([data-status="closed"], [data-status="unknown"]) { grid-template-areas: "no dates dates" "no meta meta" "no chip chip"; }
  .mp-week:is([data-status="closed"], [data-status="unknown"]) .mp-avail { justify-self: start; }
  .mp-week__cta {
    grid-area: cta;
    display: inline-flex;
    align-items: center;
    gap: var(--mp-space-3xs);
    justify-self: end;
    color: var(--mp-color-text);
    font: var(--mp-weight-ui) var(--mp-fs-xs) / var(--mp-lh-tight) var(--mp-font-ui);
  }

  /* Riders stepper (− n +, 44 px buttons). */
  .mp-stepper {
    display: flex;
    align-items: center;
    gap: var(--mp-space-xs);
    padding: var(--mp-space-2xs) var(--mp-space-s);
    border-radius: var(--mp-radius-md);
    background: var(--mp-color-surface-2);
  }
  .mp-stepper__label { margin-inline-end: auto; font: var(--mp-weight-ui) var(--mp-fs-sm) / var(--mp-lh-tight) var(--mp-font-ui); }
  .mp-stepper__btn { box-shadow: inset 0 0 0 var(--mp-border) var(--mp-color-line-strong); }
  .mp-stepper__btn[aria-disabled="true"] { opacity: .4; cursor: default; }
  .mp-stepper__value {
    min-inline-size: var(--mp-space-l);
    font: var(--mp-weight-display) var(--mp-fs-display-xs) / 1 var(--mp-font-display);
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  /* One card per rider (or the order-wide block: parents, accommodations). */
  .mp-rider {
    display: grid;
    gap: var(--mp-space-s);
    padding: var(--mp-space-s);
    border: var(--mp-border) solid var(--mp-color-line);
    border-radius: var(--mp-radius-md);
  }
  .mp-rider--plain { padding: 0; border: 0; }
  .mp-rider__title {
    margin: 0;
    font: var(--mp-weight-display) var(--mp-fs-display-2xs) / var(--mp-lh-display) var(--mp-font-display);
    text-transform: uppercase;
  }
  .mp-rider [data-field][hidden] { display: none; }
  .mp-field__opt { color: var(--mp-color-text-2); font-weight: var(--mp-weight-body); text-transform: none; letter-spacing: 0; }

  /* Date of birth: three numeric fields (GOV.UK memorable date). */
  .mp-dob { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.6fr); gap: var(--mp-space-2xs); max-inline-size: var(--mp-w-sheet); }
  .mp-dob__part { display: grid; gap: var(--mp-space-3xs); }

  /* Fit helper: height → the bike (staff confirm at check-in). */
  .mp-fit { display: grid; gap: var(--mp-space-2xs); padding: var(--mp-space-xs); border-radius: var(--mp-radius-sm); background: var(--mp-color-accent-soft); }
  .mp-fit[hidden] { display: none; }
  .mp-fit__result { margin: 0; font: var(--mp-weight-ui) var(--mp-fs-sm) / var(--mp-lh-snug) var(--mp-font-ui); }
  .mp-fit__result:empty { display: none; }

  /* The date steps draw mp-cal (cal.css, a dependency of the sheet; Nick 2026-11-06); the day strip is retired. */

  /* Review lines and totals. */
  .mp-summary { display: grid; margin: 0; padding: 0; list-style: none; box-shadow: inset 0 var(--mp-border) 0 var(--mp-color-line); }
  .mp-summary__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--mp-space-3xs) var(--mp-space-s);
    padding-block: var(--mp-space-xs);
    box-shadow: inset 0 calc(-1 * var(--mp-border)) 0 var(--mp-color-line);
  }
  .mp-summary__what { font: var(--mp-weight-ui) var(--mp-fs-sm) / var(--mp-lh-snug) var(--mp-font-ui); }
  .mp-summary__price { font: var(--mp-weight-ui) var(--mp-fs-sm) / var(--mp-lh-snug) var(--mp-font-ui); font-variant-numeric: tabular-nums; text-align: end; }
  .mp-summary__sub { grid-column: 1 / -1; color: var(--mp-color-text-2); font-size: var(--mp-fs-xs); }
  .mp-summary__totals { display: grid; gap: var(--mp-space-3xs); margin: 0; }
  .mp-summary__totals > div { display: flex; justify-content: space-between; }
  .mp-summary__totals dt { color: var(--mp-color-text-2); font-size: var(--mp-fs-sm); }
  .mp-summary__totals dd {
    margin: 0;
    font: var(--mp-weight-display) var(--mp-fs-display-xs) / 1 var(--mp-font-display);
    font-variant-numeric: tabular-nums;
  }

  /* The saved-flow dot on the Book pills lives in header.css (mp-theme): it shows on closed pages, and this file loads late. */

  /* ---------- desktop: the centred modal ---------- */
  @media (width >= 48rem) {
    .mp-sheet {
      inset: 0;
      inline-size: min(var(--mp-w-modal), calc(100vw - 2 * var(--mp-gutter)));
      block-size: min(var(--mp-h-sheet), calc(100dvh - 2 * var(--mp-space-xl)));
      margin: auto;
      border-radius: var(--mp-radius-xl);
      translate: 0 var(--mp-space-2xs);
      scale: .98;
      opacity: 0;
      transition: opacity var(--mp-dur) var(--mp-ease-out), translate var(--mp-dur) var(--mp-ease-out), scale var(--mp-dur) var(--mp-ease-out);
    }
    .mp-sheet.is-open { translate: 0 0; scale: 1; opacity: 1; }
    .mp-sheet--page { opacity: 1; scale: 1; translate: none; inset: auto; block-size: auto; }
    .mp-sheet__head { padding-block-start: var(--mp-space-s); }
    .mp-sheet__head::before { display: none; }
    .mp-sheet__step { padding-inline: var(--mp-space-m); }
    .mp-sheet__progress,
    .mp-sheet__summary { padding-inline: var(--mp-space-m); }
    .mp-sheet__bar { padding-inline: var(--mp-space-m); }
    .mp-intents { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mp-intents__item--wide { grid-column: auto; }
    /* Seven cards (race entry dormant): the featured one spans two, so both rows of four fill. */
    .mp-intents:has(> .mp-intents__item:nth-child(7):last-child) > .mp-intents__item--wide:first-child { grid-column: span 2; }
    .mp-intent--featured .mp-intent__img { aspect-ratio: var(--mp-ratio-strip); }
    .mp-intent--slim {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      padding: 0 0 var(--mp-space-s);
    }
    .mp-intent--slim .mp-intent__icon { margin: var(--mp-space-s) var(--mp-space-s) 0; }
    .mp-intent--slim .mp-intent__label { margin: var(--mp-space-2xs) var(--mp-space-s) 0; font-size: var(--mp-fs-display-xs); }
    .mp-intent--slim .mp-intent__line { margin: var(--mp-space-3xs) var(--mp-space-s) 0; }
    .mp-intent--slim .mp-intent__status { margin: auto var(--mp-space-s) 0; padding-block-start: var(--mp-space-2xs); }
    /* From step 2: the step left, a live summary pane right. */
    .mp-sheet__body[data-split] { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
    .mp-sheet__aside {
      position: sticky;
      inset-block-start: 0;
      display: grid;
      gap: var(--mp-space-xs);
      margin: var(--mp-space-s) var(--mp-space-m) var(--mp-space-m) 0;
      padding: var(--mp-space-m);
      border-radius: var(--mp-radius-lg);
      background: var(--mp-color-surface-2);
    }
    .mp-sheet__facts { display: grid; gap: var(--mp-space-2xs); margin: 0; padding: 0; list-style: none; font: var(--mp-weight-ui) var(--mp-fs-sm) / var(--mp-lh-snug) var(--mp-font-ui); }
    .mp-sheet__pay { margin: 0; font-size: var(--mp-fs-sm); }
    .mp-sheet__pay b { font: var(--mp-weight-display) var(--mp-fs-display-xs) / 1 var(--mp-font-display); }
    /* What is paid at check-in (Nick, 2026-11-06: "calculate the options below… balance paid… a good spot for
       any extras"): one row per item under today's line, the total last. */
    .mp-sheet__later { display: grid; gap: var(--mp-space-3xs); margin: 0; padding-block-start: var(--mp-space-xs); border-block-start: var(--mp-border) solid var(--mp-color-line); font: var(--mp-weight-ui) var(--mp-fs-sm) / var(--mp-lh-snug) var(--mp-font-ui); }
    .mp-sheet__later-row { display: flex; justify-content: space-between; gap: var(--mp-space-s); margin: 0; color: var(--mp-color-text-2); }
    .mp-sheet__later-row dt, .mp-sheet__later-row dd { margin: 0; }
    .mp-sheet__later-row dd { flex: none; font-variant-numeric: tabular-nums; }
    .mp-sheet__later-total { padding-block-start: var(--mp-space-3xs); color: var(--mp-color-text); font-weight: var(--mp-weight-ui); }
    .mp-sheet__later-total dd { font-weight: var(--mp-weight-display); }
  }
}

/* Same-document view transition for step changes (spec §A10; Chrome/Edge 111+,
   Safari 18+, Firefox 144+). Old step slides out left, new one in from the right. */
::view-transition-old(mp-wizard-step) { animation: mp-step-out var(--mp-dur) var(--mp-ease-out) both; }
::view-transition-new(mp-wizard-step) { animation: mp-step-in-fwd var(--mp-dur) var(--mp-ease-out) both; }
html[data-mp-step-dir="back"]::view-transition-old(mp-wizard-step) { animation-name: mp-step-out-back; }
html[data-mp-step-dir="back"]::view-transition-new(mp-wizard-step) { animation-name: mp-step-in-back; }
@keyframes mp-step-out { to { opacity: 0; translate: calc(-1 * var(--mp-space-m)) 0; } }
@keyframes mp-step-out-back { to { opacity: 0; translate: var(--mp-space-m) 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(mp-wizard-step),
  ::view-transition-new(mp-wizard-step) { animation: none; }
}