/* ══════════════════════════════════════════════════════════════════════════
   new_reservation.css — /front_office/new, rebuilt on the SALE-WIZARD page
   pattern (tasks/073; mockup at public/mockups/newres/).

   The page used to be a form sitting in the padded content column with a
   Back/Next pair repeated at the bottom of all four steps, and no running
   answer to "what am I actually selling" until submit. It is now the same
   shape as /excursions/sales/new: the page owns the whole pane, the stepper
   sits on top, the body scrolls INSIDE it, and one footer is pinned to the
   pane floor. The mechanism (`.hos-shell-main--bleed`) already existed — this
   page had simply never opted in.

   Everything here is geometry. The CONTENT is gem components: `.os-option-card`
   for the room and rate choice, `.os-field-grid` for the field blocks,
   `.os-ds-sum` for the rail, and the shared `wizard_footer` partial for the bar.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The header band must not be pulled up in bleed mode ───────────────────
   The gem pulls `.os-page-head` up by `calc(-1 * var(--shell-pad-top))` so the
   band butts the pane top through the shell's 40px padding. A bleed pane has NO
   top padding and `overflow: hidden`, so that pull-up moved the band 40px above
   the pane and the overflow rule clipped it — the title lost its top third.
   Zero the token rather than override the gem's margin: the gem is computing
   from a value the shell publishes, and the correct answer is that a bleed pane
   publishes no top padding. */
.hos-shell-content--bleed { --shell-pad-top: 0px; }

/* The pane-owning shell. Column so the body can take the remaining height and
   scroll within it, leaving the footer pinned without `position: fixed` —
   fixed would overlap the sidebar and ignore the pane's own width. */
/* `min-height: 100%`, NOT `flex: 1; min-height: 0`. A sticky child can only
   travel inside its PARENT's box: while this was a height-capped flex column the
   stepper stuck for 57px and then scrolled out with the content. The shell now
   grows to its content, so the stepper holds for the whole scroll, and 100%
   keeps the footer on the floor when a step is shorter than the pane. */
.hos-nr-shell {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--canvas);
}

/* NOT a scroller — the PANE scrolls (diveos_shell.css, measured against DiveOS).
   The header band and the stepper scroll away with the content, and the footer
   is the only thing held. An inner scroller here would pin both of them, which
   is the two-bars-of-chrome shape the reference does not have. */
/* The two-column floor lives on the BODY (work column + rail), not on .hos-nr-2col:
   the browser re-nests the sticky rail out to be a sibling of .hos-nr-2col, so the grid
   has to span both here or the rail drops to a full-width block below the form. */
/* The work column is capped at the READING width (960px) — the width the form had as
   a single column before the rail existed — and the 320px rail is ADDED to its right in
   the pane's spare width, NOT carved out of it. An earlier pass put `max-width: 960` on
   the whole BODY and split it `1fr + 320`, which shrank the form to ~600px and wrapped
   the Business-source row onto two lines. `minmax(0, --page-reading)` keeps the form at
   960 on wide screens yet lets it shrink (min 0) on laptops instead of overflowing; the
   default `justify-content: start` parks the spare width on the right where the pane is
   empty. The Individual/Group toggle is a full-width row of its own (`.hos-nr-mode`,
   `grid-column: 1 / -1`) so the rail top-aligns with the Dates card, not the toggle. */
.hos-nr-body {
  flex: 1;
  padding: var(--space-6) var(--gutter) var(--space-8);
  display: grid;
  grid-template-columns: minmax(0, var(--page-reading)) 320px;
  gap: var(--space-6);
  align-items: start;
}

.hos-nr-mode {
  grid-column: 1 / -1; /* the mode toggle spans both columns as row 1 */
}

.hos-nr-2col {
  min-width: 0; /* the work column (grid col 1) — the rail is the sibling grid col 2 */
}

.hos-nr-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}


/* Sticky against the pane. `--space-6` rather than 0 so the rail clears the
   pane's own top edge instead of butting it once the header has scrolled past. */
