/* ============================================================ booking-v2.css — redesigned New Booking flow (Dives + Payment). Modern, instrument-grade chrome on the bound DiveOS tokens. Prefix: bk2-. Reuses wizard.css line-item widgets (.hos-wz-li / .hos-wz-sel / .hos-wz-qty / .hos-wz-price) inside new card/section/rail containers, plus three new primitives shared across both directions: · date-badge tile (.hos-bk2-dbadge) · KPI summary tiles (.hos-bk2-tiles / .hos-bk2-tile) · balance meter (.hos-bk2-meter) Two directions, toggled by the `direction` Tweak on : · .hos-bk2-console — dense control panel (tiles rail, split payment) · .hos-bk2-itin — roomier itinerary (day tickets, balance hero) No gradients, no glow; sky-50 used sparingly as the one tinted zone. ============================================================ */ /* ── Stage head with a count line ─────────────────────────── */ /* The redesigned flow drops per-step titles/descriptions — the breadcrumb header + wizard stepper already name the step. Hide reused steps' stage headers too (this stylesheet only loads on the v2 flow). */ .hos-wz-stage-head { display: none !important; } /* ── Review ledger (reused step) — calmer, non-interactive hierarchy ── The diver name anchors each group (body ink, sentence case — not an accent "link"); shared fees use the same neutral band, not amber; the orphaned "Order" label is removed in the markup. */ .hos-wz-ledger .hos-wz-grouphead { background: var(--accent-softer); } .hos-wz-ledger .hos-wz-grouphead .nm { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: var(--text-sm); font-weight: 600; } .hos-wz-ledger .hos-wz-grouphead.warm { background: var(--accent-softer); } .hos-wz-ledger .hos-wz-grouphead.warm .nm { color: var(--ink); } .hos-bk2-stage { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; } .hos-bk2-stage h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.02em; color: var(--ink); } .hos-bk2-stage p { margin: 7px 0 0; font-size: var(--text-sm); color: var(--muted); line-height: 1.5; max-width: 60ch; } .hos-bk2-stage .meta { display: flex; align-items: center; gap: 18px; flex-shrink: 0; } .hos-bk2-stage .meta .m { text-align: right; } .hos-bk2-stage .meta .m .k { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .hos-bk2-stage .meta .m .v { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin-top: 3px; } /* ── Two-column shell (content + rail) ────────────────────── */ /* Cap + centre the two-column steps (the full-bleed wizard has no outer cap). Dives sits inside .hos-wz-inner (which already pads); Payment has no wrapper so it carries its own padding. Widths per design review. */ /* 800 caps the LEFT (diver-cards) column; the 348 order rail sits beside it. Grid content = 800 + 28 gap + 348 = 1176. (Dives is inside .hos-wz-inner, which provides the page padding, so no padding here.) */ .hos-bk2-2col { max-width: 1176px; margin-inline: auto; } /* #290 (grafted from arena-hq) — the Dives/items step wrapper must be wide enough for the 1176 grid to reach its designed size: 1256 = 1176 grid + the .hos-wz-inner 40px side padding (×2). Without it the left column starves and item names clip. */ .hos-wz-inner.hos-wz-inner--dives { max-width: 1256px; } /* Payment: 720 caps the COMPOSER (left) column; the summary rail stays beside it at 360. Grid content = 720 + 28 gap + 360 = 1108 (+ 80 side padding). */ .hos-bk2-pay-rail { max-width: 1188px; margin-inline: auto; padding: 30px 40px 40px; } .hos-bk2-2col { display: grid; grid-template-columns: minmax(0,1fr) 348px; gap: 28px; align-items: start; } @media (max-width: 1100px) { .hos-bk2-2col { grid-template-columns: 1fr; } .hos-bk2-rail { position: static !important; }} .hos-bk2-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* The JS renders all diver cards + the shared-fees card into this wrapper, so it needs the same column rhythm — otherwise the cards inside stack flush (the .hos-bk2-col gap only separates this wrapper from the add-diver button). */ [data-pos-dives-target="diverSections"] { display: flex; flex-direction: column; gap: 16px; } .hos-bk2-rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; } /* ════════════════════════════════════════════════════════════ DATE BADGE — the recurring instrument tile (sky-50) ════════════════════════════════════════════════════════════ */ .hos-bk2-dbadge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 54px; border-radius: var(--radius); background: var(--accent-softer); border: 1px solid var(--accent-border); color: var(--accent); line-height: 1; flex-shrink: 0; } .hos-bk2-dbadge .m { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .hos-bk2-dbadge .d { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.02em; margin-top: 2px; } .hos-bk2-dbadge .w { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; margin-top: 2px; } /* ════════════════════════════════════════════════════════════ DIVER CARD ════════════════════════════════════════════════════════════ */ .hos-bk2-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; } .hos-bk2-dhead { display: flex; align-items: center; gap: 13px; padding: 14px 18px; border-bottom: 1px solid var(--hairline); } .hos-bk2-dhead .who { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; } /* #289 (grafted from arena-hq) — the name column must be able to shrink so a long name truncates instead of running under the "Primary" badge (which is pinned via flex-shrink:0 below). */ .hos-bk2-dhead__ident { min-width: 0; flex: 1; } .hos-bk2-dhead .nm { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .hos-bk2-dhead .cert { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hos-bk2-dhead .tot { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; } .hos-bk2-dhead .tot.zero { color: var(--muted-2); } .hos-bk2-drm { 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; flex-shrink: 0; opacity: 0.6; transition: opacity .12s, background .12s, color .12s; } .hos-bk2-dcard:hover .hos-bk2-drm { opacity: 1; } .hos-bk2-drm:hover { background: var(--cancelled-bg); color: var(--cancelled); } .hos-bk2-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-bk2-dconfirm .q { font-size: var(--text-xs); font-weight: 500; color: var(--cancelled); white-space: nowrap; } .hos-bk2-dconfirm .yes { height: 26px; padding: 0 11px; 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-bk2-dconfirm .no { height: 26px; padding: 0 9px; font: inherit; font-size: var(--text-xs); font-weight: 500; color: var(--muted); background: transparent; border: 0; cursor: pointer; } /* ── Day section inside a diver card ──────────────────────── */ .hos-bk2-day { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 16px; padding: 16px 18px; border-top: 1px solid var(--hairline-2); } .hos-bk2-day:first-child { border-top: 0; } .hos-bk2-day-spine { display: flex; flex-direction: column; align-items: center; gap: 8px; } .hos-bk2-day-spine .line { flex: 1; width: 1px; background: var(--hairline); min-height: 8px; } .hos-bk2-day-main { min-width: 0; } .hos-bk2-day-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .hos-bk2-day-top .dl { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); letter-spacing: -0.01em; color: var(--ink); } .hos-bk2-day-top .dl .full { color: var(--muted); font-weight: 400; font-family: var(--font-sans); font-size: var(--text-xs); margin-left: 7px; } .hos-bk2-day-x { width: 24px; height: 24px; 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.5; transition: opacity .12s, color .12s, background .12s; } .hos-bk2-day:hover .hos-bk2-day-x { opacity: 1; } .hos-bk2-day-x:hover { background: var(--slate-100); color: var(--ink); } /* line items — reuse .hos-wz-li grid but lighter padding here */ .hos-bk2-items .hos-wz-li { padding-left: 0; padding-right: 0; } .hos-bk2-items .hos-wz-li-head { padding-left: 0; padding-right: 0; } /* add chips under a day */ .hos-bk2-addrow { display: flex; gap: 8px; margin-top: 8px; } .hos-bk2-addchip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 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-bk2-addchip:hover { background: var(--accent-softer); } .hos-bk2-addchip.add { color: var(--confirmed); border-color: var(--confirmed-border); } .hos-bk2-addchip.add:hover { background: var(--confirmed-bg); } /* add-date footer — opens the in-app calendar popover. The TRIGGER is `.hos-exc-add` (see below), not a second dashed button of its own: this and "Add an excursion to this day" are the same affordance at two levels, and they had drifted into two different controls — 44 vs 41px tall, 14 vs 12px label, 8 vs 11px radius, and this one still carrying the UA button's `appearance:auto` and `padding:1px 6px` because it never reset them. One class now, so they cannot diverge again. */ .hos-bk2-adddate { padding: 12px 18px; border-top: 1px solid var(--hairline-2); } .hos-bk2-adddate-wrap { position: relative; } .hos-bk2-date-native { position: absolute; left: 16px; bottom: 4px; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; margin: 0; pointer-events: none; } /* shared fees + add-diver */ .hos-bk2-fees-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--hairline); } .hos-bk2-fees-head .t { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); } .hos-bk2-fees-head .c { font-size: var(--text-xs); color: var(--muted); } .hos-bk2-fees-head .a { font-size: var(--text-sm); font-weight: 500; color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; font-family: inherit; padding: 0; } .hos-bk2-fees-head .a:hover { color: var(--accent-strong); } .hos-bk2-fee { display: grid; grid-template-columns: 22px minmax(0,1fr) 104px 92px 88px 36px; align-items: center; gap: 12px; padding: 9px 18px; border-top: 1px solid var(--hairline-2); } .hos-bk2-fee:first-of-type { border-top: 0; } .hos-bk2-fee .kind { display: inline-flex; justify-content: center; color: var(--muted); } .hos-bk2-fee .amt { text-align: right; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); } .hos-bk2-fee-empty { padding: 14px 18px; font-size: var(--text-sm); color: var(--muted-2); font-style: italic; } .hos-bk2-adddiver { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; 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-bk2-adddiver:hover { background: var(--accent-softer); } /* ════════════════════════════════════════════════════════════ ITINERARY direction — day ticket band per date ════════════════════════════════════════════════════════════ */ .hos-bk2-itin .hos-bk2-day { display: block; padding: 0; } .hos-bk2-itin .hos-bk2-day-spine { display: none; } .hos-bk2-itin .hos-bk2-ticketband { display: flex; align-items: center; gap: 11px; padding: 13px 18px; background: var(--bk2-band, var(--accent-softer)); border-top: 1px solid var(--bk2-band-bd, var(--accent-border)); border-bottom: 1px solid var(--bk2-band-bd, var(--accent-border)); } .hos-bk2-itin .hos-bk2-day:first-child .hos-bk2-ticketband { border-top: 0; } .hos-bk2-itin .hos-bk2-ticketband .cal { display: inline-flex; color: var(--accent); flex-shrink: 0; } .hos-bk2-itin .hos-bk2-ticketband .dtxt { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); letter-spacing: -0.005em; color: var(--ink); white-space: nowrap; } .hos-bk2-itin .hos-bk2-ticketband .dow { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; } .hos-bk2-itin .hos-bk2-ticketband .dow::before { content: '·'; margin-right: 7px; color: var(--muted-2); } .hos-bk2-itin .hos-bk2-ticketband .cnt { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); white-space: nowrap; background: var(--surface); border: 1px solid var(--accent-border); border-radius: var(--radius-pill); padding: 3px 10px; } .hos-bk2-itin .hos-bk2-ticketband .hos-wz-li-acts { display: inline-flex; align-items: center; gap: 2px; } .hos-bk2-itin .hos-bk2-ticket-body { padding: 8px 18px 14px; } /* ════════════════════════════════════════════════════════════ RAIL · KPI summary tiles (console direction) ════════════════════════════════════════════════════════════ */ .hos-bk2-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-bk2-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--hairline); } .hos-bk2-card-head .t { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .hos-bk2-card-head .ico { color: var(--muted-2); display: inline-flex; } .hos-bk2-tiles { display: grid; grid-template-columns: 1fr 1fr; } .hos-bk2-tile { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-top: 1px solid var(--hairline-2); border-left: 1px solid var(--hairline-2); } .hos-bk2-tile:nth-child(-n+2) { border-top: 0; } .hos-bk2-tile:nth-child(odd) { border-left: 0; } .hos-bk2-tile .ico { width: 38px; height: 38px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; } .hos-bk2-tile .k { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .hos-bk2-tile .v { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.01em; color: var(--ink); margin-top: 2px; line-height: 1; } .hos-bk2-tile .v.sm { font-size: var(--text-sm); } /* An icon may lead the card eyebrow (Done's SALE RECORD / SCHEDULING heads). Spaced inline so the existing text-only `.t` callsites keep their layout. */ .hos-bk2-card-head .t .ico { margin-right: 7px; vertical-align: -2px; } .hos-bk2-card-head .aside { font-size: var(--text-xs); color: var(--muted-2); } /* ── Record strip (tasks/075) ────────────────────────────────────────────── The Done step's 4-across key/value strip, ported from DiveOS `.dn-rec` (measured live: 4 equal columns, 14/20 padding, hairline column rules, a 10px uppercase key over a 14px value). Distinct from `.hos-bk2-tiles`, which is the 2×2 icon-led KPI grid used in the rails — this one is a flat record header with no icons. */ .hos-bk2-rec { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hairline); } .hos-bk2-rec .cell { padding: 14px 18px; min-width: 0; border-left: 1px solid var(--hairline-2); } .hos-bk2-rec .cell:first-child { border-left: 0; } .hos-bk2-rec .k { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .hos-bk2-rec .v { font-size: var(--text-sm); font-weight: 500; color: var(--ink); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hos-bk2-rec .v.mono { font-family: var(--font-mono); } /* Four 165px columns need ~660px. Below that the values ellipsis to a single letter ("J…", "$4…"), so fold to 2×2 and restore the row rule. */ @media (max-width: 720px) { .hos-bk2-rec { grid-template-columns: repeat(2, 1fr); } .hos-bk2-rec .cell:nth-child(odd) { border-left: 0; } .hos-bk2-rec .cell:nth-child(n+3) { border-top: 1px solid var(--hairline-2); } } /* Tinted settlement/status row beneath the strip. */ /* `--surface-alt`, not the near-white `--wz-tint` used by the rail totals: the row has to READ as a tinted band the way DiveOS's does. */ .hos-bk2-rec-status { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--hairline-2); background: var(--surface-alt); } .hos-bk2-rec-status .spacer { flex: 1; } .hos-bk2-rec-status .aside { font-size: var(--text-xs); color: var(--muted); } /* Reference row — DiveOS's INVOICE bar. Arena has no invoice record, so the row points at the sale itself (chevron-right = navigates, not an expander). */ .hos-bk2-refbar { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-top: 1px solid var(--hairline); text-decoration: none; } .hos-bk2-refbar:hover { background: var(--surface-alt); } .hos-bk2-refbar .k { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .hos-bk2-refbar .id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); } .hos-bk2-refbar .grow { flex: 1; } .hos-bk2-refbar .tot { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--ink); } .hos-bk2-refbar .chev { display: inline-flex; color: var(--muted-2); } /* Prose body for a card that carries a sentence rather than a table. */ .hos-bk2-rec-note { padding: 14px 18px; font-size: var(--text-sm); color: var(--muted); } /* rail itemized breakdown */ .hos-bk2-break { max-height: 38vh; overflow-y: auto; padding: 4px 16px; } .hos-bk2-break-grp { padding: 11px 0; border-top: 1px solid var(--hairline-2); } .hos-bk2-break-grp:first-child { border-top: 0; } .hos-bk2-break-grp .gh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; } .hos-bk2-break-grp .gh .nm { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); } .hos-bk2-break-grp .gh .nm.unset { color: var(--muted-2); } .hos-bk2-break-grp .gh .nm.warm { color: var(--slate-700); } .hos-bk2-break-grp .gh .tt { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); } .hos-bk2-break-li { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-xs); padding: 2px 0; } .hos-bk2-break-li .nm { color: var(--slate-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hos-bk2-break-li .dt { color: var(--muted-2); font-family: var(--font-mono); } .hos-bk2-break-li .amt { font-family: var(--font-mono); color: var(--muted); flex-shrink: 0; } .hos-bk2-break-li.empty { font-style: italic; color: var(--muted-2); } .hos-bk2-total { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 18px; border-top: 1px solid var(--hairline); background: var(--wz-tint); } .hos-bk2-total .k { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .hos-bk2-total .v { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 500; letter-spacing: -0.02em; color: var(--accent); } /* roll-up (itinerary rail) */ .hos-bk2-roll { padding: 4px 16px; } .hos-bk2-rollrow { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--hairline-2); } .hos-bk2-rollrow:first-child { border-top: 0; } .hos-bk2-rollrow .who { flex: 1; min-width: 0; } .hos-bk2-rollrow .who .nm { font-size: var(--text-sm); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hos-bk2-rollrow .who .sub { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; } .hos-bk2-rollrow .amt { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; color: var(--ink); } /* special requests */ .hos-bk2-notes { padding: 16px 18px; } .hos-bk2-notes label { display: block; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .hos-bk2-notes textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; resize: vertical; font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.5; color: var(--ink); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); outline: none; } .hos-bk2-notes textarea:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* ════════════════════════════════════════════════════════════ BALANCE METER — shared payment primitive ════════════════════════════════════════════════════════════ */ .hos-bk2-meter { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(17,24,39,.04); padding: 20px 22px; } .hos-bk2-meter .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-bk2-meter .amt { font-family: var(--font-display); font-weight: 600; font-size: 44px; letter-spacing: -0.03em; color: var(--ink); margin: 12px 0 2px; line-height: 1; } .hos-bk2-meter .amt .cents { color: var(--muted-2); font-size: var(--text-3xl); } .hos-bk2-meter .amt.ok { color: var(--confirmed); } .hos-bk2-meter .sub { font-size: var(--text-xs); color: var(--muted); } .hos-bk2-meter .bar { height: 8px; border-radius: 99px; background: var(--slate-200); overflow: hidden; margin: 18px 0 11px; } .hos-bk2-meter .bar > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .25s cubic-bezier(0.32,0.72,0,1); } .hos-bk2-meter .bar.full > span { background: var(--confirmed); } .hos-bk2-meter .foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: var(--text-sm); } .hos-bk2-meter .foot .paid { font-family: var(--font-mono); font-weight: 600; color: var(--accent); } .hos-bk2-meter .foot .paid.ok { color: var(--confirmed); } .hos-bk2-meter .foot .total { color: var(--muted); } .hos-bk2-meter .foot .total .mono { font-family: var(--font-mono); } .hos-bk2-meter .state { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--hairline-2); font-size: var(--text-sm); color: var(--slate-700); } .hos-bk2-meter .state .tick { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; } .hos-bk2-meter .state.ok .tick { background: var(--confirmed-bg); color: var(--confirmed); } .hos-bk2-meter .state.no .tick { background: var(--briefing-bg); color: var(--briefing); } .hos-bk2-meter .defer { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; font-size: var(--text-xs); color: var(--muted); } .hos-bk2-meter .defer .mono { font-family: var(--font-mono); } /* ════════════════════════════════════════════════════════════ PAYMENT layouts ════════════════════════════════════════════════════════════ */ .hos-bk2-pay-split { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 26px; align-items: start; } @media (max-width: 1040px) { .hos-bk2-pay-split { grid-template-columns: 1fr; }} .hos-bk2-pay-split .hos-bk2-meter { position: sticky; top: 24px; } /* itinerary payment — full-width meter hero on a tinted band */ .hos-bk2-pay-hero { background: var(--accent-softer); border: 1px solid var(--accent-border); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 20px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 28px; align-items: center; } @media (max-width: 760px) { .hos-bk2-pay-hero { grid-template-columns: 1fr; }} .hos-bk2-pay-hero .lead .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(--accent-strong); } .hos-bk2-pay-hero .lead .amt { font-family: var(--font-display); font-weight: 600; font-size: 50px; letter-spacing: -0.03em; color: var(--ink); margin: 10px 0 4px; line-height: 1; } .hos-bk2-pay-hero .lead .amt .cents { color: var(--accent); opacity: 0.6; font-size: var(--text-3xl); } .hos-bk2-pay-hero .lead .amt.ok { color: var(--confirmed); } .hos-bk2-pay-hero .lead .sub { font-size: var(--text-sm); color: var(--accent-strong); } .hos-bk2-pay-hero .gauge { width: 232px; } .hos-bk2-pay-hero .gauge .bar { height: 8px; border-radius: 99px; background: rgba(var(--accent-rgb),0.14); overflow: hidden; } .hos-bk2-pay-hero .gauge .bar > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .25s cubic-bezier(0.32,0.72,0,1); } .hos-bk2-pay-hero .gauge .bar.full > span { background: var(--confirmed); } .hos-bk2-pay-hero .gauge .row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: var(--text-xs); } .hos-bk2-pay-hero .gauge .row .paid { font-family: var(--font-mono); font-weight: 600; color: var(--accent); } .hos-bk2-pay-hero .gauge .row .paid.ok { color: var(--confirmed); } .hos-bk2-pay-hero .gauge .row .total { color: var(--accent-strong); } .hos-bk2-pay-hero .gauge .state { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: var(--text-xs); font-weight: 500; } .hos-bk2-pay-hero .gauge .state.ok { color: var(--confirmed); } .hos-bk2-pay-hero .gauge .state.no { color: var(--briefing); } /* method chips */ .hos-bk2-methods { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .hos-bk2-pm { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--slate-700); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-pill); cursor: pointer; transition: all .12s ease; } .hos-bk2-pm:hover { border-color: var(--accent-border); color: var(--accent); background: var(--accent-softer); } .hos-bk2-pm .ico { color: var(--muted-2); display: inline-flex; } .hos-bk2-pm:hover .ico { color: var(--accent); } /* payment rows ledger */ .hos-bk2-prows { 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; container-type: inline-size; } /* tasks/075 — HotelOS differs from DiveOS here: the app shell's 300px nav rail leaves the composer ~394px, where DiveOS's fixed 168px method column starved the amount/reference fields to 55px. The method label is short, so it sizes to content and the two inputs get real minimums; below 520px the row stacks. */ .hos-bk2-prow { display: grid; grid-template-columns: minmax(0,auto) minmax(96px,1fr) minmax(112px,1.5fr) 32px; gap: 16px; align-items: start; padding: 16px 18px; border-top: 1px solid var(--hairline-2); } @container (max-width: 520px) { .hos-bk2-prow { grid-template-columns: minmax(0,1fr) 32px; gap: 12px 16px; } .hos-bk2-prow > :nth-child(1) { grid-area: 1 / 1; } .hos-bk2-prow > :nth-child(2) { grid-area: 2 / 1; } .hos-bk2-prow > :nth-child(3) { grid-area: 3 / 1; } .hos-bk2-prow > .rm { grid-area: 1 / 2; margin-top: 0; } } .hos-bk2-prow:first-child { border-top: 0; } .hos-bk2-prow > div { min-width: 0; } .hos-bk2-prow .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-bk2-prow .fl .req { color: var(--error); margin-left: 3px; } .hos-bk2-prow .rm { align-self: start; margin-top: 19px; 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-bk2-prow .rm:hover { background: var(--cancelled-bg); color: var(--cancelled); } .hos-bk2-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-bk2-mi.mono { font-family: var(--font-mono); } .hos-bk2-mi:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .hos-bk2-psub { font-size: var(--text-xs); color: var(--muted); margin-top: 6px; } .hos-bk2-psub.ok { color: var(--confirmed); } .hos-bk2-pro { height: 36px; display: flex; align-items: center; font-size: var(--text-sm); color: var(--muted-2); } .hos-bk2-pcheck { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: var(--text-xs); color: var(--muted); margin-top: 6px; } .hos-bk2-pcheck input { width: 14px; height: 14px; accent-color: var(--accent); } .hos-bk2-pempty { padding: 22px 18px; text-align: center; font-size: var(--text-sm); color: var(--muted-2); } /* attribution */ .hos-bk2-attr { 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-top: 16px; } .hos-bk2-attr-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; } /* DiveOS painted checkbox (.os-field-check) is centred to the single-line label here. */ .hos-bk2-attr-top.os-field-check { align-items: center; } .hos-bk2-attr-top .os-field-check__box { margin-top: 0; } .hos-bk2-attr-top .t { font-size: var(--text-sm); font-weight: 500; color: var(--ink); } .hos-bk2-attr-body { padding: 4px 18px 18px; border-top: 1px solid var(--hairline-2); display: flex; flex-direction: column; gap: 14px; } .hos-bk2-attr-fl { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin: 12px 0 8px; } /* tasks/075 — when the card head already draws the divider, the body must not double it; the referrer picker stays a compact field, not a full-bleed one. */ .hos-bk2-card-head + .hos-bk2-attr-body { border-top: 0; } .hos-bk2-attr-body label { display: block; } .hos-bk2-attr-sel { max-width: 280px; } .hos-bk2-chips { display: flex; flex-wrap: wrap; gap: 8px; } .hos-bk2-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-bk2-chip:hover { border-color: var(--accent-border); background: var(--accent-softer); } .hos-bk2-chip.on { border-color: var(--accent); background: var(--accent-softer); } .hos-bk2-chip .who { display: flex; flex-direction: column; line-height: 1.25; text-align: left; } .hos-bk2-chip .who .nm { font-size: var(--text-sm); font-weight: 500; color: var(--ink); } .hos-bk2-chip .who .role { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); } .hos-bk2-chip.on .who .role { color: var(--accent); } .hos-bk2-chip .tick { display: inline-flex; color: var(--accent); } .hos-bk2-commrow { display: flex; align-items: center; gap: 12px; } .hos-bk2-commrow .hos-wz-price { height: 36px; } .hos-bk2-commrow .note { font-size: var(--text-xs); color: var(--muted); } .hos-bk2-commrow .note button { background: none; border: 0; color: var(--accent); font: inherit; font-size: var(--text-xs); cursor: pointer; padding: 0; margin-left: 6px; } /* ════════════════════════════════════════════════════════════ SUMMARY CARD — package-builder style (header band · icon rows · tinted total footer). Reused as the Payment right rail. ════════════════════════════════════════════════════════════ */ .hos-bk2-pay-rail { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 28px; align-items: start; } @media (max-width: 1080px) { .hos-bk2-pay-rail { grid-template-columns: 1fr; } .hos-bk2-pay-rail .ds-sum { position: static !important; }} .hos-bk2-pay-rail .ds-sum { position: sticky; top: 24px; } .hos-bk2-sumcard { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-xl); box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; } .hos-bk2-sumcard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; background: var(--surface-alt); border-bottom: 1px solid var(--hairline); } .hos-bk2-sumcard-head .t { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--slate-500); } .hos-bk2-sumcard-head .st { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); white-space: nowrap; } .hos-bk2-sumcard-head .st.ok { color: var(--confirmed); } .hos-bk2-sumrow { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--hairline-2); } .hos-bk2-sumrow:first-of-type { border-top: 0; } .hos-bk2-sumrow .ico { color: var(--muted-2); display: inline-flex; flex-shrink: 0; } .hos-bk2-sumrow .main { flex: 1; min-width: 0; } .hos-bk2-sumrow .main .nm { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); letter-spacing: -0.01em; color: var(--ink); line-height: 1.15; } .hos-bk2-sumrow .main .sub { font-size: var(--text-sm); color: var(--muted); margin-top: 2px; } .hos-bk2-sumrow .val { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; } /* progress strip above the footer */ .hos-bk2-sumprog { padding: 15px 22px; border-top: 1px solid var(--hairline-2); } .hos-bk2-sumprog .bar { height: 7px; border-radius: 99px; background: var(--slate-200); overflow: hidden; } .hos-bk2-sumprog .bar > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .25s cubic-bezier(0.32,0.72,0,1); } .hos-bk2-sumprog .bar.full > span { background: var(--confirmed); } .hos-bk2-sumprog .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 9px; font-size: var(--text-xs); } .hos-bk2-sumprog .row .paid { font-family: var(--font-mono); font-weight: 600; color: var(--accent); } .hos-bk2-sumprog .row .paid.ok { color: var(--confirmed); } .hos-bk2-sumprog .row .total { color: var(--muted); } .hos-bk2-sumprog .row .total .mono { font-family: var(--font-mono); } .hos-bk2-sumcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; background: var(--slate-100); border-top: 1px solid var(--hairline); } .hos-bk2-sumcard-foot .k { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate-500); } .hos-bk2-sumcard-foot .v { font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl); letter-spacing: -0.025em; color: var(--accent); line-height: 1; } .hos-bk2-sumcard-foot .v.ok { color: var(--confirmed); } .hos-bk2-sumcard-foot .v .cents { font-size: var(--text-lg); color: var(--muted-2); } .hos-bk2-sumcard-state { display: flex; align-items: center; gap: 8px; padding: 13px 22px; border-top: 1px solid var(--hairline-2); font-size: var(--text-xs); color: var(--slate-700); } .hos-bk2-sumcard-state.ok { color: var(--confirmed); } .hos-bk2-sumcard-state.no { color: var(--briefing); } .hos-bk2-sumcard-state .ico { display: inline-flex; } .hos-bk2-sumcard-defer { display: flex; align-items: baseline; justify-content: space-between; padding: 0 22px 14px; margin-top: -4px; font-size: var(--text-xs); color: var(--muted); } .hos-bk2-sumcard-defer .mono { font-family: var(--font-mono); } /* Stepper band — centered, narrower block (per direct edits) */ .hos-wz-bars-inner { max-width: 720px; } /* compact density trims */ .hos-wz-compact .hos-bk2-day { padding-top: 11px; padding-bottom: 11px; } .hos-wz-compact .hos-bk2-tile { padding-top: 11px; padding-bottom: 11px; } .hos-wz-compact .hos-bk2-prow { padding-top: 11px; padding-bottom: 11px; } /* tasks/067 S5 — the sale drawer, on the canonical .hos-odrawer + .os-side-panel chassis (parity with spa/watersports). The panel width + scroll come from the gem's `.hos-odrawer-panel`; these are the drawer-INTERNAL bits the gem lacks. */ .hos-exc-sale-panel { overflow: hidden; } /* Disclosure section — a
wearing the drawer's `.hos-secblock` / `.hos-sectitle` chrome (SEATS collapses, SCHEDULE opens by default). */ .hos-exc-disc { padding: 0; } .hos-exc-disc__sum { list-style: none; cursor: pointer; user-select: none; } .hos-exc-disc__sum::-webkit-details-marker { display: none; } .hos-exc-disc__chev { margin-left: auto; display: inline-flex; color: var(--muted); transition: transform var(--dur-fast, 120ms) var(--ease-standard); } .hos-exc-disc[open] .hos-exc-disc__chev { transform: rotate(180deg); } .hos-exc-disc__body { margin-top: var(--space-2); } /* A sold-seat / payment / fee line inside a section card. */ .hos-exc-line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; } .hos-exc-line + .hos-exc-line { border-top: 1px solid var(--hairline); } .hos-exc-line__id { min-width: 0; } .hos-exc-line__trail { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; } .hos-exc-line__amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); } .hos-exc-line__form { margin: 0; } /* Schedule-seats group: label + the trip , four loose pills, a naked checkbox under "WHO'S GOING" and text links. The ported .hos-wz-li / .hos-wz-li-head / .hos-bk2-ticketband / .hos-bk2-addchip vocabulary was already in the repo but had NO callsites (the same "CSS shipped, markup never ported" gap that hid the stepper-bars break). This wires it up and adds only the columns arena's own model needs. Domain difference, kept honest: DiveOS books dives per DIVER with QTY / UNIT / TOTAL money columns; arena books an excursion per DATE with a slot choice and a party checklist, priced per person. Same density, type scale and control treatment — different columns. */ /* ── B5 · Compact + party header (owner-selected variant, tasks/075) ─────── Shipped as B3 first; the owner reviewed it running and called back the DiveOS-style banded header, which is B5 (public/mockups/step2/b5-header.html — the mockups are kept for exactly this). B5 = B3's item rows verbatim, with the sticky day rail replaced by the stacked bands. See the .hos-exc-sheet block below for why the rail was the wrong instrument for this surface. The previous shape put every item of a day inside one card as a two-line row. It was right at two items and a scroll marathon at eight: each item held a five-option slot chooser and the whole party checklist open at all times, so the eighth item sat ~2000px below the first. B3 keeps that vocabulary exactly — same cards, same icon slots, same pax tiles — but an item SETTLES into one dense line once set and re-opens on click. A quarter of the height, none of the character lost. The collapsed line carries the icon of the chosen slot, so the icons pay for themselves twice: readable expanded, and readable collapsed. Four pieces of this vocabulary were generic enough to promote UP to the gem: .os-choicecard and .os-daterail in os-ds v1.8.0, .os-partyband and .os-databand in v1.9.0. The local stand-ins are gone; what remains here is only arena's own geometry around them, scoped so it cannot shadow the gem. (.os-daterail is no longer used on THIS surface — see below — but it stays the right component for a list that IS the page, which is why it was promoted rather than deleted.) */ /* B5 (tasks/075, 2026-07-27) — the itinerary is ONE sheet, not a stack of day cards beside a rail. `.os-partyband` heads it, `.os-databand` opens each day, and the item rows sit flat inside; both bands are gem components (os-ds v1.9.0), so what remains local is the sheet's own geometry. */ .hos-exc-sheet { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: var(--shadow-sm); /* Clips the bands' square corners to the sheet's radius — the reason no band needs a radius of its own, and why a first/last-child rule would be wrong here (the first child is the party band, the last is an add row). */ overflow: hidden; margin-bottom: 16px; } /* One excursion — a flat row that collapses to a single line. It carried card chrome (border, radius, shadow, margin) while it floated on the canvas beside the rail; inside the sheet that chrome would be a card within a card, so the row is now separated by a hairline alone. */ .hos-exc-row { border-bottom: 1px solid var(--hairline-2); } /* The add row closes every day, so the last ROW of a day is never the last child of the sheet — the divider is dropped where the next thing is a band instead, which is the boundary the band's own top hairline already draws. */ .hos-exc-row:has(+ .hos-exc-addrow) { border-bottom: 0; } .hos-exc-addrow { padding: 12px 20px; } .hos-exc-addrow + .os-databand { border-top: 1px solid var(--hairline); } .hos-exc-row__sum { appearance: none; font: inherit; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 20px; border: 0; border-radius: 0; background: none; text-align: left; color: var(--ink); -webkit-tap-highlight-color: transparent; transition: background var(--t-fast) var(--ease-standard); } .hos-exc-row__sum:hover { background: var(--surface-alt); } .hos-exc-row__sum:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .hos-exc-row.is-open .hos-exc-row__sum { background: var(--surface-alt); border-bottom: 1px solid var(--hairline); } .hos-exc-row__ico { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-softer); color: var(--accent-strong); display: inline-flex; align-items: center; justify-content: center; flex: none; } .hos-exc-row__t { font-size: var(--text-sm); font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The chosen slot, still readable while collapsed. */ .hos-exc-row__slot { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-alt); color: var(--muted); font-size: var(--text-2xs); font-weight: 500; } /* Who is going — overlapped, because the party IS the quantity. The stacked avatars drop the solid accent gradient for the soft fill: at four deep, four saturated discs read as one dark blob and out-shout the title they sit next to. Soft keeps the initials legible and the row calm. */ .hos-exc-row__av { display: inline-flex; flex: none; } .hos-exc-row__av .hos-wz-avatar { margin-left: -4px; background: var(--accent-soft); color: var(--accent-strong); box-shadow: 0 0 0 2px var(--surface); } .hos-exc-row__av .hos-wz-avatar:first-child { margin-left: 0; } .hos-exc-row__more { font-size: var(--text-2xs); color: var(--muted); margin-left: 6px; flex: none; } .hos-exc-row__v { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; font-weight: 500; flex: none; } .hos-exc-row__chev { display: inline-flex; color: var(--muted-2); flex: none; transition: transform var(--t-med) var(--ease-standard); } .hos-exc-row.is-open .hos-exc-row__chev { transform: rotate(180deg); } /* 20px, matching the bands above — inside one sheet every child has to share a left edge or the document reads as several. */ .hos-exc-row__body { padding: 6px 20px 20px; } /* The duplicate-seat warning belongs to the DAY, so it sits directly under the band rather than inside the first item, indented to the sheet's own edge. */ .hos-exc-dupe { display: flex; align-items: flex-start; gap: 8px; padding: 11px 20px; border-bottom: 1px solid var(--hairline-2); background: var(--status-pending-bg); color: var(--status-pending-fg); font-size: var(--text-sm); line-height: var(--leading-sm); } .hos-exc-dupe svg { flex: none; margin-top: 2px; } .hos-exc-row__note { margin-top: 14px; } .hos-exc-row__note .hos-exc-seatsleft { margin: 0; } .hos-exc-row__foot { margin-top: 14px; } .hos-exc-row__rm { appearance: none; font: inherit; font-size: var(--text-xs); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 5px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted-2); } .hos-exc-row__rm:hover { background: var(--status-cancelled-bg); color: var(--status-cancelled-fg); } .hos-exc-row__rm:focus-visible { outline: none; box-shadow: var(--shadow-focus); } /* Section label inside an open row. */ .hos-exc-lab { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin: 18px 0 8px; } .hos-exc-lab:first-child { margin-top: 0; } /* `.os-choicecard--sm` and its reduced-motion handling both ship in the gem (os-ds v1.8.0) — the local copies that stood in while the component was unreleased are DELETED rather than left to shadow it. Only arena's own classes need the motion opt-out here. */ @media (prefers-reduced-motion: reduce) { .hos-exc-row__chev, .hos-exc-row__sum { transition: none; } } /* Pax tile — the party checklist. Real checkboxes; the tile tints when checked (`:has` on the label, so the native control stays the source of truth). */ /* 190px for the same measured reason as the choice grid: at the mockup's 220px the 416px column fits ONE tile, so a four-person party became a four-high stack and undid the compaction. 190 fits two and still holds a long name. */ .hos-exc-paxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; } .hos-exc-pax { display: flex; align-items: center; gap: 11px; padding: 10px 12px; cursor: pointer; min-width: 0; border: 1.5px solid var(--hairline); border-radius: 12px; background: var(--surface); transition: border-color var(--t-fast) var(--ease-standard), background var(--t-fast) var(--ease-standard); } .hos-exc-pax:hover { border-color: var(--muted-2); } .hos-exc-pax:has(input:checked) { border-color: var(--accent); background: var(--accent-softer); } .hos-exc-pax:has(input:focus-visible) { box-shadow: var(--shadow-focus); } .hos-exc-pax__txt { display: flex; flex-direction: column; min-width: 0; } .hos-exc-pax__n { font-size: var(--text-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hos-exc-pax__m { font-size: var(--text-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hos-exc-pax__m:empty { display: none; } /* THE dashed add affordance — one control for "add a date" and "add an excursion to this day". It carries the full UA reset (`appearance`, `font`, `border`, `background`, `margin`): the add-date twin it replaced omitted it and rendered with the platform's own padding and metrics, which is why the two never matched. Height comes from the control contract rather than a literal, so it tracks whatever density scope it lands in — inside a
that is the 46px field rung, which is what its neighbours are. */ .hos-exc-add { /* Re-declared ON the component, not inherited: the two call-sites sit on opposite sides of the wizard's , so a scope-inherited height made the in-form one 46px and the outer one 36px — the same drift in a new costume. The gem's contract is that a component asking for a specific size asks on itself. */ --control-h: var(--control-h-field); --control-pad-x: var(--control-pad-x-field); --control-fs: var(--control-fs-field); appearance: none; font: inherit; margin: 0; cursor: pointer; width: 100%; min-height: var(--control-h); padding: 0 var(--control-pad-x); border: 1.5px dashed var(--accent-border); border-radius: var(--radius-xl); background: transparent; color: var(--accent); font-size: var(--control-fs); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } .hos-exc-add:hover { background: var(--accent-softer); border-color: var(--accent); } .hos-exc-add:focus-visible { outline: none; box-shadow: var(--shadow-focus); } /* Avatar sizes used by the collapsed stack and the pax tiles. 22px, not 20: arena initials are TWO characters, and at 20px with the stack's negative margin the trailing letter of each disc was clipped by the next one ("APMAJA"). 22px leaves enough of each disc visible past the -4px overlap. */ .hos-wz-avatar--xs { width: 22px; height: 22px; font-size: var(--text-2xs); } .hos-exc-pax .hos-wz-avatar--sm { width: 26px; height: 26px; font-size: var(--text-2xs); flex: none; } /* Narrow: the day band's weekday and its count pill cannot share the line with the date without one of them truncating, so the count wraps to its own row. SCOPED under the sheet, not bare: a bare `.os-databand__count` rule here would redefine a class the gem ships — the shadow shape the DS index gate exists to catch, and the one that let a full local `.status-pill*` copy silently override the gem's for four versions. Arena is changing the band's wrap behaviour inside ITS OWN container, not changing the component. */ @media (max-width: 820px) { .hos-exc-sheet .os-databand { flex-wrap: wrap; } .hos-exc-sheet .os-databand__count { margin-left: 0; order: 3; } .hos-exc-sheet .os-databand__x { order: 2; } } /* The gem's .os-choicegrid defaults to a wider minimum than arena's work column allows: the app shell spends ~300px on its nav rail, so the items column is 416px at 1280 and the 5 slots wrapped 4+1. 72px is the measured floor that keeps them on one row. Set through the gem's own override hook rather than redeclaring the grid. */ .hos-excwiz { --os-choicegrid-min: 72px; }