/* ══════════════════════════════════════════════════════════════
   DASHBOARD.CSS — Scout Command Center
   Single source of truth for #view-dashboard.
   Loads LAST. Scoped under #view-dashboard so nothing leaks.
   Design: Cool navy accent, white cards, light gray ground.
   Amber reserved for resume badge + overdue only.
══════════════════════════════════════════════════════════════ */

/* ── 1. Foundation ──────────────────────────────────────────── */
/* 2026-05-24: background:transparent so #view-dashboard inherits
   .main's bg color uniformly. padding:0 !important was the original
   defense against ancestor CSS; dropped here so the new 36px
   horizontal padding-gutter (line 3906 area) takes effect. */
#view-dashboard {
  background: transparent;
  min-height: 100vh;
  font-family: inherit;
  color: var(--text);
  padding: 0;
  margin: 0;
}

#view-dashboard.active {
  display: flex;
  flex-direction: column;
}

#view-dashboard .view-header { display: none; }

/* ── 2. Briefing Bar (two rows: greeting + chips) ────────── */
#view-dashboard .cc-briefing-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--s1);
  border-bottom: 1px solid var(--s3);
  padding: 10px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
  max-height: 200px;
  overflow: hidden;
}

/* 2026-05-24: briefing collapse mechanism removed entirely. The bar is
   now uncollapsible — see render.js toggleBriefingBarCollapse stub +
   index.html DOM removal of #cc-bf-collapse + .cc-bf-expand. */

/* 2026-05-24: YOUR ACTIVITY row — sibling of cc-bf-row2 inside the
   briefing bar. width:100% forces flex-wrap to give it its own line.
   Uses the canonical .cc-bf-eyebrow class so the "YOUR ACTIVITY"
   label aligns exactly with the "TODAY'S BRIEFING" label above
   (shared left column anchor). Hairline divider on top separates it
   from the chips row. Same gap (18px) as cc-bf-row2 so eyebrow
   column line-up matches. */
#view-dashboard .cc-bf-mine-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  width: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--s2, #F4F5F7);
  font-size: 12px;
  color: var(--muted, #6B7280);
}
#view-dashboard .cc-bf-mine-body {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
#view-dashboard .cc-bf-mine-stat {
  font-size: 12px;
  color: var(--muted, #6B7280);
  font-variant-numeric: tabular-nums;
}
#view-dashboard .cc-bf-mine-stat b {
  color: var(--text, #1A2230);
  font-weight: 600;
}
#view-dashboard .cc-bf-mine-sep {
  color: var(--s4, #D1D5DB);
  font-size: 12px;
}
#view-dashboard .cc-bf-mine-empty {
  font-size: 12px;
  color: var(--muted, #6B7280);
  font-style: italic;
}

/* Row 1: greeting + resume + controls */
#view-dashboard .cc-bf-row1 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 22px;
}

/* (R7+ Commit 1) Greeting moved out of briefing-bar to the new
   .dash-welcome strip at the top of the dashboard. The .cc-bf-greeting
   selector kept on the legacy element for any code that still queries
   it, kept hidden so we don't duplicate the welcome strip greeting.
   ── Phase 3 (2026-05-23) — restoring .cc-briefing-bar so the 6 chips
   from the mockup render. .cc-bf-row1 (greeting/Analytics nav row)
   hidden inline since welcome strip already owns that. .cc-bf-row2
   (chips + collapse button) visible, no sticky positioning so it
   sits between Zone 1/Zone 2 and the project cards per mockup. ── */
#view-dashboard .cc-bf-greeting,
#view-dashboard .cc-bf-row1 {
  display: none;
}
#view-dashboard .cc-briefing-bar {
  position: static;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 12px 28px;
  margin: 0 0 22px;
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--color-glass-border, #E2E5EA);
  border-radius: 10px;
  max-height: none;
  overflow: visible;
  box-shadow: none;
}
#view-dashboard .cc-bf-row2 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
#view-dashboard .cc-bf-briefing {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
/* 2026-05-24: removed `display: none !important` here — it permanently
   killed the "Show briefing" reveal button so users who collapsed the
   briefing bar had no way to re-show it. The conditional rule at line
   79-81 (.cc-briefing-bar.collapsed + .cc-bf-expand → display: block)
   handles visibility correctly. */

/* Welcome strip — top of the dashboard. Newsreader italic greeting
   left, compact date (+ optional today-count fallback) right. */
#view-dashboard .dash-welcome {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  /* 2026-05-24: top padding bumped 18→32px so the greeting has visual
     breathing room above it instead of hugging the page top edge. */
  padding: 32px 28px 14px;
  border-bottom: 1px solid var(--s3, #E5E7EB);
}
#view-dashboard .dash-welcome-greeting {
  font-family: 'Newsreader', 'Georgia', serif;
  font-style: italic;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
  line-height: 1.15;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
#view-dashboard .dash-welcome-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase; /* mockup §69 .welcome-meta — all caps */
  color: var(--muted, #6B7280);
  flex-shrink: 0;
}
#view-dashboard .dash-welcome-sep { color: #D1D5DB; }
#view-dashboard .dash-welcome-count {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  #view-dashboard .dash-welcome {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px 16px 12px;
  }
  #view-dashboard .dash-welcome-greeting { font-size: 20px; }
}

/* ── Welcome-strip "⋯" trigger (R7+ Commit 2)
   Opens a global "Reset all zones to defaults" menu. Mirrors per-zone
   trigger styling but scoped to the welcome-strip right slot. Hidden
   on phone — customization isn't a primary mobile workflow. */
#view-dashboard .dash-welcome-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
#view-dashboard .dash-welcome-trigger {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted, #6B7280);
  opacity: .55;
  cursor: pointer;
  transition: opacity .15s, background .15s, border-color .15s, color .15s;
  padding: 0;
}
#view-dashboard .dash-welcome-trigger:hover,
#view-dashboard .dash-welcome-trigger[aria-expanded="true"] {
  opacity: 1;
  background: var(--s2, #F3F4F6);
  border-color: var(--s3, #E5E7EB);
  color: var(--text);
}
@media (max-width: 768px) {
  #view-dashboard .dash-welcome-trigger { display: none; }
}

/* ── Zone frame + per-zone "⋯" picker trigger (R7+ Commit 2)
   Each dashboard zone is wrapped in a .zone-frame so the picker
   trigger has a positioning anchor without disturbing the existing
   zone content layout. The trigger sits top-right at low opacity;
   hover/open states bring it forward. Hidden <768px. */
#view-dashboard .zone-frame {
  position: relative;
}
#view-dashboard .zone-picker-trigger {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted, #6B7280);
  opacity: .45;
  cursor: pointer;
  z-index: 5;
  transition: opacity .15s, background .15s, border-color .15s, color .15s;
  padding: 0;
}
#view-dashboard .zone-frame:hover .zone-picker-trigger { opacity: .85; }
#view-dashboard .zone-picker-trigger:hover,
#view-dashboard .zone-picker-trigger[aria-expanded="true"] {
  opacity: 1;
  background: var(--s2, #F3F4F6);
  border-color: var(--s3, #E5E7EB);
  color: var(--text);
}
/* Zone 3 (KPI strip) — strip has no card chrome, so anchor the
   trigger to the row's outer padding rather than the inner card. */
#view-dashboard .zone-frame[data-zone="3"] .zone-picker-trigger {
  top: 4px;
  right: 22px;
}
@media (max-width: 768px) {
  #view-dashboard .zone-picker-trigger { display: none; }
}

/* ── Picker menu (popover, body-mounted, position:fixed)
   Mounted at document.body so it overflows zone content cleanly.
   Inline top/left set in JS based on the trigger's bounding rect. */
.zone-picker-menu {
  position: fixed;
  z-index: 9999;
  min-width: 240px;
  max-width: 320px;
  background: #FFFFFF;
  border: 1px solid var(--s3, #E5E7EB);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(15,23,42,.06), 0 12px 32px rgba(15,23,42,.10);
  padding: 6px;
  font-family: 'Geist Sans', system-ui, sans-serif;
  font-size: 13px;
  color: var(--text);
  animation: zpmFadeIn .12s ease-out;
}
@keyframes zpmFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.zone-picker-menu .zpm-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted, #6B7280);
  padding: 8px 10px 6px;
}
.zone-picker-menu .zpm-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background .12s;
}
.zone-picker-menu .zpm-option:hover,
.zone-picker-menu .zpm-option:focus-visible {
  background: var(--s2, #F3F4F6);
  outline: none;
}
.zone-picker-menu .zpm-option.is-active {
  background: rgba(41, 128, 132, .07);
}
.zone-picker-menu .zpm-option-check {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--brand-og-accent, #298084);
}
.zone-picker-menu .zpm-option-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.zone-picker-menu .zpm-option-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.zone-picker-menu .zpm-option.is-active .zpm-option-name {
  color: var(--brand-og-accent, #298084);
  font-weight: 600;
}
.zone-picker-menu .zpm-option-desc {
  font-size: 11px;
  color: var(--muted, #6B7280);
  line-height: 1.3;
}
.zone-picker-menu .zpm-coming-soon {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9CA3AF;
  padding: 8px 10px 4px;
  font-style: italic;
}
.zone-picker-menu .zpm-divider {
  height: 1px;
  background: var(--s3, #E5E7EB);
  margin: 6px 4px;
}
.zone-picker-menu .zpm-reset {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  color: var(--muted, #6B7280);
  transition: background .12s, color .12s;
}
.zone-picker-menu .zpm-reset:hover {
  background: var(--s2, #F3F4F6);
  color: var(--text);
}

/* ── Hot leads list module (R7+ Commit 3, audit §3.2 alt)
   Eligible for Zone 1 (5-row hero) and Zone 2 (8-row expanded
   variant in Commit 8). Mirrors the today's-queue card chrome
   for visual rhythm; rows simplified to dot + owner + offer$. */
#view-dashboard .dhl-host {
  padding: 20px 28px 0;
}
#view-dashboard .dhl-host--z2 {
  padding: 16px 28px 0;
}
#view-dashboard .dhl-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
#view-dashboard .dhl-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 20px 10px;
  border-bottom: 1px solid #F3F4F6;
  cursor: pointer;
  transition: background-color .12s;
}
#view-dashboard .dhl-header:hover { background: #F9FAFB; }
#view-dashboard .dhl-header-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #B91C1C;
}
#view-dashboard .dhl-header-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  color: #9CA3AF;
}
#view-dashboard .dhl-list {
  display: flex;
  flex-direction: column;
}
#view-dashboard .dhl-row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  cursor: pointer;
  border-bottom: 1px solid #F3F4F6;
  transition: background-color .12s;
}
#view-dashboard .dhl-row:last-child { border-bottom: 0; }
#view-dashboard .dhl-row:hover { background: #FFF7F7; }
#view-dashboard .dhl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(220,38,38,.12);
  flex-shrink: 0;
}
#view-dashboard .dhl-main { min-width: 0; }
#view-dashboard .dhl-name {
  font-family: 'Geist Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-dashboard .dhl-project {
  font-size: 11px;
  font-weight: 500;
  color: #6B7280;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-dashboard .dhl-offer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #111827;
}
#view-dashboard .dhl-empty {
  padding: 28px 20px;
  text-align: left;
  color: #6B7280;
}
#view-dashboard .dhl-empty-title {
  font-family: 'Geist Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}
#view-dashboard .dhl-empty-desc {
  font-size: 12px;
  line-height: 1.4;
  color: #6B7280;
}
@media (max-width: 768px) {
  #view-dashboard .dhl-host,
  #view-dashboard .dhl-host--z2 { padding: 12px 14px 0; }
  #view-dashboard .dhl-row { padding: 10px 14px; }
  #view-dashboard .dhl-name { font-size: 13px; }
}

/* ── Pipeline summary module (R7+ Commit 4, audit §3.2 Z1 alt)
   Top 3 active deals, sorted by closing-date asc then by stage rank
   desc. Each row: owner name + stage pill + project + closing chip
   + offer$ right-aligned. Header total = sum of totalPrice across
   all active deals. */
#view-dashboard .dpl-host {
  padding: 20px 28px 0;
}
#view-dashboard .dpl-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
#view-dashboard .dpl-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 20px 10px;
  border-bottom: 1px solid #F3F4F6;
  cursor: pointer;
  transition: background-color .12s;
}
#view-dashboard .dpl-header:hover { background: #F9FAFB; }
#view-dashboard .dpl-header-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6B7280;
}
#view-dashboard .dpl-header-count,
#view-dashboard .dpl-header-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #111827;
}
#view-dashboard .dpl-list {
  display: flex;
  flex-direction: column;
}
#view-dashboard .dpl-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  cursor: pointer;
  border-bottom: 1px solid #F3F4F6;
  transition: background-color .12s;
}
#view-dashboard .dpl-row:last-child { border-bottom: 0; }
#view-dashboard .dpl-row:hover { background: #F9FAFB; }
#view-dashboard .dpl-main { min-width: 0; }
#view-dashboard .dpl-name {
  font-family: 'Geist Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-dashboard .dpl-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  color: #6B7280;
  min-width: 0;
}
#view-dashboard .dpl-project {
  color: #6B7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Stage pills — color-coded per DEAL_STAGES (deals.js):
     negotiation = brass, psa-sent = accent, psa-signed = success,
     closed = muted (closed deals filtered out, but kept for safety) */
#view-dashboard .dpl-stage {
  display: inline-flex;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
#view-dashboard .dpl-stage--negotiation {
  background: rgba(var(--brand-brass-rgb, 204, 156, 66), .12);
  color: var(--brand-brass, #CC9C42);
}
#view-dashboard .dpl-stage--psa-sent {
  background: rgba(41, 128, 132, .10);
  color: var(--brand-og-accent, #298084);
}
#view-dashboard .dpl-stage--psa-signed {
  background: rgba(13, 90, 43, .10);
  color: var(--color-completed, #15803D);
}
#view-dashboard .dpl-stage--closed {
  background: #F3F4F6;
  color: #6B7280;
}
/* Closing-date countdown chip — overdue red, ≤7d warn, later muted */
#view-dashboard .dpl-close {
  display: inline-flex;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
#view-dashboard .dpl-close--overdue { background: rgba(185,28,28,.08); color: #B91C1C; }
#view-dashboard .dpl-close--soon    { background: rgba(194,113,12,.10); color: #C2710C; }
#view-dashboard .dpl-close--later   { background: #F3F4F6; color: #6B7280; }

