/* tasks/075 — excursion roster (trip detail). Read-first detail surface on the shared .hos-body / .hos-rail (reservation_details.css) + os-ds cards/chips/ avatars. HotelOS-local .hos-exc-* glue only; NO new .os-* families, tokens only (no raw hex, no dark:). Type discipline (matches the reservation-details read surface): · canvas section label + in-card micro-label → .os-eyebrow (10/600/upper/muted) · row name → 14/600 ink · meta → 12/400 muted (Inter, NOT mono) · mono is reserved for genuine numerics (headcount, capacity). */ .hos-exc-main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; } .hos-exc-sect { margin: 2px 0 -4px; } /* canvas eyebrow above a card */ .hos-exc-pad { padding: 16px; } .hos-exc-rows { display: grid; } /* passenger list — rows w/ dividers */ .hos-exc-danger { color: var(--danger); } .hos-exc-noshow { opacity: 0.55; } /* ── Vessel + captain — read-first rows w/ in-place view↔edit swap ─────── */ .hos-exc-vic { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--surface-alt); color: var(--accent-strong); display: inline-flex; align-items: center; justify-content: center; flex: none; } .hos-exc-avatar--empty { color: var(--muted); background: var(--surface-alt); } .hos-exc-arow + .hos-exc-arow { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--hairline-2); } .hos-exc-arow__head { display: flex; align-items: center; gap: 13px; min-width: 0; } .hos-exc-arow__id { flex: 1; min-width: 0; } .hos-exc-arow__name { font-size: var(--text-base); font-weight: 600; color: var(--ink); } .hos-exc-arow__name--muted { color: var(--muted); font-weight: 500; } .hos-exc-arow__trig { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 600; color: var(--accent); padding: 4px 6px; border-radius: var(--radius-sm); background: none; border: 0; cursor: pointer; } .hos-exc-arow__trig:hover { background: var(--surface-alt); color: var(--accent-strong); } /* Edit swap: icon stays fixed, the form fills the name area in place. */ /* .hos-exc-arow__head sets display:flex, which (as an author rule) beats the UA [hidden]{display:none}. Re-assert hidden here so BOTH the view (hidden while editing) and the edit panel (hidden until inline-edit#open) actually collapse — the controller toggles the [hidden] attr on each. */ .hos-exc-arow__head[hidden] { display: none; } .hos-exc-arow__edit { align-items: flex-start; } .hos-exc-arow__form { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; margin: 0; } .hos-exc-arow__edit-main { display: flex; align-items: center; gap: 8px; } .hos-exc-arow__select { flex: 1; min-width: 0; } /* Inline-editor control row: the enhanced select / number input sit on the 46px field baseline (--control-h-field), so their inline Save/Cancel must match — the gem's --sm buttons floor at 32px and read as short next to a field. Pin every control in these rows to one height so they line up as a single group. */ .hos-exc-arow__edit-main .os-btn, .hos-exc-hcform .os-btn { min-height: var(--control-h-field); } /* ── Crew / captain entity chip (DS auto-height .os-chip--entity) ─────── */ .hos-exc-crewrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* One step larger than the gem default: default avatar + text-sm name, roomier pad. */ .hos-exc-chip { padding: 8px 12px; } .hos-exc-chip .os-chip__name { font-size: var(--text-sm); } /* ── Passenger row (os-profile-row) — one status, one primary, overflow ── */ .hos-exc-prow { display: flex; align-items: center; gap: 12px; padding: 12px 4px; min-width: 0; } .hos-exc-prow + .hos-exc-prow { border-top: 1px solid var(--hairline-2); } .hos-exc-prow__info { flex: 1 1 auto; min-width: 0; } .hos-exc-prow__name { font-size: var(--text-sm); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hos-exc-prow__meta { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; } .hos-exc-prow__end { flex: none; display: flex; align-items: center; gap: 8px; } /* compact waiver control — a small pill that reveals QR + copy in a popover (DiveOS booking-details pattern: no raw URL on the row). */ .hos-exc-wv { position: relative; } .hos-exc-wv[open] { z-index: 30; } .hos-exc-wv__toggle { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-sans, Inter, sans-serif); font-size: var(--text-xs); font-weight: 500; color: var(--accent); background: none; border: 0; padding: 2px 2px; cursor: pointer; list-style: none; } .hos-exc-wv__toggle::-webkit-details-marker { display: none; } .hos-exc-wv__toggle:hover { color: var(--accent-strong); } .hos-exc-wv__pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .hos-exc-wv__qr { line-height: 0; } .hos-exc-wv__copy { display: inline-flex; align-items: center; gap: 5px; width: 100%; justify-content: center; font-size: var(--text-xs); font-weight: 500; color: var(--ink); background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); padding: 5px 8px; cursor: pointer; } .hos-exc-wv__copy:hover { background: var(--surface-alt); } .hos-exc-wv__copy.copied { color: var(--confirmed); border-color: var(--confirmed-border); } /* tiny signed-waiver tick (no control needed once signed) */ .hos-exc-wvok { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--confirmed); } /* overflow menu for secondary passenger actions (native details popover) */ .hos-exc-menu { position: relative; } .hos-exc-menu[open] { z-index: 30; } .hos-exc-menu__list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 168px; padding: 4px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .hos-exc-menu__list .os-btn { justify-content: flex-start; width: 100%; } .hos-exc-inlineform { margin: 0; } .hos-exc-inlineform .os-btn { width: 100%; } /* empty / legacy */ .hos-exc-empty { padding: 20px 4px; text-align: center; } .hos-exc-empty__cta { margin-top: 12px; } .hos-exc-subsect { margin: 14px 0 6px; } .hos-exc-legacyrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; } .hos-exc-legacyrow + .hos-exc-legacyrow { border-top: 1px solid var(--hairline-2); } .hos-exc-legacyrow__count { color: var(--muted-2); font-weight: 400; } /* FIX 2 — booked-but-unplaced "ghost" rows read as pending, not placed. */ .hos-exc-ghostrow { opacity: 0.85; } .hos-exc-ghostrow .hos-exc-prow__name { color: var(--muted); } /* ── Assignment / inline form fields ──────────────────────────────────── */ .hos-exc-field { display: flex; flex-direction: column; gap: 4px; } .hos-exc-field .os-field-select { width: 100%; } .hos-exc-override { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--muted); } /* crew add — collapsed behind a trigger, revealed inline (native details) */ .hos-exc-addcrew-wrap { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline-2); } .hos-exc-addcrew-wrap__trig { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; list-style: none; font-size: var(--text-xs); font-weight: 600; color: var(--accent); } .hos-exc-addcrew-wrap__trig::-webkit-details-marker { display: none; } .hos-exc-addcrew-wrap__trig:hover { color: var(--accent-strong); } .hos-exc-addcrew { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .hos-exc-addcrew .hos-exc-field { flex: 1 1 160px; min-width: 0; } .hos-exc-addcrew__submit { flex: none; } .hos-exc-allset { font-size: var(--text-xs); color: var(--muted); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline-2); } /* ── Rail: dispatch headcount (flat rows, NO card-in-card) ────────────── */ .hos-exc-railhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .hos-exc-cardlabel { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; } .hos-exc-hcrow { padding: 10px 0; } .hos-exc-hcrow + .hos-exc-hcrow { border-top: 1px solid var(--hairline-2); } .hos-exc-hcrow__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .hos-exc-hcrow__by { margin-top: 2px; } .hos-exc-hcread { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; } .hos-exc-hcread__num { font-size: var(--text-md); font-weight: 600; } .hos-exc-hcread__unit { font-size: var(--text-xs); color: var(--muted); } .hos-exc-hcnone { font-size: var(--text-xs); color: var(--muted); margin-top: 4px; } .hos-exc-hcedit__trig { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; margin-top: 8px; font-size: var(--text-xs); font-weight: 600; color: var(--accent); background: none; border: 0; padding: 0; } .hos-exc-hcedit__trig:hover { color: var(--accent-strong); } .hos-exc-hcform { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .hos-exc-hcnum { width: 90px; } /* capacity + trip */ .hos-exc-caprow { display: flex; align-items: center; } .hos-exc-capmeta { margin-top: 10px; } /* Trip — the state pills read as a header, divided from the action block below so the lifecycle buttons sit on a grounded footer instead of floating in the card body. */ .hos-exc-triprow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 0; padding-bottom: 14px; border-bottom: 1px solid var(--hairline-2); } .hos-exc-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } /* Minor actions: a quiet grouped footer under the single primary. Each is a contained, centred half — a light hairline border gives them enough weight to read as a pair of buttons, not two ghost labels stranded at opposite edges of the card (the "floating" the primary divider alone didn't cure). Still visibly subordinate to the teal primary. The Cancel side is a button_to
while New booking is a bare ; that asymmetry made the anchor render short + narrow ("collapsed"). Collapse the form's box with display:contents so BOTH the