/* ─────────────────────────────────────────────────────────────────────
   Contact Book V3 — Wave 1 visual port
   Mockup: src/mockups/contact-book-v3.html (2026-05-24)
   Scope: #view-all only. All classes prefixed `cb-` to avoid collisions.
   Tokens: variables-v2.css :root[data-v2="1"]. Falls back gracefully.
   ───────────────────────────────────────────────────────────────────── */

/* ── Local token aliases (mirror mockup naming, route to v2 tokens) ── */
#view-all {
  --cb-bg-body: oklch(0.98 0.005 200);
  --cb-bg-surface: #FFFFFF;
  --cb-bg-subtle: oklch(0.97 0.005 200);
  --cb-bg-tinted: oklch(0.95 0.006 200);
  --cb-border: oklch(0.92 0.005 200);
  --cb-border-soft: oklch(0.94 0.005 200);
  --cb-border-strong: oklch(0.86 0.005 200);
  --cb-text: oklch(0.20 0.010 200);
  --cb-text-muted: oklch(0.45 0.008 200);
  --cb-text-faint: oklch(0.55 0.008 200);
  --cb-teal: #298084;
  --cb-teal-tint: oklch(0.55 0.08 200 / 0.08);
  --cb-teal-tint-strong: oklch(0.55 0.08 200 / 0.16);
  --cb-brass: #CC9C42;
  /* Wave 3.5 #5 — money color now routes through Scout's canonical token
     (`var(--color-money)` in variables-v2.css resolves to oklch(0.55 0.13 155)
     ≈ #0A6B47). v2-OFF fallback uses the same hex per variables.css. */
  --cb-money: var(--color-money, #0A6B47);
  --cb-amber-warning: oklch(0.55 0.18 55);
  --cb-amber-warning-bg: oklch(0.97 0.04 60);
  --cb-red-danger: oklch(0.55 0.22 27);
  --cb-red-danger-bg: oklch(0.95 0.03 27);
  --cb-green-success: oklch(0.48 0.13 155); /* deepened from 0.55: 3.98:1 -> 5.29:1 on -bg (WCAG 2.1 SC 1.4.3) */
  --cb-green-success-bg: oklch(0.95 0.03 155);
  /* Wave 5 FIX-12: deepen blue/brass so foreground passes WCAG 2.1 AA
     (4.5:1 normal text) against the tinted backgrounds. Prior values
     measured at ~4.23 (blue) and ~4.24 (brass) — fail by ~0.3. */
  --cb-blue-info: oklch(0.48 0.12 230);
  --cb-blue-info-bg: oklch(0.96 0.03 230);
  --cb-brass-arrival: oklch(0.48 0.12 80);
  --cb-brass-arrival-bg: oklch(0.95 0.04 80);
  /* Deepen teal one shade for active page-size / filter chip contrast. */
  --cb-teal-deep: oklch(0.50 0.09 200);
}

/* View root override — drop legacy padding so flush directory chrome.
   Wave 3 P2-2 fix: use `height: 100%` (not min-height) so the inner
   flex layout constrains the table to viewport, making `.cb-tbl-wrap`
   the actual scroll container and keeping `.cb-pagination` always
   pinned to the fold via sticky bottom inside that container.
   2026-05-24 P0 FIX: scope to `.active` so this view doesn't leak chrome
   into other views (Project Area, Analytics, etc.) when Contact Book is
   not the active surface. The `.view{display:none}` base rule was being
   overridden because this selector had no `.active` qualifier. */
#view-all.active {
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--cb-bg-body);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* ── PAGE HERO — Newsreader italic title + meta KPI line (Analytics pattern) ──── */
#view-all .cb-page-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 28px 8px;
  border-bottom: 1px solid var(--cb-border);
  background: var(--cb-bg-surface);
}
#view-all .cb-page-hero-titles { min-width: 0; }
#view-all .cb-page-hero-title {
  font-family: 'Newsreader', 'Georgia', serif;
  font-style: italic;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--cb-text);
  margin: 0;
}
#view-all .cb-page-hero-meta {
  margin: 6px 0 0;
  font-family: 'Geist Sans', sans-serif;
  font-size: 13px;
  color: var(--cb-text-muted);
  line-height: 1.5;
}
#view-all .cb-page-hero-meta .k-val {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cb-text);
}
#view-all .cb-page-hero-meta .cb-meta-sep {
  margin: 0 6px;
  color: var(--cb-text-faint);
}