#view-dashboard .dpl-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #111827;
}
#view-dashboard .dpl-empty {
  padding: 28px 20px;
  color: #6B7280;
}
#view-dashboard .dpl-empty-title {
  font-family: 'Geist Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}
#view-dashboard .dpl-empty-desc {
  font-size: 12px;
  line-height: 1.4;
}
@media (max-width: 768px) {
  #view-dashboard .dpl-host { padding: 12px 14px 0; }
  #view-dashboard .dpl-row { padding: 12px 14px; }
  #view-dashboard .dpl-name { font-size: 13px; }
  #view-dashboard .dpl-meta { gap: 6px; }
}

/* ── Calls-by-day mini chart module (R7+ Commit 5, audit §3.2 Z1 alt)
   Self-contained chart styles — analytics.js .analytics-cbd-* rules
   are scoped to #view-analytics, so this module ships its own CSS.
   Today's bar gets brass stroke; ghost bars dim to 35% on empty. */
#view-dashboard .dcb-host {
  padding: 20px 28px 0;
}
#view-dashboard .dcb-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
#view-dashboard .dcb-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 20px 10px;
  border-bottom: 1px solid #F3F4F6;
  cursor: pointer;
  transition: background-color .12s;
}
#view-dashboard .dcb-header:hover { background: #F9FAFB; }
#view-dashboard .dcb-header-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6B7280;
}
#view-dashboard .dcb-header-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #111827;
}
#view-dashboard .dcb-chart {
  padding: 16px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#view-dashboard .dcb-bars {
  display: grid;
  align-items: end;
  gap: 8px;
  height: 96px;
}
#view-dashboard .dcb-col {
  display: flex;
  align-items: end;
  justify-content: center;
  height: 100%;
}
#view-dashboard .dcb-bar {
  width: 100%;
  max-width: 28px;
  min-height: 4px;
  background: var(--brand-og-accent, #298084);
  border-radius: 4px 4px 1px 1px;
  transition: opacity .15s;
}
#view-dashboard .dcb-bar:hover { opacity: .82; }
#view-dashboard .dcb-bar--zero {
  height: 4px !important;
  background: #E5E7EB;
}
/* Today's bar — brass 1px inset stroke, audit §6.4 pattern */
#view-dashboard .dcb-bar--today {
  background: var(--brand-og-accent, #298084);
  box-shadow: inset 0 0 0 1px var(--brand-brass, #CC9C42);
}
#view-dashboard .dcb-bar--ghost {
  background: #E5E7EB;
  opacity: .55;
}
#view-dashboard .dcb-labels {
  display: grid;
  gap: 8px;
  text-align: center;
}
#view-dashboard .dcb-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #9CA3AF;
}
#view-dashboard .dcb-label--today {
  color: var(--brand-brass, #CC9C42);
  font-weight: 700;
}
#view-dashboard .dcb-empty-hint {
  padding: 0 20px 16px;
  font-size: 11px;
  color: #9CA3AF;
  font-style: italic;
}
@media (max-width: 768px) {
  #view-dashboard .dcb-host { padding: 12px 14px 0; }
  #view-dashboard .dcb-chart { padding: 14px 14px 10px; }
  #view-dashboard .dcb-bars { height: 80px; gap: 4px; }
  #view-dashboard .dcb-labels { gap: 4px; }
}

/* ── Recent activity feed module (R7+ Commit 6, audit §3.2 Z2 alt)
   Last N call-log entries across visible owners, sorted by ts desc.
   Outcome icon + owner + "by X" attribution (when team N>1) +
   relative time. Click row → openOwnerModal. */
#view-dashboard .drc-host {
  padding: 16px 28px 0;
}
#view-dashboard .drc-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
#view-dashboard .drc-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 20px 10px;
  border-bottom: 1px solid #F3F4F6;
}
#view-dashboard .drc-header-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6B7280;
}
#view-dashboard .drc-header-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  color: #9CA3AF;
}
#view-dashboard .drc-list {
  display: flex;
  flex-direction: column;
}
#view-dashboard .drc-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  cursor: pointer;
  border-bottom: 1px solid #F3F4F6;
  transition: background-color .12s;
}
#view-dashboard .drc-row:last-child { border-bottom: 0; }
#view-dashboard .drc-row:hover { background: #F9FAFB; }
#view-dashboard .drc-outcome {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}
#view-dashboard .drc-outcome--ans   { background: rgba(13,90,43,.10);   color: var(--color-completed, #15803D); }
#view-dashboard .drc-outcome--noans { background: #F3F4F6;              color: #6B7280; }
#view-dashboard .drc-outcome--cb    { background: rgba(194,113,12,.12); color: #C2710C; }
#view-dashboard .drc-outcome--vm    { background: rgba(41,128,132,.10); color: var(--brand-og-accent, #298084); }
#view-dashboard .drc-outcome--note  { background: #F3F4F6;              color: #6B7280; }

#view-dashboard .drc-main { min-width: 0; }
#view-dashboard .drc-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
#view-dashboard .drc-name {
  font-family: 'Geist Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-dashboard .drc-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #6B7280;
  text-transform: uppercase;
  flex-shrink: 0;
}
#view-dashboard .drc-attrib {
  font-size: 11px;
  color: #9CA3AF;
  flex-shrink: 0;
}
#view-dashboard .drc-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #9CA3AF;
  margin-top: 2px;
}
#view-dashboard .drc-empty {
  padding: 28px 20px;
  color: #6B7280;
}
#view-dashboard .drc-empty-title {
  font-family: 'Geist Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}
#view-dashboard .drc-empty-desc {
  font-size: 12px;
  line-height: 1.4;
}
@media (max-width: 768px) {
  #view-dashboard .drc-host { padding: 12px 14px 0; }
  #view-dashboard .drc-row { padding: 10px 14px; }
  #view-dashboard .drc-name { font-size: 12px; }
}

/* ── Project breakdown module (R7+ Commit 7, audit §3.2 Z2 alt)
   Reuses analytics.js _apComputeProjectBreakdown sortKey to rank
   projects. Each row shows name + owner count + 3 micro-stats +
   7-day mini sparkline. Click → openProject. Plan §3.7. */
#view-dashboard .dpb-host {
  padding: 16px 28px 0;
}
#view-dashboard .dpb-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
#view-dashboard .dpb-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 20px 10px;
  border-bottom: 1px solid #F3F4F6;
  cursor: pointer;
  transition: background-color .12s;
}
#view-dashboard .dpb-header:hover { background: #F9FAFB; }
#view-dashboard .dpb-header-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6B7280;
}
#view-dashboard .dpb-header-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  color: #9CA3AF;
}
#view-dashboard .dpb-list { display: flex; flex-direction: column; }
#view-dashboard .dpb-row {
  display: grid;
  grid-template-columns: 1fr auto 88px;
  align-items: center;
  gap: 18px;
  padding: 12px 20px;
  cursor: pointer;
  border-bottom: 1px solid #F3F4F6;
  transition: background-color .12s;
}
#view-dashboard .dpb-row:last-child { border-bottom: 0; }
#view-dashboard .dpb-row:hover { background: #F9FAFB; }
#view-dashboard .dpb-main { min-width: 0; }
#view-dashboard .dpb-name {
  font-family: 'Geist Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-dashboard .dpb-meta {
  font-size: 11px;
  color: #6B7280;
  margin-top: 2px;
}
#view-dashboard .dpb-stats {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-shrink: 0;
}
#view-dashboard .dpb-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 0;
}
#view-dashboard .dpb-stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #111827;
  line-height: 1;
}
#view-dashboard .dpb-stat-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #9CA3AF;
}
/* 7-day mini sparkline — equal-width bars normalized to per-row max */
#view-dashboard .dpb-spk {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 2px;
  height: 28px;
}
#view-dashboard .dpb-spk-bar {
  width: 100%;
  background: var(--brand-og-accent, #298084);
  border-radius: 2px 2px 0 0;
  min-height: 3px;
}
#view-dashboard .dpb-spk-bar--zero {
  background: #E5E7EB;
  height: 3px !important;
}
#view-dashboard .dpb-empty {
  padding: 28px 20px;
  color: #6B7280;
}
#view-dashboard .dpb-empty-title {
  font-family: 'Geist Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}
#view-dashboard .dpb-empty-desc {
  font-size: 12px;
  line-height: 1.4;
}
@media (max-width: 768px) {
  #view-dashboard .dpb-host { padding: 12px 14px 0; }
  #view-dashboard .dpb-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 14px;
  }
  #view-dashboard .dpb-stats { gap: 12px; }
  #view-dashboard .dpb-spk { width: 100%; }
}

/* ── Streak strip module (R7+ Commit 9, audit §3.2 Z3 alt)
   Four compact cards: Today / This week / Streak / Hot leads.
   Same horizontal rhythm as the KPI strip so swapping Z3 modules
   doesn't reflow the dashboard. Plan §3.10. */
#view-dashboard .dss-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 18px 28px 14px;
}
#view-dashboard .dss-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 14px 16px 12px;
  cursor: pointer;
  transition: background-color .12s, border-color .12s;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
#view-dashboard .dss-card:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
}
#view-dashboard .dss-card--empty { opacity: .72; }
#view-dashboard .dss-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #111827;
  line-height: 1;
}
#view-dashboard .dss-card--empty .dss-value { color: #9CA3AF; }
#view-dashboard .dss-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6B7280;
  margin-top: 6px;
}
#view-dashboard .dss-hint {
  font-size: 11px;
  color: #9CA3AF;
  font-style: italic;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 768px) {
  #view-dashboard .dss-strip {
    grid-template-columns: repeat(2, 1fr);
    padding: 14px 14px 10px;
    gap: 8px;
  }
  #view-dashboard .dss-value { font-size: 18px; }
}

/* ── Goal progress module (R7+ Commit 10, audit §3.2 Z3 alt)
   Single full-width card with eyebrow + progress bar. Three
   states: unset / in-progress / hit. Plan §3.11. */
#view-dashboard .dgp-host {
  padding: 18px 28px 14px;
}
#view-dashboard .dgp-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 14px 18px 16px;
  cursor: pointer;
  transition: background-color .12s, border-color .12s;
}
#view-dashboard .dgp-card:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
}
#view-dashboard .dgp-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
#view-dashboard .dgp-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6B7280;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#view-dashboard .dgp-eyebrow--hit {
  color: var(--color-completed, #15803D);
}
#view-dashboard .dgp-stat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #111827;
}
#view-dashboard .dgp-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--brand-og-accent, #298084);
}
#view-dashboard .dgp-hint-unset {
  font-size: 12px;
  color: #6B7280;
  font-style: italic;
}
/* Progress bar — flat fill, brass for in-progress, green when hit */
#view-dashboard .dgp-bar {
  height: 8px;
  background: #F3F4F6;
  border-radius: 999px;
  overflow: hidden;
}
#view-dashboard .dgp-bar-fill {
  height: 100%;
  background: var(--brand-og-accent, #298084);
  border-radius: 999px;
  transition: width .25s ease-out;
}
#view-dashboard .dgp-bar-fill--hit {
  background: var(--color-completed, #15803D);
}
#view-dashboard .dgp-card--hit { border-color: rgba(13,90,43,.25); }
#view-dashboard .dgp-card--unset { background: #FAFBFC; }
@media (max-width: 768px) {
  #view-dashboard .dgp-host { padding: 14px 14px 10px; }
  #view-dashboard .dgp-row { flex-direction: column; gap: 4px; }
}

/* Row 2: chips + collapse chevron */
#view-dashboard .cc-bf-row2 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
}

#view-dashboard .cc-bf-row2 .cc-bf-collapse {
  margin-left: auto;
}

/* Briefing chips container — wraps to fit */
#view-dashboard .cc-bf-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

/* Briefing chip styling (new + legacy compat) */
#view-dashboard .cc-bf-chip,
#view-dashboard .dk-bf-line {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--s3);
  border-radius: 12px;
  padding: 2px 10px 2px 6px;
  font-family: inherit; /* <button> UA reset drops Geist; restore page font */
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
  flex-shrink: 0;
}
#view-dashboard .cc-bf-chip:hover,
#view-dashboard .dk-bf-line:hover { background: var(--s3); }

#view-dashboard .dk-bf-line b {
  color: var(--text);
  font-weight: 600;
}

#view-dashboard .dk-bf-icon {
  font-size: 12px;
  flex-shrink: 0;
}

/* Urgency tiers — urgent chips get red tint, warn gets amber tint */
#view-dashboard .cc-bf-urgent {
  background: rgba(163,24,24,.08);
  color: var(--color-red);
  font-weight: 600;
}
#view-dashboard .cc-bf-urgent:hover { background: rgba(163,24,24,.14); }
#view-dashboard .cc-bf-urgent b { color: var(--color-red); }

#view-dashboard .cc-bf-warn {
  background: rgba(180,83,9,.08);
  color: var(--color-callback);
  font-weight: 600;
}
#view-dashboard .cc-bf-warn:hover { background: rgba(180,83,9,.14); }
#view-dashboard .cc-bf-warn b { color: var(--color-callback); }


/* Nav group — right side of row 1 */
#view-dashboard .cc-bf-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Nav link style — shared by resume + analytics */
#view-dashboard .cc-bf-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 10px;
  border: 1px solid var(--s3);
  border-radius: 6px;
  transition: border-color 0.15s, background 0.15s;
}
#view-dashboard .cc-bf-nav-link:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), .04);
}

/* Resume link — amber variant (hidden via inline style, shown by JS) */
#view-dashboard .cc-bf-resume a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-no-answer);
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 10px;
  border: 1px solid rgba(194,113,12,.2);
  border-radius: 6px;
  transition: border-color 0.15s, background 0.15s;
}
#view-dashboard .cc-bf-resume a:hover {
  border-color: var(--color-no-answer);
  background: rgba(194,113,12,.06);
}

/* Collapse toggle */
#view-dashboard .cc-bf-collapse {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dim);
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
#view-dashboard .cc-bf-collapse:hover {
  background: rgba(var(--accent-rgb), .04);
  color: var(--text);
}



/* ── 3. Zone 1 — Next-Action Hero (audit §3.2 / R4b) ─────────
   ONE owner card at the top of the dashboard. Surfaces the
   next-best action via _pickNextAction() priority — callbacks,
   stale hot leads, closing deals, due today, highest-value
   overdue, then first uncalled. After Call → re-pick, so the
   "why this owner" reason rotates instead of overdue spam.
   ────────────────────────────────────────────────────────── */
