/* ============================================================================
 * g5o (260601-g5o) Design System — Tokens + Canonical Classes + Back-Compat Aliases
 * ----------------------------------------------------------------------------
 * Unifies the visual language across all 4 CEO portal tabs (DASHBOARD /
 * SHOW RATE BANDS / CANCEL RECOVERY / SURVEY DEEP-DIVE).
 *
 * - Tokens: --ds-space-*, --ds-font-*, --ds-radius-*, --ds-shadow-*
 *   Consumed by every canonical class below. Existing --bg/--card/--accent etc.
 *   are PRESERVED (do not delete or rename).
 * - Canonical classes follow BEM. Legacy names (.vsl-headline, .vsl-cell,
 *   .lb-card, .eaz-tt, .drill-drawer-header, etc.) are comma-aliased to the
 *   canonical selectors so any markup we don't retrofit still renders.
 * - DOMAIN-LOCKED hexes (band greens/ambers/reds, grade chip colors
 *   #10b981/#3b82f6/#f59e0b/#ef4444, decision-rule chips) are documented but
 *   UNCHANGED — see design-system.md "When NOT to use the system".
 *
 * Full reference: /var/www/mfs-sales/ceo/design-system.md
 * ============================================================================
 */

:root {
  /* --- Spacing scale (4 / 8 / 12 / 16 / 24 / 32 px) --- */
  --ds-space-xs:  4px;
  --ds-space-sm:  8px;
  --ds-space-md: 12px;
  --ds-space-lg: 16px;
  --ds-space-xl: 24px;
  --ds-space-xxl: 32px;

  /* --- Typography scale --- */
  --ds-font-xs:   11px;
  --ds-font-sm:   12px;
  --ds-font-base: 14px;
  --ds-font-lg:   16px;
  --ds-font-xl:   20px;
  --ds-font-xxl:  28px;

  /* --- Radius --- */
  --ds-radius-sm: 4px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;

  /* --- Shadow --- */
  --ds-shadow-card:  0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08);
  --ds-shadow-drawer: -4px 0 24px rgba(0,0,0,0.18);

  /* --- DOMAIN-LOCKED: do NOT generalize — see design-system.md "When NOT to use the system" ---
   * band colors and grade chip hexes encode meaning. Surfaced as tokens
   * here for grep-ability only; the chip rules below still reference the raw
   * hexes so a careless rebrand of --green/--amber/--red can't change them.
   */
  --band-green-bg: #d1fae5;  /* ≥65% show-rate band */
  --band-green-fg: #065f46;
  --band-amber-bg: #fef3c7;  /* 40–65% band */
  --band-amber-fg: #92400e;
  --band-red-bg:   #fee2e2;  /* <40% band */
  --band-red-fg:   #991b1b;
  --grade-4:       #10b981;  /* Grade 4 emerald */
  --grade-3:       #3b82f6;  /* Grade 3 blue */
  --grade-2:       #f59e0b;  /* Grade 2 amber */
  --grade-1:       #ef4444;  /* Grade 1 red */
}

/* ============================================================================
 * === g5o canonical classes ===
 * ============================================================================
 */

/* --- KPI strip + KPI card -------------------------------------------------- */
.kpi-strip,
.vsl-headline,
.cr-kpi-strip,
.ezz-kpi-strip,
.ezz-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin: var(--ds-space-sm) 0 var(--ds-space-xl);
  background: var(--card-border);
  border: 1px solid var(--card-border);
  border-radius: var(--ds-radius-md);
  overflow: hidden;
  box-shadow: var(--ds-shadow-card);
}

/* 260630-qiq: handoff KPI Tile — 18px 18px 14px padding, 14px radius, own card
   chrome (independent of the shared strip's collapsed border so KPI tiles read
   as tiles, not table cells), label+delta row, 26px value, sub+sparkline row. */
.kpi-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  padding: 18px 18px 14px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e7ebf2;
  box-shadow: 0 1px 2px rgba(16,33,64,0.05);
}

.kpi-card__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #8a93a4;
}

.kpi-card__value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #1f2937;
  font-variant-numeric: tabular-nums;
}