.hos-nr-rail {
  position: sticky;
  top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Below the two-column floor the rail is no longer a rail: it stacks under the
   work column and must stop sticking, or it pins a summary over the fields. */
@media (max-width: 1000px) {
  .hos-nr-body { grid-template-columns: 1fr; }
  .hos-nr-rail { position: static; }
}

/* ── Form sections use the GEM's `.os-form-section` ────────────────────────
   This page briefly minted `.hos-nr-sec` — an eyebrow head on the canvas above
   a separate body card. That is the READ-surface pattern (the drawer redesign,
   the guest portal), and it was the wrong one here: os-ds already ships
   `.os-form-section` for forms, where the card IS the section and the header
   lives INSIDE it (`__header` > `__title`, then `__subtitle`, then `__body`).
   Minting a local family for a job the gem already does is exactly the drift
   CLAUDE.md exists to prevent, so the local one is gone.

   The component brings its own 18px bottom margin, so the panel must not add a
   gap on top of it. */
.hos-wzstep,
.hos-wzstep .hos-modeblock { display: block; }
/* `hidden` must beat the display above — the wizard hides panels with it. */
.hos-wzstep[hidden] { display: none; }

/* An option-card list draws its own edges, so the body contributes padding
   only — a bordered card of bordered cards is a card in a card. */
.hos-nr-body--flush {
  margin-inline: calc(var(--space-2) * -1);
}

/* ── Dates + the derived nights figure ────────────────────────────────────
   Three columns rather than a field grid: the nights readout belongs BETWEEN
   the two dates it is derived from, and a grid cell would give it a column of
   its own width. `align-items: end` sits it on the inputs' baseline, not the
   labels'. */
.hos-nr-dates {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-4);
  align-items: end;
}

.hos-nr-nights {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-bottom: var(--space-2);
}

.hos-nr-nights__n {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent-strong);
}

.hos-nr-nights__l {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--muted-2);
}

/* Zero or inverted: the range prices as nothing. The inputs clamp `min`, but a
   typed or pasted value still lands here, and silently selling zero nights is
   worse than saying so. */
.hos-nr-nights--bad .hos-nr-nights__n { color: var(--status-cancelled-fg); }

/* On a phone the pair stacks, so the figure becomes a row between them rather
   than a column beside them. */
@media (max-width: 640px) {
  .hos-nr-dates { grid-template-columns: 1fr; }
  .hos-nr-nights { flex-direction: row; align-items: baseline; gap: var(--space-2); padding-bottom: 0; }
}

/* ── `hidden` must actually hide ───────────────────────────────────────────
   The UA rule is `[hidden] { display: none }` at (0,0,0), and the gem's
   `.os-btn { display: inline-flex }` is an author rule at (0,1,0) — so it wins,
   and a footer button the wizard controller had "hidden" still rendered at full
   size and stayed clickable. That is not cosmetic here: the Create button was
   reachable on step 1, i.e. before a room type had been chosen.

   Fixed in BOTH places on purpose. This rule is the presentation half; the
   controller's `commit()` re-checks the step, because CSS is not a control —
   one stylesheet-order change and the guard would silently evaporate. Same
   trap already recorded in gr_card.css and reservation_drawer.css. */
.hos-wz-foot .os-btn[hidden] { display: none; }

/* ── The footer sits OUTSIDE the <form> ────────────────────────────────────
   …so the form-scoped field density (hotelos_ds/tokens.css) cannot reach it,
   and its buttons rendered at the 36px base beside 46px fields — the same
   mismatch that fix was written to end, reappearing because the bar is pinned
   to the pane rather than nested in the column. It belongs to the form even
   though it cannot be inside it, so it takes the form's rung. */
.hos-wz-foot {
  --control-h: var(--control-h-field);
  --control-pad-x: var(--control-pad-x-field);
  --control-fs: var(--control-fs-field);
}

/* ── Business source (direction A) ────────────────────────────────────────
   `.hos-bs-reveal` — a field block that only exists once the choice above makes
   it relevant. The dashed rule and the "why" line are the point: a field that
   appears without saying why reads as a glitch, and the desk has to guess what
   it did. It is never a silent hide — the controller fails open three ways
   (agent already chosen, no agent-ish source in the catalog, nothing chosen). */