#view-dashboard .cc-next-action-hero {
  padding: 20px 28px 0;
}

#view-dashboard .nah-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 6px 20px rgba(15,23,42,.05);
  position: relative;
  overflow: hidden;
}

/* Eyebrow row — small icon + reason label, color-tinted to urgency tier. */
#view-dashboard .nah-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
}
#view-dashboard .nah-eyebrow--urgent { color: #B91C1C; }
#view-dashboard .nah-eyebrow--warn   { color: #C2710C; }
#view-dashboard .nah-eyebrow--info   { color: var(--brand-og-accent, #298084); }
#view-dashboard .nah-eyebrow--clear  { color: #15803D; }

/* Owner name — biggest type on the page, deliberate focal point. */
#view-dashboard .nah-name {
  font-family: 'Geist Sans', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  color: #111827;
  margin: 2px 0 0;
}

/* Project + location subtitle. */
#view-dashboard .nah-project {
  font-size: 13px;
  font-weight: 500;
  color: #4B5563;
  line-height: 1.35;
}
#view-dashboard .nah-project-sep { color: #9CA3AF; padding: 0 2px; }

/* Meta strip — NRA / offer / last contact in tabular mono numerals. */
#view-dashboard .nah-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed #E5E7EB;
}
#view-dashboard .nah-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
#view-dashboard .nah-meta-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9CA3AF;
}
#view-dashboard .nah-meta-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #111827;
  line-height: 1;
}

/* Actions row — secondary text buttons left, primary CTA right. */
#view-dashboard .nah-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid #F3F4F6;
}
#view-dashboard .nah-secondaries {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
#view-dashboard .nah-secondary {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #6B7280;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .12s, color .12s;
}
#view-dashboard .nah-secondary:hover {
  background: #F3F4F6;
  color: var(--brand-og-accent, #298084);
}

/* Primary CTA — pill, teal solid, soft shadow. */
#view-dashboard .nah-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #FFFFFF;
  background: var(--brand-og-accent, #298084);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(41, 128, 132, .28), 0 1px 2px rgba(0,0,0,.05);
  transition: background-color .15s var(--ease-out, ease-out), box-shadow .2s, transform .12s;
  white-space: nowrap;
}
#view-dashboard .nah-cta:hover {
  background: var(--brand-og-accent-hover, #1f6669);
  box-shadow: 0 6px 18px rgba(41, 128, 132, .35), 0 1px 2px rgba(0,0,0,.05);
}
#view-dashboard .nah-cta:active { transform: translateY(1px); }

/* Ghost CTA variant for the all-clear empty state. */
#view-dashboard .nah-cta--ghost {
  color: var(--brand-og-accent, #298084);
  background: rgba(41, 128, 132, .08);
  box-shadow: none;
  border: 1px solid rgba(41, 128, 132, .25);
}
#view-dashboard .nah-cta--ghost:hover {
  background: rgba(41, 128, 132, .14);
  box-shadow: none;
}

/* All-clear card — slightly muted; no meta strip. */
#view-dashboard .nah-card--clear .nah-name {
  font-size: 22px;
  color: #1F2937;
}
#view-dashboard .nah-card--clear .nah-actions {
  border-top: 0;
  padding-top: 4px;
}

/* ── Phase 1 (2026-05-23) — Zone 1 featured next-call hero ──────────────
   New card chrome replacing the .nah-* family. Spec:
     docs/specs/dashboard-merge-build-plan-2026-05-23.md §96-106
     docs/specs/dashboard-merged-mockup-2026-05-23.html (.next-* classes)
   The old .nah-* CSS above is preserved temporarily; renderNextActionHero
   no longer emits .nah-card markup so those rules are dead. Phase 5
   sweep will delete them.
   ───────────────────────────────────────────────────────────────────── */
#view-dashboard .next-card {
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--color-glass-border, #E2E5EA);
  border-radius: 10px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
  cursor: pointer;
  transition: border-color .12s;
}
#view-dashboard .next-card:hover {
  border-color: oklch(0.20 0.010 200 / 0.22);
}
#view-dashboard .next-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted, var(--muted, #6B7280));
  display: flex;
  align-items: center;
  gap: 8px;
}
#view-dashboard .next-eyebrow svg {
  color: var(--accent, var(--color-secondary, #298084));
}
#view-dashboard .next-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -4px;
}
#view-dashboard .next-name {
  font-size: 22px;
  font-weight: 600;
  color: var(--text, #1A2230);
  letter-spacing: -0.005em;
}
#view-dashboard .next-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#view-dashboard .next-badge-hot {
  background: oklch(0.55 0.18 25 / 0.10);
  color: var(--color-red, oklch(0.55 0.18 25));
}
#view-dashboard .next-meta {
  font-size: 12px;
  color: var(--text-muted, var(--muted, #6B7280));
  line-height: 1.5;
}
#view-dashboard .next-meta b {
  color: var(--text, #1A2230);
  font-weight: 500;
}
#view-dashboard .next-meta-sep {
  margin: 0 2px;
  color: var(--text-muted, var(--muted, #6B7280));
}
#view-dashboard .next-context {
  background: oklch(0 0 0 / 0.025);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text, #1A2230);
  line-height: 1.5;
  font-style: italic;
}
#view-dashboard .next-context::before {
  content: 'Last note';
  display: block;
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted, var(--muted, #6B7280));
  margin-bottom: 4px;
}
#view-dashboard .next-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid oklch(0.20 0.010 200 / 0.05);
}
#view-dashboard .next-stats-offer {
  display: flex;
  flex-direction: column;
}
#view-dashboard .next-stats-offer small {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, var(--muted, #6B7280));
  margin-bottom: 2px;
  white-space: nowrap; /* keep "TOTAL OFFER · 1 ASSET" on one line — eyebrow was breaking before "ASSET" */
}
#view-dashboard .next-offer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-money, oklch(0.55 0.12 145));
  font-variant-numeric: tabular-nums;
}
#view-dashboard .next-cta {
  background: var(--accent, var(--color-secondary, #298084));
  color: var(--accent-on, #FFFFFF);
  border: 1px solid var(--accent, var(--color-secondary, #298084));
  padding: 9px 16px;
  border-radius: 7px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.01em;
  transition: filter .12s;
  white-space: nowrap;
  flex-shrink: 0;
}
#view-dashboard .next-cta:hover {
  filter: brightness(1.05);
}
#view-dashboard .next-cta:active {
  transform: translateY(1px);
}
/* Empty state — Newsreader headline per Wireline ≥18px display rule. */
#view-dashboard .next-card--clear {
  cursor: default;
}
#view-dashboard .next-card--clear:hover {
  border-color: var(--color-glass-border, #E2E5EA);
}
#view-dashboard .next-clear-headline {
  font-family: 'Newsreader', 'Georgia', serif;
  font-style: italic;
  font-size: 24px;
  font-weight: 500;
  color: var(--text, #1A2230);
  letter-spacing: -0.01em;
}
#view-dashboard .next-clear-hint {
  font-size: 13px;
  color: var(--text-muted, var(--muted, #6B7280));
}
#view-dashboard .next-clear-hint b {
  color: var(--text, #1A2230);
  font-weight: 600;
}

/* ── Phase 1 LAYOUT-1 (2026-05-23) — Zone 1 + Zone 2 side-by-side grid ─
   Wraps the two .zone-frame siblings in a CSS grid matching the
   dashboard-merged-mockup-2026-05-23.html .zones-12 spec:
     - Desktop ≥1024px: 360px hero + 1fr queue, 22px gap
     - Tablet 768-1023px: still 2-col but tighter (320px hero)
     - Mobile <768px: collapses to single column (existing stacked behavior)
   ─────────────────────────────────────────────────────────────────── */
#view-dashboard .dash-zones-row {
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  gap: 22px;
  margin-bottom: 22px;
  padding: 0 28px;
}
#view-dashboard .dash-zones-row > .zone-frame {
  margin: 0;
  min-width: 0;
}
@media (max-width: 1023px) {
  #view-dashboard .dash-zones-row {
    grid-template-columns: minmax(0, 320px) 1fr;
    gap: 16px;
    padding: 0 20px;
  }
}
@media (max-width: 767px) {
  #view-dashboard .dash-zones-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 14px;
  }
}

/* Band-color icon slot in section headers (Phase 1 DEFER-2).
   Inherits color from --nq-band-color set on the parent .nq-section.
   Sits inside .nq-section-hdr before the label. */
#view-dashboard .nq-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nq-band-color, var(--text-muted));
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
#view-dashboard .nq-section-icon svg {
  width: 14px;
  height: 14px;
}

/* Band header — mockup §104-115 (.queue-band-hdr/.queue-band-label/-count/-sub).
   The legacy .nq-section-hdr at components.css#L535 forces JetBrains-Mono +
   uppercase + 10px caps + band-color-tint background; the mockup wants flat
   Geist 13px title-case label with a subtle pill count + muted sub. Reset
   here, scoped to dashboard so the Follow-Ups page (if it ever returns)
   keeps the prior style. */
#view-dashboard .nq-section-hdr {
  gap: 12px;
  padding: 10px 18px;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  /* layout.css#L6 `header { height: 80px }` (the global site-header rule) cascades
     into <header class="nq-section-hdr">; auto here lets the band-header collapse to
     its natural ~39px content height like the mockup. */
  height: auto;
  min-height: auto;
}
#view-dashboard .nq-section-hdr:hover {
  background: oklch(0 0 0 / 0.02);
}
#view-dashboard .nq-section-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #1A2230);
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
}
#view-dashboard .nq-section-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--nq-band-color, var(--text-muted));
  background: oklch(0 0 0 / 0.04);
  padding: 1px 8px;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
#view-dashboard .nq-section-sub {
  font-size: 12px;
  color: var(--text-muted, var(--muted, #6B7280));
  font-weight: 400;
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  flex: 1 1 0;
  /* POLISH-5: at narrow viewports the long sub-text ("15+ days past
     due — review or let go") would push the View all + Triage all
     buttons off the header row. min-width:0 + ellipsis lets the sub
     truncate first so the action buttons stay visible. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-dashboard .nq-section-toggle {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent, var(--color-secondary, #298084));
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Dashboard Zone 2 queue row — mockup .qrow grid (§117).
   5 explicit columns map to: name+sub | status | due | offer | actions.
   Initials-avatar column removed 2026-05-24 per user request. */
#view-dashboard .nq-row {
  grid-template-columns: minmax(0, 1.4fr) 90px 72px 86px 60px;
  gap: 12px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--hairline-2, oklch(0.20 0.010 200 / 0.05));
  min-height: 48px;
}
#view-dashboard .nq-row:last-child {
  border-bottom: none;
}

/* Two-line stack: row 1 = name + Hot badge inline; row 2 = sub
   (project · outcome · note quote). Deterministic via flex-column;
   the prior flex-wrap layout collapsed the sub onto row 1 when the
   name + sub combined width was under the column width. */
#view-dashboard .nq-row-main {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* override components.css align-items:center which prevents name-row from filling column width */
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
#view-dashboard .nq-row-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
#view-dashboard .nq-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #1A2230);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-dashboard .nq-row-sub {
  font-size: 11px;
  color: var(--text-muted, var(--muted, #6B7280));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-dashboard .nq-row-sub b {
  color: var(--text, #1A2230);
  font-weight: 500;
}

/* Right-side cells — mono numeric, tabular nums for alignment. */
#view-dashboard .nq-row-due {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted, var(--muted, #6B7280));
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-align: left;
}
#view-dashboard .nq-row-offer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-money, oklch(0.55 0.12 145));
  font-variant-numeric: tabular-nums;
  text-align: right;
}
#view-dashboard .nq-row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity .12s;
}
#view-dashboard .nq-row:hover .nq-row-actions,
#view-dashboard .nq-row:focus-within .nq-row-actions {
  opacity: 1;
}

/* ── Phase 1 (2026-05-23) — Zone 2 today's-queue shell ────────────────
   Wraps the existing .nq-stack (5 bands) from notifications.js with a
   dashboard-scoped header (title + summary count line) per
   docs/specs/dashboard-merge-build-plan-2026-05-23.md §114-115.
   Per-band action button (.nq-section-action) — Start queue / Triage all
   / Start Today — also defined here.
   ─────────────────────────────────────────────────────────────────── */
#view-dashboard .tq-shell {
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--color-glass-border, #E2E5EA);
  border-radius: 10px;
  overflow: hidden;
}
#view-dashboard .tq-shell--clear .tq-shell-hdr {
  border-bottom: 1px solid var(--color-glass-border, #E2E5EA);
}
#view-dashboard .tq-clear-state {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 16px;
  color: var(--text-muted, var(--muted, #6B7280));
  font-size: 12px;
  line-height: 1.45;
}
#view-dashboard .tq-clear-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  color: var(--color-secondary, #298084);
  background: color-mix(in oklch, var(--color-secondary, #298084) 10%, transparent);
}
#view-dashboard .tq-clear-copy {
  min-width: 0;
}
#view-dashboard .tq-shell-hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--color-glass-border, #E2E5EA);
}
#view-dashboard .tq-shell-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #1A2230);
}
#view-dashboard .tq-shell-summary {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted, var(--muted, #6B7280));
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}
#view-dashboard .tq-shell-summary b {
  color: var(--text, #1A2230);
  font-weight: 600;
}
/* Reset the .nq-stack max-width inside the dashboard's tq-shell so the
   bands fill the zone container (Follow-Ups page keeps 920px max). */
#view-dashboard .tq-shell .nq-stack {
  max-width: none;
  border: 0;
  border-radius: 0;
  background: transparent;
}
/* Per-band action button on the section header.
   2026-05-24 (audit ISSUE-3): promoted to a filled teal-tinted chip
   button so it visually reads as a CTA (start an outbound calling
   session) — clearly distinct from the passive "View all N" link
   which now sits as a muted underlined affordance. */
#view-dashboard .nq-section-action {
  margin-left: auto;
  font-family: inherit;
  font-size: 11px;
  background: oklch(0.55 0.08 200 / 0.10);
  border: 1px solid oklch(0.55 0.08 200 / 0.22);
  color: var(--accent, var(--color-secondary, #298084));
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  transition: background .12s, border-color .12s;
}
#view-dashboard .nq-section-action:hover {
  background: oklch(0.55 0.08 200 / 0.16);
  border-color: oklch(0.55 0.08 200 / 0.36);
  opacity: 1;
}
#view-dashboard .nq-section-action svg {
  stroke: currentColor;
}
#view-dashboard .nq-section-upcoming .nq-section-hdr {
  background: color-mix(in oklch, var(--color-secondary, #298084) 4%, transparent);
}
#view-dashboard .nq-section-upcoming .nq-section-body .nq-row:first-child {
  border-top-color: oklch(0.20 0.010 200 / 0.05);
}