.kpi-card--good .kpi-card__value { color: #047857; }
.kpi-card--warn .kpi-card__value { color: #b45309; }
.kpi-card--bad  .kpi-card__value { color: #b91c1c; }

/* 260630-qiq: KPI Tile top row (label + delta) */
.kpi-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}
.kpi-card__delta {
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kpi-card__delta--up   { color: #22a05f; }
.kpi-card__delta--down { color: #d6453d; }
.kpi-card__delta--flat { color: #8a93a4; }

/* 260630-qiq: KPI Tile bottom row (sub caption + sparkline) */
.kpi-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}
.kpi-card__sub {
  font-size: 11.5px;
  color: #9aa3b2;
}

/* ============================================================================
 * 260630-qiq: BARS PANEL — handoff "Bars panel" component.
 * Vertical list of named rows: name + value label on top, 8px track + fill below.
 * Primary series uses the accent; multi-series rows step through the lighter
 * blues via .bars-row--2/--3/--4 (applied to the 2nd/3rd/4th row's fill).
 * ============================================================================ */
.bars-panel {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 4px 0 2px;
}
.bars-row__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.bars-row__name {
  font-size: 13px;
  font-weight: 500;
  color: #3a4456;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#cr-by-calendar-barpanel .bars-row__name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.3;
}
.bars-row__value {
  font-size: 12.5px;
  font-weight: 600;
  color: #1f2937;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bars-row__track {
  height: 8px;
  border-radius: 5px;
  background: #eef1f7;
  overflow: hidden;
}
.bars-row__fill {
  height: 100%;
  border-radius: 5px;
  background: var(--accent);
  transition: width .3s ease;
}
/* Step-down blues for multi-series bars (2nd, 3rd, 4th+ rows) */
.bars-row--2 .bars-row__fill { background: #4f86f2; }
.bars-row--3 .bars-row__fill { background: #7ea7f6; }
.bars-row--4 .bars-row__fill { background: #aec4f8; }
.bars-row--5 .bars-row__fill { background: #d0def9; }

/* ============================================================================
 * 260630-qiq: STATUS PILL — handoff "Table panel" pill cell, exact tone hexes.
 * ============================================================================ */
.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-pill--green { color: #1d6f43; background: #e7f6ee; border-color: #c5e9d3; }
.status-pill--amber { color: #9a6a12; background: #fef4e2; border-color: #f6e2bd; }
.status-pill--red   { color: #b42318; background: #fde8e6; border-color: #f6cfc9; }
.status-pill--gray  { color: #6c7689; background: #f1f3f7; border-color: #e4e8f0; }
.status-pill--blue  { color: #155eef; background: #e8f0ff; border-color: #c9ddff; }

/* 260607-goe: CEO Scorecard — top-of-dashboard strip */
#ceo-scorecard { margin-bottom: var(--ds-space-lg, 20px); }

/* 260629-alv: Offers per Active Call-Day (Fathom coverage KPI) tile */
#ceo-offers-per-active-day { margin-bottom: var(--ds-space-lg, 20px); }
.opad-card .opad-unit {
  font-size: var(--ds-font-xs, 11px);
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--muted-foreground);
  text-transform: uppercase;
}
.opad-card .opad-sub {
  font-size: var(--ds-font-sm, 12px);
  color: var(--foreground);
}
.opad-card .opad-cover { margin-top: var(--ds-space-xs, 4px); }
.opad-badge {
  display: inline-block;
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.35);
  border-radius: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: .5px;
  padding: 1px 6px; vertical-align: middle;
}
/* degraded coverage (<50%) reuses the amber stale-badge tone (honesty signal) */
.opad-badge--degraded { /* uses .stale-badge amber base; nothing extra needed */ }
.opad-card .opad-prov {
  display: inline-block;
  font-size: 9px; font-weight: 700; letter-spacing: .5px;
  color: #b45309; margin-left: 4px; text-transform: uppercase;
}
.opad-card--team {
  border-left: 3px solid rgba(37, 99, 235, 0.45);
  background: linear-gradient(0deg, #f8fafc, #ffffff 60%);
}
.scorecard-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));  /* 260607-pbu: auto-fit fills the row (no sparse trailing gap) */
  gap: var(--ds-space-sm, 10px);
}
.sc-card { border-left: 4px solid var(--border, #e5e7eb); }
.sc-card.sc-good { border-left-color: #065f46; background: linear-gradient(0deg, #f0fdf4, #ffffff 60%); }
.sc-card.sc-warn { border-left-color: #92400e; background: linear-gradient(0deg, #fffbeb, #ffffff 60%); }
.sc-card.sc-bad  { border-left-color: #991b1b; background: linear-gradient(0deg, #fef2f2, #ffffff 60%); }
.sc-card.sc-good .kpi-card__value { color: #047857; }
.sc-card.sc-warn .kpi-card__value { color: #b45309; }
.sc-card.sc-bad  .kpi-card__value { color: #b91c1c; }
.sc-card.sc-neutral .kpi-card__value { color: var(--foreground, #111827); }
.sc-card.sc-stub { border-left-color: #cbd5e1; opacity: 0.7; }
.sc-card__bench { font-size: 11px; color: var(--muted-foreground, #6b7280); margin-top: 4px; line-height: 1.3; }

/* 260607-scb: scorecard target meters + real card chrome.
   Drop the hairline-grid container so each metric reads as its own premium card,
   add a blue progress meter toward target. No red/green — bar is uniformly MFS blue. */
.scorecard-strip {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  border-radius: 0;
}
.scorecard-strip .kpi-card {
  border: 1px solid var(--card-border);
  border-radius: var(--ds-radius-md, 12px);
  box-shadow: var(--ds-shadow-card);
  background: var(--card);
  padding: var(--ds-space-md, 14px) var(--ds-space-lg, 16px);
}
.sc-metric {
  min-height: 112px;
  gap: 6px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sc-metric:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(4, 7, 29, 0.22);
  border-color: #9dc3ff;
}
.sc-meter {
  width: 100%;
  height: 5px;
  margin-top: auto;            /* pin meter + target to the card bottom so values top-align */
  background: var(--card-border);
  border-radius: 999px;
  overflow: hidden;
}
.sc-meter__fill {
  display: block;
  height: 100%;
  background: var(--ceo-gradient, linear-gradient(90deg, #1898ff, #155eef));
  border-radius: 999px;
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}
.sc-meter__target {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--muted-foreground);
}

/* 260607-goe: Revenue & Cash block */
#ceo-revenue { margin-bottom: var(--ds-space-lg, 20px); }
.revenue-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));  /* 260607-pbu: auto-fit fills the row */
  gap: var(--ds-space-sm, 10px);
  margin-bottom: var(--ds-space-md, 14px);
}
.revenue-byclose-wrap { overflow-x: auto; }
.revenue-leaderboard { max-width: 560px; }
/* 260607-adp: Ad Performance KPI strip — premium bordered cards (match the scorecard).
   Isolated .ads-kpi-strip rules — does not touch the scorecard or shared .lb-* rules. */
.ads-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));   /* auto-fit: fill the row, no sparse trailing gap */
  gap: var(--ds-space-sm, 10px);
  background: transparent; border: 0; box-shadow: none; overflow: visible; border-radius: 0;  /* drop the .kpi-strip hairline container */
}
.ads-kpi-strip .kpi-card {
  border: 1px solid var(--card-border);
  border-radius: var(--ds-radius-md, 12px);
  box-shadow: var(--ds-shadow-card);
  background: var(--card);
  padding: var(--ds-space-md, 14px) var(--ds-space-lg, 16px);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ads-kpi-strip .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(4, 7, 29, 0.22); border-color: #9dc3ff; }
.ads-leaderboard { max-width: 760px; }
#ads-metrics-card, #ads-campaigns-card { margin-bottom: var(--ds-space-lg, 20px); }
.ads-funnel-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ads-funnel-chip { padding: 5px 13px; border-radius: 999px; border: 1px solid var(--border, #e5e7eb); background: transparent; color: var(--muted-foreground, #6b7280); font-size: 12px; font-weight: 600; cursor: pointer; }
.ads-funnel-chip:hover { border-color: var(--muted-foreground, #9ca3af); }
.ads-funnel-chip--active { background: var(--foreground, #111827); color: var(--background, #fff); border-color: var(--foreground, #111827); }

/* 260607-n8e: Funnel Revenue & ROAS — clickable cards + comparison table (uniform, no bands) */
#ads-funnels-card { margin-bottom: var(--ds-space-lg, 20px); }
.ads-funnel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--ds-space-sm, 10px); margin-bottom: var(--ds-space-sm, 10px); }
/* 260607-cmb: compact totals line under the funnel cards (replaces the dropped funnel table) */
.ads-funnel-summary { margin: 0 0 var(--ds-space-lg, 18px); padding: 9px 14px; border: 1px solid var(--card-border, #e5e7eb); border-radius: var(--ds-radius-md, 10px); background: var(--bg, #f4f7fb); font-size: 12.5px; color: var(--muted-foreground, #6b7280); font-variant-numeric: tabular-nums; }
.ads-funnel-summary:empty { display: none; }
.ads-funnel-summary b { color: var(--foreground, #111827); font-weight: 700; }

/* 260607-mix: Revenue Mix — ad-driven vs organic */
.mix-summary { font-size: 14px; color: var(--muted-foreground); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.mix-summary b { color: var(--foreground); font-weight: 800; }
.mix-stack { display: flex; width: 100%; height: 16px; border-radius: 8px; overflow: hidden; margin-bottom: 16px; background: var(--card-border); box-shadow: inset 0 0 0 1px var(--card-border); }
.mix-stack__seg { height: 100%; min-width: 2px; transition: width .5s cubic-bezier(.4, 0, .2, 1); }
.mix-stack__seg:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, .6); }
.mix-rows { display: flex; flex-direction: column; gap: 9px; }
.mix-row { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 3px 12px; }
.mix-row__label { grid-column: 1; grid-row: 1; font-size: 13px; font-weight: 600; color: var(--foreground); }
.mix-row__val { grid-column: 2; grid-row: 1; font-size: 13px; font-weight: 700; color: var(--foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mix-row__pct { color: var(--muted-foreground); font-weight: 600; font-size: 11px; margin-left: 4px; }
.mix-row__track { grid-column: 1 / -1; grid-row: 2; height: 6px; background: var(--card-border); border-radius: 999px; overflow: hidden; }
.mix-row__bar { height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.4, 0, .2, 1); }
.mix-tag { font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: var(--accent-glow, rgba(21, 94, 239, .10)); border-radius: 4px; padding: 1px 5px; vertical-align: middle; }
.mix-empty { padding: 18px; text-align: center; color: var(--muted-foreground); font-size: 13px; }
.ads-funnel-card { display: flex; flex-direction: column; gap: 6px; padding: var(--ds-space-md, 12px); border: 1px solid var(--card-border, #e5e7eb); border-radius: var(--ds-radius-lg, 12px); background: var(--card, #fff); box-shadow: var(--ds-shadow-card); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
.ads-funnel-card:hover { border-color: var(--accent, #155eef); transform: translateY(-1px); }
.ads-funnel-card--active { border-color: var(--accent, #155eef); box-shadow: 0 0 0 1px var(--accent, #155eef), var(--ds-shadow-card); background: var(--accent-glow, rgba(21,94,239,0.06)); }
.ads-funnel-card__name { font-size: var(--ds-font-sm, 12px); font-weight: 700; color: var(--foreground, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ads-funnel-card__roas { font-size: var(--ds-font-xxl, 28px); font-weight: 700; line-height: 1; color: var(--foreground, #111827); font-variant-numeric: tabular-nums; }
.ads-funnel-card__roas-lbl { font-size: var(--ds-font-xs, 11px); font-weight: 600; color: var(--muted-foreground, #6b7280); }
.ads-funnel-card__rows { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.ads-funnel-card__rows span { display: flex; justify-content: space-between; gap: 8px; font-size: var(--ds-font-sm, 12px); color: var(--foreground, #374151); font-variant-numeric: tabular-nums; font-weight: 600; }
.ads-funnel-card__rows i { color: var(--muted-foreground, #6b7280); font-style: normal; font-weight: 500; }
.ads-funnel-card--unattr { cursor: default; background: var(--bg, #f8fafc); border-style: dashed; box-shadow: none; opacity: .92; }
.ads-funnel-card--unattr:hover { border-color: var(--card-border, #e5e7eb); transform: none; }
.ads-funnel-card--empty { cursor: default; color: var(--muted-foreground, #6b7280); align-items: center; justify-content: center; min-height: 70px; }
.ads-funnel-table-wrap { overflow-x: auto; }
.ads-funnel-table { width: 100%; border-collapse: collapse; font-size: var(--ds-font-base, 13px); }
.ads-funnel-table th, .ads-funnel-table td { padding: 7px 10px; border-bottom: 1px solid var(--border, #eef0f3); text-align: left; }
.ads-funnel-table th { font-size: var(--ds-font-xs, 11px); text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground, #6b7280); font-weight: 700; }
.ads-funnel-table th.num, .ads-funnel-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ads-funnel-table tbody .ads-ft-row { cursor: pointer; }
.ads-funnel-table tbody .ads-ft-row:hover { background: var(--accent-glow, rgba(21,94,239,0.06)); }
.ads-ft-name { font-weight: 600; color: var(--foreground, #111827); }
.ads-ft-roas { font-weight: 700; }
.ads-ft-row--unattr { color: var(--muted-foreground, #6b7280); cursor: default; }
.ads-ft-row--unattr:hover { background: transparent; }
.ads-ft-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground, #9ca3af); border: 1px solid var(--border, #e5e7eb); border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
.ads-funnel-table tfoot td { border-top: 2px solid var(--card-border, #e5e7eb); border-bottom: none; font-weight: 700; color: var(--foreground, #111827); padding-top: 9px; }
.ads-camp-row { cursor: pointer; }
.ads-modal[hidden] { display: none; }
.ads-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.ads-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.ads-modal__panel { position: relative; background: var(--card, #fff); color: var(--foreground, #111827); border: 1px solid var(--border, #e5e7eb); border-radius: 12px; max-width: 780px; width: 92%; max-height: 82vh; overflow: auto; box-shadow: 0 24px 64px rgba(0,0,0,0.35); }
.ads-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--border, #e5e7eb); position: sticky; top: 0; background: var(--card, #fff); }
.ads-modal__title { margin: 0; font-size: 14px; font-weight: 700; word-break: break-word; }
.ads-modal__close { border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted-foreground, #6b7280); }
.ads-modal__body { padding: 12px 20px 20px; }
.ads-modal__loading, .ads-modal__empty { padding: 28px; text-align: center; color: var(--muted-foreground, #6b7280); }
.ads-detail-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ads-detail-table th, .ads-detail-table td { padding: 7px 8px; border-bottom: 1px solid var(--border, #e5e7eb); text-align: left; }
.ads-detail-table th.num, .ads-detail-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ads-detail-name { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 260607-nor: per-ad returns — coverage note + ROAS cell */
.ads-modal__coverage { margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--card-border, #e5e7eb); border-radius: var(--ds-radius-md, 8px); background: var(--bg, #f8fafc); font-size: 12px; color: var(--muted-foreground, #6b7280); }
.ads-modal__coverage b { color: var(--foreground, #111827); font-weight: 700; }
.ads-detail-table td.ads-detail-roas { font-weight: 700; color: var(--foreground, #111827); }
.ads-detail-link { color: var(--accent, #155eef); text-decoration: none; white-space: nowrap; font-weight: 600; }  /* 260607-adp: was indigo, now MFS blue */
body.ads-modal-open { overflow: hidden; }

/* 260607-adx: funnel-select KPI strip (appears under the funnel cards when one is selected) */
.ads-funnel-detail { margin: 0 0 var(--ds-space-md, 14px); padding: 14px 16px; border: 1px solid var(--card-border); border-radius: var(--ds-radius-md, 12px); background: var(--bg, #f4f7fb); }
.afd-head { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--foreground); margin-bottom: 10px; }
.afd-head__sub { font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--muted-foreground); margin-left: 6px; }
.afd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 1px; background: var(--card-border); border: 1px solid var(--card-border); border-radius: 10px; overflow: hidden; }
.afd-kpi { background: var(--card); padding: 10px 12px; }
.afd-kpi__label { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-foreground); }
.afd-kpi__value { font-size: 17px; font-weight: 700; color: var(--foreground); font-variant-numeric: tabular-nums; margin-top: 3px; }

/* 260607-adx: per-ad modal — clear campaign header stats + spend-magnitude rows */
.ads-modal__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--card-border); border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.ams { background: var(--card); padding: 12px 14px; }
.ams__label { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-foreground); }
.ams__value { font-size: 22px; font-weight: 800; color: var(--foreground); font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 4px; }
.ads-modal__sub { font-size: 11px; color: var(--muted-foreground); font-weight: 600; margin: 0 0 8px; }
/* 260607-lci: lifetime context line + tighter detail table for the Leads/Booked columns */
.ads-modal__lifetime { font-size: 12.5px; color: var(--muted-foreground); background: var(--bg, #f4f7fb); border: 1px solid var(--card-border); border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; font-variant-numeric: tabular-nums; line-height: 1.5; }
.ads-modal__lifetime b { color: var(--foreground); font-weight: 700; }
.ads-modal__lifetime-lbl { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); margin-right: 6px; }
.ads-modal__lifetime-sub { color: var(--muted-foreground); opacity: .85; }
.ads-detail-table th, .ads-detail-table td { padding: 7px 6px; }
.ads-detail-name { max-width: 190px; }
.ads-detail-name { position: relative; max-width: 260px; overflow: hidden; }
.ads-detail-bar { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 22px; border-radius: 5px; background: var(--accent-glow, rgba(21, 94, 239, 0.10)); z-index: 0; pointer-events: none; transition: width .4s cubic-bezier(.4, 0, .2, 1); }
.ads-detail-row.is-top .ads-detail-bar { background: rgba(21, 94, 239, 0.18); }
.ads-detail-name__txt { position: relative; z-index: 1; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ads-detail-row.is-top .ads-detail-name__txt { font-weight: 700; }

/* 260701-tre: ad-set economics section (show rate + close economics + verdict pill) */
.ads-modal__adsets { margin-top: 6px; }
.ads-adsets-unavail { color: var(--muted-foreground, #6b7280); font-style: italic; font-size: 11.5px; white-space: nowrap; }
.ads-detail-spend { font-weight: 700; color: var(--foreground); }
.revenue-byclose { width: 100%; border-collapse: collapse; }
.revenue-byclose th, .revenue-byclose td { padding: 6px 10px; border-bottom: 1px solid var(--border, #e5e7eb); }
.revenue-byclose th.num, .revenue-byclose td.num { text-align: right; font-variant-numeric: tabular-nums; }
.revenue-byclose tbody tr:hover { background: var(--muted, #f9fafb); }

/* --- Section card --------------------------------------------------------- */
/* 260630-qiq: handoff Panel Card signature — 14px radius, #e7ebf2 border,
   3px accent top-border (the redesign's core signature treatment), soft shadow. */
.section-card,
.lb-card {
  background: #fff;
  border: 1px solid #e7ebf2;
  border-top: 3px solid var(--accent);
  border-radius: 14px;
  padding: var(--ds-space-lg);
  margin-bottom: var(--ds-space-xl);
  box-shadow: 0 1px 2px rgba(16,33,64,0.05);
  overflow: hidden;
}

/* ============================================================================
 * 260630-qiq: DASHBOARD PANEL GRID — handoff fluid layout via flex-wrap + flex-
 * basis (no media queries). full = 100%; wide = 2 1 480px; narrow = 1 1 300px.
 * Wraps #view-dashboard's panels so the handoff KPI row + 6-panel order reads
 * as a real grid instead of a stacked column.
 * ============================================================================ */
.dash-panel-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-lg, 16px);
  align-items: stretch;
}
.dash-panel-grid > .section-card {
  margin-bottom: 0; /* grid gap replaces the stacked margin */
}
.dash-panel--full   { flex: 1 1 100%; }
.dash-panel--wide   { flex: 2 1 480px; min-width: 300px; }
.dash-panel--narrow { flex: 1 1 300px; min-width: 280px; }

/* KPI row — fluid tiles, flex 1 1 200px per the handoff spec */
.dash-kpi-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-lg, 16px);
  margin: var(--ds-space-sm, 8px) 0 var(--ds-space-lg, 16px);
}
.dash-kpi-row > .kpi-card {
  flex: 1 1 200px;
  min-width: 185px;
}

.section-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-md);
  margin-bottom: var(--ds-space-md);
}

.section-card__title {
  font-size: var(--ds-font-xs);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.section-card__collapse-btn {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--muted-foreground);
  cursor: pointer;
  border-radius: var(--ds-radius-sm);
  transition: background .15s;
}
.section-card__collapse-btn:hover { background: var(--surface2); }

.section-card__body {
  font-size: var(--ds-font-base);
  color: var(--foreground);
}

/* --- Data table ----------------------------------------------------------- */
/* 260630-qiq: refined to handoff Table panel spec — header bg #f7f9fc, th 10px
   uppercase ls .07em #8a93a4, td 13px pad 13px 18px, row hover #f8fafd, border #eef1f5. */
.data-table,
.sortable-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--foreground);
}

.data-table__head,
.sortable-table thead th {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #8a93a4;
  background: #f7f9fc;
  padding: 10px 18px;
  text-align: left;
  border-bottom: 1px solid #eef1f5;
  border-top: 1px solid #eef1f5;
}

.data-table__row td,
.sortable-table tbody td {
  padding: 13px 18px;
  border-bottom: 1px solid #eef1f5;
}

.data-table__row:hover td,
.sortable-table tbody tr:hover td {
  background: #f8fafd;
}

.data-table__cell--num,
.sortable-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.data-table__sort-indicator {
  display: inline-block;
  margin-left: var(--ds-space-xs);
  opacity: 0.6;
  font-size: var(--ds-font-xs);
}

/* --- Chart tooltip (body-level, viewport-clamped) -------------------------- */
.chart-tooltip,
.eaz-tt {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--ds-radius-sm);
  box-shadow: var(--ds-shadow-card);
  padding: var(--ds-space-sm) var(--ds-space-md);
  font-size: var(--ds-font-sm);
  color: var(--foreground);
  max-width: 280px;
  line-height: 1.4;
}

.chart-tooltip-title,
.eaz-tt-title {
  font-weight: 700;
  margin-bottom: var(--ds-space-xs);
  color: var(--foreground);
}

.chart-tooltip-row,
.eaz-tt-row {
  font-size: var(--ds-font-sm);
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.chart-tooltip-foot,
.eaz-tt-foot {
  margin-top: var(--ds-space-xs);
  padding-top: var(--ds-space-xs);
  border-top: 1px solid var(--card-border);
  font-size: var(--ds-font-xs);
  color: var(--muted-foreground);
  font-style: italic;
}

/* --- Drill drawer (BEM normalize) ----------------------------------------- *
 * The legacy .drill-drawer-{header,title,eyebrow,body,close,overlay,...}
 * kebab-case selectors continue to work via comma-pair aliasing below.
 */

.drill-drawer__header,
.drill-drawer-header,
.cr-drawer-contact-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-space-md);
  padding: var(--ds-space-lg);
  border-bottom: 1px solid var(--card-border);
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 2;
}

.drill-drawer__title,
.drill-drawer-title,
.cr-drawer-contact-name {
  font-size: var(--ds-font-lg);
  font-weight: 700;
  color: var(--foreground);
}

.drill-drawer__eyebrow,
.drill-drawer-eyebrow,
.cr-drawer-contact-meta {
  font-size: var(--ds-font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted-foreground);
}

.drill-drawer__body,
.drill-drawer-body,
.cr-drawer-body {
  padding: var(--ds-space-lg);
  font-size: var(--ds-font-sm);
  color: var(--foreground);
}

.drill-drawer__close,
.drill-drawer-close,
.cr-drawer-close {
  width: 32px;
  height: 32px;
  border-radius: var(--ds-radius-sm);
  border: none;
  background: var(--surface2);
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: var(--ds-font-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.drill-drawer__close:hover,
.drill-drawer-close:hover,
.cr-drawer-close:hover { background: var(--card-border); }

.drill-drawer__overlay,
.drill-drawer-overlay,
.cr-drill-drawer-overlay {
  background: rgba(0,0,0,0.40);
}

.drill-drawer__panel,
.drill-drawer-panel {
  box-shadow: var(--ds-shadow-drawer);
}

/* --- Period selector ------------------------------------------------------ */
.period-chip,
.period-btn {
  padding: 7px 14px;
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: var(--ds-font-xs);
  font-weight: 600;
  letter-spacing: .5px;
  cursor: pointer;
  transition: all .15s;
}

.period-chip--active,
.period-btn.active,
.period-chip.active {
  background: var(--ceo-gradient);
  color: #fff;
  border-color: transparent;
}

.period-chip:disabled,
.period-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* --- Collapse toggle ------------------------------------------------------ *
 * Already canonical; reaffirm sizing + color via tokens, leave .collapse-chevron
 * (animation/rotation) as-is in the legacy block below.
 */
.collapse-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-sm);
  color: var(--muted-foreground);
  cursor: pointer;
  user-select: none;
}
.collapse-toggle--collapsed .collapse-chevron { transform: rotate(-90deg); }

/* --- Sidebar nav tab ------------------------------------------------------ *
 * .nav-tab + .nav-tab.active already canonical from line 68. Add --active
 * modifier alias here so future markup can use the BEM-style modifier.
 */
.nav-tab--active {
  background: rgba(21,94,239,0.15);
  color: var(--purple-light);
  border-right: 3px solid var(--purple);
}

/* ============================================================================
 * === g5o back-compat aliases for surface-only legacy names ===
 *   ezz-section-a / ezz-section-b → .section-card (visual chrome)
 *   cr-by-cal-table              → .data-table   (structural)
 *   ezz-dist-table               → .data-table   (structural)
 *   ezz-num                      → .data-table__cell--num
 * Domain-locked classes (.cr-kpi-*, .cr-cell-*, .vsl-chip--*, .ezz-cell-*,
 * .ezz-chip-show--*) are NOT aliased — they carry meaning.
 * ============================================================================
 */
.ezz-section-a,
.ezz-section-b {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-lg);
  margin-bottom: var(--ds-space-xl);
  box-shadow: var(--ds-shadow-card);
}

.cr-by-cal-table,
.cr-by-calendar-table,
.cr-concentration-table,
.cr-correlation-table,
.ezz-dist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ds-font-sm);
}

.ezz-num { text-align: right; font-variant-numeric: tabular-nums; }

/* === g5o END (260601-g5o) =================================================== */

/* 260601-skv: cancel concentration replaces serial cancelers — no new cr-* classes added */
.vsl-cell-sub{font-size:11px;opacity:.7;margin-top:4px}
:root{
  /* 260630-qiq: page canvas aligned to handoff exact hex #f6f8fb (was hsl(210 33% 98%) ≈ #f8fafc) */
  --bg:#f6f8fb;
  --foreground:hsl(215 28% 17%);
  --card:hsl(0 0% 100%);
  --card-border:hsl(214 32% 91%);
  --primary:#04071D;
  --accent:#155eef;
  --accent-glow:rgba(21, 94, 239, 0.10);
  --accent-2:#1898ff;
  --green:hsl(160 84% 39%);
  --green-glow:hsla(160 84% 39% / 0.10);
  --amber:#f6ad55;
  --amber-glow:rgba(246, 173, 85, 0.10);
  --cyan:#1898ff;
  --cyan-glow:rgba(24, 152, 255, 0.10);
  --red:#e93d3d;
  --gold:#f6ad55;
  --purple:#155eef;
  --purple-light:#9dc3ff;
  --muted:hsl(210 20% 95%);
  --muted-foreground:hsl(215 16% 47%);
  --muted2:hsl(215 16% 47%);
  --silver:hsl(215 20% 40%);
  --border:hsl(214 32% 91%);
  --border2:hsl(214 32% 86%);
  --radius:8px;
  --radius-lg:12px;
  --ceo-gradient:linear-gradient(135deg, #1898ff, #155eef);
  --sidebar-background:#04071D;
  --sidebar-foreground:#e4ecff;
  --sidebar-border:#0C1327;
  --sidebar-accent:#0E162A;
  --surface:hsl(0 0% 100%);
  /* 260630-qiq: inset surface aligned to handoff exact hex #f7f9fc (was hsl(210 33% 96%) ≈ #f1f5f8) */
  --surface2:#f7f9fc;
  --text:hsl(215 28% 17%);
  --error:#e93d3d;
  /* --lb-* light-theme mappings (260601-rnb): Survey Deep-Dive table/heatmap
     used var(--lb-*, <dark-hex>) fallbacks that were never defined → dark text
     on the light portal. Map to the existing light palette so all 32 usages repair. */
  --lb-text:     var(--foreground);
  --lb-muted:    var(--muted-foreground);
  --lb-surface:  var(--card);
  --lb-surface2: var(--surface2);
  --lb-border:   var(--card-border);
  --lb-gold:     var(--accent);
}
*{margin:0;padding:0;box-sizing:border-box;}
/* 260703-fnt: form controls do NOT inherit font-family by default → they'd render in the OS UI
   font instead of the portal's Inter, making every button/dropdown/input look 'off'. Force the
   family to inherit (family ONLY, not `font`, so each control keeps its own size/weight). */
button, input, select, textarea, optgroup { font-family: inherit; }
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;font-size:13px;min-height:100vh;font-variant-numeric:tabular-nums;}

/* LOGIN */
.login-screen{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:900;}
.login-box{background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:40px;width:380px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,0.06);position:relative;overflow:hidden;}
.login-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--ceo-gradient);}
.login-logo{width:48px;height:48px;background:var(--ceo-gradient);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'DM Serif Display',serif;font-weight:700;font-size:22px;color:#fff;margin:0 auto 16px;}
.login-title{font-size:20px;font-weight:800;letter-spacing:2px;margin-bottom:4px;color:var(--foreground);}
.login-sub{font-size:10px;color:var(--muted-foreground);letter-spacing:2px;text-transform:uppercase;margin-bottom:28px;}
.login-input{width:100%;background:var(--muted);border:1px solid var(--border);border-radius:6px;padding:10px 14px;font-size:13px;color:var(--foreground);font-family:'Inter',sans-serif;outline:none;margin-bottom:10px;transition:border-color .15s;}
.login-input:focus{border-color:var(--accent);}
.login-btn{width:100%;background:var(--ceo-gradient);color:#fff;border:none;border-radius:6px;padding:11px;font-size:12px;font-weight:700;letter-spacing:1.5px;cursor:pointer;margin-top:4px;font-family:'Inter',sans-serif;}
.login-btn:hover{opacity:.9;}
.login-err{color:var(--error);font-size:12px;margin-top:10px;display:none;}

/* APP LAYOUT */
.app{display:flex;min-height:100vh;display:none;}
.app.visible{display:flex;}

/* SIDEBAR */
.sidebar{width:230px;background:var(--sidebar-background);display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;}
.sidebar-brand{padding:24px 20px 20px;border-bottom:1px solid var(--sidebar-border);}
.sidebar-brand-row{display:flex;align-items:center;gap:12px;}
.sidebar-logo{width:36px;height:36px;background:var(--ceo-gradient);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'DM Serif Display',serif;font-weight:700;font-size:18px;color:#fff;flex-shrink:0;}
.sidebar-brand-name{font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--sidebar-foreground);}
.sidebar-brand-sub{font-size:9px;color:#8899bb;letter-spacing:1px;text-transform:uppercase;margin-top:2px;}
.sidebar-nav{flex:1;padding:16px 0;}
.nav-tab{display:flex;align-items:center;gap:8px;width:100%;padding:10px 20px;background:none;border:none;color:#8899bb;font-size:11px;font-weight:600;letter-spacing:1px;text-align:left;cursor:pointer;transition:all .15s;white-space:nowrap;}
.nav-tab:hover{background:var(--sidebar-accent);color:var(--sidebar-foreground);}
.nav-tab.active{background:rgba(21,94,239,0.15);color:var(--purple-light);border-right:3px solid var(--purple);}
.sidebar-user{padding:16px 20px;border-top:1px solid var(--sidebar-border);display:flex;align-items:center;gap:10px;}
.member-avatar{width:32px;height:32px;background:var(--ceo-gradient);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;flex-shrink:0;}
.sidebar-user-info{flex:1;min-width:0;}
.member-name-pill{font-size:11px;font-weight:600;color:var(--sidebar-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.member-role{font-size:9px;color:#8899bb;letter-spacing:.5px;text-transform:uppercase;margin-top:1px;}
.logout-btn{background:none;border:none;color:#8899bb;font-size:11px;cursor:pointer;padding:4px 8px;border-radius:4px;white-space:nowrap;}
.logout-btn:hover{color:var(--sidebar-foreground);background:var(--sidebar-accent);}

/* MAIN CONTENT */
.main-content-area{flex:1;overflow-y:auto;}
.top-bar{padding:24px 32px 0;border-bottom:1px solid var(--border);background:var(--card);}
.top-bar-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:20px;}
.top-bar-title{font-size:22px;font-weight:800;color:var(--foreground);}
.top-bar-sub{font-size:12px;color:var(--muted-foreground);margin-top:2px;}
.period-selector{display:flex;gap:8px;flex-wrap:wrap;}
.period-btn{padding:7px 14px;border-radius:6px;border:1px solid var(--border);background:var(--muted);color:var(--muted-foreground);font-size:11px;font-weight:600;letter-spacing:.5px;cursor:pointer;transition:all .15s;}
.period-btn.active{background:var(--ceo-gradient);color:#fff;border-color:transparent;}
.period-btn:disabled{opacity:.4;cursor:not-allowed;}

/* DASHBOARD CONTENT */
.dash-content{padding:32px;}
.stat-cards-row{display:flex;gap:20px;flex-wrap:wrap;}
.stat-card{background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:28px;min-width:260px;flex:0 0 auto;position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.04);}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--ceo-gradient);}
.stat-label{font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--muted-foreground);text-transform:uppercase;margin-bottom:12px;}
.stat-number{font-size:52px;font-weight:800;color:var(--foreground);line-height:1;margin-bottom:6px;font-variant-numeric:tabular-nums;}
.stat-number.skeleton{color:transparent;background:var(--muted);border-radius:6px;min-width:80px;display:inline-block;animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.45;}}
.stat-desc{font-size:12px;color:var(--muted-foreground);margin-bottom:8px;}
.stat-meta{font-size:11px;color:var(--muted-foreground);}
.stale-badge{display:inline-block;background:var(--amber-glow);color:var(--amber);border:1px solid var(--amber);border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.5px;padding:1px 6px;margin-left:8px;vertical-align:middle;}
.error-note{font-size:11px;color:var(--error);margin-top:6px;}

/* ── 260527-jm2: 6-button period selector + custom date picker ──────────── */
.period-selector{flex-wrap:wrap;justify-content:flex-end;}
.period-btn{padding:7px 12px;}

.custom-picker{
  display:flex;align-items:center;gap:12px;
  padding:12px 0 16px;
  border-top:1px dashed var(--border);
  margin-top:4px;
  position:relative;z-index:60;   /* 260607-cal: float the calendar popover above dashboard cards */
}
/* 260607-cal: brand-styled date-range calendar (replaces the native date inputs) */
.drp{position:relative;}
.drp__trigger{
  display:inline-flex;align-items:center;gap:8px;
  height:36px;min-width:236px;padding:0 12px;
  background:var(--card);color:var(--foreground);
  border:1px solid var(--card-border);border-radius:8px;
  font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:600;
  cursor:pointer;transition:border-color .15s,box-shadow .15s;
}
.drp__trigger:hover{border-color:#9dc3ff;}
.drp__trigger[aria-expanded="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow,rgba(21,94,239,.10));}
.drp__cal{color:var(--accent);flex:0 0 auto;}
.drp__text{flex:1 1 auto;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.drp__text--placeholder{color:var(--muted-foreground);font-weight:500;}
.drp__chev{color:var(--muted-foreground);flex:0 0 auto;transition:transform .2s;}
.drp__trigger[aria-expanded="true"] .drp__chev{transform:rotate(180deg);}

.drp__pop{
  position:absolute;top:calc(100% + 8px);left:0;z-index:1000;
  width:300px;padding:14px;
  background:var(--card);border:1px solid var(--card-border);border-radius:14px;
  box-shadow:0 18px 40px -12px rgba(4,7,29,.28),0 4px 12px -6px rgba(4,7,29,.16);
}
.drp__pop.is-open{animation:drpIn .14s ease-out;}
@keyframes drpIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.drp__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.drp__title{font-size:14px;font-weight:700;color:var(--foreground);letter-spacing:.01em;}
.drp__nav{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;
  background:transparent;border:1px solid transparent;color:var(--muted-foreground);
  cursor:pointer;transition:background .15s,color .15s;
}
.drp__nav:hover{background:var(--bg,#f4f7fb);color:var(--accent);}
.drp__dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px;}
.drp__dow span{text-align:center;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--muted-foreground);text-transform:uppercase;padding:4px 0;}
.drp__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.drp__cell{
  display:inline-flex;align-items:center;justify-content:center;
  height:34px;border:none;background:transparent;
  font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--foreground);
  border-radius:8px;cursor:pointer;
  transition:background .12s,color .12s;
}
.drp__cell--empty{cursor:default;}
.drp__cell:not(.drp__cell--empty):hover{background:#eaf1fe;color:var(--accent);}
.drp__cell.is-today{font-weight:700;box-shadow:inset 0 0 0 1px #9dc3ff;}
.drp__cell.in-range{background:var(--accent-glow,rgba(21,94,239,.10));border-radius:0;}
.drp__cell.is-sel{background:var(--ceo-gradient,linear-gradient(135deg,#1898ff,#155eef));color:#fff;font-weight:700;box-shadow:0 2px 8px -2px rgba(21,94,239,.5);}
.drp__cell.is-start{border-radius:8px 0 0 8px;}
.drp__cell.is-end{border-radius:0 8px 8px 0;}
.drp__cell.is-single{border-radius:8px;}
.drp__foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid var(--card-border);}
.drp__hint{font-size:11px;color:var(--muted-foreground);font-weight:500;}
.drp__clear{background:transparent;border:none;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.02em;cursor:pointer;padding:4px 6px;border-radius:6px;}
.drp__clear:hover{background:#eaf1fe;}
/* 260701-dtp: date-picker quick-range presets + KPI prior-period compare line */
.drp__presets{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--card-border);}
.drp__preset{font-size:11px;font-weight:600;color:var(--muted-foreground);background:transparent;border:1px solid var(--border,#e5e7eb);border-radius:999px;padding:4px 9px;cursor:pointer;white-space:nowrap;line-height:1;transition:border-color .15s,color .15s,background .15s;}
.drp__preset:hover{border-color:var(--accent);color:var(--accent);background:#eaf1fe;}
.drp__preset.is-active{border-color:var(--accent);color:#fff;background:var(--ceo-gradient,linear-gradient(135deg,#1898ff,#155eef));}
.kpi-card__vs{font-size:11px;color:var(--muted-foreground,#6b7280);margin-top:1px;font-variant-numeric:tabular-nums;}
.custom-apply{
  background:var(--ceo-gradient);
  color:#fff;border:none;border-radius:6px;
  padding:7px 16px;font-size:11px;font-weight:700;letter-spacing:.5px;
  cursor:pointer;font-family:'Inter',sans-serif;
}
.custom-apply:hover{opacity:.9;}
.custom-error{color:var(--error);font-size:12px;font-weight:500;}

/* ── 260527-jm3: VSL Funnel card ─────────────────────────────────────────── */
.stat-cards-row{display:flex;flex-wrap:wrap;gap:18px;}
.stat-card{flex:1 1 280px;min-width:280px;}

.stat-card--vsl::before{background:linear-gradient(135deg,#22c55e,#16a34a);}

.vsl-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin:8px 0 4px;
}
.vsl-cell{display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.vsl-cell-label{
  font-size:10.5px;
  font-weight:600;
  color:#8a93a4;
  letter-spacing:.07em;
  text-transform:uppercase;
  line-height:1.1;
}
.vsl-cell-value{
  font-size:26px;
  font-weight:600;
  color:var(--foreground);
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.vsl-cell-value--accent{color:var(--green);}

/* ── 260527-jm6: funnel selector dropdown ──────────────────────────────── */
.funnel-header{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:6px;
}
.funnel-select{
  font-family:'Inter',system-ui,sans-serif;
  font-size:12px;
  font-weight:600;
  padding:5px 10px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--card);
  color:var(--foreground);
  outline:none;
  cursor:pointer;
  max-width:220px;
  text-overflow:ellipsis;
  transition:border-color .15s;
}
.funnel-select:hover{border-color:var(--accent);}
.funnel-select:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(21,94,239,.15);}

/* ════════════════════════════════════════════════════════════════════════════
   260528-d0s — Phase 3 widgets: lead-sources donut + sortable tables
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  /* 260608-clr: Donut palette — 7 maximally-distinct categorical hues (blue/amber/green/violet/red/pink/slate).
     Was #1/#2 near-identical blues (#155eef vs #2563eb) → VSL Funnel & Social Media looked the same.
     #1 stays MFS brand blue (dominant slice); #7 slate is the Unknown/Other catch-all. */
  --src-color-1:#155eef;
  --src-color-2:#f59e0b;
  --src-color-3:#10b981;
  --src-color-4:#8b5cf6;
  --src-color-5:#ef4444;
  --src-color-6:#ec4899;
  --src-color-7:#64748b;
  --bg-hover:rgba(21,94,239,0.05);
  --bg-muted:hsl(210 33% 97%);
}

/* Widget primitives */
.widget{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:24px 28px 22px;
  margin-top:20px;
  position:relative;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.widget::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:var(--ceo-gradient);
}
.widget-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.widget-header h2{
  font-size:13px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--foreground);
}
.widget-meta{
  font-size:11px;
  color:var(--muted-foreground);
  font-weight:500;
}
.widget-meta.is-stale{ color:var(--amber); }
.widget-meta.is-error{ color:var(--error); }
.widget-empty{
  font-size:13px;
  color:var(--muted-foreground);
  padding:18px 0 6px;
  text-align:center;
}
.widget-error{
  font-size:12px;
  color:var(--error);
  padding:8px 0 0;
}

/* Widget A — lead sources donut */
.lead-sources-body{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr);
  gap:28px;
  align-items:center;
  min-height:220px;
}
.lead-sources-chart{
  display:flex;
  align-items:center;
  justify-content:center;
}
.lead-sources-chart svg{
  width:100%;
  max-width:240px;
  height:auto;
}
.lead-sources-chart svg .donut-center{
  font-family:'Inter',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  fill:var(--foreground);
}
.lead-sources-chart svg .donut-center-num{
  font-size:30px;
  font-weight:800;
}
.lead-sources-chart svg .donut-center-label{
  font-size:9px;
  font-weight:700;
  fill:var(--muted-foreground);
  letter-spacing:1.2px;
}
.lead-sources-legend{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.lead-sources-legend li{
  display:grid;
  grid-template-columns:14px minmax(0,1fr) auto auto;
  gap:10px;
  align-items:center;
  font-size:12.5px;
  color:var(--foreground);
}
.lead-sources-legend .legend-swatch{
  width:12px; height:12px;
  border-radius:3px;
  display:inline-block;
}
.lead-sources-legend .legend-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lead-sources-legend .legend-count{
  font-variant-numeric:tabular-nums;
  font-weight:600;
  color:var(--muted-foreground);
}
.lead-sources-legend .legend-pct{
  font-variant-numeric:tabular-nums;
  font-weight:700;
  color:var(--foreground);
  min-width:48px;
  text-align:right;
}

@media (max-width: 760px){
  .lead-sources-body{ grid-template-columns:1fr; }
}

/* Sortable table primitive — shared by funnels + recent-leads */
/* 260630-qiq: refined to handoff Table panel spec (header bg #f7f9fc, th 10px
   uppercase ls .07em #8a93a4, td 13px pad 13px 18px, border #eef1f5, hover #f8fafd). */
.widget-table-wrap{
  overflow-x:auto;
}
.sortable-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.sortable-table thead{
  background:#f7f9fc;
}
.sortable-table th{
  text-align:left;
  padding:10px 18px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#8a93a4;
  border-bottom:1px solid #eef1f5;
  white-space:nowrap;
}
.sortable-table th.num,
.sortable-table th[data-type="num"]{
  text-align:right;
}
.sortable-table tbody td{
  padding:13px 18px;
  border-bottom:1px solid #eef1f5;
  vertical-align:middle;
}
.sortable-table tbody td.num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.sortable-table tbody tr:last-child td{
  border-bottom:none;
}
.sortable-table tbody tr:hover td{
  background:#f8fafd;
}
.sortable-header{
  cursor:pointer;
  user-select:none;
  transition:background-color .15s;
}
.sortable-header:hover{
  background:var(--bg-hover);
}
.sort-glyph{
  display:inline-block;
  width:10px;
  margin-left:2px;
  color:var(--accent);
  font-size:10px;
}
.sortable-table--clickable tbody tr{
  cursor:pointer;
  transition:background-color .12s;
}
.sortable-table--clickable tbody tr:hover{
  background:var(--bg-hover);
}

/* Tag chips inside recent-leads */
.tag-chip{
  display:inline-block;
  background:var(--muted);
  color:var(--muted-foreground);
  border-radius:999px;
  padding:2px 8px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.2px;
  margin:1px 3px 1px 0;
  white-space:nowrap;
  max-width:160px;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:middle;
}
.tag-chip--overflow{
  background:#e5e9f2;
  color:#4a5568;
  font-weight:700;
}
.tag-chip--empty{
  background:transparent;
  color:var(--muted-foreground);
  font-style:italic;
  padding:0;
}

/* ────────────────────────────────────────────────────────────────────────────
   260531-miv: Multi-view sidebar tabs — show one .view at a time
   ──────────────────────────────────────────────────────────────────────────── */
.view { display: none; }
.view.view-active { display: block; }

/* ────────────────────────────────────────────────────────────────────────────
   260531-miv: Show Rate Bands view — matches portal light theme + widget pattern
   ──────────────────────────────────────────────────────────────────────────── */
.widget-show-rate-bands .widget-body { padding: 0; }

/* 260609-hqk: Summary KPI strip — mirror Dashboard .kpi-strip/.kpi-card exactly
   (was 26px/800 values + 10px labels on off-token spacing; now matches the
   Dashboard's calmer 20px/700 + 11px on design tokens, same card shadow). */
.bands-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin: var(--ds-space-sm) 0 var(--ds-space-xl);
  background: var(--card-border);
  border: 1px solid var(--card-border);
  border-radius: var(--ds-radius-md);
  overflow: hidden;
  box-shadow: var(--ds-shadow-card);
}
.bands-kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-xs);
  padding: var(--ds-space-md) var(--ds-space-lg);
  background: var(--card);
}
.bands-kpi-label {
  font-size: var(--ds-font-xs);
  font-weight: 700;
  color: var(--muted-foreground);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.bands-kpi-value {
  font-size: var(--ds-font-xl);
  font-weight: 700;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
.bands-kpi-value.band-red    { color: #b91c1c; }
.bands-kpi-value.band-yellow { color: #b45309; }
.bands-kpi-value.band-green  { color: #047857; }

/* Bands grid table — borrows .sortable-table primitives but adds band cells */
#show-rate-bands-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
#show-rate-bands-table thead th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted-foreground);
  background: var(--surface2);
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}
#show-rate-bands-table thead th:not(:first-child) { text-align: center; }
#show-rate-bands-table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--card-border);
  text-align: center;
  font-weight: 600;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
#show-rate-bands-table tbody td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--foreground);
  white-space: nowrap;
}
#show-rate-bands-table tbody tr:hover td:not([class*="band-"]) { background: var(--bg-hover); }
#show-rate-bands-table tbody tr:last-child td { border-bottom: none; }

#show-rate-bands-table .cell-pct {
  display: block;
  font-size: 10px;
  font-weight: 500;
  opacity: 0.7;
  margin-top: 3px;
  letter-spacing: 0.3px;
}

/* Band cells — opaque, high-contrast, light-theme friendly */
#show-rate-bands-table td.band-red    { background: #fee2e2; color: #991b1b; font-weight: 700; }
#show-rate-bands-table td.band-yellow { background: #fef3c7; color: #92400e; font-weight: 700; }
#show-rate-bands-table td.band-green  { background: #d1fae5; color: #065f46; font-weight: 700; }
#show-rate-bands-table td.band-neutral { color: var(--muted-foreground); font-weight: 500; }
#show-rate-bands-table td.band-red .cell-pct,
#show-rate-bands-table td.band-yellow .cell-pct,
#show-rate-bands-table td.band-green .cell-pct { opacity: 0.85; }

/* 260703-qa: base footnote so unscoped .widget-foot (Ads/Lead-Sources) match the muted 11px caption */
.widget-foot { font-size: 11px; color: var(--muted-foreground); line-height: 1.5; }
.widget-show-rate-bands .widget-foot {
  margin: 14px 4px 0;
  font-size: 11px;
  color: var(--muted-foreground);
  font-style: italic;
}

/* ────────────────────────────────────────────────────────────────────────────
   260531-miv4: VSL FUNNEL deep view
   ──────────────────────────────────────────────────────────────────────────── */
.widget-vsl-funnel .widget-body { padding: 0; }

.vsl-headline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin: var(--ds-space-sm) 0 var(--ds-space-xl);
  background: var(--card-border);
  border: 1px solid var(--card-border);
  border-radius: var(--ds-radius-md); /* 260609-hqk: match Dashboard .kpi-strip */
  overflow: hidden;
  box-shadow: var(--ds-shadow-card);
}

.vsl-section { margin-bottom: 24px; }
.vsl-section:last-child { margin-bottom: 0; }
.vsl-section-title {
  font-size: var(--ds-font-xs); /* 260609-hqk: token (= Dashboard .section-card__title) */
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: var(--ds-space-sm);
}
.vsl-section-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-foreground);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
  opacity: 0.7;
}

/* Status breakdown table shares look with show-rate-bands */
#vsl-status-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
#vsl-status-table thead th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted-foreground);
  background: var(--surface2);
  padding: 10px 12px;
  text-align: center;
  border-bottom: 1px solid var(--card-border);
}
#vsl-status-table tbody td {
  padding: 14px 12px;
  text-align: center;
  font-weight: 700;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
#vsl-status-table td.band-red    { background: #fee2e2; color: #991b1b; }
#vsl-status-table td.band-yellow { background: #fef3c7; color: #92400e; }
#vsl-status-table td.band-green  { background: #d1fae5; color: #065f46; }
#vsl-status-table td.band-neutral { color: var(--foreground); }
#vsl-status-table .cell-pct {
  display: block;
  font-size: 10px;
  font-weight: 500;
  opacity: 0.7;
  margin-top: 3px;
  letter-spacing: 0.3px;
}

/* Recent appointments table */
#vsl-recent-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
#vsl-recent-table thead th {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8a93a4;
  background: var(--surface2);
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}
#vsl-recent-table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--card-border);
  color: var(--foreground);
  vertical-align: top;
}
#vsl-recent-table tbody tr:last-child td { border-bottom: none; }
#vsl-recent-table tbody tr[data-href] { cursor: pointer; }
#vsl-recent-table tbody tr[data-href]:hover td { background: var(--bg-hover); }
#vsl-recent-table .cell-pct {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted-foreground);
  margin-top: 2px;
  letter-spacing: 0;
  opacity: 1;
}

/* Status + confirmation chips */
.vsl-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.vsl-chip--showed     { background: #d1fae5; color: #065f46; }
.vsl-chip--confirmed  { background: #dbeafe; color: #1e40af; }
.vsl-chip--scheduled  { background: #dbeafe; color: #1e40af; }
.vsl-chip--no-show    { background: #fee2e2; color: #991b1b; }
.vsl-chip--cancelled  { background: #fef3c7; color: #92400e; }
.vsl-chip--sent       { background: var(--surface2); color: var(--muted-foreground); }
.vsl-chip--unsent     { background: transparent; color: var(--muted-foreground); opacity: 0.6; }

/* 260531-miv7: Window KPI now shows the backend-resolved label which can be
   long (e.g. "Mar 1 → Mar 15"). Shrink the font + tighten so it fits the card. */
.bands-kpi-value--window {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
}

/* ────────────────────────────────────────────────────────────────────────────
   260531-miv8: VSL Funnel — Correlation Explorer widget
   ──────────────────────────────────────────────────────────────────────────── */
.widget-vsl-corr .widget-body { padding: 0; }

.corr-controls {
  display: flex;
  gap: 16px;
  align-items: end;
  flex-wrap: wrap;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--card-border);
  margin-bottom: 16px;
}
.corr-control { display: flex; flex-direction: column; gap: 4px; }
.corr-control > span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.corr-control select,
.corr-control input[type="number"] {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 7px 10px;
  min-width: 180px;
  cursor: pointer;
}
.corr-control input[type="number"] { min-width: 90px; }
.corr-control select:focus,
.corr-control input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.corr-hint {
  font-size: 11px;
  color: var(--muted-foreground);
  font-style: italic;
  margin-left: auto;
  align-self: center;
  max-width: 400px;
  text-align: right;
}

.corr-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px;
  margin-bottom: 18px;
  background: var(--card-border);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  overflow: hidden;
}

#corr-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
#corr-table thead th {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8a93a4;
  background: var(--surface2);
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}
#corr-table thead th.num { text-align: right; }
#corr-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--card-border);
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
#corr-table tbody td.num { text-align: right; font-weight: 600; }
#corr-table tbody td.corr-value-cell {
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
#corr-table tbody tr:hover td:not([class*="band-"]) { background: var(--bg-hover); }
#corr-table tbody tr:last-child td { border-bottom: none; }
#corr-table td.band-red    { background: #fee2e2; color: #991b1b; font-weight: 700; }
#corr-table td.band-yellow { background: #fef3c7; color: #92400e; font-weight: 700; }
#corr-table td.band-green  { background: #d1fae5; color: #065f46; font-weight: 700; }
#corr-table td.band-neutral { color: var(--muted-foreground); font-weight: 500; }
#corr-table td.corr-rev-col {
  color: var(--muted-foreground);
  font-weight: 500;
  font-style: italic;
}

/* 260531-miv18: clean coaching revenue column — promoted to primary */
#corr-table td.corr-coach-col,
.drill-leads-table td.corr-coach-col {
  color: var(--foreground);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#corr-table th.corr-coach-col,
.drill-leads-table th.corr-coach-col {
  color: var(--foreground);
}
.drill-stat-value--coach {
  color: #047857;
  font-weight: 800;
}

.widget-vsl-corr .widget-foot {
  margin-top: 14px;
  font-size: 11px;
  color: var(--muted-foreground);
  line-height: 1.7;
}
.corr-rule {
  display: inline-block;
  margin: 0 6px 0 0;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.rule-green  { background: #d1fae5; color: #065f46; }
.rule-yellow { background: #fef3c7; color: #92400e; }
.rule-red    { background: #fee2e2; color: #991b1b; }

/* ────────────────────────────────────────────────────────────────────────────
   260531-miv9: VSL Funnel — Top Performers leaderboards
   ──────────────────────────────────────────────────────────────────────────── */
.widget-vsl-leaderboards .widget-body { padding: 0; }

.leaderboard-intro {
  font-size: 12px;
  color: var(--muted-foreground);
  margin: 6px 0 14px;
  line-height: 1.5;
}
.leaderboard-intro strong { color: var(--foreground); font-weight: 700; }

.leaderboards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.lb-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lb-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 160ms ease, transform 160ms ease;
  position: relative;
}
.lb-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 260531-miv14: thicker gradient top accent for stronger visual identity */
.lb-card.lb-tone-good {
  border-top: 4px solid transparent;
  background-image: linear-gradient(var(--card), var(--card)),
                    linear-gradient(90deg, #10b981, #059669);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.lb-card.lb-tone-bad {
  border-top: 4px solid transparent;
  background-image: linear-gradient(var(--card), var(--card)),
                    linear-gradient(90deg, #ef4444, #b91c1c);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.lb-card.lb-tone-muted {
  border-top: 4px solid transparent;
  background-image: linear-gradient(var(--card), var(--card)),
                    linear-gradient(90deg, #155eef, #1898ff);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.lb-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.lb-card-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.lb-card-titles {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.lb-card-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--foreground);
}
.lb-card-hint {
  font-size: 10px;
  color: var(--muted-foreground);
  font-style: italic;
  line-height: 1.4;
}
.btn-csv {
  background: var(--ceo-gradient);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.btn-csv:hover { opacity: .9; }

.lb-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* 260630-qiq: refined to handoff Leaderboard row spec — pad 11px 14px, radius 10px,
   bg #f7f9fc, border #eef1f7. Rank badge sized up to the handoff's 26px circle. */
.lb-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 12px;
  background: #f7f9fc;
  border: 1px solid #eef1f7;
  transition: transform 120ms ease;
}
.lb-row:hover {
  transform: translateX(2px);
}
.lb-rank {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e7ecf4;
  color: #6c7689;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
/* 260531-miv14 / 260630-qiq: gold badge for #1 — handoff leader tone (star, gold disc) */
.lb-rank--gold {
  background: #ffe6a3;
  color: #7a5b00;
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(245, 158, 11, 0.35);
}

/* Emphasize #1 row — larger metric font, subtle ring */
.lb-row--top {
  padding: 12px 15px;
}
.lb-row--top .lb-metric {
  font-size: 15px;
}
.lb-row--top .lb-value {
  font-weight: 700;
}
.lb-value {
  grid-column: 2;
  font-weight: 600;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.lb-metric {
  grid-column: 3;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}
/* 260630-qiq: handoff spec — negative leaderboard values render red */
.lb-metric--negative { color: #b42318; }
.lb-sample {
  grid-column: 2 / span 2;
  font-size: 10px;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

/* Per-row band colors */
.lb-row.lb-strong-good { background: #d1fae5; }
.lb-row.lb-strong-good .lb-value,
.lb-row.lb-strong-good .lb-metric { color: #065f46; }
.lb-row.lb-strong-good .lb-rank { color: #047857; }

.lb-row.lb-weak-good { background: #ecfdf5; }
.lb-row.lb-weak-good .lb-metric { color: #047857; }

.lb-row.lb-good { background: #ecfdf5; }
.lb-row.lb-good .lb-metric { color: #047857; }

.lb-row.lb-strong-bad { background: #fee2e2; }
.lb-row.lb-strong-bad .lb-value,
.lb-row.lb-strong-bad .lb-metric { color: #991b1b; }
.lb-row.lb-strong-bad .lb-rank { color: #b91c1c; }

.lb-row.lb-weak-bad { background: #fef2f2; }
.lb-row.lb-weak-bad .lb-metric { color: #b91c1c; }

.lb-row.lb-bad { background: #fff7ed; }
.lb-row.lb-bad .lb-metric { color: #9a3412; }

.lb-row.lb-neutral { opacity: 0.7; }
.lb-row.lb-neutral .lb-metric { color: var(--muted-foreground); }

/* 260531-miv14: polished empty states */
.lb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 8px 8px;
  text-align: center;
}
.lb-empty-icon {
  font-size: 28px;
  line-height: 1;
  opacity: 0.5;
  margin-bottom: 2px;
}
.lb-empty-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--foreground);
}
.lb-empty-body {
  font-size: 11px;
  color: var(--muted-foreground);
  line-height: 1.5;
  max-width: 220px;
}
.lb-empty--dq .lb-empty-icon {
  font-size: 32px;
  opacity: 0.4;
}

/* 260531-miv10 / miv14: inline magnitude bar — gradient sits behind row,
   width relative to top performer in the card (so #1 always fills 100%) */
.lb-row { position: relative; overflow: hidden; }
.lb-row::before {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--lb-bar-pct, 0%);
  background: linear-gradient(90deg, rgba(21, 94, 239, 0.16), rgba(21, 94, 239, 0.03));
  border-radius: 10px;
  pointer-events: none;
  z-index: 0;
  transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lb-row > * { position: relative; z-index: 1; }
/* 260531-miv14: gradient magnitude bars per-row tone */
.lb-row.lb-strong-good::before { background: linear-gradient(90deg, rgba(16, 185, 129, 0.28), rgba(16, 185, 129, 0.06)); }
.lb-row.lb-weak-good::before   { background: linear-gradient(90deg, rgba(16, 185, 129, 0.16), rgba(16, 185, 129, 0.04)); }
.lb-row.lb-good::before        { background: linear-gradient(90deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.02)); }
.lb-row.lb-strong-bad::before  { background: linear-gradient(90deg, rgba(220, 38, 38, 0.26), rgba(220, 38, 38, 0.06)); }
.lb-row.lb-weak-bad::before    { background: linear-gradient(90deg, rgba(220, 38, 38, 0.16), rgba(220, 38, 38, 0.04)); }
.lb-row.lb-bad::before         { background: linear-gradient(90deg, rgba(234, 88, 12, 0.16), rgba(234, 88, 12, 0.04)); }
.lb-row.lb-neutral::before     { background: linear-gradient(90deg, rgba(148, 163, 184, 0.12), rgba(148, 163, 184, 0.02)); }

/* ────────────────────────────────────────────────────────────────────────────
   260531-miv10: VSL Funnel charts (funnel bars + status donut, side-by-side)
   ──────────────────────────────────────────────────────────────────────────── */
.vsl-charts-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 14px;
  margin: 8px 0 20px;
}
@media (max-width: 1000px) {
  .vsl-charts-row { grid-template-columns: 1fr; }
}

.vsl-chart-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 240px;
}
.vsl-chart-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.vsl-funnel-bars-svg {
  width: 100%;
  height: 220px;
  display: block;
}

/* 260602-vsz — bar charts that should size to their viewBox aspect ratio
 * instead of being letterboxed in a fixed 220px-tall container. These two
 * are wide horizontal charts where the row count drives the natural height. */
#cr-correlation-bars,
#cr-concentration-bars {
  width: 100%;
  height: auto;
  max-height: 520px;
  display: block;
}

/* 260602-rol / 260602-drl — Correlation Explorer rolled-up category rows
 * + click-to-expand drill-in. When Calendar dim is selected, the chart and
 * table collapse to aggregate rows (Sales/Personal/Upsell or per-User).
 * Clicking a row toggles is-expanded and unhides its sub-calendar rows. */
.cr-corr-group-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.cr-corr-sub-count {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted-foreground);
  font-weight: 500;
}

/* Aggregate row — clickable with chevron */
tr.cr-corr-agg { cursor: pointer; }
tr.cr-corr-agg:hover td { background: var(--bg-hover); }
tr.cr-corr-agg:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cr-corr-chev {
  display: inline-block;
  margin-right: 8px;
  font-size: 10px;
  color: var(--muted-foreground);
  transition: transform .15s ease;
  transform-origin: center;
}
tr.cr-corr-agg.is-expanded .cr-corr-chev { transform: rotate(90deg); }

/* Sub-calendar drill rows */
tr.cr-corr-sub td {
  background: color-mix(in srgb, var(--card) 96%, var(--accent));
  font-size: 12px;
  color: var(--foreground);
}
tr.cr-corr-sub .cr-corr-sub-bucket {
  padding-left: 28px;
  color: var(--muted-foreground);
  font-weight: 500;
}

/* Group-by pill toggle group (Category / User) */
.ds-toggle-pillgroup {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--surface2);
  border: 1px solid var(--card-border);
  border-radius: 999px;
}
.ds-toggle-pillgroup .ds-toggle-pill {
  padding: 5px 12px;
  background: transparent;
  border: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground);
}
.ds-toggle-pillgroup .ds-toggle-pill:hover { color: var(--foreground); background: transparent; border: none; }
.ds-toggle-pillgroup .ds-toggle-pill--active,
.ds-toggle-pillgroup .ds-toggle-pill[aria-pressed="true"] {
  background: var(--card);
  color: var(--accent);
  border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.vsl-funnel-bars-legend {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  color: var(--muted-foreground);
  border-top: 1px solid var(--card-border);
  padding-top: 10px;
  margin-top: auto;
}
.vsl-fb-stat strong {
  font-weight: 700;
  color: var(--foreground);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-right: 4px;
}
.vsl-fb-sep { color: var(--card-border); }

.vsl-donut-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 14px;
  align-items: center;
  flex: 1;
}
.vsl-donut-body svg {
  width: 100%;
  max-width: 180px;
  height: auto;
}
.vsl-donut-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.vsl-donut-legend li {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

/* 260531-miv11: chart loading skeletons — pulsing placeholders so the
   charts don't look broken during first fetch */
@keyframes chart-skel-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.75; }
}
.chart-skel-bar {
  fill: var(--surface2);
  animation: chart-skel-pulse 1.4s ease-in-out infinite;
}
.chart-skel-donut {
  stroke: var(--surface2);
  stroke-width: 28;
  animation: chart-skel-pulse 1.4s ease-in-out infinite;
}
.chart-skel-text {
  display: inline-block;
  font-size: 11px;
  color: var(--muted-foreground);
  font-style: italic;
}
.chart-skel-row {
  height: 14px;
  background: var(--surface2);
  border-radius: 4px;
  margin: 4px 0;
  animation: chart-skel-pulse 1.4s ease-in-out infinite;
  list-style: none;
}

/* ────────────────────────────────────────────────────────────────────────────
   260531-miv13: Collapse toggles — chevron buttons that hide list sections.
   Two flavors: section-level (vsl-section) and widget-header-level (.widget).
   ──────────────────────────────────────────────────────────────────────────── */

/* Section-level toggle: replaces the .vsl-section-title <div> with a full-width
   <button> so the whole label row is clickable. */
.vsl-section .collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0 0 10px;
  margin: 0;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  text-align: left;
  user-select: none;
}
.vsl-section .collapse-toggle:hover { color: var(--accent); }
.vsl-section .collapse-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 260531-miv15: bigger chevrons + bigger clickable target */
/* Widget-header-level toggle: icon button on the right of the header */
.widget-header .collapse-toggle--header {
  background: transparent;
  border: none;
  padding: 8px 12px;
  margin-left: 10px;
  cursor: pointer;
  color: var(--muted-foreground);
  font-size: 24px;
  border-radius: 8px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 36px;
  justify-content: center;
}
.widget-header .collapse-toggle--header:hover {
  background: var(--bg-hover);
  color: var(--accent);
}

/* Chevron rotation */
.collapse-chevron {
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  color: var(--muted-foreground);
  transition: transform 180ms ease, color 120ms ease;
  margin-left: 8px;
  line-height: 1;
}
.vsl-section .collapse-toggle:hover .collapse-chevron,
.widget-header .collapse-toggle--header:hover .collapse-chevron {
  color: var(--accent);
}
.is-collapsed .collapse-chevron {
  transform: rotate(-90deg);
}

/* Hide bodies when collapsed */
.is-collapsed > .collapse-body,
.is-collapsed .collapse-body {
  display: none;
}

/* Tighter top padding on collapsed sections — visual "this is compact" cue */
.vsl-section.is-collapsed .collapse-toggle { padding-bottom: 0; }
.widget.is-collapsed { padding-bottom: 14px; }
.widget.is-collapsed .widget-header { margin-bottom: 0; }

/* 260602-lll — Per-list collapse toggle.
 * Small, muted control that sits directly above a lead-list table inside a
 * widget body. Collapses just the table, independent of the section-level
 * toggle in the widget header. Reuses the canonical .collapse-toggle JS
 * (data-collapse-target → toggleCollapse) so state persists in localStorage. */
.lead-list-section {
  margin: 0;
}
.lead-list-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 4px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--card-border);
  cursor: pointer;
  color: var(--muted-foreground);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-align: left;
  transition: color .15s ease;
}
.lead-list-toggle:hover { color: var(--accent); }
.lead-list-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.lead-list-toggle .collapse-chevron {
  margin-left: auto;
  transition: transform .15s ease;
}
.lead-list-section.is-collapsed .collapse-chevron { transform: rotate(-90deg); }

/* 260531-miv16: Bucket detail sub-section sits inside Correlation Explorer.
   Add a divider above the toggle so it visually separates from totals. */
.corr-bucket-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--card-border);
}

/* ────────────────────────────────────────────────────────────────────────────
   260531-miv17: Drill-into-row drawer + clickable Correlation Explorer rows
   ──────────────────────────────────────────────────────────────────────────── */
#corr-table tbody tr.corr-row { cursor: pointer; transition: background 120ms ease; }
#corr-table tbody tr.corr-row:hover { background: var(--bg-hover); }
.corr-drill-hint {
  display: inline-block;
  color: var(--muted-foreground);
  font-weight: 700;
  margin-left: 4px;
  transition: transform 120ms ease, color 120ms ease;
  opacity: 0.5;
}
#corr-table tbody tr.corr-row:hover .corr-drill-hint {
  color: var(--accent);
  opacity: 1;
  transform: translateX(2px);
}

/* Drawer container — full-viewport overlay + right-side panel */
.drill-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}
.drill-drawer.is-open { pointer-events: auto; }
.drill-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  opacity: 0;
  transition: opacity 220ms ease;
}
.drill-drawer.is-open .drill-drawer-overlay { opacity: 1; }

.drill-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(720px, 90vw);
  background: var(--card);
  border-left: 1px solid var(--card-border);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
}
.drill-drawer.is-open .drill-drawer-panel { transform: translateX(0); }

body.drill-drawer-locked { overflow: hidden; }

.drill-drawer-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--card-border);
}
.drill-drawer-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.drill-drawer-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.drill-drawer-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--foreground);
  margin: 0;
  word-break: break-word;
}
.drill-drawer-period {
  font-size: 11px;
  color: var(--muted-foreground);
  font-style: italic;
}
.drill-drawer-close {
  background: transparent;
  border: none;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  padding: 4px 10px;
  color: var(--muted-foreground);
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
}
.drill-drawer-close:hover { background: var(--bg-hover); color: var(--foreground); }

.drill-drawer-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  margin: 14px 20px 0;
  background: var(--card-border);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  overflow: hidden;
}
.drill-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--card);
}
.drill-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.drill-stat-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
.drill-stat-value em {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-foreground);
  font-style: normal;
  margin-left: 4px;
}
.drill-stat-value--muted {
  color: var(--muted-foreground);
  font-style: italic;
  font-size: 16px;
}

.drill-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 20px 20px;
}
.drill-drawer-loading,
.drill-drawer-error {
  padding: 28px 20px;
  text-align: center;
  font-size: 12px;
  color: var(--muted-foreground);
  font-style: italic;
}
.drill-drawer-error { color: var(--error); }
.drill-drawer-empty {
  padding: 28px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.drill-leads-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}
.drill-leads-table thead th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted-foreground);
  background: var(--surface2);
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--card-border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.drill-leads-table thead th.num { text-align: right; }
.drill-leads-table tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--card-border);
  color: var(--foreground);
  vertical-align: top;
}
.drill-leads-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.drill-leads-table tbody tr:last-child td { border-bottom: none; }
.drill-leads-table tbody tr.drill-lead-row--sold { background: rgba(16, 185, 129, 0.06); }
.drill-leads-table tbody tr.drill-lead-row--sold:hover { background: rgba(16, 185, 129, 0.10); }

.drill-contact-cell { min-width: 160px; }
.drill-contact-name {
  font-weight: 700;
  color: var(--foreground);
}
.drill-contact-meta {
  font-size: 11px;
  color: var(--muted-foreground);
  margin-top: 2px;
}
.drill-date {
  font-size: 11px;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.drill-chip {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.drill-chip--showed    { background: #d1fae5; color: #065f46; }
.drill-chip--confirmed { background: #dbeafe; color: #1e40af; }
.drill-chip--scheduled { background: #dbeafe; color: #1e40af; }
.drill-chip--no-show   { background: #fee2e2; color: #991b1b; }
.drill-chip--cancelled { background: #fef3c7; color: #92400e; }
.drill-chip--sold      { background: #dcfce7; color: #14532d; }
.drill-chip--purchased { background: #dcfce7; color: #14532d; }
.drill-chip--lead      { background: var(--surface2); color: var(--muted-foreground); }
.drill-chip--booked    { background: #dbeafe; color: #1e40af; }
.drill-chip--none      { background: transparent; color: var(--muted-foreground); opacity: 0.6; border: 1px dashed var(--card-border); }

.drill-ghl-link {
  display: inline-block;
  padding: 4px 8px;
  background: var(--surface2);
  color: var(--accent);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.drill-ghl-link:hover { background: var(--accent-glow); }

.drill-drawer-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--card-border);
  font-size: 11px;
  color: var(--muted-foreground);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drill-footer-rev em { font-style: italic; }

/* 260601-eey: cr-* CSS removed — view reuses vsl-*/lb-*/drill-drawer-* */
/* Preserved: cr-kpi-good/warn/bad, cr-cell-good/warn/bad, cr-drill-hint, cr-stat-value--good/bad, cr-bookings-table */

/* cr-kpi colour modifiers (retained — used by app.js band functions) */
.cr-kpi-good { color: #047857; }
.cr-kpi-warn { color: #b45309; }
.cr-kpi-bad  { color: #b91c1c; }

/* table cell band colours (no vsl equivalent) */
.cr-cell-good { background: #d1fae5; color: #065f46; font-weight: 700; }
.cr-cell-warn { background: #fef3c7; color: #92400e; font-weight: 700; }
.cr-cell-bad  { background: #fee2e2; color: #991b1b; font-weight: 700; }

/* drill hint arrow (always preserved per plan) */
.cr-drill-hint {
  display: inline-block;
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  opacity: 0.6;
  transition: opacity 120ms, transform 120ms;
}
#cr-recent-unrecovered tbody tr:hover .cr-drill-hint { opacity: 1; transform: translateX(2px); }

.cr-stat-value--good { color: #047857; }
.cr-stat-value--bad  { color: #b91c1c; }

.cr-bookings-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}
.cr-bookings-table thead th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted-foreground);
  background: var(--surface2);
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--card-border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.cr-bookings-table tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--card-border);
  color: var(--foreground);
  vertical-align: middle;
}
.cr-bookings-table tbody tr:last-child td { border-bottom: none; }
.cr-bookings-table tbody tr:hover td { background: var(--bg-hover); }


/* ─────────────────────────────────────────────────────────────────────
 * 260601-bm6 — VSL application-grade chip + distribution bar
 * ───────────────────────────────────────────────────────────────────── */
.grade-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  min-width: 22px;
}
.grade-chip.grade-4 { background: #10b981; } /* emerald — sweet spot single-book */
.grade-chip.grade-3 { background: #3b82f6; } /* blue    — standard single-book   */
.grade-chip.grade-2 { background: #f59e0b; } /* amber   — setter triage          */
.grade-chip.grade-1 { background: #ef4444; } /* red     — DQ                     */
.grade-chip.grade-null {
  background: transparent;
  color: var(--muted-foreground, #6b7280);
  font-weight: 500;
}
.drill-leads-table th.col-grade,
.drill-leads-table td.col-grade { text-align: center; width: 56px; }

.grade-distribution { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 0; }
.grade-distribution .bar {
  display: flex; width: 100%; height: 28px; border-radius: 6px; overflow: hidden;
  background: var(--surface2, #2a2f36);
}
.grade-distribution .bar > div {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #fff; font-weight: 700;
  white-space: nowrap; overflow: hidden;
}
.grade-distribution .bar .seg-4 { background: #10b981; }
.grade-distribution .bar .seg-3 { background: #3b82f6; }
.grade-distribution .bar .seg-2 { background: #f59e0b; }
.grade-distribution .bar .seg-1 { background: #ef4444; }
.grade-distribution .bar .seg-empty {
  background: var(--surface2, #2a2f36); color: var(--muted-foreground, #6b7280); font-weight: 500;
}
.grade-distribution .legend {
  display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px;
  color: var(--muted-foreground, #6b7280);
}
.grade-distribution .legend > div { display: flex; align-items: center; gap: 6px; }
.grade-distribution .legend .swatch { width: 12px; height: 12px; border-radius: 2px; flex: 0 0 12px; }
.grade-distribution .meta { font-size: 12px; color: var(--muted-foreground, #6b7280); }
.grade-distribution .meta.is-error { color: #ef4444; }

/* 260602-gxe — empty-state parity with sibling rank cards.
 * When the body has no graded submissions (or errors), .is-empty resets the
 * 28px bar clip so the canonical .lb-empty block (∅ icon + title + body) can
 * render freely, and hides the now-meaningless legend + meta row. */
.grade-distribution.is-empty .bar {
  background: transparent;
  height: auto;
  overflow: visible;
  border-radius: 0;
}
/* Neutralize .bar > div (which forces white text + nowrap clip on colored
 * segments) so the nested .lb-empty can render with its own canonical
 * --foreground / --muted-foreground colors and wrap freely. */
.grade-distribution.is-empty .bar > div {
  display: block;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  white-space: normal;
  overflow: visible;
}
.grade-distribution.is-empty .legend,
.grade-distribution.is-empty .meta {
  display: none;
}

/* 260601-f0w — sparkbar utilities for inline cell viz */
.vsl-cell-sparkbar {
  display: inline-block;
  height: 4px;
  vertical-align: middle;
  margin-left: 6px;
  border-radius: 2px;
  max-width: 60px;
  min-width: 2px;
}
.vsl-cell-sparkbar--good { background: #10b981; }
.vsl-cell-sparkbar--warn { background: #f59e0b; }
.vsl-cell-sparkbar--bad  { background: #ef4444; }


/* ════════════════════════════════════════════════════════════════════════════
   260601-ezz — SURVEY DEEP-DIVE styles
   ════════════════════════════════════════════════════════════════════════════ */

.ezz-picker-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 0 14px 0;
}
/* ════════════════════════════════════════════════════════════════════════════
   260601-j4e — Canonical light-theme form controls
   Dark navy leaderboard-palette form controls (--lb-* fallbacks #1a1f30/#131826
   etc., never defined in this light portal so the dark fallback always applied)
   are replaced with light design-system tokens. PURPLE accent (--accent #155eef)
   for the active/selected state — never gold-on-dark.
   Domain-locked meaning chips (grade chips #10b981/#3b82f6/#f59e0b/#ef4444,
   bands, decision-rule chips, heatmap CELLS) are intentionally NOT
   touched — only interactive FORM CONTROLS (toggle pills, selects, inputs).
   ──────────────────────────────────────────────────────────────────────────── */
.ds-toggle-pill {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--surface2);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ds-toggle-pill:hover { background: var(--muted); border-color: var(--accent); }
.ds-toggle-pill--active,
.ds-toggle-pill[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
.ds-select {
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ds-select:hover { border-color: var(--accent); }
.ds-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.ds-input {
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ds-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* 260601-j4e: Survey Deep-Dive question pills + ROWS/COLS selects retrofitted
   onto the canonical light form-control pattern above (was dark navy + gold). */
.ezz-chip {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--surface2);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ezz-chip:hover { background: var(--muted); border-color: var(--accent); }
.ezz-chip[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
.ezz-axis-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ezz-axis-select {
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ezz-axis-select:hover { border-color: var(--accent); }
.ezz-axis-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ── 1D distribution ─────────────────────────────────────────────────────── */
.ezz-dist-chart { padding: 4px 0; }
.ezz-dist-table { display: flex; flex-direction: column; }
.ezz-dist-head, .ezz-dist-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) minmax(180px, 2fr) 90px 80px 110px minmax(140px, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
}
.ezz-dist-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--lb-muted, #94a3b8);
  border-bottom: 1px solid var(--lb-border, #2a3145);
}
.ezz-dist-row {
  border-bottom: 1px solid var(--lb-border, #2a3145);
  transition: background .12s ease;
}
.ezz-dist-row:hover { background: var(--lb-surface2, #1a1f30); }
.ezz-dist-bucket { font-size: 13px; }
.ezz-dist-bucket .ezz-muted { color: var(--lb-muted, #94a3b8); font-size: 11px; margin-left: 6px; }
.ezz-dist-bar-cell { position: relative; display: flex; align-items: center; gap: 10px; }
.ezz-dist-bar {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, #3b82f6, #6366f1);
  min-width: 4px;
}
.ezz-dist-leads { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--lb-text, #e2e8f0); }
.ezz-dist-cell { font-size: 13px; font-variant-numeric: tabular-nums; }
.ezz-dist-cell.ezz-num { text-align: right; }

.ezz-chip-show {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.ezz-chip-show--green { background: #10b981; }
.ezz-chip-show--amber { background: #f59e0b; }
.ezz-chip-show--red   { background: #ef4444; }
.ezz-chip-show--gray  { background: #6b7280; }

.ezz-grademix {
  display: flex;
  height: 10px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--lb-surface, #131826);
}
.ezz-grademix-seg { display: block; }

/* ── 2D heatmap ──────────────────────────────────────────────────────────── */
.ezz-heatmap { padding: 6px 0; overflow-x: auto; }

/* ── Drill drawer survey panorama card ─────────────────────────────────── */
.drill-lead-row.ezz-row-expanded { background: rgba(59, 130, 246, 0.08); }
.ezz-survey-expansion td {
  padding: 0;
  background: var(--lb-surface, #131826);
}
.ezz-survey-card {
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--lb-surface2, #1a1f30);
  margin: 6px 8px;
  border-left: 3px solid var(--lb-gold, #d6b34e);
}
.ezz-survey-card__title {
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--lb-text, #e2e8f0);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ezz-survey-card__list {
  display: grid;
  grid-template-columns: 140px 1fr;
  row-gap: 6px;
  column-gap: 14px;
  font-size: 13px;
  margin: 0;
}
.ezz-survey-row { display: contents; }
.ezz-survey-card__list dt { color: var(--lb-muted, #94a3b8); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.ezz-survey-card__list dd { margin: 0; color: var(--lb-text, #e2e8f0); }
.ezz-survey-row.ezz-open-text {
  display: block;
  grid-column: 1 / -1;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid var(--lb-border, #2a3145);
}
.ezz-open-text dt { display: block; margin-bottom: 4px; }
.ezz-open-text dd { display: block; font-style: italic; color: var(--lb-text, #e2e8f0); }
.ezz-grade-explainer {
  margin-top: 12px;
  padding: 8px 10px;
  background: var(--lb-surface, #131826);
  border-radius: 6px;
  font-size: 12px;
  color: var(--lb-text, #e2e8f0);
}
.ezz-grade-explainer code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--lb-muted, #94a3b8);
}
.ezz-survey-loading, .ezz-survey-empty {
  padding: 14px;
  color: var(--lb-muted, #94a3b8);
  font-style: italic;
  font-size: 13px;
}

/* ── 260602-dph: ADS tab — tracked Meta Ad Library cards ────────────────── */

.ads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ds-space-lg);
}

.ad-card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-md);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-card);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.ad-card:hover,
.ad-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(21,94,239,0.12);
  outline: none;
}

.ad-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface2);
  border: 1px dashed var(--card-border);
  border-radius: var(--ds-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground);
  font-size: var(--ds-font-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ad-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--ds-radius-sm);
}

.ad-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-space-sm);
}

.ad-card__label {
  font-size: var(--ds-font-base);
  font-weight: 600;
  line-height: 1.3;
  color: var(--foreground, hsl(215 28% 17%));
}

.ad-card__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  font-size: var(--ds-font-xs);
  color: var(--muted-foreground);
  word-break: break-all;
}

.ad-card__badge {
  flex-shrink: 0;
  font-size: var(--ds-font-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.ad-card__badge--active   { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.ad-card__badge--inactive { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.ad-card__badge--unknown  { background: var(--surface2); color: var(--muted-foreground); border-color: var(--card-border); }

.ad-card__notes {
  font-size: var(--ds-font-sm);
  color: var(--muted-foreground);
  line-height: 1.4;
}

.ads-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-xl) var(--ds-space-lg);
  text-align: center;
  color: var(--muted-foreground);
}
.ads-empty__icon {
  font-size: 28px;
  color: var(--accent);
  opacity: 0.5;
}
.ads-empty__title {
  font-size: var(--ds-font-lg);
  font-weight: 600;
  color: var(--foreground, hsl(215 28% 17%));
}
.ads-empty__body {
  font-size: var(--ds-font-sm);
  max-width: 420px;
}
.ads-empty__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  font-size: var(--ds-font-xs);
  padding: 1px 6px;
  background: var(--surface2);
  border: 1px solid var(--card-border);
  border-radius: 4px;
}

.ads-error {
  padding: var(--ds-space-md);
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-font-sm);
}




/* ── 260608-ju2: Revenue Trend bar chart + Lead→Sale funnel ─────────────────── */
.bc-wrap{ width:100%; margin-top:4px; }
.bc-svg{ width:100%; height:auto; display:block; overflow:visible; }
.bc-baseline{ stroke:var(--border); stroke-width:1; }
.bc-bar{ transition:opacity .15s; }
.bc-bar:hover{ opacity:0.85 !important; }
.bc-vlabel{ fill:var(--muted-foreground); font-size:10px; font-weight:600; font-family:'Inter',system-ui,sans-serif; }
/* 260630-qiq: handoff x-axis label color #a6aebc (kept bar-style chart per handoff §6 note) */
.bc-xlabel{ fill:#a6aebc; font-size:11px; font-weight:500; font-family:'Inter',system-ui,sans-serif; }
.bc-xlabel--current{ fill:var(--foreground); font-weight:700; }

/* end 260608-ju2 */

/* ── 260608-les: scorecard drill-down panel + active-card state ─────────────── */
.sc-drill { margin-top: var(--ds-space-md, 14px); border: 1px solid var(--card-border); border-radius: var(--ds-radius-md, 12px); background: var(--card); box-shadow: var(--ds-shadow-card); padding: var(--ds-space-md,14px) var(--ds-space-lg,16px); }
.sc-drill[hidden] { display: none; }
.sc-drill__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.sc-drill__title { font-weight:700; color: var(--foreground); }
.sc-drill__subtitle { display:block; font-size:11.5px; color: var(--muted-foreground); font-weight:400; margin-top:2px; }
.sc-drill__close { background:transparent; border:0; font-size:20px; line-height:1; color: var(--muted-foreground); cursor:pointer; padding:2px 6px; border-radius:8px; }
.sc-drill__close:hover { color: var(--foreground); background: var(--bg); }
.sc-drill__stats { font-size:12.5px; color: var(--muted-foreground); margin-top:8px; font-variant-numeric: tabular-nums; }
.sc-drill__stats b { color: var(--foreground); font-weight:700; }
.sc-drill__def { font-size:12px; color: var(--muted-foreground); margin-top:6px; line-height:1.4; }
.sc-metric--clickable { cursor: pointer; }
.sc-metric--active { border-color: var(--src-color-1, #155eef) !important; box-shadow: 0 0 0 1px var(--src-color-1, #155eef) inset, var(--ds-shadow-card); }
.sc-metric--clickable:focus-visible { outline: 2px solid var(--src-color-1, #155eef); outline-offset: 2px; }
/* end 260608-les */

/* ── 260608-khd: scorecard sparkline + Funnel Health Trend line chart ───────── */
/* 260630-qiq: sparkline inside each KPI card — handoff spec is a fixed 78×24 box,
   stroke = accent, sitting in the card's bottom row next to the .kpi-card__sub caption. */
.sc-spark{ display:block; flex:0 0 auto; width:78px; height:24px; overflow:visible; opacity:.85; }
.kpi-card:hover .sc-spark{ opacity:1; }
/* 260701-data Show Rate Trend — latest-value + wide sparkline row (reuses .sc-spark svg) */
.srt-row{ display:flex; align-items:center; gap:14px; }
.srt-latest{ font-size:1.6rem; font-weight:700; line-height:1; color:var(--accent, #3b5bdb); flex:0 0 auto; }
.srt-spark{ flex:1 1 auto; min-width:0; }
.srt-spark .sc-spark{ width:100%; height:34px; opacity:1; }
/* featured Funnel Health Trend line chart */
.lc-wrap{ width:100%; margin-top:4px; }
.lc-svg{ width:100%; height:auto; display:block; overflow:visible; }
.lc-grid{ stroke:var(--border); stroke-width:1; stroke-dasharray:2 4; opacity:.6; }
.lc-grid--base{ stroke-dasharray:none; opacity:1; }
.lc-ylabel{ fill:var(--muted-foreground); font-size:10px; font-weight:500; font-family:'Inter',system-ui,sans-serif; font-variant-numeric:tabular-nums; }
.lc-avg{ stroke:var(--muted-foreground); stroke-width:1; stroke-dasharray:5 4; opacity:.55; }
.lc-avglabel{ fill:var(--muted-foreground); font-size:10px; font-weight:600; font-family:'Inter',system-ui,sans-serif; }
.lc-line{ fill:none; stroke-width:2.25; stroke-linejoin:round; stroke-linecap:round; }
.lc-dot{ transition:r .12s; }
.lc-dot:hover{ r:4.5; }
.lc-vlabel{ fill:var(--muted-foreground); font-size:10px; font-weight:600; font-family:'Inter',system-ui,sans-serif; font-variant-numeric:tabular-nums; }
.lc-xlabel{ fill:var(--muted-foreground); font-size:11px; font-weight:500; font-family:'Inter',system-ui,sans-serif; }
.lc-xlabel--current{ fill:var(--foreground); font-weight:700; }
/* end 260608-khd */

/* ── 260608-wcv: What's Converting (Show Rate Bands) — clean section ───────── */
.corr-kpi-strip{ margin-bottom:16px; }
.corr-bars-card{ margin:8px 0 18px; }
.corr-bars-title{ font-size:var(--ds-font-xs); font-weight:700; color:var(--muted-foreground); text-transform:uppercase; letter-spacing:1.2px; margin-bottom:var(--ds-space-sm); } /* 260609-hqk: eyebrow convention */
.corr-bars{ display:flex; flex-direction:column; gap:7px; }
.corr-bar-row{ display:grid; grid-template-columns:minmax(110px,1.3fr) 3fr auto; align-items:center; gap:10px; }
.corr-bar-label{ font-size:12px; color:var(--foreground,#0f172a); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.corr-bar-track{ background:var(--muted,#f1f5f9); border-radius:5px; height:16px; overflow:hidden; }
.corr-bar-fill{ height:100%; border-radius:5px; min-width:2px; transition:width .25s; }
.corr-bar-val{ font-size:12px; font-weight:700; color:var(--foreground,#0f172a); font-variant-numeric:tabular-nums; min-width:46px; text-align:right; }
.corr-bars-loading,.corr-bars-empty{ font-size:12px; opacity:.6; padding:8px 0; }
.corr-bar-fill.v-scale{ background:#16a34a; }
.corr-bar-fill.v-watch{ background:#f59e0b; }
.corr-bar-fill.v-pause{ background:#ef4444; }
.corr-bar-fill.v-neutral{ background:#94a3b8; }
.corr-verdict{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; line-height:1.5; }
.corr-verdict.v-scale{ background:rgba(22,163,74,.14); color:#15803d; }
.corr-verdict.v-watch{ background:rgba(245,158,11,.16); color:#b45309; }
.corr-verdict.v-pause{ background:rgba(239,68,68,.14); color:#b91c1c; }
.corr-verdict.v-neutral{ background:var(--muted,#f1f5f9); color:var(--muted-foreground,#64748b); }
/* end 260608-wcv */

/* ── 260609-srd: Show Rate Bands redesign — cohort funnel + status strip + show-rate bars ── */
/* Drivers: show-rate-band bar fills + best/worst group labels + KPI caption */
.corr-bar-fill.band-green{ background:#16a34a; }
.corr-bar-fill.band-yellow{ background:#f59e0b; }
.corr-bar-fill.band-red{ background:#ef4444; }
.corr-bar-fill.band-neutral{ background:#94a3b8; }
.corr-bars-group-label{ font-size:var(--ds-font-xs); font-weight:700; text-transform:uppercase; letter-spacing:1.2px; margin:var(--ds-space-sm) 0 var(--ds-space-xs); } /* 260609-hqk: eyebrow convention */
.corr-bars-group-label--best{ color:#15803d; }
.corr-bars-group-label--worst{ color:#b91c1c; margin-top:16px; }
.corr-strip-caption{ font-size:11px; color:var(--muted-foreground,#64748b); margin-bottom:6px; }

/* Performance: lead-cohort funnel (Leads -> Booked -> Showed) + Sold outcome */
.vsl-funnel-caption{ font-size:11px; color:var(--muted-foreground,#64748b); margin:6px 0 10px; }
.vsl-funnel-v2{ display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.vfn-loading{ font-size:12px; opacity:.6; padding:8px 0; }
.vfn-row{ display:grid; grid-template-columns:64px 1fr 170px; align-items:center; gap:12px; }
.vfn-label{ font-size:12px; font-weight:700; color:var(--foreground,#0f172a); text-transform:uppercase; letter-spacing:.03em; }
.vfn-track{ position:relative; background:var(--muted,#f1f5f9); border-radius:6px; height:30px; overflow:hidden; }
.vfn-fill{ height:100%; background:#155eef; border-radius:6px; min-width:2px; transition:width .25s; }
.vfn-fill--worst{ background:#ef4444; }
.vfn-count{ position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:12px; font-weight:700; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.25); }
.vfn-pct{ font-size:11px; font-weight:600; color:var(--muted-foreground,#64748b); white-space:nowrap; }
.vfn-row--worst .vfn-pct{ color:#b91c1c; }
.vfn-worst-tag{ display:inline-block; background:rgba(239,68,68,.14); color:#b91c1c; border-radius:999px; padding:1px 7px; font-size:10px; font-weight:700; margin-left:4px; }
.vfn-outcome{ display:flex; gap:28px; margin-top:8px; padding:10px 14px; background:var(--muted,#f8fafc); border-radius:8px; }
.vfn-outcome-item{ display:flex; flex-direction:column; }
.vfn-outcome-val{ font-size:20px; font-weight:800; color:var(--foreground,#0f172a); font-variant-numeric:tabular-nums; }
.vfn-outcome-lbl{ font-size:11px; color:var(--muted-foreground,#64748b); }

/* Performance: compact appointment-outcome strip (per-appointment) */
.vsl-status-block{ margin:16px 0 4px; }
.vsl-status-caption{ font-size:11px; color:var(--muted-foreground,#64748b); margin-bottom:6px; }
.vss-bar{ display:flex; height:14px; border-radius:7px; overflow:hidden; background:#e2e8f0; }
.vss-seg{ height:100%; }
.vss-chips{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px; }
.vss-chip{ font-size:12px; color:var(--foreground,#0f172a); display:inline-flex; align-items:center; gap:5px; }
.vss-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
/* end 260609-srd */


/* ===== 260703-uni: sales-log / call-log control-bar + modal CSS (relocated from an inline <style> block in index.html; single source of truth) ===== */
  /* 260624 / 260701-sl: Sales Log tab (attribution override) — light theme to match the portal */
  #view-sales-log .sl-filters, #view-call-log .sl-filters, #view-commissions .sl-filters { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
  #view-sales-log .sl-filters label, #view-call-log .sl-filters label, #view-commissions .sl-filters label { display:flex; gap:6px; align-items:center; font-size:13px; color:#6c7689; }
  #view-sales-log select, #view-call-log select, #view-commissions select { background:#fff; color:#1f2937; border:1px solid #e7ebf2; border-radius:8px; padding:7px 10px; font-size:13px; cursor:pointer; }
  #view-sales-log select:hover, #view-call-log select:hover, #view-commissions select:hover { border-color:#c9d3e3; }
  .sl-btn { background:#eef1f6; border:1px solid #e7ebf2; color:#155eef; border-radius:8px; padding:6px 13px; font-size:12px; font-weight:600; cursor:pointer; }
  .sl-btn:hover { border-color:#155eef; }
  .sl-btn-go { background:#155eef; color:#fff; font-weight:700; border-color:#155eef; }
  .sl-banner { background:#fef4e2; border:1px solid #f6e2bd; color:#9a6a12; border-radius:10px; padding:9px 14px; font-size:13px; margin-bottom:14px; }
  .sl-overlay { display:none; position:fixed; inset:0; background:rgba(16,33,64,0.42); align-items:center; justify-content:center; z-index:9000; }
  .sl-dialog { background:#fff; border:1px solid #e7ebf2; border-radius:14px; padding:24px; width:500px; max-width:93vw; max-height:88vh; overflow:auto; box-shadow:0 12px 40px rgba(16,33,64,0.18); }
  .sl-dialog h3 { margin:0 0 6px; font-size:17px; color:#1f2937; }
  .sl-dialog .fld { display:block; font-size:12px; color:#8a93a4; margin:13px 0 5px; text-transform:uppercase; letter-spacing:0.4px; }
  .sl-dialog select, .sl-dialog input[type=text] { width:100%; background:#fff; color:#1f2937; border:1px solid #e7ebf2; border-radius:8px; padding:9px; font-size:14px; }
  .sl-dialog .sl-actions { display:flex; gap:10px; margin-top:18px; }
  #view-sales-log .sl-sel { background:#fff; color:#1f2937; border:1px solid #e7ebf2; border-radius:6px; padding:4px 7px; font-size:13px; max-width:170px; cursor:pointer; }
  #view-sales-log .sl-sel:hover { border-color:#155eef; }
  #view-sales-log td.sl-status { font-size:12px; white-space:nowrap; }
  #view-sales-log td.sl-count-cell { white-space:nowrap; text-align:center; }
  #view-sales-log .sl-count-cb { cursor:pointer; vertical-align:middle; }
  #view-sales-log .sl-count-mode { font-size:10px; color:#98a2b3; margin-left:5px; text-transform:uppercase; letter-spacing:.03em; }
  #view-sales-log .sl-count-mode--manual { color:#155eef; font-weight:600; }
  #view-sales-log .sl-count-reset { border:none; background:none; color:#98a2b3; cursor:pointer; font-size:13px; margin-left:2px; padding:0 2px; line-height:1; }
  #view-sales-log .sl-count-reset:hover { color:#155eef; }

  /* ── 260819-uiq: co-closer split display + editor ────────────────────────────
     A split cell must NOT break the Closer column's rhythm: same 172px width and
     line-height as .sl-sel, so a split row is the same height as an unsplit one.
     Name and amount are paired per line (an UNEVEN split like $400/$100 has to be
     unambiguous), amounts right-aligned + tabular so the column scans vertically.
     The 2px left rule is a change-bar binding the two lines into ONE split — the
     portal's existing left-accent precedent is 3px, so this is deliberately lighter.
     Actions reuse the .sl-count-reset vocabulary: borderless, muted, blue on hover. */
  #view-sales-log .sl-closer-wrap { display:inline-flex; align-items:center; gap:2px; }
  #view-sales-log .sl-split { display:inline-block; width:172px; vertical-align:middle; font-size:13px; line-height:1.42; border-left:2px solid #155eef; padding-left:8px; }
  #view-sales-log .sl-split__row { display:flex; justify-content:space-between; align-items:baseline; gap:10px; white-space:nowrap; }
  #view-sales-log .sl-split__name { color:#1f2937; overflow:hidden; text-overflow:ellipsis; min-width:0; }
  #view-sales-log .sl-split__amt { color:#475467; font-size:12px; font-variant-numeric:tabular-nums; flex:none; }
  #view-sales-log .sl-split-act, #view-sales-log .sl-split-add { border:none; background:none; color:#98a2b3; cursor:pointer; font-size:12px; padding:0 3px; line-height:1; }
  #view-sales-log .sl-split-act:hover, #view-sales-log .sl-split-add:hover { color:#155eef; }
  #view-sales-log .sl-split-add { color:#c3c9d4; }
  #view-sales-log tr:hover .sl-split-add { color:#98a2b3; }

  #view-sales-log .sl-split-ed { width:212px; background:#fbfcfe; border:1px solid #e7ebf2; border-radius:8px; padding:8px; }
  #view-sales-log .sl-split-ed__row { display:flex; align-items:center; gap:6px; margin-bottom:5px; }
  #view-sales-log .sl-split-ed__nm { flex:1; min-width:0; font-size:12px; color:#1f2937; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-left:2px; }
  #view-sales-log .sl-split-ed__sel { flex:1; min-width:0; max-width:none; background:#fff; color:#1f2937; border:1px solid #e7ebf2; border-radius:6px; font-size:12px; padding:3px 5px; cursor:pointer; }
  #view-sales-log .sl-split-ed__sel:hover { border-color:#155eef; }
  #view-sales-log .sl-split-ed__in { width:78px; flex:none; padding:3px 6px; border:1px solid #e7ebf2; border-radius:6px; font-size:12px; text-align:right; font-variant-numeric:tabular-nums; }
  #view-sales-log .sl-split-ed__in:focus { outline:none; border-color:#155eef; box-shadow:0 0 0 3px var(--accent-glow); }
  #view-sales-log .sl-split-ed__foot { font-size:11px; color:#98a2b3; font-variant-numeric:tabular-nums; margin:1px 0 0 2px; }
  #view-sales-log .sl-split-ed__err { color:var(--error); font-size:11px; margin:3px 0 0 2px; }
  #view-sales-log .sl-split-ed__err:empty { display:none; }
  #view-sales-log .sl-split-ed__btns { display:flex; align-items:center; gap:6px; margin-top:7px; }
  #view-sales-log .sl-split-ed__go, #view-sales-log .sl-split-ed__cx { padding:3px 11px; font-size:11px; border-radius:6px; }
  #view-sales-log .sl-split-ed__un { margin-left:auto; border:none; background:none; color:#98a2b3; font-size:11px; cursor:pointer; padding:2px 3px; }
  #view-sales-log .sl-split-ed__un:hover { color:#e93d3d; text-decoration:underline; }

  /* 260819-onr: early payout opportunities panel — mirrors the .sl-split-ed* editor vocabulary.
     Light mode only. Reuses the palette literals already in this file — no new colour. */
  #view-commissions .cm-early-row td.cm-early-td { padding:0; }
  #view-commissions .cm-early-panel { background:#fbfcfe; border-top:1px solid #e7ebf2; padding:12px 16px; }
  #view-commissions .cm-early__ttl { font-size:13px; font-weight:600; color:#1f2937; }
  #view-commissions .cm-early__sub, #view-commissions .cm-early__note, #view-commissions .cm-early__empty { font-size:12px; color:#98a2b3; margin-top:3px; }
  #view-commissions .cm-early__note--err { color:var(--error); }
  #view-commissions .cm-early__hd, #view-commissions .cm-early__row { display:grid; grid-template-columns:22px 92px 1fr 110px 110px; gap:10px; align-items:center; }
  #view-commissions .cm-early__hd { margin-top:10px; font-size:10px; color:#98a2b3; text-transform:uppercase; letter-spacing:.03em; }
  #view-commissions .cm-early__row { padding:4px 0; border-bottom:1px solid #eef1f6; cursor:pointer; font-size:12px; }
  #view-commissions .cm-early__row:hover { background:#fff; }
  #view-commissions .cm-early__date, #view-commissions .cm-early__name { color:#1f2937; }
  #view-commissions .cm-early__amt, #view-commissions .cm-early__comm { text-align:right; font-variant-numeric:tabular-nums; color:#475467; }
  #view-commissions .cm-early__comm { color:#1f2937; font-weight:600; }
  #view-commissions .cm-early__leg { margin-left:6px; font-size:10px; text-transform:uppercase; letter-spacing:.03em; color:#155eef; font-weight:600; }
  #view-commissions .cm-early__foot { display:flex; align-items:center; gap:10px; margin-top:10px; }
  #view-commissions .cm-early__tot { font-size:12px; color:#475467; font-variant-numeric:tabular-nums; margin-right:auto; }
  #view-commissions .cm-early__err { color:var(--error); font-size:11px; }
  #view-commissions .cm-early__err:empty { display:none; }
  #view-commissions .cm-early-cancel { border:none; background:none; color:#98a2b3; cursor:pointer; font-size:12px; padding:2px 4px; }
  #view-commissions .cm-early-cancel:hover { color:#155eef; }
  #view-commissions .cm-early-cb { cursor:pointer; }

  #view-sales-log td.sl-cat-cell { white-space:nowrap; }
  #view-sales-log .sl-cat-sel { background:#fff; color:#1f2937; border:1px solid #e7ebf2; border-radius:6px; padding:4px 7px; font-size:12px; max-width:120px; cursor:pointer; vertical-align:middle; }
  #view-sales-log .sl-cat-sel:hover { border-color:#155eef; }
  #view-sales-log .sl-cat-sel:disabled { color:#98a2b3; cursor:default; }
  #view-sales-log .sl-cat-reset { border:none; background:none; color:#98a2b3; cursor:pointer; font-size:13px; margin-left:2px; padding:0 2px; line-height:1; }
  #view-sales-log .sl-cat-reset:hover { color:#155eef; }
  #view-sales-log .sl-sel:disabled { color:#b6bdc9; background:#f6f7f9; cursor:default; border-color:#eef1f6; }
  /* 260717-fvs: non-Sales-Team rows — closer/setter shown blurred + (unassigned), display only */
  #view-sales-log .sl-sel--na { filter:blur(2px); opacity:.65; }

/* ===== MOBILE RESPONSIVENESS (additive; desktop untouched) 260703 ===== */
@media (max-width: 768px) {
  /* page-level safety net: never let a wide child scroll the whole layout sideways */
  html, body { overflow-x: hidden; }

  /* stack sidebar above content, turn sidebar into a full-width horizontal scroll bar */
  .app { flex-direction: column; }
  .app.visible { flex-direction: column; }
  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 1;
  }
  .sidebar-nav {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    padding: 8px 0;
    overflow-x: auto;
  }
  .nav-tab { width: auto; flex: 0 0 auto; }

  /* tighten content padding to reclaim width on narrow screens */
  .dash-content { padding: 16px; }
  .top-bar { padding: 16px 16px 0; }

  /* let KPI cards shrink further before wrapping */
  .dash-kpi-row > .kpi-card { min-width: 140px; }

  /* give wide tables/grids a horizontal scroll container + keep inner width usable */
  .ezz-dist-chart { overflow-x: auto; }
  .ezz-dist-table { min-width: 700px; }
  #cc-content { overflow-x: auto; }
  .drill-drawer-body { overflow-x: auto; }
  .ads-modal__body { overflow-x: auto; }
}

/* ============================================================
   260703-jxv: sticky top-bar + sticky table headers
   .main-content-area is the scroll container; .top-bar is its
   direct child, so position:sticky pins it. z-index 50 clears
   section cards, stays under modals/drawers (z 1000+).
   Long tables: .widget-table-wrap becomes the vertical
   scrollport (max-height only engages when content exceeds it,
   so short tables are unaffected). box-shadow replaces the th
   border-bottom because collapsed borders don't stick with
   sticky th in Chrome. th already has background:#f7f9fc.
   ============================================================ */
.top-bar{position:sticky;top:0;z-index:50;}
.widget-table-wrap{max-height:70vh;overflow:auto;}
.sortable-table thead th{position:sticky;top:0;z-index:1;box-shadow:inset 0 -1px 0 #eef1f5;}

/* 260704-pil: Call Log outcome select styled as a status pill (matches Survey column pills).
   Still a native <select> — appearance:none strips the box chrome; inline bg/fg set per outcome
   by clOutcomeCell; the chevron is an embedded SVG so the pill still reads as editable. */
/* 260704-pi3: ID-qualified — #view-call-log select (styles.css:3182) outranked the bare class
   (13px/7px padding/8px radius), which made the pill fatter than the Survey pills. */
#view-call-log select.cl-outcome-pill, select.cl-outcome-pill{
  font-family:inherit;
  /* 260704-pi2: identical metrics to .status-pill (padding 3px 10px, 11px/600, 1px tinted border)
     + right padding for the chevron; border-color comes inline per outcome. */
  -webkit-appearance:none;appearance:none;
  display:inline-block;
  border:1px solid transparent;border-radius:999px;
  padding:3px 20px 3px 10px;
  font-weight:600;font-size:11px;line-height:1.4;
  white-space:nowrap;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 7px center;
}
.cl-outcome-pill:focus{outline:2px solid rgba(37,99,235,.35);outline-offset:1px;}
/* ── AI Dialer: Setter Head-to-Head ──────────────────────────────────────── */
.h2h-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-space-lg);
  margin-bottom: var(--ds-space-xl);
}
@media (max-width: 700px) { .h2h-grid { grid-template-columns: 1fr; } }

.h2h-agent-card {
  border: 1px solid var(--card-border, #e5e7eb);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-lg);
  background: var(--card, #fff);
  box-shadow: var(--ds-shadow-card);
  position: relative;
}
.h2h-agent-card.h2h-winner-card {
  border-color: #10b981;
  box-shadow: 0 0 0 1px #10b981, var(--ds-shadow-card);
}

.h2h-agent-name {
  font-size: var(--ds-font-xl);
  font-weight: 700;
  margin-bottom: var(--ds-space-md);
  color: var(--foreground, #111827);
}
.h2h-agent-name .h2h-crown { margin-left: 6px; font-size: 16px; }

.h2h-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--card-border, #f1f3f7);
  font-size: var(--ds-font-base);
}
.h2h-stat-row:last-child { border-bottom: none; }
.h2h-stat-label { color: var(--muted-foreground, #6b7280); }
.h2h-stat-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.h2h-stat-value.h2h-win  { color: #047857; }
.h2h-stat-value.h2h-lose { color: var(--foreground, #111827); }

/* Bar chart rows */
.h2h-bars {
  margin-top: var(--ds-space-xl);
}
.h2h-bar-group {
  margin-bottom: var(--ds-space-lg);
}
.h2h-bar-label {
  font-size: var(--ds-font-sm);
  font-weight: 600;
  color: var(--foreground, #111827);
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.h2h-bar-label .h2h-winner-tag {
  font-size: 10px;
  font-weight: 700;
  color: #047857;
  background: #d1fae5;
  padding: 1px 6px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.h2h-bar-track {
  display: flex;
  gap: 2px;
  height: 28px;
  border-radius: var(--ds-radius-sm);
  overflow: hidden;
  background: var(--card-border, #f1f3f7);
}
.h2h-bar-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ds-font-xs);
  font-weight: 600;
  color: #fff;
  min-width: 36px;
  transition: width 0.4s ease;
  border-radius: var(--ds-radius-sm);
}
.h2h-bar-seg.h2h-eric  { background: #3b82f6; }
.h2h-bar-seg.h2h-claire { background: #8b5cf6; }

.h2h-bar-legend {
  display: flex;
  gap: var(--ds-space-lg);
  margin-bottom: var(--ds-space-lg);
  font-size: var(--ds-font-sm);
  color: var(--muted-foreground, #6b7280);
}
.h2h-bar-legend span::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: -1px;
}
.h2h-bar-legend .h2h-leg-eric::before  { background: #3b82f6; }
.h2h-bar-legend .h2h-leg-claire::before { background: #8b5cf6; }

/* Delta callout */
.h2h-delta {
  text-align: center;
  padding: var(--ds-space-lg);
  background: #f8fafc;
  border: 1px solid var(--card-border, #e5e7eb);
  border-radius: var(--ds-radius-md);
  margin-top: var(--ds-space-lg);
  font-size: var(--ds-font-sm);
  color: var(--muted-foreground, #6b7280);
}
.h2h-delta strong { color: var(--foreground, #111827); }
/* ── AI Dialer: Number Health ───────────────────────────────────────────── */
.nh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--ds-space-lg);
}
.nh-card {
  border: 1px solid var(--card-border, #e5e7eb);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-lg);
  background: var(--card, #fff);
  box-shadow: var(--ds-shadow-card);
  position: relative;
  transition: border-color 0.2s;
}
.nh-card.nh-red   { border-left: 4px solid #ef4444; }
.nh-card.nh-yellow { border-left: 4px solid #f59e0b; }
.nh-card.nh-green  { border-left: 4px solid #10b981; }
.nh-card.nh-idle  { border-left: 4px solid #cbd5e1; opacity: 0.72; } /* owned, not dialing yet */

.nh-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--ds-space-md);
}
.nh-phone {
  font-size: var(--ds-font-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--foreground, #111827);
  letter-spacing: 0.3px;
}
.nh-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.nh-badge.nh-badge-green  { color: #047857; background: #d1fae5; }
.nh-badge.nh-badge-yellow { color: #92400e; background: #fef3c7; }
.nh-badge.nh-badge-red    { color: #b42318; background: #fee2e2; }
.nh-badge.nh-badge-idle   { color: #475569; background: #e2e8f0; }

.nh-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px var(--ds-space-lg);
  font-size: var(--ds-font-sm);
  margin-bottom: var(--ds-space-md);
}
.nh-stat-label {
  color: var(--muted-foreground, #6b7280);
}
.nh-stat-value {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--foreground, #111827);
}
.nh-stat-value.nh-val-bad { color: #b42318; }

/* Pickup rate bar (CSS-only sparkline) */
.nh-bar-wrap {
  margin-top: 2px;
}
.nh-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--ds-font-xs);
  color: var(--muted-foreground, #6b7280);
  margin-bottom: 2px;
}
.nh-bar-track {
  height: 8px;
  background: var(--card-border, #f1f3f7);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.nh-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.nh-bar-fill.nh-fill-green  { background: #10b981; }
.nh-bar-fill.nh-fill-yellow { background: #f59e0b; }
.nh-bar-fill.nh-fill-red    { background: #ef4444; }
.nh-bar-avg {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 12px;
  background: var(--foreground, #111827);
  opacity: 0.4;
  border-radius: 1px;
}

/* Spam alert banner */
.nh-alert {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-md) var(--ds-space-lg);
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--ds-radius-md);
  margin-bottom: var(--ds-space-lg);
  font-size: var(--ds-font-sm);
  color: #991b1b;
  font-weight: 500;
}
.nh-alert-icon { font-size: 16px; flex-shrink: 0; }

/* ============================================================
   260705-cmp: AI Dialer — Retell vs GHL Voice AI (versus cards)
   Replaces the flat compare table. Retell=accent (pulls left),
   GHL=gold (pulls right), winner per metric = green. Tiny-sample
   sides are dimmed and their card's winners suppressed (honest:
   a 25% connect off 4 dials is noise, not a win).
   ============================================================ */
.cmp-cards{display:flex;flex-direction:column;gap:14px;}
.cmp-card{border:1px solid var(--card-border);border-radius:12px;padding:15px 17px 8px;background:var(--card);}
.cmp-card--sum{background:var(--surface2);border-style:dashed;}
.cmp-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-bottom:12px;}
.cmp-card__name{font-size:15px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;color:var(--foreground);}
.cmp-tag-sum{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted-foreground);border:1px solid var(--card-border);border-radius:999px;padding:1px 7px;background:var(--card);}
.cmp-tag-small{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#a5680f;background:var(--amber-glow);border:1px solid var(--gold);border-radius:999px;padding:1px 7px;}
.cmp-card__vol{font-size:11.5px;color:var(--muted-foreground);font-variant-numeric:tabular-nums;display:flex;gap:6px 14px;flex-wrap:wrap;}
.cmp-card__vol b{color:var(--foreground);font-weight:700;}
.cmp-dot{width:8px;height:8px;border-radius:2.5px;display:inline-block;vertical-align:middle;margin-right:5px;}
.cmp-dot--r{background:var(--accent);}
.cmp-dot--g{background:var(--gold);}
.cmp-legend{display:flex;gap:20px;font-size:11px;font-weight:600;color:var(--muted-foreground);margin:2px 0 14px;}
.cmp-legend span{display:inline-flex;align-items:center;}
.cmp-metric{display:grid;grid-template-columns:1fr 118px 1fr;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--card-border);}
.cmp-metric:first-of-type{border-top:none;}
.cmp-side{display:flex;flex-direction:column;gap:5px;min-width:0;}
.cmp-side--r{align-items:flex-end;}
.cmp-side--g{align-items:flex-start;}
.cmp-val{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;color:var(--foreground);}
.cmp-val--win{color:var(--green);}
.cmp-val--dim{color:var(--muted-foreground);opacity:.55;font-weight:600;}
.cmp-bar{width:100%;max-width:118px;height:6px;border-radius:3px;background:var(--surface2);box-shadow:inset 0 0 0 1px var(--card-border);overflow:hidden;display:flex;}
.cmp-side--r .cmp-bar{justify-content:flex-end;}
.cmp-bar__fill{height:100%;border-radius:3px;}
.cmp-side--r .cmp-bar__fill{background:var(--accent);}
.cmp-side--g .cmp-bar__fill{background:var(--gold);}
.cmp-mid{text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;}
.cmp-mid__label{font-size:11px;font-weight:600;color:var(--muted-foreground);white-space:nowrap;}
.cmp-mid__win{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--green);white-space:nowrap;}
.cmp-mid__win--none{visibility:hidden;}
@media (max-width:640px){.cmp-metric{grid-template-columns:1fr 92px 1fr;gap:8px;}}

/* 260706-bas: Recent Leads filter bar — reuses .ds-input/.ds-select (design-system 3.9) */
.rl-filters { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0 0 12px; }
.rl-filters .ds-input { min-width:180px; }
.rl-count { margin-left:auto; font-size:12px; color:#6c7689; }

/* 260831-std: First/Last Source cells wrap in full — this IS the view now (Caleb, 260831). The
   one-line ellipsised variant and its "Expand text" toggle are gone; campaign strings run long
   ("8/14 | ROAS | (VSL Funnel) | Leads | Testing ABO SC") and truncating them hid the ad. The
   ceiling only stops one column from eating the table; the text wraps inside it. */
#recent-leads-table .rl-attr { max-width:340px; }
/* the ad creative sits under its campaign, quieter — the campaign is the headline */
#recent-leads-table td.rl-attr .rl-attr-ad { display:block; font-size:11px; color:#8a94a6; }

  /* 260715: Sales Log date-range inputs — match the filter selects (the popup panel itself is the browser's own) */
  #view-sales-log .sl-filters input[type=date] { -webkit-appearance:none; appearance:none; background:#fff; color:#1f2937; border:1px solid #e7ebf2; border-radius:8px; padding:6px 10px; font-size:13px; font-family:inherit; cursor:pointer; accent-color:#155eef; }
  #view-sales-log .sl-filters input[type=date]:hover { border-color:#c9d3e3; }
  #view-sales-log .sl-filters input[type=date]:focus { outline:none; border-color:#155eef; box-shadow:0 0 0 3px rgba(21,94,239,0.12); }
  #view-sales-log .sl-filters input[type=date]::-webkit-calendar-picker-indicator { cursor:pointer; opacity:0.55; }
  #view-sales-log .sl-filters input[type=date]::-webkit-calendar-picker-indicator:hover { opacity:1; }

/* quick-260717-ai1: loading indicators — global network-activity bar + in-panel spinner */
/* Bar: fixed 3px sweep at the very top whenever any apiGet is in flight. The 0.25s
   transition-delay means requests that finish fast never flash it. */
#net-activity-bar { position:fixed; top:0; left:0; right:0; height:3px; z-index:9999; pointer-events:none; overflow:hidden; opacity:0; transition:opacity .15s ease .25s; background:rgba(21,94,239,0.12); }
html.net-busy #net-activity-bar { opacity:1; }
.net-activity-bar__fill { position:absolute; top:0; bottom:0; width:30%; border-radius:3px; background:linear-gradient(90deg,#1898ff,#155eef); animation:net-sweep 1.1s ease-in-out infinite; }
@keyframes net-sweep { 0% { left:-30%; } 100% { left:100%; } }

/* In-panel spinner: dropped into any still-empty content container on view reveal. */
.ds-loading { display:flex; align-items:center; justify-content:center; padding:28px 0; min-height:60px; }
.ds-spinner { width:22px; height:22px; border-radius:50%; border:2.5px solid #e7ebf2; border-top-color:#155eef; animation:ds-spin .8s linear infinite; }
@keyframes ds-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .net-activity-bar__fill { animation:none; left:0; width:100%; }
  .ds-spinner { animation-duration:2s; }
}

/* quick-260717-b55: Today's Calls day-view panel (#today-calls-panel) — 3 roster closer
   columns on a shared time axis; per-closer palette colors via --src-color-*, light-green
   hue on confirmed. */
.tc-grid { display:grid; grid-template-columns:52px; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:var(--ds-space-md,12px); padding:4px 16px 18px; } /* 260909-tc4: auto-flow columns so N closers share the row evenly (was hardcoded repeat(3) — a 4th closer wrapped into a squeezed 2nd row) */
@media (max-width:960px) { .tc-grid { grid-template-columns:40px; gap:var(--ds-space-sm,8px); } }
.tc-axis__spacer { padding:8px 0; font-weight:700; font-size:13px; border-top:3px solid transparent; border-bottom:1px solid transparent; visibility:hidden; } /* same box as .tc-col__head so the track top-aligns with column bodies */
.tc-axis__track { position:relative; }
.tc-axis__label { position:absolute; left:0; right:0; transform:translateY(-50%); font-size:10.5px; color:var(--muted-foreground,#6b7280); white-space:nowrap; }
.tc-col { border:1px solid var(--border,#e5e7eb); border-radius:var(--ds-radius-lg,12px); background:var(--card,#fff); box-shadow:var(--ds-shadow-card); overflow:hidden; display:flex; flex-direction:column; }
.tc-col__head { padding:8px 12px; font-weight:700; font-size:13px; color:var(--foreground); border-top:3px solid; border-bottom:1px solid var(--border,#e5e7eb); }
.tc-col__body { position:relative; }
.tc-col__empty { padding:14px 12px; font-size:12px; color:var(--muted-foreground,#6b7280); }
.tc-block { position:absolute; border-left:4px solid; border-radius:6px; background:var(--muted,#f3f6fa); padding:3px 7px; overflow:hidden; font-size:11.5px; line-height:1.3; box-sizing:border-box; box-shadow:0 1px 2px rgba(15,23,42,.06); } /* left/width set inline per lane */
.tc-block--confirmed { background-color:rgba(16,185,129,.18); }
/* v5: cancelled visible instead of hidden; outcome badges split from the confirm wash */
.tc-block--cancelled { background:repeating-linear-gradient(45deg,#f1f5f9,#f1f5f9 6px,#e8edf3 6px,#e8edf3 12px); opacity:.72; }
.tc-block--cancelled .tc-block__name { text-decoration:line-through; color:var(--muted-foreground,#6b7280); }
.tc-block__cancelled-tag { display:inline-block; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#991b1b; }
.tc-block__outcome { display:inline-block; margin-top:1px; padding:0 6px; border-radius:999px; font-size:10px; font-weight:800; }
.tc-block__outcome--showed { background:#16a34a; color:#fff; }
.tc-block__outcome--noshow { background:#ef4444; color:#fff; }
.tc-chip--cancelled { text-decoration:line-through; opacity:.6; }
/* v6: manual confirm checkbox (top-right of block) */
.tc-block__cbx { position:absolute; top:2px; right:5px; font-size:13px; line-height:1; cursor:pointer; color:var(--muted-foreground,#6b7280); z-index:3; }
.tc-block__cbx:hover { color:var(--accent,#155eef); }
.tc-block__cbx--on { color:#16a34a; }
.tc-block__cbx--on:hover { color:#991b1b; }
/* v5: GHL-style red now-line + axis time chip */
.tc-nowline { position:absolute; left:0; right:0; height:0; border-top:2px solid #ef4444; z-index:2; pointer-events:none; }
.tc-nowline::before { content:""; position:absolute; left:-1px; top:-4px; width:6px; height:6px; border-radius:50%; background:#ef4444; }
.tc-axis__now { position:absolute; left:0; right:0; transform:translateY(-50%); font-size:10px; font-weight:800; color:#ef4444; background:var(--card,#fff); white-space:nowrap; z-index:2; }
/* v5: day navigation buttons in the panel header */
.tc-nav { display:inline-flex; gap:4px; margin-left:10px; vertical-align:middle; }
.tc-nav__btn { border:1px solid var(--border,#e5e7eb); background:var(--card,#fff); color:var(--foreground,#111827); border-radius:6px; padding:1px 8px; font-size:12px; font-weight:700; cursor:pointer; line-height:1.5; }
.tc-nav__btn:hover { border-color:var(--accent,#155eef); color:var(--accent,#155eef); }
.tc-clickable { cursor:pointer; }
.tc-block.tc-clickable:hover { filter:brightness(.96); box-shadow:0 2px 6px rgba(15,23,42,.14); }
.tc-chip.tc-clickable:hover { background:var(--bg-hover,rgba(21,94,239,.05)); }
.tc-block__time { display:block; font-weight:700; color:var(--foreground); }
.tc-block__name { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--foreground); }
.tc-block__check { display:inline-block; margin-top:1px; font-size:10.5px; font-weight:700; color:var(--band-green-fg,#065f46); }
.tc-col__unscheduled { padding:6px 12px 10px; border-top:1px dashed var(--border,#e5e7eb); }
.tc-col__unscheduled-label { display:block; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-foreground,#6b7280); margin-bottom:4px; }
.tc-chip { display:inline-block; border:1px solid; border-radius:999px; padding:1px 8px; font-size:11px; margin:0 4px 4px 0; color:var(--foreground); }

/* quick-260723-q26: CLOSER PIPELINES tab — kanban board, one column per active closer.
   Target container: #cp-board. Horizontal-scroll row of fixed-width columns; each column
   stacks its GHL pipeline stages, each stage stacks its open-opportunity cards. */
.cp-board { display:flex; gap:var(--ds-space-md,12px); overflow-x:auto; padding:4px 16px 18px; align-items:flex-start; }
.cp-col { flex:0 0 260px; border:1px solid var(--border,#e5e7eb); border-radius:var(--ds-radius-lg,12px); background:var(--card,#fff); box-shadow:var(--ds-shadow-card); overflow:hidden; display:flex; flex-direction:column; }
.cp-col__head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border,#e5e7eb); background:var(--muted,#f8fafc); }
.cp-col__name { font-weight:700; font-size:13.5px; color:var(--foreground); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-col__sub { font-size:11px; color:var(--muted-foreground,#6b7280); white-space:nowrap; }
.cp-col__sub b { color:var(--foreground); font-weight:700; }
.cp-col__body { display:flex; flex-direction:column; }
.cp-col__empty { padding:14px 12px; font-size:12px; color:var(--muted-foreground,#6b7280); }
.cp-stage { border-bottom:1px solid var(--border,#e5e7eb); border-left:3px solid var(--border,#e5e7eb); padding:8px 10px; }
.cp-stage:last-child { border-bottom:none; }
.cp-stage__head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:5px; }
.cp-stage__name { font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-foreground,#6b7280); }
.cp-stage__meta { font-size:11px; color:var(--muted-foreground,#6b7280); white-space:nowrap; }
.cp-stage__meta b { color:var(--foreground); font-weight:700; }
.cp-stage__cards { display:flex; flex-direction:column; gap:4px; }
.cp-stage__empty { font-size:11.5px; color:var(--muted-foreground,#6b7280); padding:2px 0; }
.cp-card { display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--muted,#f3f6fa); border-radius:6px; padding:5px 8px; font-size:12px; line-height:1.3; box-shadow:0 1px 2px rgba(15,23,42,.06); }
.cp-card__name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--foreground); }
.cp-card__val { flex:0 0 auto; font-weight:700; color:var(--foreground); font-variant-numeric:tabular-nums; }
.cp-stage__more { font-size:11px; font-weight:600; color:var(--muted-foreground,#6b7280); padding:3px 0 1px; }

/* cp2-260723-sgg START: Closer Pipelines v2 — stacked full-width sections, per-section sort,
   maximize overlay, lead-detail modal content. Replaces the .cp-* side-by-side kanban layout
   above (kept for reference/rollback; no longer rendered once v2 ships). */
.cp2-board { display:flex; flex-direction:column; gap:var(--ds-space-md,12px); padding:4px 16px 18px; }
.cp2-section { border:1px solid var(--border,#e5e7eb); border-radius:var(--ds-radius-lg,12px); background:var(--card,#fff); box-shadow:var(--ds-shadow-card); overflow:hidden; }
.cp2-section__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-bottom:1px solid var(--border,#e5e7eb); background:var(--muted,#f8fafc); flex-wrap:wrap; }
.cp2-section__title { display:flex; align-items:baseline; gap:10px; min-width:0; }
.cp2-section__name { font-weight:700; font-size:14px; color:var(--foreground); white-space:nowrap; }
.cp2-section__sub { font-size:11.5px; color:var(--muted-foreground,#6b7280); white-space:nowrap; }
.cp2-section__sub b { color:var(--foreground); font-weight:700; }
.cp2-section__controls { display:flex; align-items:center; gap:8px; }
.cp2-sort { font-size:12px; padding:4px 8px; border:1px solid var(--border,#e5e7eb); border-radius:6px; background:var(--card,#fff); color:var(--foreground); }
.cp2-max-btn { font-size:11px; font-weight:600; padding:4px 10px; border:1px solid var(--border,#e5e7eb); border-radius:6px; background:var(--card,#fff); color:var(--foreground); cursor:pointer; }
.cp2-max-btn:hover { background:var(--muted,#f3f6fa); }
.cp2-scroll { max-height:340px; overflow-y:auto; }
.cp2-empty { padding:14px; font-size:12px; color:var(--muted-foreground,#6b7280); }

.cp2-stage { border-bottom:1px solid var(--border,#e5e7eb); padding:8px 14px; }
.cp2-stage:last-child { border-bottom:none; }
.cp2-stage__head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:5px; }
.cp2-stage__name { font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-foreground,#6b7280); }
.cp2-stage__meta { font-size:11px; color:var(--muted-foreground,#6b7280); white-space:nowrap; }
.cp2-stage__meta b { color:var(--foreground); font-weight:700; }
.cp2-stage__cards { display:flex; flex-direction:column; gap:4px; }
.cp2-stage__empty { font-size:11.5px; color:var(--muted-foreground,#6b7280); padding:2px 0; }
.cp2-stage__more { font-size:11px; font-weight:600; color:var(--muted-foreground,#6b7280); padding:3px 0 1px; }

.cp2-flat-list { display:flex; flex-direction:column; gap:4px; padding:8px 14px; }

.cp2-card { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--muted,#f3f6fa); border-radius:6px; padding:6px 10px; font-size:12px; line-height:1.3; cursor:pointer; }
.cp2-card:hover { background:var(--card-hover,#e9eef5); }
.cp2-card:focus-visible { outline:2px solid var(--accent,#155eef); outline-offset:1px; }
.cp2-card__name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--foreground); flex:1 1 auto; min-width:0; }
.cp2-card__meta { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.cp2-card__stage { font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--muted-foreground,#6b7280); background:var(--card,#fff); border:1px solid var(--border,#e5e7eb); border-radius:4px; padding:1px 6px; white-space:nowrap; }
.cp2-card__appt { font-size:11px; color:var(--muted-foreground,#6b7280); white-space:nowrap; }
.cp2-card__val { font-weight:700; color:var(--foreground); font-variant-numeric:tabular-nums; white-space:nowrap; }

body.cp2-max-open { overflow:hidden; }
.cp2-section--max { position:fixed; inset:0; z-index:900; border-radius:0; display:flex; flex-direction:column; }
.cp2-section--max .cp2-scroll { max-height:none; flex:1 1 auto; }

.cp2-lead__row { display:flex; flex-wrap:wrap; gap:6px; padding:6px 0; border-bottom:1px solid var(--border,#e5e7eb); font-size:12.5px; }
.cp2-lead__label { flex:0 0 110px; font-weight:700; color:var(--muted-foreground,#6b7280); font-size:11px; text-transform:uppercase; letter-spacing:.03em; }
.cp2-lead__val { color:var(--foreground); }
.cp2-lead__none { color:var(--muted-foreground,#6b7280); font-style:italic; }
.cp2-lead__actions { padding:10px 0; }
.cp2-lead__ghl-btn { display:inline-block; font-size:12px; font-weight:700; padding:6px 12px; border-radius:6px; background:var(--accent,#155eef); color:#fff; text-decoration:none; }
.cp2-lead__ghl-btn:hover { opacity:.9; }
.cp2-lead__block { margin-top:14px; padding-top:10px; border-top:1px solid var(--border,#e5e7eb); }
.cp2-lead__block h4 { margin:0 0 8px; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-foreground,#6b7280); }
.cp2-lead__soft-note { font-size:12px; color:var(--muted-foreground,#6b7280); }
.cp2-lead__cf-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; }
.cp2-lead__cf { display:flex; flex-direction:column; font-size:12px; }
.cp2-lead__cf-name { font-size:10.5px; font-weight:700; color:var(--muted-foreground,#6b7280); text-transform:uppercase; letter-spacing:.02em; }
.cp2-lead__cf-val { color:var(--foreground); word-break:break-word; }
.cp2-lead__kv { display:flex; flex-direction:column; gap:4px; }
.cp2-lead__kv-row { display:flex; gap:8px; font-size:12px; }
.cp2-lead__kv-key { flex:0 0 160px; font-weight:600; color:var(--muted-foreground,#6b7280); }
.cp2-lead__kv-val { color:var(--foreground); word-break:break-word; }
@media (max-width: 720px) {
  .cp2-lead__cf-grid { grid-template-columns:1fr; }
  .cp2-lead__label { flex-basis:90px; }
}
/* cp2-260723-sgg END */

/* 260723-sgg2: stage view = horizontal kanban lanes (swipe left-right), scroll-snap so swipes
   land on a stage; empty stages dimmed. Flat sort views stay vertical lists. */
.cp2-lanes { display:flex; align-items:flex-start; gap:10px; overflow-x:auto; padding:10px 14px; scroll-snap-type:x proximity; }
.cp2-lanes .cp2-stage { flex:0 0 250px; scroll-snap-align:start; border:1px solid var(--border,#e5e7eb); border-left:3px solid var(--border,#e5e7eb); border-radius:8px; padding:8px 10px; background:var(--card,#fff); }
.cp2-lanes .cp2-stage__cards { max-height:240px; overflow-y:auto; }
.cp2-stage--empty { opacity:.45; }
.cp2-section--max .cp2-lanes .cp2-stage__cards { max-height:calc(100vh - 220px); }

/* 260723-sgg3: lead-modal polish — card-style field grid, link/recording buttons, collapsed
   long text and unlabeled-id fields. Overrides the sgg cf-grid definitions above. */
.cp2-lead__cf-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px; }
.cp2-lead__cf { background:var(--muted,#f8fafc); border:1px solid var(--border,#e5e7eb); border-radius:8px; padding:7px 10px; gap:2px; min-width:0; }
.cp2-lead__cf-val { font-size:12.5px; overflow-wrap:anywhere; }
.cp2-lead__link { display:inline-block; font-size:12px; font-weight:600; color:var(--accent,#155eef); text-decoration:none; border:1px solid var(--border,#e5e7eb); border-radius:6px; padding:2px 8px; background:var(--card,#fff); }
.cp2-lead__link:hover { text-decoration:underline; }
.cp2-lead__longtext summary, .cp2-lead__other summary { cursor:pointer; color:var(--muted-foreground,#6b7280); font-size:12px; }
.cp2-lead__longtext div { margin-top:6px; white-space:pre-wrap; }
.cp2-lead__other { margin-top:10px; }
.cp2-lead__other summary { font-weight:600; }

/* 260723-sgg5: collapsible category groups in the lead modal */
.cp2-lead__group { margin-top:10px; border:1px solid var(--border,#e5e7eb); border-radius:8px; padding:8px 10px; background:var(--card,#fff); }
.cp2-lead__group > summary { cursor:pointer; font-size:12px; font-weight:700; color:var(--foreground); text-transform:uppercase; letter-spacing:.04em; }
.cp2-lead__group[open] > summary { margin-bottom:8px; }
.cp2-lead__group-n { font-weight:600; color:var(--muted-foreground,#6b7280); margin-left:4px; }

/* 260829-cfl: Closer Pipelines — Closing Follow-Up sub-view (toggle, sheet pills, list table) */
.cp-mode-toggle { display:inline-flex; gap:0; border:1px solid var(--border,#e5e7eb); border-radius:8px; overflow:hidden; flex:none; }
.cp-mode-btn { border:0; background:var(--card,#fff); color:var(--muted-foreground,#6b7280); font-size:12px; font-weight:700; padding:6px 12px; cursor:pointer; }
.cp-mode-btn + .cp-mode-btn { border-left:1px solid var(--border,#e5e7eb); }
.cp-mode-btn.is-active { background:var(--accent,#155eef); color:#fff; }
.cfl-meta { font-size:12px; color:var(--muted-foreground,#6b7280); margin-bottom:10px; }
.cfl-pills { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.cfl-pill { border:1px solid var(--border,#e5e7eb); background:var(--card,#fff); color:var(--foreground,#111827); border-radius:999px; font-size:12px; padding:5px 12px; cursor:pointer; }
.cfl-pill b { font-weight:700; }
.cfl-pill.is-active { background:var(--accent,#155eef); border-color:var(--accent,#155eef); color:#fff; }
.cfl-pill__off { margin-left:6px; font-size:10px; font-weight:700; color:#b91c1c; background:#fee2e2; border-radius:999px; padding:1px 6px; }
.cfl-pill.is-active .cfl-pill__off { color:#fff; background:rgba(255,255,255,.25); }
.cfl-table-wrap { overflow-x:auto; }
.cfl-table th, .cfl-table tbody td { padding:8px 10px; white-space:nowrap; vertical-align:top; }
.cfl-table td { max-width:340px; }
.cfl-on { color:#15803d; font-weight:700; }
.cfl-off { color:#b91c1c; font-weight:700; }
.cfl-na { color:var(--muted-foreground,#6b7280); }
.cfl-row--off td { background:#fff7f7; }
.cfl-clip { display:inline-block; max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; cursor:pointer; }
.cfl-clip--open { max-width:none; white-space:normal; }

/* 260802-pau: Dialer tab PAUSED caution-tape banner. Remove with the index.html div to un-pause. */
.dialer-paused-banner{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin:0 0 16px;padding:14px 18px;border-radius:10px;
  background:repeating-linear-gradient(-45deg,#facc15 0 24px,#111 24px 48px);
  border:2px solid #111;
}
.dialer-paused-banner__text{
  background:#111;color:#facc15;font-weight:800;letter-spacing:.18em;
  font-size:20px;padding:6px 16px;border-radius:6px;white-space:nowrap;
}
.dialer-paused-banner__sub{
  background:rgba(17,17,17,.92);color:#fff;font-size:12.5px;padding:6px 12px;border-radius:6px;
}

/* ── 260802-vslrevive: Correlation Explorer (Section C) — classes purged with the old markup ── */
.lb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 10px 0 18px; }
.corr-chart-card { margin-top: 20px; }
.corr-chart-card h3 { font-size: 14px; margin: 0 0 6px; opacity: .85; }
.eaz-svg { width: 100%; height: auto; display: block; }
.eaz-chart-ctrls { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.eaz-toggle-btn { font-size: 12px; padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(148,163,184,.35); background: transparent; color: inherit; cursor: pointer; }
.eaz-toggle-btn:hover { background: rgba(148,163,184,.12); }
.eaz-chart-note { font-size: 12px; opacity: .7; }
.eaz-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; margin: 4px 0 8px; opacity: .85; }
.eaz-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.eaz-axis-line { stroke: rgba(148,163,184,.45); stroke-width: 1; }
svg .eaz-axis-label { font-size: 11px; fill: currentColor; opacity: .7; }
.eaz-axis-title { font-size: 12px; fill: currentColor; opacity: .85; }
.eaz-ref-line { stroke: rgba(148,163,184,.6); stroke-dasharray: 4 3; }
.eaz-ref-label { font-size: 11px; fill: currentColor; opacity: .7; }

/* 260816mb: REPORTS tab (Metabase embed) + external nav link */
.nav-ext{display:flex;align-items:center;gap:8px;width:100%;padding:10px 20px;color:#8899bb;font-size:11px;font-weight:600;letter-spacing:1px;text-decoration:none;white-space:nowrap;transition:all .15s;}
.nav-ext:hover{background:var(--sidebar-accent);color:var(--sidebar-foreground);}
.reports-iframe{width:100%;height:1400px;border:0;background:transparent;display:block;}
.reports-status{padding:10px 16px;font-size:12px;color:#8899bb;}
.reports-status:empty{display:none;}
.reports-open{font-size:12px;text-decoration:none;}

/* 260906-mob: mobile shell. Below 900px the sidebar used to be display:none (closer/setter) or a
   squeezed row with the tabs scrolled out of sight (CEO) = no navigation on phones. Now: sticky top
   strip — logo · horizontally scrollable tabs · avatar/sign-out — content stacks below.
   ponytail: CSS-only; active tab is not auto-scrolled into view (needs 1 line in switchTab if it bugs anyone). */
@media (max-width:900px){
  html,body{overflow-x:hidden;}
  .app.visible{flex-direction:column;}
  .sidebar{display:flex;position:sticky;top:0;left:auto;bottom:auto;width:100%;height:auto;max-height:none;flex-direction:row;align-items:center;gap:0;overflow:visible;flex-shrink:0;border-right:none;border-bottom:1px solid var(--sidebar-border);z-index:200;}
  .sidebar-brand{padding:8px 10px;border-bottom:none;border-right:1px solid var(--sidebar-border);flex-shrink:0;}
  .sidebar-brand-row > :not(.sidebar-logo){display:none;} /* brand text: closer/setter wrap it in .sidebar-brand-text, CEO in a bare div */
  .sidebar-logo{width:32px;height:32px;font-size:16px;}
  .sidebar-nav{flex:1 1 auto;min-width:0;display:flex;flex-direction:row;align-items:center;gap:4px;padding:6px 8px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .sidebar-nav::-webkit-scrollbar{display:none;}
  .sidebar-nav .nav-tab,.sidebar-nav .nav-ext{width:auto;flex:0 0 auto;white-space:nowrap;padding:8px 10px;font-size:11px;}
  .sidebar-user{padding:6px 10px;border-top:none;border-left:1px solid var(--sidebar-border);flex-shrink:0;gap:8px;}
  .sidebar-user .member-avatar{display:none;}
  .sidebar-user-info{max-width:84px;}
  .member-name-pill{font-size:11px;}
  .member-role{display:none;}
  .logout-btn{padding:5px 8px;font-size:10px;}
  .main-content-area{margin-left:0;min-height:0;overflow:visible;}
  .top-bar{position:static;padding:12px 16px;flex-wrap:wrap;gap:8px;}
  .view,.dash-content{padding:14px 12px;}
  .kpi-row{grid-template-columns:repeat(2,1fr);}
  .two-col,.form-grid{grid-template-columns:1fr;}
  .stats-hero{flex-wrap:wrap;padding:16px;}
  .hero-kpis{gap:12px;margin-left:0;width:100%;}
  .panel,.data-card{max-width:100%;}
}

/* 260906-mob2: content fixes found by walking every tab logged-in at 375px (headless). */
@media (max-width:900px){
  /* panel/widget headers put title + description side by side → stack them */
  .ph,.widget-header{flex-wrap:wrap;}
  .ph-sub,.widget-header .widget-meta,.widget-header .section-card__meta{flex-basis:100%;}
  /* dashboard hero: 2x2 KPIs instead of one per row on phones (overrides the inline ≤420px rule) */
  .dashboard-hero .dh-strip .dh-kpis{grid-template-columns:repeat(2,1fr);}
  .dashboard-hero .dh-strip .dh-kpi:nth-child(odd){border-right:1px solid var(--border)!important;}
  .dashboard-hero .dh-strip .dh-kpi:nth-child(3){border-bottom:none;}
  /* CEO: wide tables (call coaching etc.) were clipped by the card → let the card scroll sideways */
  .section-card,.widget,.widget-body{overflow-x:auto;}
  /* closer Payment Links list: 4-col inline grid → provider | url / amount | actions */
  #plList > div[style*="grid-template-columns"]{grid-template-columns:1fr auto!important;gap:8px 12px!important;padding:12px 14px!important;}
  /* leaderboard rows + tables: don't let long names blow the row */
  .view td,.view th{padding-left:8px;padding-right:8px;}
}

/* 260906-mob3: leftovers. Cards carry min-height:200px so the desktop grid lines up — dead space in a
   single phone column. Leaderboard rows reserved 90+70px for cash/deals + 14px gaps, leaving ~77px for the name. */
@media (max-width:900px){
  .card-grid .data-card{min-height:0!important;}
  .lb-row{grid-template-columns:28px minmax(0,1fr) auto auto;gap:8px;padding:10px 12px;}
  .lb-row-cash,.lb-row-deals{min-width:0;}
}

/* ── 260910-nav: grouped sidebar ─────────────────────────────────────────────────────
   Six funnel-ordered groups. Group color replaces the shared bullet; rows tightened
   10px -> 8px so the labels cost no height. Collapse state lives in app.js EOF block.
   Under 768px the groups flatten back into the existing horizontal strip. */
.sidebar-nav{padding:8px 0 12px;}
.nav-group{--stripe:#8899bb;}
.nav-group[data-group="overview"]{--stripe:#9dc3ff;}
.nav-group[data-group="marketing"]{--stripe:#2dd4bf;}
.nav-group[data-group="booking"]{--stripe:#f5b342;}
.nav-group[data-group="sales"]{--stripe:#4ade80;}
.nav-group[data-group="dialing"]{--stripe:#c084fc;}
.nav-group[data-group="admin"]{--stripe:#8899bb;}
.nav-group-label{display:flex;align-items:center;justify-content:space-between;width:100%;margin:12px 0 2px;padding:4px 20px 4px 18px;background:none;border:0;font-family:inherit;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--stripe);opacity:.85;cursor:pointer;text-align:left;}
.nav-group-label:hover{opacity:1;background:var(--sidebar-accent);}
.nav-group-label--static,.nav-group-label--static:hover{cursor:default;background:none;}
.nav-group-label:focus-visible{outline:2px solid var(--purple-light);outline-offset:-2px;}
.nav-group-chev{font-size:9px;color:#8899bb;transition:transform .15s;}
.nav-group.collapsed .nav-group-chev{transform:rotate(-90deg);}
.nav-group.collapsed .nav-tab,.nav-group.collapsed .nav-ext{display:none;}
.nav-group .nav-tab,.nav-group .nav-ext{padding:8px 20px 8px 26px;border-left:2px solid transparent;}
.nav-group .nav-tab>span:first-child,.nav-group .nav-ext>span:first-child{display:none;}
.nav-group .nav-tab.active{border-left-color:var(--purple);}
@media (max-width:768px){
  .nav-group{display:contents;}
  .nav-group-label{display:none;}
  .nav-group .nav-tab,.nav-group .nav-ext,.nav-group.collapsed .nav-tab,.nav-group.collapsed .nav-ext{display:flex;padding:10px 16px;border-left:0;}
}
@media (prefers-reduced-motion:reduce){.nav-group-chev{transition:none;}}

/* ── 260910-nav2: merged tabs — hidden secondary nav buttons + sub-tab strip ─────────────
   The hidden buttons stay in the DOM so setActiveView / loaders / #hash links are untouched.
   !important because the <=768px block sets .nav-group .nav-tab back to display:flex. */
.nav-tab.nav-tab--hidden{display:none!important;}
.subtabs{display:flex;gap:6px;align-items:center;margin:0 0 14px;flex-wrap:wrap;}
.subtabs__label{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground,#6b7280);margin-right:4px;}
.subtab{padding:6px 14px;border:1px solid var(--border,#e5e7eb);border-radius:999px;background:var(--card,#fff);color:var(--foreground,#0f1a33);font-family:inherit;font-size:var(--ds-font-xs,11px);font-weight:600;letter-spacing:.5px;cursor:pointer;transition:background .15s,color .15s;}
.subtab:hover{border-color:var(--purple,#155eef);}
.subtab.on{background:var(--ceo-gradient);color:#fff;border-color:transparent;}
.subtab:focus-visible{outline:2px solid var(--purple,#155eef);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){.subtab{transition:none;}}

/* ── 260910-cert: CEO Certification tab ──────────────────────────────────────────
   Source: ~/code/mfs/ceo-cert/cert-view.css. Both tables carry the portal's .sortable-table
   look (260910-cert2: v1 left it off — zero cell padding, centered headers). Only the module
   matrix, the panel footer, the two-panel split and the question list are new. */
.cc-matrix td{font-variant-numeric:tabular-nums;}
/* 12 columns: the house 18px cell padding runs the matrix past a 1440px laptop, so inner
   columns are tighter, the outer edges keep 18px, and module names may wrap to 2 lines.
   Below ~1366px the matrix scrolls sideways inside its panel (house .widget-table-wrap). */
.cc-matrix thead th,.cc-matrix tbody td{padding-left:12px;padding-right:12px;}
.cc-matrix thead th:first-child,.cc-matrix tbody td:first-child{padding-left:18px;}
.cc-matrix thead th:last-child,.cc-matrix tbody td:last-child{padding-right:18px;}
.cc-matrix th.cc-mod,.cc-matrix td.cc-mod{text-align:center;padding-left:8px;padding-right:8px;}
.cc-matrix th.cc-mod{white-space:normal;line-height:1.3;}
.cc-matrix th.cc-mod small{display:block;margin-top:2px;font-size:10px;font-weight:500;letter-spacing:0;text-transform:none;white-space:nowrap;opacity:.8;}
.cc-matrix td.cc-rep{font-weight:600;white-space:nowrap;}
.cc-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.sortable-table th.cc-num{text-align:right;}
/* recent attempts: 5 columns on one line with 10px inner padding */
#cc-recent thead th,#cc-recent tbody td{padding-left:10px;padding-right:10px;white-space:nowrap;}
#cc-recent thead th:first-child,#cc-recent tbody td:first-child{padding-left:18px;}
#cc-recent thead th:last-child,#cc-recent tbody td:last-child{padding-right:18px;}
.cc-rel{white-space:nowrap;}
.cc-dash{color:var(--muted-foreground,#9aa3b2);}
.cc-empty{text-align:center;padding:24px;color:var(--muted-foreground,#6b7280);}
.cc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-top:14px;}
.cc-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:12px;color:var(--muted-foreground,#6b7280);}
.cc-foot__right{display:flex;align-items:center;gap:10px;font-size:12px;white-space:nowrap;color:var(--muted-foreground,#6b7280);}
.cc-note{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--muted-foreground,#6b7280);}
/* side by side only where each half can hold the recent-attempts table on one line */
.cc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--ds-space-lg,16px);}
.cc-split > .section-card{margin-bottom:0;}
@media (max-width:1366px){.cc-split{grid-template-columns:minmax(0,1fr);}}
.cc-qlist{display:flex;flex-direction:column;gap:10px;}
.cc-q{padding:10px 12px;border:1px solid var(--border,#e5e7eb);border-radius:8px;}
.cc-q__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--muted-foreground,#6b7280);}
.cc-q__text{margin-top:6px;font-size:13px;line-height:1.45;color:var(--foreground,#0f1a33);}
.cc-q__ans{margin-top:4px;font-size:12px;line-height:1.4;color:#047857;}
/* ── 260912-d0h BEGIN: CEO "Objections" tab ─────────────────────────────────────────────────── */
/* Source: ~/code/mfs/ceo-objections/obj-view.css (deploy: APPLY-CEO-OBJECTIONS-260912-d0h.sh). */

#view-objections .obj-num { text-align: right; }
#view-objections .obj-empty { text-align: center; color: #8a93a4; padding: 18px 8px; }
#view-objections .obj-foot { margin: 10px 2px 0; font-size: 12px; color: #8a93a4; line-height: 1.6; }
#view-objections .obj-foot b { color: var(--text, #1f2937); font-weight: 600; }

/* small-sample / error banner */
#view-objections .obj-note {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; font-size: 13px; line-height: 1.5;
  background: var(--amber-glow, rgba(246,173,85,.10));
  border: 1px solid var(--amber, #f6ad55); color: #7a4a00;
}
#view-objections .obj-note.obj-note--bad {
  background: rgba(233,61,61,.08); border-color: var(--red, #e93d3d); color: #8c1c1c;
}

/* ── theme tiles ── */
#view-objections .obj-themes {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
#view-objections .obj-theme {
  position: relative; text-align: left; cursor: pointer;
  padding: 13px 14px 12px; border-radius: 10px;
  border: 1px solid var(--border, hsl(214 32% 91%));
  background: #fff; transition: border-color .12s, box-shadow .12s, transform .12s;
}
#view-objections .obj-theme:hover { border-color: var(--accent, #155eef); transform: translateY(-1px); }
#view-objections .obj-theme:focus-visible { outline: 2px solid var(--accent, #155eef); outline-offset: 2px; }
#view-objections .obj-theme.is-on {
  border-color: var(--accent, #155eef); box-shadow: 0 0 0 3px var(--accent-glow, rgba(21,94,239,.10));
}
#view-objections .obj-theme__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#view-objections .obj-theme__name { font-size: 13px; font-weight: 650; color: var(--text, #1f2937); letter-spacing: .01em; }
#view-objections .obj-theme__n { font-size: 21px; font-weight: 700; color: var(--primary, #04071D); line-height: 1; }
#view-objections .obj-theme__share { font-size: 11.5px; color: #8a93a4; margin-top: 3px; }
#view-objections .obj-theme__blurb {
  font-size: 11.5px; color: #8a93a4; line-height: 1.45; margin-top: 7px; min-height: 32px;
}
/* unresolved bar — the number that actually matters */
#view-objections .obj-theme__bar {
  margin-top: 9px; height: 5px; border-radius: 3px; overflow: hidden;
  background: var(--bg-muted, hsl(210 33% 97%));
}
#view-objections .obj-theme__bar i { display: block; height: 100%; border-radius: 3px; background: var(--red, #e93d3d); }
#view-objections .obj-theme__unres { margin-top: 5px; font-size: 11.5px; color: #8a93a4; }
#view-objections .obj-theme__unres b { color: var(--red, #e93d3d); font-weight: 650; }

/* ── trend chart (inline SVG, stacked by theme) ── */
#view-objections .obj-grain { display: flex; gap: 4px; }
#view-objections .obj-grain .sl-btn { padding: 4px 11px; font-size: 12px; }
#view-objections .obj-grain .sl-btn.active {
  background: var(--accent, #155eef); border-color: var(--accent, #155eef); color: #fff;
}
#view-objections .obj-chart { width: 100%; overflow-x: auto; }
#view-objections .obj-chart svg { display: block; min-width: 100%; }
#view-objections .obj-chart .obj-gl { stroke: var(--border, hsl(214 32% 91%)); stroke-width: 1; }
#view-objections .obj-chart .obj-ax { fill: #8a93a4; font-size: 10.5px; }
#view-objections .obj-chart rect.obj-seg { transition: opacity .12s; }
#view-objections .obj-chart rect.obj-seg:hover { opacity: .75; }
#view-objections .obj-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 11.5px; color: #8a93a4;
}
#view-objections .obj-legend span { display: inline-flex; align-items: center; gap: 6px; }
#view-objections .obj-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ── filters ── */
#view-objections .obj-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px;
}
#view-objections .obj-filters select {
  padding: 6px 10px; font-size: 12.5px; border-radius: 7px;
  border: 1px solid var(--border2, hsl(214 32% 86%)); background: #fff; color: var(--text, #1f2937);
}
#view-objections .obj-active { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
#view-objections .obj-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; cursor: pointer;
  background: var(--accent-glow, rgba(21,94,239,.10)); color: var(--accent, #155eef);
  border: 1px solid transparent;
}
#view-objections .obj-chip:hover { border-color: var(--accent, #155eef); }
#view-objections .obj-chip b { font-size: 13px; line-height: 1; }

/* ── objection rows + moment drill-down ── */
#view-objections tr.obj-row { cursor: pointer; }
#view-objections tr.obj-row:hover { background: var(--bg-hover, rgba(21,94,239,.05)); }
#view-objections .obj-caret { color: #8a93a4; font-size: 11px; white-space: nowrap; }
#view-objections .obj-pct { font-variant-numeric: tabular-nums; font-weight: 600; }
#view-objections .obj-pct--bad { color: var(--red, #e93d3d); }
#view-objections .obj-pct--warn { color: #b4761a; }
#view-objections .obj-pct--ok { color: var(--green, hsl(160 84% 39%)); }
#view-objections .obj-cause { font-size: 12px; color: #8a93a4; }

#view-objections .obj-moments { padding: 4px 2px 12px; display: grid; gap: 9px; }
/* blockquote rule on a verbatim prospect quote — kept hairline so it reads as quotation,
   not decoration. "Unresolved" is carried by the outcome label in the meta line, not by colour. */
#view-objections .obj-moment {
  border-left: 1px solid var(--border2, hsl(214 32% 86%)); padding: 8px 0 8px 12px;
  font-size: 12.5px; line-height: 1.55;
}
#view-objections .obj-moment.is-unres { border-left-color: rgba(233, 61, 61, .45); }
#view-objections .obj-moment__meta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; color: #8a93a4; font-size: 11.5px;
}
#view-objections .obj-moment__meta b { color: var(--text, #1f2937); font-weight: 650; font-size: 12px; }
#view-objections .obj-moment__q { margin-top: 5px; color: var(--text, #1f2937); }
#view-objections .obj-moment__q:before { content: "\201C"; }
#view-objections .obj-moment__q:after { content: "\201D"; }
#view-objections .obj-moment__r { margin-top: 4px; color: #6b7280; }
#view-objections .obj-moment__r b { color: #6b7280; font-weight: 650; }
#view-objections .obj-moment a { color: var(--accent, #155eef); text-decoration: none; font-weight: 600; white-space: nowrap; }
#view-objections .obj-moment a:hover { text-decoration: underline; }

/* ── by-closer stuck-bar ── */
#view-objections .obj-stuck { display: flex; align-items: center; gap: 8px; }
#view-objections .obj-stuck__bar {
  flex: 1; min-width: 90px; height: 6px; border-radius: 3px; overflow: hidden; display: flex;
  background: var(--bg-muted, hsl(210 33% 97%));
}
#view-objections .obj-stuck__bar i { display: block; height: 100%; }
#view-objections .obj-stuck__lbl { font-size: 11.5px; color: #8a93a4; white-space: nowrap; }

@media (max-width: 720px) {
  #view-objections .obj-themes { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  #view-objections .obj-active { margin-left: 0; width: 100%; }
}
/* 260912-d0h END */
/* ── 260910-src BEGIN: CEO Show Rate Calls tab ──────────────────────────────────────
   Source: ~/code/mfs/ceo-show-rate-calls/src-view.css. Tables carry .sortable-table (the house
   table look; data-table alone is unstyled, 260910-cert2). */
.src-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:14px;}
.src-recon{flex:1 1 600px;font-size:13.5px;line-height:1.5;color:var(--foreground,#0f1a33);}
/* 7 cards: the house .dash-kpi-row > .kpi-card min-width:185px pushes the 7th off-screen at 1440px */
#src-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;}
#src-kpis > .kpi-card{min-width:0;}
#src-kpis .src-tile{cursor:pointer;transition:box-shadow .12s,border-color .12s;}
#src-kpis .src-tile:hover{box-shadow:0 2px 10px rgba(15,26,51,.10);}
#src-kpis .src-tile:focus-visible{outline:2px solid #2563eb;outline-offset:2px;}
#src-kpis .src-tile.src-on{border-color:#2563eb;box-shadow:inset 0 0 0 1px #2563eb;}
#src-kpis .kpi-card__sub{font-size:11.5px;line-height:1.35;}
.src-note{margin:12px 0 0;padding:10px 12px;border:1px solid #f5d38a;background:#fffbeb;border-radius:8px;font-size:12.5px;line-height:1.5;color:#7c4a03;}
.src-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--ds-space-lg,16px);margin-top:16px;}
.src-split > .section-card{margin-bottom:0;}
@media (max-width:1100px){.src-split{grid-template-columns:minmax(0,1fr);}}
.src-split + .section-card{margin-top:16px;}
.src-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.sortable-table th.src-num{text-align:right;}
.src-empty{text-align:center;padding:24px;color:var(--muted-foreground,#6b7280);}
/* the two half-width breakdowns hold 6 columns: tighter inner cells, headers may wrap to 2 lines */
table.src-mini thead th,table.src-mini tbody td{padding-left:8px;padding-right:8px;}
table.src-mini thead th:first-child,table.src-mini tbody td:first-child{padding-left:16px;}
table.src-mini thead th:last-child,table.src-mini tbody td:last-child{padding-right:16px;}
table.src-mini thead th{white-space:normal;line-height:1.25;vertical-align:bottom;}
.src-mini tbody tr[data-k]{cursor:pointer;}
.src-mini tbody tr[data-k]:hover td{background:#f7f9fc;}
.src-mini tbody tr.src-sel td{background:#eef4ff;}
.src-mini tbody tr.src-sel td:first-child{box-shadow:inset 3px 0 0 #2563eb;}
.src-mini td:first-child{font-weight:600;white-space:nowrap;}
.src-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;}
.src-filters select,.src-filters input{height:32px;padding:0 10px;border:1px solid var(--border,#d9dee8);border-radius:6px;background:#fff;font-size:13px;color:var(--foreground,#0f1a33);}
.src-filters input{min-width:220px;}
.src-active{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;}
.src-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 4px 0 10px;border-radius:13px;background:#eef4ff;color:#1e40af;font-size:12px;font-weight:600;}
.src-chip button{border:0;background:none;color:inherit;font-size:14px;line-height:1;cursor:pointer;padding:0 6px;}
#src-table thead th{cursor:pointer;user-select:none;white-space:nowrap;}
#src-table thead th .src-arrow{opacity:.7;margin-left:3px;}
#src-table tbody td{vertical-align:top;}
#src-table tbody tr.src-row{cursor:pointer;}
#src-table tbody tr.src-row:hover td{background:#f7f9fc;}
#src-table tbody tr.src-row.src-open td{background:#eef4ff;}
.src-when{white-space:nowrap;}
.src-when small,.src-sub{display:block;font-size:11.5px;color:var(--muted-foreground,#6b7280);}
.src-lead{font-weight:600;}
.src-lead a,.src-link{color:#2563eb;text-decoration:none;font-weight:600;}
.src-lead a:hover,.src-link:hover{text-decoration:underline;}
.src-how{font-size:12px;color:var(--muted-foreground,#4b5563);}
.src-cash{color:#047857;font-weight:700;}
.src-detail td{background:#f7f9fc;font-size:12.5px;line-height:1.55;color:var(--foreground,#0f1a33);}
.src-detail dl{display:grid;grid-template-columns:max-content 1fr;gap:3px 14px;margin:0;}
.src-detail dt{color:var(--muted-foreground,#6b7280);}
.src-detail dd{margin:0;}
.src-more{margin-top:10px;text-align:center;}
.src-foot{margin:12px 0 0;font-size:12px;line-height:1.55;color:var(--muted-foreground,#6b7280);}
.src-tile-link{display:block;margin-top:6px;padding:0;border:0;background:none;font-size:11.5px;font-weight:600;color:#2563eb;cursor:pointer;text-align:left;}
.src-tile-link:hover{text-decoration:underline;}
.src-crosslink{display:flex;justify-content:flex-end;margin-bottom:12px;}
/* by-hour: one single-hue bar per rate column (the column header names it, so no legend) */
#src-hour-card + .section-card{margin-top:16px;}
.src-bar-cell{display:flex;align-items:center;gap:10px;min-width:180px;}
.src-bar{flex:0 0 120px;height:8px;background:#eef1f5;border-radius:4px;overflow:hidden;}
.src-bar > span{display:block;height:100%;background:#2563eb;border-radius:4px;}
.src-bar-cell b{min-width:48px;text-align:right;font-variant-numeric:tabular-nums;}
.src-bar-cell.src-thin .src-bar > span{background:#9db8f5;}
.src-bar-cell.src-thin b{font-weight:500;color:var(--muted-foreground,#6b7280);}
.src-dim{color:var(--muted-foreground,#9aa3b2);}
/* 260912-sbt: SendBlue touch column */
.src-touch{white-space:nowrap;}
.src-tn{font-weight:700;}
.src-tk{margin-left:5px;font-size:11.5px;opacity:.85;}
.src-tr{margin-left:6px;font-size:11px;color:var(--muted-foreground,#6b7280);font-variant-numeric:tabular-nums;}
.src-tdim{color:var(--muted-foreground,#9aa3b2);}
/* 260912-csa: confirmation attribution column */
.src-cfmcell{white-space:nowrap;font-size:12px;}
.src-cfmcell small{color:var(--muted-foreground,#6b7280);font-variant-numeric:tabular-nums;}
.src-cfm{font-weight:600;}
.src-cfm--retell{color:#1d4ed8;}
.src-cfm--ghl-workflow{color:#6d28d9;}
.src-cfm--sendblue{color:#047857;}
.src-cfm--unattributed{color:var(--muted-foreground,#6b7280);font-weight:500;}
.src-cfm-rep{margin-left:4px;color:#047857;font-size:11px;}
/* 260910-src END */
/* ══════════════════ 260912-jze: mobile shell ══════════════════
   ADDITIVE ONLY. Appended last so later-rule-wins overrides the 900px (L3898) and
   768px (L3968) blocks without deleting them. Do not fold this into those blocks.

   (1) 769–900px dead band: .sidebar collapsed to a strip at max-width:900px but
       .nav-group only flattened at max-width:768px, so iPhone landscape (844/852/896)
       rendered six vertical nav stacks side by side with two groups off-screen.
       Fix = run BOTH at ONE breakpoint. Boundary raised to 1024px so 932px
       (Pro Max landscape) gets the strip instead of a 230px sidebar eating 25% of screen.
       TRADEOFF: iPad mini landscape (1024) now gets the mobile strip too. iPad 10.9 (1180)
       and iPad Pro 11 (1194) keep the desktop sidebar. If the mini regression is unwanted,
       change 1024 -> 1000 below; that still covers 932 and is the only edit needed.
   (2) .sidebar-user had no background, so tabs scrolled underneath it at 375px.
   (3) .login-box 380px + 40px padding overflowed 375px; .login-input 13px (<16px)
       triggered iOS Safari auto-zoom on focus.
   (4) .period-selector{justify-content:flex-end} clipped "CUSTOM" past the right edge.

   DEFERRED (not additive, do not do here): delete the dead @media(max-width:768px)
   block at L3277. Also deferred: backfill 260912-hgh into this repo — it is VPS-only. */

@media (max-width:1024px){
  html,body{overflow-x:hidden;}
  .app.visible{flex-direction:column;}
  .sidebar{display:flex;position:sticky;top:0;left:auto;bottom:auto;width:100%;height:auto;max-height:none;flex-direction:row;align-items:center;gap:0;overflow:visible;flex-shrink:0;border-right:none;border-bottom:1px solid var(--sidebar-border);z-index:200;}
  .sidebar-brand{padding:8px 10px;border-bottom:none;border-right:1px solid var(--sidebar-border);flex-shrink:0;}
  .sidebar-brand-row > :not(.sidebar-logo){display:none;}
  .sidebar-logo{width:32px;height:32px;font-size:16px;}
  .sidebar-nav{flex:1 1 auto;min-width:0;display:flex;flex-direction:row;align-items:center;gap:4px;padding:6px 8px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .sidebar-nav::-webkit-scrollbar{display:none;}
  .sidebar-nav .nav-tab,.sidebar-nav .nav-ext{width:auto;flex:0 0 auto;white-space:nowrap;padding:8px 10px;font-size:11px;}

  /* (1) flatten the groups at the SAME width the strip appears. Plain display:flex with NO
     !important, so 260910-nav2's .nav-tab--hidden{display:none!important} still wins. */
  .nav-group{display:contents;}
  .nav-group-label{display:none;}
  .nav-group .nav-tab,.nav-group .nav-ext,
  .nav-group.collapsed .nav-tab,.nav-group.collapsed .nav-ext{display:flex;width:auto;flex:0 0 auto;white-space:nowrap;padding:8px 10px;font-size:11px;border-left:0;}

  /* (2) opaque user block — tabs can no longer scroll under it */
  .sidebar-user{background:var(--sidebar-background);padding:6px 10px;border-top:none;border-left:1px solid var(--sidebar-border);flex-shrink:0;gap:8px;position:relative;z-index:2;}
  .sidebar-user .member-avatar{display:none;}
  .sidebar-user-info{max-width:84px;}
  .member-name-pill{font-size:11px;}
  .member-role{display:none;}
  .logout-btn{padding:5px 8px;font-size:10px;}

  .main-content-area{margin-left:0;min-height:0;overflow:visible;}
  .top-bar{position:static;padding:12px 16px;flex-wrap:wrap;gap:8px;}

  /* (4) chips wrap left-aligned instead of clipping past the right edge */
  .top-bar-row{flex-wrap:wrap;gap:10px;padding-bottom:14px;}
  .period-selector{flex-wrap:wrap;justify-content:flex-start;gap:6px;width:100%;min-width:0;}
  .period-btn{padding:6px 10px;}

  /* (3) login fits the viewport; 16px kills iOS focus zoom */
  .login-input{font-size:16px;}
}

/* (3) width is a no-op at desktop (min() resolves to 380px) so it stays unscoped */
.login-box{width:min(380px,calc(100vw - 32px));}
@media (max-width:420px){
  .login-box{padding:28px 20px;}
  .login-sub{margin-bottom:20px;}
}
/* 260912-jze END */

/* ── 260912-hgh BEGIN: CEO "Setter Objections" tab ──────────────────────────────────────────── */
/* Source: ~/code/mfs/ceo-setter-objections-260912-hgh/sobj-view.css (deploy: APPLY-CEO-SETTER-OBJECTIONS-260912-hgh.sh). */

#view-setter-objections .sobj-num { text-align: right; }
#view-setter-objections .sobj-empty { text-align: center; color: #8a93a4; padding: 18px 8px; }
#view-setter-objections .sobj-foot { margin: 10px 2px 0; font-size: 12px; color: #8a93a4; line-height: 1.6; }
#view-setter-objections .sobj-foot b { color: var(--text, #1f2937); font-weight: 600; }
#view-setter-objections .sobj-crossref { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border, hsl(214 32% 91%)); }

/* persistent coverage banner (D-05) — never dismissible, distinct from the small-n note */
#view-setter-objections .sobj-coverage {
  margin: 0 0 10px; padding: 10px 14px; border-radius: 8px; font-size: 13px; line-height: 1.5;
  background: rgba(21, 94, 239, .07); border: 1px solid var(--accent, #155eef); color: #0b3a91;
}
#view-setter-objections .sobj-coverage b { font-weight: 700; }
#view-setter-objections .sobj-coverage__buckets {
  margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: #3a5faa;
}

/* persistent calibration badge (260912-mjv) — never dismissible, and visually DISTINCT from the
   coverage banner above: coverage says "the sample is incomplete" (informational blue), this says
   "this channel's own extraction is UNPROVEN" (alarm red) — a reader must never conflate the two. */
#view-setter-objections .sobj-calibration {
  margin: 0 0 10px; padding: 10px 14px; border-radius: 8px; font-size: 13px; line-height: 1.55;
  background: rgba(233,61,61,.08); border: 1.5px solid var(--red, #e93d3d); color: #6b1414;
}
#view-setter-objections .sobj-calibration b { font-weight: 700; }
#view-setter-objections .sobj-calibration__row + .sobj-calibration__row {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(233,61,61,.25);
}
#view-setter-objections .sobj-calibration__verdict {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  background: var(--red, #e93d3d); color: #fff; vertical-align: middle;
}
#view-setter-objections .sobj-calibration__cause {
  margin-top: 5px; font-size: 12px; color: #7a1f1f; font-style: italic;
}

/* small-sample / error banner — a DIFFERENT question ("is this window big enough?") from coverage */
#view-setter-objections .sobj-note {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; font-size: 13px; line-height: 1.5;
  background: var(--amber-glow, rgba(246,173,85,.10));
  border: 1px solid var(--amber, #f6ad55); color: #7a4a00;
}
#view-setter-objections .sobj-note.sobj-note--bad {
  background: rgba(233,61,61,.08); border-color: var(--red, #e93d3d); color: #8c1c1c;
}

/* ── bucket tiles (7 themes + Unmapped) ── */
#view-setter-objections .sobj-themes {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
#view-setter-objections .sobj-theme {
  position: relative; text-align: left; cursor: pointer;
  padding: 13px 14px 12px; border-radius: 10px;
  border: 1px solid var(--border, hsl(214 32% 91%));
  background: #fff; transition: border-color .12s, box-shadow .12s, transform .12s;
}
#view-setter-objections .sobj-theme:hover { border-color: var(--accent, #155eef); transform: translateY(-1px); }
#view-setter-objections .sobj-theme:focus-visible { outline: 2px solid var(--accent, #155eef); outline-offset: 2px; }
#view-setter-objections .sobj-theme.is-on {
  border-color: var(--accent, #155eef); box-shadow: 0 0 0 3px var(--accent-glow, rgba(21,94,239,.10));
}
#view-setter-objections .sobj-theme__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#view-setter-objections .sobj-theme__name { font-size: 13px; font-weight: 650; color: var(--text, #1f2937); letter-spacing: .01em; }
#view-setter-objections .sobj-theme__n { font-size: 21px; font-weight: 700; color: var(--primary, #04071D); line-height: 1; }
#view-setter-objections .sobj-theme__share { font-size: 11.5px; color: #8a93a4; margin-top: 3px; }
#view-setter-objections .sobj-theme__blurb {
  font-size: 11.5px; color: #8a93a4; line-height: 1.45; margin-top: 7px; min-height: 32px;
}
/* Unmapped gets a visually DISTINCT treatment so it never reads as a peer theme */
#view-setter-objections .sobj-theme.sobj-theme--unmapped {
  border-style: dashed; background: var(--bg-muted, hsl(210 33% 97%));
}
#view-setter-objections .sobj-theme.sobj-theme--unmapped .sobj-theme__name { color: #6b7280; }

/* ── trend chart (inline SVG, stacked by theme) ── */
#view-setter-objections .sobj-grain { display: flex; gap: 4px; }
#view-setter-objections .sobj-grain .sl-btn { padding: 4px 11px; font-size: 12px; }
#view-setter-objections .sobj-grain .sl-btn.active {
  background: var(--accent, #155eef); border-color: var(--accent, #155eef); color: #fff;
}
#view-setter-objections .sobj-chart { width: 100%; overflow-x: auto; }
#view-setter-objections .sobj-chart svg { display: block; min-width: 100%; }
#view-setter-objections .sobj-chart .sobj-gl { stroke: var(--border, hsl(214 32% 91%)); stroke-width: 1; }
#view-setter-objections .sobj-chart .sobj-ax { fill: #8a93a4; font-size: 10.5px; }
#view-setter-objections .sobj-chart rect.sobj-seg { transition: opacity .12s; }
#view-setter-objections .sobj-chart rect.sobj-seg:hover { opacity: .75; }
#view-setter-objections .sobj-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 11.5px; color: #8a93a4;
}
#view-setter-objections .sobj-legend span { display: inline-flex; align-items: center; gap: 6px; }
#view-setter-objections .sobj-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ── filters ── */
#view-setter-objections .sobj-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px;
}
#view-setter-objections .sobj-filters select {
  padding: 6px 10px; font-size: 12.5px; border-radius: 7px;
  border: 1px solid var(--border2, hsl(214 32% 86%)); background: #fff; color: var(--text, #1f2937);
}
#view-setter-objections .sobj-active { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
#view-setter-objections .sobj-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; cursor: pointer;
  background: var(--accent-glow, rgba(21,94,239,.10)); color: var(--accent, #155eef);
  border: 1px solid transparent;
}
#view-setter-objections .sobj-chip:hover { border-color: var(--accent, #155eef); }
#view-setter-objections .sobj-chip b { font-size: 13px; line-height: 1; }

/* ── label rows + moment drill-down ── */
#view-setter-objections tr.sobj-row { cursor: pointer; }
#view-setter-objections tr.sobj-row:hover { background: var(--bg-hover, rgba(21,94,239,.05)); }
#view-setter-objections .sobj-caret { color: #8a93a4; font-size: 11px; white-space: nowrap; }
#view-setter-objections .sobj-mapped-yes { color: var(--green, hsl(160 84% 39%)); font-weight: 650; }
#view-setter-objections .sobj-mapped-no { color: #6b7280; font-weight: 650; font-style: italic; }

#view-setter-objections .sobj-moments { padding: 4px 2px 12px; display: grid; gap: 9px; }
#view-setter-objections .sobj-moment {
  border-left: 1px solid var(--border2, hsl(214 32% 86%)); padding: 8px 0 8px 12px;
  font-size: 12.5px; line-height: 1.55;
}
#view-setter-objections .sobj-moment__meta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; color: #8a93a4; font-size: 11.5px;
}
#view-setter-objections .sobj-moment__meta b { color: var(--text, #1f2937); font-weight: 650; font-size: 12px; }
#view-setter-objections .sobj-moment__q { margin-top: 5px; color: var(--text, #1f2937); }
#view-setter-objections .sobj-moment__q:before { content: "\201C"; }
#view-setter-objections .sobj-moment__q:after { content: "\201D"; }
#view-setter-objections .sobj-moment a { color: var(--accent, #155eef); text-decoration: none; font-weight: 600; white-space: nowrap; }
#view-setter-objections .sobj-moment a:hover { text-decoration: underline; }

/* ── by-setter stuck-bar ── */
#view-setter-objections .sobj-stuck { display: flex; align-items: center; gap: 8px; }
#view-setter-objections .sobj-stuck__bar {
  flex: 1; min-width: 90px; height: 6px; border-radius: 3px; overflow: hidden; display: flex;
  background: var(--bg-muted, hsl(210 33% 97%));
}
#view-setter-objections .sobj-stuck__bar i { display: block; height: 100%; }
#view-setter-objections .sobj-stuck__lbl { font-size: 11.5px; color: #8a93a4; white-space: nowrap; }

@media (max-width: 720px) {
  #view-setter-objections .sobj-themes { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  #view-setter-objections .sobj-active { margin-left: 0; width: 100%; }
}
/* 260912-hgh END */

/* ── 260913-mine: CEO Deal Mentions tab ─────────────────────────────────────── */
.dm-filters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin-bottom:6px}
.dm-filters label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted-foreground,#6b7280);text-transform:uppercase;letter-spacing:.06em}
.dm-filters select,.dm-filters .sl-input{font-family:inherit;font-size:13px;color:inherit;background:#fff;border:1px solid var(--border,#e5e5e5);border-radius:6px;padding:7px 10px;min-width:150px}
.dm-filters .sl-input{min-width:240px;flex:1}
.dm-table td{vertical-align:top}
.dm-table .dm-empty{text-align:center;padding:24px;color:var(--muted-foreground,#6b7280)}
.dm-table input.dm-in{font-family:inherit;font-size:13px;color:inherit;background:#f7f9fc;border:1px solid var(--border,#e5e5e5);border-radius:5px;padding:5px 7px;width:100%;box-sizing:border-box}
.dm-table input.dm-in.short{width:64px}
.dm-table input.dm-in.state{width:52px;text-transform:uppercase}
.dm-deal{display:grid;grid-template-columns:64px 1fr 52px;gap:6px;align-items:center;min-width:280px}
.dm-deal .dm-lab{font-size:10px;color:var(--muted-foreground,#6b7280);text-transform:uppercase;letter-spacing:.06em;grid-column:1 / -1;margin-top:2px}
.dm-quote{font-size:12.5px;line-height:1.45;color:#374151;max-width:420px}
.dm-quote em{color:#6b7280;font-style:normal;font-size:11.5px;display:block;margin-top:3px}
.dm-src a{font-size:12px;color:var(--accent,#155eef);text-decoration:none;font-weight:600}
.dm-src span{display:block;font-size:11px;color:var(--muted-foreground,#6b7280)}
.dm-actions{display:flex;flex-direction:column;gap:6px;min-width:96px}
.dm-actions .sl-btn.ok{background:var(--accent,#155eef);color:#fff;border-color:transparent}
.dm-actions .sl-btn.dup{color:#92400e}
.dm-conf{font-variant-numeric:tabular-nums;text-align:right}
.dm-status{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;background:#f0f1f4;color:#6b7280}
.dm-status.approved{background:#e9f9ef;color:#0b6b3a}
.dm-status.rejected{background:#fdecec;color:#a5231c}
.dm-status.duplicate{background:#fff7e6;color:#92400e}
.dm-filters .dm-check{flex-direction:row;align-items:center;gap:6px;text-transform:none;letter-spacing:0;font-size:12.5px;color:inherit;padding-bottom:8px;white-space:nowrap}
.dm-filters .dm-bulk{color:#92400e;white-space:nowrap}
.dm-note{font-size:12px;color:var(--muted-foreground,#6b7280);margin:12px 0 0;line-height:1.5}
.dm-deal .dm-addr{grid-column:1 / -1;display:flex;gap:6px;align-items:center}
.dm-deal .dm-addr input.dm-in{flex:1}
.dm-deal .dm-find{white-space:nowrap;font-size:12px;padding:5px 9px}
.dm-deal .dm-addr-src{grid-column:1 / -1;font-size:11px;color:var(--accent,#155eef);text-decoration:none}
/* ── /260913-mine ── */

/* ── 260916-srf: Show Rate tab slice bar + panel sort toggles + Show Rate by Date ── */
.srf-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;padding:10px 12px;border:1px solid var(--card-border,#e7ebf2);border-radius:10px;background:var(--card,#fff)}
.srf-bar.is-active{border-color:var(--accent,#155eef);box-shadow:0 0 0 3px var(--accent-glow,rgba(21,94,239,.12))}
.srf-bar__label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground,#6b7280);margin-right:2px}
.srf-bar__date{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted-foreground,#6b7280)}
.srf-bar .ds-input{font-size:13px}
.srf-bar__active{flex-basis:100%;font-size:12px;color:var(--accent,#155eef);font-weight:600}
.srf-bar__active:empty{display:none}
.srf-sort{display:inline-flex;gap:2px;margin-left:auto;margin-right:10px;white-space:nowrap}
.srf-sort__btn{background:transparent;border:1px solid var(--card-border,#e7ebf2);color:var(--muted-foreground,#6b7280);border-radius:6px;padding:3px 8px;font-size:11px;font-weight:600;cursor:pointer;line-height:1.2}
.srf-sort__btn:hover{border-color:var(--accent,#155eef)}
.srf-sort__btn.is-on{background:var(--accent,#155eef);border-color:var(--accent,#155eef);color:#fff}
.srf-day{cursor:pointer;border-radius:6px}
.srf-day:hover{background:var(--accent-glow,rgba(21,94,239,.08))}
@media (max-width:720px){.srf-bar .ds-select,.srf-bar .ds-input{flex:1 1 44%}}
/* ── /260916-srf ── */
/* 260916-soh: Setter Objections — handling (addressed vs moved past) */
#view-setter-objections .sobj-h { display: flex; align-items: center; gap: 8px; min-width: 150px; }
#view-setter-objections .sobj-h--none { color: #8a93a4; font-size: 12px; }
#view-setter-objections .sobj-h__bar { display: flex; height: 8px; width: 70px; border-radius: 4px; overflow: hidden; background: #e5e7eb; flex: 0 0 70px; }
#view-setter-objections .sobj-h__bar i { display: block; height: 100%; }
#view-setter-objections .sobj-h__lbl { font-size: 12px; color: var(--text, #1f2937); white-space: nowrap; }
#view-setter-objections .sobj-h__n { color: #8a93a4; }
#view-setter-objections .sobj-badge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; color: #fff; }
#view-setter-objections .sobj-badge--addressed { background: #0d9488; }
#view-setter-objections .sobj-badge--moved_past { background: #e93d3d; }
#view-setter-objections .sobj-badge--conceded { background: #6b7280; }
#view-setter-objections .sobj-badge--unclear { background: #b4761a; }
#view-setter-objections .sobj-badge--unscored { background: #e5e7eb; color: #6b7280; }
#view-setter-objections .sobj-moment__r { margin-top: 7px; padding-top: 6px; border-top: 1px dashed #e5e7eb; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; }
#view-setter-objections .sobj-moment__tech { color: #4b5563; font-style: italic; }
#view-setter-objections .sobj-moment__out { color: #8a93a4; }
#view-setter-objections .sobj-moment__unv { color: #b4761a; font-weight: 600; }
#view-setter-objections .sobj-moment__rq { flex-basis: 100%; color: var(--text, #1f2937); }
#view-setter-objections .sobj-moment__rq--none { color: #8a93a4; font-style: italic; }
#view-setter-objections .sobj-legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; margin-right: 3px; }
#view-setter-objections .sobj-handling-legend { margin-top: 10px; }

/* ── 260916-cfu BEGIN: CEO Closer Follow-Up tab ─────────────────────────────────────
   Source: ~/code/mfs/ceo-closer-followup-260916-cfu/cfu-view.css. Tables carry .sortable-table
   (the house table look; data-table alone is unstyled, 260910-cert2). Channel colours are fixed
   meaning: calls = accent blue, GHL texts = green, SendBlue = violet, pre-call = grey hatch. */
#view-closer-followup{--cfu-call:#155eef;--cfu-text:#0f9f6e;--cfu-sb:#7c5cff;--cfu-pre:#c7ced9;--cfu-pre-fg:#8a94a6;}
.cfu-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:14px;}
.cfu-recon{flex:1 1 600px;font-size:13.5px;line-height:1.5;color:var(--foreground,#0f1a33);}
.cfu-top__actions{display:flex;gap:8px;}
/* KPI tiles double as channel filters for the list */
.cfu-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.cfu-kpis > .kpi-card{min-width:0;position:relative;overflow:hidden;}
.cfu-kpis .kpi-card__sub{font-size:11.5px;line-height:1.35;color:var(--muted-foreground,#6b7280);}
.cfu-kpis .cfu-tile{cursor:pointer;transition:box-shadow .12s,border-color .12s;}
.cfu-kpis .cfu-tile:hover{box-shadow:0 2px 10px rgba(15,26,51,.10);}
.cfu-kpis .cfu-tile:focus-visible{outline:2px solid var(--cfu-call);outline-offset:2px;}
.cfu-kpis .cfu-tile.cfu-on{border-color:var(--cfu-call);box-shadow:inset 0 0 0 1px var(--cfu-call);}
.cfu-kpis .cfu-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tile,transparent);}
.cfu-kpis .cfu-tile--call{--tile:var(--cfu-call);} .cfu-kpis .cfu-tile--text{--tile:var(--cfu-text);}
.cfu-kpis .cfu-tile--sb{--tile:var(--cfu-sb);} .cfu-kpis .cfu-tile--booked{--tile:#059669;}
.cfu-kpis .kpi-card--booked .kpi-card__value{color:#047857;}
/* explainer folds away */
.cfu-how{margin:12px 0 0;border:1px solid #e5e9f0;border-radius:10px;background:#fff;font-size:12.5px;line-height:1.55;color:#33415c;}
.cfu-how > summary{cursor:pointer;padding:9px 14px;font-weight:600;color:#1e3a5f;list-style:none;display:flex;align-items:center;gap:8px;}
.cfu-how > summary::-webkit-details-marker{display:none;}
.cfu-how > summary::before{content:"\25B8";font-size:11px;color:#6b7280;transition:transform .12s;}
.cfu-how[open] > summary::before{transform:rotate(90deg);}
.cfu-how__body{padding:0 14px 12px;border-top:1px solid #eef1f6;}
.cfu-how__body p{margin:10px 0 0;}
.cfu-split{display:grid;grid-template-columns:minmax(0,13fr) minmax(0,8fr);gap:var(--ds-space-lg,16px);margin-top:16px;}
.cfu-split > .section-card{margin-bottom:0;}
@media (max-width:1200px){.cfu-split{grid-template-columns:minmax(0,1fr);}}
.cfu-split + .section-card{margin-top:16px;}
.cfu-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.sortable-table th.cfu-num{text-align:right;}
.cfu-empty{text-align:center;padding:24px;color:var(--muted-foreground,#6b7280);}
.cfu-dim{color:var(--muted-foreground,#6b7280);}
.cfu-sub{display:block;font-size:11px;font-weight:400;color:var(--muted-foreground,#6b7280);font-variant-numeric:tabular-nums;}
/* by-closer */
table.cfu-mini thead th,table.cfu-mini tbody td{padding-left:6px;padding-right:6px;}
table.cfu-mini{font-size:12.5px;}
table.cfu-mini thead th:first-child,table.cfu-mini tbody td:first-child{padding-left:12px;}
table.cfu-mini thead th:last-child,table.cfu-mini tbody td:last-child{padding-right:10px;}
table.cfu-mini thead th{white-space:nowrap;line-height:1.25;vertical-align:bottom;}
table.cfu-mini tbody td:first-child{white-space:nowrap;font-weight:500;}
.cfu-mini tbody tr[data-k]{cursor:pointer;}
.cfu-mini tbody tr[data-k]:hover td{background:#f7f9fc;}
.cfu-mini tbody tr.cfu-sel td{background:#eef4ff;}
.cfu-mini tbody tr.cfu-sel td:first-child{box-shadow:inset 3px 0 0 var(--cfu-call);}
.cfu-mini tbody tr.cfu-total td{font-weight:600;border-top:2px solid #e5e7eb;}
.cfu-mini tbody tr.cfu-zero td{color:var(--muted-foreground,#6b7280);}
th.cfu-mixcol{min-width:66px;}
.cfu-mix{display:flex;height:10px;border-radius:5px;overflow:hidden;background:#eef1f6;min-width:60px;}
.cfu-mix > i{display:block;height:100%;}
.cfu-mix--call{background:var(--cfu-call);} .cfu-mix--text{background:var(--cfu-text);} .cfu-mix--sb{background:var(--cfu-sb);}
/* by-day chart */
.cfu-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11.5px;color:var(--muted-foreground,#6b7280);margin:0 0 6px;}
.cfu-legend span{display:inline-flex;align-items:center;gap:6px;}
.cfu-sw{width:10px;height:10px;border-radius:2px;display:inline-block;}
.cfu-sw--call{background:var(--cfu-call);} .cfu-sw--text{background:var(--cfu-text);} .cfu-sw--sb{background:var(--cfu-sb);}
.cfu-sw--pre{background:repeating-linear-gradient(135deg,#c7ced9 0 2px,#fff 2px 4px);border:1px solid #c7ced9;}
.cfu-chart{width:100%;overflow-x:auto;}
.cfu-chart svg{display:block;width:100%;height:auto;font-family:inherit;}
.cfu-chart .cfu-bar{cursor:pointer;}
.cfu-chart .cfu-bar rect.cfu-hit{fill:transparent;}
.cfu-chart .cfu-bar:hover rect.cfu-hit{fill:rgba(21,94,239,.06);}
.cfu-chart .cfu-bar.cfu-sel rect.cfu-hit{fill:rgba(21,94,239,.10);stroke:var(--cfu-call);stroke-width:1;}
.cfu-chart .cfu-seg-call{fill:var(--cfu-call);} .cfu-chart .cfu-seg-text{fill:var(--cfu-text);} .cfu-chart .cfu-seg-sb{fill:var(--cfu-sb);}
.cfu-chart .cfu-seg-pre{fill:url(#cfu-hatch);stroke:#c7ced9;stroke-width:.5;}
.cfu-chart .cfu-axis{font-size:10.5px;fill:#6b7280;}
.cfu-chart .cfu-axis--dow{font-size:9.5px;fill:#9aa3b2;}
.cfu-chart .cfu-total{font-size:10.5px;fill:#1f2937;font-weight:600;}
.cfu-chart .cfu-grid{stroke:#eef1f6;stroke-width:1;}
.cfu-chart-foot{margin-top:6px;font-size:11.5px;color:var(--muted-foreground,#6b7280);min-height:16px;}
/* people list */
.cfu-filters{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-bottom:12px;}
.cfu-filters select,.cfu-filters input{font:inherit;font-size:13px;padding:6px 8px;border:1px solid #d1d5db;border-radius:6px;background:#fff;color:inherit;}
.cfu-filters input{min-width:220px;}
.cfu-seg{display:inline-flex;border:1px solid #d1d5db;border-radius:7px;overflow:hidden;background:#fff;}
.cfu-seg__btn{font:inherit;font-size:12.5px;padding:6px 12px;border:0;background:transparent;color:#4b5563;cursor:pointer;}
.cfu-seg__btn + .cfu-seg__btn{border-left:1px solid #e5e7eb;}
.cfu-seg__btn:hover{background:#f7f9fc;}
.cfu-seg__btn.cfu-seg__on{background:#04071d;color:#fff;}
.cfu-seg__btn:focus-visible{outline:2px solid var(--cfu-call);outline-offset:-2px;}
table.cfu-people thead th[data-k]{cursor:pointer;user-select:none;}
table.cfu-people thead th[data-k].cfu-sort::after{content:" \25BE";opacity:.7;}
table.cfu-people thead th[data-k].cfu-sort.cfu-asc::after{content:" \25B4";}
table.cfu-people tbody td{vertical-align:top;}
table.cfu-people td.cfu-closer{white-space:nowrap;}
table.cfu-people td.cfu-who{min-width:260px;max-width:420px;}
.cfu-name{font-weight:500;}
.cfu-name a{color:inherit;text-decoration:none;border-bottom:1px dotted #9ca3af;}
.cfu-name a:hover{color:var(--cfu-call);border-bottom-color:var(--cfu-call);}
.cfu-phone{font-size:11.5px;color:var(--muted-foreground,#6b7280);margin-left:8px;font-variant-numeric:tabular-nums;}
.cfu-last{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:#4b5563;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:420px;}
.cfu-last .cfu-kind{font-size:10px;color:#8a94a6;text-transform:uppercase;letter-spacing:.03em;margin-right:5px;}
.cfu-chips{display:flex;flex-wrap:wrap;gap:4px;}
.cfu-chip{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:999px;font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap;border:1px solid transparent;}
.cfu-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);}
.cfu-chip--call{--c:var(--cfu-call);background:#eef4ff;color:#1e40af;border-color:#d6e3fb;}
.cfu-chip--text{--c:var(--cfu-text);background:#e8f8f1;color:#0b6b4a;border-color:#c5ecd9;}
.cfu-chip--sb{--c:var(--cfu-sb);background:#f1edff;color:#4c33b8;border-color:#dcd3fb;}
.cfu-chip--pre{--c:var(--cfu-pre);background:#f3f4f6;color:#6b7280;border-color:#e5e7eb;}
td.cfu-when{white-space:nowrap;font-variant-numeric:tabular-nums;}
.cfu-ago{display:block;font-size:11px;color:var(--muted-foreground,#6b7280);}
.cfu-pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap;}
.cfu-pill--green{background:#e6f7ec;color:#137a3a;border:1px solid #bfe8cd;}
.cfu-pill--gray{background:#f3f4f6;color:#6b7280;border:1px solid #e5e7eb;}
.cfu-pill--amber{background:#fff7e6;color:#9a5b00;border:1px solid #f5d38a;}
.cfu-pill--violet{background:#f1edff;color:#4c33b8;border:1px solid #dcd3fb;}
.cfu-pill--blue{background:#eef4ff;color:#1e40af;border:1px solid #d6e3fb;}
.cfu-pill--faint{background:transparent;color:#9aa3b2;border:1px dashed #d1d5db;font-weight:500;}
td.cfu-buyer{white-space:nowrap;}
.cfu-more{text-align:center;padding:10px 0 2px;}
.cfu-more .sl-btn{font-size:12.5px;}
/* 260916-cfu END */

/* 260916-sdui START — Survey Deep-Dive UI fixes
   (1) Section A rows still matched the OLD 6-column grid rule (.ezz-dist-row) from the table-era
       layout, so the answer label was squeezed to 0px and the stats text sat under the bar.
   (2) Section C SVG charts stretched to the full 1088px column (viewBox 700–760 wide) so every
       label rendered ~1.5x — cap them near their native width. */
.ezz-dist-bars .ezz-dist-row {
  display: block;
  padding: 2px 4px 0;
  border-bottom: 0;
  border-radius: 6px;
}
.ezz-dist-bars .ezz-dist-row:hover { background: rgba(59,130,246,.06); }
.ezz-dist-bars .bars-row__top { align-items: baseline; flex-wrap: wrap; row-gap: 2px; }
.ezz-dist-bars .bars-row__name { flex: 1 1 auto; min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
.ezz-dist-bars .bars-row__value { flex: 0 0 auto; margin-left: auto; }
.corr-chart-card { max-width: 820px; }
.corr-chart-card .eaz-svg { max-width: 820px; }
.corr-chart-card h3 { margin-top: 6px; }
/* 260916-sdui END */

/* 260916-sdui2 START — Show % by bucket: the 40%/65% reference-line labels were drawn at y=padT+10,
   right on top of the first bar, and duplicate the axis ticks already printed above. Hide them. */
.eaz-showpct-svg .eaz-ref-label { display: none; }
/* 260916-sdui2 END */

/* 260916-sdd START — Survey Deep-Dive Section C ranked-answers table + KPI lead-quality card */
.sdd-scroll { overflow-x: auto; }
.sdd-table { min-width: 760px; }
.sdd-table td { padding: 9px 12px; border-bottom: 1px solid #eef1f5; vertical-align: middle; font-size: 13px; }
.sdd-table th.sdd-num, .sdd-table td.sdd-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sdd-table th { padding-left: 12px; padding-right: 12px; }
.sdd-rank-n { width: 28px; color: #8a93a4; font-variant-numeric: tabular-nums; }
.sdd-answer { font-weight: 500; color: #1f2937; line-height: 1.3; }
.sdd-q { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; margin-right: 6px; vertical-align: 1px; }
.sdd-q--income    { background: #e7f6ee; color: #1d6f43; }
.sdd-q--commit    { background: #eef4ff; color: #1e40af; }
.sdd-q--capital   { background: #fef4e2; color: #9a6a12; }
.sdd-q--challenge { background: #f1edff; color: #4c33b8; }
.sdd-muted { color: #8a93a4; font-size: 11.5px; font-weight: 400; }
.sdd-mixcell { min-width: 140px; }
.sdd-mix { display: flex; height: 9px; border-radius: 4px; overflow: hidden; background: #eef1f6; width: 100%; }
.sdd-mix span { display: block; }
.sdd-row--drill { cursor: pointer; }
.sdd-row--drill:hover td { background: rgba(59,130,246,.06); }
.sdd-row--thin td { opacity: .55; }
.sdd-row--thin .sdd-answer { font-weight: 400; }
.sdd-divider td { background: #f7f9fc; color: #8a93a4; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; padding: 7px 12px; }
/* KPI card */
#sdd-grade { font-size: 12px; font-weight: 400; line-height: 1.35; margin-top: 4px; }
.sdd-grade-bar { display: flex; height: 12px; border-radius: 5px; overflow: hidden; background: #eef1f6; margin: 2px 0 7px; }
.sdd-grade-bar span { display: block; }
.sdd-grade-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: #4b5563; }
.sdd-grade-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.sdd-grade-legend b { font-weight: 700; color: #1f2937; }
.sdd-grade-sub, .sdd-grade-empty { color: #8a93a4; font-size: 11px; margin-top: 4px; }
/* 260916-sdd END */

/* 260916-dui START — Cold Call Team (#view-dialer) UI cleanup. CSS-only, appended. */
/* 1. KPI strip: 7 cards on one row. The house .dash-kpi-row > .kpi-card min-width:185px
      wrapped Avg talk + Active agents onto a second row as two half-width cards. */
#dlr-kpi-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;}
#dlr-kpi-row > .kpi-card{min-width:0;padding:16px 14px 12px;gap:8px;}
#dlr-kpi-row .kpi-card__value{font-size:22px;letter-spacing:-0.03em;white-space:nowrap;}
#dlr-kpi-row .kpi-card__label{line-height:1.3;}
@media (max-width:1380px){#dlr-kpi-row{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (max-width:760px){#dlr-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr));}}
/* 2. Activity by Day + Best Hours to Dial sit side by side (each ~14 rows tall). */
#view-dialer .dash-panel-grid > .section-card:nth-child(2),
#view-dialer .dash-panel-grid > .section-card:nth-child(3){flex:1 1 calc(50% - 8px);min-width:0;}
@media (max-width:1100px){
  #view-dialer .dash-panel-grid > .section-card:nth-child(2),
  #view-dialer .dash-panel-grid > .section-card:nth-child(3){flex:1 1 100%;}
}
#dlr-byday,#dlr-byhour{gap:11px;}
/* 3. Disposition Mix: 18 one-line rows → two columns. */
#dlr-dispo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;row-gap:11px;}
@media (max-width:900px){#dlr-dispo{grid-template-columns:minmax(0,1fr);}}
/* 4. Section headers: title never wraps ("NUMBER HEALTH — HUMAN / DIALER"); the meta line
      shrinks and right-aligns instead. */
#view-dialer .section-card__title{white-space:nowrap;flex:0 0 auto;}
#view-dialer .section-card__header .widget-meta{flex:1 1 auto;min-width:0;text-align:right;line-height:1.35;}
/* 5. Call Explorer filter row: .sl-filters is only styled under #view-sales-log /
      #view-call-log / #view-commissions, so the dialer's selects rendered as bare browser
      controls. Mirror the house look. */
#view-dialer .sl-filters{display:flex;gap:12px 16px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
#view-dialer .sl-filters label{display:flex;gap:7px;align-items:center;font-size:12.5px;font-weight:500;color:#6c7689;}
#view-dialer .sl-filters select,
#view-dialer .sl-filters input[type=text]{-webkit-appearance:none;appearance:none;background:#fff;color:#1f2937;border:1px solid #e7ebf2;border-radius:8px;padding:6px 10px;font-size:13px;font-family:inherit;line-height:1.3;min-width:160px;}
#view-dialer .sl-filters select{padding-right:28px;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236c7689' stroke-width='1.5' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 10px center;}
#view-dialer .sl-filters select:hover,
#view-dialer .sl-filters input[type=text]:hover{border-color:#c9d3e3;}
#view-dialer .sl-filters select:focus,
#view-dialer .sl-filters input[type=text]:focus{outline:none;border-color:#155eef;box-shadow:0 0 0 3px rgba(21,94,239,.12);}
#view-dialer .sl-filters input[type=text]::placeholder{color:#9aa3b5;}
/* 6. Call Explorer rows a touch denser (house td is 13px 18px → 50px rows). */
#dlr-calls-table td{padding-top:10px;padding-bottom:10px;}
#dlr-calls-pager{margin-top:12px;}
/* 260916-dui END */

/* ── 260917-obl BEGIN: CEO Onboarding Links tab ─────────────────────────────────────────────── */
#view-onboarding-links .obl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
#view-onboarding-links .obl-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #475467; }
#view-onboarding-links .obl-dot { width: 10px; height: 10px; border-radius: 50%; background: #98a2b3; display: inline-block; }
#view-onboarding-links .obl-dot--on { background: #12b76a; box-shadow: 0 0 0 3px rgba(18,183,106,.18); }
#view-onboarding-links .obl-dot--off { background: #f04438; box-shadow: 0 0 0 3px rgba(240,68,56,.18); }
#view-onboarding-links .obl-dot--wait { background: #98a2b3; }
#view-onboarding-links .obl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
@media (max-width: 1100px) { #view-onboarding-links .obl-grid { grid-template-columns: 1fr; } }
#view-onboarding-links .obl-card { border-top: 4px solid #98a2b3; }
#view-onboarding-links .obl-card--closer { border-top-color: #2e90fa; }
#view-onboarding-links .obl-card--setter { border-top-color: #7a5af8; }
#view-onboarding-links .obl-card .section-card__header { display: flex; align-items: center; justify-content: space-between; }
#view-onboarding-links .obl-badge { font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; color: #fff; background: #98a2b3; }
#view-onboarding-links .obl-badge--closer { background: #2e90fa; }
#view-onboarding-links .obl-badge--setter { background: #7a5af8; }
#view-onboarding-links .obl-lead { margin: 0 0 12px; font-size: 14px; color: #344054; line-height: 1.5; }
#view-onboarding-links .obl-linkrow { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
#view-onboarding-links .obl-url {
  flex: 1 1 320px; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
  padding: 10px 12px; border: 1px solid #d0d5dd; border-radius: 8px; background: #f9fafb; color: #101828;
}
#view-onboarding-links .obl-url:focus { outline: 2px solid #2e90fa; outline-offset: 1px; background: #fff; }
#view-onboarding-links .obl-copy, #view-onboarding-links .obl-open { white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; }
#view-onboarding-links .obl-copy.is-done { background: #12b76a; border-color: #12b76a; color: #fff; }
#view-onboarding-links .obl-copy.is-fail { background: #f04438; border-color: #f04438; color: #fff; }
#view-onboarding-links .obl-meta { margin-top: 10px; font-size: 12px; color: #667085; }
#view-onboarding-links .obl-how .widget-body { font-size: 14px; color: #344054; }
#view-onboarding-links .obl-steps { margin: 0 0 14px; padding-left: 20px; line-height: 1.6; }
#view-onboarding-links .obl-steps li { margin-bottom: 4px; }
#view-onboarding-links .obl-fallback { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px dashed #d0d5dd; border-radius: 8px; background: #fcfcfd; }
#view-onboarding-links .obl-fallback__label { font-size: 13px; color: #475467; }
#view-onboarding-links .obl-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; font-weight: 700; color: #101828; background: #fff; border: 1px solid #d0d5dd; border-radius: 6px; padding: 4px 10px; }
#view-onboarding-links .sl-btn--sm { padding: 4px 10px; font-size: 12px; }
#view-onboarding-links .obl-note { margin: 12px 0 0; font-size: 12px; color: #667085; }
#view-onboarding-links .obl-note code { font-family: ui-monospace, Menlo, Consolas, monospace; }
#view-onboarding-links .obl-err { padding: 14px; border-radius: 8px; background: #fef3f2; color: #b42318; font-size: 13px; margin-bottom: 16px; }
/* 260917-obl END */

/* ── 260919-ans BEGIN: CEO Answer Rate tab ──────────────────────────────────────────────
   Source: ~/code/mfs/ceo-answer-rate-260919-ans/ans-view.css. Reuses the house .cfu-seg /
   .cfu-how / .cfu-pill / .sortable-table classes (260916-cfu) rather than re-inventing them —
   only the answer-rate-specific bits (KPI accents, mix bar, funnel/rep table numerics) are new. */
#view-answer-rate{--ans-answer:#0f9f6e;--ans-vm:#c7ced9;--ans-screen:#f5b942;--ans-noans:#e0645a;--ans-notx:#9aa3b2;--ans-pending:#d1d5db;}
.ans-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:14px;}
.ans-recon{flex:1 1 600px;font-size:13.5px;line-height:1.5;color:var(--foreground,#0f1a33);}
.ans-top__actions{display:flex;align-items:center;gap:10px;}
.ans-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.ans-kpis > .kpi-card{min-width:0;}
.ans-kpis .kpi-card--booked .kpi-card__value{color:#047857;}
.ans-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.sortable-table th.ans-num{text-align:right;}
/* verdict mix bar */
.ans-mix-wrap{display:flex;flex-direction:column;gap:10px;}
.ans-mix-row{display:flex;align-items:center;gap:10px;}
.ans-mix-row__label{width:110px;flex:0 0 auto;font-size:12.5px;color:var(--muted-foreground,#6b7280);}
.ans-mix-bar{flex:1 1 auto;display:flex;height:18px;border-radius:5px;overflow:hidden;background:#eef1f6;min-width:80px;}
.ans-mix-bar > i{display:block;height:100%;}
.ans-mix-bar--answer{background:var(--ans-answer);} .ans-mix-bar--vm{background:var(--ans-vm);}
.ans-mix-bar--screen{background:var(--ans-screen);} .ans-mix-bar--noans{background:var(--ans-noans);}
.ans-mix-row__total{width:70px;flex:0 0 auto;text-align:right;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--muted-foreground,#6b7280);}
.ans-mix-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11.5px;color:var(--muted-foreground,#6b7280);margin-top:4px;}
.ans-mix-legend span{display:inline-flex;align-items:center;gap:6px;}
.ans-sw{width:10px;height:10px;border-radius:2px;display:inline-block;}
.ans-sw--answer{background:var(--ans-answer);} .ans-sw--vm{background:var(--ans-vm);}
.ans-sw--screen{background:var(--ans-screen);} .ans-sw--noans{background:var(--ans-noans);}
.ans-sw--notx{background:var(--ans-notx);} .ans-sw--pending{background:var(--ans-pending);}
/* by-funnel / by-rep tables */
table#ans-by-funnel tbody td:first-child,table#ans-by-rep tbody td:first-child{font-weight:500;white-space:nowrap;}
table#ans-by-funnel thead th[data-k],table#ans-by-rep thead th[data-k]{cursor:pointer;user-select:none;}
table#ans-by-funnel thead th[data-k].cfu-sort::after,table#ans-by-rep thead th[data-k].cfu-sort::after{content:" \25BE";opacity:.7;}
table#ans-by-funnel thead th[data-k].cfu-sort.cfu-asc::after,table#ans-by-rep thead th[data-k].cfu-sort.cfu-asc::after{content:" \25B4";}
.ans-coverage-low{color:#9a5b00;font-weight:600;}
/* 260919-ans END */