/*
 * Bullet Train's base CSS applies a global `a:hover { text-decoration-
 * line: underline; color: secondary-600; }` to every anchor. That
 * overrides custom hover treatments because text-decoration-line is
 * different from text-decoration (the latter doesn't reset the former).
 * Reset hover behavior for the custom link classes used in patterns +
 * shell. They handle their own hover state via background-color +
 * color changes — no underline, no link recoloring.
 */
/* Reset BT's global a:hover (text-decoration-line: underline + color
   secondary-600) for our custom link components. Also reset base a
   color (BT sets a { color: var(--secondary-500) }) so descendant text
   inherits --text-primary instead of the link blue. Both rules need
   to be on the parent anchor — the children inherit from there. */
.diveos-sidebar__link,
.diveos-sidebar__owner,
.open-row__link,
.ledger-row__link,
.filter-pill,
.segmented__option,
.tabs__tab,
.settings-sub-nav__link,
.trip-row__link,
.setting-item--linked,
.header-zone__action-button {
  color: inherit;
}
.diveos-sidebar__link:hover,
.diveos-sidebar__owner:hover,
.open-row__link:hover,
.ledger-row__link:hover,
.filter-pill:hover,
.segmented__option:hover,
.tabs__tab:hover,
.settings-sub-nav__link:hover,
.trip-row__link:hover,
.setting-item--linked:hover,
.header-zone__action-button:hover {
  text-decoration-line: none;
  color: inherit;
}
/* Hover background colors set explicitly elsewhere; preserve the
   defined hover states for backgrounds. */
.diveos-sidebar__link:hover { color: var(--text-primary); }
.diveos-sidebar__item--active .diveos-sidebar__link:hover { color: var(--accent-strong); }
.filter-pill:hover { color: var(--text-secondary); }
.filter-pill--active:hover { color: var(--accent-strong); }
.segmented__option:hover { color: var(--text-primary); }
.tabs__tab:hover { color: var(--text-primary); }
.settings-sub-nav__link:hover { color: var(--text-primary); }
.settings-sub-nav__item--active .settings-sub-nav__link:hover { color: var(--accent-strong); }

/*
 * patterns.css — DiveOS shared pattern styles
 *
 * One file per concern would be tidier but Propshaft imports flat. The
 * patterns live here in the same order as UI-ARCHITECTURE.md §4 so a
 * reader scrolling the spec finds the CSS for each pattern in sequence.
 *
 * Resolves all colors through tokens.css semantic aliases (light-only
 * since v4 — dark mode removed per the diveOS-design-system repo spec).
 *
 * Inter is the body font (loaded by tokens.css). Geist Mono is used for
 * any tabular-nums context (time anchors, KPI values, capacity ratios).
 * Apply via inline class `font-mono` or local rule.
 */

/* ─── Text roles ────────────────────────────────────────────────────────
   Named typographic roles. Use these instead of hand-speccing
   size/weight/transform/tracking/color inline (the `text-[10px] uppercase
   tracking-[0.08em] text-muted` soup that recurs in ~47 files). Each maps to a
   --text-* token, so nothing is off-scale. They carry NO layout (no margins /
   display) so they compose on any element — for a standalone eyebrow WITH
   block spacing use .section-label; for a card's header use .dv-card__title.
   Role names, not size names (body-14 etc.): a name shouldn't lie when the
   scale shifts. Each role names its px in the comment for reference. */

/* Headings — structural h1–h5 classes that apply a heading level's appearance
   to ANY element, decoupled from the semantic tag (à la Primer .h1–.h6 / Carbon
   heading tokens / Polaris headingXl–Sm). Decoupling is deliberate: pick the
   tag for document structure, the class for size — bare <h1>–<h5> stay on
   Tailwind's preflight reset so a level never forces a size. Semantic role
   aliases share each style (.dv-title === .dv-h4), so both vocabularies work
   with one definition. Display font, 600, tight tracking. */
.dv-h1, .dv-display  { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; color: var(--ink); }  /* 28 — page hero */
.dv-h2, .dv-title-lg { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: 1.2;  letter-spacing: -0.02em;  color: var(--ink); }  /* 24 — major section */
.dv-h3               { font-family: var(--font-display); font-size: var(--text-xl);  font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); }  /* 20 — subsection */
.dv-h4, .dv-title    { font-family: var(--font-display); font-size: var(--text-lg);  font-weight: 600; line-height: 1.3;  letter-spacing: -0.01em;  color: var(--ink); }  /* 18 — card / panel heading */
.dv-h5, .dv-title-sm { font-family: var(--font-display); font-size: var(--text-md);  font-weight: 600; line-height: 1.35; letter-spacing: -0.01em;  color: var(--ink); }  /* 16 — small heading */
/* Subtitle — supporting subhead under a title. */
.dv-subtitle { font-size: var(--text-md); line-height: 1.5; color: var(--muted); }  /* 16 — muted lead-in */
/* Body. */
.dv-body-lg  { font-size: var(--text-md); line-height: 1.6;  color: var(--ink); }  /* 16 — roomy body */
.dv-body     { font-size: var(--text-sm); line-height: 1.55; color: var(--ink); }  /* 14 — default body */
.dv-small    { font-size: var(--text-xs); line-height: 1.5;  color: var(--ink); }  /* 12 — small print */

