/* ============================================================
   wizard.css — the ONE DiveOS wizard pattern stylesheet.
   Self-contained on the bound DS tokens (_ds/styles.css). Ports the
   canonical Dive Plan / Trip Run chrome — white header band → stepper
   → gray body → ledger-first lists → readiness gate → sticky footer —
   so the Booking wizard is a literal visual sibling of those screens.
   The DS React components (Button, Input, Select, Avatar, …) sit INSIDE
   this chrome; this file only styles the wizard skeleton + booking rows.
   ============================================================ */

/* Wizard width pin (MR !122). The os-ds gem defines --content-max as
   var(--page-narrow) (768px) for reading-width pages; the booking wizard is a
   wide multi-column workspace and would collapse to 768px under the gem token.
   Pin a local --wz-max the wizard's own containers use instead. */
.hos-wz-steps, .hos-wz-bars-inner, .hos-wz-couple, .hos-wz-inner, .hos-wz-foot-inner { --wz-max: 1440px; }

/* ── Wizard chrome scope ─────────────────────────────────────
   The prototype's global html/body/input resets are intentionally DROPPED:
   the booking wizard mounts INSIDE the DiveOS app layout, which already owns
   body typography, color, and smoothing. We only style the wizard's own
   chrome (scoped to .hos-wz-shell) so nothing leaks to the rest of the app. */
:root {
  --wz-copy-ico: var(--muted-2); --wz-del-ico: var(--muted-2);
  /* near-white row/footer hover + diver-card head — no ramp token is this warm */
  --wz-tint: #FCFCFB;
  --wz-tint-2: #FBFCFD;
}
.hos-wz-shell, .hos-wz-main,
.hos-wz-shell input, .hos-wz-shell textarea, .hos-wz-shell select, .hos-wz-shell button {
  font-family: var(--font-sans);
  font-feature-settings: var(--font-features, normal);
}
.hos-wz-shell { display: flex; flex-direction: column; min-width: 0; background: var(--canvas); }
.hos-wz-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--canvas); }
/* Inside the full-bleed shell the wizard is a fixed-height flex column:
   stepper (fixed) → .hos-wz-body (scrolls) → footer (pinned at the bottom).
   The <form> wraps the body + footers, so it must be display:contents for
   them to participate as flex children of .hos-wz-flow. */
.hos-wz-flow { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.hos-wz-flow > form { display: contents; }

/* ── Stepper (horizontal, connected) — lifted from .dp-stepper ── */
.hos-wz-stepper { width: 100%; }
.hos-wz-steps { display: flex; max-width: var(--wz-max); margin: 0 auto; }
.hos-wz-step { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 11px; cursor: pointer; background: none; border: 0; font: inherit; padding: 2px 0 2px; }
.hos-wz-step::before { content: ''; position: absolute; top: 20px; right: calc(50% + 30px);
  width: calc(100% - 60px); height: 2px; background: var(--hairline); z-index: 0; }
.hos-wz-step:first-child::before { display: none; }
.hos-wz-step.done::before, .hos-wz-step.active::before { background: var(--accent); }
.hos-wz-dot { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono);
  font-weight: 600; font-size: var(--text-sm); border: 2px solid var(--hairline); color: var(--muted-2);
  background: var(--surface); transition: all .15s ease; }
.hos-wz-step.done .hos-wz-dot { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.hos-wz-step.active .hos-wz-dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.hos-wz-step:not(.reach):hover .hos-wz-dot { }
.hos-wz-step.reach:hover .hos-wz-dot { border-color: var(--accent); }
.hos-wz-step-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.hos-wz-step.done .hos-wz-step-label { color: var(--muted); }
.hos-wz-step.active .hos-wz-step-label { color: var(--accent); }
.hos-wz-step[disabled] { cursor: default; }

/* ── Vertical spine stepper — lifted from .dp-spine ──────────── */
.hos-wz-spine-grid { display: grid; grid-template-columns: 232px minmax(0,1fr); gap: 32px; align-items: start; }
@media (max-width: 1080px) { .hos-wz-spine-grid { grid-template-columns: 1fr; }}
.hos-wz-spine { position: sticky; top: 24px; }
.hos-wz-vsteps { display: flex; flex-direction: column; }
.hos-wz-vstep { display: flex; align-items: flex-start; gap: 14px; padding: 0 0 26px; position: relative;
  cursor: pointer; background: none; border: 0; font: inherit; text-align: left; width: 100%; }
.hos-wz-vstep:last-child { padding-bottom: 0; }
.hos-wz-vstep::before { content: ''; position: absolute; left: 16px; top: 34px; bottom: 2px; width: 2px; background: var(--hairline); }
.hos-wz-vstep:last-child::before { display: none; }
.hos-wz-vstep.done::before, .hos-wz-vstep.active::before { background: var(--accent); }
.hos-wz-vstep .hos-wz-dot { width: 34px; }
.hos-wz-vstep-body { display: flex; flex-direction: column; gap: 2px; padding-top: 5px; }
.hos-wz-vstep-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.hos-wz-vstep.done .hos-wz-vstep-label { color: var(--muted); }
.hos-wz-vstep.active .hos-wz-vstep-label { color: var(--accent); }
.hos-wz-vstep-sub { font-size: var(--text-xs); color: var(--muted-2); }
.hos-wz-vstep[disabled] { cursor: default; }

/* ── Sleek segmented bar stepper (layout="bars") ───────────── */
.hos-wz-bars { width: 100%; }
.hos-wz-bars-inner { display: flex; gap: 10px; max-width: var(--wz-max); margin: 0 auto; }
.hos-wz-seg { flex: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; background: none; border: 0; padding: 0; cursor: default; font: inherit; }
.hos-wz-seg .bar { height: 4px; border-radius: 4px; background: var(--hairline); transition: background .25s cubic-bezier(.22,1,.36,1), height .15s ease, box-shadow .15s ease; }
.hos-wz-seg.done .bar, .hos-wz-seg.on .bar { background: var(--accent); }
.hos-wz-seg.on .bar { height: 6px; box-shadow: 0 0 0 3px var(--accent-softer); }
.hos-wz-seg .lbrow { display: flex; align-items: center; gap: 5px; min-width: 0; }
.hos-wz-seg .lb { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .12s ease; }
.hos-wz-seg.done .lb { color: var(--muted); }
.hos-wz-seg.on .lb { color: var(--accent); font-weight: 700; }
/* The check pip is always in the markup (the Stimulus controller only toggles
   state classes, never rebuilds the segment) — show it ONLY on completed steps. */
.hos-wz-seg .tk { display: none; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); color: var(--surface); flex-shrink: 0; }
.hos-wz-seg.done .tk { display: inline-flex; }
.hos-wz-seg.on .lbrow::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.hos-wz-seg.nav { cursor: pointer; }
.hos-wz-seg.nav:hover .bar { background: var(--accent); }
.hos-wz-seg.done.nav:hover .bar { background: var(--accent-strong); }
.hos-wz-seg.nav:hover .lb { color: var(--ink); }
.hos-wz-seg.done.nav:hover .lb { color: var(--accent); }
/* Keyboard focus ring — the segments are real <button>s now (#85); match the
   wizard's house focus idiom rather than the bare UA outline. */
.hos-wz-seg:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); border-radius: 6px; }

/* ── Header ↔ wizard coupling variants (the `coupling` prop) ── */
/* width:100% so that inside the flex-column .hos-wz-flow the auto side-margins
   don't override align-items:stretch and shrink-wrap the stepper. */
.hos-wz-couple { width: 100%; max-width: var(--wz-max); margin: 0 auto; padding: 0 40px; }
.hos-wz-couple-detached { padding-top: 22px; padding-bottom: 4px; }
.hos-wz-pills { display: flex; align-items: center; gap: 4px; max-width: 720px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  box-shadow: 0 1px 2px rgba(17,24,39,.04); padding: 7px 10px; }
.hos-wz-pill { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px;
  font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--muted); background: none; border: 0; border-radius: var(--radius-pill); cursor: default; white-space: nowrap; }
