/* ── Reservation drawer (Front Office) ────────────────────────────────────
   Variant F: a triage-and-act drawer. Promotes the mockup `.mk-*` layout to
   real named classes. Token-only (colour/font/bg via var()); light-only; no
   naked hex. These are drawer-scoped layout components layered on the DiveOS
   foundation — the boarding-pass route strip, the transfer/boat attention row,
   the departure row, the utility toolbar, and de-box helpers.
   ─────────────────────────────────────────────────────────────────────────── */

/* Utility toolbar — one row, no wrap; overflow anchored right as a popover. */
.hos-utilbar { display: flex; gap: var(--space-2); align-items: center; padding-bottom: var(--space-2); }
.hos-utilbar__more { position: relative; margin-left: auto; }
.hos-utilbar__more > summary { list-style: none; cursor: pointer; }
.hos-utilbar__more > summary::-webkit-details-marker { display: none; }
.hos-utilbar__menu {
  position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: 20;
  min-width: 220px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: var(--space-1); display: flex; flex-direction: column;
}
.hos-utilbar__item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; font-size: var(--text-sm);
  cursor: pointer; background: transparent; border: none;
  font-family: var(--font-sans); text-align: left; width: 100%;
}
.hos-utilbar__item:hover { background: var(--surface-alt); }
.hos-utilbar__item--danger { color: var(--danger); }
.hos-utilbar__sep { height: 1px; background: var(--hairline); margin: var(--space-1) 0; }

/* Reservation summary — booking ribbon + icon facts (the re-homed Overview facts). */
.hos-summary { background: var(--surface-alt); border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; }
.hos-summary__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 12px var(--space-4) 0; }
.hos-summary__ref { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }

/* stay ribbon: check-in → nights → check-out */
.hos-ribbon { display: flex; align-items: stretch; gap: var(--space-3); padding: 10px var(--space-4) 14px; }
.hos-ribbon__end { display: flex; flex-direction: column; }
.hos-ribbon__end--out { align-items: flex-end; text-align: right; }
.hos-ribbon__t { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); margin-bottom: 4px; }
.hos-ribbon__d { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 600; line-height: 1; color: var(--ink); }
.hos-ribbon__m { font-size: var(--text-xs); color: var(--text-muted); margin-top: 3px; }
.hos-ribbon__mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding-bottom: 3px; }
.hos-ribbon__line { width: 100%; border-top: 2px dashed var(--hairline-strong); }
.hos-nights { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-strong); font-size: var(--text-2xs); font-weight: 700; }

/* icon facts — bare icons (no tile bg), 1px grid dividers */
.hos-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-top: 1px solid var(--hairline); background: var(--hairline); }
.hos-fact { display: flex; align-items: center; gap: 10px; padding: 11px var(--space-4); background: var(--surface-alt); min-width: 0; }
.hos-fact__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hos-fact__k { font-size: var(--text-2xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); }
.hos-fact__v { font-size: var(--text-sm); color: var(--ink); }
.hos-fact__v--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Section eyebrow spacing inside the journey panel. */
.hos-eyebrow { display: block; margin-bottom: var(--space-3); }

/* Boarding-pass route strip: CODE ── plane ── CODE. */
.hos-route { display: flex; align-items: flex-end; gap: var(--space-3); }
.hos-route__end { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.hos-route__end--to { align-items: flex-end; }
.hos-route__code {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink); line-height: 1;
}
.hos-route__city { font-size: var(--text-xs); color: var(--muted); }
.hos-route__line { flex: 1 1 auto; position: relative; height: 20px; }
.hos-route__line::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: repeating-linear-gradient(to right, var(--hairline-strong) 0 5px, transparent 5px 9px);
}
.hos-route__plane {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--surface); padding: 0 var(--space-2); color: var(--accent);
  display: inline-flex;
}
.hos-route__plane svg { width: 18px; height: 18px; }
.hos-route__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-2); margin-top: var(--space-3);
}
.hos-route__timelabel { display: flex; flex-direction: column; gap: 1px; align-items: flex-end; }
.hos-route__time {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--text-base); font-weight: 600; color: var(--ink); line-height: 1;
}
/* Route-strip card lead titles sit at 14px within the drawer. */
.hos-drawer .hos-card-title { font-size: var(--text-base); }