/* Band footer "Show all N more →" link. Renders only when the band's
   visible-row count is capped (BAND_CAPS in renderTodayQueue). Click sets
   window._nqShowAll[band] = true and re-renders. */
#view-dashboard .nq-section-showall {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 18px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--hairline-2, oklch(0.20 0.010 200 / 0.05));
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, var(--muted, #6B7280));
  cursor: pointer;
  transition: background .1s, color .1s;
}
#view-dashboard .nq-section-showall:hover {
  background: oklch(0 0 0 / 0.02);
  color: var(--accent, var(--color-secondary, #298084));
}
#view-dashboard .nq-section-showall svg {
  stroke: currentColor;
}

/* Mobile — tighten paddings, stack actions row vertically. */
@media (max-width: 768px) {
  #view-dashboard .cc-next-action-hero { padding: 14px 14px 0; }
  #view-dashboard .nah-card { padding: 18px 16px; gap: 8px; }
  #view-dashboard .nah-name { font-size: 22px; }
  #view-dashboard .nah-meta { gap: 18px; padding-top: 10px; }
  #view-dashboard .nah-meta-val { font-size: 13px; }
  #view-dashboard .nah-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
    padding-top: 12px;
  }
  #view-dashboard .nah-cta { justify-content: center; padding: 14px 22px; font-size: 14px; }
  #view-dashboard .nah-secondaries { justify-content: center; gap: 0; }
}

/* ── 3b. Zone 2 — Today's Queue (audit §3.2 / R4c) ──────────
   List of next-best-action owners after the hero. Reuses the
   tier scoring from _pickNextAction, displays top 8 in a
   compact data-row layout — Linear-inbox inspired. Each row
   opens the owner modal; the dedicated Call button starts
   a one-shot quick call.
   ────────────────────────────────────────────────────────── */
#view-dashboard .cc-today-queue {
  padding: 16px 28px 0;
}

#view-dashboard .tq-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

#view-dashboard .tq-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 20px 10px;
  border-bottom: 1px solid #F3F4F6;
}
#view-dashboard .tq-header-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6B7280;
}
#view-dashboard .tq-header-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  color: #9CA3AF;
}

#view-dashboard .tq-list {
  display: flex;
  flex-direction: column;
}

#view-dashboard .tq-row {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  cursor: pointer;
  border-bottom: 1px solid #F3F4F6;
  transition: background-color .12s;
}
#view-dashboard .tq-row:last-child { border-bottom: 0; }
#view-dashboard .tq-row:hover { background: #F9FAFB; }

/* Lead-status dot — red hot, blue cold, gray new. */
#view-dashboard .tq-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
#view-dashboard .tq-dot--hot  { background: var(--color-danger); box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
#view-dashboard .tq-dot--cold { background: var(--brand-og-accent, #298084); box-shadow: 0 0 0 3px rgba(41,128,132,.12); }
#view-dashboard .tq-dot--new  { background: #D1D5DB; }

#view-dashboard .tq-main { min-width: 0; }
#view-dashboard .tq-name {
  font-family: 'Geist Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-dashboard .tq-project {
  font-size: 11px;
  font-weight: 500;
  color: #6B7280;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Reason chip — small uppercase pill, color-tinted by tier. */
#view-dashboard .tq-reason {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  flex-shrink: 0;
}
#view-dashboard .tq-reason--urgent { background: rgba(185,28,28,.08); color: #B91C1C; }
#view-dashboard .tq-reason--warn   { background: rgba(194,113,12,.10); color: #C2710C; }
#view-dashboard .tq-reason--info   { background: rgba(41,128,132,.10); color: var(--brand-og-accent, #298084); }
#view-dashboard .tq-reason--muted  { background: #F3F4F6; color: #6B7280; }

/* Wave C (2026-05-22): clickable cadence chip variant.
   Renders inline-flex so the Lucide icon + label sit on one baseline.
   Hover boosts background opacity to signal interactivity. */
#view-dashboard .cadence-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s ease-out, border-color .12s ease-out;
}
#view-dashboard .cadence-chip:hover,
#view-dashboard .cadence-chip:focus-visible {
  filter: brightness(.96);
  border-color: currentColor;
  outline: none;
}
#view-dashboard .cadence-chip svg { width: 10px; height: 10px; }

#view-dashboard .tq-values {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}
#view-dashboard .tq-nra {
  font-size: 11px;
  font-weight: 600;
  color: #4B5563;
}
#view-dashboard .tq-nra-lbl {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #9CA3AF;
  text-transform: uppercase;
}
#view-dashboard .tq-offer {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

#view-dashboard .tq-call {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-og-accent, #298084);
  background: rgba(41,128,132,.08);
  border: 1px solid rgba(41,128,132,.20);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .12s, color .12s, border-color .12s;
}
#view-dashboard .tq-call:hover {
  background: var(--brand-og-accent, #298084);
  color: #FFFFFF;
  border-color: var(--brand-og-accent, #298084);
}

/* Mobile — stack values + call below the name/project line. */
@media (max-width: 768px) {
  #view-dashboard .cc-today-queue { padding: 10px 14px 0; }
  #view-dashboard .tq-header { padding: 12px 14px 8px; }
  #view-dashboard .tq-row {
    grid-template-columns: 10px 1fr auto;
    grid-template-areas:
      "dot main values"
      ".   call call";
    row-gap: 8px;
    padding: 12px 14px;
  }
  #view-dashboard .tq-dot { grid-area: dot; align-self: start; margin-top: 6px; }
  #view-dashboard .tq-main { grid-area: main; }
  #view-dashboard .tq-values { grid-area: values; flex-direction: row; gap: 8px; align-items: baseline; }
  #view-dashboard .tq-nra-lbl { display: none; }
  #view-dashboard .tq-call {
    grid-area: call;
    justify-content: center;
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* ── 4. KPI Cards Row (Zone 3 — de-emphasized per audit §3.2) ───
   Lower visual weight than the Zone 1 hero + Zone 2 queue. Smaller
   padding, smaller numbers, smaller icons. The `.cc-kpi-card--empty`
   modifier dims the card and shows a Mixpanel-style "make your first
   call" hint instead of a stark zero. */
#view-dashboard .cc-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 12px 28px 0;
}

#view-dashboard .cc-kpi-card {
  background: var(--s1);
  border: 1px solid var(--s3);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(.4,0,.2,1), border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
  animation: cc-cardIn 0.35s ease both;
}

#view-dashboard .cc-kpi-card:nth-child(1) { animation-delay: 0ms; }
#view-dashboard .cc-kpi-card:nth-child(2) { animation-delay: 60ms; }
#view-dashboard .cc-kpi-card:nth-child(3) { animation-delay: 120ms; }
#view-dashboard .cc-kpi-card:nth-child(4) { animation-delay: 180ms; }

#view-dashboard .cc-kpi-card:hover {
  border-color: var(--s4);
  box-shadow: var(--shadow-sm);
}

/* Sparse-data dim — when the metric is 0, fade the whole card so it
   reads as "background context, not focal" while still being clickable. */
#view-dashboard .cc-kpi-card--empty {
  opacity: 0.62;
  background: rgba(255,255,255,0.6);
}
#view-dashboard .cc-kpi-card--empty:hover { opacity: 0.9; }
#view-dashboard .cc-kpi-card--empty .cc-kpi-value { color: #9CA3AF; font-weight: 600; }

/* KPI icon container — shrunk + lower contrast */
#view-dashboard .cc-kpi-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.85;
}
#view-dashboard .cc-kpi-card--empty .cc-kpi-icon { opacity: 0.45; }

/* KPI content */
#view-dashboard .cc-kpi-content {
  flex: 1;
  min-width: 0;
}

#view-dashboard .cc-kpi-value {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.15;
}

#view-dashboard .cc-kpi-label {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dim);
  margin-top: 2px;
}

/* Smart context line below KPI label */
#view-dashboard .cc-kpi-ctx {
  font-family: inherit;
  font-size: 10px;
  font-weight: 400;
  color: var(--dim);
  margin-top: 2px;
  text-transform: none;
  letter-spacing: 0;
}
/* Sparse-data hint text — italicized prompt to populate the metric */
#view-dashboard .cc-kpi-ctx--hint {
  color: #9CA3AF;
  font-style: italic;
}

/* KPI progress bar (calls goal) */
#view-dashboard .cc-kpi-progress {
  margin-top: 8px;
  height: 4px;
  border-radius: 2px;
  background: var(--s3);
  overflow: hidden;
}

#view-dashboard .cc-kpi-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transition: width 0.4s ease;
}

#view-dashboard .cc-kpi-progress-fill.cc-goal-hit {
  background: var(--color-answered);
}

/* ── 5. Project Card Grid ──────────────────────────────────── */
#view-dashboard .cc-card-area {
  padding: 20px 28px 60px;
  flex: 1;
  overflow-y: auto;
}

#view-dashboard .cc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

/* ── 6. Client Group Headers (collapsible at scale) ────────── */
#view-dashboard .cc-client-hdr {
  grid-column: 1 / -1;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 24px 0 10px;
  border-bottom: 1px solid var(--s4);
  margin-bottom: 0;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.15s;
}
#view-dashboard .cc-client-hdr:hover { color: var(--dim); }
#view-dashboard .cc-client-hdr:first-child { padding-top: 0; }

#view-dashboard .cc-client-hdr .cc-client-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
#view-dashboard .cc-client-hdr.cc-collapsed .cc-client-chevron {
  transform: rotate(-90deg);
}

#view-dashboard .cc-client-hdr .cc-client-summary {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  color: var(--dim);
  margin-left: 6px;
  letter-spacing: 0;
  text-transform: none;
}

#view-dashboard .cc-client-hdr .cc-client-overdue {
  color: var(--color-red);
  font-weight: 600;
}

#view-dashboard .cc-client-group { display: contents; }
#view-dashboard .cc-client-group.cc-group-collapsed .cc-card { display: none; }

/* ── 7. Card Base ──────────────────────────────────────────── */
#view-dashboard .cc-card {
  background: var(--s1);
  border: 1px solid var(--s3);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: transform 0.2s cubic-bezier(.4,0,.2,1), box-shadow 0.2s cubic-bezier(.4,0,.2,1), border-color 0.2s;
  animation: cc-cardIn 0.4s ease both;
  animation-delay: calc(var(--card-i, 0) * 50ms + 240ms);
}

#view-dashboard .cc-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--s4);
}

/* ── 7a. Card top hairline (per D7 — projects identified by
       name + position only; formation-color band deleted) ── */
#view-dashboard .cc-card::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--border);
  border-radius: var(--r-md) var(--r-md) 0 0;
  flex-shrink: 0;
}

/* Resume / paused / empty status conveyed by .cc-pill in card body
   (no border-left stripe per BAN 1, no colored band per D7). */
#view-dashboard .cc-card.cc-paused::before {
  background: var(--s4);
}

#view-dashboard .cc-card.cc-empty::before {
  background: var(--s4);
}

/* ── 7b. Card Zone A — Identity (Header) ──────────────────── */
#view-dashboard .cc-card-header {
  padding: 14px 16px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* .cc-card-color deleted per strict D7 — projects identified by
   name + position only; no per-project color decoration. */

#view-dashboard .cc-card-hdr-text {
  flex: 1;
  min-width: 0;
}

/* Project card title — Newsreader 24px italic per audit §3.2 P0
   ("editorial moment"; pulls Scout away from Notion-CRM identity).
   Recon F1 catch-up — was 14px Geist Sans. */
#view-dashboard .cc-card-title {
  font-family: 'Newsreader', 'Georgia', serif;
  font-style: italic;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
  line-height: 1.15;
}

#view-dashboard .cc-card-county {
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--dim);
  margin-top: 1px;
}

/* Stats line (below title, still in Zone A) */
#view-dashboard .cc-card-stats {
  padding: 6px 16px 0;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

#view-dashboard .cc-card-stats span {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  color: var(--dim);
}

/* Reached % color coding */
#view-dashboard .cc-stat-good { color: var(--color-answered) !important; }
#view-dashboard .cc-stat-mid  { color: var(--color-under-psa) !important; }
#view-dashboard .cc-stat-low  { color: var(--color-red) !important; }

/* Badge — RESUME / PAUSED */
#view-dashboard .cc-badge {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1.4;
}

/* RESUME badge — teal per audit §3.2 P1 (demote from brass/orange).
   Recon F4 fix — was --color-no-answer (burnt orange #C2410C). */
#view-dashboard .cc-badge-resume {
  color: var(--brand-og-accent);
  background: rgba(var(--brand-og-accent-rgb), .10);
}

#view-dashboard .cc-badge-paused {
  color: var(--dim);
  background: rgba(107,114,128,.08);
}


/* Menu button */
#view-dashboard .cc-card-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dim);
  font-size: 18px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
  line-height: 1;
}
#view-dashboard .cc-card-menu-btn:hover {
  background: var(--s3);
  color: var(--muted);
}

/* Card menu dropdown */
#view-dashboard .cc-card-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 12px;
  background: var(--s1);
  border: 1px solid var(--s3);
  border-radius: 8px;
  padding: 4px 0;
  min-width: 180px;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  animation: cc-fadeIn 0.12s ease;
}
#view-dashboard .cc-card-menu.open { display: block; }
#view-dashboard .cc-card-menu div {
  padding: 8px 14px;
  font-family: inherit;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.1s;
}
#view-dashboard .cc-card-menu div:hover {
  background: var(--s3);
  color: var(--text);
}

/* ── 7c. Card Zone B — Pipeline Data ─────────────────────── */
#view-dashboard .cc-card-data {
  padding: 10px 16px;
  border-top: 1px solid var(--s3);
}

/* Pipeline mini-bar */
#view-dashboard .cc-card-pipeline {
  margin-bottom: 6px;
}

#view-dashboard .cc-card-pipeline-bar {
  display: flex;
  gap: 1px;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--s2);
}

#view-dashboard .cc-card-pipeline-bar .cc-pipe-seg {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
  min-width: 0;
  position: relative;
  cursor: default;
}