/* ── SAVED VIEW TABS (44px) ──────────────────────────────────────── */
#view-all .cb-view-tabs {
  display: flex;
  align-items: stretch;
  height: 44px;
  padding: 0 28px;
  border-bottom: 1px solid var(--cb-border);
  background: var(--cb-bg-surface);
  gap: 4px;
}
#view-all .cb-view-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-size: 12px;
  color: var(--cb-text-muted);
  cursor: pointer;
  font-weight: 500;
  transition: color .12s, border-color .12s;
  margin-bottom: -1px;
}
#view-all .cb-view-tab:hover { color: var(--cb-text); }
#view-all .cb-view-tab.is-active {
  color: var(--cb-teal);
  border-bottom-color: var(--cb-teal);
  font-weight: 600;
}
#view-all .cb-view-tab .count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--cb-text-faint);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
#view-all .cb-view-tab.is-active .count { color: var(--cb-teal); opacity: 0.7; }
#view-all .cb-view-tab-add {
  color: var(--cb-text-faint);
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
#view-all .cb-view-tab-add:hover { color: var(--cb-text); }
#view-all .cb-view-tab-add svg { width: 12px; height: 12px; }

/* ── FILTER BAR (48px) ──────────────────────────────────────────── */
#view-all .cb-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 28px;
  height: 48px;
  border-bottom: 1px solid var(--cb-border);
  background: var(--cb-bg-surface);
}
#view-all .cb-filter-search {
  flex: 0 0 280px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px;
  background: var(--cb-bg-body);
  border: 1px solid var(--cb-border);
  border-radius: 6px;
  transition: border-color .12s, box-shadow .12s;
}
#view-all .cb-filter-search:focus-within {
  border-color: var(--cb-teal);
  background: var(--cb-bg-surface);
  box-shadow: 0 0 0 2px var(--cb-teal-tint);
}
#view-all .cb-filter-search svg {
  width: 14px;
  height: 14px;
  color: var(--cb-text-faint);
  flex-shrink: 0;
}
#view-all .cb-filter-search input {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: var(--cb-text);
  outline: none;
  min-width: 0;
}
#view-all .cb-filter-search input::placeholder { color: var(--cb-text-faint); }
#view-all .cb-filter-search kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--cb-text-faint);
  background: var(--cb-bg-surface);
  border: 1px solid var(--cb-border);
  border-radius: 4px;
  padding: 0 4px;
}
#view-all .cb-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  background: var(--cb-bg-body);
  border: 1px solid var(--cb-border);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  color: var(--cb-text);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
#view-all .cb-filter-btn:hover {
  border-color: var(--cb-border-strong);
  background: var(--cb-bg-surface);
}
#view-all .cb-filter-btn svg.chev {
  width: 10px;
  height: 10px;
  color: var(--cb-text-faint);
}
#view-all .cb-filter-btn .filter-label { color: var(--cb-text-faint); }
#view-all .cb-filter-btn.is-active {
  border-color: var(--cb-teal);
  background: var(--cb-teal-tint);
  /* Wave 5 FIX-12: deepened teal so foreground passes WCAG AA on teal-tint bg. */
  color: var(--cb-teal-deep);
}
#view-all .cb-filter-btn.is-active .filter-label { color: var(--cb-teal-deep); opacity: 0.7; }
#view-all .cb-filter-spacer { flex: 1; }
#view-all .cb-filter-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: var(--cb-teal);
  color: #FFFFFF;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
#view-all .cb-filter-cta:hover { background: oklch(0.48 0.09 200); }
#view-all .cb-filter-cta svg { width: 12px; height: 12px; }
#view-all .cb-filter-export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--cb-border);
  border-radius: 6px;
  color: var(--cb-text-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
#view-all .cb-filter-export:hover {
  border-color: var(--cb-border-strong);
  color: var(--cb-text);
}
#view-all .cb-filter-export svg { width: 12px; height: 12px; }

/* ── LAYOUT: main table area + right detail panel ────────────────── */
#view-all .cb-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  background: var(--cb-bg-body);
}
#view-all .cb-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#view-all .cb-tbl-wrap {
  flex: 1;
  background: var(--cb-bg-surface);
  overflow-y: auto;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
}