/* De-boxed attention/transfer row — tinted strip, no full border. */
.hos-attn { display: flex; align-items: center; gap: var(--space-3); padding: 12px 14px; border-radius: var(--radius-md); }
.hos-attn--warn { background: var(--warning-bg); border-left: 3px solid var(--warning); }
.hos-attn__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* Borderless muted row — low-priority (departure not captured). */
.hos-muted-row { display: flex; align-items: center; gap: var(--space-3); }
.hos-muted-row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* Sized muted icon tile (size = layout; colour via token vars). */
.hos-tile-44 { width: 44px; height: 44px; }
.hos-tile-muted { background: var(--surface-alt); color: var(--muted-2); }

/* Single link-out row. */
.hos-linkrow {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0;
  color: var(--ink); text-decoration: none; font-size: var(--text-sm);
}
.hos-linkrow svg { color: var(--muted-2); }
.hos-linkrow__chev { margin-left: auto; color: var(--muted-2); display: inline-flex; }
.hos-linkrow:hover { color: var(--accent); }
.hos-linkrow:hover svg { color: var(--accent); }

/* ── Arrival journey: flight + boat side by side (tasks/041 S8) ──
   The drawer is min(560px, 94vw) ≈ 520px of content. Full-width stacked cards
   stranded their content across all of it; two columns give each card a shape
   that fits what's in it. Collapses on a narrow drawer (94vw on small screens). */
.hos-journey-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  align-items: stretch;
}
@media (max-width: 560px) { .hos-journey-pair { grid-template-columns: 1fr; } }
.hos-journey-pair__card { display: flex; flex-direction: column; min-width: 0; }

/* Bottom-align every card's CTA to the shared baseline regardless of content
   height (the pair is align-items:stretch, so both cards are the same height).
   Three shapes land on the same rule:
     - flight CTA row (.hos-journey-pair__cta) is a direct column child;
     - the ASSIGNED boat's route card has the popover as a direct card child;
     - the UNASSIGNED boat's popover sits in a body that grows, then floats down. */
.hos-journey-pair__cta { margin-top: auto; display: flex; gap: var(--space-2); align-items: center; }
.hos-journey-pair__card > .hos-boat-pop { margin-top: auto; }
.hos-boatcard__body > .hos-boat-pop { margin-top: auto; }

/* Assigned boat = the flight card's route strip. Header carries the vessel chip
   + transfer pill; the endpoint labels are words (resort name), so they step
   down from the IATA code size. */
.hos-boatcard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.hos-route__code--md { font-size: var(--text-md); }

/* Unassigned boat as a column card (icon tile + body + bottom-aligned CTA). */
.hos-boatcard { gap: var(--space-3); }
.hos-boatcard__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.hos-boatcard--warn { border-color: var(--status-briefing-border); background: var(--status-briefing-bg); }

/* ── Drawer folio (read-only). Charges only — the persistent footer owns the
   totals, so this doesn't repeat them. Hairline rows, no card-in-card. ── */
.hos-folio { display: flex; flex-direction: column; }
.hos-folio__row {
  display: grid; grid-template-columns: 54px 1fr auto; gap: var(--space-3);
  align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--hairline-2);
}
.hos-folio__row:last-child { border-bottom: none; }
.hos-folio__day { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); }
.hos-folio__desc {
  font-size: var(--text-sm); color: var(--ink); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hos-folio__amt {
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink);
  font-variant-numeric: tabular-nums; text-align: right;
}

/* ── Departure capture: an INLINE disclosure, not a modal-in-a-modal (tasks/041 S8).
   The form expands in place under its row; the drawer is already an overlay, so a
   second scrim on top of it was one layer too many. ── */