/* Segment status colors */
#view-dashboard .cc-pipe-seg.seg-new          { background: var(--color-new); }
#view-dashboard .cc-pipe-seg.seg-no-answer    { background: var(--color-no-answer); }
#view-dashboard .cc-pipe-seg.seg-answered     { background: var(--color-answered); }
#view-dashboard .cc-pipe-seg.seg-callback     { background: var(--color-callback-status); }
#view-dashboard .cc-pipe-seg.seg-under-neg    { background: var(--color-under-neg); }
#view-dashboard .cc-pipe-seg.seg-under-psa    { background: var(--color-under-psa); }
#view-dashboard .cc-pipe-seg.seg-completed    { background: var(--color-completed); }
#view-dashboard .cc-pipe-seg.seg-skip         { background: var(--color-skip); }

/* ── Phase 2 (2026-05-23) — Project areas card chrome rewrite ────────
   New .cc-card-* subclasses matching docs/specs/dashboard-merge-build-
   plan-2026-05-23.md §143-189 + docs/specs/dashboard-merged-mockup-2026-
   05-23.html (.pa-card section). The .cc-card base class above is reused;
   old subclasses (.cc-card-header, .cc-card-stats, .cc-card-data,
   .cc-card-activity, .cc-card-actions-zone, .cc-card-btns, .cc-btn-*,
   .cc-alert-pills, .cc-alert-pill) are now dead — Phase 5 sweep targets.
   All selectors scoped under #view-dashboard per .claude/rules/css.md.
   ──────────────────────────────────────────────────────────────────── */

/* Card body — main content container per plan §164. */
#view-dashboard .cc-card-body {
  padding: 16px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Header row — client eyebrow + title + county on left; menu kebab on right. */
#view-dashboard .cc-card-hdr-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}
#view-dashboard .cc-card-hdr-left {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Client eyebrow — mono caps 10px, muted (mockup .pa-client). */
#view-dashboard .cc-card-client {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted, var(--muted, #6B7280));
}

/* Status pill row (plan §149 — PSA / Hot / Under neg conditional). */
#view-dashboard .cc-card-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
#view-dashboard .cc-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* 2026-05-23: pill colors migrated to canonical v2 stage tokens so the
   dashboard pills match Owner Modal V2 / Daily Playbook / Deals page /
   project-view extended rows for the same semantic concept. Per Agent 1
   audit, the prior raw-OKLCH values bypassed the token chain. */
#view-dashboard .cc-card-pill-psa {
  background: oklch(0.72 0.12 80 / 0.12);
  color: var(--color-stage-under-psa, var(--brand-brass, #CC9C42));
}
#view-dashboard .cc-card-pill-hot {
  background: var(--color-warning-muted, oklch(0.55 0.18 55 / 0.10));
  color: var(--color-stage-hot, var(--color-warning, oklch(0.55 0.18 55)));
  font-weight: 700; /* §9.5 color-blind mitigation: hot pill must be bold */
}
/* Renamed concept (not color) — `pill-green` was painted green for "Under neg"
   but canonical Scout token is brass. Keep `pill-green` selector for back-
   compat with render.js emitting that class; semantics now match brass. */
#view-dashboard .cc-card-pill-green {
  background: oklch(0.78 0.10 80 / 0.12);
  color: var(--color-stage-under-neg, oklch(0.78 0.10 80));
}

/* Dense one-line summary (plan §150). */
#view-dashboard .cc-card-summary {
  font-size: 12px;
  color: var(--text-muted, var(--muted, #6B7280));
  line-height: 1.6;
  padding-top: 8px;
  border-top: 1px solid oklch(0.20 0.010 200 / 0.05);
}
#view-dashboard .cc-card-summary b {
  color: var(--text, #1A2230);
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}
#view-dashboard .cc-card-money {
  color: var(--color-money, var(--color-green, oklch(0.55 0.12 145))) !important;
}
#view-dashboard .cc-reach-good { color: var(--color-money, var(--color-green, oklch(0.55 0.12 145))) !important; }
#view-dashboard .cc-reach-warn { color: var(--color-warning, var(--amber, oklch(0.65 0.14 75))) !important; }
#view-dashboard .cc-reach-bad  { color: var(--color-red, oklch(0.55 0.18 25)) !important; }

/* Alert pills row (plan §152 — conditional). */
#view-dashboard .cc-card-alerts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
#view-dashboard .cc-card-alert {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
/* 2026-05-23: alert pills migrated to canonical v2 tokens. "Overdue" uses
   --color-danger (the v2 token explicitly created for "overdue alerts,
   stale flags") not --color-red (DNC red). "Hot" matches pill-hot above
   (warning amber). "Callbacks" uses --color-stage-callback (teal). */
#view-dashboard .cc-card-alert-overdue {
  background: var(--color-danger-muted, oklch(0.55 0.22 27 / 0.10));
  color: var(--color-danger, oklch(0.55 0.22 27));
}
#view-dashboard .cc-card-alert-hot {
  background: var(--color-warning-muted, oklch(0.55 0.18 55 / 0.10));
  color: var(--color-stage-hot, var(--color-warning, oklch(0.55 0.18 55)));
  font-weight: 700;
}
#view-dashboard .cc-card-alert-callbacks {
  background: oklch(0.55 0.08 200 / 0.10);
  color: var(--color-stage-callback, var(--color-secondary, #298084));
}
#view-dashboard .cc-card-alert-closed {
  background: var(--color-success-muted, oklch(0.50 0.13 155 / 0.10));
  color: var(--color-money, var(--color-success, oklch(0.50 0.13 155)));
}

/* Last-call line (plan §153 — improvement #5). */
#view-dashboard .cc-card-last-call {
  font-size: 11px;
  color: var(--text-muted, var(--muted, #6B7280));
  font-family: 'JetBrains Mono', monospace;
  padding-top: 2px;
}
#view-dashboard .cc-card-last-call b {
  color: var(--text, #1A2230);
  font-weight: 600;
  font-family: inherit;
}

/* Actions row — bordered top, slight bg; Call primary + Open + Import ghost (plan §154). */
#view-dashboard .cc-card-actions-row {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid oklch(0.20 0.010 200 / 0.05);
  background: oklch(0 0 0 / 0.015);
}
#view-dashboard .cc-card-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  transition: background .12s, border-color .12s, filter .12s;
  font-family: inherit;
}
#view-dashboard .cc-card-btn-primary {
  background: var(--accent, var(--color-secondary, #298084));
  color: var(--accent-on, #FFFFFF);
  border: 1px solid var(--accent, var(--color-secondary, #298084));
}
#view-dashboard .cc-card-btn-primary:hover { filter: brightness(1.05); }
#view-dashboard .cc-card-btn-ghost {
  background: transparent;
  color: var(--text, #1A2230);
  border: 1px solid var(--color-glass-border, #E2E5EA);
}
#view-dashboard .cc-card-btn-ghost:hover {
  background: oklch(0 0 0 / 0.025);
  border-color: oklch(0.20 0.010 200 / 0.20);
}

/* Empty-card empty message (only renders when ownerCount=0). */
#view-dashboard .cc-card-empty-msg {
  font-size: 12px;
  color: var(--text-muted, var(--muted, #6B7280));
  padding: 12px 0;
  text-align: center;
}

/* ── Phase 2 mockup-fidelity (2026-05-23) — Project areas section header ──
   Per mockup .pa-hdr / .pa-title / .pa-meta / .pa-actions. Replaces the
   old standalone .cc-top-actions which had no title or meta. ─────────── */
#view-dashboard .cc-card-area-hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
#view-dashboard .cc-card-area-hdr-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
#view-dashboard .cc-card-area-title {
  font-family: 'Newsreader', 'Georgia', serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  color: var(--text, #1A2230);
  margin: 0;
  letter-spacing: -.01em;
}
#view-dashboard .cc-card-area-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted, var(--muted, #6B7280));
  letter-spacing: 0.04em;
}
#view-dashboard .cc-card-area-meta b {
  color: var(--text, #1A2230);
  font-weight: 600;
  font-family: inherit;
}

/* ── Phase 3 (2026-05-23) — Briefing chip clickability + chevron-on-hover ──
   Per plan §192-211 + dashboard-merged-mockup-2026-05-23.html L139-144 +
   chevron-right Lucide SVG inside chip that fades in on hover.
   ───────────────────────────────────────────────────────────────────── */
/* ── Phase 2 mockup-fidelity pass 3 (2026-05-23) ────────────────────
   Per user "mirror the mockup in all aspects" — close remaining gaps:
   - Welcome strip Analytics link visible (mockup L304-308)
   - Hide Zone 3 KPI strip entirely (mockup omits Zone 3 per audit note)
   ─────────────────────────────────────────────────────────────── */

/* Welcome strip Analytics link (mockup .welcome-action). */
#view-dashboard .dash-welcome-analytics-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted, var(--muted, #6B7280));
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background .1s, color .1s;
  text-decoration: none;
}
#view-dashboard .dash-welcome-analytics-link:hover {
  background: oklch(0 0 0 / 0.04);
  color: var(--text, #1A2230);
}

/* Welcome left wrapper — stack greeting on top, meta line below per mockup. */
#view-dashboard .dash-welcome-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Hide Zone 3 KPI strip — mockup omits it (line 146-151 mockup comment:
   "Zone 3 REMOVED per audit"). Slot remains in production HTML for
   future module-picker use; this just hides the default render. */
#view-dashboard .zone-frame[data-zone="3"] {
  display: none !important;
}

/* Override pre-existing .cc-bf-chip to match mockup .bf-chip exactly
   (mockup L139-144): transparent bg, hairline border, 12px dark text.
   Hover: subtle bg tint + border darken. Earlier .cc-bf-chip CSS at
   L1200+ was the legacy small-pill style; this new block takes precedence
   because it's later in the file. */
#view-dashboard .cc-bf-chip {
  background: transparent;
  border: 1px solid var(--color-glass-border, var(--hairline, #E2E5EA));
  border-radius: 16px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text, #1A2230);
  gap: 8px;
  transition: background .1s, border-color .1s;
}
#view-dashboard .cc-bf-chip:hover {
  background: oklch(0 0 0 / 0.025);
  border-color: oklch(0.20 0.010 200 / 0.18);
}
#view-dashboard .cc-bf-chip b {
  font-weight: 600;
  color: var(--text, #1A2230);
}

/* "Today's briefing" eyebrow label on left of briefing bar (mockup L431). */
#view-dashboard .cc-bf-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted, var(--muted, #6B7280));
  white-space: nowrap;
  flex-shrink: 0;
}
#view-dashboard .cc-bf-chip-chevron {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  opacity: 0;
  transition: opacity .12s, transform .12s;
  color: var(--text-muted, var(--muted, #6B7280));
}
#view-dashboard .cc-bf-chip:hover .cc-bf-chip-chevron {
  opacity: 1;
  transform: translateX(2px);
}
#view-dashboard .cc-bf-chip:hover {
  cursor: pointer;
}
#view-dashboard .cc-bf-chip-text {
  /* Plain inline — flex containers turn child <b> into flex items, which
     drops to display:block and collapses the trailing space ("25" + " follow-ups"
     would render as "25follow-ups"). Inline-block keeps the chip on one line
     via .cc-bf-chip white-space:nowrap; the <b> stays inline + spaces preserve. */
  display: inline-block;
}

/* Segment tooltip */
#view-dashboard .cc-pipe-seg .cc-pipe-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--text);
  color: var(--bg);
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 10;
}

#view-dashboard .cc-pipe-seg:hover .cc-pipe-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Pipeline counts */
#view-dashboard .cc-card-pipeline-counts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

#view-dashboard .cc-card-pipeline-counts span {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  color: var(--dim);
}

#view-dashboard .cc-pipe-count {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
}

#view-dashboard .cc-pipe-dot {
  color: var(--s4);
  font-size: 10px;
}

/* Last activity (inside Zone B) */
#view-dashboard .cc-card-activity {
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 400;
  color: var(--dim);
}

/* ── 7d. Card Zone C — Urgency + Actions (stacked layout) ── */
#view-dashboard .cc-card-actions-zone {
  padding: 10px 16px;
  border-top: 1px solid var(--s3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Alert pills — top row, full width */
#view-dashboard .cc-alert-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

#view-dashboard .cc-alert-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  min-width: 0;
}

#view-dashboard .cc-alert-pill.cc-pill-overdue {
  background: rgba(163,24,24,.10);
  color: var(--color-red);
}

#view-dashboard .cc-alert-pill.cc-pill-hot {
  background: rgba(168,55,10,.10);
  color: var(--color-orange);
}

#view-dashboard .cc-alert-pill.cc-pill-callback {
  background: rgba(29,78,216,.10);
  color: var(--color-callback-status);
}

#view-dashboard .cc-alert-pill.cc-pill-closed {
  background: rgba(13,90,43,.10);
  color: var(--color-completed);
}

/* Action buttons — bottom row, right-aligned */
#view-dashboard .cc-card-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

#view-dashboard .cc-btn-open {
  background: var(--accent);
  color: var(--s1);
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
#view-dashboard .cc-btn-open:hover { background: var(--accent-deep); }

#view-dashboard .cc-btn-call {
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
#view-dashboard .cc-btn-call:hover { background: rgba(var(--accent-rgb), .04); }

#view-dashboard .cc-btn-import {
  background: none;
  border: none;
  color: var(--dim);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s;
}
#view-dashboard .cc-btn-import:hover {
  color: var(--muted);
  text-decoration: underline;
}

/* ── 7e. Card Expandable Owner List ──────────────────────── */
#view-dashboard .cc-card-expand {
  border-top: 1px solid var(--s3);
  max-height: 280px;
  overflow-y: auto;
  animation: cc-slideUp 0.2s ease;
}

#view-dashboard .cc-expand-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 4px;
  position: sticky;
  top: 0;
  background: var(--s1);
  z-index: 1;
}

#view-dashboard .cc-expand-label {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dim);
}

#view-dashboard .cc-expand-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--dim);
}

#view-dashboard .cc-expand-list {
  padding: 0 8px 8px;
}

#view-dashboard .cc-expand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
}
#view-dashboard .cc-expand-row:hover {
  background: var(--s3);
}

#view-dashboard .cc-expand-name {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-dashboard .cc-expand-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--dim);
  text-transform: capitalize;
  flex-shrink: 0;
}