.hos-wz-pill .num { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; background: var(--slate-200); color: var(--muted); }
.hos-wz-pill.done { color: var(--slate-700); } .hos-wz-pill.done .num { background: var(--accent); color: var(--surface); }
.hos-wz-pill.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .hos-wz-pill.on .num { background: var(--accent); color: var(--surface); }
.hos-wz-pill.nav { cursor: pointer; } .hos-wz-pill.nav:hover { background: var(--surface-alt); }
.hos-wz-pillsep { width: 14px; height: 1px; background: var(--hairline); flex-shrink: 0; }

/* card (V4) — stepper in a card atop the content */
.hos-wz-couple-card { padding-top: 40px; padding-bottom: 6px; }
.hos-wz-couple-card > .hos-wz-bars { max-width: 720px; margin: 0 auto; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(17,24,39,.04); padding: 16px 24px; box-sizing: border-box; }
.hos-wz-couple-card.bare > .hos-wz-bars { background: transparent; border: 0; box-shadow: none; padding: 4px 0; }

/* ── Stepper at narrow widths (tasks/075, owner-reported) ──────────────────
   The labels truncated to "G…", "EX…", "REVI…", "PAY…" below ~700px. Measured
   cause, at a 560px viewport: `.hos-wz-couple`'s 40px side padding left the bar
   track only 368px (DiveOS's is 448px at the same width), and `.hos-wz-seg`
   divides that EQUALLY — 66px a segment. "Excursions" needs 86px, so only that
   label clipped, and the ellipsis made its neighbours look broken too.

   DiveOS never hits this: its longest label is "Payment" (64px), which still
   fits an equal share. So there is no DiveOS behaviour to copy here — arena's
   own vocabulary is simply longer. Two deliberate, minimal changes:
     1. recover the track width by shrinking the gutter on small screens, and
     2. size segments to their CONTENT so the long label takes what it needs
        while short ones ("Done", 37px) give room back.
   Equal-width segments are kept at desktop, where they read as a progress bar
   and every label fits comfortably. */
@media (max-width: 700px) {
  .hos-wz-couple { padding-left: 16px; padding-right: 16px; }
  .hos-wz-couple-card { padding-top: 24px; }
  .hos-wz-seg { flex: 0 1 auto; }
  .hos-wz-bars-inner { gap: 8px; }
}

/* Phone width: even with the gutter recovered, five labels cannot fit — the
   track is ~231px and the labels alone need ~282px. Measured at 375px, DiveOS
   clips here TOO ("Guest" → "G…", "Payment" → "Payme…"), so there is no
   upstream behaviour to copy; this is a deliberate arena choice for a case the
   reference never solved. Show only the CURRENT step's label and let the bars
   carry the progress — one fully readable label beats five truncated ones. The
   hidden labels stay in the DOM for assistive tech (the stepper is a <nav> with
   aria-current), so nothing is lost to a screen reader. */
@media (max-width: 460px) {
  .hos-wz-seg { flex: 1 1 0; }
  .hos-wz-seg .lb { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; }
  /* The one visible label is allowed to spill past its (equal-width, ~38px)
     segment box — its neighbours render no label, so there is nothing to
     collide with, and the bars stay evenly divided as a progress indicator.
     Without the overflow escape the surviving label would just clip to "G…"
     like all the others, which is the bug being fixed. */
  .hos-wz-seg.on { overflow: visible; }
  .hos-wz-seg.on .lbrow { overflow: visible; }
  .hos-wz-seg.on .lb { position: static; width: max-content; height: auto;
    clip-path: none; overflow: visible; text-overflow: clip; }
}

/* Breathing room above the stepper at rest. The stepper is a fixed flex-child
   above the scrolling .hos-wz-body, so once the body scrolls we collapse the margin
   to keep the stepper flush at the top. pos-wizard toggles .is-scrolled from a
   scroll listener on .hos-wz-body. Scoped to .hos-wz-flow so the showcase stepper is
   unaffected. */
.hos-wz-flow > .hos-wz-couple { margin-top: 2rem; transition: margin-top .2s ease;
  /* The page separator is semantically the sticky stepper's bottom edge — it
     belongs to the fixed header region, not the scrolling body. The gap below
     the stepper is carried here as padding-bottom (1.25rem, matching the theme
     space-y margin we strip off .hos-wz-body), so the hairline lands AFTER that gap,
     just above the body content rather than hugging the stepper. Always on. (#129) */
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hairline); }
.hos-wz-flow > .hos-wz-couple.is-scrolled { margin-top: 0; }

/* header-right tracker (V3) */
.hos-wz-hr-cluster { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.hos-wz-track { display: flex; align-items: center; gap: 0; }
.hos-wz-tstep { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: default; font: inherit; }
.hos-wz-tstep.nav { cursor: pointer; }
.hos-wz-tnum { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; border: 1.5px solid var(--hairline); color: var(--muted-2); background: var(--surface); }
.hos-wz-tstep.done .hos-wz-tnum { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.hos-wz-tstep.on .hos-wz-tnum { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-softer); }
.hos-wz-tlbl { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); }
.hos-wz-tstep.on .hos-wz-tlbl { color: var(--accent); } .hos-wz-tstep.done .hos-wz-tlbl { color: var(--muted); }
.hos-wz-tconn { width: 28px; height: 1.5px; background: var(--hairline); margin: 0 2px 18px; }
.hos-wz-tconn.done { background: var(--accent); }

/* ── Gray body + centered inner column — lifted from .dp-body ── */
/* scrollbar-gutter: stable reserves the scrollbar track always, so the body
   width doesn't reflow when the vertical scrollbar appears/disappears — the
   other axis of the #129 stepper bounce. */
.hos-wz-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; background: var(--canvas); }
/* Strip the theme's form-divide utility (form.form > :not([hidden]) ~
   :not([hidden])) off .hos-wz-body — form_with's hidden CSRF/method inputs make
   .hos-wz-body a subsequent sibling, so it otherwise inherits BOTH a border-top and
   a 1.25rem margin-top. The separator + that gap now live on the sticky stepper
   (see .hos-wz-flow > .hos-wz-couple: padding-bottom + border-bottom). !important defeats
   that higher-specificity compiled vendor rule. (#129) */
.hos-wz-flow form.form > .hos-wz-body { margin-top: 0 !important; border-top: 0 !important; }
.hos-wz-inner { max-width: var(--wz-max); margin: 0 auto; padding: 30px 40px 40px;
  /* .hos-wz-shell is a column FLEX container: without an explicit width a flex
     item with auto inline margins shrink-wraps to its content (the column
     hugged the headline text). 100% + max-width restores block behavior. */
  width: 100%; }
.hos-wz-inner.narrow { max-width: 880px; }

/* ── Header eyebrow — mono "Bookings / New" breadcrumb ───────── */
.hos-wz-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: 0.01em; margin-bottom: 6px; }
.hos-wz-eyebrow-crumb { color: var(--muted); text-decoration: none; }
.hos-wz-eyebrow-crumb:hover { color: var(--ink); }
.hos-wz-eyebrow-sep { color: var(--muted-2); }
.hos-wz-eyebrow-cur { color: var(--accent); font-weight: 500; }

/* ── Stage intro ──────────────────────────────────────────── */
.hos-wz-stage-head { margin-bottom: 22px; }
.hos-wz-stage-head h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl);
  letter-spacing: -0.015em; color: var(--ink); }
.hos-wz-stage-head p { margin: 7px 0 0; font-size: var(--text-sm); color: var(--muted); line-height: 1.5; max-width: 64ch; }

/* ── Section head (label ABOVE the ledger — no card-in-card) ── */
.hos-wz-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.hos-wz-sec-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.hos-wz-sec-title .t { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.hos-wz-sec-title .c { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); white-space: nowrap; }
.hos-wz-sec-head .a { font-size: var(--text-sm); font-weight: 500; color: var(--accent); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; font-family: inherit; padding: 0; }
.hos-wz-sec-head .a:hover { color: var(--accent-strong); }

