/* 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; } }

/* ── Variant C · Split cockpit (tasks/274) ─────────────────────────────
   A sticky 320px identity rail (branded card + fuel ring + readiness
   checklist + pinned actions) beside a scrolling KPI-led main column.
   All new families are HotelOS-domain with no gem counterpart. */
/* Rail lives on the RIGHT (tasks/274 revision): DOM order is rail-then-main, but the
   grid places main in the left 1fr column and the sticky identity rail in the right
   320px column. On narrow screens it collapses to one column, identity card first. */
.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; }
}
.hos-vd-idrail { display: flex; flex-direction: column; gap: var(--space-3); position: sticky; top: 20px; 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-kpirow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
@media (max-width: 720px) { .hos-vd-kpirow { grid-template-columns: repeat(2, 1fr); } }
.hos-vd-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
@media (max-width: 720px) { .hos-vd-duo { grid-template-columns: 1fr; } }
/* Last-ping value is a relative time string, not a figure — dial its size down. */
.hos-vd-kpi-sm { font-size: var(--text-xl); }

/* Branded identity card — gradient header + fuel ring + readiness checklist */
.hos-vd-idcard { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.hos-vd-idcard__top { background: linear-gradient(140deg, var(--accent-strong), var(--accent)); color: var(--on-accent); padding: 22px 22px 20px; }
.hos-vd-idcard__eyebrow { font-size: var(--text-2xs); font-weight: var(--fw-bold); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.hos-vd-idcard__name { font-size: var(--text-xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); margin: 6px 0 4px; color: var(--on-accent); }
.hos-vd-idcard__sub { opacity: .85; font-size: var(--text-sm); }
.hos-vd-idcard__pills { display: flex; gap: 7px; margin-top: 14px; flex-wrap: wrap; }
.hos-vd-idcard__pill { background: rgba(255, 255, 255, .16); color: var(--on-accent); border-radius: var(--radius-pill); padding: 3px 10px; font-size: var(--text-2xs); font-weight: var(--fw-semibold); }
.hos-vd-idcard__body { padding: 6px 20px 20px; }

.hos-vd-ring { position: relative; width: 128px; height: 128px; margin: 20px auto 6px; }
.hos-vd-ring__pct { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hos-vd-ring__pct b { font-size: var(--text-2xl); font-weight: var(--fw-bold); font-family: var(--font-mono); letter-spacing: var(--ls-tight); color: var(--ink); }
.hos-vd-ring__pct span { font-size: var(--text-2xs); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.hos-vd-ftxt { text-align: center; color: var(--muted); font-size: var(--text-xs); margin-bottom: 8px; }

.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); }
.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-railacts { display: flex; flex-direction: column; gap: 8px; }
.hos-vd-railacts .os-btn { justify-content: center; }
.hos-vd-railacts form { margin: 0; }
.hos-vd-railacts form .os-btn { width: 100%; }

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

/* 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); }
.hos-vd-live { color: var(--info); font-weight: var(--fw-semibold); }
.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(--green-600); }
.hos-vd-fill--warn { background: var(--amber-500); }
.hos-vd-fill--low { background: var(--red-500); }

.hos-vd-actions { display: flex; flex-direction: column; gap: 9px; }
.hos-vd-spark { display: block; width: 100%; height: 60px; }

/* #57 — daily-fuel snapshot block at the top of the Fuel history card */
.hos-vd-fuelsnap { padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--hairline); }
.hos-vd-fuelsnap__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 0 4px; }