#view-dashboard .cc-expand-status.cc-es-under-psa { color: var(--color-under-psa); }
#view-dashboard .cc-expand-status.cc-es-under-negotiation { color: var(--color-under-neg); }
#view-dashboard .cc-expand-status.cc-es-callback { color: var(--color-callback-status); }
#view-dashboard .cc-expand-status.cc-es-answered { color: var(--color-answered); }
#view-dashboard .cc-expand-status.cc-es-no-answer { color: var(--color-no-answer); }
#view-dashboard .cc-expand-status.cc-es-completed { color: var(--color-completed); }

#view-dashboard .cc-expand-offer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-completed);
  flex-shrink: 0;
}

/* Expand sections divider */
#view-dashboard .cc-expand-section + .cc-expand-section {
  border-top: 1px solid var(--s3);
}

/* Wells/properties section */
#view-dashboard .cc-expand-wells {
  padding: 0 8px 8px;
}

#view-dashboard .cc-expand-county {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 2px;
}

#view-dashboard .cc-expand-county-name {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#view-dashboard .cc-expand-county-wells {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--dim);
}

#view-dashboard .cc-expand-well {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--dim);
  padding: 2px 8px 2px 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#view-dashboard .cc-expand-well-more {
  color: var(--dim);
  font-style: italic;
}

/* Hot lead indicator */
#view-dashboard .cc-expand-hot {
  font-size: 10px;
  flex-shrink: 0;
}

/* Phase QC-0 (Quick Call V2 prep): base .cc-expand-pill chrome + color
   variants moved to src/css/components.css as unscoped primitive (per plan
   D-QC-12 + sub-step 2a). This block keeps ONLY the dashboard-specific
   row-density override per CLAUDE.md R7.4 (48px row, 2-line content).
   The round-pill shape (999px radius), uppercase text, font-weight 600,
   and margin-left:4px for inline-with-name placement are dashboard-style
   choices and stay scoped here. */
#view-dashboard .cc-expand-row .cc-expand-pill {
  padding: 1px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.3;
  margin-left: 4px;
}
/* DNC + sold + snoozed rows are de-emphasised: strikethrough name,
   reduced opacity. Hot lead overrides take precedence visually. */
#view-dashboard .cc-expand-row-dnc .cc-expand-name { text-decoration: line-through; color: var(--dim); }
#view-dashboard .cc-expand-row-snoozed,
#view-dashboard .cc-expand-row-decd { opacity: 0.65; }

/* NRA on owner rows */
#view-dashboard .cc-expand-nra {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--dim);
  flex-shrink: 0;
}

#view-dashboard .cc-expand-more {
  padding: 6px 16px 10px;
  font-size: 11px;
  color: var(--dim);
  text-align: center;
}
#view-dashboard .cc-expand-more a {
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
#view-dashboard .cc-expand-more a:hover { text-decoration: underline; }

/* ── 7f. Card Empty Message ──────────────────────────────── */
#view-dashboard .cc-card-empty-msg {
  padding: 20px 16px;
  font-size: 13px;
  color: var(--dim);
  flex: 1;
  line-height: 1.5;
}

/* ── 8. Card Variants ──────────────────────────────────────── */
#view-dashboard .cc-card.cc-paused { opacity: 0.65; }
#view-dashboard .cc-card.cc-empty { border-style: dashed; }

/* ── 9. Empty State (no projects) ──────────────────────────── */
#view-dashboard .cc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 80px;
  text-align: center;
}

#view-dashboard .cc-empty-icon {
  margin-bottom: 24px;
  opacity: 0.6;
  color: var(--dim);  /* drives currentColor for SVG primitives — Track G.3 token-discipline */
}

#view-dashboard .cc-empty-title {
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
}

#view-dashboard .cc-empty-desc {
  font-size: 13px;
  color: var(--dim);
  margin: 0 0 24px;
  max-width: 360px;
}

#view-dashboard .cc-empty-actions { display: flex; gap: 12px; }

#view-dashboard .cc-primary-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--s1);
  background: var(--accent);
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  cursor: pointer;
  transition: background 0.15s;
}
#view-dashboard .cc-primary-btn:hover { background: var(--accent-deep); }

#view-dashboard .cc-secondary-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: var(--s1);
  border: 1px solid var(--s3);
  border-radius: 8px;
  padding: 10px 24px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
#view-dashboard .cc-secondary-btn:hover {
  border-color: var(--s4);
  color: var(--text);
}

/* ── Agent welcome empty-state (CO-032 P2.2) ───────── */
/* Replaces the default "+ Create Project Area" CTA when role=agent and no
   projects are visible. Surfaces mailto contacts for owners/managers so the
   agent knows who to ask for project access. */
#view-dashboard .cc-empty-contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  margin-top: 8px;
}
#view-dashboard .cc-empty-no-contacts {
  font-size: 12px;
  color: var(--dim);
  font-style: italic;
  padding: 12px;
}
#view-dashboard .cc-empty-contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--s3);
  border-radius: 8px;
  background: var(--s1);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
}
#view-dashboard .cc-empty-contact-row:hover {
  border-color: var(--accent);
  background: var(--s2);
}
#view-dashboard .cc-empty-contact-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--s1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
#view-dashboard .cc-empty-contact-meta {
  flex: 1;
  min-width: 0;
}
#view-dashboard .cc-empty-contact-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-dashboard .cc-empty-contact-sub {
  font-size: 11px;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-dashboard .cc-empty-contact-icon {
  flex-shrink: 0;
  color: var(--dim);
}
#view-dashboard .cc-empty-contact-row:hover .cc-empty-contact-icon {
  color: var(--accent);
}

/* ── 10. Activity Ticker (bottom strip — elevated) ───────── */
/* 2026-05-24: entire ticker bar uses the tinted bg color (was: white
   strip + tinted label rectangle). Label still sticky-pins to the left,
   items scroll horizontally to its right. Unified bg removes the
   visual "rectangle within a rectangle" pattern. */
#view-dashboard .cc-ticker {
  position: sticky;
  bottom: 0;
  z-index: 150;
  background: var(--s3, #E5E7EB);
  border-top: 1px solid var(--s4, #D1D5DB);
  /* 2026-05-24 (foundation cleanup): dash uses padding-based 36px
     gutter on both sides — ticker escapes via symmetric -36px each
     side to span the full main width. */
  margin-left: -36px;
  margin-right: -36px;
  width: calc(100% + 72px);
  max-width: calc(100% + 72px);
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;  /* hide inner scrollbar artifact; inner does the scroll */
  box-shadow: 0 -2px 8px rgba(0,0,0,.03);
}

#view-dashboard .cc-ticker-items {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 42px;
  padding: 10px 28px;
  box-sizing: border-box;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}

#view-dashboard .cc-ticker-label {
  position: sticky;
  /* left:-28px counters parent's 28px padding-left so the label's bg
     extends flush to the ticker's left edge (= sidebar right edge). */
  left: -28px;
  z-index: 2;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  flex-shrink: 0;
  /* Same bg as ticker (--s2) so the label blends visually with the bar.
     Sticky positioning locks it in place; soft right-edge shadow in the
     same color fades any items scrolling underneath. */
  background: var(--s2, #F4F5F7);
  padding: 11px 16px 11px 28px;
  margin: -10px 16px -10px -28px;
  box-shadow: 8px 0 8px -4px var(--s2, #F4F5F7);
  align-self: stretch;
  display: inline-flex;
  align-items: center;
}

/* ── Today's-Queue band overflow popup (pass-23) ────────── */
#__nq_band_popup__.nq-band-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: oklch(0.20 0.010 200 / 0.40);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  animation: nqBandPopupIn .12s ease-out;
}

@keyframes nqBandPopupIn { from { opacity: 0; } to { opacity: 1; } }

#__nq_band_popup__ .nq-band-popup {
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--color-glass-border, #E2E5EA);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--shadow-overlay, 0 16px 48px rgba(15,23,42,.18));
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* DESIGN-1: header is now transparent — one card surface, no "tab bar"
   banding. Band icon (DESIGN-1) sits left of the label so the popup
   keeps visual continuity with the dashboard band that opened it. */
#__nq_band_popup__ .nq-band-popup-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--s2, #F4F5F7);
  background: transparent;
}

#__nq_band_popup__ .nq-band-popup-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--nq-band-color, var(--text-muted));
  flex-shrink: 0;
}
#__nq_band_popup__ .nq-band-popup-icon svg {
  width: 14px;
  height: 14px;
}

#__nq_band_popup__ .nq-band-popup-label {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.005em;
}

/* DESIGN-2: count chip demoted to Scout canonical muted-bg + colored-text
   pattern (mirrors .nq-section-count in dashboard.css). Eliminates the
   prior saturated red on Priority. Color still wayfinding, volume ambient. */
#__nq_band_popup__ .nq-band-popup-count {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
  background: oklch(0 0 0 / 0.04);
  color: var(--nq-band-color, var(--text-muted));
  line-height: 1.4;
}

#__nq_band_popup__ .nq-band-popup-close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
}
#__nq_band_popup__ .nq-band-popup-close:hover {
  background: var(--s3, #E5E7EB);
  color: var(--text);
}
#__nq_band_popup__ .nq-band-popup-close:focus-visible {
  outline: 2px solid var(--color-secondary, #298084);
  outline-offset: 2px;
  background: var(--s2, #F4F5F7);
  color: var(--text);
}

#__nq_band_popup__ .nq-band-popup-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

/* DESIGN-6: row tightened to 48px canonical (R7.4) — 8px vertical padding
   on a 28px avatar + 2-line content. Column trims reclaim 14px for name. */
#__nq_band_popup__ .nq-band-popup-body .nq-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 92px 104px;
  gap: 12px;
  padding: 8px 20px;
  align-items: center;
  border-top: 1px solid var(--s2, #F4F5F7);
  border-bottom: none;
  cursor: pointer;
  background: transparent;
  transition: background .12s;
}
#__nq_band_popup__ .nq-band-popup-body .nq-row:first-child {
  border-top: none;
}
/* DESIGN-8: hover tinted toward teal accent (was flat neutral) — reads as
   "this row is the active target," not "this row went grey." */
#__nq_band_popup__ .nq-band-popup-body .nq-row:hover {
  background: oklch(0.55 0.08 200 / 0.06);
}
/* DESIGN-7: focus ring for keyboard nav — inset so it sits inside the row's
   hairline border without clipping. Tinted bg matches hover for coherence. */
#__nq_band_popup__ .nq-band-popup-body .nq-row:focus-visible {
  outline: 2px solid var(--color-secondary, #298084);
  outline-offset: -2px;
  background: oklch(0.55 0.08 200 / 0.08);
}
#__nq_band_popup__ .nq-band-popup-body .nq-row-due,
#__nq_band_popup__ .nq-band-popup-body .nq-row-actions {
  display: none;
}
/* DESIGN-3: override inherited align-items:center from dashboard inline-row
   rule. In the popup's 310px-wide name column, centering created a ragged
   left edge fighting the avatar / status / money left-edges. */
#__nq_band_popup__ .nq-band-popup-body .nq-row-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
  min-width: 0;
}
#__nq_band_popup__ .nq-band-popup-body .nq-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #1A2230);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#__nq_band_popup__ .nq-band-popup-body .nq-row-sub {
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted, #6B7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#__nq_band_popup__ .nq-band-popup-body .nq-row-status {
  font-size: 11px;
  text-align: left;
}
#__nq_band_popup__ .nq-band-popup-body .nq-row-offer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--color-money, var(--color-success, #15803D));
}

/* DESIGN-5: tablet — money column is the triage field, keep it; drop the
   status pill (band itself implies status). Closes a P1 regression where
   tablet hid money entirely but still reserved its grid slot (empty cell). */
@media (max-width: 768px) {
  #__nq_band_popup__ .nq-band-popup-body .nq-row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 12px;
  }
  #__nq_band_popup__ .nq-band-popup-body .nq-row-status { display: none; }
  #__nq_band_popup__ .nq-band-popup-body .nq-row-offer {
    display: block;
    font-size: 12px;
    text-align: right;
  }
}

/* DESIGN-4: empty-state for buckets that came back empty.
   Newsreader italic headline (Scout's editorial display) + muted sub. */
#__nq_band_popup__ .nq-band-popup-empty {
  padding: 48px 24px 56px;
  text-align: center;
}
#__nq_band_popup__ .nq-band-popup-empty-title {
  font-family: 'Newsreader', 'Georgia', serif;
  font-style: italic;
  font-size: 20px;
  font-weight: 500;
  color: var(--text, #1A2230);
  margin-bottom: 6px;
}
#__nq_band_popup__ .nq-band-popup-empty-sub {
  font-size: 13px;
  color: var(--muted, #6B7280);
}

/* 2026-05-24 (audit ISSUE-3): demoted to a passive muted link so it
   reads as "browse / view" instead of competing with the action chip
   (Start queue / Triage all) which is the actual outbound-call CTA.
   Visual rank: filled-chip CTA > muted-link affordance. */
#view-dashboard .nq-section-viewall {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 6px 12px 4px auto;
  padding: 5px 4px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted, #6B7280);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color .12s, text-decoration-color .12s;
}
#view-dashboard .nq-section-viewall:hover {
  color: var(--text, #1A2230);
  text-decoration-color: currentColor;
}
#view-dashboard .nq-section-viewall svg {
  width: 10px;
  height: 10px;
  opacity: 0.55;
}
/* Right-align by placing button as a flex item that pushes itself right */
#view-dashboard .nq-section[data-nq-band="priority"] .nq-section-body {
  display: flex;
  flex-direction: column;
}

#view-dashboard .cc-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  flex-shrink: 0;
}

#view-dashboard .cc-ticker-item b {
  color: var(--text);
  font-weight: 600;
}

/* Status dot before each ticker item */
#view-dashboard .cc-ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

#view-dashboard .cc-ticker-item .cc-ticker-ago {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--dim);
}

#view-dashboard .cc-ticker-link {
  margin-left: auto;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: 1px solid var(--s3);
  border-radius: 6px;
  transition: border-color 0.15s, background 0.15s;
}
#view-dashboard .cc-ticker-link:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), .04);
  text-decoration: none;
}
#view-dashboard .cc-ticker-empty { color: var(--muted); font-style: italic; }
#view-dashboard .cc-ticker-sep { color: var(--s4); font-size: 14px; margin: 0 2px; }

/* ── 11. Top Action Buttons (above card grid) ────────────── */
#view-dashboard .cc-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}