/* ── Ledger (single bordered frame for any list) — from .dp-ledger ── */
.hos-wz-ledger { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; }
.hos-wz-row { display: grid; align-items: center; gap: 18px; padding: 16px 20px; position: relative;
  border-top: 1px solid var(--hairline-2); transition: background .12s ease; }
.hos-wz-row:first-child { border-top: 0; }
.hos-wz-row.link { cursor: pointer; }
.hos-wz-row.link:hover { background: var(--wz-tint); }
.hos-wz-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }

/* ledger sub-head (group divider band inside a ledger) */
.hos-wz-grouphead { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 20px; background: var(--accent-softer); border-top: 1px solid var(--hairline-2); }
.hos-wz-grouphead:first-child { border-top: 0; }
.hos-wz-grouphead .nm { display: inline-flex; align-items: center; gap: 10px; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); min-width: 0; }
.hos-wz-grouphead .dts { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.hos-wz-grouphead .sub { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
.hos-wz-grouphead.warm { background: var(--briefing-bg); }
.hos-wz-grouphead.warm .nm { color: var(--briefing); }

/* ── Key/value block — from .dp-kv ──────────────────────────── */
/* stat strip — lifted from the DiveOS booking-detail .statstrip:
   General Sans 600 values, 10px tracked labels, hairline-2 dividers */
.hos-wz-kv { display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; }
.hos-wz-kv .cell { padding: 18px 22px; border-left: 1px solid var(--hairline-2); }
.hos-wz-kv .k { display: flex; align-items: center; gap: 7px; font-size: var(--text-2xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hos-wz-kv .k .ico { color: var(--muted-2); }
.hos-wz-kv .v { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; color: var(--ink); margin-top: 11px; }
.hos-wz-kv .v.mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.01em; }
.hos-wz-kv .v.dash { color: var(--muted-2); font-weight: 500; }
.hos-wz-kv .v.nowrap { white-space: nowrap; }
.hos-wz-kv .sub { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--muted); font-weight: 400; margin-top: 7px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Readiness gate — from .dp-gate / .dp-req (Review + Payment) ── */
.hos-wz-gate { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; }
.hos-wz-gate-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border-bottom: 1px solid var(--hairline); }
.hos-wz-gate-head .t { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--ink); }
.hos-wz-gate-head .s { font-size: var(--text-sm); color: var(--muted); margin-top: 3px; }
.hos-wz-gate-head .tot { text-align: right; }
.hos-wz-gate-head .tot .k { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hos-wz-gate-head .tot .v { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 500; letter-spacing: -0.02em; color: var(--accent); margin-top: 2px; }
.hos-wz-req { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--hairline-2); font-size: var(--text-sm); }
.hos-wz-req:first-of-type { border-top: 0; }
.hos-wz-req .tick { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.hos-wz-req.ok .tick { background: var(--confirmed-bg); color: var(--confirmed); }
.hos-wz-req.no .tick { background: var(--briefing-bg); color: var(--briefing); }
.hos-wz-req .rtxt { color: var(--ink); }
.hos-wz-req .rtxt b { font-weight: 600; }
.hos-wz-req .rstate { margin-left: auto; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; font-family: var(--font-mono); }
.hos-wz-req.ok .rstate { color: var(--confirmed); }
.hos-wz-req.no .rstate { color: var(--briefing); }
.hos-wz-gate-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 22px; border-top: 1px solid var(--hairline); background: var(--wz-tint); }

/* ── Sticky footer (standardized Back / hint / Next) ─────────── */
/* tasks/075: `position: sticky; bottom: 0` only pins if there is a sized,
   scrollable ancestor to stick within. Inside the shell's full-bleed region the
   wizard must therefore CLAIM the pane's height and own the scrolling itself —
   otherwise the shell stays as tall as its content and the "sticky" bar simply
   ends up floating mid-page under a short step (which is exactly what the owner
   saw on step 1). `margin-top: auto` then holds the bar at the bottom when the
   content is shorter than the pane. Scoped to the full-bleed region so the
   design-system showcase's inline wizard is untouched. */
/* 2026-07-28 — `overflow-y: auto` REMOVED. Making the wizard its own scroller
   pinned everything above it, including the shell's header band, so the page
   carried two permanent bars of chrome. Measured in DiveOS: on `bookings/new`
   the stepper lives INSIDE the scroller and only `.wz-foot` is held; on
   `trip > run` nothing is held at all. The pane scrolls now
   (diveos_shell.css), the header and stepper scroll away with it, and the
   footer's own `position: sticky; bottom: 0` holds it against the pane. */
/* `min-height: 100%`, NOT `flex: 1; min-height: 0` — a sticky child only travels
   inside its PARENT's box, so while this was height-capped the stepper stuck for
   a few pixels and then scrolled out. Growing to content lets it hold for the
   whole scroll; 100% keeps the footer on the floor on a short step. */
/* A wizard/stepper butts the heading band — kill the gem's page-head→content
   gap (`.os-page-tools + *`, 2rem) so the held chrome sits flush under the
   heading (the DiveOS "chrome is HELD" pattern). Mirrors the new_reservation
   override; generalized to the wizard shell + any sticky stepper band right
   after the heading. */
.hos-shell-content :is(.os-page-head, .os-page-tools) + :is(.hos-wz-shell.hos-wz-shell, .os-stickybar.os-stickybar, .hos-wizard-band.hos-wizard-band) { margin-top: 0; }

.hos-shell-content--bleed > .hos-wz-shell {
  min-height: 100%;
}
.hos-shell-content--bleed > .hos-wz-shell > .hos-wz-foot { margin-top: auto; }
.hos-wz-foot { position: sticky; bottom: 0; z-index: 20; background: var(--surface);
  border-top: 1px solid var(--hairline); box-shadow: 0 -1px 2px rgba(17,24,39,.03); }
/* tasks/075: measured on the live DiveOS footer — the inner column is NOT
   max-width capped (computed `max-width: none`); the band's inner row spans the
   whole content pane and is inset only by its own 40px padding. Arena's 1440px
   cap made the bar read as a floating card inside the column instead of a
   full-bleed band. Sticky-to-viewport-bottom comes from the shell's full-bleed
   mode (.hos-shell-main--bleed), which this page now opts into. */
/* THE PATTERN: every full-bleed band on a page re-insets its CONTENT to the
   SAME column. The band's background spans the pane; its contents line up with
   the header band, the body and each other — one left edge and one right edge
   down the whole page. `--bleed-pad` is the shell's published value for exactly
   that (it is what `.os-page-head` and `.hos-wizard-band` already use), so the
   footer reads it too instead of inventing a 40px inset of its own, which is
   what made it the one band whose buttons did not line up with the title above
   them. Fallback 40px keeps the standalone/showcase case sane. */
.hos-wz-foot-inner { max-width: none; margin: 0 auto;
  padding: 14px var(--bleed-pad, 40px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.hos-wz-foot .grp { display: flex; align-items: center; gap: 10px; }
.hos-wz-foot .grp.start { justify-self: start; }
/* Status hint in the start zone (DiveOS run-actionbar__lead note) — muted by
   default, amber when it flags an unmet gate. */
.hos-wz-foot-note { display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  font-size: var(--text-sm); color: var(--muted); }
.hos-wz-foot-note.is-warn { color: var(--briefing); }
.hos-wz-foot .grp.center { justify-self: center; }
.hos-wz-foot .grp.end { justify-self: end; }
/* Hairline divider between Back and the destructive Discard link. */
.hos-wz-foot-sep { display: inline-block; width: 1px; align-self: stretch; min-height: 20px;
  margin: 0 2px; background: var(--hairline-strong); }
/* Quiet, never-filled destructive text-link (the wizard's Discard exit).
   SCOPED to .hos-wz-foot on purpose. These four rules were previously UNSCOPED in a
   sheet that loads globally after os_ds, so they silently repainted all 40
   `.os-btn--ghost` buttons in the app — agent portal, settings, front office —
   with a rose hover instead of the gem's accent-soft. The intent was only ever
   the Discard exit in this footer.
   The gem's ghost variant already supplies the transparent background and
   border, so we add only what is genuinely wizard-specific: no shadow, and the
   destructive recolour. */
.hos-wz-foot .os-btn--ghost { box-shadow: none; }
.hos-wz-foot .os-btn--ghost:hover { background: var(--cancelled-bg); }
.hos-wz-foot .btn-destructive { color: var(--cancelled); }
.hos-wz-foot .btn-destructive:hover { color: var(--cancelled); }
.hos-wz-foot-hint { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-xs); color: var(--muted-2); white-space: nowrap; }
.hos-wz-foot-hint .kbd { font-family: var(--font-mono); font-size: var(--text-xs); padding: 2px 6px; background: var(--slate-100); border: 1px solid var(--hairline); border-radius: 4px; color: var(--muted); }
.hos-wz-foot-hint .req { display: inline-flex; align-items: center; gap: 6px; color: var(--briefing); font-weight: 600; }
.hos-wz-foot .total { display: flex; align-items: baseline; gap: 9px; margin-right: 4px; }
.hos-wz-foot .total .k { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hos-wz-foot .total .v { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }

/* ════════════════════════════════════════════════════════════
   Booking-specific rows (still ledger-first; just column templates)
   ════════════════════════════════════════════════════════════ */

/* ── Guest result row ─────────────────────────────────────── */
.hos-wz-guest { grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; }
.hos-wz-guest .id { display: flex; align-items: center; gap: 9px; }
.hos-wz-guest .nm { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--ink); }
.hos-wz-guest .sub { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: var(--text-xs); color: var(--muted); margin-top: 3px; }
.hos-wz-guest .sub .mono { font-family: var(--font-mono); white-space: nowrap; }
.hos-wz-guest.sel { background: var(--accent-softer); }
.hos-wz-pick { font-size: var(--text-xs); font-weight: 600; color: var(--accent); white-space: nowrap; }
/* outline tag badge (Hotel guest / Walk-in / Diver …) */
.hos-wz-tagbadge { display: inline-flex; align-items: center; padding: 1px 8px; font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.02em; color: var(--muted); background: var(--surface); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill); white-space: nowrap; }
.hos-wz-changelink { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0;
  font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--accent); cursor: pointer; margin-top: 14px; }