.hos-depblock { display: flex; flex-direction: column; gap: var(--space-2); }
.hos-depform > summary { list-style: none; cursor: pointer; width: fit-content; }
.hos-depform > summary::-webkit-details-marker { display: none; }
.hos-depform__panel {
  margin-top: var(--space-2); padding: var(--space-4);
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.hos-depform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.hos-depform__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hos-depform__foot {
  grid-column: 1 / -1; display: flex; gap: var(--space-2); flex-wrap: wrap;
  padding-top: var(--space-2); border-top: 1px solid var(--hairline-2);
}
.hos-dep-flightno { font-family: var(--font-mono); font-weight: 600; }

/* ── Assign-boat popover (scrim + panel inside the drawer) ── */
.hos-boat-pop { position: relative; }
.hos-boat-pop > summary { list-style: none; cursor: pointer; }
.hos-boat-pop > summary::-webkit-details-marker { display: none; }
.hos-boat-scrim {
  position: fixed; inset: 0; z-index: 40;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  display: flex; align-items: center; justify-content: center; padding: var(--space-4);
}
/* PANEL-mode scrim (flight modals) toggles via [hidden]; author display:flex would
   otherwise beat the UA [hidden] rule and keep it visible. */
.hos-boat-scrim[hidden] { display: none; }
/* .fo-popover was promoted upstream as .os-popover (os-ds v1.3.0) — the local
   copy is gone; every callsite uses the gem component. */

/* de-box helpers for the folio panel + attention titles (avoid inline token props) */
.hos-title-warn { color: var(--warning); }
.hos-title-accent { color: var(--accent); }
.hos-tile-accent { background: var(--accent-soft); color: var(--accent); }
.hos-readonly {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border-radius: var(--radius-md); background: var(--surface-alt);
  color: var(--text-muted); font-size: var(--text-sm); font-weight: 600;
}

/* selectable run row (radio card). Sits on the BUTTON (button_to renders the block
   inside <button>, not the <form>), so it also resets the button's own chrome. */
/* A row INSIDE the popover/journey card, not a card of its own. It used to
   carry its own border + radius, which made every option a bordered sub-panel
   nested in a card — the card-in-card the detail-surface patterns call a gate
   smell (#3: separate rows with hairline dividers, not bordered sub-panels).
   Found by loading the picker; the markup read fine. */
.hos-runrow {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3); cursor: pointer; margin: 0;
  width: 100%; text-align: left; background: transparent;
  font: inherit; color: inherit; border: none; border-radius: 0;
  transition: background-color 120ms ease;
}
/* Whole-row hover: each row is a single action (pattern 6). */
.hos-runrow:hover { background: var(--surface-alt); }
.hos-runrow + .hos-runrow { border-top: 1px solid var(--hairline-2); }
/* charter picker — a form, not a button: no radio, stacks its own controls */
.hos-runrow--form { cursor: default; }
.hos-runrow--form:hover { background: transparent; }
.hos-runrow__line {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.hos-runrow__radio {
  width: 18px; height: 18px; flex: none; margin-top: 2px; border-radius: var(--radius-pill);
  border: 2px solid var(--hairline-strong);
  display: inline-flex; align-items: center; justify-content: center;
}
/* hide ONLY the radio proxy — an unscoped `.hos-runrow input` also swallows the
   charter form's submit button, which then sits in the DOM but invisible. */
.hos-runrow input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.hos-runrow__radio i { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--accent); display: none; }
.hos-runrow input[type="radio"]:checked ~ .hos-runrow__radio { border-color: var(--accent); }
.hos-runrow input[type="radio"]:checked ~ .hos-runrow__radio i { display: block; }
.hos-runrow__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hos-runrow__title { font-size: var(--text-base); font-weight: 500; color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   Journey-tab redesign (tasks/054) — status-led, Grab layout principles in the
   HotelOS quiet aesthetic. Drawer-scoped `fo-` classes; token-only; light-only.
   A few hover/tint values the theme doesn't ship are DERIVED via color-mix from
   the accent/warning tokens (never naked hex), scoped to the drawer.
   ═══════════════════════════════════════════════════════════════════════════ */
.hos-drawer {
  display: contents;
  --hos-accent-soft-hover: color-mix(in srgb, var(--accent) 14%, transparent);
  --hos-accent-hairline: color-mix(in srgb, var(--accent) 16%, transparent);
  --hos-warning-tint: color-mix(in srgb, var(--warning) 12%, transparent);
  --hos-warning-bg-hover: color-mix(in srgb, var(--warning) 8%, var(--surface));
}

/* Journey body rhythm — generous gap between sections on the canvas. */
.hos-journey { display: flex; flex-direction: column; gap: 26px; padding-top: 20px; }

/* Section = eyebrow title on the canvas + content card beneath. */
.hos-secblock { display: flex; flex-direction: column; gap: 11px; }
.hos-sectitle { display: flex; align-items: center; gap: 9px; padding: 0 4px; }
.hos-sectitle__ico { display: inline-flex; color: var(--accent); }
.hos-sectitle__eye { font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.hos-sectitle__metric { margin-left: auto; font-size: var(--text-2xs); font-weight: 700; color: var(--muted); }
.hos-sectitle__metric--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hos-sectitle--warn .hos-sectitle__ico,
.hos-sectitle--warn .hos-sectitle__eye { color: var(--warning); }
.hos-sectitle--warn .hos-sectitle__metric { color: var(--warning); }
.hos-seccard { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 16px; }
a.hos-seccard { display: block; text-decoration: none; color: inherit; }
.hos-seccard--warn { background: var(--warning-bg); box-shadow: 0 0 0 1px var(--warning-border); }
/* tasks/073 A1 — a section card whose contents are a STACK (callout, toggle,
   field grid) rather than one block. The card only owns padding, so a stacked
   card needs the rhythm declared once here instead of per callsite. */
.hos-seccard--stack { display: flex; flex-direction: column; gap: var(--space-3); }
.hos-seccard--tap { cursor: pointer; transition: background .12s ease; }
.hos-seccard--tap:hover { background: var(--surface-alt); }
.hos-seccard--warn.hos-seccard--tap:hover { background: var(--hos-warning-bg-hover); }
.hos-seccard--tap .hos-taprow:hover { background: transparent; }

/* Status hero — leads the Journey tab (arrival readiness). */
.hos-hero { display: block; text-decoration: none; color: inherit; background: var(--accent-soft); border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--hos-accent-hairline); padding: 16px; }
.hos-hero--tap { cursor: pointer; transition: background .12s ease; }
.hos-hero--tap:hover { background: var(--hos-accent-soft-hover); }
.hos-hero__top { display: flex; align-items: center; gap: 11px; }
.hos-hero--track .hos-hero__top { margin-bottom: 16px; }
.hos-hero__status { font-size: var(--text-sm); font-weight: 600; color: var(--ink); line-height: 1.3; }
.hos-hero__sub { font-size: var(--text-xs); color: var(--accent-strong); margin-top: 2px; }
.hos-hero__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hos-accent-hairline); font-size: var(--text-sm); font-weight: 600; color: var(--accent); }
.hos-hero__link svg { color: var(--accent); }