#view-dashboard .cc-ghost-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--dim);
  background: var(--s1);
  border: 1px solid var(--s3);
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
#view-dashboard .cc-ghost-btn:hover {
  border-color: var(--s4);
  color: var(--muted);
}

/* ── 12. Archived Projects Section ───────────────────────── */
#view-dashboard .cc-archived-section {
  grid-column: 1 / -1;
  margin-top: 12px;
}

#view-dashboard .cc-archived-section summary,
#view-dashboard .cc-archived-toggle {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--dim);
  cursor: pointer;
  padding: 8px 0;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
#view-dashboard .cc-archived-toggle:hover,
#view-dashboard .cc-archived-section summary:hover { color: var(--dim); }

#view-dashboard .cc-archived-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}

#view-dashboard .cc-archived-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  color: var(--dim);
  transition: background 0.12s;
}
#view-dashboard .cc-archived-row:hover { background: rgba(var(--accent-rgb), .04); }

#view-dashboard .cc-archived-row .cc-arch-name,
#view-dashboard .cc-archived-name {
  font-weight: 500;
  color: var(--dim);
}

#view-dashboard .cc-archived-row .cc-arch-county {
  font-weight: 400;
  color: var(--dim);
}

#view-dashboard .cc-archived-row .cc-arch-date {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--s4);
}

#view-dashboard .cc-archived-meta {
  font-size: 11px;
  color: var(--dim);
}

#view-dashboard .cc-archived-restore {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 1px solid var(--s3);
  border-radius: 4px;
  padding: 2px 10px;
  cursor: pointer;
  margin-left: auto;
  transition: border-color 0.15s, background 0.15s;
}
#view-dashboard .cc-archived-restore:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), .04);
}


/* ── 14. Animations (@keyframes) ────────────────────────── */
@keyframes cc-cardIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cc-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes cc-slideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ── 15. Responsive ─────────────────────────────────────── */
@media (max-width: 1024px) {
  #view-dashboard .cc-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  /* Briefing bar compact */
  #view-dashboard .cc-briefing-bar { padding: 0 12px; }

  /* KPI cards 2x2 */
  #view-dashboard .cc-kpi-row {
    grid-template-columns: repeat(2, 1fr);
    padding: 12px 12px 0;
    gap: 10px;
  }
  #view-dashboard .cc-kpi-value { font-size: 20px; }

  /* Card grid single column */
  #view-dashboard .cc-card-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #view-dashboard .cc-card-area { padding: 12px 12px 72px; }

  /* Ticker hidden */
  #view-dashboard .cc-ticker { display: none; }

}

@media (max-width: 480px) {
  #view-dashboard .cc-kpi-row {
    grid-template-columns: 1fr;
    padding: 8px 8px 0;
  }
  #view-dashboard .cc-kpi-card { padding: 12px 16px; }
  #view-dashboard .cc-kpi-value { font-size: 18px; }
  #view-dashboard .cc-card-area { padding: 8px 8px 64px; }

  /* Briefing collapses */
  #view-dashboard .cc-bf-inline { display: none; }
}

/* ── 16. Print / Reduced Motion ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #view-dashboard .cc-card,
  #view-dashboard .cc-kpi-card { animation: none; }
  #view-dashboard .cc-card:hover,
  #view-dashboard .cc-kpi-card:hover { transform: none; }
  #view-dashboard .cc-pipe-seg .cc-pipe-tip { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   MOCKUP PARITY OVERRIDES (2026-05-23 pass 6)
   Computed-style diff against docs/specs/dashboard-merged-mockup-2026-05-23.html
   surfaced 15+ format/sizing/color differences. This block ends the file so
   it wins source-order over any prior rule. Every rule cites its mockup line.
   ══════════════════════════════════════════════════════════════════════ */

/* Base — variables-v2.css sets body font-size to 12.25px via --text-body;
   mockup §35 sets body to 13px. Override at the view scope so the whole
   dashboard cascades from 13px not 12.25px.
   Max-width pinned to mockup's content-area width so dashboard proportions
   match regardless of sidebar collapse state. Aligned LEFT (not centered)
   so the dashboard sits next to the sidebar with mockup's 36px left gap,
   matching mockup §63 `.main { padding: 28px 36px 28px }`. */
/* 2026-05-24: foundation cleanup — one rule, both sidebar states.
   Padding-based gutter (not margin) so dash always fills its parent
   <main> (whatever width that is — 1200px expanded, 1388px collapsed,
   1748px at 1800vp collapsed, etc.) with a consistent 36px gutter on
   both sides. Full-bleed children (ticker) escape via -36px negative
   margins which are now mathematically consistent regardless of
   sidebar state. No max-width, no margin-right swings. */
#view-dashboard {
  font-size: 13px;
  max-width: none;
  margin: 0;
  padding-left: 36px;
  padding-right: 36px;
  box-sizing: border-box;
}

/* 2026-05-24: when sidebar is collapsed AND viewport is wide enough,
   allow a 4-column project card grid so wide-screen real estate fills
   with more cards instead of just stretching three giant cards. The
   threshold (1500px viewport - 52px sidebar = ~1450px content) puts
   4 cards at ~340px each, still readable. The default 3-col layout
   (line 4103) wins under 1500px viewport. */
@media (min-width: 1500px) {
  body.sb-collapsed #view-dashboard .cc-card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1900px) {
  body.sb-collapsed #view-dashboard .cc-card-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Welcome greeting — mockup §68 .welcome-greet is 32px italic Newsreader.
   Existing rule at L152 is 24px. */
#view-dashboard .dash-welcome-greeting {
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

/* Zone 1 hero card — mockup §85 .next-card border-radius is 12px.
   Existing :root[data-v2] override drops it to 10px. */
#view-dashboard .next-card {
  border-radius: 12px;
}

/* Zone 1 hero — money green token. Mockup §95 .next-offer uses
   oklch(0.55 0.12 145); live computes oklch(0.5 0.13 155) — slightly
   bluer hue and lower lightness. Lock the mockup hue. */
#view-dashboard .next-offer,
#view-dashboard .nq-row-offer {
  color: oklch(0.55 0.12 145);
}

/* Zone 1 hero — always-on context box. Mockup §92-93 .next-context with
   "Last note" eyebrow always renders. Live skipped when no callLog data,
   leaving a vertical gap where the box should be. Render the box always
   via the existing contextText fallback chain in render.js — handled in JS.
   Box itself stays at 12px italic, oklch tint bg. */

/* Zone 2 queue shell — mockup §103 border-radius 12px. */
#view-dashboard .tq-shell {
  border-radius: 12px;
}

/* Zone 2 band header — live computed border-radius "13px 13px 0 0" leaking
   from somewhere. Mockup §108 has no radius on the band header (sits
   flat between hairline-bordered sections). */
#view-dashboard .nq-section-hdr {
  border-radius: 0;
}

/* Zone 2 rows — mockup §117 has transparent bg + border-top hairline-2.
   Live computed bg=white + no border-top. Fix both. */
#view-dashboard .nq-row {
  background: transparent;
  border-top: 1px solid oklch(0.20 0.010 200 / 0.05);
  border-bottom: none;
}
#view-dashboard .nq-row:hover {
  background: oklch(0.55 0.08 200 / 0.04);
}

/* Briefing bar — mockup §138 padding is 12px 18px (live had 12px 28px).
   Also live computed flex-direction: column — some other rule was
   stacking the chips vertically. Force row. */
#view-dashboard .cc-briefing-bar {
  flex-direction: row;
  padding: 12px 18px;
}

/* Project areas section — mockup §155 has no internal padding, just
   margin-bottom 32px. Live had 20px 28px 60px which inflated height. */
#view-dashboard .cc-card-area {
  padding: 0;
  margin-bottom: 32px;
}

/* Project card — mockup §161 background var(--surface) = oklch(0.995 0.003 200),
   border 1px hairline = oklch(0.20 0.010 200 / 0.10), radius 12px. Live had
   oklch(0.96 0.006 200) bg (much grayer) + oklch(0.88 0.01 200) border
   (much darker) + 10px radius. */
#view-dashboard .cc-card {
  background: oklch(0.995 0.003 200);
  border: 1px solid oklch(0.20 0.010 200 / 0.10);
  border-radius: 12px;
}

/* Project card name — mockup §171 .pa-name is 22px Newsreader italic.
   Live had 24px. */
#view-dashboard .cc-card-title {
  font-size: 22px;
}

/* Project card pipeline bar — mockup §195 bg oklch(0 0 0 / 0.04),
   radius 3px, no gap between segments (segments flush). Live had
   oklch(0.93 0.008 200) bg, 4px radius, 1px gap. */
#view-dashboard .cc-card-pipeline-bar {
  background: oklch(0 0 0 / 0.04);
  border-radius: 3px;
  gap: 0;
}

/* Pipeline segment colors — mockup §197-202 uses specific OKLCH values
   that don't match Scout's status tokens. Override per-segment to match
   mockup exactly. */
#view-dashboard .cc-pipe-seg.seg-new        { background: oklch(0.78 0.018 200); }
#view-dashboard .cc-pipe-seg.seg-no-answer  { background: oklch(0.55 0.18 25); }
#view-dashboard .cc-pipe-seg.seg-answered   { background: oklch(0.55 0.12 145); }
#view-dashboard .cc-pipe-seg.seg-callback   { background: oklch(0.55 0.08 200); }
#view-dashboard .cc-pipe-seg.seg-under-psa  { background: oklch(0.72 0.12 80); }
#view-dashboard .cc-pipe-seg.seg-completed  { background: oklch(0.50 0.10 200); }

/* Pipeline strip height — mockup §195 = 6px. Live was 8px. */
#view-dashboard .cc-card-pipeline-bar {
  height: 6px;
}

/* Card summary reach + money colors — mockup §187-190 uses var(--green/amber/red)
   tokens. Live uses slightly different OKLCH values from its own theme. */
#view-dashboard .cc-card-summary .cc-reach-good,
#view-dashboard .cc-card-summary .cc-card-money {
  color: oklch(0.55 0.12 145);
}
#view-dashboard .cc-card-summary .cc-reach-warn {
  color: oklch(0.65 0.14 75);
}
#view-dashboard .cc-card-summary .cc-reach-bad {
  color: oklch(0.55 0.18 25);
}

/* 2026-05-24: ticker bg unified — using --s2 (oklch 0.93) lighter than
   --s3 (oklch 0.88) since the s3 tint was too dark / overbearing per
   user feedback. Label also picks up --s2 so both blend visually. */
#view-dashboard .cc-ticker {
  background: var(--s2, #F4F5F7);
}

/* Zone 1 hero — the legacy wrapper `#cc-next-action-hero` had
   `padding: 20px 28px 0` (R4b era) which shrank the .next-card from the
   360px grid-cell width down to 304px. Mockup §319-340 places .next-card
   directly inside the zone with no padded wrapper. Drop the wrapper
   padding so the card fills the cell. */
#view-dashboard .cc-next-action-hero {
  padding: 0;
  height: 100%;
}
#view-dashboard .zone-frame[data-zone="1"],
#view-dashboard .zone-frame[data-zone="1"] .zone-content {
  height: 100%;
}
/* Mockup §85 `.next-card { min-height: 100% }` — stretches the card to
   fill the grid cell so its height matches Zone 2 queue. Combined with
   `margin-top: auto` on .next-stats, the offer + Call CTA stays pinned
   to the bottom of the card. */
#view-dashboard .next-card {
  min-height: 100%;
}

/* Trial banner — billing-banner-slot above the dashboard view. Mockup
   doesn't model billing state; hide on dashboard to match the design.
   `data-current-view` attribute is set on <body> by switchView; the banner
   still renders on every other view via the existing billing.js slot. */
body[data-current-view="dashboard"] #billing-banner-slot {
  display: none !important;
}

/* Welcome strip — mockup §66-69: greet + meta INLINE on the same row
   (flex, align-items: baseline, gap 20px). Live had `flex-direction:
   column` cascading from somewhere; force row explicitly. Plus collapse-
   to-content width was making the meta wrap; flex:1 expands the
   container to its share of the welcome row. 1px hairline border-bottom
   per mockup §66 (live had a stronger var(--s3) border). */
#view-dashboard .dash-welcome-left {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
#view-dashboard .dash-welcome-greeting {
  flex-shrink: 0;
}
#view-dashboard .dash-welcome {
  border-bottom: 1px solid oklch(0.20 0.010 200 / 0.10);
  margin-bottom: 22px; /* mockup §66 — breathing room between welcome strip and Zone 1+2 row */
}

/* Project areas — mockup §155-160: FLAT 3-col grid, no client group
   headers. Live grouped by client; the visual cluttered the grid and
   didn't match the design. Hide client headers + force a 3-col grid. */
#view-dashboard .cc-client-hdr {
  display: none;
}
#view-dashboard .cc-card-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1180px) {
  #view-dashboard .cc-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  #view-dashboard .cc-card-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   MOCKUP PARITY OVERRIDES — PASS 16 (2026-05-23 agent)
   Computed-style diff vs docs/specs/dashboard-merged-mockup-2026-05-23.html
   ran via playwright at 1440×900. Every rule cites its diff source.
   ══════════════════════════════════════════════════════════════════════ */

/* D1, D8, D13, D25, D28 — Surface bg parity.
   Mockup §10 `--surface: oklch(0.995 0.003 200)` — slightly tinted white.
   Scout live cards/shells use pure `rgb(255,255,255)`. Tint to match. */
#view-dashboard .next-card,
#view-dashboard .tq-shell,
#view-dashboard .cc-briefing-bar,
#view-dashboard .cc-card {
  background: oklch(0.995 0.003 200);
}

/* D25 — Project card box-shadow. Mockup §161 has no shadow on cards (flat).
   Scout live has subtle 1px 3px shadow. Remove. */
#view-dashboard .cc-card {
  box-shadow: none;
}

/* D3, D4, D15, D17, D18 — Muted text tone. Mockup §13 `--text-muted: oklch(0.50 0.008 200)`.
   Scout live emits 0.45 lightness (darker). Re-lighten all secondary copy. */
#view-dashboard .next-eyebrow,
#view-dashboard .next-meta,
#view-dashboard .cc-card-client,
#view-dashboard .cc-card-summary,
#view-dashboard .cc-card-last-call,
#view-dashboard .tq-shell-summary,
#view-dashboard .cc-bf-eyebrow {
  color: oklch(0.50 0.008 200);
}

/* D16 — Project card county sub-line. Mockup §172 11px Geist, --text-muted.
   Live 12px, color 0.58. Match font-size + color. */