.hos-wz-changelink:hover { color: var(--accent-strong); }
.hos-wz-changelink[hidden] { display: none; }
.hos-wz-selguest-body .hos-wz-changelink { margin-top: 0; } /* inside the card's flex row the link sits on the centreline, not under it (MR !439) */ /* the author display above would otherwise beat the hidden attribute (MR !439 Edit-on-New-only) */

/* guest search field (44px, search icon room at left) */
.hos-wz-guest-search { width: 100%; box-sizing: border-box; height: 44px; padding: 0 14px 0 42px;
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink); background: var(--surface);
  border: 1px solid var(--input-border); border-radius: var(--radius-sm); outline: none; }
.hos-wz-guest-search:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.hos-wz-guest-results { margin-top: 14px; }
/* Resting/empty search state — bordered (no fill) so it reads as a panel, not floating. */
.hos-wz-guest-empty { display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 44px 24px; color: var(--muted); background: transparent;
  border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
.hos-wz-guest-empty .ico { color: var(--muted-2); margin-bottom: 12px; display: flex; }
.hos-wz-guest-empty .t { font-size: var(--text-md); font-weight: 600; color: var(--ink); }
.hos-wz-guest-empty .s { margin: 6px 0 0; font-size: var(--text-sm); }

/* setting row (email toggle) — tinted accent-softer when ON */
.hos-wz-setrow { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(17,24,39,.04); padding: 16px 20px; margin-top: 20px; cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.hos-wz-setrow.on { background: var(--accent-softer); border-color: var(--accent-border); }
/* DS ToggleSwitch (checkbox-backed) */
.hos-wz-toggle { position: relative; display: inline-flex; flex-shrink: 0; }
.hos-wz-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.hos-wz-toggle-track { display: inline-flex; align-items: center; width: 42px; height: 24px; padding: 2px;
  background: var(--slate-300); border-radius: 999px; transition: background .15s ease; }
.hos-wz-toggle-thumb { width: 20px; height: 20px; background: var(--surface); border-radius: 50%;
  box-shadow: 0 1px 2px rgba(17,24,39,.18); transition: transform .15s cubic-bezier(.22,1,.36,1); }
.hos-wz-toggle input:checked + .hos-wz-toggle-track { background: var(--accent); }
.hos-wz-toggle input:checked + .hos-wz-toggle-track .hos-wz-toggle-thumb { transform: translateX(18px); }
.hos-wz-toggle input:focus-visible + .hos-wz-toggle-track { box-shadow: 0 0 0 3px var(--focus-ring); }
.hos-wz-setrow .lead { display: flex; gap: 13px; align-items: flex-start; }
.hos-wz-setrow .ico { color: var(--muted-2); margin-top: 1px; }
.hos-wz-setrow .t { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.hos-wz-setrow .s { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }
.hos-wz-setrow .s b { color: var(--ink); font-weight: 600; }

/* ── Diver block: section head + ledger ───────────────────── */
.hos-wz-diver { margin-bottom: 26px; }
.hos-wz-diver-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 11px; }
.hos-wz-diver-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.hos-wz-diver-id .nm { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--ink); }
.hos-wz-name-input { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px dashed var(--input-border); padding: 2px 0; outline: none; min-width: 200px; }
.hos-wz-name-input:focus { border-bottom-color: var(--accent); }
.hos-wz-diver-meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.hos-wz-diver-tot { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 500; color: var(--ink); }
.hos-wz-diver-tot.zero { color: var(--muted-2); }
.hos-wz-iconbtn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--muted-2); border-radius: var(--radius-sm); cursor: pointer; }
.hos-wz-iconbtn:hover { background: var(--slate-100); color: var(--cancelled); }

/* date chips */
.hos-wz-dates { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hos-wz-dates .cap { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin-right: 2px; }
.hos-wz-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 11px; font-family: var(--font-mono);
  font-size: var(--text-xs); font-weight: 500; color: var(--accent); background: var(--accent-softer);
  border: 1px solid var(--accent-border); border-radius: 999px; white-space: nowrap; }
.hos-wz-chip button { display: inline-flex; padding: 0; border: 0; background: none; color: var(--accent); opacity: .6; cursor: pointer; }
.hos-wz-chip button:hover { opacity: 1; }
.hos-wz-adddate { position: relative; display: inline-flex; }
.hos-wz-adddate-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; font: inherit; font-size: var(--text-xs);
  font-weight: 500; color: var(--accent); background: transparent; border: 1px dashed var(--accent-border); border-radius: 999px; cursor: pointer; }
.hos-wz-adddate-btn:hover { background: var(--accent-softer); }
.hos-wz-menu { position: absolute; top: 100%; left: 0; margin-top: 6px; min-width: 210px; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow-panel); padding: 6px; z-index: 30; }
.hos-wz-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; font: inherit; font-size: var(--text-sm);
  color: var(--ink); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; text-align: left; }
.hos-wz-menu button:hover { background: var(--slate-50); }
.hos-wz-menu .ico { color: var(--muted-2); }
.hos-wz-menu .empty { padding: 8px 10px; font-size: var(--text-xs); color: var(--muted-2); }

/* date sub-section inside a diver card */
.hos-wz-datesec { border-top: 1px solid var(--hairline); }
.hos-wz-datesec:first-child { border-top: 0; }
/* date as a real section title */
.hos-wz-dsec-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 8px; }
.hos-wz-dsec-title .lhs { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.hos-wz-dsec-title .cal { color: var(--accent); display: inline-flex; flex-shrink: 0; }
.hos-wz-dsec-title .d { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); letter-spacing: -0.01em; color: var(--ink); }
.hos-wz-dsec-x { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0;
  background: transparent; color: var(--muted-2); border-radius: var(--radius-sm); cursor: pointer; opacity: 0.55; transition: opacity .12s, background .12s, color .12s; }