/* ── TABLE ───────────────────────────────────────────────────────── */
#view-all table.cb-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
#view-all .cb-tbl thead {
  background: var(--cb-bg-tinted);
  position: sticky;
  top: 0;
  z-index: 5;
}
#view-all .cb-tbl thead th {
  padding: 8px 12px;
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cb-text-muted);
  border-bottom: 1px solid var(--cb-border);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  height: 32px;
}
#view-all .cb-tbl thead th.is-sorted { color: var(--cb-text); }
#view-all .cb-tbl thead th .sort-ind {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  opacity: 0;
}
#view-all .cb-tbl thead th.is-sorted .sort-ind { opacity: 1; color: var(--cb-teal); }
#view-all .cb-tbl thead th .sort-ind svg { width: 10px; height: 10px; }
#view-all .cb-tbl thead th.cb-col-num { text-align: right; }
#view-all .cb-tbl thead th.cb-col-select {
  width: 36px;
  padding: 0 0 0 16px;
  cursor: default;
}
#view-all .cb-tbl thead th.cb-col-phone { width: 140px; }
/* Wave 3.7 #1+#3 — Assets column (renamed from Owns/Ownerships).
   Header left-aligned label, cell values center-aligned per #3 spec. */
#view-all .cb-tbl thead th.cb-col-assets { width: 72px; text-align: center; }
/* Wave 6 P2-I: deleted dead width rules for .cb-col-nra/-dnra/-project/
   -status/-offer — never set on <th> in current render.js. Column widths
   come from the <colgroup> definition. */
#view-all .cb-tbl tbody td:nth-of-type(8) { text-align: center; }

/* Wave 3.6 #3 — Lead-temp icon column, between Select and Owner.
   Header is intentionally blank (label conveyed via icon + tooltip);
   cell is icon-only (~14px Lucide stroke) horizontally centered.
   Hot uses amber-warning token, Cold uses blue-info token (canonical
   cold-lead color, parity with `.omv2-chip-lead-cold` in owner-modal-v2.css). */
#view-all .cb-tbl thead th.cb-col-lead {
  width: 36px;
  padding: 0;
  text-align: center;
  cursor: pointer;
}
#view-all .cb-tbl tbody td.cb-col-lead {
  width: 36px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}
#view-all .cb-lead-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
}
#view-all .cb-lead-ico svg { width: 14px; height: 14px; }
#view-all .cb-lead-ico-hot {
  color: var(--cb-amber-warning);
  background: var(--cb-amber-warning-bg);
}
#view-all .cb-lead-ico-cold {
  color: var(--cb-blue-info);
  background: var(--cb-blue-info-bg);
}

/* Wave 3.5 #1 — Phone column cell.
   Mono + tabular-nums to match other numeric/data columns; muted-em-dash
   fallback when owner has no phone on file. */
#view-all .cb-tbl tbody td.cb-col-phone {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--cb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#view-all .cb-tbl tbody td.cb-col-phone .cb-muted,
#view-all .cb-tbl tbody td.cb-num .cb-muted {
  color: var(--cb-text-faint);
}

/* Wave 3.7 #3 — Assets column (renamed from Ownerships/Owns).
   Override .cb-num's text-align:right with center alignment for this column
   only; keep mono/tabular typography from .cb-num. */
#view-all .cb-tbl tbody td.cb-col-assets {
  text-align: center;
}

/* Parent row */
#view-all .cb-tbl tbody tr {
  cursor: pointer;
  transition: background .12s;
  height: 36px;
}
#view-all .cb-tbl tbody tr.cb-tr-parent:hover {
  background: oklch(0.97 0.005 200);
}
#view-all .cb-tbl tbody tr.cb-tr-parent.is-selected {
  background: var(--cb-teal-tint);
}
#view-all .cb-tbl tbody tr.cb-tr-parent.is-selected:hover {
  background: var(--cb-teal-tint-strong);
}
#view-all .cb-tbl tbody tr.cb-tr-parent.is-keyboard-focused {
  background: var(--cb-teal-tint);
  outline: 2px solid var(--cb-teal);
  outline-offset: -2px;
}
/* Wave 3 P2-1 fix: trim td vertical padding 8px → 6px to bring row
   height back into 48-52px R7.4 canonical band. With 2-line owner
   cell (~32px content + 6+6 = ~44px → 50px with line-height). */