#view-dashboard .cc-card-county {
  font-size: 11px;
  color: oklch(0.50 0.008 200);
}

/* D5 — Hero stats `<small>` label. Mockup §96 keeps it as JetBrains Mono
   10px uppercase letter-spacing 0.08em (1.2px at 10px → +0 visually).
   Live already correct in mono + uppercase but letter-spacing 0.08em
   (target = 0.8px) matches; keep as-is. The visual difference vs mockup
   was the WIDTH because live used a `.next-stats-offer` wrapper which
   makes the offer block stretch full width pushing the button out.
   Fix the block layout: `.next-stats-offer` should be inline so the
   `<small>` label sits ABOVE `$X,XXX` and both hug the left, with the
   CTA hugging the right via space-between. */
#view-dashboard .next-stats {
  align-items: center; /* mockup §94: align-items: center */
  padding-top: 10px;
  border-top: 1px solid oklch(0.20 0.010 200 / 0.05); /* mockup §94 var(--hairline-2) */
}
#view-dashboard .next-stats-offer {
  display: block; /* mockup wraps in a plain <div>, label above amount */
}

/* D6 — `.next-offer` mockup §95 `display: inline-flex` (inside its parent div).
   Live had it as block. The label `<small>` sits above the offer in mockup
   via `small { display: block; margin-bottom: 2px }`. Restore the inline
   relationship for the amount line. */
#view-dashboard .next-offer {
  display: inline-block;
}

/* D7 — `.next-cta` height. Mockup §97 .btn-primary padding 9px 16px, font 13/600,
   line-height inherited (~17), total 35px. Live computes 37px because of
   line-height 1.4. Force line-height: 1 to match. */
#view-dashboard .next-cta {
  line-height: 1;
}

/* D9 — Queue header (`tq-shell-hdr` matches mockup `queue-hdr`).
   Mockup §104: padding 14px 18px 12px, border-bottom 1px hairline.
   Live computed identical — OK. */

/* D10, D11 — Band header (`.nq-section-hdr` matches mockup `.queue-band-hdr`).
   Mockup §108: padding 10px 18px, no border-bottom, no box-shadow.
   Live has heavy box-shadow `rgba(0,0,0,0.3) 0 2px 8px` + border-bottom.
   Remove both, and tighten line-height (live computes 42px vs mockup 39.4 because
   the label has default line-height 1.5; mockup uses ~1.3). */
#view-dashboard .nq-section-hdr {
  box-shadow: none;
  border-bottom: none;
  line-height: 1.3;
}
/* Queue header title (mockup §105 `.queue-title { font-size: 15; font-weight: 600 }`)
   computed 21.75px in mockup, 24px in live — same line-height squeeze. */
#view-dashboard .tq-shell-title {
  line-height: 1.3;
}
/* Mockup §115: `.queue-band + .queue-band { border-top: 1px hairline }` — bands
   separate via top border, not on header. Re-create on the section wrappers. */
#view-dashboard .nq-stack > .nq-section + .nq-section,
#view-dashboard .nq-stack > .nq-section-hdr + .nq-section-hdr {
  border-top: 1px solid oklch(0.20 0.010 200 / 0.10);
}

/* D10 — Band header sub text + count + action: align to mockup.
   `.queue-band-label` 13/600 ✓ existing
   `.queue-band-count` mono 12/600 ✓ ✓ existing on `.nq-section-count`
   `.queue-band-sub` 12/400, color text-muted ✓
   `.queue-band-action` 11/600, uppercase, accent, letter-spacing 0.08em */
#view-dashboard .nq-section-action,
#view-dashboard .nq-section-hdr .nq-action {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: oklch(0.55 0.08 200);
}

/* D12 — Queue rows. Mockup §117 `.qrow { padding: 9px 18px; border-top: 1px hairline-2 }`.
   Live had 9px 18px already (correct). Height delta (56 vs 59) comes from
   line-height of name (mockup .qrow-name 13/600 line-height ~18; live computes
   20.8px). Tighten line-height. */
#view-dashboard .nq-row-name {
  line-height: 1.3;
}

/* D14, D19 — Briefing bar typography. Mockup §139 `briefing-eyebrow` letter-spacing
   0.14em → 1.4px at 10px. Live computes 1.4 already. OK.
   But mockup .briefing → `flex-wrap: wrap`. Live `cc-briefing-bar` doesn't wrap
   currently — chips collapse instead. Set flex-wrap. */
#view-dashboard .cc-briefing-bar,
#view-dashboard .cc-bf-row2 {
  flex-wrap: wrap;
}

/* D20 — Welcome strip padding & margin. Mockup §66 originally specified
   no top padding, but the live UI hugged the page top with the greeting
   visually cramped — 2026-05-24 user feedback: "add space between the
   very top of the page and the greeting". Restore 32px top while
   keeping the mockup's 24px gap + 18px bottom margin. */
#view-dashboard .dash-welcome {
  padding: 32px 0 14px;
  margin: 0 0 18px;
  gap: 24px;
}

/* D21 — Welcome right cluster gap (mockup §70: 12px; live: 10px). */
#view-dashboard .dash-welcome-right {
  gap: 12px;
}

/* D24, D26 — Newsreader heading letter-spacing. Mockup §68 welcome-greet
   `letter-spacing: -0.015em` → -0.48px at 32px ≈ matches live -0.48.
   Mockup §171 .pa-name `letter-spacing` unset → normal (display: inherits).
   Live emits -0.22px (because h3 in components.css applies tighter tracking).
   Reset to match mockup which uses default ≈ -0.11. */
#view-dashboard .cc-card-title,
#view-dashboard .cc-card-area-title {
  letter-spacing: -0.005em; /* ~-0.11px at 22px, matching mockup .pa-name visual */
}

/* D27 — Pipeline segments. Mockup §195: parent `.pa-pipeline { border-radius: 3px;
   overflow: hidden; height: 6px }`. Segments are `height: 100%` with NO radius
   (rounded only via overflow on parent). Live computes 4px radius on segments
   — drop. Selector specificity needs to match the earlier rule
   `#view-dashboard .cc-card-pipeline-bar .cc-pipe-seg` (2-class) so we mirror
   it here to win on source-order. */
#view-dashboard .cc-card-pipeline-bar .cc-pipe-seg {
  border-radius: 0;
}
#view-dashboard .cc-card-pipeline-bar {
  overflow: hidden;
}

/* D28 — Ticker full-bleed. Mockup §231 `.ticker { margin: 0 -36px -28px }` so the
   ticker extends past the 1148px content column to the viewport edge. Live ticker
   sits inside the column (1148px wide) with `margin: 0`. Replicate the bleed —
   negative left margin equal to the dashboard's `margin-left: 36px`, and right margin
   to push to viewport edge. Need negative bottom to push under main padding. */
#view-dashboard .cc-ticker {
  margin: 0 -36px -28px;
  border-top: 1px solid oklch(0.20 0.010 200 / 0.10);
}

/* D2 — Hero card vs queue height mismatch. Mockup hero+queue both 338px.
   Live queue is 399px (rows + band header + queue header sum higher).
   Root: live queue has Priority band header (43px) + 3 rows (~59px each)
   + Stale header (43px) + Dead-letter header (43px) + show-more (~30px)
   + queue-hdr (51px) = 51+43+59*3+1+43+1+43+1+30 ≈ 390. Mockup has 3
   bands too but headers are 39px (no border-bottom + no shadow), rows
   are 56px each, and no show-more. So tightening band headers + rows
   was the main delta. With the line-height fix above (D12) and shadow
   removal (D10/D11), this should drop to ~338.
   Additionally make sure the hero `.next-card` `min-height: 100%` (already
   set in pass 9) stretches to match the queue's actual height. */

/* D29 — Project card actions row buttons. Mockup §217: `.pa-action-btn { padding:
   7px 8px; font: 12/600; gap: 5px }` → 30px tall. Live 31.5px (line-height again).
   Tighten. */
#view-dashboard .cc-card-btn {
  line-height: 1;
}

/* D30 — Inline Hot badge in nq-row-name. The mockup keeps the badge INSIDE
   the name span (`<div class="qrow-name">Mary Davis <span class="badge badge-hot">
   Hot</span></div>`), then the Answered/No-answer status pill sits as a SEPARATE
   grid column. Scout's live nq-row-name is just text without inline badge. The
   render.js change to inject the inline badge would be a structural change; for
   pure CSS parity the visual delta is minor and acceptable.
   No CSS change here — flagged for render.js follow-up if pixel-equiv is required. */

/* Cleanup: ensure mockup-parity color tokens don't drift on hover/focus paths.
   Hero card hovers in mockup are not interactive; keep static. */
#view-dashboard .next-card:hover {
  background: oklch(0.995 0.003 200); /* no hover shift, match flat surface */
}

/* D31 — Zone 2 inner padding. `.cc-today-queue` wraps `.tq-shell` and adds
   `padding: 16px 28px 0` which makes zone-content 16px taller than the queue
   shell, which in turn forces the hero's `min-height: 100%` to overshoot the
   queue. Mockup §326 places `.queue-shell` directly in the grid cell with no
   inner padding. Drop it. */
#view-dashboard .cc-today-queue {
  padding: 0;
}

/* D32 — Hero card and queue both should fill their zone cells equally. Make sure
   the zone-frame, zone-content, and the wrapper around .next-card pass through
   100% height (Zone 1 hero wrapper). Without this, the queue can be the taller
   child and hero shrinks below it. Mockup §319 grid uses `grid-template-rows:
   auto` so both columns share intrinsic height — to mirror, use `align-items:
   stretch` on the outer grid. */
#view-dashboard .cc-grid-12 {
  align-items: stretch;
}

/* D33 — Outer zones-row padding. `.dash-zones-row` had `padding: 0 28px` which
   ate 56px of horizontal width, shrinking the queue column from `1fr` (~766px,
   mockup) down to 710px. Mockup `.zones-12` has no padding (line 77). Drop. */
#view-dashboard .dash-zones-row {
  padding: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   S7 — Home role-adaptive work zone (step 7, plan §3.2 + locked §7.4).
   Agent "My call lists" queue (replaces the project grid) + manager
   "who's stalled" snapshot (above the grid). Wireline: flat white cards,
   1px #E2E5EA borders, mono counters, brass phone CTA (D12), 48px rows.
   ════════════════════════════════════════════════════════════════════════ */

/* Agent queue */
#view-dashboard .cc-cl-queue {
  background: var(--color-surface-0, #FFFFFF);
  border: 1px solid #E2E5EA;
  border-radius: 8px;
  overflow: hidden;
}
#view-dashboard .cc-cl-row {
  display: flex; align-items: center; gap: 14px;
  min-height: 48px;
  padding: 8px 12px;
  border-bottom: 1px solid #F3F4F6;
}
#view-dashboard .cc-cl-row:last-child { border-bottom: none; }
#view-dashboard .cc-cl-row:hover { background: rgba(41,128,132,.04); }
#view-dashboard .cc-cl-name-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#view-dashboard .cc-cl-name { font-size: 13px; font-weight: 600; color: var(--color-text-primary, #1d2026); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-dashboard .cc-cl-counters { font: 11px/1.2 'JetBrains Mono', monospace; color: var(--muted, #6B7280); font-variant-numeric: tabular-nums; }
#view-dashboard .cc-cl-remaining {
  font: 700 18px/1 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary, #1d2026);
  display: inline-flex; align-items: baseline; gap: 4px;
  flex-shrink: 0;
}
#view-dashboard .cc-cl-remaining-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #6B7280); }
#view-dashboard .cc-cl-call {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--color-call-btn, var(--color-accent, #CC9C42));
  color: #1d2026; border: none; border-radius: 6px;
  padding: 6px 12px; font-size: 11px; font-weight: 700; cursor: pointer;
  flex-shrink: 0;
}
#view-dashboard .cc-cl-open {
  background: var(--color-surface-0, #FFFFFF);
  border: 1px solid var(--border, #E2E5EA); border-radius: 6px;
  padding: 6px 12px; font-size: 11px; font-weight: 600;
  color: var(--color-text-secondary, #4B5563); cursor: pointer;
  flex-shrink: 0;
}
#view-dashboard .cc-cl-empty { padding: 28px 16px; text-align: center; }
#view-dashboard .cc-cl-empty-line { font-size: 22px; font-style: italic; margin: 0 0 6px; color: var(--color-text-primary, #1d2026); }
#view-dashboard .cc-cl-empty-sub { font-size: 12px; color: var(--muted, #6B7280); margin: 0; }
#view-dashboard .cc-cl-skel { height: 48px; background: var(--color-surface-2, #EEF1F4); border-radius: 8px; margin-bottom: 8px; }

/* Manager snapshot */
#view-dashboard #cc-cl-snapshot {
  background: var(--color-surface-0, #FFFFFF);
  border: 1px solid #E2E5EA;
  border-radius: 8px;
  padding: 12px 16px 8px;
  margin-bottom: 20px;
}
#view-dashboard .cc-cl-snap-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
#view-dashboard .cc-cl-snap-title { font: 700 10px/1 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--muted, #6B7280); }
#view-dashboard .cc-cl-snap-all { background: none; border: none; padding: 0; font-size: 11px; font-weight: 600; color: var(--color-secondary, #298084); cursor: pointer; }
#view-dashboard .cc-cl-snap-table { width: 100%; border-collapse: collapse; }
#view-dashboard .cc-cl-snap-row { cursor: pointer; }
#view-dashboard .cc-cl-snap-row:hover td { background: rgba(41,128,132,.04); }
#view-dashboard .cc-cl-snap-table td { padding: 8px 10px; border-bottom: 1px solid #F3F4F6; font-size: 12px; }
#view-dashboard .cc-cl-snap-row:last-child td { border-bottom: none; }
#view-dashboard .cc-cl-snap-agent { font-weight: 600; white-space: nowrap; }
#view-dashboard .cc-cl-snap-list { color: var(--color-text-secondary, #4B5563); }
#view-dashboard .cc-cl-snap-counts { font: 11px/1.2 'JetBrains Mono', monospace; color: var(--muted, #6B7280); font-variant-numeric: tabular-nums; }
#view-dashboard .cc-cl-snap-ago { font-size: 11px; color: var(--muted, #6B7280); white-space: nowrap; }
#view-dashboard .cc-cl-snap-more { font-size: 11px; color: var(--muted, #6B7280); padding: 6px 10px 2px; }