.hos-wz-datesec:hover .hos-wz-dsec-x { opacity: 1; }
.hos-wz-dsec-x:hover { background: var(--slate-100); color: var(--ink); }
/* placeholder add row at the bottom of each date section */
.hos-wz-dsec-add { display: flex; gap: 8px; padding: 8px 20px 16px; }
.hos-wz-addph { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; font: inherit; font-size: var(--text-xs); font-weight: 500;
  color: var(--accent); background: transparent; border: 1px dashed var(--accent-border); border-radius: var(--radius-pill); cursor: pointer; }
.hos-wz-addph:hover { background: var(--accent-softer); }
.hos-wz-addph.add { color: var(--confirmed); border-color: var(--confirmed-border); }
.hos-wz-addph.add:hover { background: var(--confirmed-bg); }
/* add-date placeholder pinned at the bottom of the card */
.hos-wz-adddate-row { padding: 12px 20px 14px; border-top: 1px solid var(--hairline); }
.hos-wz-adddate.block { display: block; }
.hos-wz-adddate.block .hos-wz-adddate-btn { width: 100%; justify-content: center; height: 42px; border-radius: var(--radius-sm); font-size: var(--text-sm); }
.hos-wz-adddate.block .hos-wz-menu { width: 100%; }

/* line item row — editable price + per-item actions */
.hos-wz-li { display: grid; grid-template-columns: 22px minmax(0,1fr) 104px 98px 92px 56px; align-items: center; gap: 12px; padding: 8px 20px; }
.hos-wz-li .kind { display: inline-flex; justify-content: center; }
/* micro column header — printed once on the first item of each date section */
.hos-wz-li-head { display: grid; grid-template-columns: 22px minmax(0,1fr) 104px 98px 92px 56px; gap: 12px; padding: 4px 20px 2px; }
.hos-wz-li-head span { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted-2); }
.hos-wz-li .kind.pkg { color: var(--accent); }
.hos-wz-li .kind.add { color: var(--confirmed); }
.hos-wz-li .qtywrap { display: flex; justify-content: center; }
.hos-wz-li .amt { text-align: right; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
.hos-wz-li-acts { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
.hos-wz-li-acts .hos-wz-iconbtn { opacity: 0.5; transition: opacity .12s ease, background .12s ease, color .12s ease; }
.hos-wz-li:hover .hos-wz-li-acts .hos-wz-iconbtn, .hos-wz-li:focus-within .hos-wz-li-acts .hos-wz-iconbtn { opacity: 1; }
.hos-wz-iconbtn.apply:hover { background: var(--accent-soft); color: var(--accent); }
/* tweakable row-action icon colors (copy / delete) — set the stroke directly
   (these are stroke icons; overrides their stroke="currentColor"). :root default = muted. */
.hos-wz-li .hos-wz-iconbtn.apply svg { stroke: var(--wz-copy-ico); }
.hos-wz-li .hos-wz-iconbtn.del svg { stroke: var(--wz-del-ico); }
.hos-wz-li .hos-wz-iconbtn.apply:hover { background: var(--accent-soft); }
.hos-wz-li .hos-wz-iconbtn.del:hover { background: var(--cancelled-bg); }
.hos-wz-li-empty { padding: 9px 20px 13px; font-size: var(--text-sm); font-style: italic; color: var(--muted-2); }

/* Single diver card (accordion) — identity, dates and items in ONE frame */
.hos-wz-dcard { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; margin-bottom: 14px; }
.hos-wz-dcard-head { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 20px; background: var(--wz-tint-2); border-bottom: 1px solid var(--hairline); }
.hos-wz-dcard-head .hos-wz-diver-id { gap: 11px; }
/* high-stakes diver removal — distinct from the line/chip × ; needs confirm */
.hos-wz-dremove { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--muted-2); border-radius: var(--radius-sm); cursor: pointer; }
.hos-wz-dremove:hover { background: var(--cancelled-bg); color: var(--cancelled); }
.hos-wz-dconfirm { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px;
  background: var(--cancelled-bg); border: 1px solid var(--cancelled-border); border-radius: var(--radius-pill); }
.hos-wz-dconfirm .q { font-size: var(--text-xs); font-weight: 500; color: var(--cancelled); white-space: nowrap; }
.hos-wz-dconfirm .yes { height: 28px; padding: 0 12px; font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--surface);
  background: var(--cancelled); border: 0; border-radius: var(--radius-pill); cursor: pointer; }
.hos-wz-dconfirm .no { height: 28px; padding: 0 10px; font: inherit; font-size: var(--text-xs); font-weight: 500; color: var(--muted);
  background: transparent; border: 0; border-radius: var(--radius-pill); cursor: pointer; }
.hos-wz-dconfirm .no:hover { color: var(--ink); }
.hos-wz-dcard-dates { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 20px;
  border-bottom: 1px solid var(--hairline-2); }
.hos-wz-dcard-dates .cap { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin-right: 2px; }
.hos-wz-dcard-body { padding: 2px 0 8px; }
.hos-wz-dcard-body .hos-wz-datesec:first-child { border-top: 0; }

/* catalogue select shell */
.hos-wz-sel { position: relative; min-width: 0; }
.hos-wz-sel select { appearance: none; -webkit-appearance: none; width: 100%; height: 34px; padding: 0 30px 0 11px;
  font: inherit; font-size: var(--text-sm); color: var(--ink); background: var(--surface); border: 1px solid var(--input-border);
  border-radius: var(--radius-sm); cursor: pointer; text-overflow: ellipsis; }
.hos-wz-sel select:focus { outline: none; border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.hos-wz-sel .chev { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted-2); }

/* qty stepper — POS-sized touch targets (>=36px) */
.hos-wz-qty { display: inline-flex; align-items: center; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.hos-wz-qty button { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.hos-wz-qty button:hover { background: var(--slate-100); color: var(--ink); }
.hos-wz-qty button:active { background: var(--slate-200); }
.hos-wz-qty .n { min-width: 26px; text-align: center; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }

/* editable price field — persistent field affordance so it reads as editable at rest */
.hos-wz-price { display: inline-flex; align-items: center; height: 36px; border: 1px solid var(--input-border);
  border-radius: var(--radius-sm); background: var(--slate-50); padding: 0 8px 0 9px; gap: 1px; transition: border-color .12s, box-shadow .12s, background .12s; cursor: text; }
.hos-wz-price:hover { border-color: var(--slate-300); background: var(--surface); }
.hos-wz-price:focus-within { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); background: var(--surface); }
.hos-wz-price .cur { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); }
.hos-wz-price input { width: 56px; border: 0; background: transparent; outline: none; font-family: var(--font-mono);
  font-size: var(--text-sm); color: var(--ink); text-align: right; padding: 0; -moz-appearance: textfield; }
.hos-wz-price input::-webkit-outer-spin-button, .hos-wz-price input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* add-diver dashed button */
.hos-wz-add-diver { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px; width: 100%;
  font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--accent); background: transparent;
  border: 1.5px dashed var(--accent-border); border-radius: var(--radius-lg); cursor: pointer; }
.hos-wz-add-diver:hover { background: var(--accent-softer); }
.hos-wz-copy { display: flex; align-items: center; gap: 6px; padding: 11px 20px; background: var(--wz-tint);
  border-top: 1px solid var(--hairline-2); font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--accent); border: 0; cursor: pointer; width: 100%; }
.hos-wz-copy:hover { color: var(--accent-strong); }