.dv-eyebrow {                         /* micro uppercase label — "STATUS", "BOAT" */
  font-size: var(--text-2xs);         /* 10px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.dv-meta {                            /* secondary / supporting line */
  font-size: var(--text-xs);          /* 12px */
  color: var(--muted);
}
.dv-figure {                          /* numeric — money / rate / id / count */
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.dv-caption {                         /* quietest micro caption */
  font-size: var(--text-2xs);         /* 10px */
  color: var(--muted-2);
}

/* ─── Section label ─────────────────────────────────────────────────── */
.section-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 24px 0 8px;
  line-height: 1.4;
}

/* ─── Layout primitives: Stack + Inline ─────────────────────────────────
   Name the layout instead of hand-rolling `flex flex-col gap-3` /
   `flex items-center gap-2`. Stack = vertical flow, Inline = horizontal flow,
   both with a token gap off the --space scale. (Polaris BlockStack/InlineStack,
   Primer Stack, Braid Stack/Inline.) Default gap = the common case; the size
   modifiers step the scale and apply to both. Inline centers + wraps by default;
   alignment/justify modifiers cover the rest. */
.dv-stack  { display: flex; flex-direction: column; gap: var(--space-3); }            /* 12 */
.dv-inline { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-2); }  /* 8 */
/* Gap steps (both Stack + Inline). */
.dv-stack--xs, .dv-inline--xs { gap: var(--space-1); }  /* 4 */
.dv-stack--sm, .dv-inline--sm { gap: var(--space-2); }  /* 8 */
.dv-stack--md, .dv-inline--md { gap: var(--space-3); }  /* 12 */
.dv-stack--lg, .dv-inline--lg { gap: var(--space-4); }  /* 16 */
.dv-stack--xl, .dv-inline--xl { gap: var(--space-6); }  /* 24 */
/* Cross-axis + main-axis modifiers. */
.dv-stack--center    { align-items: center; }
.dv-inline--top      { align-items: flex-start; }
.dv-inline--baseline { align-items: baseline; }
.dv-inline--between  { justify-content: space-between; }
.dv-inline--end      { justify-content: flex-end; }
.dv-inline--nowrap   { flex-wrap: nowrap; }

/* ─── KPI strip ─────────────────────────────────────────────────────── */
.kpi-strip {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 28px 36px;
  margin: 0 0 28px;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
}
.kpi-strip__stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.kpi-strip__value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-3xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1;
  margin: 0;
}
.kpi-strip__label {
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin: 0;
}

/* ─── StatBand — bordered metrics card (content-pane sibling of kpi_strip)
   2–5 cells, big tabular number over an uppercase label, inner hairlines.
   Sits on the gray canvas (NOT in the header band). Cell count via --cols.
   Spec: Design/agent-view-dive-sites-stat-card/handover/stat-band/. ──────── */
.stat-band {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 20px;
}
.stat-band__cell {
  padding: 18px 20px;
  border-left: 1px solid var(--hairline-2);
}
.stat-band__cell:first-child { border-left: 0; }
.stat-band__label {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-band__value {
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
}
.stat-band__unit { font-size: 0.6em; font-weight: 500; color: var(--muted); }
.stat-band__value--display { font-family: var(--font-display); font-variant-numeric: normal; }
.stat-band__value--positive  { color: var(--status-confirmed-fg); }
.stat-band__value--attention { color: var(--status-briefing-fg); }
.stat-band__value--negative  { color: var(--status-cancelled-fg); }
.stat-band__value--empty     { color: var(--muted-2); font-weight: 500; }
/* Vertical variant — single column, cells stacked with top hairlines.
   For a narrow rail (e.g. dive-site facts) where vertical space is ample. */
.stat-band--vertical { grid-template-columns: 1fr; }
.stat-band--vertical .stat-band__cell { border-left: 0; border-top: 1px solid var(--hairline-2); }
.stat-band--vertical .stat-band__cell:first-child { border-top: 0; }
@media (max-width: 640px) {
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .stat-band__cell:nth-child(odd)   { border-left: 0; }
  .stat-band__cell:nth-child(n + 3) { border-top: 1px solid var(--hairline-2); }
}

/* ─── Stat card — clickable KPI/filter tile ─────────────────────────────
   A bordered tile (swatch + label, big tabular value, sub-line) that toggles
   a filter when clicked. Replaces hand-rolled utility-soup tiles (gear
   category KPIs) that drifted off the type scale and underlined on hover
   because BT's global a:hover beat the `no-underline` utility. As an <a> it
   resets its own hover underline. Sizes are tokens, not raw px. */
.dv-stat-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  transition: border-color 150ms ease-out, background 150ms ease-out;
}
.dv-stat-card:hover { border-color: var(--hairline-strong); text-decoration: none; }
.dv-stat-card--active { border-color: var(--accent); background: var(--accent-softer); }
.dv-stat-card--active:hover { border-color: var(--accent); }
.dv-stat-card__head { display: flex; align-items: center; gap: var(--space-2); }
.dv-stat-card__swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.dv-stat-card__label {
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 500; color: var(--ink);
}
.dv-stat-card__value {
  font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1; margin-top: 6px;
}
.dv-stat-card__sub { font-size: var(--text-2xs); font-weight: 500; color: var(--muted); margin-top: 6px; }
.dv-stat-card__sub--due { color: var(--briefing); }