#view-all .cb-tbl tbody td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--cb-border-soft);
  vertical-align: middle;
  overflow: hidden;
}
#view-all .cb-tbl tbody td.cb-col-select {
  padding: 0 0 0 16px;
}

/* Checkbox */
#view-all .cb-checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid var(--cb-border-strong);
  border-radius: 4px;
  background: var(--cb-bg-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  flex-shrink: 0;
  vertical-align: middle;
}
#view-all .cb-checkbox:hover { border-color: var(--cb-teal); }
#view-all .cb-checkbox.is-checked,
#view-all .cb-checkbox.is-indeterminate {
  background: var(--cb-teal);
  border-color: var(--cb-teal);
}
#view-all .cb-checkbox.is-checked svg {
  width: 10px;
  height: 10px;
  color: #FFFFFF;
  display: inline;
}
#view-all .cb-checkbox.is-indeterminate::after {
  content: '';
  width: 8px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 1px;
}
#view-all .cb-checkbox svg { display: none; }

/* Owner cell */
#view-all .cb-owner-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
#view-all .cb-owner-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
#view-all .cb-owner-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--cb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
#view-all .cb-owner-sub {
  font-size: 11px;
  color: var(--cb-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'JetBrains Mono', monospace;
}

/* Wave 6 P2-I: deleted dead `.cb-lead` / `.cb-hot` / `.cb-cold` rules —
   replaced in Wave 3.6 by the icon-only `.cb-lead-ico` / `-hot` / `-cold`
   pattern defined above. No element uses the legacy classes. */

/* Status pill */
#view-all .cb-status {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
#view-all .cb-status.cb-status-new {
  background: oklch(0.94 0.005 200);
  color: var(--cb-text-muted);
}
#view-all .cb-status.cb-status-answered {
  background: var(--cb-green-success-bg);
  color: var(--cb-green-success);
}
#view-all .cb-status.cb-status-no-answer {
  background: var(--cb-amber-warning-bg);
  color: var(--cb-amber-warning);
}
#view-all .cb-status.cb-status-callback {
  background: var(--cb-teal-tint);
  color: var(--cb-teal);
}
#view-all .cb-status.cb-status-under-psa,
#view-all .cb-status.cb-status-under-neg {
  background: var(--cb-brass-arrival-bg);
  color: var(--cb-brass-arrival);
}
#view-all .cb-status.cb-status-completed {
  background: var(--cb-green-success-bg);
  color: var(--cb-green-success);
  font-weight: 600;
}
#view-all .cb-status.cb-status-dnc {
  background: var(--cb-red-danger-bg);
  color: var(--cb-red-danger);
  font-weight: 600;
}
#view-all .cb-status.cb-status-deceased {
  background: var(--cb-red-danger-bg);
  color: var(--cb-red-danger);
  font-weight: 500;
  opacity: 0.7;
}
/* CVC-01: Sold is amber (mirrors the owners-table SOLD pill), distinct from the
   red Deceased treatment — a sold-out owner is not a dead one. */
#view-all .cb-status.cb-status-sold {
  background: var(--cb-amber-warning-bg);
  color: var(--cb-amber-warning);
  font-weight: 500;
  opacity: 0.7;
}
#view-all .cb-status.cb-status-skip {
  background: oklch(0.94 0.005 200);
  color: var(--cb-text-muted);
}

/* Project tag — Wave 3.5 #4: project name (top) + client name (sub-line muted).
   Two-line layout keeps row in R7.4 48-52px band because td padding is 6px and
   the owner cell is already two-line; matching height keeps rhythm aligned. */
#view-all .cb-proj {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12px;
  color: var(--cb-text);
  min-width: 0;
  overflow: hidden;
}
#view-all .cb-proj-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
#view-all .cb-proj-client {
  font-size: 11px;
  color: var(--cb-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'JetBrains Mono', monospace;
}

/* Numeric columns */
#view-all .cb-num {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--cb-text);
  white-space: nowrap;
}
#view-all .cb-num.cb-money {
  color: var(--cb-money);
  font-weight: 600;
}
#view-all .cb-num.cb-muted {
  color: var(--cb-text-muted);
}

/* ── PAGINATION ROW ──────────────────────────────────────────────── */
/* Wave 3 P2-2 fix: make pagination sticky to the bottom of the table
   wrap so it stays visible at default 25 perPage at 1440x900. */