/* Icon tiles. */
.hos-itile { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--surface-alt); color: var(--muted-2); }
.hos-itile--accent { background: var(--accent-soft); color: var(--accent); }
.hos-itile--success { background: var(--status-confirmed-bg); color: var(--status-confirmed-fg); }
.hos-itile--warn { background: var(--hos-warning-tint); color: var(--warning); }

/* Horizontal 3-node arrival tracker. */
.hos-htrack { display: flex; }
.hos-htrack__step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hos-htrack__bar { position: relative; width: 100%; height: 26px; display: flex; align-items: center; justify-content: center; }
.hos-htrack__bar::before,
.hos-htrack__bar::after { content: ""; position: absolute; top: 12px; height: 2px; background: var(--hairline-strong); }
.hos-htrack__bar::before { left: 0; width: 50%; }
.hos-htrack__bar::after { right: 0; width: 50%; }
.hos-htrack__step:first-child .hos-htrack__bar::before { display: none; }
.hos-htrack__step:last-child .hos-htrack__bar::after { display: none; }
.hos-htrack__step--done .hos-htrack__bar::before,
.hos-htrack__step--done .hos-htrack__bar::after,
.hos-htrack__step--active .hos-htrack__bar::before { background: var(--accent); }
.hos-htrack__dot { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--hairline-strong); background: var(--surface); color: var(--muted-2); }
.hos-htrack__step--done .hos-htrack__dot { border-color: var(--accent); background: var(--accent); color: var(--surface); }
.hos-htrack__step--active .hos-htrack__dot { border-color: var(--accent); background: var(--surface); color: var(--accent); }
.hos-htrack__lbl { font-size: var(--text-2xs); font-weight: 600; color: var(--ink); margin-top: 8px; line-height: 1.3; max-width: 92px; }
.hos-htrack__step--todo .hos-htrack__lbl { color: var(--muted); font-weight: 500; }
.hos-htrack__meta { font-size: var(--text-2xs); color: var(--muted); margin-top: 3px; font-family: var(--font-mono); }
.hos-htrack__pip { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--accent); display: inline-block; }