/* ── Order summary rail (Step 2) ──────────────────────────── */
.hos-wz-2col { display: grid; grid-template-columns: minmax(0,1fr) 332px; gap: 30px; align-items: start; }
@media (max-width: 1080px) { .hos-wz-2col { grid-template-columns: 1fr; } .hos-wz-sum { position: static; }}
.hos-wz-sum { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.hos-wz-sum-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; }
.hos-wz-sum-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--hairline); }
.hos-wz-sum-head .t { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.hos-wz-sum-scroll { max-height: 44vh; overflow-y: auto; padding: 4px 18px; }
.hos-wz-sum-grp { padding: 12px 0; border-top: 1px solid var(--hairline-2); }
.hos-wz-sum-grp:first-child { border-top: 0; }
.hos-wz-sum-grp .gh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.hos-wz-sum-grp .gh .nm { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.hos-wz-sum-grp .gh .nm.unset { color: var(--muted-2); }
.hos-wz-sum-grp .gh .nm.warm { color: var(--slate-700); }
.hos-wz-sum-grp .gh .tt { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
.hos-wz-sum-line { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-xs); padding: 2px 0; }
.hos-wz-sum-line .nm { color: var(--slate-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hos-wz-sum-line .dt { color: var(--muted-2); font-family: var(--font-mono); }
.hos-wz-sum-line .amt { font-family: var(--font-mono); color: var(--muted); flex-shrink: 0; }
.hos-wz-sum-line.empty { font-style: italic; color: var(--muted-2); }
.hos-wz-sum-total { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 18px; border-top: 1px solid var(--hairline); background: var(--wz-tint); }
.hos-wz-sum-total .k { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hos-wz-sum-total .v { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.02em; color: var(--accent); }

/* Static Order summary panel — distinct cool slate hue vs the white editable cards */
.hos-wz-sum-card.summary { background: var(--slate-100); border-color: var(--slate-300); }
.hos-wz-sum-card.summary .hos-wz-sum-head { border-bottom-color: var(--slate-200); }
.hos-wz-sum-card.summary .hos-wz-sum-head .t { color: var(--slate-500); }
.hos-wz-sum-card.summary .hos-wz-sum-grp { border-top-color: var(--slate-200); }
.hos-wz-sum-card.summary .hos-wz-sum-line .amt { color: var(--slate-500); }
.hos-wz-sum-card.summary .hos-wz-sum-total { background: var(--slate-200); border-top-color: var(--slate-300); }

/* ── Review line rows ─────────────────────────────────────── */
.hos-wz-rev-li { display: grid; grid-template-columns: 22px minmax(0,1fr) 56px 92px; align-items: center; gap: 16px;
  padding: 13px 20px; border-top: 1px solid var(--hairline-2); }
.hos-wz-rev-li .nm { font-size: var(--text-sm); font-weight: 500; color: var(--ink); display: block; }
.hos-wz-rev-li .dt { display: block; font-size: var(--text-xs); color: var(--muted-2); margin-top: 2px; }
.hos-wz-rev-li .qty { text-align: center; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--slate-700); }
.hos-wz-rev-li .amt { text-align: right; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
.hos-wz-rev-total { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 20px; border-top: 1px solid var(--hairline); background: var(--wz-tint); }
.hos-wz-rev-total .k { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.hos-wz-rev-total .v { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 500; color: var(--ink); }

/* ── Payment ──────────────────────────────────────────────── */
.hos-wz-addpay { display: flex; flex-wrap: wrap; gap: 8px; }
.hos-wz-pm { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font: inherit; font-size: var(--text-sm);
  font-weight: 500; color: var(--ink); background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); cursor: pointer; transition: all .12s ease; }
.hos-wz-pm:hover { border-color: var(--accent-border); color: var(--accent); background: var(--accent-softer); }
.hos-wz-pm .ico { color: var(--muted); } .hos-wz-pm:hover .ico { color: var(--accent); }
.hos-wz-payrow { display: grid; grid-template-columns: 168px 1fr 1fr 30px; gap: 16px; align-items: start; padding: 16px 20px; border-top: 1px solid var(--hairline-2); }
/* unified payment card sections */
.hos-wz-pay-add { padding: 16px 20px; }
/* title row inside a card */
.hos-wz-cardtitle { display: flex; align-items: baseline; gap: 8px; padding: 15px 20px; border-bottom: 1px solid var(--hairline); }
.hos-wz-cardtitle .t { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.hos-wz-cardtitle .c { font-size: var(--text-xs); color: var(--muted-2); }
.hos-wz-paysec-head { display: flex; align-items: baseline; gap: 8px; padding: 16px 20px 4px; border-top: 1px solid var(--hairline); }
.hos-wz-paysec-head .t { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.hos-wz-paysec-head .c { font-size: var(--text-xs); color: var(--muted-2); }
/* attribution — selectable staff chips + compact commission */
.hos-wz-attr { padding: 4px 20px 18px; display: flex; flex-direction: column; gap: 16px; }
.hos-wz-attr-search { position: relative; margin-bottom: 10px; max-width: 320px; }
.hos-wz-attr-search .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted-2); pointer-events: none; display: flex; }
.hos-wz-attr-search input { width: 100%; box-sizing: border-box; height: 36px; padding: 0 12px 0 34px; font: inherit; font-size: var(--text-sm); color: var(--ink); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); outline: none; }
.hos-wz-attr-search input:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.hos-wz-attr-empty { font-size: var(--text-sm); color: var(--muted); font-style: italic; padding: 4px 2px; }
/* Selected agent/staff card (when picked via search rather than a chip). */
.hos-wz-attr-selected { display: inline-flex; align-items: center; gap: 10px; padding: 7px 10px 7px 12px; background: var(--accent-softer); border: 1px solid var(--accent-border); border-radius: var(--radius-pill); }
.hos-wz-attr-selected .badge { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.hos-wz-attr-selected .nm { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
.hos-wz-attr-selected .rm { display: inline-flex; color: var(--muted-2); background: none; border: 0; cursor: pointer; padding: 2px; }
.hos-wz-attr-selected .rm:hover { color: var(--cancelled); }
.hos-wz-attr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hos-wz-attr-chip { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 7px; border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s; }
.hos-wz-attr-chip:hover { border-color: var(--accent-border); background: var(--accent-softer); }
.hos-wz-attr-chip.on { border-color: var(--accent); background: var(--accent-softer); }
.hos-wz-attr-chip .who { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.hos-wz-attr-chip .nm { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
.hos-wz-attr-chip .role { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); }
.hos-wz-attr-chip.on .role { color: var(--accent); }
.hos-wz-attr-chip .tick { display: inline-flex; color: var(--accent); margin-left: 2px; }
.hos-wz-attr-comm { max-width: 280px; }
.hos-wz-attr-commrow { display: flex; align-items: center; gap: 12px; }
.hos-wz-attr-default { font-size: var(--text-xs); color: var(--muted); }
.hos-wz-attr-default button { background: none; border: 0; color: var(--accent); font: inherit; font-size: var(--text-xs); cursor: pointer; padding: 0; margin-left: 6px; }
.hos-wz-attr-default button:hover { color: var(--accent-strong); }
.hos-wz-payrow > div { min-width: 0; }
.hos-wz-fl { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; min-height: 14px; }
.hos-wz-payrow .hos-wz-rm { align-self: start; margin-top: 20px; }
.hos-wz-payrow:first-child { border-top: 0; }
.hos-wz-fl .req { color: var(--error); }
.hos-wz-mi { width: 100%; box-sizing: border-box; height: 36px; padding: 0 11px; font: inherit; font-size: var(--text-sm); color: var(--ink);
  background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); outline: none; }
.hos-wz-mi.mono { font-family: var(--font-mono); }
.hos-wz-mi:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.hos-wz-paysub { font-size: var(--text-xs); color: var(--muted); margin-top: 6px; }
.hos-wz-paysub.ok { color: var(--confirmed); }
.hos-wz-pay-readonly { height: 36px; display: flex; align-items: center; font-size: var(--text-sm); color: var(--muted-2); }

/* ── Done ─────────────────────────────────────────────────── */
.hos-wz-done { max-width: 620px; margin: 12px auto 0; }
.hos-wz-done-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 0 26px; }
.hos-wz-done-ring { width: 60px; height: 60px; border-radius: 50%; background: var(--confirmed-bg); display: flex; align-items: center; justify-content: center; color: var(--confirmed); margin-bottom: 18px; }
.hos-wz-done-hero h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); letter-spacing: -0.02em; color: var(--ink); }
.hos-wz-done-hero p { margin: 8px 0 0; font-size: var(--text-sm); color: var(--muted); max-width: 46ch; }
.hos-wz-done-hero .ref { font-family: var(--font-mono); font-weight: 600; color: var(--slate-700); }
/* tasks/075 — DiveOS ships the OPERATOR receipt as .dn-hero.bar, not the
   centered splash: a compact left-aligned console row (ring + stacked
   title/meta). Its own comment calls the centered hero an anti-slop break. */
.hos-wz-done-hero.bar { flex-direction: row; align-items: center; gap: 16px; text-align: left; padding: 0 0 18px; }
.hos-wz-done-hero.bar .hos-wz-done-ring { width: 46px; height: 46px; margin: 0; flex-shrink: 0; }
.hos-wz-done-hero.bar .htxt { min-width: 0; }
.hos-wz-done-hero.bar h2 { font-size: var(--text-xl); }
.hos-wz-done-hero.bar p { margin-top: 5px; }
/* The meta line under the title: mono reference · mono total · guest, split by
   faint separators (DiveOS `.dn-hero .sub`, measured live). */
.hos-wz-done-hero .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 5px; font-size: var(--text-sm); color: var(--muted); }
.hos-wz-done-hero .sub .amt { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.hos-wz-done-hero .sub .sep { color: var(--hairline-strong); }
.hos-wz-done-hero .sub .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Done's action row is CENTRED under the hero (DiveOS `.dn-actions`), unlike
   the left-aligned party actions on step 1 — hence its own class rather than
   reusing `.hos-wz-party-actions`. */
.hos-wz-done-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 10px; margin: 22px 0 24px; }

/* The card stack below the actions. */
.hos-wz-done-cards { display: flex; flex-direction: column; gap: 16px; }

/* ── Compact density ──────────────────────────────────────── */
.hos-wz-compact .hos-wz-inner { padding-top: 22px; }
.hos-wz-compact .hos-wz-row, .hos-wz-compact .hos-wz-li, .hos-wz-compact .hos-wz-rev-li { padding-top: 6px; padding-bottom: 6px; }
.hos-wz-compact .hos-wz-req { padding-top: 11px; padding-bottom: 11px; }
.hos-wz-compact .hos-wz-diver { margin-bottom: 20px; }

/* small helpers */
.hos-wz-flex { display: flex; align-items: center; }
.hos-wz-mono { font-family: var(--font-mono); }

/* ════════════════════════════════════════════════════════════
   Selected-guest card (Step 1) — unmistakably "chosen"
   ════════════════════════════════════════════════════════════ */
.hos-wz-selguest { border: 1.5px solid var(--accent); background: var(--accent-softer); border-radius: var(--radius-lg);
  overflow: hidden; }
.hos-wz-selguest-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 18px;
  background: var(--accent); }
.hos-wz-selguest-bar .lbl { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-2xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--surface); }
.hos-wz-selguest-bar .chk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 600; color: var(--surface); }
.hos-wz-selguest-body { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.hos-wz-selguest-body .nm { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--ink);
  overflow-wrap: anywhere; } /* a 47-char passport name wraps, never pushes Change → off the row (MR !439) */