/* ─── Header zone ───────────────────────────────────────────────────── */
.header-zone {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.header-zone__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0;
}
.header-zone__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin: 8px 0 0;
}
.header-zone__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.header-zone__action-button {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 150ms ease-out;
}
.header-zone__action-button:hover { background: var(--surface-alt); }
.header-zone__action-button:disabled { opacity: 0.5; cursor: not-allowed; }
.header-zone__action-button--primary {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
}
.header-zone__action-button--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

/* Destructive action — used for bottom-LEFT footer actions in side panels
   (Set inactive, Retire item). Ghost background + danger/red text; on hover it
   gains a soft red tint and red border so the destructive intent reads clearly
   without competing with the filled primary on the right. */
.header-zone__action-button--danger {
  background: transparent;
  color: var(--cancelled);
  border-color: transparent;
}
.header-zone__action-button--danger:hover {
  background: var(--cancelled-bg);
  color: var(--cancelled);
  border-color: var(--cancelled-border);
}

/* ─── Dives surface specifics ──────────────────────────────────────── */
.dives-view-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 16px;
}
.dives-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.dives-empty {
  padding: 64px 16px;
  text-align: center;
  color: var(--text-muted);
}
.dives-empty--wide { padding: 96px 16px 64px; }
.dives-empty__line {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  margin: 0 0 8px;
}
.dives-empty__hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Drawer body lists (Divers / Stops tabs) ──────────────────────── */
.drawer-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.drawer-empty {
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--text-sm);
  margin: 8px 0 16px;
}
.drawer-notes {
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0 0 16px;
}
.drawer-notes--incident { color: var(--red-700); }

/* ─── Settings shell layout (T12) ──────────────────────────────────── */
.settings-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  margin-top: 8px;
}
@media (max-width: 1023px) {
  .settings-layout { grid-template-columns: 1fr; gap: 16px; }
}
.settings-sub-nav {
  border-right: 1px solid var(--border);
  padding-right: 16px;
}
@media (max-width: 1023px) {
  .settings-sub-nav { border-right: none; padding-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
  .settings-sub-nav__items { display: flex; flex-wrap: wrap; gap: 4px; }
}
.settings-sub-nav__items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.settings-sub-nav__item { position: relative; }
.settings-sub-nav__link {
  display: block;
  padding: 8px 12px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.settings-sub-nav__link:hover {
  background: var(--surface-alt);
  color: var(--text-primary);
}
.settings-sub-nav__item--active .settings-sub-nav__link {
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.settings-sub-nav__item--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--accent);
  border-radius: 0 1px 1px 0;
}
@media (max-width: 1023px) {
  .settings-sub-nav__item--active::before { display: none; }
}
.settings-content { min-width: 0; }

/* ─── Settings nav item (redesigned, icon + label) ──────────────────────
   The grouped Settings sub-nav (Shop / Operations / People / Account) — an
   icon + label row that is the active section's accent-soft chip and warms on
   hover. Promotes the per-item utility soup (the hand-rolled active/hover
   string with an arbitrary hover:bg-[var(--hover-warm)]) into a token-driven
   component, mirroring how .dv-filter-bar scopes the filter row. The group
   heading uses .dv-eyebrow (named micro-label). */
.dv-settings-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}
.dv-settings-nav__item:hover,
.dv-settings-nav__item:focus-visible { background: var(--hover-warm); text-decoration: none; color: var(--ink); }
.dv-settings-nav__item svg { color: var(--muted); flex-shrink: 0; }
.dv-settings-nav__item.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.dv-settings-nav__item.is-active:hover { background: var(--accent-soft); color: var(--accent); }
.dv-settings-nav__item.is-active svg { color: var(--accent); }
.settings-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Status summary grid — each section partial renders this above the link
   list to show at-a-glance configuration state. Two columns; --ok rows
   show in green-700, --todo rows in amber-700, both via tokens.css. */