/* Booking card top line + generic content-row lead. */
.hos-bk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.hos-bk-ref { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.hos-crow { display: flex; align-items: flex-start; gap: 12px; }

/* One content-row pattern — icon-tile + full-width text + a right-snug action that
   reflows below on narrow. The WHOLE row is the tap target (Grab idiom). */
.hos-taprow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; text-align: left; text-decoration: none; color: inherit; cursor: pointer; border: none; background: none; font-family: inherit; width: auto; margin: -8px -10px; padding: 8px 8px 8px 10px; border-radius: var(--radius-md); transition: background .12s ease; }
.hos-taprow:hover { background: var(--surface-alt); }
.hos-taprow > .hos-itile { flex: 0 0 auto; }
.hos-taprow__text { flex: 1 1 9rem; min-width: 0; }
.hos-taprow__t { font-size: var(--text-sm); font-weight: 600; color: var(--ink); line-height: 1.3; }
.hos-taprow__s { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; line-height: 1.35; }
.hos-taprow__act { flex: 0 0 auto; margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 1px; font-size: var(--text-xs); font-weight: 600; color: var(--accent); white-space: nowrap; }
.hos-taprow__act svg { color: var(--accent); }
.hos-taprow--warn .hos-taprow__t { color: var(--warning); }
.hos-taprow--warn .hos-taprow__s { color: var(--warning); }
.hos-taprow--warn:hover { background: var(--hos-warning-tint); }
.hos-rowdiv { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline); }

/* Stacked journey rows — flight then boat as full-width rows in ONE card (the
   mockup stacks them; read-first, so a captured flight row is a whole-row link to
   the Details depth). Assigned boat keeps its route timeline; both are rows. */
.hos-jrow { display: block; }
a.hos-jrow { text-decoration: none; color: inherit; display: block; margin: -8px -10px; padding: 8px 10px; border-radius: var(--radius-md); transition: background .12s ease; }
a.hos-jrow:hover { background: var(--surface-alt); }
.hos-jrow__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.hos-jrow__head .status-pill { margin-left: auto; }
.hos-jrow__view { display: inline-flex; align-items: center; gap: 1px; font-size: var(--text-xs); font-weight: 600; color: var(--accent); white-space: nowrap; }
.hos-jrow__head .hos-jrow__view { margin-left: auto; }
.hos-jrow__head .status-pill + .hos-jrow__view { margin-left: 8px; }
.hos-jrow__view svg { color: var(--accent); }
/* amber unassigned-boat row (own-line block CTA beneath) */
.hos-jtint { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding: 14px; border-radius: var(--radius-md); background: var(--warning-bg); box-shadow: 0 0 0 1px var(--warning-border); }
.hos-jtint__lead { display: flex; align-items: flex-start; gap: 12px; }
.hos-jtint__t { font-size: var(--text-sm); font-weight: 600; color: var(--warning); line-height: 1.3; }
.hos-jtint__s { font-size: var(--text-xs); color: var(--warning); margin-top: 2px; line-height: 1.35; }
.hos-jrow__excluded { margin-left: auto; }
.hos-jrow__cta { margin-top: var(--space-3); }

/* Group hint — soft accent-tint row inside the booking card. */
.hos-hint { display: flex; align-items: center; gap: 11px; margin-top: 14px; padding: 11px 12px; background: var(--accent-soft); border-radius: var(--radius-md); color: var(--accent-strong); }
.hos-hint__t { font-size: var(--text-xs); font-weight: 600; }

/* PIN as filled one-time-code digit squares + inline icon actions on one row. */
.hos-pinrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.hos-pincode { display: flex; flex: none; gap: 4px; }
.hos-pindigit { width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-strong); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; }
.hos-pinrow__actions { display: flex; gap: 6px; margin-left: auto; }