/* Additional guests on Step 1 (party beyond the primary) */
.hos-wz-party-sec { margin-top: 22px; }
.hos-wz-party-lbl { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.hos-wz-party-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--hairline-2); }
.hos-wz-party-row:first-child { border-top: 0; }
.hos-wz-party-row .nm { font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
.hos-wz-party-row .sub { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; }
.hos-wz-party-row .sub .mono { font-family: var(--font-mono); }
.hos-wz-addguest { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 9px 14px; font: inherit;
  font-size: var(--text-sm); font-weight: 500; color: var(--accent); background: transparent;
  border: 1px solid var(--accent-border); border-radius: var(--radius-sm); cursor: pointer; }
.hos-wz-addguest:hover { background: var(--accent-softer); }
.hos-wz-addpanel { margin-top: 18px; padding: 16px; background: var(--slate-50); border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
.hos-wz-addpanel .hos-wz-party-lbl { margin-bottom: 10px; }
.hos-wz-addpanel .hos-wz-changelink { margin-top: 12px; }
/* When the party card hosts the register form in place, drop its own card chrome
   so there's a single container (the form), not a card-within-a-card. */
.hos-wz-addpanel.is-bare { padding: 0; background: transparent; border: 0; }
.hos-wz-addpanel.is-bare .hos-wz-reg-panel { margin-top: 0; }
/* The two party actions share one style: matching solid-stroke buttons. */
.hos-wz-party-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.hos-wz-party-actions .hos-wz-addguest,
.hos-wz-party-actions .hos-wz-reg-link { margin-top: 0; padding: 9px 14px; font-size: var(--text-sm); font-weight: 500;
  color: var(--accent); background: transparent; border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm); cursor: pointer; }
.hos-wz-party-actions .hos-wz-addguest:hover,
.hos-wz-party-actions .hos-wz-reg-link:hover { background: var(--accent-softer); color: var(--accent); }

/* ════════════════════════════════════════════════════════════
   Inline register-a-diver (Step 1) — two entry points, one panel
   ════════════════════════════════════════════════════════════ */
/* (A) Persistent register button — same solid-stroke style as "Add another
   guest" so every register/add affordance looks consistent. */
.hos-wz-reg-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 9px 14px;
  font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--accent); background: transparent;
  border: 1px solid var(--accent-border); border-radius: var(--radius-sm); cursor: pointer; }
.hos-wz-reg-link:hover { background: var(--accent-softer); color: var(--accent); }

/* (B) No-match empty state inside the results ledger */
.hos-wz-reg-empty { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 28px 24px; }
.hos-wz-reg-empty-msg { font-size: var(--text-sm); color: var(--muted); }
.hos-wz-reg-empty-msg .q { font-weight: 600; color: var(--ink); }
/* Secondary button — outline only, NO fill (register is a fallback here). */
.hos-wz-reg-empty-cta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--accent); background: transparent;
  border: 1px solid var(--accent-border); border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color .12s, color .12s; }
.hos-wz-reg-empty-cta:hover { border-color: var(--accent); color: var(--accent-strong); }

/* Shared inline panel */
.hos-wz-reg-panel { margin-top: 16px; padding: 18px; background: var(--slate-50);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
.hos-wz-reg-panel .hos-wz-party-lbl { margin-bottom: 14px; }
.hos-wz-reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hos-wz-reg-field { display: flex; flex-direction: column; }
.hos-wz-reg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.hos-wz-reg-cancel { padding: 9px 16px; font: inherit; font-size: var(--text-sm); font-weight: 500;
  color: var(--ink); background: var(--surface); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm); cursor: pointer; }
.hos-wz-reg-cancel:hover { background: var(--slate-50); }
.hos-wz-reg-submit { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
  font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--surface); background: var(--accent);
  border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.hos-wz-reg-submit:hover { background: var(--accent-strong); }
.hos-wz-reg-errors { margin-bottom: 14px; padding: 10px 12px; font-size: var(--text-sm); color: var(--error);
  background: var(--cancelled-bg); border: 1px solid var(--cancelled-border); border-radius: var(--radius-sm); }
.hos-wz-reg-errors > div + div { margin-top: 4px; }
@media (max-width: 540px) { .hos-wz-reg-grid { grid-template-columns: 1fr; }}