.settings-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  margin: 16px 0 24px;
  padding: 0;
}
@media (max-width: 1023px) {
  .settings-status { grid-template-columns: 1fr; }
}
.settings-status__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  margin: 0;
}
.settings-status__label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}
.settings-status__value {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.settings-status__row--ok .settings-status__value {
  color: var(--green-700);
}
.settings-status__row--todo .settings-status__value {
  color: var(--amber-700);
}
.settings-status__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
}
.settings-status__hint {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-left: 6px;
}

/* ─── Modern settings list (card rows) ───────────────────────────────
   v4 modernization. Replaces the .settings-status stat-strip + tight
   ledger-row with richer card rows: leading icon, title + description,
   trailing status pill + chevron. One row per editable thing; status is
   folded onto the row (no separate stat-strip), counts neutral, only true
   needs-attention / healthy state takes color. */
.setting-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.setting-list__item { margin: 0; }
.setting-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background 150ms ease;
}
.setting-list__item:last-child .setting-item { border-bottom: 0; }
.setting-item--linked { cursor: pointer; }
.setting-item--linked:hover { background: var(--hover-warm); }
.setting-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}
.setting-item__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.setting-item__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.setting-item__meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
}
.setting-item__trail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.setting-item__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.setting-item__pill--count { background: var(--surface-alt); color: var(--text-muted); border-color: var(--border); }
.setting-item__pill--warn  { background: var(--status-briefing-bg);  color: var(--amber-700); border-color: var(--status-briefing-border, var(--border)); }
.setting-item__pill--ok    { background: var(--status-confirmed-bg);  color: var(--green-700); border-color: var(--status-confirmed-border, var(--border)); }
.setting-item__pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.setting-item__chevron { color: var(--text-muted); display: inline-flex; align-items: center; }
.setting-item--linked:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .setting-item { transition: none; } }

/* ─── Filter bar ────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 16px;
}
.filter-bar::-webkit-scrollbar { display: none; }
/* v4: aligned to the repo .chip spec — 28px pill, hairline border on
   surface; active = accent-soft bg + accent-border + accent text. */
.filter-pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background 150ms ease-out;
}
.filter-pill:hover { background: var(--canvas); }
.filter-pill--active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-border);
}

/* ─── Operations bar (.dv-opbar) ─────────────────────────────────────────
   Consolidated status + actions strip at the foot of a form-detail page
   (sharing / public-access / documents). Uses the shared cool blue-gray
   summary surface (#F2F5F9 / #D5DEEA — same as .ds-sum) so it reads as a
   DISTINCT operations panel, not another white form-field info_card. Status +
   meta on the left, action buttons + a QR tile on the right. Standard for
   status/CTA sections across forms. */
.dv-opbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  background: #F2F5F9;             /* shared cool blue-gray summary surface */
  border: 1px solid #D5DEEA;
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.dv-opbar__main { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.dv-opbar__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--slate-500);
}
.dv-opbar__label svg { color: var(--muted-2); }
.dv-opbar__facts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dv-opbar__meta { font-size: var(--text-sm); color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.dv-opbar__meta svg { color: var(--confirmed); }
.dv-opbar__dot { color: var(--hairline-strong); }
.dv-opbar__files { display: flex; gap: 16px; font-size: var(--text-sm); }
.dv-opbar__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dv-opbar__actions form { margin: 0; }
/* QR on demand via a <details> popover (C variant — the inline thumbnail was
   the A variant). "Show QR" is a secondary button; the QR floats below it. */
.dv-opbar__qrtoggle { position: relative; }
.dv-opbar__qrtoggle > summary { list-style: none; cursor: pointer; }
.dv-opbar__qrtoggle > summary::-webkit-details-marker { display: none; }
.dv-opbar__qrtoggle > summary::marker { content: ""; }
.dv-opbar__qrpop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-panel);
  padding: 14px; text-align: center; width: max-content;
}
.dv-opbar__qr { width: 132px; height: 132px; display: grid; place-items: center; }
.dv-opbar__qr svg { width: 100%; height: 100%; display: block; }
.dv-opbar__qrcap { display: block; font-size: var(--text-xs); color: var(--muted-2); margin-top: 8px; }

/* ─── Status pill ───────────────────────────────────────────────────── */
/* (.status-pill base + .status-pill--<key> color rules live in dashboard.css
   so legacy callers keep working. New surfaces should still use the partial
   `_status_pill.html.erb` which is helper-driven.) */