#view-all .cb-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 28px;
  border-top: 1px solid var(--cb-border);
  background: var(--cb-bg-surface);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--cb-text-muted);
  position: sticky;
  bottom: 0;
  z-index: 6;
}
#view-all .cb-page-size-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#view-all .cb-page-size-select .lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cb-text-faint);
}
#view-all .cb-page-size-group {
  display: inline-flex;
  border: 1px solid var(--cb-border);
  border-radius: 4px;
  overflow: hidden;
}
#view-all .cb-page-size-opt {
  background: transparent;
  border: 0;
  height: 24px;
  padding: 0 10px;
  font: inherit;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--cb-text-muted);
  cursor: pointer;
  border-right: 1px solid var(--cb-border);
  font-variant-numeric: tabular-nums;
}
#view-all .cb-page-size-opt:last-child { border-right: 0; }
#view-all .cb-page-size-opt:hover {
  background: var(--cb-bg-subtle);
  color: var(--cb-text);
}
#view-all .cb-page-size-opt.is-active {
  background: var(--cb-teal-tint);
  /* Wave 5 FIX-12: deepened teal so foreground passes WCAG AA on teal-tint bg. */
  color: var(--cb-teal-deep);
  font-weight: 600;
}
#view-all .cb-page-count {
  font-variant-numeric: tabular-nums;
  color: var(--cb-text-muted);
}
#view-all .cb-page-count b {
  color: var(--cb-text);
  font-weight: 600;
}

/* ── RIGHT DETAIL PANEL ──────────────────────────────────────────── */
/* Wave 3.7 #2 — panel slides between width 0 (collapsed default) and 320px
   (expanded when a row is selected). No 40px placeholder rail; the table
   gets the full layout width when no row is selected. Width transition
   (300ms) is the slide-in/out animation; display:none can't transition. */
#view-all .cb-detail-panel {
  width: 320px;
  background: var(--cb-bg-surface);
  border-left: 1px solid var(--cb-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
  transition: width .3s ease;
}
#view-all .cb-detail-panel.is-collapsed {
  width: 0;
  padding: 0;
  border-left: 0;
  overflow: hidden;
}

/* Wave 3.7 #4 — Phone column gets more breathing room when the detail
   panel is collapsed (default state). When the panel opens, Phone
   narrows back to 140px so the rest of the table can absorb the 320px
   panel takeover. The width is enforced on both <th> (CSS) and <colgroup>
   <col> (rendered inline). Layout class toggled on #view-all by JS. */
#view-all:not(.has-detail-open) .cb-tbl thead th.cb-col-phone { width: 200px; }
#view-all.has-detail-open .cb-tbl thead th.cb-col-phone { width: 140px; }

/* Expanded panel header */
#view-all .cb-detail-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--cb-border-soft);
}
#view-all .cb-detail-hdr-main { flex: 1; min-width: 0; }
/* Wave 5 FIX-6: title uses Geist Sans 600 (Newsreader ≥18px rule).
   All styling lives here — JS no longer carries inline font-family. */
#view-all .cb-detail-title {
  font-family: 'Geist Sans', sans-serif;
  font-style: normal;
  font-size: 15px;
  font-weight: 600;
  color: var(--cb-text);
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}
#view-all .cb-detail-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--cb-text-muted);
  letter-spacing: 0.04em;
}
#view-all .cb-detail-hdr-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
#view-all .cb-detail-hdr-btn,
#view-all .cb-detail-close {
  width: 24px;
  height: 24px;
  background: transparent;
  border: 0;
  color: var(--cb-text-muted);
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#view-all .cb-detail-hdr-btn:hover,
#view-all .cb-detail-close:hover {
  background: var(--cb-bg-subtle);
  color: var(--cb-text);
}
#view-all .cb-detail-hdr-btn svg,
#view-all .cb-detail-close svg { width: 14px; height: 14px; }

