/* tasks/061 — Fleet surfaces: KPI header + richer vessel cards (fleet tab), the
   minimal vessel panel (slide-over), and the full vessel details page. All colour
   and type run through design-system tokens (hallmark: no naked hex, no off-scale
   type, no inline token-styles) — ERB keeps only layout inline styles. */

/* ── Fleet KPI header ─────────────────────────────────────────────────
   tasks/071 rule 4 — the KPI tiles ARE `.os-stat-card-grid` / `.os-stat-card*`
   now; the hand-rolled `.fl-kpi*` shell is deleted. `.hos-fleet-kpis` carries
   only what the gem grid lacks: a responsive collapse for the 5-up default and
   the inline `<small>` denominator. Both flagged upstream (a
   `.hos-stat-card-grid--5` responsive step + a `__unit` slot on the value). */
.hos-fleet-kpis { gap: var(--space-4); }
@media (max-width: 1000px) { .hos-fleet-kpis { grid-template-columns: repeat(2, 1fr); } }
.hos-fleet-kpis .os-stat-card-value { display: flex; align-items: baseline; gap: 6px; }
.hos-fleet-kpis .os-stat-card-value small { font-size: var(--text-sm); color: var(--muted); font-weight: var(--fw-medium); }
.hos-fleet-kpis .hos-fl-kpi--alert .os-stat-card-value { color: var(--status-briefing-fg); }
.hos-fl-seg { display: flex; gap: 4px; margin-top: 9px; }
.hos-fl-seg span { height: 6px; border-radius: var(--radius-pill); }
.hos-fl-seg-ok { background: var(--status-confirmed-fg); }
.hos-fl-seg-down { background: var(--status-cancelled-fg); }

/* ── Fleet vessel card (richer) ───────────────────────────────────── */
.hos-fl-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.hos-fl-card--down { opacity: .9; }
.hos-fl-card__top { display: flex; align-items: flex-start; gap: 11px; }
.hos-fl-card__name { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--ink); }
.hos-fl-card__meta { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; }
.hos-fl-now {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  border-radius: var(--radius); background: var(--surface-alt);
  font-size: var(--text-xs); color: var(--muted);
}
.hos-fl-now b { font-weight: var(--fw-semibold); }
.hos-fl-now--live { background: var(--info-bg); color: var(--info); }
.hos-fl-now--maint { background: var(--status-cancelled-bg); color: var(--status-cancelled-fg); }
.hos-fl-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-top: 11px; border-top: 1px solid var(--hairline);
  font-size: var(--text-xs); color: var(--muted);
}
.hos-fl-foot span { display: inline-flex; align-items: center; gap: 5px; }
.hos-fl-foot__warn { color: var(--status-briefing-fg); }
.hos-fl-foot__bad { color: var(--status-cancelled-fg); }
.hos-fl-card .os-mono { color: var(--ink); }
/* #58 — crossings-left estimate under the fuel bar */
.hos-fl-crossings { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: var(--text-xs); color: var(--muted); }

/* ── Minimal vessel panel (slide-over) ────────────────────────────────
   `.vp-stats`/`.vp-stat*` retired onto `.os-stat-card-grid` / `.os-stat-card*`
   (rule 4); the rest is the panel chrome, now `.hos-vp-*`. */
.hos-vp { display: flex; flex-direction: column; height: 100%; }
/* The panel's regions are the DS `.os-sheet__head/__body/__foot`; these two rules
   add only what a right-side drawer needs on top of the bottom-sheet defaults. */