/* Sticky money footer — shrink/wrap gracefully at extreme-narrow (no clip). */
.hos-foot { flex: none; padding: 12px 20px 16px; border-top: 1px solid var(--hairline); background: var(--surface); display: flex; flex-direction: column; gap: 11px; }
.hos-foot__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hos-foot__money { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.hos-foot__unpriced { display: flex; align-items: center; gap: 8px; color: var(--muted-2); font-size: var(--text-sm); }
.hos-fm { text-align: right; min-width: 0; }
.hos-fm__k { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); }
.hos-fm__note { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-2xs); color: var(--muted-2); }
.hos-credit-hint { margin-top: 2px; }

/* ── Inline-style migration (static layout/type/colour lifted out of _drawer.html.erb
   into named drawer-scoped classes — no behaviour or visual change). Shared tiny
   helpers first, then header · group switcher · tab bar · body · popover · guest note. ── */
.hos-grow { flex: 1; min-width: 0; }
.hos-flex-none { flex: none; }
.hos-form-flush { margin: 0; }

/* Drawer header — source mark · name · chips · profile link · close. */
.hos-dhead { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; background: var(--surface); border-bottom: 1px solid var(--hairline-2); }
.hos-dhead__names { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hos-dhead__name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1.1; }
.hos-dhead__meta { display: flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--text-muted); margin-top: 3px; }
.hos-dhead__profile { margin-left: 6px; color: var(--accent); text-decoration: none; font-weight: 600; }

/* Group room switcher (multi-room bookings). */
.hos-group { flex: none; padding: 10px 20px; background: var(--accent-soft); border-bottom: 1px solid var(--hairline-2); }
.hos-group__head { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.hos-group__ref { font-size: var(--text-xs); font-weight: 700; color: var(--accent-strong); }
.hos-group__meta { font-size: var(--text-2xs); color: var(--accent-strong); opacity: .8; }
.hos-group__rooms { display: flex; gap: 7px; flex-wrap: wrap; }
.hos-groom { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; padding: 7px 11px; border-radius: var(--radius-sm); text-decoration: none; min-width: 92px; border: 1px solid transparent; background: var(--surface-alt); box-shadow: none; }
.hos-groom--on { border-color: var(--accent); background: var(--surface); box-shadow: var(--shadow-xs); }
.hos-groom__no { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.hos-groom__name { font-size: var(--text-2xs); color: var(--text-muted); max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tab + actions row. */
.hos-tabsbar { flex: none; padding: var(--space-2) 0 0; background: var(--surface); }
/* The drawer tab row: tabs (a DS .page-tabs group) on the left, utility actions
   on the right, sharing one bottom hairline. align-items:flex-end so the tabs'
   underline lands on the row's border-bottom. Tab styling + the (retired local
   .hos-tabbtn/.hos-tabsbar__tabs) now come from the os-ds .page-tab / .page-tabs. */
/* tasks/073 A1 — the divider is FULL-BLEED. The horizontal gutter lives on the
   ROW (padding-inline), not on the band, so the row's border-bottom reaches both
   panel edges while the tabs and utility actions re-inset to the drawer column.
   House rule: a band spans the pane and butts the band above it; only its
   CONTENT re-insets. Previously the gutter sat on `.hos-tabsbar`, which inset
   the rule by 20px each side and left it floating inside the panel. */
.hos-tabsbar__row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); padding-inline: var(--space-5);
  border-bottom: 1px solid var(--hairline);
}

/* Scrolling body. Namespaced to the drawer: the fo-/rd- -> hos- promotion
   (7697b9a9 / 1df21b42) collided the DRAWER's body with the DETAILS page's
   .hos-body grid (reservation_details.css), and this flex rule won the
   cascade — collapsing /front_office/g/:id to one 409px column with the rail
   stacked under it. Keep the two families apart. */
.hos-drawer__body { flex: 1; overflow-y: auto; padding: 0 var(--space-5) var(--space-6); display: flex; flex-direction: column; }

/* Small overrides. */
.hos-fact--full { grid-column: 1 / -1; }
.hos-prefchips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 8px; }
.hos-tag-block { display: inline-block; margin-bottom: 10px; }
.hos-route__foot--flush { margin-top: 0; }
.hos-tasksep { border-top: 1px solid var(--hairline); margin-top: 14px; padding-top: 14px; }