.status-pill__label { line-height: 1; }
.status-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ─── Open row ──────────────────────────────────────────────────────── */
.open-row {
  list-style: none;
  border-bottom: 1px solid var(--border);
}
.open-row__link,
.open-row > *:not(:has(.open-row__link)) {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  min-height: 96px;
}
.open-row__link { transition: background 150ms ease-out; }
.open-row__link:hover { background: var(--surface-alt); }
.open-row__time-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.open-row__time {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-3xl);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  line-height: 1;
}
.open-row__time-meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 6px;
}
.open-row__body { min-width: 0; }
.open-row__primary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px;
}
.open-row__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-md);
  color: var(--text-primary);
}
.open-row__meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}
.open-row__right {
  text-align: right;
}
.open-row__right-value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  line-height: 1;
}
.open-row__right-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ─── Ledger row ────────────────────────────────────────────────────── */
.ledger-row {
  list-style: none;
  border-bottom: 1px solid var(--border);
}
.ledger-row__link,
.ledger-row > *:not(:has(.ledger-row__link)) {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 12px 16px;
  min-height: 48px;
  text-decoration: none;
  color: inherit;
}
.ledger-row__link { transition: background 150ms ease-out; }
.ledger-row__link:hover { background: var(--surface-alt); }
.ledger-row__time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  color: var(--text-muted);
  flex-shrink: 0;
  width: 60px;
}
.ledger-row__title {
  font-size: var(--text-sm);
  color: var(--text-primary);
  flex: 1;
}
.ledger-row__meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.ledger-row__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--text-primary);
  flex-shrink: 0;
}

/* ─── Side panel (drawer) ───────────────────────────────────────────── */
.side-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
}
.side-panel__header {
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.side-panel__eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.side-panel__close {
  float: right;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: background 150ms ease-out, color 150ms ease-out;
}
.side-panel__close:hover {
  background: var(--surface-alt);
  color: var(--text-primary);
}
.side-panel__close-icon { width: 18px; height: 18px; stroke-width: 1.75; }
.side-panel__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--text-primary);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
/* Title + status on one row, meta drops below (booking drawer, #113). */
.side-panel__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}
.side-panel__title--inline {
  margin: 0;
}
.side-panel__subtitle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.side-panel__meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.side-panel__tab-zone {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
/* Tab bar shares the panel's 24px gutter (header/body) instead of sitting
   flush-left. Applies to every drawer that uses the side_panel chrome. */
.side-panel__tab-zone > .tabs { padding-left: 24px; padding-right: 24px; }
.side-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}
.side-panel__action-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.side-panel__action-bar-left { flex: 1; }
.side-panel__action-bar-right {
  display: flex;
  gap: 8px;
  /* Always pin to the right edge. With a left/destructive action present the
     flex:1 left pushes us right (left|……|right); with no left action the
     margin-left:auto still drives us to the right edge so a lone primary CTA
     is bottom-right by default (not flex-start/left). */
  margin-left: auto;
}
/* Single-CTA footers (e.g. the booking quick-view "View full booking") pin
   their one action to the right edge. Now redundant since the default
   right-aligns via margin-left:auto — kept for any explicit callers. */
.side-panel__action-bar--end { justify-content: flex-end; }

/* Width modifier — opt-in wider (560px) read-only summary drawer. Add
   `.side-panel--wide` to the `.side-panel` section when a surface needs the
   roomier variant. */
.side-panel--wide { max-width: 560px; }

/* ─── Field grid ────────────────────────────────────────────────────── */
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field-grid__field--span-2 { grid-column: 1 / -1; }
.field-grid__label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: 4px;
}
.field-grid__value {
  font-size: var(--text-sm);
  color: var(--text-primary);
}