.hos-vp-head { flex: none; display: flex; align-items: flex-start; gap: 12px; }
.hos-vp > .os-sheet__body { display: flex; flex-direction: column; gap: 16px; }
.hos-vp-title { font-size: var(--text-lg); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); }
.hos-vp-sub { font-size: var(--text-xs); color: var(--muted); margin-top: 3px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hos-vp-fuel { display: flex; flex-direction: column; gap: 8px; }
.hos-vp-fuel__top { display: flex; align-items: baseline; justify-content: space-between; }
.hos-vp-fuel__big { font-family: var(--font-mono); font-size: var(--display-sm); font-weight: var(--fw-semibold); }
.hos-vp-fuel__sub { font-size: var(--text-xs); color: var(--muted); text-align: right; }
.hos-vp-fuel__sub b { color: var(--ink); }
.hos-vp-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
.hos-vp-stats .os-stat-card { background: var(--surface-alt); border: 0; border-radius: var(--radius); padding: 11px 13px; }
.hos-vp-stats .os-stat-card-value { font-size: var(--text-lg); margin-top: 3px; }
.hos-vp-stats .os-stat-card-value small { font-size: var(--text-xs); color: var(--muted); font-weight: var(--fw-medium); }
.hos-vp-now {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--radius); background: var(--info-bg); color: var(--info); font-size: var(--text-xs);
}
.hos-vp-now b { font-weight: var(--fw-semibold); }
.hos-vp-flags { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Full vessel details page ─────────────────────────────────────────
   tasks/071 — the undeclared `.vd-*` family is gone. Everything the gem
   already ships now renders as the gem component:
     .vd-crumbs        -> .os-breadcrumb        .vd-band*   -> .os-page-head (layout band)
     .vd-card__h/__b   -> .os-card__head/__body .vd-kv*     -> .os-desclist
     .vd-railkv        -> .os-desclist--inline  .vd-tag*    -> .os-status-pill*
     .vd-mono          -> .os-mono
   What remains below is genuinely HotelOS-domain (or has no gem counterpart)
   and carries the sanctioned `.hos-` prefix. Gem gaps flagged upstream:
   an icon-led meta row (`.hos-meta-row`) and a full-width meter (`.hos-meter`). */
.hos-vd-grid { display: grid; grid-template-columns: 1fr 316px; gap: var(--space-5); align-items: start; }
@media (max-width: 1000px) { .hos-vd-grid { grid-template-columns: 1fr; } }
.hos-vd-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.hos-vd-rail { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: 20px; }
@media (max-width: 1000px) { .hos-vd-rail { position: static; } }

/* ── Vessel detail v2 (tasks/343 — mockup vd2-f.html?l=2) ─────────────
   Header band (layout content_for) + a sticky summary rail beside a KPI-led main
   column. DOM order is rail-then-main; the grid places main in the left 1fr column
   and the rail in the right 320px column. ≤1000px: one column, rail first, static. */
.hos-vd-split { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-4); align-items: start; }
.hos-vd-main { grid-column: 1; grid-row: 1; }
.hos-vd-idrail { grid-column: 2; grid-row: 1; }
@media (max-width: 1000px) {
  .hos-vd-split { grid-template-columns: 1fr; }
  .hos-vd-main, .hos-vd-idrail { grid-column: 1; grid-row: auto; }
}
/* D6 — sticky above the stack point. The staff shell has no top bar (DESIGN.md), so the
   offset is the same 20px rhythm step the sticky rails elsewhere use. */
.hos-vd-idrail { display: flex; flex-direction: column; gap: var(--space-3); position: sticky; top: var(--space-5); min-width: 0; }
@media (max-width: 1000px) { .hos-vd-idrail { position: static; } }
.hos-vd-main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.hos-vd-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: stretch; }
/* Duo cards match heights (user request): each card is a flex column whose body takes the spare
   height; a lone empty state centres in it, a populated list stays top-aligned. */
.hos-vd-duo > .os-card { display: flex; flex-direction: column; }
.hos-vd-duo > .os-card > .os-card__body { flex: 1; }
.hos-vd-duo > .os-card > .os-card__body:has(> .hos-vd-duo__empty:only-child) { display: flex; flex-direction: column; justify-content: center; }
.hos-vd-empty-badge { width: 52px; height: 52px; }
@media (max-width: 720px) { .hos-vd-duo { grid-template-columns: 1fr; } }

/* D7 — rail identity block: type · pax, shown ONLY ≤640px, where the DS hides the band subtitle
   (os_ds.css `.os-page-head__sub { display: none }` at the same 640px). Wider, the subtitle
   carries it, so the rail would only repeat it. */
.hos-vd-railid { display: none; flex-direction: column; gap: var(--space-1); }
@media (max-width: 640px) { .hos-vd-idrail .hos-vd-railid { display: flex; } }

