/* Watersports — activity-first board + booking drawer (tasks/068).
 *
 * The catalog is the entry point: the landing is a grid of activity cards, each
 * drilling into groups of booking rows (Needs you / Out now / Next up / Done).
 * The whole row opens a persistent #drawer turbo-frame (mirrors front_office).
 *
 * DS rule (064 §6): reuse the base os-ds / HotelOS / front-office components; do
 * NOT mint a parallel namespace for what already ships. So this sheet holds ONLY
 * (a) two small EXTENSIONS to existing families the base omits, and (b) the few
 * components with genuinely no base equivalent (the activity catalog card grid
 * and the activity-detail header). Everything else is base:
 *   KPI line ....... os-ds  .kpi-strip / __stat / __value / __label
 *   status chips ... fo-board .hos-chip + .hos-tone--* triad
 *   board rows ..... fo-board .hos-fo-rows / .hos-fo-row / .hos-fo-row__time/__t/__d/__name/__n
 *   sections ....... reservation_drawer .hos-secblock / .hos-sectitle / .hos-seccard
 *   drawer ......... reservation_drawer .fo-drawer / .fo-dhead / .fo-foot
 *   icon tiles ..... reservation_drawer .hos-itile (+ .hos-tile-44 sizing helper)
 *
 * Token-only. Neutrals = slate, accent = teal. Sky (`--status-in-water-*`) is
 * reserved for the INFERRED on-the-water state and nothing else.
 */

/* ── (a) extensions ──────────────────────────────────────────────────────
   The base `.hos-tone--*` triad ships ok/warn/crit/accent only; the board needs
   sky (inferred out-now) and slate (done/terminal). Same mechanism, two more
   keys — an extension of the family, not a lookalike. */
.hos-tone--water { --tone: var(--status-in-water-fg); --tone-bg: var(--status-in-water-bg); --tone-line: var(--status-in-water-border); }
.hos-tone--slate { --tone: var(--status-returning-fg); --tone-bg: var(--status-returning-bg); --tone-line: var(--status-returning-border); }

/* Time gutter for the out-now group — base ships `.hos-fo-row__t--warn`, not a sky
   variant. Same one-property override. */
.hos-fo-row__t--water { color: var(--status-in-water-fg); }

/* os-ds `.kpi-strip__value` is ink; the board tints two of the four numbers
   (inferred-on-water = sky, waiver attention = amber). One-property extensions. */
.kpi-strip__value--water { color: var(--status-in-water-fg); }

/* ── `.kpi-strip--flush` — a NAMED VARIANT of the gem's KPI strip ────────────
   The strip ships `border-top: 1px + padding-top: 16px`: it is designed to sit
   BELOW page content, with the rule separating it from what came before. On a
   board where the strip is the FIRST thing under the page-header band there is
   nothing above it to separate from, so the rule reads as a stray hairline
   hanging off the band.
   This is deliberately a MODIFIER, not a `.ws-kpi` descendant override — a
   local override of component chrome was tried here before and correctly
   reverted as a DS divergence. A variant says "this strip leads the page" and
   any surface with the same job can opt in by name.
   UPSTREAM: this belongs in os-ds as `.kpi-strip--flush`; it is the strip's
   second legitimate position, not an arena-ops quirk. */
:is(.kpi-strip, .os-kpi-strip).kpi-strip--flush { border-top: 0; padding-top: 0; }
.kpi-strip__value--warn { color: var(--warning); }
.kpi-strip__hint { font-weight: var(--fw-regular); color: var(--muted-2); }

/* The drawer overlays via the canonical `.hos-odrawer` chassis (scrim + panel +
   data-open) — see arena_ds.css / hotelos_ds. The board is plain full-width page
   content; no width reservation, no bespoke overlay. Panel width matches the
   front-office reservation drawer. The base panel is overflow:hidden; the
   watersports drawer content is a single scrolling column, so allow it to scroll. */
.ws-drawer-panel { overflow-y: auto; }

/* Board rows reuse `.hos-fo-row`, but its 6-column arrivals template is domain-
   specific; the watersports row is time · glyph · identity · chevron. Scoped
   column override on the base row (not a new row). */
.hos-fo-rows--ws { margin-top: 0; }
/* Row density. The base `.hos-fo-row` is the six-column arrivals row (padding
   `0 18px 0 22px`, height doing the vertical work); the watersports row is four
   columns of stacked text, so it declares its own box: 16px top/bottom as real
   padding rather than implied by min-height, and 20px inline so the stripe,
   the time and the chevron all stand off the card edge. min-height drops out of
   the way (auto) — the padding now owns the height, so a row that wraps its
   meta line grows instead of crushing. */
