/* tasks/063 — read-first transfer run drawer (variation B: status hero + spec sheet).
   The drawer is a glance; boat/crew edits open the shared _board_modal popover (no
   inline dropdowns), operations open the boarding board. Tokens only — no naked hex,
   no off-scale type, no inline token-styles.

   tasks/071 — the undeclared `.td-*` family is gone. Everything the gem ships is now
   rendered as the gem component:
     .td-rows/.td-row/__lbl/__val -> .os-desclist(--inline) / __row / __term / __desc
     .td-crewchip / .td-rm        -> .os-chip--sm / .os-chip__x
     .td-chk / .td-count          -> .os-status-pill(--confirmed/--briefing/--muted --sm)
     .td-change / .td-miniadd     -> .os-btn (rule 1: no local button class, ever)
     .td-manage                   -> .os-link
     .td-mono                     -> .os-mono
     .td-foot / drawer header     -> .os-sheet__foot / .os-sheet__head (rule 8)
   What remains is genuinely HotelOS-domain run chrome, prefixed `.hos-`. */

/* ── drawer head (the DS sheet head + this drawer's identity row) ── */
.hos-td-head { display: flex; align-items: center; gap: 13px; flex: none; }
.hos-td-head__title {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600;
  color: var(--ink); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── status hero ── */
.hos-td-hero { padding: 18px 18px 16px; background: linear-gradient(180deg, var(--accent-soft), transparent); border-bottom: 1px solid var(--hairline); }
.hos-td-hero__top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.hos-td-depart { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-weight: 700; font-size: var(--text-xs); color: var(--accent-strong); background: var(--surface); border: 1px solid var(--accent-soft); border-radius: var(--radius-pill); padding: 4px 11px; }
.hos-td-verdict { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 700; }
.hos-td-verdict--ok { color: var(--status-confirmed-fg); }
.hos-td-verdict--warn { color: var(--status-briefing-fg); }
.hos-td-verdict--muted { color: var(--muted); }
.hos-td-board { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 11px; }
.hos-td-board__big { display: flex; align-items: baseline; gap: 6px; }
.hos-td-board__big b { font-family: var(--font-display); font-size: var(--display-sm); font-weight: 600; line-height: .9; letter-spacing: -.02em; color: var(--ink); }
.hos-td-board__big span { font-size: var(--text-sm); color: var(--muted); }
.hos-td-board__meta { margin-left: auto; padding-bottom: 3px; font-size: var(--text-xs); color: var(--muted); }
.hos-td-board__meta b { color: var(--ink); font-weight: 600; }
.hos-td-segbar { display: flex; height: 12px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-alt); gap: 2px; }
.hos-td-seg { height: 100%; }
.hos-td-seg--aboard { background: var(--status-confirmed-fg); }
.hos-td-seg--toboard { background: var(--accent); }
.hos-td-seg--booked { background: var(--accent); }
.hos-td-seglegend { display: flex; gap: 14px; margin-top: 8px; font-size: var(--text-2xs); color: var(--muted); }
.hos-td-legdot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.hos-td-legdot--aboard { background: var(--status-confirmed-fg); }
.hos-td-legdot--toboard { background: var(--accent); }
.hos-td-legdot--booked { background: var(--accent); }
.hos-td-legdot--free { background: var(--surface-alt); border: 1px solid var(--hairline); }
.hos-td-checks { display: flex; gap: 6px; margin-top: 13px; flex-wrap: wrap; }

/* ── spec rows ──────────────────────────────────────────────────────────
   The component is the gem's `.os-desclist--inline`; this scope restores the
   spec-sheet reading it lacks — a fixed-width uppercase term and a LEFT-aligned
   value (the gem's --inline right-aligns the value, which throws a dense row of
   pills to the far edge). Flagged upstream as an `.hos-desclist--spec` variant. */
.hos-td-rows { padding: 2px 18px; }
.hos-td-rows .os-desclist__row { align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--hairline); }
.hos-td-rows .os-desclist__row:last-child { border-bottom: none; }
.hos-td-rows .os-desclist__term { width: 72px; flex: none; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); }
.hos-td-rows .os-desclist__desc { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; text-align: left; font-size: var(--text-sm); color: var(--ink); }
.hos-td-rows .os-desclist__desc b { font-weight: 600; }
.hos-td-dim { color: var(--muted); }

/* crew chips — the pills are `.os-chip--sm`; only the skipper tint is domain. */
.hos-td-crew { flex-wrap: wrap; }
.hos-td-crewchip--skip { background: var(--accent-soft); border-color: transparent; color: var(--accent-strong); font-weight: 600; }
.os-chip--sm form { margin: 0; display: inline-flex; }

/* ── read-only manifest ── */
.hos-td-mhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.hos-td-mtools { margin-left: auto; display: flex; gap: 6px; }
.hos-td-aboard { margin-left: auto; font-size: var(--text-2xs); font-weight: 600; color: var(--muted); white-space: nowrap; }
.hos-td-aboard b { color: var(--status-confirmed-fg); }
.hos-td-members { border-top: 1px solid var(--hairline-2); }
.hos-td-members summary { list-style: none; cursor: pointer; padding: 7px 0; font-size: var(--text-2xs); font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.hos-td-members summary::-webkit-details-marker { display: none; }

/* ── footer — single-row shared CTA pattern (unified trip drawer) ───────────
   ALL actions sit on ONE horizontal line: the filled primary (the current
   status's lifecycle step), equal secondary outlines for peer utilities, and
   the destructive Cancel kept as a quiet danger-tinted button pushed to the far
   end so it stays visually distinct and is not a mis-tap peer. Wraps gracefully
   on a narrow drawer rather than stacking. Shared by the transfer AND excursion
   drawers so the two read as one component family. */
.hos-td-foot { flex: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.hos-td-foot > form { margin: 0; }
/* destructive tier — quiet danger-tinted button, pushed to the far end. */
.hos-td-cancelwrap { margin-left: auto; }
.hos-td-cancel { background: transparent; border-color: transparent; color: var(--danger); }
.hos-td-cancel:hover { background: var(--status-cancelled-bg); }

/* ── excursion drawer: guests + reboarding (chassis twin of the manifest) ── */
.hos-td-seg--booked, .hos-td-legdot--booked { background: var(--accent); }
.hos-xd-sec { padding: 16px 18px; }
.hos-xd-sec + .hos-xd-sec { border-top: 1px solid var(--hairline); }
.hos-xd-shead { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.hos-xd-list { display: flex; flex-direction: column; gap: 6px; }
.hos-xd-gcard { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.hos-xd-gcard--out { opacity: .6; }
.hos-xd-pax { width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--slate-50); border: 1px solid var(--hairline-2); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--accent); }
.hos-xd-gname { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.hos-xd-groom { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); }
.hos-xd-empty { padding: 18px; text-align: center; color: var(--muted-2); font-size: var(--text-sm); }
.hos-xd-banner { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; }
.hos-xd-banner--ok { color: var(--status-confirmed-fg); background: var(--status-confirmed-bg); }
.hos-xd-banner--warn { color: var(--status-cancelled-fg); background: var(--status-cancelled-bg); }
.hos-xd-banner--recount { color: var(--status-briefing-fg); background: var(--status-briefing-bg); }
.hos-xd-banner--muted { color: var(--text-muted); background: var(--slate-50); }
.hos-xd-counts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.hos-xd-count { display: flex; align-items: end; gap: 6px; margin: 0; }