.hos-vd-checklist { display: flex; flex-direction: column; gap: 2px; }
.hos-vd-chk { display: flex; align-items: center; gap: 10px; padding: 9px 2px; font-size: var(--text-sm); border-top: 1px solid var(--hairline); }
.hos-vd-chk__ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: none; }
.hos-vd-chk__ic--ok { background: var(--success-bg); color: var(--success); }
.hos-vd-chk__ic--warn { background: var(--warning-bg); color: var(--warning); }
/* fix-3 — unknown (never logged): neutral, neither a pass nor a warning. */
.hos-vd-chk__ic--unknown { background: var(--surface-alt); color: var(--muted); }
.hos-vd-chk b { margin-left: auto; font-family: var(--font-mono); font-weight: var(--fw-semibold); font-size: var(--text-xs); color: var(--ink); }

.hos-vd-warn { color: var(--status-briefing-fg); }

/* A button rendered as a gem .os-stat-card--interactive (week tiles, the Flags tile):
   reset the UA button chrome so it reads exactly like the <a> the gem designs for. */
.hos-vd-week > .os-stat-card, button.hos-vd-kpi-flags { width: 100%; min-width: 0; font: inherit; color: inherit; text-align: left; }
/* A <button> may only hold phrasing content, so its stat-card slots are <span>s shown as blocks. */
.hos-vd-block { display: block; }

/* Week strip — 7 equal day tiles; scrolls INSIDE the card ≤720px. The gem has no
   7-up / scrolling stat-card track (os-stat-card-grid is 5/4/3-up). */
.hos-vd-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4); }
@media (max-width: 720px) {
  .hos-vd-week { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 92px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--space-1); -webkit-overflow-scrolling: touch; }
  .hos-vd-week > .os-stat-card { scroll-snap-align: start; }
}

/* Labelled-cell spec grid — .os-desclist auto-fills 200px tracks (1 column in the duo
   card); same component on a narrower track. */
.hos-vd-cells { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: var(--space-3); }

/* Icon-led meta row — gem gap (candidate `.hos-meta-row`): icon tile + title/meta
   + a right-aligned figure. `.os-assist-row` is accent-tinted (AI/OCR affordance)
   and `.os-open-row` is a 96px board row, so neither fits. */
.hos-vd-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: var(--text-sm); }
.hos-vd-row + .hos-vd-row { border-top: 1px solid var(--hairline); }
.hos-vd-row__icon { width: 34px; height: 34px; border-radius: var(--radius); background: var(--surface-alt); color: var(--muted); display: flex; align-items: center; justify-content: center; flex: none; }
.hos-vd-row__icon--sky { background: var(--info-bg); color: var(--info); }
.hos-vd-row__icon--rose { background: var(--status-cancelled-bg); color: var(--status-cancelled-fg); }
.hos-vd-row__body { flex: 1; min-width: 0; }
.hos-vd-row__t { font-weight: var(--fw-medium); color: var(--ink); }
.hos-vd-row__m { font-size: var(--text-xs); color: var(--muted); }
.hos-vd-row__right { margin-left: auto; flex: none; text-align: right; }
.hos-vd-row__right .os-mono { color: var(--ink); }
/* A sailed run reads as history (the Transport spine's --past lives on .hos-spine__mv,
   a different component). */
.hos-vd-row--past { opacity: 0.55; }
.hos-vd-empty { padding: 14px 0; color: var(--muted); font-size: var(--text-sm); }

/* Rail fuel gauge — gem gap (candidate `.hos-meter`): `.os-tracker__bar` is a
   fixed 120px inline meter, not a full-width gauge with a display figure. */
.hos-vd-gauge__top { display: flex; align-items: baseline; justify-content: space-between; }
.hos-vd-gauge__big { font-family: var(--font-mono); font-size: var(--display-sm); font-weight: var(--fw-semibold); }
.hos-vd-gauge__sub { font-size: var(--text-xs); color: var(--muted); text-align: right; }
.hos-vd-gauge__sub b { color: var(--ink); }
.hos-vd-track { height: 9px; border-radius: var(--radius-pill); background: var(--surface-alt); overflow: hidden; margin-top: 8px; }
.hos-vd-fill { height: 100%; border-radius: var(--radius-pill); }
.hos-vd-fill--ok { background: var(--success); }
.hos-vd-fill--warn { background: var(--warning); }
.hos-vd-fill--low { background: var(--danger); }