/* Review summary — on-system entity header + dividerless KPI row */
.hos-wz-rev-summary { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; margin-bottom: 24px; }
.hos-wz-rev-party { display: flex; align-items: center; gap: 14px; padding: 18px 22px; }
.hos-wz-rev-party .who { min-width: 0; flex: 1; }
.hos-wz-rev-party .nm { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.01em; color: var(--ink); }
.hos-wz-rev-party .sub { font-size: var(--text-sm); color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hos-wz-rev-party .sub .mono { font-family: var(--font-mono); }
.hos-wz-rev-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); }
.hos-wz-rev-stats .cell { padding: 14px 22px; }
.hos-wz-rev-stats .k { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hos-wz-rev-stats .v { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin-top: 6px; }
.hos-wz-rev-stats .v.accent { color: var(--accent); }

/* ════════════════════════════════════════════════════════════
   ALT — Dives "Table" pattern (flat editable ledger)
   ════════════════════════════════════════════════════════════ */
.hos-wz-tbl { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; }
.hos-wz-tbl-head, .hos-wz-trow { display: grid; grid-template-columns: 168px 132px minmax(0,1fr) 96px 104px 96px 40px; gap: 14px; align-items: center; }
.hos-wz-tbl-head { padding: 11px 20px; border-bottom: 1px solid var(--hairline); background: var(--wz-tint);
  font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.hos-wz-tbl-head .r, .hos-wz-trow .amt { text-align: right; }
.hos-wz-trow { padding: 9px 20px; border-top: 1px solid var(--hairline-2); }
.hos-wz-trow:first-of-type { border-top: 0; }
.hos-wz-trow .amt { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
.hos-wz-tbl-foot { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; border-top: 1px solid var(--hairline); background: var(--wz-tint); }
.hos-wz-tbl-addrow { display: flex; align-items: center; gap: 8px; padding: 11px 20px; border-top: 1px solid var(--hairline-2); }
.hos-wz-tbl-total { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 500; color: var(--accent); }

/* ════════════════════════════════════════════════════════════
   ALT — Review "Invoice" document pattern
   ════════════════════════════════════════════════════════════ */
.hos-wz-inv { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card, 0 1px 2px rgba(17,24,39,.04)); overflow: hidden; }
.hos-wz-inv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 28px 30px; border-bottom: 1px solid var(--hairline); }
.hos-wz-inv-head .brand { display: flex; align-items: center; gap: 11px; }
.hos-wz-inv-head .brand .pname { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--ink); letter-spacing: -0.01em; }
.hos-wz-inv-head .brand .tname { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.hos-wz-inv-head .meta { text-align: right; }
.hos-wz-inv-head .meta .doc { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hos-wz-inv-head .meta .ref { font-family: var(--font-mono); font-size: var(--text-md); color: var(--ink); margin-top: 5px; }
.hos-wz-inv-head .meta .dt { font-size: var(--text-xs); color: var(--muted); margin-top: 4px; }
.hos-wz-inv-party { display: grid; grid-template-columns: 1fr 1fr; }
.hos-wz-inv-party .cell { padding: 18px 30px; border-right: 1px solid var(--hairline-2); }
.hos-wz-inv-party .cell:last-child { border-right: 0; }
.hos-wz-inv-party .k { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hos-wz-inv-party .v { font-size: var(--text-sm); color: var(--ink); margin-top: 7px; font-weight: 500; }
.hos-wz-inv-party .s { font-size: var(--text-xs); color: var(--muted); margin-top: 3px; }
.hos-wz-inv-tbl-head { display: grid; grid-template-columns: minmax(0,1fr) 120px 56px 100px; gap: 16px; padding: 11px 30px;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--wz-tint);
  font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.hos-wz-inv-tbl-head .c { text-align: center; } .hos-wz-inv-tbl-head .r { text-align: right; }
.hos-wz-inv-grp { padding: 13px 30px 5px; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.hos-wz-inv-grp.warm { color: var(--briefing); }
.hos-wz-inv-li { display: grid; grid-template-columns: minmax(0,1fr) 120px 56px 100px; gap: 16px; align-items: center; padding: 9px 30px; }
.hos-wz-inv-li .nm { font-size: var(--text-sm); color: var(--ink); }
.hos-wz-inv-li .dt { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.hos-wz-inv-li .qty { text-align: center; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--slate-700); }
.hos-wz-inv-li .amt { text-align: right; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
.hos-wz-inv-totals { display: flex; justify-content: flex-end; padding: 18px 30px 26px; border-top: 1px solid var(--hairline); margin-top: 8px; }
.hos-wz-inv-totals .box { width: 300px; }
.hos-wz-inv-totals .line { display: flex; justify-content: space-between; padding: 6px 0; font-size: var(--text-sm); color: var(--muted); }
.hos-wz-inv-totals .line .v { font-family: var(--font-mono); color: var(--ink); }
.hos-wz-inv-totals .grand { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 0; margin-top: 6px; border-top: 1px solid var(--hairline); }
.hos-wz-inv-totals .grand .k { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.hos-wz-inv-totals .grand .v { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.02em; color: var(--accent); }

/* ════════════════════════════════════════════════════════════
   ALT — Payment "Balance-led" pattern (booking-detail .bal)
   ════════════════════════════════════════════════════════════ */
.hos-wz-bal-grid { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 24px; align-items: start; }
@media (max-width: 1020px) { .hos-wz-bal-grid { grid-template-columns: 1fr; }}
.hos-wz-bal { position: sticky; top: 24px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(17,24,39,.04); padding: 22px 24px; }
.hos-wz-bal .eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hos-wz-bal-amt { font-family: var(--font-display); font-weight: 600; font-size: 42px; letter-spacing: -0.02em; color: var(--ink); margin: 14px 0 4px; line-height: 1; }
.hos-wz-bal-amt .cents { color: var(--muted-2); }
.hos-wz-bal-sub { font-size: var(--text-xs); color: var(--muted); }
.hos-wz-bal-bar { height: 6px; border-radius: 6px; background: var(--hairline); overflow: hidden; margin: 18px 0 12px; }
.hos-wz-bal-bar > span { display: block; height: 100%; background: var(--accent); transition: width .25s cubic-bezier(0.32,0.72,0,1); }
.hos-wz-bal-foot { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-xs); }
.hos-wz-bal-foot .paid { color: var(--accent); font-weight: 500; }
.hos-wz-bal-foot .total { color: var(--muted); }
.hos-wz-bal-state { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline-2); font-size: var(--text-sm); }
.hos-wz-bal-state .tick { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.hos-wz-bal-state.ok .tick { background: var(--confirmed-bg); color: var(--confirmed); }
.hos-wz-bal-state.no .tick { background: var(--briefing-bg); color: var(--briefing); }

/* tasks/075: a `.dn` / `.dn.receipt` / `.dn.console` block plus `dn-pop` and
   `dn-rise` keyframes sat here with ZERO callsites — DiveOS-family names
   (`dn-` is DiveOS-local) copied in with the CSS but never wired to markup.
   Removed: arena's prefix law forbids the family, and dead rules invite a
   third parallel component set. The Done step's own styles are `.hos-wz-done*`
   (above) and `.hos-bk2-rec*` (components/booking-v2.css). */

/* ── Per-step measure (tasks/075, owner) ────────────────────────────────────
   The wizard has NO single page measure. Measured live in DiveOS at 1440×900:
     guest   .wz-inner.narrow   max-width 880px
     dives   .wz-inner          max-width none  (full pane; .bk2-2col caps 1176)
     review  .wz-inner.narrow   max-width 880px
     payment .bk2-pay-rail      max-width 1188px
     done    .dn.receipt        max-width 660px  ← the narrowest
   Arena reproduces each rather than averaging them into one. .narrow (880) was
   already correct; the success step needed its own, tighter measure. */
.hos-wz-receipt { max-width: 660px; margin: 0 auto; }

/* New-guest drawer's passport read affordance. The <input type=file> is
   visually hidden and the <label> IS the button — a native file input cannot be
   styled, and wrapping it in a label keeps the control keyboard-reachable and
   screen-reader-labelled without a click shim. */
.hos-drawer-scan { margin-bottom: var(--space-4); }
.hos-scan-label { cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); }