/* ============================================================
HotelOS DS — COMPONENTS layer (.hos-*)
------------------------------------------------------------
Layer 3 of 3 (base -> tokens -> components). Loads after os_ds
and the page sheets, so a page can lean on these.
THE RULE: a class belongs here ONLY if it encodes something
about RESORTS — room status, rosters, manifests, transport
runs, folios. Everything generic resolves from os-ds. If the
gem lacks a generic primitive, contribute it UP and delete the
local copy. A divergence from a .dv-* component is DRIFT until
someone can name why it should differ; the burden of proof is
on staying local, not on migrating.
Why this matters beyond tidiness: a local component reads
local tokens, so this layer breaking takes the component with
it. A gem component reads gem tokens and survives. That is not
hypothetical — a stray comment-close (star-slash) in tokens.css blanked 21 tokens on
2026-07-20 and every .ao-eyebrow lost its type, while .dv-*
elements on the same page rendered perfectly.
IN PROGRESS: this file is being drained. Retired so far:
.ao-tab -> .page-tab, .ao-eyebrow -> .os-eyebrow (396 sites).
Next: the card family, chip/tag/pill (settle as ONE component
before promoting), then the generic primitives upstream.
Remaining resort-domain classes get the .hos-* prefix at the
end. Plan + evidence: tasks/hotelos-ds-plan.md,
tasks/ao-star-audit.md.
============================================================ */
/* ─── Card ─────────────────────────────────────────────────────
DiveOS idiom: the --shadow-card 1px ring IS the border, so no
separate border declaration (avoids a doubled hairline). */
/* .os-card retired -> os-ds .os-card (1px border + overflow:hidden + radius).
Two arena-only modifiers survive as local hos- bridges (the gem card has no
equivalent), so the base adopts the gem with zero break at their callsites: */
.hos-card--pad { padding: 15px; } /* opt-in root padding (gem puts padding on __body) */
/* Attention ring (e.g. a delayed movement) — amber instead of hairline. */
.hos-card--warn { box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 0 0 1px var(--warning); }
/* ─── RETIRED: .hos-chipin (Type chip) → os-ds `.status-pill` ───────────────────
.hos-chipin / --sm / --transfer / --excursion / --dive / --private / --input now
resolve from the gem's .status-pill (mapping in the note at the retired
.ao-tag below). Only the chip-INPUT widget scaffolding survives here — it is
layout plumbing (a flex box + a remove button), not a pill. */
/* Multi-item list input (dietary/allergies) — JS enhances a textarea into removable
chips (progressive enhancement; the textarea is the no-JS fallback). */
.hos-chipbox { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
padding: 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
background: var(--surface); }
.hos-chipbox:focus-within { border-color: var(--accent); }
.hos-chipbox input { flex: 1; min-width: 90px; border: 0; outline: 0; background: transparent;
padding: 4px 6px; font-size: var(--text-sm); color: var(--ink); }
/* The chips + remove control are now the gem's `.os-chip.os-chip--sm` + `.os-chip__x`
(v1.1.0); only the field wrapper `.hos-chipbox` remains local (no gem chip-input
container exists). Retired: .hos-chipin-x -> .os-chip__x. */
/* ─── Capacity bar ─────────────────────────────────────────── */
.hos-cap { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.hos-cap__track {
width: 64px;
height: 6px;
border-radius: 3px;
background: var(--slate-100);
overflow: hidden;
}
.hos-cap__fill { height: 100%; border-radius: 3px; background: var(--accent); }
.hos-cap__num {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--muted);
white-space: nowrap;
}
.hos-cap--warn .hos-cap__fill { background: var(--warning); }
.hos-cap--full .hos-cap__fill { background: var(--danger); }
.hos-cap--full .hos-cap__num { color: var(--danger); }
/* ─── Avatar retired onto the gem's .os-avatar (v1.1.0). ─────── */
/* ─── RETIRED: .ao-tag / .ao-pill / .hos-chipin → os-ds `.status-pill` ──────────
.ao-tag--alert -> .status-pill--cancelled .ao-tag--warn -> .status-pill--briefing
.ao-tag--accent -> .status-pill--accent .ao-tag--muted -> .status-pill--muted
.ao-pill--ok -> .status-pill--confirmed .ao-pill--pending -> .status-pill--pending
.ao-pill__dot -> .status-pill__dot
.hos-chipin--dive -> .status-pill--confirmed .hos-chipin--excursion -> .status-pill--briefing
.hos-chipin--transfer -> .status-pill--in_water .hos-chipin--private -> .status-pill--returning
.hos-chipin--input -> .status-pill--accent .hos-chipin--sm -> .status-pill--sm
Three local families that were one component under three names, now the gem's
.status-pill. NOTE one behavioural diff to watch: .ao-pill carried `flex: none`
and .status-pill does not — a pill in a tight flex row can now shrink; add
`flex: none` at the callsite if needed. The chip-input widget scaffolding
(.hos-chipbox / .hos-chipin-x) survives above; it is plumbing, not a pill. */
/* ─── Section divider line (period headers, group separators) ─ */
/* ─── Status dot (fleet ticker) ────────────────────────────── */
/* .ao-pill / --ok / --pending / __dot retired above onto the gem's .status-pill. */
/* ─── Square icon tile (booking-source mark, portal glyph) ───── */
.hos-icon-tile {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
flex: none;
}
/* ─── Inset panel (surface-inset rounded block) ──────────────── */
.hos-inset { background: var(--slate-50); border-radius: var(--radius-md); }
/* .ao-fineprint + .ao-fineprint--dim RETIRED 2026-07-20 -> os-ds .os-meta--mono.
Zero visual change, provable by resolving the tokens:
.ao-fineprint --text-xs + --text-muted -> var(--muted) -> slate-500
.os-meta--mono (gem) --text-xs + --muted -> slate-500
.ao-fineprint--dim --muted-2 -> slate-500
This theme deliberately collapses --muted and --muted-2 onto slate-500 (see
tokens.css), so --dim was a no-op in this product: it is dropped, not
translated into a gem modifier. */
/* ─── Form/card display heading (Display font, xl) ──────────────── */
.hos-form-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; }
/* ─── Pax mark (mono adults + children) ──────────────────────── */
.hos-pax {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: var(--text-xs);
}
/* ─── Task checklist (Tasks tab) ─────────────────────────────── */
.hos-fo-task {
display: flex;
align-items: center;
gap: 11px;
width: 100%;
text-align: left;
padding: 9px 2px;
border: none;
border-bottom: 1px solid var(--hairline);
background: none;
cursor: pointer;
font-family: var(--font-sans);
}
.hos-fo-task:hover .hos-fo-task__label { color: var(--ink); }
.hos-fo-task__box {
width: 18px;
height: 18px;
flex: none;
border-radius: var(--radius-pill);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--text-2xs);
border: 2px solid var(--hairline-strong);
color: var(--status-confirmed-fg);
}
.hos-fo-task__label { font-size: var(--text-sm); color: var(--slate-700); }
.hos-fo-task--done .hos-fo-task__box { background: var(--status-confirmed-bg); border: none; }
.hos-fo-task--done .hos-fo-task__label { color: var(--muted-2); text-decoration: line-through; }
.hos-fo-task-add {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 2px;
color: var(--muted-2);
font-size: var(--text-sm);
cursor: pointer;
}
.hos-fo-task-add:hover { color: var(--accent); }
/* ─── Journey timeline (Arrival / In-house / Departure) ──────── */
/* ─── Link-color reset guards ──────────────────────────────────
The arena_ds.css base reset `.hos-ds a { color: var(--accent) }`
has specificity (0,1,1) and outranks single-class component colours on
elements — turning primary-button labels accent-on-accent (invisible)
and tinting inactive sidebar links. Re-assert intended colours at higher
specificity for the link-based components. */
.hos-ds a.os-btn--primary,
.hos-ds a.os-btn--primary:hover { color: #fff; }
.hos-ds a.os-btn--secondary { color: var(--ink); }
.hos-ds a.os-btn--danger { color: var(--cancelled); }
.hos-ds a.os-btn--icon { color: var(--muted); }
.hos-ds a.os-fab { color: var(--on-accent); } /* the FAB is an ; beat .hos-ds a's accent link colour so the glyph is white on the teal fill (os-ds v1.23.0) */
.hos-ds a.os-sidebar__link { color: var(--ink); }
.hos-ds .os-sidebar__item--active a.os-sidebar__link { color: var(--accent); }
.hos-ds a.hos-sidebar__brand-link { color: inherit; }
/* tasks/071 — the crew Add-walk-on + rep departures-queue actions were local
button lookalikes needing their own link-colour override. They now carry
`.os-btn os-btn--primary|--secondary`, so the variant rules above (183–186)
colour them; the overrides that lived here are deleted, not translated. */
/* ── Folio money summary (tasks/011 PR-4; PR-8 reuses on the drawer footer).
Label/value rows for Total · Paid · Balance — money always .os-mono. ── */
.hos-panel-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: 1.2; }
.hos-money-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--text-sm); }
.hos-money-row__label { color: var(--text-muted); }
.hos-money-row--strong { font-weight: 700; }
.hos-money--due { color: var(--status-cancelled-fg); }
.hos-money--settled { color: var(--status-confirmed-fg); }
/* ── Card flight-status flag (Delayed / Cancelled) — tasks/011 PR-7 ── */
.hos-flight-flag { font-size: var(--text-2xs); font-weight: 700; }
.hos-flight-flag--delayed { color: var(--status-briefing-fg); }
.hos-flight-flag--cancelled { color: var(--status-cancelled-fg); }
/* ── tasks/155 — "Set the month" standing off-day picker (.hos-daypick + .hos-daylist).
HotelOS-domain, not a gem gap: os-ds documents .os-segmented as 2–4 MUTUALLY-EXCLUSIVE
options and explicitly says a 6+ set stops being readable, and .os-choicecard is the
icon+label tile for bigger sets. A 7-day MULTI-select on one compact track is neither, so
it lives here. Geometry deliberately matches the gem's .os-fitting-size-pill (38×28, 6px
radius, accent fill when on) so the two read as one family.
Markup is a REAL checkbox + label — no JS at all. The input is visually hidden but stays in
the tab order and focusable, so :checked drives the fill and :focus-visible drives the ring.
That is why there is no .is-on state class here: the DOM already holds the state. ── */
/* Page measure. Deliberately NOT `.hos-formpage`: that class is pinned to the gem's 640px FORM
measure and its own comment says it must not drift off 640 — so this page gets its own wrapper
rather than a modifier that would erode that rule.
Why 880 and not one of the two standard measures: the screen is a 27×7 roster TABLE wearing a
form's clothes. At the 640 form measure the pill track is cramped; at the 1280 view measure the
"this month" count strands itself a screen-width away from the pills and the eye has to travel
the whole row to connect name → days → count. 880 keeps all three in one glance. */
.hos-daylist-page { display: flex; flex-direction: column; gap: var(--space-5); max-width: 880px; margin-inline: auto; }
/* Pills share the track equally and grow into it — 7 equal columns rather than 7 natural-width
boxes, so the day headers above stay aligned to them at every width. */
.hos-daypick { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.hos-daypick__in { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hos-daypick__pill { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 28px; padding: 2px 8px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted-2); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 700; cursor: pointer; transition: background-color 100ms ease, color 100ms ease, border-color 100ms ease; }
.hos-daypick__pill--wk { background: var(--canvas); }
.hos-daypick__pill:hover { border-color: var(--accent); color: var(--accent); }
.hos-daypick__in:checked + .hos-daypick__pill { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.hos-daypick__in:focus-visible + .hos-daypick__pill { outline: 2px solid var(--accent); outline-offset: 2px; }
.hos-daylist { border-top: 1px solid var(--hairline-2); }
/* The name column is CAPPED, not 1fr. With 1fr the label absorbed every pixel of extra page
width (420px of an 880px row) while the pill track stayed at its natural 290 — pushing name and
days apart, which is the exact eye-travel the 880 measure was chosen to avoid. Cap the label and
let the pills take the slack: the extra width goes to the thing you actually aim at. */
.hos-daylist__head,
.hos-daylist__row { display: grid; grid-template-columns: minmax(140px, 240px) 1fr 96px; align-items: center; gap: 16px; padding: 8px 4px; border-bottom: 1px solid var(--hairline-2); }
.hos-daylist__head { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); }
.hos-daylist__row:hover { background: var(--surface-alt); }
/* Same 7-column grid as .hos-daypick so each header sits exactly over its pill. */
.hos-daylist__dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.hos-daylist__hd { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); }
.hos-daylist__hd--wk { color: var(--muted-2); }
.hos-daylist__group { padding: 7px 4px; background: var(--canvas); font-size: var(--text-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); border-bottom: 1px solid var(--hairline-2); }
.hos-daylist__who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hos-daylist__names { display: flex; flex-direction: column; min-width: 0; }
.hos-daylist__name { font-size: var(--text-sm); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Already off for a real reason. Apply SKIPS these dates, so without this line a weekday you
ticked would appear to have been ignored. */
.hos-daylist__leave { font-size: var(--text-2xs); color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hos-daylist__av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: var(--text-2xs); font-weight: 700; }
.hos-daylist__av--skip { background: var(--accent-soft); color: var(--accent); }
.hos-daylist__av--crew { background: var(--surface-alt); color: var(--muted-2); }
.hos-daylist__ch { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; text-align: right; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); }
.hos-daylist__ch > span { display: inline-flex; align-items: baseline; gap: 4px; }
.hos-daylist__n { font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
/* The unit is what stops a bare "4" from being a riddle. Muted + small so the NUMBER still reads
first when you scan the column. */
.hos-daylist__unit { font-size: var(--text-2xs); color: var(--muted-2); }
/* Unsaved work in this row, spelled out as before → after rather than one ambiguous number.
`was` stays muted (it is history), `will` takes the accent (it is what Apply commits). */
.hos-daylist__was { font-size: var(--text-xs); color: var(--muted-2); }
.hos-daylist__arrow { font-size: var(--text-2xs); color: var(--muted-2); }
.hos-daylist__will { font-size: var(--text-sm); font-weight: 700; color: var(--accent); }
.hos-daylist__none { font-size: var(--text-2xs); color: var(--muted-2); }
.hos-daylist__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 0 0; margin-top: 14px; border-top: 1px solid var(--hairline); }
.hos-daylist__note { margin: 0; font-size: var(--text-xs); color: var(--muted-2); }
.hos-daylist__actions { display: flex; align-items: center; gap: 8px; }
.hos-daylist__clear { margin: 0; }
/* "Start over" sits on the canvas BELOW the form card, not inside it — button_to renders its own