/* ─── Segmented control ─────────────────────────────────────────────── */
.segmented {
  display: inline-flex;
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  padding: 4px;
  gap: 4px;
}
.segmented__option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.segmented__option:hover { color: var(--text-primary); }
.segmented__option:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.segmented__option--active {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
.segmented__option--active:focus-visible {
  box-shadow: var(--shadow-sm), var(--shadow-focus);
}

/* Form-field variant — full-width equal segments, backed by a native radio
   group; the checked segment lifts to white with accent text (A5 difficulty
   picker). Native radios + :has, no JS. */
.segmented--field { display: flex; width: 100%; }
.segmented--field .segmented__option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.segmented__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.segmented--field .segmented__option:has(.segmented__radio:checked) {
  background: var(--surface);
  color: var(--accent);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.segmented--field .segmented__option:has(.segmented__radio:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ─── Toggle switch (form-bound) ────────────────────────────────────────
   A styled boolean control backed by a native checkbox that submits with the
   form (unlike the fetch-based .toggle_switch component). Native checkbox +
   :has(), no JS. */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.toggle-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.toggle-switch__track {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  background: var(--hairline-strong);
  border-radius: var(--radius-pill);
  transition: background 150ms ease-out;
}
.toggle-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: transform 150ms ease-out;
}
.toggle-switch__input:checked ~ .toggle-switch__track,
.toggle-switch:has(.toggle-switch__input:checked) .toggle-switch__track {
  background: var(--accent);
}
.toggle-switch__input:checked ~ .toggle-switch__track .toggle-switch__knob,
.toggle-switch:has(.toggle-switch__input:checked) .toggle-switch__knob {
  transform: translateX(16px);
}
.toggle-switch__input:focus-visible ~ .toggle-switch__track {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ─── Tabs ──────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.tabs__tab:hover { color: var(--text-primary); }
.tabs__tab:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-focus);
}
.tabs__tab--active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.tabs__count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.tabs__tab--active .tabs__count { color: var(--text-secondary); }

/* ─── Equipment lifecycle action bar (P4-1 T4) ────────────────────────
   State-aware action zone on the EquipmentItem show page. Status pill
   + context-appropriate transition buttons. Calm-surface: button row
   reads as one composition with the status, not as 4 separate widgets. */
.equipment-item-status {
  margin-bottom: 12px;
}
.equipment-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.equipment-item-actions form { margin: 0; }
.equipment-item-actions .button {
  font-size: var(--text-sm);
}

/* ─── Participant form (P4-2) ────────────────────────────────────────
   Collapsible sections via <details>. Per design 1C: tracked + free-form
   gear default collapsed when empty, auto-expand when assigned. */
.participant-form__section {
  margin: 16px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.participant-form__section-summary {
  cursor: pointer;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--text-primary);
  user-select: none;
  list-style: none;
}
.participant-form__section-summary::-webkit-details-marker { display: none; }
.participant-form__section-summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  font-size: var(--text-2xs);
  color: var(--text-muted);
  transition: transform 150ms ease-out;
}
.participant-form__section[open] > .participant-form__section-summary::before {
  transform: rotate(90deg);
}
.participant-form__section-hint {
  margin-left: 8px;
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.participant-form__section-body {
  padding: 8px 16px 16px;
  border-top: 1px solid var(--border);
}
.participant-form__empty-hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 8px 0;
}

.participant-form__tracked-items {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.participant-form__tracked-item {
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  transition: background 100ms ease-out;
}
.participant-form__tracked-item:hover { background: var(--surface-alt); }
.participant-form__tracked-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  min-height: 44px;  /* WCAG AA touch target per design 6C */
}
.participant-form__tracked-input { margin: 0; }
.participant-form__tracked-identifier {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.participant-form__tracked-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  flex: 1;
}

/* ── Phase 6 Pattern Library Additions (R3-R14 + D1-D11) ─────────────────
   form_section, wizard_layout, hero_show, empty_state, loading_state.
   See plan §3 + DESIGN.md tokens for the visual grammar driving these. */

/* ── form_section ───────────────────────────────────────────────────── */
/* Section card — A5 forms spec: surface card, soft shadow, fixed padding.
   Sections stack with an 18px gap in the centered .form-page column. */
.form-section {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px 24px;
  margin-bottom: 18px;
}
/* The arena theme styles `form.form` (post/patch) with BT's `-mt-5 space-y-5`
   rhythm: a -1.25rem (-20px) top margin plus 20px between children. The
   NEGATIVE margin collapses with the .form-page's 2rem band gap (32 + -20 =
   12px), eating most of it — that's why forms looked like they lost the 2rem.
   The space-y also overrides our 18px section stack. We use form_section
   cards + the band's 2rem, not BT's form rhythm, so neutralize both. The
   selectors mirror the gem's so they tie on specificity and win on source
   order (patterns.css loads after the theme). */
form.form[method="post" i],
form.form[method="patch" i] { margin-top: 0; }
/* space-y-5 sets BOTH margins on later children (a Rails hidden CSRF input is
   the first child, so the first section counts as "later"): margin-top 20px
   AND margin-bottom: calc(1.25rem * --tw-space-y-reverse) = 0, which zeroes
   our 18px section stack. Restore both — flush top (band owns the 2rem gap),
   18px between/after sections. */
form.form > .form-section:not([hidden]) { margin-top: 0; margin-bottom: 18px; }
.form-section__header {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Muted icon — a quiet marker that keeps the section stack calm (A5 forms
   spec). The heading carries the weight in ink; the icon is NOT accent. */
.form-section__icon {
  color: var(--muted);
}
/* Title-case heading — General Sans, the DS CardTitle treatment chosen over
   the uppercase SectionLabel because each header carries a description. */
.form-section__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
/* Description — muted, at the card's left edge (under the icon), not indented
   under the title. */
.form-section__subtitle {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--muted);
  margin: 6px 0 0;
}
/* Header→field gap. The card-title-with-description variant breathes at 32px
   between the title/description and the first field; tighter without one. */
.form-section__body { margin-top: 20px; }
.form-section:has(.form-section__subtitle) .form-section__body { margin-top: 32px; }
@media (max-width: 640px) {
  .form-section { padding: 18px 16px 20px; }
}