.hos-bs-reveal {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--hairline-strong);
}
.hos-bs-reveal[hidden] { display: none; }

.hos-bs-reveal__why {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  color: var(--accent-strong);
}

/* `.hos-bs-more` — the optional tail as a <details>, so it is ONE row until
   asked for and gets native keyboard + screen-reader behaviour free. The chips
   on the summary carry what is set, so it never has to be opened just to read
   the section back. */
.hos-bs-more {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline-2);
}
.hos-bs-more > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;          /* Firefox */
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--muted);
  transition: color 120ms var(--ease-standard);
}
.hos-bs-more > summary::-webkit-details-marker { display: none; }  /* Safari */
.hos-bs-more > summary:hover { color: var(--ink); }
.hos-bs-more > summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.hos-bs-more__chev {
  display: inline-flex;
  color: var(--muted-2);
  transition: transform 180ms var(--ease-standard);
}
.hos-bs-more[open] .hos-bs-more__chev { transform: rotate(180deg); }
/* Pushed right, and empty when nothing is set — a row of "—" chips is worse
   than no chips. The controller renders none in that case, so this collapses. */
.hos-bs-more__set { margin-left: auto; display: flex; gap: 6px; }
.hos-bs-more__body { margin-top: var(--space-4); }

/* ── The gem's "next sibling after the header band" margin ─────────────────
   os-ds gives any element following `.os-page-head` a 2rem top margin, which is
   right when the band sits above a normal padded column. In BLEED mode the page
   OWNS the pane — the shell is a fixed-height flex column with the body
   scrolling inside it — so that 32px lands as a dead band under the stepper and
   steals it from the scroll area. The reg card already carries the identical
   override (gr_card.css); the doubled class is how it beats the gem's
   `:not()`-chained (0,4,0) selector without !important.

   UPSTREAM GAP: the gem's `.os-page-header` branch already exempts
   `.os-page-band` for exactly this case; the `.os-page-head` branch does not. */
.hos-shell-content .os-page-head + .hos-nr-shell.hos-nr-shell { margin-top: 0; }

/* ── Guest match rows — the sale wizard's row, picked with a radio ─────────
   `.hos-wz-guest` is the shared component; here the radio is visually hidden
   and the ROW carries the selection. `:has()` does it in CSS, so a turbo-frame
   swap can never leave a stale painted row behind the way a JS class toggle can. */
.hos-wz-guest--pick { cursor: pointer; }
.hos-wz-guest--pick:hover { background: var(--surface-alt); }
.hos-wz-guest--pick:has(input:checked) { background: var(--accent-softer); }
/* The keyboard ring has to move to the row: the input it belongs to is hidden. */
.hos-wz-guest--pick:has(input:focus-visible) { box-shadow: var(--shadow-focus); border-radius: var(--radius-md); }

.hos-wz-guest__tick {
  display: inline-flex;
  flex: none;
  color: var(--accent);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 120ms var(--ease-standard), transform 120ms var(--ease-standard);
}
.hos-wz-guest--pick:has(input:checked) .hos-wz-guest__tick { opacity: 1; transform: scale(1); }

/* `.hos-wz-searchico` is absolutely positioned, so it needs a positioned
   ancestor. The excursion sale supplies one with an inline
   `style="position:relative"`; this is that div as a class, so the search field
   can be composed without an inline style. */
.hos-wz-searchwrap { position: relative; }

/* ── Option cards in this page ────────────────────────────────────────────
   The gem component ships without a check control (it is written for a
   visually-hidden radio). Here the radio stays VISIBLE: the desk is picking
   from a short list under time pressure, and a card whose only selected signal
   is a border change is one a hurried operator mis-reads. */
.hos-nr-body--flush .os-option-card { cursor: pointer; }
.hos-nr-body--flush .os-option-card .os-checkbox { margin-top: 0; }