.hos-vd-actions { display: flex; flex-direction: column; gap: 9px; }

/* ── Fuel history ledger (tasks/343 L2) ───────────────────────────────
   The gem's .os-ledger-row is one flex line with no column slots, so each row's
   inner .hos-vd-ledger__row is a grid with named areas. Tiers are a CONTAINER query
   on .hos-vd-ledgerct (the card body width changes with the rail, not the viewport):
     wide   — ONE line; the <ol> owns content-sized tracks and every row SUBGRIDS them,
              so columns align across rows (incl. rows Load older appends) and gaps
              are uniform ink-to-ink. Rhythm: 12px in a group, 32px between groups.
     medium — who + photo drop to a 2nd line under the metrics (still subgrid).
     narrow — stacked block; In/out + Tank side by side. */
.hos-vd-ledgerct { container-type: inline-size; }
.hos-vd-ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.hos-vd-ledger__date { grid-area: date; } .hos-vd-ledger__ico { grid-area: ico; } .hos-vd-ledger__io { grid-area: io; text-align: right; }
.hos-vd-ledger__tank { grid-area: tank; }
.hos-vd-ledger__m1 { grid-area: m1; } .hos-vd-ledger__m2 { grid-area: m2; } .hos-vd-ledger__m3 { grid-area: m3; }
.hos-vd-ledger__who { grid-area: who; min-width: 0; } .hos-vd-ledger__ph { grid-area: ph; display: flex; justify-content: flex-end; }
.hos-vd-ledger__nophoto { display: inline-flex; align-items: center; justify-content: center; width: var(--control-h-sm); height: var(--control-h-sm); }
.hos-vd-ledger__io .os-figure, .hos-vd-ledger__tank .os-figure, .hos-vd-ledger__m .os-figure,
.hos-vd-ledger__date > *, .hos-vd-ledger__tank .os-meta { white-space: nowrap; }
/* D5 — `who` is the one free-text track: bounded, ellipsis, full name in title="". */
.hos-vd-ledger__who .os-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* medium (default below the wide tier) */
.hos-vd-ledger {
  display: grid; column-gap: var(--space-3);
  grid-template-columns: max-content max-content max-content max-content max-content max-content minmax(max-content, 1fr);
}
.hos-vd-ledger > .os-ledger-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.hos-vd-ledger .os-ledger-row > .hos-vd-ledger__row {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center;
  column-gap: var(--space-3); row-gap: var(--space-1); padding: var(--space-4) 0; min-height: 0;
  grid-template-areas: "date ico io tank m1 m2 m3" ". . . . who who ph";
}
/* wide — one line. THRESHOLD (D5) = 708px, measured (tasks/343 A8) at 1440 on the worst-case
   row ("30 Sep" · "+9,999.9 L" · "≈100%" / "9,999 L est." · "$9,999.99" · "$9.99/L" · "−999 pp"):
     date 47.5 + icon 34 + in/out 84 + tank 67.1 + Cost 75.6 + Rate 58.8 + 3rd 58.8 + photo 42
     + group margins (tank 12; in/out, m1, who 3 × 20 = 72) + 8 column gaps × 12 = 96
     = 635.8px of fixed max-content tracks, + a 72px floor for `who` (minmax(0, 18ch): ~6
     characters + ellipsis before it truncates further) = 707.8 → 708px.
   At 1440×900 the card body is 718px → one line; at 768 it is ~688px → the two-line tier. */
@container (min-width: 708px) {
  .hos-vd-ledgerct .hos-vd-ledger {
    grid-template-columns: max-content max-content max-content max-content max-content max-content max-content minmax(0, 18ch) minmax(max-content, 1fr);
  }
  .hos-vd-ledger .os-ledger-row > .hos-vd-ledger__row { grid-template-areas: "date ico io tank m1 m2 m3 who ph"; }
  .hos-vd-ledger .hos-vd-ledger__tank { margin-left: var(--space-3); }                                     /* 12 + 12 = 24 */
  .hos-vd-ledger .hos-vd-ledger__io,
  .hos-vd-ledger .hos-vd-ledger__m1,
  .hos-vd-ledger .hos-vd-ledger__who { margin-left: var(--space-5); }                                       /* 12 + 20 = 32 */
}
/* narrow — stacked block. (Container-tier rules are written as descendant selectors on purpose:
   a single-class rule inside @container can't be judged on a bare element, so the computed-style
   component contract — test/computed_style — would misread it as a cascade loss.) */