/* ── wizard_layout ──────────────────────────────────────────────────── */
.wizard-layout {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 40px;
}
.wizard-layout__header { margin-bottom: 24px; }
.wizard-layout__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}
.wizard-layout__subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 4px 0 0;
}
.wizard-layout__stepper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
}
.wizard-layout__step {
  margin-bottom: 20px;
}
.wizard-layout__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.wizard-layout__actions-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wizard-layout__cancel,
.wizard-layout__back,
.wizard-layout__next {
  display: inline-flex;
  align-items: center;
  height: 44px;  /* WCAG AAA touch target */
  padding: 0 18px;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}
.wizard-layout__cancel {
  color: var(--text-muted);
}
.wizard-layout__cancel:hover { color: var(--text-primary); }
.wizard-layout__back {
  color: var(--text-primary);
  background: var(--surface);
  border-color: var(--border);
}
.wizard-layout__back:hover { background: var(--surface-alt); }
.wizard-layout__next {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
}
.wizard-layout__next:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
@media (max-width: 640px) {
  .wizard-layout { padding: 20px 16px; }
  .wizard-layout__stepper { padding: 14px; }
  /* Stack action bar vertically + full width on mobile. */
  .wizard-layout__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .wizard-layout__actions-right {
    flex-direction: column;
    align-items: stretch;
  }
  .wizard-layout__cancel,
  .wizard-layout__back,
  .wizard-layout__next {
    justify-content: center;
  }
}

/* ── hero_show ──────────────────────────────────────────────────────── */
/* Fills the diveos-content shell (1280 column + 48px gutters) so the
   header band can bleed full-width, like every other account page. */
.hero-show {
  display: block;
}
/* White header band — reuses .dv-page-band (full-bleed white + bleed math).
   This adds only the vertical rhythm: pull up to negate diveos-content's
   top padding (40px), breathe before the body. */
.hero-show__band {
  margin-top: calc(-1 * var(--shell-pad-top, 40px));
  margin-bottom: 2rem;
  padding-top: 26px;
  padding-bottom: 22px;
}
/* Page header band — form/settings/list header (reuses .dv-page-band +
   the .hero-show__breadcrumb/__crumb* classes for the crumb row). */
.page-header { margin-top: calc(-1 * var(--shell-pad-top, 40px)); padding-top: var(--space-8); padding-bottom: var(--space-6); }
.page-header .hero-show__breadcrumb { margin-bottom: 16px; }
.page-header__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.page-header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
@media (max-width: 640px) { .page-header { margin-top: -56px; } }
/* Form column under a page_header — centered, 640px (A5 forms spec): a
   field-led single column of section cards. Top gap from the global
   band→body rule below. */
.form-page { max-width: 640px; margin-inline: auto; }

/* Content-sized field rows — small numerics/codes group in a wrapping row at
   their natural width instead of stretching the column (A5 field-sizing). */
.field-row { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: flex-start; }
.field-w-116 { width: 116px; }
.field-w-168 { width: 168px; }
.field-w-116 :where(.diveos-input, input[type], select),
.field-w-168 :where(.diveos-input, input[type], select) { width: 100%; }
/* 50/50 split — equal columns for text PAIRS (names), not numerics. Field
   widths are contextual: compact for numbers/codes, split/full for text. */
.field-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; align-items: start; }
/* Cancel the stacked-field rhythm inside the split grid — the two fields are
   adjacent siblings, so `.diveos-field + .diveos-field { margin-top }` would
   push the 2nd one down and stagger the row. */
.field-split .diveos-field + .diveos-field { margin-top: 0; }
/* Inline unit suffix (e.g. % on a commission rate) — sits in the input, not
   as a hint below. */
.field-pct .diveos-field__input { position: relative; }
.field-pct .diveos-field__input::after {
  content: "%"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  font-size: var(--text-sm); color: var(--muted); pointer-events: none;
}
.field-pct .diveos-input { padding-right: 26px; }

/* DS Trix toolbar — make the rich-text controls read as part of the system:
   hairline-bordered button groups on surface, muted glyphs, accent-tint
   active, DS-radius. Kept consistently visible (no opacity dimming). */
trix-toolbar { opacity: 1; }
trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
trix-toolbar .trix-button-group {
  display: inline-flex;
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
trix-toolbar .trix-button {
  width: 32px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--hairline-2);
  border-radius: 0;
  background: var(--surface);
  color: var(--muted);
  font-size: 0;
}
trix-toolbar .trix-button-group .trix-button:first-child { border-left: 0; }
trix-toolbar .trix-button::before { opacity: 0.65; }
trix-toolbar .trix-button:not(:disabled):hover { background: var(--surface-alt); }
trix-toolbar .trix-button:not(:disabled):hover::before { opacity: 0.9; }
trix-toolbar .trix-button.trix-active {
  background: var(--accent-soft);
}
trix-toolbar .trix-button.trix-active::before { opacity: 1; }
trix-toolbar .trix-button:disabled::before { opacity: 0.25; }