.hos-fo-row--ws {
  grid-template-columns: 56px 40px minmax(0, 1fr) 20px;
  gap: 14px;
  min-height: 0;
  padding: var(--space-4) var(--space-5);
}
/* The base `.hos-fo-row__stripe` is the flat, square, full-height List-view stripe.
   HotelOS's rail is the ROUNDED, top/bottom-inset one (cf. `.fo-card__spine`). */
.hos-fo-row--ws .hos-fo-row__stripe {
  top: 11px;
  bottom: 11px;
  width: 4px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
/* Status chip at ANNOTATION weight. `.hos-chip` is the package-builder filter
   chip (14px/500, 8px 13px padding) — beside a 14px/600 guest name it reads as
   a second title and the eye cannot tell which is the row's subject. Scoped to
   this row only; the shared component is untouched. */
.hos-fo-row--ws .hos-fo-row__n .hos-chip {
  padding: 1px var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .02em;
  line-height: 16px;
  color: var(--tone, var(--muted));
  background: var(--tone-bg, var(--surface-alt));
  border-color: var(--tone-line, transparent);
  cursor: inherit;
}
.hos-fo-row--ws .hos-fo-row__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--text-xs); color: var(--muted); margin-top: 3px; }
.hos-fo-row--ws .hos-fo-row__meta .sep { color: var(--hairline-strong); }
.hos-fo-row--ws .hos-fo-row__meta .amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hos-fo-row--ws .hos-fo-row__meta .crowd { display: inline-flex; align-items: center; gap: 3px; }

/* ── (b) activity catalog card — no base equivalent (glyph + price + day counts,
   links into the activity board). Distinct from `.fo-card` (an arrivals
   boarding card) and `.os-card` (the generic chassis it sits on). ── */
/* Three across, not four. At four the cards were 260px of mostly-empty box and
   the name had no room to breathe; at three each card earns its presence and
   the foot row (figures + state chips + chevron) fits on one line without
   wrapping. `minmax(0,1fr)` rather than auto-fill so the count is FIXED — the
   owner asked for three, and auto-fill would silently go back to four on a wide
   pane. --space-8 (32px) clears the LIVE DAY ribbon above it. */
.ws-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  /* 32px clear of the LIVE DAY ribbon. `.ws-page` is a flex column that already
     contributes its own --space-5 row gap between the ribbon and this section,
     so the margin supplies only the REMAINDER — written as the subtraction so
     the total stays 32px if the page rhythm token ever moves. */
  margin-top: calc(var(--space-8) - var(--space-5));
}
@media (max-width: 1100px) { .ws-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .ws-grid { grid-template-columns: minmax(0, 1fr); } }
.ws-acard { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); text-decoration: none; min-height: 148px; }
.ws-acard__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.ws-acard__flags { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.ws-flag { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface-alt); white-space: nowrap; }
.ws-acard__name { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--ink); line-height: 1.2; }
.ws-acard__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--muted); margin-top: 3px; }
/* State chips in the card foot — deliberately SMALLER than `.hos-chip`: they
   annotate the figures beside them, they do not compete with the activity name.
   `.hos-chip` is a row-level status chip and read as a second heading here. */
.ws-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: var(--space-2); padding: 1px var(--space-2); border-radius: var(--radius-pill); font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: .02em; white-space: nowrap; background: var(--surface-alt); color: var(--muted); }
.ws-tag--water { background: var(--status-in-water-bg); color: var(--status-in-water-fg); }
.ws-tag--warn { background: var(--status-briefing-bg); color: var(--status-briefing-fg); }
.ws-astats {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-3);
  margin-top: auto;
}
.ws-astats .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--ink); line-height: 1; }
.ws-astats .lbl { font-size: var(--text-xs); color: var(--muted); }
.ws-astats .sep { color: var(--hairline-strong); }
.ws-astats .go { margin-left: auto; color: var(--accent); display: inline-flex; }
.ws-astats--empty { color: var(--muted-2); font-size: var(--text-xs); }

/* ── (b) activity-detail header — no base equivalent. Breadcrumb ("All
   activities › <activity>") now lives in the .os-page-head band via the os-ds
   .os-breadcrumb variant (content_for :page_breadcrumb), not here. ── */

/* ── (b) drawer leaf rows — the editable instructor assignee and the numbered
   per-head waiver row have no base equivalent (front-office rows are read-only
   tap-rows). They sit inside base `.hos-seccard`s. ── */
/* The drawer body is the `.side-panel__body` (its own 20px top padding); the
   section stack reuses the front-office `.hos-journey` rhythm (26px between
   sections) but must not re-add the wrapper's own top padding on top of the
   panel body's — kill it so the first section sits at the panel's 20px inset. */
.ws-drawer-journey { padding-top: 0; }