/* NARROW THRESHOLD (D5) = 519px: below 520 the medium tier's 7 max-content tracks no longer fit
   the worst-case row — date 47.5 + icon 34 + in/out 84 + tank 67.1 + Cost 75.6 + Rate 58.8 + 3rd
   58.8 = 425.8 + 6 × 12 gaps = 497.8px, plus the 2nd line's who (m1+m2) — so it stacks. Measured
   at 520: two-line, no overflow; at 519: stacked (tasks/343 A8). */
@container (max-width: 519px) {
  .hos-vd-ledgerct .hos-vd-ledger { display: block; }
  .hos-vd-ledger > .os-ledger-row { display: block; }
  .hos-vd-ledger .os-ledger-row > .hos-vd-ledger__row {
    grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: var(--space-2); align-items: start;
    grid-template-areas: "ico date date ph ph ph" "io io io tank tank tank" "m1 m1 m2 m2 m3 m3" "who who who who who who";
  }
  .hos-vd-ledger .hos-vd-ledger__date { align-self: center; }
  .hos-vd-ledger .hos-vd-ledger__io { text-align: left; }
}
.hos-vd-loadolder { display: flex; justify-content: center; }
.hos-vd-loadolder:not(:has(a)) { display: none; } /* end of history: the stream emptied it */

/* Photo viewer (drawer) — the authz'd image, fitted to the panel. */
.hos-vd-photo { display: block; max-width: 100%; height: auto; border-radius: var(--radius); background: var(--surface-alt); }

/* A10 — on phones the gem collapses page-head actions to 40px icon buttons; this page's
   header IS its action bar (Log gauge · Log refuel · ⋮), so lift them to the 44px touch
   target the hamburger band already uses. Scoped like gr_card.css's :has() precedent;
   gem gap (40px < 44px WCAG 2.5.5) to report upstream. */
@media (max-width: 640px) {
  .hos-shell-content:has(.hos-vd-split) .os-page-head__actions > .os-btn,
  .hos-shell-content:has(.hos-vd-split) .os-page-head__actions > .hos-rowmenu > .os-btn { min-width: 44px; min-height: 44px; }
}
/* An empty filter result ("Nothing flagged…") spans the whole ledger grid. */
.hos-vd-ledger > .hos-vd-ledger__none { grid-column: 1 / -1; padding: var(--space-4) 0; }

/* ≤640px: the photo button / no-photo marker is a ≥44px touch target (WCAG 2.5.5). */
@media (max-width: 640px) {
  .hos-vd-ledger .hos-vd-ledger__ph > .os-btn,
  .hos-vd-ledger .hos-vd-ledger__ph > .hos-vd-ledger__nophoto { min-width: 44px; min-height: 44px; }
  /* user-approved QA (MR !500): the ledger filter, Load older, the empty-state actions and the
     schedule's board link are touch targets too. */
  .hos-vd-history .os-segmented__option,
  .hos-vd-loadolder .os-btn,
  .hos-vd-history__empty .os-empty-state__action { min-height: 44px; }
  .hos-vd-schedule .os-card__foot .os-link { display: inline-flex; align-items: center; min-height: 44px; }
}
/* The gem's empty-state action has no icon gap; ours carry a Lucide icon. */
.hos-vd-history__empty .os-empty-state__action { gap: var(--space-2); }
/* Load older while its request is in flight. */
.hos-vd-loadolder .os-btn[aria-disabled="true"] { opacity: .6; pointer-events: none; }
.hos-vd-segcap { white-space: nowrap; }
/* D2 — a non-GM refuel row has no money cells: the empty metric slots collapse (the named grid
   areas keep every other column where it was). */
.hos-vd-ledger .hos-vd-ledger__m:empty { display: none; }