.hero-show__back-row { margin-bottom: 18px; }
.hero-show__back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.hero-show__back-link:hover { text-decoration: underline; }
/* Name-led header inside the white band — title + status, meta line,
   actions. The band (.dv-page-band) owns the bottom hairline + bg. */
.hero-show__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.hero-show__identity {
  flex: 1;
  min-width: 0;
}
.hero-show__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}
.hero-show__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
/* Meta line — middot-separated id + facts. Mirrors booking's
   .bk-contact-line so entity headers read identically. */
.hero-show__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--muted);
}
.hero-show__meta-id {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.hero-show__meta-dot { font-size: var(--text-xl); line-height: 0; color: var(--muted-2); }
.hero-show__meta-item { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.hero-show__meta-item i,
.hero-show__meta-item svg { color: var(--muted-2); flex-shrink: 0; }
.hero-show__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.hero-show__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: 1px solid transparent;
}
.hero-show__action--primary {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
}
.hero-show__action--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.hero-show__action--secondary {
  color: var(--text-primary);
  background: var(--surface);
  border-color: var(--border);
}
.hero-show__action--secondary:hover { background: var(--surface-alt); }
.hero-show__action--danger {
  color: var(--cancelled);
  background: var(--surface);
  border-color: var(--hairline);
}
.hero-show__action--danger:hover { background: var(--cancelled-bg); border-color: var(--cancelled-border); }
/* button_to wraps each action in a form; keep it inline so the flex row
   doesn't break. */
.hero-show__action-form { display: inline-flex; margin: 0; }

/* Breadcrumb row — replaces the back link on catalog-detail headers. */
.hero-show__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: var(--text-sm);
}
.hero-show__crumb { color: var(--muted); text-decoration: none; }
.hero-show__crumb:hover { color: var(--ink); }
.hero-show__crumb--current { color: var(--ink); font-weight: 600; }
.hero-show__crumb-sep { display: inline-flex; color: var(--muted-2); }

/* Eyebrow pill — category/type marker above the title. */
.hero-show__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  border: 1px solid var(--hairline);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-show__eyebrow svg { color: var(--muted-2); }

/* Subtitle helper line under the title. */
.hero-show__subtitle {
  margin: 8px 0 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* Rail fact card — stacked label/value rows with hairline separators. */
.hero-rail-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 2px 20px;
}
.hero-rail-stat {
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline-2);
}
.hero-rail-stat:last-child { border-bottom: 0; }
.hero-rail-stat__lbl {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-rail-stat__val {
  margin-top: 6px;
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}
.hero-rail-stat__unit { font-size: var(--text-sm); font-weight: 500; color: var(--muted); margin-left: 2px; }

/* Content card — body section with an icon + title head. */
.hero-content-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
}
.hero-content-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.hero-content-card__title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.hero-content-card__body {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink);
}
.hero-show__body--one-col .hero-show__main { width: 100%; }
.hero-show__body--two-col {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
}
.hero-show__rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 1024px) {
  .hero-show__body--two-col {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .hero-show__band { margin-top: -56px; }
  .hero-show__header {
    flex-direction: column;
    gap: 16px;
  }
  .hero-show__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .hero-show__action { justify-content: center; }
}

/* ── empty_state ────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 40px 16px;
}
.empty-state__icon {
  color: var(--text-muted);
  margin: 0 auto 12px;
  display: block;
}
.empty-state__message {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}
.empty-state__actions {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.empty-state__action {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: 1px solid transparent;
}
.empty-state__action--primary {
  color: var(--accent);
  background: transparent;
  /* Inline link form when single action (matches conforming surfaces);
     becomes proper button when paired with a secondary (handled by
     `.empty-state__actions:has(.empty-state__action--secondary)`). */
}
.empty-state__action--primary:hover { text-decoration: underline; }
.empty-state__actions:has(.empty-state__action--secondary) .empty-state__action--primary {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
}
.empty-state__actions:has(.empty-state__action--secondary) .empty-state__action--primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  text-decoration: none;
}
.empty-state__action--secondary {
  color: var(--text-primary);
  background: var(--surface);
  border-color: var(--border);
}
.empty-state__action--secondary:hover { background: var(--surface-alt); }

/* ── loading_state ──────────────────────────────────────────────────── */
.loading-state {
  padding: 12px 0;
}
.loading-state__row {
  height: 48px;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  animation: loading-state-pulse 1.6s ease-in-out infinite;
}
@keyframes loading-state-pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .loading-state__row { animation: none; opacity: 0.8; }
}