.ws-lead { display: flex; align-items: center; gap: var(--space-3); }
/* No height here on purpose. os-ds v1.6.0 pinned `.os-field-select` to the same
   `--control-h` token `.os-btn` reads, and arena scopes that token to the 46px
   field rung on `form` — so the select and the Change/Assign beside it already
   agree. The old `height: 36px` was measured to be dead (min-height won). */
.ws-lead__body { flex: 1 1 auto; min-width: 0; }
.ws-lead__name { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink); }
.ws-lead__role { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted-2); }
.ws-lead__empty { font-size: var(--text-sm); color: var(--muted); }

.ws-part { display: flex; align-items: center; gap: var(--space-3); padding: 10px 0; border-top: 1px solid var(--hairline); }
.ws-part:first-child { border-top: 0; padding-top: 0; }
.ws-part__num { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--surface-alt); font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted); }
.ws-part__body { flex: 1 1 auto; min-width: 0; }
.ws-part__name { font-size: var(--text-sm); color: var(--ink); }
.ws-part__lvl { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted-2); }
.ws-part__ok { display: inline-flex; align-items: center; gap: 4px; color: var(--success); font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.ws-part__na { font-size: var(--text-xs); color: var(--muted-2); }

/* Drawer footer on the `.side-panel__action-bar` chassis — the money calc sits
   above a full-width action, so stack the bar for this surface. */
.ws-drawer-foot { flex-direction: column; align-items: stretch; gap: var(--space-3); }
.ws-drawer-foot .ws-calc { display: flex; align-items: baseline; gap: var(--space-2); }
.ws-drawer-foot .ws-calc .amt:last-child { margin-left: auto; }

/* money calc line. */
.ws-calc { font-size: var(--text-sm); color: var(--muted); }
.ws-calc .amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); color: var(--ink); }

/* Damage-fine control — a compact inline form inside the drawer's seccard. The
   amount + note fields flow on one row and wrap on a narrow drawer. */
.ws-fine { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); }
.ws-fine__field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 96px; }
.ws-fine__field--grow { flex: 1 1 160px; }
.ws-fine__submit { flex: 0 0 auto; }
.ws-fine__hint { margin: var(--space-2) 0 0; }
.ws-fine__current { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); }
.ws-fine__amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); color: var(--ink); font-size: var(--text-sm); }
.ws-fine__note { font-size: var(--text-xs); color: var(--muted); }

.ws-empty { padding: 28px; text-align: center; color: var(--muted-2); font-size: var(--text-sm); }

/* ── (b) COMMAND-CENTER day ribbon — the board hero. No base equivalent: a
   06→18 time axis with every booking plotted by scheduled_at, one lane per
   activity, a NOW marker, walk-up tallies and a legend. Light theme (surface +
   hairline), token-only. Node colour = board group (amber needs · sky out-now ·
   green next · slate done); sky is reserved for out-now. Tapping a node deep-
   links to that booking's drawer via the activity board's ?open=. ── */
.ws-rib {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-6) var(--space-6);
  --ws-lab: 148px;
}
.ws-rib__top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.ws-rib__eye { font-size: var(--text-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.ws-rib__live { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-secondary); }
.ws-rib__pip { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--status-in-water-fg); box-shadow: 0 0 0 3px var(--status-in-water-bg); }
.ws-rib__clock { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--ink); letter-spacing: .02em; }
.ws-rib__clock b { color: var(--accent); }

.ws-rib__scale { display: flex; align-items: center; margin-bottom: var(--space-2); }
.ws-rib__scale-sp { flex: 0 0 var(--ws-lab); width: var(--ws-lab); }
.ws-rib__marks { flex: 1 1 auto; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted); letter-spacing: .06em; }
.ws-rib__lanes { position: relative; }
.ws-rib__overlay { position: absolute; left: var(--ws-lab); right: 0; top: 0; bottom: 0; pointer-events: none; z-index: 1; }
.ws-rib__grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hairline); }
.ws-rib__now { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--accent); }
.ws-rib__lane { position: relative; display: flex; align-items: center; height: 32px; }
.ws-rib__lane + .ws-rib__lane { border-top: 1px solid var(--hairline-2); }
.ws-rib__lab { flex: 0 0 var(--ws-lab); width: var(--ws-lab); display: flex; align-items: center; gap: var(--space-2); padding-right: var(--space-3); min-width: 0; }
.ws-rib__lab .ic { flex: 0 0 15px; color: var(--muted); display: inline-flex; }
.ws-rib__lab .nm { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-rib__track { position: relative; flex: 1 1 auto; height: 32px; z-index: 2; }
.ws-rib__node { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 13px; height: 13px; border-radius: var(--radius-pill); border: 2px solid var(--surface); cursor: pointer; background: var(--status-returning-fg); box-shadow: 0 0 0 1px var(--hairline-strong); transition: transform 120ms ease; }
.ws-rib__node:hover, .ws-rib__node:focus-visible { transform: translate(-50%, -50%) scale(1.35); z-index: 3; outline: none; }
.ws-rib__node--need { background: var(--warning); box-shadow: 0 0 0 1px var(--status-briefing-border); }
.ws-rib__node--next { background: var(--success); box-shadow: 0 0 0 1px var(--status-confirmed-border); }
.ws-rib__node--done { background: var(--status-returning-fg); box-shadow: 0 0 0 1px var(--hairline-strong); }
.ws-rib__node--water { background: var(--status-in-water-fg); box-shadow: 0 0 0 2px var(--status-in-water-bg); }
.ws-rib__walk {  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--muted); background: var(--surface-alt); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 1px 5px; white-space: nowrap; }
/* Out-of-window + walk-up chips share one right-aligned cluster; neither has an
   honest position on the 06→18 axis, so they sit beside it rather than on it. */