#view-all .cb-detail-status-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 3px;
  vertical-align: 2px;
}
#view-all .cb-detail-status-pill.no-answer {
  background: var(--cb-amber-warning-bg);
  color: var(--cb-amber-warning);
}
#view-all .cb-detail-status-pill.answered {
  background: var(--cb-green-success-bg);
  color: var(--cb-green-success);
}
#view-all .cb-detail-status-pill.callback {
  background: var(--cb-teal-tint);
  color: var(--cb-teal);
}
#view-all .cb-detail-status-pill.under-psa {
  background: var(--cb-brass-arrival-bg);
  color: var(--cb-brass-arrival);
}
/* Wave 6 P2-J: distinct variants for `completed` + `dnc` instead of
   collapsing to answered/no-answer in _renderDetailPanel. Aligns the
   panel pill semantics with the row pill (.cb-status-completed, .-dnc). */
#view-all .cb-detail-status-pill.completed {
  background: var(--cb-green-success-bg);
  color: var(--cb-green-success);
}
#view-all .cb-detail-status-pill.dnc {
  background: var(--cb-red-danger-bg);
  color: var(--cb-red-danger);
}

/* Detail section */
#view-all .cb-detail-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--cb-border-soft);
}
#view-all .cb-detail-section:last-child { border-bottom: 0; }
#view-all .cb-detail-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cb-text-faint);
  margin-bottom: 10px;
}
#view-all .cb-detail-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  font-size: 12px;
  margin: 0;
}
#view-all .cb-detail-grid dt {
  color: var(--cb-text-faint);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-top: 2px;
}
#view-all .cb-detail-grid dd {
  margin: 0;
  color: var(--cb-text);
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
#view-all .cb-detail-grid dd.geist {
  font-family: 'Geist Sans', sans-serif; /* Wave 5 FIX-7: registered family is Geist Sans */
  line-height: 1.4;
}
/* Wave 6 P2-I: deleted dead `.cb-detail-grid dd.money` rule — no dd in
   _renderDetailPanel carries the `.money` class. Money values render via
   `.cb-asset-val` inside `.cb-detail-asset` instead. */
#view-all .cb-detail-assets {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#view-all .cb-detail-asset.two-line {
  display: block;
  padding: 8px 10px;
  background: var(--cb-bg-subtle);
  border-radius: 4px;
}
#view-all .cb-asset-row1 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--cb-text);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-all .cb-asset-row2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--cb-text-muted);
}
#view-all .cb-asset-row2 .cb-asset-val {
  color: var(--cb-money);
  font-weight: 600;
}
#view-all .cb-detail-call {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 11px;
  color: var(--cb-text-muted);
  font-family: 'JetBrains Mono', monospace;
}
#view-all .cb-detail-call:not(:last-child) {
  border-bottom: 1px solid var(--cb-border-soft);
}
#view-all .cb-c-date {
  font-weight: 500;
  color: var(--cb-text);
}
#view-all .cb-c-outcome { flex: 1; }
#view-all .cb-c-outcome.cb-c-ans { color: var(--cb-green-success); }
#view-all .cb-c-outcome.cb-c-no  { color: var(--cb-amber-warning); }

/* Primary actions */
#view-all .cb-detail-actions {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
}
#view-all .cb-detail-actions-primary {
  padding: 12px 20px;
  border-bottom: 1px solid var(--cb-border-soft);
}
#view-all .cb-detail-action {
  flex: 1;
  height: 32px;
  background: var(--cb-teal-tint);
  border: 1px solid var(--cb-teal-tint-strong);
  color: var(--cb-teal);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#view-all .cb-detail-action.primary {
  background: var(--cb-teal);
  border-color: var(--cb-teal);
  color: #FFFFFF;
}
#view-all .cb-detail-action svg { width: 12px; height: 12px; }

/* ── Empty / loading states preserved with breathing room ────────── */
#view-all .cb-tbl-empty {
  padding: 48px 20px;
  text-align: center;
  flex: 1;
}
#view-all .cb-tbl-empty-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--cb-text);
  margin-bottom: 4px;
}
#view-all .cb-tbl-empty-sub {
  font-size: 11px;
  color: var(--cb-text-muted);
}

/* ─────────────────────────────────────────────────────────────────────
   Wave 3: bulk-bar, filter popover, panel polish
   ───────────────────────────────────────────────────────────────────── */