/* Guest-note block (preferences / notes / dietary). */
.hos-guestnote { padding: 11px 14px; display: flex; flex-direction: column; gap: 6px; }
.hos-guestnote__eye { font-size: var(--text-2xs); }
.hos-guestnote__line { font-size: var(--text-sm); color: var(--ink); }
.hos-guestnote__line b { font-weight: 600; }

/* ── Destructive confirm (cancel / no-show / void) ───────────────────────────
   Content grammar comes from os-ds (`.os-confirm__title/__msg/__actions`,
   `.os-callout--cancelled`, the `.diveos-*` form substrate). These classes only
   carry the LAYOUT the DS doesn't own — this flow renders inside the drawer's
   turbo-frame (full height, scrolling body) or the full-page fallback card, so
   it isn't the DS's floating `.os-confirm__panel`. Replaces 12 inline styles. */
.hos-confirm { display: flex; flex-direction: column; min-height: 0; }
.hos-confirm__head {
  flex: none; display: flex; align-items: center; gap: var(--space-3);
  padding: 18px var(--space-5); background: var(--surface);
  border-bottom: 1px solid var(--hairline-2);
}
.hos-confirm__back { flex: none; }
.hos-confirm__ident { flex: 1; min-width: 0; }
.hos-confirm__body {
  flex: 1; overflow-y: auto; padding: 18px var(--space-5) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
}
/* the DS msg carries a 22px bottom margin for a floating panel; inside our
   flex-gap column that double-spaces, so zero it and let the gap do the work. */
.hos-confirm__policy { margin: 0; }
.hos-confirm__field { display: block; }
/* Layout/typography now come from `.os-field-check`; this only stretches it to
   the column width so the label wraps against the fields, not its own measure. */
.hos-confirm__ack { display: flex; }
.hos-confirm__foot {
  flex: none; padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--hairline); background: var(--surface);
}

/* Full-page confirm wrapper. Centred with `margin-inline`, NOT `margin: 0 auto`
   — the shorthand sets margin-top to 0, and as an inline style it outranked the
   os-ds body-gap rule (`.os-page-head + *` -> margin-top: 2rem), so the card sat
   flush under the page header no matter what the DS declared. */
.hos-confirm-page {
  max-width: 560px;
  margin-inline: auto;
  overflow: hidden;
}

/* Guest-tasks list (drawer + Details · Tasks). Layout comes from the gem's
   .os-stack / .os-inline; these are the leftovers those cannot express.
   `--static` is the read-only row a viewer sees — same chrome, no affordance. */
.hos-tasks__title { margin-bottom: var(--space-3); }
.hos-tasks__add { margin-top: var(--space-3); }
.hos-tasks__form { margin: 0; }
.hos-tasks__btn { width: 100%; }
.hos-task--static { cursor: default; }

/* Stay notes (append-only, void-and-rewrite). Layout from .os-stack/.os-inline;
   these carry the VOIDED state, which is domain: a voided note stays visible and
   struck rather than disappearing, because the audit trail is the point. */
.hos-note--voided { opacity: .55; }
.hos-note--voided .hos-note__body { text-decoration: line-through; }
.hos-note__kind { flex: none; }
.hos-note__void { flex: none; }
.hos-note__form { margin: 0; }
.hos-note__kindsel { flex: 0 0 140px; }

/* Boat picker leftovers, replacing per-callsite inline styles. */
.hos-runlist__note { margin-top: var(--space-1); }
.hos-boat-pop { flex: none; }
.hos-boat-pop__pad { padding: var(--space-4); }

/* Charter picker: select + submit on ONE row (the Transport > Edit crew
   pattern), rather than a stacked sub-panel. The select flexes, the button
   takes only the width it needs. */
.hos-runrow__inline {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2);
}
.hos-runrow__inline .os-field-select,
.hos-runrow__inline .os-select { flex: 1; min-width: 0; }
.hos-runrow__go { flex: none; width: fit-content; }