.ws-rib__aside { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: var(--space-1); }
.ws-rib__off { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--muted); background: var(--surface-alt); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 1px 5px; white-space: nowrap; text-decoration: none; }
.ws-rib__off:hover, .ws-rib__off:focus-visible { color: var(--ink); border-color: var(--hairline-strong); }

.ws-rib__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--hairline); font-size: var(--text-2xs); color: var(--muted); letter-spacing: .02em; }
.ws-rib__legend .lg { display: inline-flex; align-items: center; gap: var(--space-2); }
.ws-rib__legend .sw { width: 9px; height: 9px; border-radius: var(--radius-pill); border: 1px solid var(--surface); box-shadow: 0 0 0 1px var(--hairline-strong); }
.ws-rib__legend .sw--need { background: var(--warning); }
.ws-rib__legend .sw--next { background: var(--success); }
.ws-rib__legend .sw--done { background: var(--status-returning-fg); }
.ws-rib__legend .sw--water { background: var(--status-in-water-fg); }
.ws-rib__legend .mono { font-family: var(--font-mono); }

@media (max-width: 720px) {
  .ws-rib { --ws-lab: 96px; padding: var(--space-4); }
}

/* ── Board page rhythm ────────────────────────────────────────────────────
   The command-center board is KPI strip → LIVE DAY ribbon → activity grid, one
   column with a single vertical rhythm. The catalog moved to its own surface
   (watersports#catalog); the board links to it from the strip. ── */
.ws-page { display: flex; flex-direction: column; gap: var(--space-5); }
.ws-grow { flex: 1 1 auto; min-width: 0; }


/* Quiet hand-off to the catalog, riding the right edge of the KPI strip row.
   `margin-left:auto` rather than a fifth stat: it is a LINK to another surface,
   not a figure about today, and giving it a stat's weight would have it
   competing with the headcount it sits beside. */
.ws-kpi-link {
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.ws-kpi-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Activity catalog page (watersports#catalog) ──────────────────────────
   Table + add-form, both gem components; only the identity cell (glyph beside
   the name) and the page rhythm are local. ── */
.ws-cat-page { display: flex; flex-direction: column; gap: var(--space-5); }
.ws-cat-name { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.ws-cat-name__text { display: flex; flex-direction: column; min-width: 0; }
/* A gate that is NOT set reads as plain prose, not as a pill: only the rule
   that constrains the counter earns a pill, so the eye finds the exceptions by
   shape alone and does not have to read every row. */
.ws-cat-plain { font-size: var(--text-sm); color: var(--muted); }
.ws-cat-zero { color: var(--muted-2); }
.ws-cat-foot { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--muted); }
.ws-cat-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Add-activity form ────────────────────────────────────────────────────
   Three fields on one row at desktop, stacking before they crush. The gem's
   `.os-field-grid` is 1fr 1fr; this is the same component at the width this
   form needs, so it is a grid-template override and nothing else. */
.ws-addgrid { grid-template-columns: 2fr 1.4fr 1fr; }
@media (max-width: 900px) { .ws-addgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .ws-addgrid { grid-template-columns: 1fr; } }
/* The two booking rules are a GROUP, not two stray controls at the end of a
   field row — a fieldset says which decisions belong together. */
.ws-addrules { border: 0; margin: var(--space-5) 0 0; padding: 0; }
.ws-addrules legend { padding: 0; margin-bottom: var(--space-2); }
.ws-rule { display: inline-flex; align-items: center; gap: var(--space-2); margin-right: var(--space-5); font-size: var(--text-sm); color: var(--ink); cursor: pointer; }