/* Bulk-action bar — replaces filter bar in-place when rows are checked */
#view-all .cb-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px;
  height: 48px;
  background: var(--cb-teal-tint);
  border-bottom: 1px solid var(--cb-teal-tint-strong);
  color: var(--cb-teal);
}
#view-all .cb-bulk-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--cb-teal);
}
#view-all .cb-bulk-count b {
  color: var(--cb-teal);
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}
#view-all .cb-bulk-divider {
  width: 1px;
  height: 16px;
  background: var(--cb-teal-tint-strong);
}
#view-all .cb-bulk-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  color: var(--cb-teal);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}
#view-all .cb-bulk-action:hover { background: var(--cb-teal-tint-strong); }
#view-all .cb-bulk-action svg { width: 12px; height: 12px; opacity: 0.85; }
#view-all .cb-bulk-action.is-danger { color: var(--cb-red-danger); }
#view-all .cb-bulk-action.is-danger:hover {
  background: var(--cb-red-danger-bg);
  opacity: 1;
}
#view-all .cb-bulk-spacer { flex: 1; }
#view-all .cb-bulk-close {
  width: 24px;
  height: 24px;
  background: transparent;
  border: 0;
  color: var(--cb-teal);
  opacity: 0.6;
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#view-all .cb-bulk-close:hover {
  opacity: 1;
  background: var(--cb-teal-tint-strong);
}
#view-all .cb-bulk-close svg { width: 12px; height: 12px; }

/* Filter popover (Status / Project / Lead chips open this) */
.cb-filter-pop {
  position: fixed;
  background: #FFFFFF;
  border: 1px solid oklch(0.86 0.005 200);
  border-radius: 6px;
  box-shadow: 0 16px 48px oklch(0.20 0.010 200 / 0.18);
  padding: 4px;
  z-index: 1000;
  max-height: 360px;
  overflow-y: auto;
  min-width: 200px;
  font-family: 'Geist Sans', sans-serif; /* Wave 5 FIX-7: registered family is Geist Sans */
  font-size: 12px;
}
.cb-filter-pop-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: oklch(0.20 0.010 200);
  cursor: pointer;
  border-radius: 4px;
  text-align: left;
}
.cb-filter-pop-opt:hover { background: oklch(0.97 0.005 200); }
.cb-filter-pop-opt.is-active {
  background: oklch(0.55 0.08 200 / 0.08);
  color: #298084;
  font-weight: 600;
}
.cb-filter-pop-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: oklch(0.55 0.008 200);
  font-variant-numeric: tabular-nums;
}

/* Detail panel — italic heading + status pill alignment polish */
/* Wave 6 P2-I: dropped `.cb-detail-rail-btn:focus-visible` from the
   selector list — the rail was removed in Wave 3.7. */
#view-all .cb-detail-hdr-btn:focus-visible,
#view-all .cb-detail-close:focus-visible,
#view-all .cb-detail-action:focus-visible {
  outline: 2px solid var(--cb-teal);
  outline-offset: 2px;
}

/* Disable text-cursor on table headers (they're sort buttons via data-action) */
#view-all .cb-tbl thead th { user-select: none; }

/* ─────────────────────────────────────────────────────────────────────
   Wave 5 FIX-13: Responsive breakpoints
   Tablet (≤1024px): wrap hero / tabs / filter / bulk bars; hide NRA + Avg cols
   Mobile (≤768px):  full-width search; detail panel becomes full-viewport overlay
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #view-all .cb-page-hero,
  #view-all .cb-view-tabs,
  #view-all .cb-filter-bar,
  #view-all .cb-bulk-bar {
    flex-wrap: wrap;
    row-gap: 8px;
    padding-bottom: 12px;
    height: auto;
    min-height: 48px;
  }
  #view-all .cb-view-tabs { padding-top: 6px; }
  /* Hide secondary numeric columns; keep Owner / Phone / Status / Total.
     Wave 6 P2-I: dropped dead `.cb-col-nra`/`.cb-col-dnra` selectors —
     columns are addressed by nth-child position now. */
  #view-all .cb-tbl thead th:nth-child(8),
  #view-all .cb-tbl tbody td:nth-child(8),
  #view-all .cb-tbl thead th:nth-child(9),
  #view-all .cb-tbl tbody td:nth-child(9),
  #view-all .cb-tbl colgroup col:nth-child(8),
  #view-all .cb-tbl colgroup col:nth-child(9) {
    display: none;
  }
  /* Wave 7 production hardening: at 1024px, fixed-width columns total ~746px,
     leaving the Owner column (no width set) squeezed to ~38px → name truncates
     to "Y. M." (broken UX). Override colgroup widths inline to fit content area
     and give Owner a usable minimum. table-layout:fixed honors the col widths,
     so we override them here. !important is required because the col widths
     are set via inline style attributes in _buildContactBookV3Table (render.js). */
  #view-all .cb-tbl colgroup col:nth-child(4) { width: 140px !important; } /* Phone */
  #view-all .cb-tbl colgroup col:nth-child(5) { width: 130px !important; } /* Project */
  #view-all .cb-tbl colgroup col:nth-child(6) { width: 100px !important; } /* Status */
  #view-all .cb-tbl colgroup col:nth-child(7) { width: 56px !important; }  /* Assets */
  #view-all .cb-tbl colgroup col:nth-child(10) { width: 96px !important; }  /* Total offer */
}

@media (max-width: 768px) {
  /* Full-width search input on mobile */
  #view-all .cb-filter-search { flex: 1 1 100%; }
  /* Detail panel becomes a full-screen overlay */
  #view-all .cb-detail-panel {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 50;
    border-left: 0;
  }
  #view-all .cb-detail-panel.is-collapsed {
    width: 0;
    height: 0;
    inset: auto;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Wave 6 P2-D: Lead column header icon — visible flame at muted color so
   the column communicates its purpose without needing text. aria-label
   on the <th> already carries the SR-visible name.
   ───────────────────────────────────────────────────────────────────── */
#view-all .cb-col-lead-hdr-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cb-text-faint);
  vertical-align: middle;
}
#view-all .cb-col-lead-hdr-icon svg {
  width: 14px;
  height: 14px;
}
#view-all .cb-tbl thead th.cb-col-lead.is-sorted .cb-col-lead-hdr-icon {
  color: var(--cb-teal-deep);
}

/* ─────────────────────────────────────────────────────────────────────
   Wave 6 P2-F: thead scroll shadow — when .cb-tbl-wrap has scrollTop > 0
   the contact-book-v3.js wires `.is-scrolled` on the wrap. CSS adds a
   1px hairline shadow under the sticky thead to separate from rows.
   ───────────────────────────────────────────────────────────────────── */
#view-all .cb-tbl-wrap.is-scrolled .cb-tbl thead {
  box-shadow: 0 1px 0 var(--cb-border-strong);
}

/* ─────────────────────────────────────────────────────────────────────
   Wave 6 P2-A: Snooze + Set callback modal — uses .modal-frame + .modal-
   backdrop primitives from components.css (R6.13). The modal mounts to
   document.body so it can't inherit #view-all-scoped tokens; we use the
   raw oklch / hex values that match those tokens directly.
   ───────────────────────────────────────────────────────────────────── */
#cb-bulk-modal .cb-snooze-chip {
  height: 30px;
  padding: 0 14px;
  background: oklch(0.98 0.005 200); /* matches --cb-bg-body */
  border: 1px solid oklch(0.92 0.005 200); /* --cb-border */
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  color: oklch(0.20 0.010 200); /* --cb-text */
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
#cb-bulk-modal .cb-snooze-chip:hover {
  border-color: oklch(0.86 0.005 200); /* --cb-border-strong */
  background: #FFFFFF;
}
#cb-bulk-modal .cb-snooze-chip.is-active {
  border-color: #298084; /* --cb-teal */
  background: oklch(0.55 0.08 200 / 0.08); /* --cb-teal-tint */
  color: oklch(0.50 0.09 200); /* --cb-teal-deep */
  font-weight: 600;
}
#cb-bulk-modal .modal-frame-body p { margin: 0 0 12px; font-size: 13px; color: oklch(0.20 0.010 200); line-height: 1.5; }
#cb-bulk-modal input[type="date"],
#cb-bulk-modal input[type="number"] {
  font-family: 'Geist Sans', sans-serif;
}
#cb-bulk-modal .btn-secondary {
  height: 32px;
  padding: 0 14px;
  background: #FFFFFF;
  border: 1px solid oklch(0.86 0.005 200);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: oklch(0.20 0.010 200);
  cursor: pointer;
}
#cb-bulk-modal .btn-secondary:hover { background: oklch(0.97 0.005 200); }
#cb-bulk-modal .btn-primary {
  height: 32px;
  padding: 0 16px;
  background: #298084;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
  cursor: pointer;
}
#cb-bulk-modal .btn-primary:hover { background: oklch(0.48 0.09 200); }