/* =========================================================
   CRM — Relationship Intelligence
   People, companies, relationships, plans, and AI
   ========================================================= */

:root {
  --f: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wt-shell-width: 1480px;
  --ink: #161616; --ink2: #525252; --ink2-4: #6b7280; --ink3: #8d8d8d; --ink4: #c6c6c6;
  --wt-neutral-bg: #f4f4f4;
  --bg2: #f8fafc;
  --surf: #ffffff; --border: #eef0f3; --border-s: #f6f7f9;
  --radius: 16px; --radius-sm: 10px;
  --c-green: #16a34a;  --c-green-bg: #defbe6;  --c-green-soft: #a7f0ba;
  --c-yellow: #f59e0b; --c-yellow-bg: #fef3c7; --c-yellow-soft: #fde68a;
  --c-red: #ef4444;    --c-red-bg: #fff1f1;    --c-red-soft: #fecdd3;
  --c-blue: var(--wt-theme-primary, #004b7c); --c-blue-bg: var(--wt-theme-primary-mist, #e6f3ff); --c-blue-soft: var(--wt-theme-primary-soft, #cbd5f5);
  --c-purple: #7c3aed; --c-purple-bg: #f5f3ff; --c-purple-soft: #c4b5fd;
  --c-teal: #0d9488;   --c-teal-bg: #f0fdfa;
  /* ── Shadow scale (matches Work hub) ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03);
  --shadow-md: 0 4px 14px rgba(0,0,0,.06), 0 1.5px 5px rgba(0,0,0,.03);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.04);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  /* ── Spring easing ── */
  --ease-spring: cubic-bezier(.22,1,.36,1);
  --wt-transition: 150ms cubic-bezier(.2,.8,.2,1);
}

html[data-theme="dark"] {
  --ink: #f8fafc; --ink2: #cbd5e1; --ink2-4: #94a3b8; --ink3: #64748b; --ink4: #475569;
  --wt-neutral-bg: #0f172a;
  --bg2: #0b1220;
  --surf: #111827; --border: #243244; --border-s: #1f2937;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.18);
  --shadow-md: 0 4px 14px rgba(0,0,0,.32), 0 1.5px 5px rgba(0,0,0,.2);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.24);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.44), 0 4px 12px rgba(0,0,0,.28);
}

html[data-theme="dark"] .ph-nav-wrap {
  background: linear-gradient(180deg, rgba(17,24,39,0.98), rgba(15,23,42,0.94));
}

html[data-theme="dark"] .ph-nav-btn:not(.is-active) { color: #cbd5e1 !important; }
html[data-theme="dark"] .ph-nav-btn:not(.is-active):hover { color: #f8fafc !important; background: rgba(255,255,255,.08) !important; }

html[data-theme="light"] {
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

/* ── Animations ── */
@keyframes crmFadeUp  { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes crmSlideIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes crmCardIn  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes crmFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes crmScorePop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
@keyframes crmShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ───────────────────────────────────────────────────────────────
   MODERN SKELETON LOADERS
   Shown while a data source is still in flight (cache-miss cold load)
   so views read as "loading" instead of flashing an empty "No X yet"
   state. Driven from JS (crmSkel* builders) — see crm.js.
   ─────────────────────────────────────────────────────────────── */
.crm-skel {
  background-color: #e9edf1;
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: crmShimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}
.crm-skel-list { display: flex; flex-direction: column; }
.crm-skel-row {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border-bottom: 1px solid var(--border-s, #f1f3f5);
}
.crm-skel-row-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.crm-skel-avatar { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; }
.crm-skel-pill { width: 60px; height: 22px; border-radius: 999px; flex: 0 0 auto; }

.crm-skel-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 14px; padding: 4px 2px;
}
.crm-skel-card {
  border: 1px solid var(--border, #e0e0e0); border-radius: var(--radius-sm, 12px);
  padding: 16px; display: flex; flex-direction: column; gap: 11px;
  background: var(--surf, #fff);
}
.crm-skel-card-head { display: flex; align-items: center; gap: 12px; }
.crm-skel-logo { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; }
.crm-skel-card-foot { display: flex; gap: 8px; margin-top: 3px; }

.crm-skel-aside { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.crm-skel-aside-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; }
.crm-skel-dot { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) { .crm-skel { animation: none; } }

html { overflow: visible !important; }
html, body {
  background: var(--wt-neutral-bg);
  font-family: var(--f);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════
   PAGE SHELL
   ═══════════════════════════════════ */
.wt-page-shell { padding: 0 0 44px; min-height: 100vh; }
.wt-page-frame { max-width: none; margin: 0; padding: 20px 24px 60px 24px; width: 100%; box-sizing: border-box; }
.wt-page-bg { width: 100%; overflow: visible; }

/* ── The bar has to end where the page ends ──────────────────────────────
   base.css and topnav.js give the bar `max-width: var(--wt-shell-width)`
   + `margin: 0 auto`, and this file sets --wt-shell-width to 1480px. But
   the line above deliberately makes the CRM's content FULL WIDTH
   (max-width:none, 24px gutters). So the bar was centred inside 1480 while
   everything under it ran to the edge: on a 1900px window that insets the
   logo and the avatar by ~190px each side, and the account button reads as
   floating in the middle of the header instead of sitting at the corner.
   Tyler, 2026-08-03: "why does my profile picture in the header show up so
   far left."

   The gutters are matched to .wt-page-frame's 24px rather than left at the
   bar's own 32px, because "nearly aligned" is the thing you keep noticing.
   Scoped to the CRM on purpose — the AI-Hub pages pin 1620px centred in
   their own CSS and their content is capped to match, so they already line
   up and must not be dragged wider.

   ⚠️ Keep this identical to MRG-sandbox's copy. Both repos still deploy the
   whole site to the same SWA (nice-island-0bc7ea50f) and the last push wins,
   so a block that exists in only one of them reverts every other deploy.

   ⚠️ This used to be TWO comments, and the first one had already closed before
   the paragraph below it — leaving that paragraph sitting in the stylesheet as
   raw text, with a second, orphaned comment terminator after it. CSS
   error-recovery then skipped forward to the first semicolon it could find,
   which is the one inside the back-ticked `.ai-topnav-inner{…;margin:0 auto}`
   below, so the three rules this note exists to protect were being DROPPED by
   the parser on the live site. One comment, one terminator — and never write a
   bare terminator inside comment prose, which is how it happened. Check this
   file with a real parse, not by eye.

   ⚠️ !important is LOAD-BEARING, do not tidy it away. topnav.js builds its
   CSS as a string and `document.head.appendChild(style)` at RUNTIME
   (topnav.js:128 + :257), so its `.ai-topnav-inner { max-width:
   var(--wt-shell-width); margin: 0 auto }` lands AFTER this stylesheet's
   <link>. Identical specificity, later wins — so the un-!important version
   of these two lines lost every time and the bar stayed pinned to 1480px
   centred. Measured at a 1882px viewport: without !important the avatar sat
   201px off the right edge; with it, 32px. That is why the 2026-08-03 fix
   looked like it had done nothing. Line 139 below already had to do this. */
.ai-topnav { padding: 0 24px !important; }
.ai-topnav-inner { max-width: none !important; margin: 0 !important; width: 100% !important; }
#wtHeaderContainer { max-width: var(--wt-bar-max-width, 1620px) !important; margin: 0 auto !important; padding: 0 20px !important; width: 100% !important; box-sizing: border-box !important; }

/* ── …and the empty husk that was still holding the avatar off the corner ──
   layout-overhaul.js hoists the CRM's own `.ph-nav` tab strip up into the bar.
   mrg-header.js then draws its own `.mrg-hd-tabs` from those tabs and, seeing
   the originals already inside `.ai-topnav-inner`, declines to move them again
   (mrg-header.js: `if (tabs.closest(".ai-topnav-inner")) tabs = null`). The
   emptied `.ph-nav` stays where it is — LAST child of the bar, after the
   account group, still `flex: 1 1 auto`. MEASURED: 328px of nothing to the
   right of the face, which is the rest of why it reads as floating in the
   middle of the header rather than sitting in the corner.

   The sibling combinator is the whole point: it only fires where mrg-header
   has already built its own right-hand group, so a page still using the plain
   hoisted tab strip is untouched. Keep identical to mrg-crm's copy. */
.ai-topnav-inner .mrg-hd-right ~ .ph-nav,
.ai-topnav-inner .mrg-hd-acts ~ .ph-nav { display: none !important; }
.ai-topnav-inner .mrg-hd-right { margin-left: auto !important; }


body.wt-page-ready .wt-page-bg {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* ═══════════════════════════════════
   SHELL
   ═══════════════════════════════════ */
.ch-shell {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 56px);
}

/* ═══════════════════════════════════
   NAV BAR (pill-tab pattern)
   ═══════════════════════════════════ */
.ph-nav-wrap {
  width: 100%; max-width: none; margin: 0; padding: 0;
  position: sticky; top: 0; z-index: 1100;
  background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(248,250,252,0.95));
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: visible; margin-bottom: 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.ph-nav {
  display: flex; flex-wrap: nowrap; gap: 4px; align-items: center; justify-content: center;
  background: transparent; border: none; padding: 8px 16px;
  flex: 1 1 auto; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ph-nav::-webkit-scrollbar { display: none; }
.ph-nav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #64748b;
  cursor: pointer;
  background: none;
  border: none;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .15s ease;
  font-family: var(--f);
  line-height: 1;
  user-select: none;
}
.ph-nav-btn + .ph-nav-btn::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 50%;
  width: 1px;
  height: 14px;
  transform: translateY(-50%);
  background: #cbd5e1;
  opacity: .45;
  transition: opacity .2s ease;
}
.ph-nav-btn:hover { color: #1e293b; background: rgba(15,23,42,.045); transform: translateY(-0.5px); }
.ph-nav-btn:active { transform: scale(.97); }
.ph-nav-btn:not(.is-active) {
  color: #64748b !important;
  background: none !important;
  box-shadow: none !important;
}
.ph-nav-btn:not(.is-active):hover {
  color: #1e293b !important;
  background: rgba(15,23,42,.045) !important;
}
.ph-nav-btn.is-active {
  color: #fff !important;
  background: var(--c-blue) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c-blue) 35%, transparent) !important;
  font-weight: 700;
  border-radius: 8px;
}
.ph-nav-btn.is-active:hover { background: var(--c-blue) !important; filter: brightness(1.1); }
.ph-nav-btn.is-active::before { display: none; }
.ph-nav-btn.is-active + .ph-nav-btn::before { display: none; }

/* Top-nav alert dot — used by Intelligence to surface pending review count */
.ph-nav-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-red);
  margin-left: 6px;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, .18);
  animation: phNavDotPulse 2.4s ease-in-out infinite;
}
@keyframes phNavDotPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(239, 68, 68, .18); }
  50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, .35); }
}

/* ═══ NEEDS REVIEW QUEUE ═══ */
.crm-review-queue-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0 16px;
}
.crm-review-item {
  border: 1px solid var(--bd, #e2e8f0);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.crm-review-head {
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid var(--bd, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.crm-review-head-title { font-weight: 600; font-size: 13px; color: var(--ink1, #0f172a); }
.crm-review-head-when  { font-size: 11.5px; color: var(--ink3, #64748b); }
.crm-review-pair {
  padding: 14px;
  border-top: 1px dashed #e2e8f0;
}
.crm-review-pair:first-child { border-top: 0; }
.crm-review-pair-detail {
  font-size: 12px;
  color: var(--ink2, #334155);
  margin-bottom: 10px;
}
.crm-review-pair-cards {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
}
.crm-review-pair-vs {
  align-self: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink3, #64748b);
  background: #e2e8f0;
  border-radius: 999px;
  padding: 2px 8px;
}
.crm-review-person {
  border: 1px solid #eef0f3;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fafbfc;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.crm-review-person--missing {
  background: #fef2f2;
  border-color: #fecaca;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
}
.crm-review-person-name { font-weight: 600; font-size: 13px; color: var(--ink1, #0f172a); margin-bottom: 4px; }
.crm-review-person-row { font-size: 12px; color: var(--ink2, #334155); display: flex; gap: 6px; }
.crm-review-person-label { display: inline-block; min-width: 64px; color: var(--ink3, #64748b); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.crm-review-open-btn { margin-top: 6px; align-self: flex-start; font-size: 11.5px; padding: 4px 8px; }
.crm-review-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .crm-review-pair-cards { grid-template-columns: 1fr; }
  .crm-review-pair-vs { justify-self: center; }
}

/* ═══════════════════════════════════
   HUB LAYOUT (sidebar + content grid)
   ═══════════════════════════════════ */
.ph-hub {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: start;
  min-height: 500px;
}
.ph-content {
  min-width: 0;
  padding: 16px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── LEFT SIDEBAR ── */
.ph-sidebar {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  position: sticky;
  top: 60px;
  align-self: start;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  z-index: 2;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  animation: crmSlideIn .35s var(--ease-spring) both;
  gap: 2px;
}
.ph-sidebar::-webkit-scrollbar { width: 3px; }
.ph-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.ph-sb-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink3);
  padding: 12px 10px 4px;
  user-select: none;
}
.ph-sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  font-family: var(--f);
  width: 100%;
  white-space: nowrap;
  transition: all 0.18s cubic-bezier(.4,0,.2,1);
}
.ph-sb-item:hover {
  background: var(--border-s);
  color: var(--ink);
  transform: translateY(-1px);
}
.ph-sb-item.is-active {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  color: var(--c-blue);
  font-weight: 700;
  position: relative;
}
.ph-sb-item.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--c-blue);
}
.ph-sb-item.is-active .ph-sb-badge { background: var(--c-blue-bg); color: var(--c-blue); }
.ph-sb-item.is-active .ph-sb-icon { color: var(--c-blue); }
.ph-sb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.ph-sb-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ph-sb-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  flex-shrink: 0;
  background: var(--c-blue);
  color: #fff;
}
.ph-sb-badge:empty { display: none; }
.ph-sb-badge--warn { background: var(--c-yellow); }
.ph-sb-badge--danger { background: var(--c-red); }
.ph-sb-badge--muted {
  background: var(--border-s);
  color: var(--ink3);
  font-weight: 700;
}
.ph-sb-divider {
  height: 1px;
  background: var(--border-s);
  margin: 4px 10px;
}
.ph-sb-empty {
  display: block;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--ink4);
}
.ph-sb-item--action {
  color: var(--c-blue);
  font-weight: 600;
  opacity: .85;
}
.ph-sb-item--action:hover { opacity: 1; }

.ph-sb-item.ph-qa-btn {
  background: transparent;
  color: var(--ink3);
  border-radius: 6px;
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: 10.5px;
  padding: 5px 8px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.ph-sb-item.ph-qa-btn:hover {
  background: var(--c-blue-bg);
  color: var(--c-blue);
  border-color: var(--c-blue);
}
.ph-sb-item.ph-qa-btn + .ph-sb-item.ph-qa-btn { margin-top: 0 !important; }
.ph-sb-sort-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 2px;
}
.ph-sb-sort-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink3);
  white-space: nowrap;
}
.ph-sb-sort-select {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--ink2);
  font-size: 10.5px;
  font-family: var(--f);
  cursor: pointer;
  transition: border-color .15s ease;
}
.ph-sb-sort-select:hover { border-color: var(--ink3); }

/* ═══════════════════════════════════
   VIEW CONTAINERS
   ═══════════════════════════════════ */
.ch-view {
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s var(--ease-spring), transform .3s var(--ease-spring);
}
.ch-view--active {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  animation: crmFadeUp .35s var(--ease-spring) both;
}

/* ═══════════════════════════════════
   ACTION BAR
   ═══════════════════════════════════ */
.ch-action-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 0 4px;
}
.ch-action-bar-left { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ch-action-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Search ── */
/* Flex layout — icon · input · clear are siblings with a gap so the
   magnifier can never overlap the text. Border + focus ring on the wrap;
   the input is borderless/transparent. */
/* Search bar — byte-identical to the VisionOne CRM (border on the input, icon
   absolutely positioned, subtle blue focus). The brand-override input rule is
   exempted for .ch-search below so THIS styling actually wins. */
.ch-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 360px;
}
.ch-search-icon {
  position: absolute;
  left: 12px;
  color: var(--ink3);
  pointer-events: none;
  flex-shrink: 0;
}
.ch-search {
  width: 100%;
  padding: 8px 32px 8px 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--f);
  font-size: 13px;
  color: var(--ink);
  background: var(--surf);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ch-search:focus {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-blue) 12%, transparent);
  background: #fff;
}
.ch-search::placeholder { color: var(--ink3); }
.ch-search-clear {
  position: absolute;
  right: 8px;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  color: var(--ink3);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color .15s, background .15s;
  padding: 0;
}
.ch-search-clear:hover { color: var(--ink); background: var(--border-s); }

/* ═══════════════════════════════════
   SCORECARDS (stats strip → card tiles)
   ═══════════════════════════════════
   VENDORED from the Production Schedule app — schedule.mrgcentral.net,
   `style.css` `.ax-card*` — which is THE MRG reference for scorecards.
   The CRM keeps its own class names because crm.js wires clicks/filters to
   them; only the look is vendored, name-for-name:
     .ch-stat       ↔ .ax-card         .ch-stat-head  ↔ .ax-card-head
     .ch-stat-icon  ↔ .ax-card-icon    .ch-stat-info  ↔ .ax-card-info
     .ch-stat-num   ↔ .ax-card-val     .ch-stat-label ↔ .ax-card-lbl
     .ch-stat-trend ↔ .ax-card-sub
   Two values are pinned to the Schedule's tokens instead of the CRM's,
   because the CRM's are what made these read wrong:
     radius 3px  (CRM --radius is 16px — a 16px-round white box hugging one
                  centred number is the "grey ring around the number")
     radius-sm 2px for the icon tile.
   Left-aligned, icon + info in a head row, value, label, sub-line: that is
   the reference card. If the Schedule's cards change, copy them again —
   do not tune these in isolation. */
.ch-stats-strip {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 4px;
  background: transparent;
  border: none;
  border-radius: 0;
  flex-wrap: wrap;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}
.ch-stats-strip::-webkit-scrollbar { display: none; }
.ch-stat {
  flex: 1 1 0;
  min-width: 150px;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 14px 14px 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--_sc, var(--c-blue)) 4%, var(--surf)), var(--surf));
  border: 1px solid var(--border-s);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all .35s var(--ease-spring);
  animation: crmCardIn .35s var(--ease-spring) both;
}

/* ── A SCORECARD IS A CARD. IT IS NEVER A PILL. ───────────────────────
   A scorecard is a <button>, and dashboard-meta.js appends a stylesheet at
   RUNTIME whose selector is, in effect, "every button":

     .wt-ask-ai-fab, button:not(…):not(…)…
       { border-radius: var(--wt-theme-btn-radius, 12px) !important }

   and the MRG tenant's button radius is a capsule. Today's copy of that file
   carries `:not(.ch-stat)` so the strip is spared — but the <script> tag that
   loads it has no `?v=`, so a browser or a service worker holding yesterday's
   copy keeps stamping capsules onto a page whose CSS looks fixed. That is the
   state Tyler's complaint came from, on the fifth surface he has said it on:
   "why do all the scorecards have the pill effect? You keep bringing this
   back." It keeps coming back because nothing in THIS file is what puts it
   there.

   So do not rely on the exemption. The rule scores (0,5,1) — MEASURED, one,
   two and three classes all lose to it even with !important, and only an id
   wins. `#crmPage` is a pure CSS hook on <body>: nothing calls
   getElementById on it, it exists so this line can out-specify a stylesheet
   that has not been written yet. It goes on <body> rather than on the page
   shell so it also covers the strips crm.js builds inside body-level overlays
   (the review queue, the churn and scoring panels) — five of the CRM's stats
   strips are written by JS and only the five in CRM.html have ids of their own.

   ONLY the card box. The children keep their own shapes — the accent tile
   stays a 2px square, the "i" stays a circle — so squaring the card costs
   nothing else. See the note on .ph-nav above for the other half of the same
   class of bug: a rule that arrives after yours always wins.
   Keep identical to MRG-sandbox's copy. */
#crmPage .ch-stat,
#crmPage .ch-stats-strip .ch-stat { border-radius: 3px !important; }
/* Full-width top accent — every card gets one, which is what anchors the
   card visually so its 1px edge stops reading as an outline. */
.ch-stat::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3.5px;
  background: linear-gradient(90deg, var(--_sc, var(--c-blue)), color-mix(in srgb, var(--_sc, var(--c-blue)) 70%, #fff));
}
.ch-stat:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.ch-stat:active { transform: scale(.99); transition-duration: .08s; }
.ch-stat:nth-child(1) { --_sc: var(--c-blue); animation-delay: 0s; }
.ch-stat:nth-child(3) { --_sc: var(--c-green); animation-delay: .05s; }
.ch-stat:nth-child(5) { --_sc: var(--c-purple); animation-delay: .1s; }
.ch-stat:nth-child(7) { --_sc: var(--c-yellow); animation-delay: .15s; }

/* Head row — accent-tinted icon tile left, "i" explainer right. Built by
   crm.js decorateStatCards() so every strip gets it from one place. */
.ch-stat-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.ch-stat-icon {
  width: 22px; height: 22px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--_sc, var(--c-blue)) 14%, transparent);
  color: var(--_sc, var(--c-blue));
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.ch-stat-icon svg { width: 13px; height: 13px; }
.ch-stat-info {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink3);
  font-size: 10px; font-weight: 900;
  font-style: italic;
  font-family: Georgia, serif;
  display: flex; align-items: center; justify-content: center;
  cursor: help;
  border: 1px solid var(--border);
  transition: all .15s ease;
  flex: none;
}
.ch-stat-info:hover {
  background: var(--c-blue);
  color: #fff;
  border-color: var(--c-blue);
}
.ch-stat-num {
  font-size: 28px;
  font-weight: 900;
  color: var(--_sc, var(--ink));
  line-height: 1;
  letter-spacing: -.5px;
}
.ch-stat-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink3);
  margin-top: 6px;
}
/* Sub-line under the label — the reference card's third line. crm.js writes
   "N active 7d" / "stale" here for the People strip; strips that write nothing
   simply collapse to no height. */
.ch-stat-trend {
  font-size: 10.5px;
  color: var(--ink3);
  font-weight: 500;
  margin-top: 2px;
}
/* Zero-value cards mute, exactly like the reference's .ax-card.is-zero.
   Toggled by crm.js syncStatZeroStates(). Doubled selectors so muting
   outranks the tone variants below (.ch-stat--warn .ch-stat-num etc.)
   regardless of source order. */
.ch-stat.ch-stat--zero { opacity: .55; }
.ch-stat.ch-stat--zero .ch-stat-num { color: var(--ink4); }
.ch-stat.ch-stat--zero::before { background: var(--ink4); }
.ch-stat--warn { --_sc: var(--c-red); }
.ch-stat--warn .ch-stat-num { color: var(--c-red); }
.ch-stat--success { --_sc: var(--c-green); }
.ch-stat--success .ch-stat-num { color: var(--c-green); }
button.ch-stat { font-family: inherit; color: inherit; text-align: left; }
.ch-stat--selected {
  border-color: color-mix(in srgb, var(--_sc, var(--c-blue)) 30%, var(--border));
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--_sc, var(--c-blue)) 15%, transparent), var(--shadow-md);
}
.ch-stat--selected.ch-stat--zero { opacity: 1; }
.ch-stat-divider {
  display: none;
}
@media(max-width:640px) { .ch-stat { min-width: calc(50% - 5px); } }

/* A strip of only two or three tiles spans the row. The 460px cap above stops
   a lone tile becoming a billboard, but on a short strip it stranded the row
   at half width with dead space to the right of the last card. Opt in per
   strip, so the five-tile strips keep their cap. */
.ch-stats-strip--fill { padding: 4px 0; }   /* flush with the card below */
.ch-stats-strip--fill .ch-stat { max-width: none; }

/* Filter status strip — surfaces the "X of Y / Clear filter" affordance. */
.crm-filter-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  margin: 0 4px 12px;
  background: color-mix(in srgb, var(--c-blue) 6%, var(--surf));
  border: 1px solid color-mix(in srgb, var(--c-blue) 20%, var(--border));
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--ink2);
  animation: crmFadeUp .25s var(--ease-spring) both;
}
.crm-filter-status-label strong { color: var(--ink); }
.crm-filter-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surf);
  border: 1px solid var(--border);
  font-size: 11.5px;
  margin: 0 2px;
}
.crm-filter-clear-btn {
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--surf);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
  cursor: pointer;
  transition: all .18s var(--ease-spring);
}
.crm-filter-clear-btn:hover { border-color: var(--c-blue); color: var(--c-blue); }

/* "Showing X of Y — Clear filters" inline banner. Reuses .crm-filter-status
   container styling for the blue-tinted bar. */
.crm-filter-banner-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%;
}
.crm-filter-banner-text { color: var(--ink2); }
.crm-filter-banner-text b { color: var(--ink); font-weight: 600; }
.crm-filter-banner-clear {
  padding: 5px 12px; border-radius: 8px;
  background: var(--surf); border: 1px solid var(--border); color: var(--ink2);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all .18s var(--ease-spring); white-space: nowrap;
}
.crm-filter-banner-clear:hover { border-color: var(--c-blue); color: var(--c-blue); }

/* Inline empty state — lives inside a list container, not a dedicated slot. */
.ch-empty--inline {
  min-height: 220px;
  padding: 36px 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink) 2%, var(--surf));
}

/* Intelligence rebuild — ranked opportunities list */
.crm-intel-rank-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.crm-intel-rank-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all .2s var(--ease-spring);
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.crm-intel-rank-row:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: color-mix(in srgb, var(--c-blue) 30%, var(--border)); }
.crm-intel-rank-tier {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.crm-intel-rank-nba-row { margin-top: 4px; }
.crm-intel-rank-nba {
  display: inline-block;
  font-size: 11px;
  padding: 2px 7px;
  background: color-mix(in srgb, var(--c-green) 12%, transparent);
  color: var(--c-green);
  border-radius: 999px;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Weekly AI Summary card */
.crm-intel-summary-card {
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 18px 22px;
  margin-top: 14px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, .06));
}
html[data-theme="dark"] .crm-intel-summary-card { background: var(--surf); }

/* ─── MONTHLY SUMMARY HISTORY (dated, click-to-expand cards) ─── */
.crm-summary-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 16px 0 8px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .08);
}
html[data-theme="dark"] .crm-summary-toolbar {
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 4px 24px -8px rgba(0, 0, 0, .3);
}
.crm-summary-search-wrap { position: relative; flex: 1 1 280px; min-width: 220px; }
.crm-summary-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ink3, #94a3b8); pointer-events: none;
  transition: color .15s ease;
}
.crm-summary-search-wrap:focus-within .crm-summary-search-icon { color: var(--c-blue, #3b82f6); }
.crm-summary-search {
  width: 100%; padding: 10px 14px 10px 38px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: #fff; font: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink, #0f172a);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
html[data-theme="dark"] .crm-summary-search { background: rgba(255,255,255,.04); color: #f8fafc; }
.crm-summary-search::placeholder { color: var(--ink3, #94a3b8); font-weight: 400; }
.crm-summary-search:hover { border-color: color-mix(in srgb, var(--ink) 18%, transparent); }
.crm-summary-search:focus {
  border-color: var(--c-blue, #3b82f6);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-blue) 14%, transparent);
}
.crm-summary-range-chips {
  display: flex; gap: 2px; padding: 3px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
html[data-theme="dark"] .crm-summary-range-chips { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
.crm-summary-range-chip {
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 6px 14px; border: none; background: transparent;
  color: var(--ink3, #64748b); border-radius: 999px; cursor: pointer;
  transition: all .18s cubic-bezier(.16, 1, .3, 1);
  letter-spacing: -.005em;
}
.crm-summary-range-chip:hover { color: var(--ink, #0f172a); transform: translateY(-0.5px); }
.crm-summary-range-chip.is-active {
  background: #fff;
  color: var(--c-blue, #2563eb);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 2px 8px -2px rgba(59, 130, 246, .25);
}
html[data-theme="dark"] .crm-summary-range-chip.is-active {
  background: rgba(255,255,255,.14); color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.crm-summary-toolbar-spacer { flex: 1 1 0; min-width: 0; }
.crm-summary-expand-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 8px 14px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: #fff; color: var(--ink2, #334155); cursor: pointer;
  transition: all .18s cubic-bezier(.16, 1, .3, 1);
  letter-spacing: -.005em;
}
html[data-theme="dark"] .crm-summary-expand-toggle { background: rgba(255,255,255,.04); }
.crm-summary-expand-toggle:hover {
  border-color: var(--c-blue, #3b82f6);
  color: var(--c-blue, #2563eb);
  transform: translateY(-0.5px);
  box-shadow: 0 2px 10px -4px rgba(59, 130, 246, .35);
}
.crm-summary-expand-toggle:active { transform: translateY(0); }
.crm-summary-expand-toggle svg { transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.crm-summary-expand-toggle:hover svg { transform: scale(1.1); }

/* AI status pill */
.crm-ai-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.crm-ai-status-pill:hover { transform: translateY(-0.5px); box-shadow: 0 2px 8px rgba(15, 23, 42, .08); }
.crm-ai-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; position: relative; }
.crm-ai-status-pill--good { background: color-mix(in srgb, var(--c-green) 12%, transparent); color: #15803d; }
.crm-ai-status-pill--good .crm-ai-status-dot {
  background: var(--c-green, #22c55e);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-green) 22%, transparent);
}
.crm-ai-status-pill--good .crm-ai-status-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--c-green, #22c55e);
  animation: aiStatusPulse 2.4s ease-in-out infinite;
}
@keyframes aiStatusPulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 0;   transform: scale(2.2); }
}
.crm-ai-status-pill--warn { background: color-mix(in srgb, var(--c-yellow) 16%, transparent); color: #92400e; }
.crm-ai-status-pill--warn .crm-ai-status-dot { background: var(--c-yellow, #f59e0b); }
.crm-ai-status-pill--bad { background: color-mix(in srgb, var(--c-red) 14%, transparent); color: #b91c1c; }
.crm-ai-status-pill--bad .crm-ai-status-dot { background: var(--c-red, #ef4444); }
.crm-ai-status-pill--unknown { background: #f1f5f9; color: var(--ink3, #64748b); }
.crm-ai-status-pill--unknown .crm-ai-status-dot { background: #94a3b8; }

/* Year-group label inside the summary list */
.crm-summary-year-group { display: flex; flex-direction: column; gap: 10px; }
.crm-summary-year-group + .crm-summary-year-group { margin-top: 12px; }
.crm-summary-year-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink3, #64748b);
  padding: 4px 4px 0;
}

.crm-summary-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.crm-summary-card {
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
html[data-theme="dark"] .crm-summary-card { background: var(--surf); }
.crm-summary-card:hover { box-shadow: var(--shadow-md, 0 4px 14px rgba(15,23,42,.08)); border-color: color-mix(in srgb, var(--c-blue) 25%, var(--border, #e2e8f0)); }
.crm-summary-card-head {
  display: grid;
  grid-template-columns: 140px 1fr auto 28px;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 14px 18px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.crm-summary-card-date-block { display: flex; flex-direction: column; gap: 2px; }
.crm-summary-card-date {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  letter-spacing: -.01em;
}
.crm-summary-card-range {
  font-size: 11px;
  color: var(--ink3, #64748b);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.crm-summary-card-headline {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink2, #334155);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.crm-summary-card-stats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 320px;
}
.crm-summary-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--ink2, #334155);
  white-space: nowrap;
}
html[data-theme="dark"] .crm-summary-pill { background: rgba(255,255,255,.08); }
.crm-summary-pill--top {
  background: color-mix(in srgb, var(--c-green) 14%, transparent);
  color: var(--c-green);
}
.crm-summary-delta--up {
  background: color-mix(in srgb, var(--c-green) 14%, transparent);
  color: var(--c-green);
}
.crm-summary-delta--down {
  background: color-mix(in srgb, var(--c-red) 14%, transparent);
  color: var(--c-red);
}
.crm-summary-delta--flat {
  background: color-mix(in srgb, var(--c-yellow) 14%, transparent);
  color: var(--c-yellow);
}
.crm-summary-card-chev {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink3, #64748b);
  transition: transform .2s ease, color .2s ease;
}
.crm-summary-card.is-expanded .crm-summary-card-chev { transform: rotate(180deg); color: var(--c-blue); }
.crm-summary-card-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  padding: 0 22px;
  border-top: 1px solid transparent;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink, #0f172a);
  transition: grid-template-rows .35s cubic-bezier(.16, 1, .3, 1),
              opacity .25s ease,
              padding .35s ease,
              border-color .25s ease;
}
.crm-summary-card-body > * { min-height: 0; overflow: hidden; }
.crm-summary-card.is-expanded .crm-summary-card-body {
  grid-template-rows: 1fr;
  opacity: 1;
  padding: 16px 22px 20px;
  border-top-color: color-mix(in srgb, var(--ink) 6%, transparent);
}
.crm-summary-card.is-expanded .crm-summary-card-body > * { overflow: visible; }
.crm-summary-card-body-inner { display: block; }
.crm-summary-card-body h1,
.crm-summary-card-body h2,
.crm-summary-card-body h3 {
  margin: 16px 0 6px;
  color: var(--ink, #0f172a);
}
.crm-summary-card-body h2 { font-size: 14px; font-weight: 700; }
.crm-summary-card-body h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink2); }
.crm-summary-card-body ul,
.crm-summary-card-body ol { padding-left: 22px; margin: 6px 0 12px; }
.crm-summary-card-body li { margin-bottom: 4px; }
.crm-summary-card-body p { margin: 6px 0; }
.crm-summary-card-body strong { color: var(--ink, #0f172a); font-weight: 700; }
.crm-summary-card-foot {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in srgb, var(--ink) 10%, transparent);
  font-size: 11px;
  color: var(--ink3, #64748b);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.crm-summary-card-foot-meta { letter-spacing: .03em; text-transform: uppercase; }
.crm-summary-card-foot-source {
  font-size: 9.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  letter-spacing: .08em;
}
.crm-summary-card-foot-source--claude   { background: color-mix(in srgb, var(--c-blue) 14%, transparent); color: #1d4ed8; }
.crm-summary-card-foot-source--fallback { background: color-mix(in srgb, var(--c-yellow) 18%, transparent); color: #92400e; }
.crm-summary-card-foot-source--unknown  { background: #f1f5f9; color: #64748b; }

/* ─── Banner (fallback warning) ─── */
.crm-rep-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1px solid #fde68a;
  border-radius: 12px;
  box-shadow: 0 2px 8px -3px rgba(245, 158, 11, .25);
}
.crm-rep-banner-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: #fbbf24; color: #fff;
  border-radius: 10px;
  font-size: 18px;
  box-shadow: 0 2px 6px rgba(245, 158, 11, .35);
}
.crm-rep-banner-body { flex: 1; min-width: 0; }
.crm-rep-banner-title { font-size: 13px; font-weight: 700; color: #78350f; margin-bottom: 3px; }
.crm-rep-banner-text { font-size: 12.5px; line-height: 1.5; color: #92400e; }
.crm-rep-banner-text code {
  background: rgba(120, 53, 15, .08);
  padding: 1px 6px; border-radius: 4px;
  font-size: 11.5px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.crm-rep-banner-cta {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  background: #d97706;
  color: #fff;
  border: 0;
  cursor: pointer;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: all .15s ease;
  box-shadow: 0 2px 6px rgba(217, 119, 6, .35);
  font-family: inherit;
}
.crm-rep-banner-cta:hover { background: #b45309; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(217, 119, 6, .45); }
.crm-rep-banner-cta--alt {
  background: transparent;
  color: #92400e;
  border: 1px solid color-mix(in srgb, #92400e 35%, transparent);
  box-shadow: none;
}
.crm-rep-banner-cta--alt:hover {
  background: color-mix(in srgb, #92400e 8%, transparent);
  color: #78350f;
  box-shadow: none;
}

/* ─── Report container ─── */
.crm-rep {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ─── Executive Summary (featured prose block) ─── */
.crm-rep-exec {
  position: relative;
  padding: 20px 22px 22px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(14,165,233,.10), transparent 55%),
    linear-gradient(180deg, #f0f9ff, #ffffff);
  border: 1px solid #bae6fd;
  border-radius: 16px;
  box-shadow: 0 6px 22px -10px rgba(14, 165, 233, .25);
}
html[data-theme="dark"] .crm-rep-exec {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(14,165,233,.18), transparent 55%),
    linear-gradient(180deg, rgba(14,165,233,.06), rgba(255,255,255,.02));
  border-color: rgba(14, 165, 233, .28);
}
.crm-rep-exec-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.crm-rep-exec-icon {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #fff;
  border-radius: 9px;
  font-size: 16px;
  box-shadow: 0 4px 12px -2px rgba(14,165,233,.45);
}
.crm-rep-exec-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #0369a1;
}
html[data-theme="dark"] .crm-rep-exec-label { color: #7dd3fc; }
.crm-rep-exec-body p {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.62;
  color: #0f172a;
  letter-spacing: -.005em;
}
.crm-rep-exec-body p:last-child { margin-bottom: 0; }
html[data-theme="dark"] .crm-rep-exec-body p { color: #e2e8f0; }
.crm-rep-exec-body strong { color: #0c4a6e; font-weight: 700; }
html[data-theme="dark"] .crm-rep-exec-body strong { color: #bae6fd; }

/* ─── TL;DR callout ─── */
.crm-rep-tldr {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  box-shadow: 0 2px 8px -2px rgba(59, 130, 246, .15);
}
html[data-theme="dark"] .crm-rep-tldr {
  background: linear-gradient(135deg, rgba(59, 130, 246, .14), rgba(59, 130, 246, .06));
  border-color: rgba(59, 130, 246, .25);
}
.crm-rep-tldr-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: #3b82f6; color: #fff;
  border-radius: 10px;
  font-size: 18px;
  box-shadow: 0 2px 6px rgba(59, 130, 246, .35);
}
.crm-rep-tldr-content { flex: 1; min-width: 0; }
.crm-rep-tldr-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #1d4ed8;
  margin-bottom: 4px;
}
.crm-rep-tldr-text {
  font-size: 14px;
  line-height: 1.55;
  color: #0f172a;
  font-weight: 500;
  letter-spacing: -.01em;
}
html[data-theme="dark"] .crm-rep-tldr-text { color: #f1f5f9; }
.crm-rep-tldr-text strong { color: #1e3a8a; font-weight: 700; }

/* ─── Section cards ─── */
.crm-rep-section {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
html[data-theme="dark"] .crm-rep-section { background: rgba(255,255,255,.02); }
.crm-rep-section:hover {
  border-color: color-mix(in srgb, var(--rep-accent, #64748b) 30%, transparent);
  box-shadow: 0 4px 16px -6px color-mix(in srgb, var(--rep-accent, #64748b) 25%, transparent);
}
.crm-rep-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  background: linear-gradient(180deg, #fafbfc, transparent);
}
html[data-theme="dark"] .crm-rep-section-head { background: linear-gradient(180deg, rgba(255,255,255,.03), transparent); }
.crm-rep-section-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
}
.crm-rep-section-title {
  flex: 1;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  letter-spacing: -.01em;
}
.crm-rep-section-meta {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink3, #64748b);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
}
.crm-rep-section-body { padding: 14px 16px 16px; }
.crm-rep-section-para {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink2, #334155);
}
.crm-rep-section-para:last-child { margin-bottom: 0; }
.crm-rep-section-empty {
  margin: 0;
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink3, #94a3b8);
}

/* ─── Bullet items inside sections ─── */
.crm-rep-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.crm-rep-item {
  display: flex;
  gap: 12px;
  padding: 10px 10px 10px 8px;
  border-radius: 8px;
  align-items: flex-start;
  transition: background .15s ease;
}
.crm-rep-item:hover { background: color-mix(in srgb, var(--rep-accent, #64748b) 6%, transparent); }
.crm-rep-item-dot {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rep-accent, #64748b) 14%, transparent);
}
.crm-rep-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.crm-rep-item-lead {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  letter-spacing: -.005em;
}
.crm-rep-item-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.crm-rep-item-main {
  font-size: 12.5px;
  color: var(--ink2, #334155);
  line-height: 1.5;
}
.crm-rep-item-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--rep-accent, #64748b) 12%, transparent);
  color: var(--rep-accent, #64748b);
  border-radius: 999px;
  white-space: nowrap;
}

/* ─── Tier distribution bars ─── */
.crm-rep-tier-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
}
.crm-rep-tier-row {
  display: grid;
  grid-template-columns: 130px 1fr 56px;
  gap: 12px;
  align-items: center;
}
.crm-rep-tier-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink2, #334155);
  letter-spacing: -.005em;
}
.crm-rep-tier-bar {
  height: 10px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.crm-rep-tier-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .9s cubic-bezier(.16, 1, .3, 1);
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: tierShimmer 3.2s ease-in-out infinite;
}
@keyframes tierShimmer {
  0%, 100% { background-position: 200% 50%; }
  50%      { background-position: -100% 50%; }
}
.crm-rep-tier-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.crm-rep-tier-pct {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink3, #64748b);
  margin-left: 4px;
}
.crm-rep-tier-row--btn {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.crm-rep-tier-row--btn:hover {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-color: color-mix(in srgb, var(--ink) 10%, transparent);
  transform: translateX(2px);
}
.crm-rep-tier-row--btn:focus-visible {
  outline: 2px solid var(--c-blue, #3b82f6);
  outline-offset: 1px;
}

/* Tier-distribution: empty state when nothing is scored yet */
.crm-rep-tier-empty {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  border: 1px dashed color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 12px;
  margin: 14px 16px 16px;
}
.crm-rep-tier-empty-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.crm-rep-tier-empty-body { flex: 1; min-width: 0; }
.crm-rep-tier-empty-title {
  font-size: 14px; font-weight: 700; color: var(--ink, #0f172a); margin-bottom: 4px;
}
.crm-rep-tier-empty-text {
  font-size: 12.5px; line-height: 1.55;
  color: var(--ink2, #334155);
  margin-bottom: 12px;
}
.crm-rep-tier-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.crm-rep-tier-unscored {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  margin: 0 16px 14px;
  border-top: 1px dashed color-mix(in srgb, var(--ink) 12%, transparent);
  font-size: 12.5px;
  color: var(--ink2, #334155);
}
.crm-rep-tier-unscored-dot {
  width: 8px; height: 8px;
  background: var(--ink3, #94a3b8);
  border-radius: 50%;
}
.crm-rep-tier-unscored-action {
  margin-left: auto;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  color: var(--ink, #0f172a);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.crm-rep-tier-unscored-action:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

/* ─── Recommendation activity stat grid ─── */
.crm-rep-recs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  padding: 14px 16px 16px;
}
.crm-rep-recs-stat {
  position: relative;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: 10px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: block;
  width: 100%;
  font-family: inherit;
}
.crm-rep-recs-stat:disabled,
.crm-rep-recs-stat[data-no-click="1"] { cursor: default; }
.crm-rep-recs-stat:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, .12);
  border-color: color-mix(in srgb, var(--ink) 14%, transparent);
}
.crm-rep-recs-stat:focus-visible { outline: 2px solid var(--c-blue, #3b82f6); outline-offset: 1px; }
.crm-rep-recs-sub {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink3, #64748b);
  letter-spacing: .02em;
  margin-top: 2px;
  text-transform: lowercase;
}
.crm-rep-recs-arrow {
  position: absolute;
  top: 12px; right: 12px;
  color: var(--ink3, #94a3b8);
  opacity: .55;
  transition: transform .15s ease, opacity .15s ease, color .15s ease;
}
.crm-rep-recs-stat:hover .crm-rep-recs-arrow { opacity: 1; transform: translateX(2px); color: var(--ink2, #334155); }
.crm-rep-recs-empty {
  margin: 0 16px 16px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  border: 1px dashed color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink2, #334155);
}
.crm-rep-section-action {
  margin-left: auto;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  color: var(--ink, #0f172a);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.crm-rep-section-action:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-color: color-mix(in srgb, var(--ink) 26%, transparent);
}
.crm-rep-recs-stat--good { background: color-mix(in srgb, #16a34a 8%, transparent); border-color: color-mix(in srgb, #16a34a 22%, transparent); }
.crm-rep-recs-stat--good .crm-rep-recs-num { color: #15803d; }
.crm-rep-recs-stat--bad  { background: color-mix(in srgb, #dc2626 8%, transparent); border-color: color-mix(in srgb, #dc2626 22%, transparent); }
.crm-rep-recs-stat--bad  .crm-rep-recs-num { color: #b91c1c; }
.crm-rep-recs-stat--neutral { background: color-mix(in srgb, #f59e0b 10%, transparent); border-color: color-mix(in srgb, #f59e0b 24%, transparent); }
.crm-rep-recs-stat--neutral .crm-rep-recs-num { color: #b45309; }
.crm-rep-recs-num {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink, #0f172a);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.crm-rep-recs-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink3, #64748b);
}

/* ─── Inline person-name link (used in summary bullets + exec prose) ─── */
.crm-rep-name-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: 0;
  padding: 0 1px;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  font-weight: inherit;
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
  border-radius: 3px;
  padding: 0 3px;
}
.crm-rep-name-link:hover {
  color: var(--c-blue, #2563eb);
  background: color-mix(in srgb, var(--c-blue, #2563eb) 10%, transparent);
  border-bottom-color: var(--c-blue, #2563eb);
}
.crm-rep-name-link:focus-visible {
  outline: 2px solid var(--c-blue, #2563eb);
  outline-offset: 2px;
}
.crm-rep-name-link-arrow {
  opacity: 0;
  transform: translateX(-2px);
  transition: opacity .15s ease, transform .15s ease;
}
.crm-rep-name-link:hover .crm-rep-name-link-arrow { opacity: .9; transform: translateX(0); }
.crm-rep-item--linked .crm-rep-item-lead { display: inline-flex; }

/* ─── Person hover popover (singleton tooltip) ─── */
.crm-person-hover-popover {
  position: absolute;
  z-index: 9999;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: var(--surf, #fff);
  border: 1px solid color-mix(in srgb, var(--ink, #0f172a) 12%, transparent);
  border-radius: 12px;
  box-shadow:
    0 12px 32px -10px rgba(15, 23, 42, .25),
    0 4px 12px -4px rgba(15, 23, 42, .12);
  padding: 14px 16px;
  font-size: 12.5px;
  color: var(--ink, #0f172a);
  pointer-events: auto;
  animation: crmPhpFadeIn .14s ease-out;
}
@keyframes crmPhpFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
html[data-theme="dark"] .crm-person-hover-popover {
  background: color-mix(in srgb, var(--surf, #0f172a) 92%, #ffffff);
  border-color: color-mix(in srgb, var(--ink, #fff) 18%, transparent);
}
.crm-php-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.crm-php-id { flex: 1; min-width: 0; }
.crm-php-name {
  font-size: 14px; font-weight: 700;
  color: var(--ink, #0f172a);
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crm-php-sub {
  font-size: 11.5px;
  color: var(--ink3, #64748b);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.crm-php-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.crm-php-stat {
  text-align: center;
  padding: 6px 4px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ink, #0f172a) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink, #0f172a) 6%, transparent);
}
.crm-php-stat-num {
  font-size: 14px; font-weight: 800;
  color: var(--ink, #0f172a);
  font-variant-numeric: tabular-nums;
}
.crm-php-stat-label {
  font-size: 9px; font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink3, #64748b);
  margin-top: 2px;
}
.crm-php-stat--good { background: color-mix(in srgb, #16a34a 8%, transparent); border-color: color-mix(in srgb, #16a34a 22%, transparent); }
.crm-php-stat--good .crm-php-stat-num { color: #15803d; }
.crm-php-stat--warn { background: color-mix(in srgb, #f59e0b 10%, transparent); border-color: color-mix(in srgb, #f59e0b 24%, transparent); }
.crm-php-stat--warn .crm-php-stat-num { color: #b45309; }
.crm-php-stat--bad  { background: color-mix(in srgb, #dc2626 8%, transparent); border-color: color-mix(in srgb, #dc2626 22%, transparent); }
.crm-php-stat--bad  .crm-php-stat-num { color: #b91c1c; }

.crm-php-section { margin-top: 10px; }
.crm-php-section-label {
  font-size: 10px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink3, #64748b);
  margin-bottom: 5px;
}
.crm-php-reasons { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.crm-php-reason {
  font-size: 12px;
  padding: 5px 9px;
  border-radius: 6px;
  border-left: 3px solid var(--ink3, #94a3b8);
  background: color-mix(in srgb, var(--ink, #0f172a) 3%, transparent);
  color: var(--ink2, #334155);
  line-height: 1.4;
}
.crm-php-reason--good { border-left-color: #16a34a; background: color-mix(in srgb, #16a34a 6%, transparent); }
.crm-php-reason--warn { border-left-color: #f59e0b; background: color-mix(in srgb, #f59e0b 7%, transparent); }
.crm-php-reason--bad  { border-left-color: #dc2626; background: color-mix(in srgb, #dc2626 7%, transparent); }
.crm-php-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px;
  padding: 6px 0 0;
  margin-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--ink, #0f172a) 6%, transparent);
}
.crm-php-row-label { color: var(--ink3, #64748b); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.crm-php-row-val { color: var(--ink, #0f172a); font-weight: 600; }
.crm-php-nba {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink, #0f172a);
  background: color-mix(in srgb, var(--c-green, #16a34a) 8%, transparent);
  padding: 7px 10px;
  border-radius: 8px;
  border-left: 3px solid var(--c-green, #16a34a);
}
.crm-php-ai {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink2, #334155);
  background: color-mix(in srgb, var(--ink, #0f172a) 3%, transparent);
  padding: 7px 10px;
  border-radius: 8px;
  font-style: italic;
}
.crm-php-foot {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-blue, #2563eb);
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--ink, #0f172a) 6%, transparent);
  text-align: right;
}

/* ─── Mobile responsive ─── */
@media (max-width: 640px) {
  .crm-rep-tier-row { grid-template-columns: 100px 1fr 44px; gap: 8px; }
  .crm-rep-tier-label { font-size: 11.5px; }
  .crm-rep-banner { flex-direction: column; gap: 10px; }
  .crm-rep-banner-cta { align-self: stretch; justify-content: center; }
}
@media (max-width: 720px) {
  .crm-summary-card-head {
    grid-template-columns: 1fr 28px;
    gap: 10px;
  }
  .crm-summary-card-headline,
  .crm-summary-card-stats {
    grid-column: 1 / 3;
    max-width: none;
    justify-content: flex-start;
  }
}
.crm-intel-summary-empty {
  text-align: center;
  padding: 40px 20px;
  background: #fafbfc;
  border: 1px dashed var(--border, #e2e8f0);
  border-radius: 12px;
  margin-top: 14px;
}
html[data-theme="dark"] .crm-intel-summary-empty { background: rgba(255,255,255,.03); }
.crm-intel-rank-pos {
  font-weight: 800;
  font-size: 14px;
  color: var(--ink3);
  min-width: 40px;
  letter-spacing: -.3px;
}
.crm-intel-score-bar {
  position: relative;
  width: 130px;
  height: 24px;
  background: color-mix(in srgb, var(--ink) 6%, var(--surf));
  border-radius: 6px;
  overflow: hidden;
}
.crm-intel-score-bar-fill {
  position: absolute; inset: 0 auto 0 0;
  border-radius: 6px;
  transition: width .6s var(--ease-spring);
  opacity: .85;
}
.crm-intel-score-bar-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--ink);
  letter-spacing: -.2px;
}

/* Intelligence rebuild — at-risk radar buckets */
.crm-intel-risk-bucket {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.crm-intel-risk-bucket-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 13.5px;
}
.crm-intel-risk-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.crm-intel-risk-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink3);
  padding: 2px 8px;
  background: color-mix(in srgb, var(--ink) 6%, var(--surf));
  border-radius: 999px;
}
.crm-intel-risk-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
}
.crm-intel-risk-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--ink) 2%, var(--surf));
  border: 1px solid var(--border);
  border-left: 3px solid var(--risk-color, var(--border));
  border-radius: 10px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.crm-intel-risk-row:hover {
  background: color-mix(in srgb, var(--risk-color, var(--ink)) 7%, var(--surf));
  border-color: color-mix(in srgb, var(--risk-color, var(--border)) 50%, var(--border));
  transform: translateX(2px);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--risk-color, var(--ink)) 18%, transparent);
}
.crm-intel-risk-row:focus-visible {
  outline: 2px solid var(--risk-color, var(--c-blue));
  outline-offset: 2px;
}
.crm-intel-risk-row .crm-row-body { flex: 1; min-width: 0; }
.crm-intel-risk-nba {
  font-size: 12px;
  color: var(--ink2);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-intel-risk-score {
  display: flex; flex-direction: column; align-items: center;
  min-width: 52px;
  font-weight: 700;
}
.crm-intel-risk-score-num { font-size: 16px; line-height: 1; }
.crm-intel-risk-score-label {
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase;
  color: var(--ink3);
  margin-top: 3px;
}
.crm-intel-risk-chev { color: var(--ink3); flex-shrink: 0; }
.crm-intel-risk-row:hover .crm-intel-risk-chev { color: var(--risk-color, var(--ink2)); }
.crm-intel-risk-bucket-title { font-weight: 700; }
.crm-intel-risk-bucket-blurb {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink3);
  margin-left: 6px;
}
.crm-intel-risk-empty {
  color: var(--ink3);
  font-size: 12.5px;
  font-style: italic;
  padding: 6px 0;
}

/* Settings (user preferences) */
.crm-settings-group {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.crm-settings-group--danger {
  border-color: color-mix(in srgb, var(--c-red) 30%, var(--border));
  background: color-mix(in srgb, var(--c-red) 3%, var(--surf));
}
.crm-settings-title {
  margin: 0 0 6px; font-size: 15px; font-weight: 700;
  letter-spacing: -.2px;
}
.crm-settings-desc {
  margin: 0 0 14px; font-size: 13px; color: var(--ink3);
  line-height: 1.5;
}
.crm-settings-form { display: flex; flex-direction: column; gap: 10px; }
.crm-settings-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.crm-settings-row {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 16px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 4%, transparent);
}
.crm-settings-row:last-child { border-bottom: 0; }
.crm-settings-row-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2);
}
.crm-settings-row-control { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crm-setting-input {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surf);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  min-width: 160px;
}
.crm-setting-input--num { min-width: 90px; max-width: 110px; }
.crm-setting-readonly { color: var(--ink2); font-size: 13px; }
.crm-settings-radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
.crm-settings-radio {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surf);
  font-size: 12.5px; font-weight: 600; color: var(--ink2);
  cursor: pointer;
}
.crm-settings-radio input { margin: 0; }
.crm-settings-radio:has(input:checked) {
  border-color: var(--c-blue);
  background: color-mix(in srgb, var(--c-blue) 10%, var(--surf));
  color: var(--c-blue);
}
.crm-settings-toggle {
  position: relative;
  display: inline-block;
  width: 40px; height: 22px;
  cursor: pointer;
}
.crm-settings-toggle input { opacity: 0; width: 0; height: 0; }
.crm-settings-toggle-slider {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--ink) 12%, var(--surf));
  border-radius: 999px;
  transition: background .2s ease;
}
.crm-settings-toggle-slider::before {
  content: ''; position: absolute;
  top: 2px; left: 2px; width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform .2s ease;
}
.crm-settings-toggle input:checked + .crm-settings-toggle-slider { background: var(--c-blue); }
.crm-settings-toggle input:checked + .crm-settings-toggle-slider::before { transform: translateX(18px); }
.crm-settings-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

/* ═══════════════════════════════════
   SECTIONS
   ═══════════════════════════════════ */
.ch-section {
  background: var(--surf);
  border: 1px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  /* `backwards`, not `both` — see the note on .crm-detail-section. */
  animation: crmFadeUp .4s var(--ease-spring) backwards;
}
.ch-section:hover {
  box-shadow: var(--shadow-lg);
}
.ch-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-s);
  background: linear-gradient(180deg, rgba(248,250,252,.6), transparent);
}
.ch-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.ch-section-title svg { color: var(--c-blue); flex-shrink: 0; }
.ch-section-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink3);
  margin-left: 4px;
}
.ch-section-body {
  padding: 0;
}

/* ── Toolbar inside the card ──────────────────────────────────────────
   A list that owns its own controls keeps them in the section head rather
   than in a bar floating above the card, so search / Filter / Create read as
   part of the white panel they act on. Used by the Groups view.
   The section's own overflow is opened up because the Filter popover is
   absolutely positioned inside this head and `overflow:hidden` clipped it;
   the body takes over clipping the rows to the bottom corners. */
.ch-section--toolbar { overflow: visible; }
.ch-section--toolbar .ch-section-head { border-radius: var(--radius) var(--radius) 0 0; }
.ch-section--toolbar .ch-section-body {
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}
.ch-section-head--toolbar {
  flex-wrap: wrap;
  row-gap: 10px;
  padding: 12px 16px;
}
.ch-section-head--toolbar .ch-section-actions {
  flex: 1 1 340px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.ch-section-head--toolbar .ch-search-wrap { flex: 1 1 200px; max-width: 340px; }
.ch-section-head--toolbar .crm-filter-pop-wrap { margin-left: 0; }
/* Right-anchored: the button sits near the card's right edge here, and a
   left-anchored 260px popover would run off the page. */
.ch-section-head--toolbar .crm-filter-pop { left: auto; right: 0; }

/* ═══════════════════════════════════
   CRM LIST ROWS (replicating .ch-material-row)
   ═══════════════════════════════════ */
.crm-list { display: flex; flex-direction: column; }

.crm-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin: 4px 6px;
  border-radius: 14px;
  border: 1px solid var(--border-s);
  background: var(--surf);
  cursor: pointer;
  transition: all .22s var(--ease-spring);
  position: relative;
  overflow: hidden;
}
.crm-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--c-blue);
  opacity: 0;
  transition: opacity .2s ease;
}
.crm-row:hover {
  background: color-mix(in srgb, var(--c-blue) 5%, var(--surf));
  border-color: color-mix(in srgb, var(--c-blue) 16%, transparent);
  box-shadow: 0 6px 18px rgba(0,75,124,.09), 0 1px 3px rgba(0,0,0,.04);
  transform: translateY(-2px);
}
.crm-row:hover::before { opacity: 1; }

.crm-row-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  overflow: hidden;
}

.crm-row-avatar img,
.crm-detail-avatar img,
.crm-conn-avatar img,
.crm-seg-member-avatar img,
.crm-seg-add-avatar img,
.crm-aside-item-avatar img,
.crm-deal-contact-avatar img,
.crm-meet-attendee-avatar img,
.crm-activity-actor-avatar img,
.crm-review-popover-avatar img,
.crm-rq-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Initials fallback — when no img, the parent renders the initials text;
   make sure they're centered + readable. The popover/queue avatars were
   missing this rule and rendering misaligned text. */
.crm-review-popover-avatar,
.crm-rq-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-transform: uppercase;
  flex-shrink: 0;
  overflow: hidden;
  letter-spacing: .02em;
}

/* Subtle quick-action chips for company / person detail cards. Replace the
   loud "+ Log Activity" / "+ Add Note" / "+ Create Task" full-text buttons
   that were dominating the card. Icon + small label, ghost styling. */
.crm-qa-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  border: 1px solid #eef0f3;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
  transition: color .12s ease, background .12s ease, border-color .12s ease, transform .12s ease;
  letter-spacing: -.005em;
}
.crm-qa-chip:hover {
  color: #0f172a;
  background: #f8fafc;
  border-color: #e6e9ee;
  transform: translateY(-1px);
}
.crm-qa-chip:active { transform: translateY(0); }
.crm-qa-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
}
.crm-qa-chip:hover .crm-qa-ico { background: #e0e7ff; color: #4338ca; }
.crm-qa-label { line-height: 1; }
.crm-seg-add-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex: 0 0 auto;
  overflow: hidden;
}
.crm-deal-contact-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex: 0 0 auto;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 6px;
}

.crm-row-body {
  flex: 1;
  min-width: 0;
}
.crm-row-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.01em;
}
.crm-row:hover .crm-row-name { color: var(--c-blue); }
.crm-row-meta {
  font-size: 12px;
  color: var(--ink2-4);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-row-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.crm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: .02em;
}
.crm-badge--lifecycle {
  background: var(--c-blue-bg);
  color: var(--c-blue);
}
.crm-badge--lead { background: var(--c-blue-bg); color: var(--c-blue); }
.crm-badge--prospect { background: var(--c-teal-bg); color: var(--c-teal); }
.crm-badge--active { background: var(--c-green-bg); color: var(--c-green); }
.crm-badge--champion { background: var(--c-purple-bg); color: var(--c-purple); }
.crm-badge--dormant { background: var(--c-yellow-bg); color: var(--c-yellow); }
.crm-badge--at-risk { background: var(--c-red-bg); color: var(--c-red); }
.crm-badge--churned { background: #f1f5f9; color: #64748b; }
.crm-badge--unsub   { background: #fef2f2; color: #dc2626; font-size: 9.5px; letter-spacing: .4px; }

/* ─── Inline "why" reason banners for Spam + Review Queue rows ───────
   Surfaced under the meta line so reviewers can scan the WHY of every
   flag without clicking. Spam = slate-red (decision-already-made tone),
   Review = amber (needs-action tone). */
.crm-row-reason {
  font-size: 12px;
  margin-top: 5px;
  padding: 5px 9px;
  border-radius: 4px;
  line-height: 1.4;
  max-width: 100%;
  white-space: normal;
}
.crm-row-reason-label { font-weight: 700; margin-right: 4px; }
.crm-row-reason-more { color: var(--ink2-4); font-style: italic; margin-left: 4px; }
.crm-row-reason--spam {
  background: #fef2f2;
  color: #7f1d1d;
  border-left: 3px solid #dc2626;
}
.crm-row-reason--review {
  background: #fffbeb;
  color: #78350f;
  border-left: 3px solid #f59e0b;
}

/* ─── Spam + Review Queue bulk-action toolbar ─────────────────────────
   Sits above the People list when "Spam" or "Review Queue" filter is
   active. Spam variant primaries Delete-all (red); Review variant
   primaries Approve-all (amber). Single source of bulk triage tools. */
.crm-review-bulkbar { margin: 0 0 12px 0; }
.crm-review-bulkbar-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid;
}
.crm-review-bulkbar--spam .crm-review-bulkbar-inner {
  background: #fef2f2; border-color: #fecaca; color: #7f1d1d;
}
.crm-review-bulkbar--review .crm-review-bulkbar-inner {
  background: #fffbeb; border-color: #fde68a; color: #78350f;
}
.crm-review-bulkbar-text { flex: 1; min-width: 0; font-size: 13px; }
.crm-review-bulkbar-sub { font-size: 12px; opacity: .8; }
.crm-review-bulkbar-reasons {
  margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px;
}
.crm-review-reason-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.06);
  font-size: 11px;
  font-weight: 600;
}
.crm-review-bulkbar-actions {
  display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; align-items: center;
}
.ch-btn--danger {
  background: #dc2626; color: #fff; border-color: #dc2626;
}
.ch-btn--danger:hover { background: #b91c1c; border-color: #b91c1c; }
.ch-btn--danger:disabled { opacity: .6; cursor: not-allowed; }

/* ─── Inline review-action ribbon — every decision verb on the row ──
   Each Review Queue / Pending Review / Spam row shows its own action set
   underneath the "Why flagged" line so the reviewer never needs to drill
   into a contact to decide. Buttons are small but tappable; the ribbon
   wraps on narrow screens. */
.crm-row-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
}
.crm-row-review-vs {
  font-size: 11.5px;
  color: var(--ink2-4);
  margin-right: 4px;
}
.crm-row-review-vs b { color: var(--ink, #111827); }
.crm-row-review-vs-match {
  color: #6b7280;
  font-size: 10.5px;
  font-style: italic;
  margin-left: 2px;
}
.ch-btn--xs {
  padding: 3px 9px;
  font-size: 11.5px;
  border-radius: 4px;
  line-height: 1.4;
}
.crm-row-review-actions .ch-btn.is-pending { opacity: .6; cursor: wait; }

/* ─── Person row tag chips ─────────────────────────────────────────── */
.crm-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.crm-row-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  background: #f1f5f9;
  color: #475569;
  white-space: nowrap;
}
.crm-row-tag--primary { background: #eff6ff; color: #2563eb; }
.crm-row-tag--more    { background: transparent; color: #94a3b8; font-size: 10px; }

/* ─── Row type icon (Person / Company / Group) — subtle differentiator ─ */
.crm-row-typeicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  flex-shrink: 0;
}
.crm-row-typeicon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── Person tags chip editor (modal) ─────────────────────────────── */
.crm-tag-suggest {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #eef0f3;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.crm-tag-suggest:hover { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }

/* ─── Company tier badges (Platinum/Gold/Silver/Bronze) ────────────── */
.crm-row { position: relative; }
.crm-row--tiered { padding-top: 22px; }

.crm-tier-badge {
  position: absolute;
  top: 6px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.crm-tier-badge-ico { display: inline-flex; align-items: center; }
.crm-tier-badge-ico svg { width: 11px; height: 11px; display: block; }
.crm-tier-badge-label { display: inline-block; }

.crm-tier-badge--platinum {
  background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%);
  color: #334155;
  border-color: #94a3b8;
  box-shadow: 0 1px 3px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.7);
}
.crm-tier-badge--gold {
  background: linear-gradient(135deg, #fef9c3 0%, #fcd34d 100%);
  color: #854d0e;
  border-color: #d4a017;
  box-shadow: 0 1px 3px rgba(202,138,4,.18), inset 0 1px 0 rgba(255,255,255,.55);
}
.crm-tier-badge--silver {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  color: #475569;
  border-color: #94a3b8;
  box-shadow: 0 1px 2px rgba(71,85,105,.10), inset 0 1px 0 rgba(255,255,255,.7);
}
.crm-tier-badge--bronze {
  background: linear-gradient(135deg, #fef3c7 0%, #fdba74 100%);
  color: #9a3412;
  border-color: #c2410c;
  box-shadow: 0 1px 3px rgba(154,52,18,.15), inset 0 1px 0 rgba(255,255,255,.5);
}

/* Sidebar tier-row tinted icons + active accent */
.crm-tier-ico--platinum { color: #64748b; }
.crm-tier-ico--gold     { color: #d4a017; }
.crm-tier-ico--silver   { color: #94a3b8; }
.crm-tier-ico--bronze   { color: #c2410c; }

.crm-tier-row.is-active.crm-tier-row--platinum { box-shadow: inset 3px 0 0 #64748b; }
.crm-tier-row.is-active.crm-tier-row--gold     { box-shadow: inset 3px 0 0 #d4a017; }
.crm-tier-row.is-active.crm-tier-row--silver   { box-shadow: inset 3px 0 0 #94a3b8; }
.crm-tier-row.is-active.crm-tier-row--bronze   { box-shadow: inset 3px 0 0 #c2410c; }

.crm-row-score {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink3);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.crm-row-score svg { width: 12px; height: 12px; }

/* ─── Priority chips + row accents ──────────────────────────────────
   The People list is organized by attention, not recency. Each row
   leads with a colored priority chip and gets a tinted left border so
   the eye can scan a 10k-row list and find what matters in seconds. */
.crm-prio-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  line-height: 1.4;
  white-space: nowrap;
  flex-shrink: 0;
}
.crm-prio-chip-ico { font-size: 11px; line-height: 1; }
.crm-prio-chip-label { font-size: 10px; }
.crm-prio-chip--hot {
  background: linear-gradient(135deg, #fff1e6 0%, #ffd6c2 100%);
  color: #b3360b;
  border-color: #f59f7a;
}
.crm-prio-chip--at-risk {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #854d0e;
  border-color: #f0c33c;
}
.crm-prio-chip--active {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
.crm-prio-chip--cold {
  background: #eff6ff;
  color: #475569;
  border-color: #e6e9ee;
}
.crm-prio-chip--spam {
  background: #f1f5f9;
  color: #94a3b8;
  border-color: #eef0f3;
}
.crm-prio-chip--pending {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
  font-size: 9.5px;
  letter-spacing: .08em;
}
button.crm-prio-chip {
  cursor: pointer;
  font-family: inherit;
}
button.crm-prio-chip--pending:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

/* Tinted left-border accent — single visual cue per row that rewards
   peripheral scanning. Hot is the strongest; low/active are subtle. */
.crm-row[data-prio] { box-shadow: inset 3px 0 0 transparent; }
.crm-row--prio-hot     { box-shadow: inset 4px 0 0 #f97316; }
.crm-row--prio-at-risk { box-shadow: inset 4px 0 0 #eab308; }
.crm-row--prio-active  { box-shadow: inset 3px 0 0 #10b981; }
.crm-row--prio-cold    { box-shadow: inset 3px 0 0 #cbd5e1; }
.crm-row--prio-spam    { box-shadow: inset 3px 0 0 #94a3b8; opacity: .7; }

/* Sidebar priority items get matching accent dots so the active state
   reads visually consistent with the rows it filters. */
.ph-sb-item--prio .ph-sb-icon { font-size: 14px; }
.ph-sb-item--prio-hot.is-active     { box-shadow: inset 3px 0 0 #f97316; }
.ph-sb-item--prio-at-risk.is-active { box-shadow: inset 3px 0 0 #eab308; }
.ph-sb-item--prio-active.is-active  { box-shadow: inset 3px 0 0 #10b981; }
.ph-sb-item--prio-cold.is-active    { box-shadow: inset 3px 0 0 #94a3b8; }
.ph-sb-item--prio-vendor.is-active  { box-shadow: inset 3px 0 0 #8b5cf6; }
.ph-sb-item--prio-spam.is-active    { box-shadow: inset 3px 0 0 #64748b; }

/* Unified review queue entry — promoted to the very top of People + Companies
   sidebars. Bordered + soft-amber tint so it's immediately obvious as the
   "do this first" surface, but still consistent with the other ph-sb-item
   spacing/typography. */
.ph-sb-item--review {
  background: #fffbeb;
  border: 1px solid #fde68a;
  font-weight: 600;
  margin-bottom: 4px;
  position: relative;
}
.ph-sb-item--review:hover { background: #fef3c7; }
.ph-sb-item--review .ph-sb-badge--warning {
  background: #ef4444;
  color: #fff;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
}
.ph-sb-item--review.has-items::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%;
  background: #ef4444;
  border-radius: 0 2px 2px 0;
}

.ph-sb-badge--hot {
  background: #fff1e6;
  color: #b3360b;
}
.ph-sb-badge--at-risk {
  background: #fef3c7;
  color: #854d0e;
}

/* ─── Stat strip — priority-bucket variants ─────────────────────────
   Each bucket only sets --_sc. The accent then flows through the SAME
   places it does on the reference card: the top bar, the icon tile and the
   number. These used to paint their own 3px LEFT bar via ::before, which
   overwrote the card's full-width top bar — that is why four cards showed a
   stray dot in the corner and one showed a proper bar. Never re-add a
   ::before here; it is the top accent's slot.

   Doubled-up selectors (.ch-stat.ch-stat--x) on purpose: the positional
   `.ch-stat:nth-child(n)` accents earlier in this file are also two
   selectors, so a single class here would LOSE and every bucket would take
   the generic blue/green/purple/yellow rotation instead of its own colour. */
.ch-stat.ch-stat--prio-attn    { --_sc: #b3360b; }
.ch-stat.ch-stat--prio-hot     { --_sc: #b3360b; }
.ch-stat.ch-stat--prio-pending { --_sc: #b91c1c; }
.ch-stat.ch-stat--prio-issues  { --_sc: #6b21a8; }
.ch-stat.ch-stat--prio-spam    { --_sc: #475569; }
.ch-stat.ch-stat--warn         { --_sc: var(--c-red); }
.ch-stat.ch-stat--success      { --_sc: var(--c-green); }
/* A group's type carries the same two colours everywhere it shows up — the
   Type filter's dots, the row avatars, and these tiles. Doubled for the same
   nth-child specificity reason as the buckets above. */
.ch-stat.ch-stat--seg-dynamic  { --_sc: var(--c-purple); }
.ch-stat.ch-stat--seg-static   { --_sc: var(--c-blue); }

.ch-stat-trend--hot     { color: #b3360b; }
.ch-stat-trend--ok      { color: #047857; }
.ch-stat-trend--stale   { color: var(--ink3); }

/* ─── Review popover (anchored to a row's REVIEW chip) ───────────── */
.crm-review-popover {
  position: absolute;
  /* 🚨 Was 9000 — UNDER `.ch-overlay` (2147483000, bumped higher again when
     overlays stack). The ⚠ MERGE badge on a company's people cards lives
     inside the company detail overlay, so the popover it opened was painted
     behind the backdrop and the click looked like it did nothing at all.
     Same tier as `.crm-toast`. */
  z-index: 2147483500;
  width: 320px;
  /* Last-resort guard: a pair with four duplicates can outgrow any viewport,
     and _placePopoverBy can only clamp what fits. Scroll inside rather than
     hiding the buttons. */
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15,23,42,.16), 0 2px 8px rgba(15,23,42,.08);
  padding: 0;
  font-size: 13px;
  color: #1e293b;
  /* Smooth entrance + exit. Both directions cubic-bezier(.16,1,.3,1) so
     the popover never feels yanked away. */
  animation: crmPopAppear .22s cubic-bezier(.16, 1, .3, 1);
  transform-origin: top left;
  transition: opacity .2s cubic-bezier(.4,0,.2,1), transform .2s cubic-bezier(.4,0,.2,1);
}
.crm-review-popover.is-exiting {
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  pointer-events: none;
}
@keyframes crmPopAppear {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Title color shifts based on scenario so the reviewer can tell at a glance
   what they're looking at: red for spam, amber for duplicate, slate for
   generic. */
.crm-review-popover-title--duplicate { color: #b45309; }
.crm-review-popover-title--spam      { color: #b91c1c; }
.crm-review-popover-title--generic   { color: #475569; }
.crm-review-popover--duplicate { border-color: #fde68a; }
.crm-review-popover--spam      { border-color: #fecaca; }
.crm-review-popover--duplicate .crm-review-popover-section--why { background: #fffbeb; border-left-color: #f59e0b; }
.crm-review-popover--spam      .crm-review-popover-section--why { background: #fef2f2; border-left-color: #ef4444; }
.crm-review-popover--spam      .crm-review-popover-section--why .crm-review-popover-section-label { color: #b91c1c; }

/* Side-by-side comparison panel for duplicates. */
.crm-review-popover-section--compare {
  background: #f8fafc;
  border: 1px solid #eef0f3;
  border-radius: 8px;
  padding: 10px 12px;
}
.crm-review-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
  margin-top: 6px;
}
.crm-review-compare-vs {
  align-self: center;
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  background: #fff;
  border: 1px solid #e6e9ee;
  border-radius: 999px;
  padding: 3px 8px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.crm-review-compare-detail {
  margin-top: 8px;
  padding: 6px 10px;
  font-size: 11.5px;
  color: #475569;
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  line-height: 1.4;
}
.crm-review-mini {
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.crm-review-mini:hover {
  border-color: var(--c-blue, #3b82f6);
  box-shadow: 0 2px 10px -4px rgba(59,130,246,.35);
  transform: translateY(-1px);
}
.crm-review-mini--missing { background: #fef2f2; border-color: #fecaca; cursor: default; }
.crm-review-mini--missing:hover { transform: none; box-shadow: none; }
.crm-review-mini-empty {
  font-size: 11.5px;
  color: #b91c1c;
  font-style: italic;
}
.crm-review-mini-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #94a3b8;
}
.crm-review-mini-head {
  display: flex;
  gap: 8px;
  align-items: center;
}
.crm-review-mini-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-transform: uppercase;
  overflow: hidden;
}
.crm-review-mini-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crm-review-mini-name-wrap { flex: 1; min-width: 0; }
.crm-review-mini-name {
  font-weight: 700;
  font-size: 12.5px;
  color: #0f172a;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-review-mini-meta {
  font-size: 10.5px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-review-mini-grid {
  margin: 0;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 2px 8px;
  font-size: 11px;
}
.crm-review-mini-grid dt {
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 9.5px;
  align-self: center;
}
.crm-review-mini-grid dd {
  margin: 0;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 540px) {
  .crm-review-compare { grid-template-columns: 1fr; }
  .crm-review-compare-vs { justify-self: center; }
}
.crm-review-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
}
.crm-review-popover-title {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #b91c1c;
}
.crm-review-popover-close {
  background: none;
  border: 0;
  font-size: 18px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 0 2px;
}
.crm-review-popover-close:hover { color: #1e293b; }
.crm-review-popover-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.crm-review-popover-row { line-height: 1.4; }
.crm-review-popover-label {
  font-weight: 600;
  color: #475569;
}
.crm-review-popover-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 14px 12px;
  border-top: 1px solid #f1f5f9;
}

/* ─── Rich Review popover — used by the per-row REVIEW button on
       the People list. Wider, identity strip up top, score block,
       why-flagged bullets, recent-activity preview, and quick
       Approve / Spam / Open detail actions at the bottom so the
       reviewer can decide without opening the full contact card. */
.crm-review-popover--rich {
  width: 440px;
  max-width: calc(100vw - 24px);
  max-height: 78vh;
  display: flex;
  flex-direction: column;
}
.crm-review-popover--rich .crm-review-popover-head {
  gap: 10px;
}
.crm-review-popover-tier {
  margin-left: auto;
  margin-right: 8px;
  font-size: 11px;
}
.crm-review-popover--rich .crm-review-popover-body {
  overflow-y: auto;
  gap: 12px;
  padding: 14px 14px 10px;
}
.crm-review-popover-identity {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
}
.crm-review-popover-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}
.crm-review-popover-name {
  font-weight: 700;
  font-size: 14px;
  color: #0f172a;
  line-height: 1.2;
  margin-bottom: 2px;
}
.crm-review-popover-meta {
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-review-popover-score-block {
  text-align: right;
  line-height: 1;
}
.crm-review-popover-score-num {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
}
.crm-review-popover-score-denom {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 600;
}
.crm-review-popover-score-lbl {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #94a3b8;
  margin-top: 2px;
}
.crm-review-popover-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.crm-review-popover-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
}
.crm-review-popover-section--why {
  background: #fff7ed;
  border-left: 3px solid #f59e0b;
  border-radius: 4px;
  padding: 8px 10px;
}
.crm-review-popover-section--why .crm-review-popover-section-label {
  color: #b45309;
}
.crm-review-popover-why {
  margin: 0;
  padding-left: 16px;
  font-size: 12.5px;
  color: #1e293b;
  line-height: 1.45;
}
.crm-review-popover-why li { margin-bottom: 2px; }
.crm-review-popover-why li:last-child { margin-bottom: 0; }
.crm-review-popover-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.crm-review-popover-stat {
  background: #f8fafc;
  border: 1px solid #eef0f3;
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.crm-review-popover-stat-lbl {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #94a3b8;
}
.crm-review-popover-stat-val {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-review-popover-act {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #eef0f3;
  border-radius: 6px;
  background: #fff;
  align-items: start;
}
.crm-review-popover-act + .crm-review-popover-act { margin-top: 4px; }
.crm-review-popover-act--inbound { border-left: 3px solid #3b82f6; }
.crm-review-popover-act--outbound { border-left: 3px solid #14b8a6; }
.crm-review-popover-act-arrow {
  font-weight: 700;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}
.crm-review-popover-act-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 2px;
}
.crm-review-popover-act-event {
  font-weight: 700;
  color: #0f172a;
  text-transform: capitalize;
}
.crm-review-popover-act-when {
  color: #94a3b8;
  font-size: 11px;
  flex-shrink: 0;
}
.crm-review-popover-act-summary {
  font-size: 12px;
  color: #475569;
  line-height: 1.4;
}
.crm-review-popover-empty {
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
  padding: 10px;
  background: #f8fafc;
  border: 1px dashed #e2e8f0;
  border-radius: 6px;
  text-align: center;
}

/* ─── Priority chip — make it a real button ─────────────────────────
   The chip is the user's tap-target for "this tag is wrong, fix it."
   Strip native button chrome but keep the rounded-pill look so it
   reads as both a status badge AND something you can press. */
button.crm-prio-chip-btn {
  cursor: pointer;
  font-family: inherit;
  background-clip: padding-box;
  position: relative;
  transition: transform .08s ease, box-shadow .08s ease, filter .08s ease;
}
button.crm-prio-chip-btn:hover {
  transform: translateY(-0.5px);
  filter: brightness(0.98);
  box-shadow: 0 1px 4px rgba(15,23,42,.12);
}
button.crm-prio-chip-btn:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 1px;
}
.crm-prio-chip--override .crm-prio-chip-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .65;
  margin-left: 1px;
}

/* ─── Priority hover tooltip (the "why" preview) ─────────────────── */
.crm-prio-tooltip {
  position: absolute;
  z-index: 9100;
  width: 280px;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #eef0f3;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15,23,42,.18), 0 2px 8px rgba(15,23,42,.10);
  padding: 10px 12px 8px;
  font-size: 12px;
  line-height: 1.45;
  pointer-events: none;
  animation: crmPrioTipFade .12s ease-out;
}
@keyframes crmPrioTipFade {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.crm-prio-tooltip-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.crm-prio-tooltip-flag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fbbf24;
  background: rgba(251,191,36,.12);
  border: 1px solid rgba(251,191,36,.30);
  border-radius: 4px;
  padding: 1px 5px;
}
.crm-prio-tooltip-flag--auto {
  color: #64748b;
  background: rgba(148,163,184,.12);
  border-color: rgba(148,163,184,.35);
}
.crm-prio-tooltip-list {
  list-style: disc;
  margin: 0 0 6px;
  padding-left: 18px;
  color: #334155;
}
.crm-prio-tooltip-list li { margin: 2px 0; }
.crm-prio-tooltip-foot {
  font-size: 10.5px;
  color: #64748b;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-top: 1px solid #eef0f3;
  padding-top: 5px;
  margin-top: 4px;
}

/* ─── Priority editor popover (click-to-change) ──────────────────── */
.crm-prio-popover { width: 320px; }
.crm-prio-popover .crm-review-popover-title { color: #1e293b; }
.crm-prio-popover-why {
  background: #f8fafc;
  border: 1px solid #eef0f3;
  border-radius: 8px;
  padding: 8px 10px;
}
.crm-prio-popover-why-label,
.crm-prio-popover-pick-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 4px;
}
.crm-prio-popover-why .crm-prio-tooltip-list {
  color: #334155;
  margin: 0;
}
.crm-prio-popover-pick-label { margin-top: 2px; }
.crm-prio-popover-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.crm-prio-popover-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid #eef0f3;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  text-align: left;
  transition: border-color .08s ease, background .08s ease, transform .08s ease;
}
.crm-prio-popover-option:hover {
  border-color: #e6e9ee;
  background: #f8fafc;
  transform: translateY(-0.5px);
}
.crm-prio-popover-option.is-current {
  border-color: #6366f1;
  background: #eef2ff;
  color: #312e81;
  cursor: default;
}
.crm-prio-popover-option-ico { font-size: 14px; line-height: 1; }
.crm-prio-popover-option-label { flex: 1; }
.crm-prio-popover-option-check { color: #6366f1; font-weight: 700; }
.crm-prio-popover-option--hot     { box-shadow: inset 3px 0 0 #f97316; }
.crm-prio-popover-option--at-risk { box-shadow: inset 3px 0 0 #eab308; }
.crm-prio-popover-option--active  { box-shadow: inset 3px 0 0 #10b981; }
.crm-prio-popover-option--cold    { box-shadow: inset 3px 0 0 #94a3b8; }
.crm-prio-popover-option--vendor  { box-shadow: inset 3px 0 0 #8b5cf6; }
.crm-prio-popover-option--spam    { box-shadow: inset 3px 0 0 #64748b; }
.crm-prio-popover-option.is-disabled {
  opacity: .55;
  cursor: not-allowed;
  background: #f8fafc;
}
.crm-prio-popover-option.is-disabled:hover { background: #f8fafc; border-color: #eef0f3; }

/* ─── Vendor-suggestion banner (company detail) ──────────────────────
   Surfaces on a company page once the inbox sync has classified 3+
   unqualified cold pitches from the same domain. Confirm → vendor;
   Dismiss → clears the counter so we don't re-suggest. */
.crm-vendor-suggest {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 8px 0 12px;
  border-radius: 10px;
  background: #faf5ff;
  border: 1px solid #d8b4fe;
  box-shadow: 0 1px 2px rgba(139, 92, 246, .08);
}
.crm-vendor-suggest-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.crm-vendor-suggest-body { flex: 1; min-width: 0; }
.crm-vendor-suggest-title {
  font-weight: 700; font-size: 13px; color: #581c87; margin-bottom: 2px;
}
.crm-vendor-suggest-desc { font-size: 12px; color: #6b21a8; line-height: 1.4; }
.crm-vendor-suggest-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ─── Company type quick-field badge ─────────────────────────────────
   Picks up the pointer cursor from inline styles; this just adds the
   colour treatment per type so the page-scanner can spot a vendor at
   a glance. */
.crm-qf-display--companytype { font-weight: 600; }
.crm-qf-display--companytype[data-value="vendor"]   { color: #6d28d9; background: #f5f3ff; border-color: #ddd6fe; }
.crm-qf-display--companytype[data-value="customer"] { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.crm-qf-display--companytype[data-value="partner"]  { color: #0369a1; background: #f0f9ff; border-color: #bae6fd; }
.crm-qf-display--companytype[data-value="prospect"], .crm-qf-display--companytype[data-value=""] {
  color: #475569; background: #f8fafc; border-color: #eef0f3;
}
.crm-prio-popover-hint {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}

/* ─── Filters popover (action bar) ───────────────────────────────── */
.crm-filters-wrap {
  position: relative;
  display: inline-block;
}
.crm-filters-active-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f97316;
  margin-left: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 2px #fff;
}
.crm-filters-popover {
  position: absolute;
  z-index: 8500;
  top: calc(100% + 6px);
  right: 0;
  width: 300px;
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15,23,42,.16), 0 2px 8px rgba(15,23,42,.08);
  font-size: 13px;
  color: #1e293b;
}
.crm-filters-popover-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #475569;
}
.crm-filters-popover-close {
  background: none;
  border: 0;
  font-size: 18px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
}
.crm-filters-popover-close:hover { color: #1e293b; }
.crm-filters-popover-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.crm-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.crm-filter-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
}
.crm-filter-field select,
.crm-filter-field input[type="number"] {
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid #e6e9ee;
  border-radius: 6px;
  background: #fff;
  color: #1e293b;
  font-family: inherit;
}
.crm-filter-toggle {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.crm-filter-toggle input { margin: 0; }
.crm-filters-popover-actions {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 14px 12px;
  border-top: 1px solid #f1f5f9;
}

.crm-row-date {
  font-size: 11px;
  color: var(--ink3);
  flex-shrink: 0;
  white-space: nowrap;
}

.crm-row-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .15s ease;
  margin-left: auto;
  flex-shrink: 0;
}
.crm-row:hover .crm-row-actions { opacity: 1; }
.crm-row-action-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--ink3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all .18s var(--ease-spring);
}
.crm-row-action-btn:hover { background: var(--c-blue-bg); color: var(--c-blue); transform: scale(1.08); }
.crm-row-action-btn--danger:hover { background: var(--c-red-bg); color: var(--c-red); }

/* ═══════════════════════════════════
   TIMELINE LIST
   ═══════════════════════════════════ */
.crm-timeline-list { display: flex; flex-direction: column; }

.crm-timeline-item {
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  margin: 2px 6px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: all .22s var(--ease-spring);
}
.crm-timeline-item:hover {
  background: color-mix(in srgb, var(--c-blue) 5%, var(--surf));
  border-color: color-mix(in srgb, var(--c-blue) 12%, transparent);
  box-shadow: 0 2px 8px rgba(0,75,124,.06);
}

.crm-timeline-dot {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.crm-timeline-dot svg { width: 16px; height: 16px; stroke-width: 2; }
.crm-timeline-dot--meeting { background: var(--c-blue-bg); color: var(--c-blue); }
.crm-timeline-dot--email { background: var(--c-purple-bg); color: var(--c-purple); }
.crm-timeline-dot--call { background: var(--c-green-bg); color: var(--c-green); }
.crm-timeline-dot--note { background: var(--c-yellow-bg); color: var(--c-yellow); }
.crm-timeline-dot--deal { background: var(--c-teal-bg); color: var(--c-teal); }
.crm-timeline-dot--task { background: #f1f5f9; color: #475569; }

.crm-timeline-body {
  flex: 1;
  min-width: 0;
}
.crm-timeline-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
}
.crm-timeline-item:hover .crm-timeline-title { color: var(--c-blue); }
.crm-timeline-summary {
  font-size: 12.5px;
  color: var(--ink2);
  margin-top: 3px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.crm-timeline-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.crm-timeline-tag {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--wt-neutral-bg);
  color: var(--ink2);
  letter-spacing: .02em;
}
.crm-timeline-tag--followup { background: var(--c-red-bg); color: var(--c-red); }

.crm-timeline-date {
  font-size: 11px;
  color: var(--ink3);
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}

/* ═══════════════════════════════════
   INTELLIGENCE CARDS GRID
   ═══════════════════════════════════ */
.crm-intel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.crm-intel-card {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surf);
  cursor: pointer;
  transition: all .25s var(--ease-spring);
  box-shadow: var(--shadow-sm);
}
.crm-intel-card:hover {
  border-color: var(--c-blue);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.crm-intel-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.crm-intel-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink2);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.crm-intel-card-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 4px;
}
.crm-intel-card-desc {
  font-size: 11.5px;
  color: var(--ink3);
}

/* ═══════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════ */
.ch-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 32px;
  min-height: 300px;
  animation: crmFadeUp .4s var(--ease-spring) both;
}
.ch-empty-icon { margin-bottom: 24px; opacity: 0.5; }
.ch-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.ch-empty-desc {
  font-size: 13.5px;
  color: var(--ink2);
  max-width: 420px;
  margin-bottom: 24px;
  line-height: 1.55;
}
.ch-empty-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ═══════════════════════════════════
   OVERLAYS, PANELS & MODALS
   ═══════════════════════════════════ */
.ch-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: rgba(15, 23, 42, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  align-items: center;
  justify-content: center;
  /* Same duration and curve as .ch-modal below, so the tint and the popup read
     as one gesture instead of two. */
  transition: background .28s var(--ease-spring), backdrop-filter .28s var(--ease-spring), -webkit-backdrop-filter .28s var(--ease-spring);
}
.ch-overlay[data-open="true"] {
  display: flex;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* ⚠️ display:none → flex gives the backdrop no first frame to animate FROM, so
   the tint used to slam in at full strength while only the modal eased. This
   supplies that frame. Browsers without @starting-style behave as before. */
@starting-style {
  .ch-overlay[data-open="true"] {
    background: rgba(15, 23, 42, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
}
.ch-overlay--right {
  align-items: stretch;
  justify-content: flex-end;
}

.ch-panel {
  background: var(--surf);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  animation: crmSlideInRight 200ms cubic-bezier(.2,.8,.2,1) both;
}
.ch-panel--right {
  width: 380px;
  max-width: 90vw;
}
.ch-panel--detail {
  width: 460px;
  max-width: 90vw;
  box-shadow: -4px 0 24px rgba(0,0,0,.1);
}
@keyframes crmSlideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.ch-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ch-panel-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  flex: 1;
  margin: 0;
}
.ch-panel-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--ink3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background .15s, color .15s;
  flex-shrink: 0;
  margin-left: auto;
}
.ch-panel-close:hover { background: var(--border-s); color: var(--ink); }
.ch-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.ch-panel-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  justify-content: flex-end;
  flex-shrink: 0;
}

/* ── Modal ── */
.ch-modal {
  background: var(--surf);
  border-radius: var(--radius);
  max-width: 540px;
  width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.15), 0 8px 32px rgba(0,0,0,.08);
  animation: crmFadeScaleIn 280ms var(--ease-spring) both;
}
.ch-modal--lg { max-width: 680px; }
/* Detail popup modal — wide, near full-screen, tabs pinned at top */
.ch-modal--detail {
  max-width: 1400px;
  width: 94vw;
  max-height: 92vh;
  border-radius: 16px;
}
.ch-modal--detail .crm-detail-header { gap: 14px; }
.ch-modal--detail .ch-modal-body { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
/* Tab bar pinned under header */
.crm-detail-tabs-wrap {
  flex-shrink: 0;
  background: var(--surf, #fff);
  border-bottom: 1px solid var(--border, #e5e7eb);
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 2;
}
.ch-modal--detail .crm-detail-tabpanel {
  padding: 20px 24px 28px;
}
@keyframes crmFadeScaleIn {
  from { transform: scale(0.97) translateY(8px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.ch-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ch-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.ch-modal-subtitle {
  font-size: 13px;
  color: var(--ink2);
  margin: 2px 0 0;
}
.ch-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}
.ch-modal-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  justify-content: flex-end;
  flex-shrink: 0;
}

/* ═══════════════════════════════════
   BUTTONS
   ═══════════════════════════════════ */
.ch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--f);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s var(--ease-spring);
  border: 1px solid transparent;
  min-height: 36px;
  white-space: nowrap;
}
.ch-btn--primary {
  background: var(--c-blue);
  color: #fff;
  border-color: var(--c-blue);
  box-shadow: var(--shadow-sm);
}
.ch-btn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.ch-btn--primary:active { transform: scale(.97); }
.ch-btn--ghost {
  background: transparent;
  color: var(--ink2);
  border-color: var(--border);
}
.ch-btn--ghost:hover {
  /* More prominent hover — clear blue tint + border + lift so toolbar
     actions (Import CSV / Export / Select / Show internal) read as buttons. */
  background: color-mix(in srgb, var(--c-blue) 12%, var(--surf));
  color: var(--c-blue);
  border-color: color-mix(in srgb, var(--c-blue) 32%, transparent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.ch-btn--ghost:active { transform: scale(.97); }
.ch-btn--danger {
  background: var(--c-red);
  color: #fff;
  border-color: var(--c-red);
}
.ch-btn--danger:hover { background: #b91c1c; transform: translateY(-1px); }
.ch-btn--danger:active { transform: scale(.97); }
.ch-btn--sm { padding: 6px 14px; font-size: 13px; min-height: 32px; }
.ch-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ═══════════════════════════════════
   FORMS
   ═══════════════════════════════════ */
.ch-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ch-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.ch-form-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
}
.ch-form-field input,
.ch-form-field select,
.ch-form-field textarea {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--f);
  font-size: 13px;
  color: var(--ink);
  background: var(--surf);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  width: 100%;
}
.ch-form-field input:focus,
.ch-form-field select:focus,
.ch-form-field textarea:focus {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-blue) 12%, transparent);
  background: #fff;
}
.ch-form-field textarea { resize: vertical; min-height: 36px; }
.ch-form-field select { cursor: pointer; }

.crm-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ch-form-msg {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  margin-top: 8px;
}
.ch-form-msg--success { background: var(--c-green-bg); color: var(--c-green); }
.ch-form-msg--error { background: var(--c-red-bg); color: var(--c-red); }

/* ═══════════════════════════════════
   FORM GRID SYSTEM (Deal, Segment, Note modals)
   ═══════════════════════════════════ */
.ch-form-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ch-form-grid--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 580px) {
  .ch-form-grid--2col { grid-template-columns: 1fr; }
}
.ch-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.ch-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
  letter-spacing: .01em;
}
.ch-input {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--f);
  font-size: 13px;
  color: var(--ink);
  background: var(--surf);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  width: 100%;
  min-height: 38px;
}
.ch-input:focus {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-blue) 12%, transparent);
  background: #fff;
}
.ch-input::placeholder {
  color: var(--ink4, #94a3b8);
  font-weight: 400;
}
select.ch-input {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 30px;
}
select.ch-input:focus {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-blue) 12%, transparent);
  background-color: #fff;
}
.ch-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}
/* Custom date input styling */
input[type="date"].ch-input {
  cursor: pointer;
}
input[type="date"].ch-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .5;
  transition: opacity .2s;
}
input[type="date"].ch-input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
/* Number input — hide spinners */
input[type="number"].ch-input::-webkit-inner-spin-button,
input[type="number"].ch-input::-webkit-outer-spin-button {
  opacity: 0;
}
input[type="number"].ch-input:hover::-webkit-inner-spin-button,
input[type="number"].ch-input:hover::-webkit-outer-spin-button {
  opacity: 1;
}
/* Also style legacy ch-form-field selects the same way */
.ch-form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 30px;
}

/* ═══════════════════════════════════
   MODAL CLOSE BUTTON (new-style modals)
   ═══════════════════════════════════ */
.ch-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--ink3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 20px;
  line-height: 1;
  transition: all .2s var(--ease-spring);
  flex-shrink: 0;
  margin-left: auto;
}
.ch-modal-close:hover {
  background: var(--c-red-bg);
  color: var(--c-red);
  transform: rotate(90deg);
}

/* ═══════════════════════════════════
   CHECKBOX STYLED
   ═══════════════════════════════════ */
.ch-form-group input[type="checkbox"],
.ch-form-field input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--c-blue);
  cursor: pointer;
  vertical-align: middle;
}

/* ═══════════════════════════════════
   DETAIL PANEL — PERSON / COMPANY 360
   ═══════════════════════════════════ */
.crm-detail-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
}
.crm-detail-head-info {
  flex: 1;
  min-width: 0;
}
.crm-detail-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-detail-subtitle {
  font-size: 12px;
  color: var(--ink2);
  margin: 2px 0 0;
}
.crm-detail-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

/* Risk badge — shows next to name when person is flagged. Three states:
   suspected (amber), confirmed-spam (red), marketing-suppressed (slate). */
.crm-risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.crm-risk-badge[hidden] { display: none !important; }
.crm-risk-badge[data-level="suspected"] {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}
.crm-risk-badge[data-level="confirmed-spam"] {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}
.crm-risk-badge[data-level="marketing-only"] {
  background: #e2e8f0;
  color: #475569;
  border: 1px solid #e6e9ee;
}

.crm-detail-scores {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* Engagement tally — compact inline chips. Stays one or two rows even on
   wide profiles; never dominates the header. Empty channels fade out. */
.crm-detail-tally {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}
.crm-tally-tile {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 8px;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  font: inherit;
  font-size: 11px;
  line-height: 18px;
  color: var(--ink2, #334155);
}
.crm-tally-tile:hover {
  background: var(--c-hover, #f3f4f6);
  border-color: var(--c-blue, #3b82f6);
}
.crm-tally-tile--empty {
  opacity: .4;
  cursor: default;
}
.crm-tally-tile--empty:hover {
  background: var(--c-surface, #fff);
  border-color: var(--c-border, #e5e7eb);
}
.crm-tally-value {
  font-weight: 700;
  color: var(--ink1, #0f172a);
  font-variant-numeric: tabular-nums;
}
.crm-tally-label {
  font-size: 11px;
  color: var(--ink3, #64748b);
  text-transform: none;
  letter-spacing: 0;
}
.crm-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  animation: crmScorePop .35s var(--ease-spring) both;
}
.crm-score-badge:nth-child(2) { animation-delay: .06s; }
.crm-score-badge:nth-child(3) { animation-delay: .12s; }
.crm-score-badge:nth-child(4) { animation-delay: .18s; }
.crm-score-badge--engagement { background: var(--c-blue-bg); color: var(--c-blue); }
.crm-score-badge--influence { background: var(--c-purple-bg); color: var(--c-purple); }
.crm-score-badge--intent { background: var(--c-teal-bg); color: var(--c-teal); }
.crm-score-badge--churn { background: var(--c-red-bg); color: var(--c-red); }

/* Make score badges feel interactive: subtle lift on hover, ring on focus,
   pointer cursor — clicking jumps to Network → Score History so you can
   see the trend behind the number. */
.crm-score-badge {
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  border: 1px solid transparent;
}
.crm-score-badge:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.crm-score-badge:active { transform: translateY(0); filter: brightness(.98); }
.crm-score-badge:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
}
.crm-detail-score-badge--skeleton { cursor: default; }
.crm-detail-score-badge--skeleton:hover { transform: none; box-shadow: none; }

/* ────────────────────────────────────────────────────────────
   AI Summary card — Overview tab
   Inline Run-now button, lead-quality tier pill, NBA highlight
   block, and a subtle pulse while a refresh is in flight.
   ──────────────────────────────────────────────────────────── */
.crm-detail-ai-section { position: relative; }
.crm-detail-ai-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.crm-detail-ai-head h3 { margin: 0; }
.crm-detail-ai-run {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.crm-detail-ai-run[disabled] { opacity: .65; cursor: progress; }
.crm-detail-ai-run svg { transition: transform .4s ease; }
.crm-detail-ai-run[disabled] svg { animation: crmAiSpin 1s linear infinite; }
@keyframes crmAiSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.crm-detail-ai--loading { opacity: .7; transition: opacity .2s ease; }
.crm-detail-ai-text { margin: 0 0 10px; line-height: 1.55; color: var(--ink, #111827); font-size: 13.5px; }
.crm-detail-ai-error { color: var(--c-red, #dc2626); }
.crm-detail-ai-nba {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-left: 3px solid var(--c-blue, #3b82f6);
  background: color-mix(in srgb, var(--c-blue, #3b82f6) 6%, transparent);
  border-radius: 6px;
  margin-bottom: 10px;
}
.crm-detail-ai-nba-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-blue, #3b82f6);
}
.crm-detail-ai-nba-text { font-size: 13px; color: var(--ink, #111827); line-height: 1.5; }
.crm-detail-ai-tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
  margin-right: 8px;
}
.crm-detail-ai-tier-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent);
}
.crm-detail-ai-tier--hot  { color: #dc2626; background: color-mix(in srgb, #dc2626 12%, transparent); }
.crm-detail-ai-tier--warm { color: #d97706; background: color-mix(in srgb, #d97706 12%, transparent); }
.crm-detail-ai-tier--cool { color: #475569; background: color-mix(in srgb, #475569 12%, transparent); }
.crm-detail-ai-tier--spam { color: #6b7280; background: color-mix(in srgb, #6b7280 14%, transparent); }
.crm-detail-ai-stamp {
  display: inline-block;
  font-size: 11px;
  color: var(--ink3, #6b7280);
  margin-top: 4px;
}

/* ⚠️ `backwards`, NOT `both`. `both` retains the LAST keyframe forever, and
   crmFadeUp's last keyframe is `transform: translateY(0) scale(1)` — an
   identity transform, invisible but permanent, which makes every section its
   own stacking context. Any popover opened inside one was then trapped below
   the NEXT section no matter how high its z-index: the relationship
   dropdown's bottom two options hit-tested to the Key Contacts box and could
   not be clicked. `backwards` still applies the FROM state before/through the
   delay (so the fade-in is unchanged) and drops the transform once it ends. */
.crm-detail-section {
  margin-bottom: 20px;
  animation: crmFadeUp .3s var(--ease-spring) backwards;
}
.crm-detail-review {
  background: linear-gradient(180deg, #fff7ed 0%, #fef3c7 100%);
  border: 1px solid #fbbf24;
  border-radius: 10px;
  padding: 12px 14px 14px;
  margin-bottom: 16px;
}
.crm-detail-review h3 {
  color: #b45309;
  border-bottom: 1px solid #fcd34d;
  margin-bottom: 8px;
}
.crm-detail-review-list { display: flex; flex-direction: column; gap: 8px; }
.crm-review-item {
  background: #fff;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.crm-review-item--staff {
  background: #fef2f2;
  border-color: #fca5a5;
}
.crm-review-item--staff .crm-review-kind { color: #b91c1c; }
.crm-review-item--duplicate {
  background: #eef2ff;
  border-color: #c7d2fe;
}
.crm-review-item--duplicate .crm-review-kind { color: #4338ca; }
.crm-review-kind {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #b45309;
}
.crm-review-detail { font-size: 13px; color: var(--ink1); line-height: 1.4; }
.crm-review-detail strong { color: var(--ink0); }
.crm-review-meta { font-size: 11px; color: var(--ink3); }
.crm-review-actions { display: flex; gap: 6px; margin-top: 4px; }
.crm-review-btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-s);
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.crm-review-btn:hover { transform: translateY(-1px); }
.crm-review-btn--confirm {
  background: var(--c-green, #16a34a);
  border-color: var(--c-green, #16a34a);
  color: #fff;
}
.crm-review-btn--deny {
  background: #fff;
  border-color: var(--c-red, #dc2626);
  color: var(--c-red, #dc2626);
}
.crm-review-btn--split {
  background: #fff;
  border-color: var(--c-blue, #3b82f6);
  color: var(--c-blue, #3b82f6);
}
.crm-review-btn--split:hover { background: var(--c-blue, #3b82f6); color: #fff; }
.crm-review-btn:disabled { opacity: 0.5; cursor: wait; }

.crm-timeline-noise-toggle {
  margin: 0 0 10px;
  display: flex;
  justify-content: flex-end;
}
.crm-timeline-noise-toggle button {
  background: transparent;
  border: 1px dashed var(--border-s);
  color: var(--ink3);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.crm-timeline-noise-toggle button:hover {
  color: var(--ink1);
  border-color: var(--ink3);
}

.crm-detail-section:nth-child(2) { animation-delay: .04s; }
.crm-detail-section:nth-child(3) { animation-delay: .08s; }
.crm-detail-section:nth-child(4) { animation-delay: .12s; }
.crm-detail-section:nth-child(5) { animation-delay: .16s; }
.crm-detail-section:nth-child(n+6) { animation-delay: .2s; }
.crm-detail-section h3 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink3);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-s);
}
.crm-detail-props {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.crm-detail-prop {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.crm-detail-prop-key {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink3);
  min-width: 80px;
  flex-shrink: 0;
}
.crm-detail-prop-val {
  font-size: 13px;
  color: var(--ink);
  word-break: break-word;
}

/* ── "From JobBoss" roll-up on the company overview ───────────────────────
   A labelled group under the ordinary property rows, so order/quote/AR figures
   read as a cache of the ERP rather than as CRM-entered facts. Rendered only
   when JobBoss actually holds something for the company. */
.crm-detail-prop-group {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line, rgba(0,0,0,.08));
}
.crm-detail-prop-grouphead {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 5px;
}
.crm-detail-prop-note {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: .75;
}
.crm-prop-link {
  color: var(--c-blue, #0284c7);
  text-decoration: none;
  font-weight: 500;
  transition: color .15s, text-decoration-color .15s;
  text-underline-offset: 2px;
}
.crm-prop-link:hover {
  text-decoration: underline;
  color: var(--c-blue-dark, #0369a1);
}
/* Person-pill inside a prop row (Delivery Lead, Owner etc.) */
.crm-detail-conn-tag--prop {
  padding: 3px 8px 3px 4px;
  font-size: 12px;
  border-radius: 20px;
  vertical-align: middle;
}

.crm-detail-connections,
.crm-detail-timeline,
.crm-detail-plans {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.crm-detail-conn-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--wt-neutral-bg, #f4f4f4);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
  cursor: pointer;
  transition: all .2s var(--ease-spring);
  border: 1px solid transparent;
}
.crm-detail-conn-tag:hover {
  background: var(--c-blue-bg);
  color: var(--c-blue);
  border-color: color-mix(in srgb, var(--c-blue) 15%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,75,124,.08);
}
button.crm-detail-conn-tag {
  font-family: inherit;
}

.crm-detail-ai-text {
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.6;
  margin: 0;
}

/* ═══════════════════════════════════
   SETTINGS
   ═══════════════════════════════════ */
.crm-settings-group {
  padding: 20px;
  border-bottom: 1px solid var(--border-s);
}
.crm-settings-group:last-child { border-bottom: none; }
.crm-settings-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}
.crm-settings-desc {
  font-size: 13px;
  color: var(--ink2);
  margin: 0 0 12px;
}
.crm-settings-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.crm-setting-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--border-s);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
}
.crm-setting-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ═══════════════════════════════════
   SETTINGS — DATA HEALTH PANEL
   ═══════════════════════════════════ */
.crm-data-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.crm-dh-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.crm-dh-card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.crm-dh-card-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
}
.crm-dh-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}
.crm-dh-status span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.crm-dh-status--good { color: var(--c-green); }
.crm-dh-status--empty { color: var(--c-yellow); }
.crm-dh-status--bad { color: var(--c-red); }
.crm-dh-detail {
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.crm-dh-bar {
  height: 6px;
  background: var(--border-s);
  border-radius: 3px;
  overflow: hidden;
}
.crm-dh-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
}

/* ═══════════════════════════════════
   RELATIONSHIP STRENGTH BAR
   ═══════════════════════════════════ */
.crm-strength-bar {
  width: 60px;
  height: 6px;
  background: var(--border-s);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.crm-strength-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .3s ease;
}

/* ═══════════════════════════════════
   PLAN PROGRESS BAR
   ═══════════════════════════════════ */
.crm-plan-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.crm-plan-progress-bar {
  width: 60px;
  height: 6px;
  background: var(--border-s);
  border-radius: 3px;
  overflow: hidden;
}
.crm-plan-progress-fill {
  height: 100%;
  background: var(--c-green);
  border-radius: 3px;
  transition: width .3s ease;
}
.crm-plan-progress-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink3);
  min-width: 28px;
}

/* ═══════════════════════════════════
   PLAN MODAL — TASKS PANEL
   ═══════════════════════════════════ */
.crm-plan-tasks-panel {
  margin-top: 18px;
  padding: 16px 18px 14px;
  background: var(--bg-subtle, #f8f9fc);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
}
.crm-plan-tasks-header { margin-bottom: 10px; }
.crm-plan-tasks-title {
  font-size: 14px; font-weight: 700; color: var(--ink1, #111);
  margin: 0; display: flex; align-items: center; gap: 8px;
}
.crm-plan-tasks-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px;
  background: var(--wt-theme-primary, #4f46e5); color: #fff;
  border-radius: 999px; font-size: 11px; font-weight: 700;
}
.crm-plan-tasks-sub {
  font-size: 12px; color: var(--ink3, #6b7280); margin: 4px 0 0;
}
.crm-plan-tasks-list { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.crm-plan-tasks-empty {
  font-size: 12px; color: var(--ink4, #9ca3af);
  font-style: italic; padding: 10px 4px;
}
.crm-plan-task-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: #fff;
  border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.crm-plan-task-row:hover { border-color: var(--wt-theme-primary, #4f46e5); }
.crm-plan-task-row.is-done .crm-plan-task-title {
  text-decoration: line-through; color: var(--ink4, #9ca3af);
}
.crm-plan-task-row.is-pending { background: #fffbeb; border-color: #fde68a; }
.crm-plan-task-row input[type="checkbox"] {
  width: 16px; height: 16px; cursor: pointer; flex: 0 0 auto;
}
.crm-plan-task-title {
  flex: 1 1 auto; font-size: 13px; color: var(--ink2, #374151);
}
.crm-plan-task-pending-tag {
  font-size: 10px; font-weight: 600; color: #92400e;
  background: #fef3c7; padding: 2px 6px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .03em;
}
.crm-plan-task-remove {
  background: transparent; border: 0; color: var(--ink4, #9ca3af);
  font-size: 18px; line-height: 1; cursor: pointer;
  padding: 0 4px; border-radius: 4px;
}
.crm-plan-task-remove:hover { background: #fee2e2; color: #b91c1c; }
.crm-plan-tasks-add { margin-top: 6px; }
.crm-plan-tasks-input {
  width: 100%; padding: 9px 12px;
  background: #fff; border: 1px dashed var(--border, #d1d5db);
  border-radius: 8px; font-size: 13px; color: var(--ink2, #374151);
  transition: border-color .15s, background .15s;
}
.crm-plan-tasks-input:focus {
  outline: none; border-style: solid;
  border-color: var(--wt-theme-primary, #4f46e5);
  background: #fff;
}

/* Task count bubble on plan list rows */
.crm-row-task-bubble {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 4px; min-width: 28px; height: 22px; padding: 0 8px;
  background: var(--wt-theme-primary-mist, #eef2ff);
  color: var(--wt-theme-primary, #4f46e5);
  border-radius: 999px; font-size: 11px; font-weight: 700;
  margin-right: 6px;
}
.crm-row-task-bubble svg { width: 11px; height: 11px; }

/* ═══════════════════════════════════
   DEAL PIPELINE COLUMN TOTALS
   ═══════════════════════════════════ */
.crm-pipeline-col-total {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink3);
  margin-top: 2px;
}

/* ═══════════════════════════════════
   INTEL CARDS — FILTER HIGHLIGHT
   ═══════════════════════════════════ */
.crm-intel-card {
  transition: transform .2s ease, box-shadow .2s ease;
}
.crm-intel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.crm-intel-card--selected {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-blue) 20%, transparent);
}

/* ═══════════════════════════════════
   INTEL TIER FILTER CHIPS
   ═══════════════════════════════════ */
.crm-intel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 8px;
}
.crm-intel-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surf);
  border: 1px solid var(--border);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.crm-intel-chip:hover { border-color: var(--c-blue); color: var(--ink); }
.crm-intel-chip.is-active {
  background: color-mix(in srgb, var(--c-blue) 10%, transparent);
  border-color: var(--c-blue);
  color: var(--c-blue);
}
.crm-intel-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.crm-intel-chip-count {
  font-size: 11px;
  font-weight: 700;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink2);
  min-width: 16px;
  text-align: center;
}
.crm-intel-chip.is-active .crm-intel-chip-count {
  background: color-mix(in srgb, var(--c-blue) 15%, transparent);
  color: var(--c-blue);
}
.crm-intel-status {
  font-size: 11.5px;
  color: var(--ink3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}

/* ═══════════════════════════════════
   DAILY AI SUMMARY PANEL
   ═══════════════════════════════════ */
.crm-intel-summary-body {
  padding: 4px 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink);
}
.crm-intel-summary-body h1,
.crm-intel-summary-body h2,
.crm-intel-summary-body h3 {
  margin: 12px 0 6px;
  font-weight: 700;
  color: var(--ink);
}
.crm-intel-summary-body h1 { font-size: 16px; }
.crm-intel-summary-body h2 { font-size: 14.5px; }
.crm-intel-summary-body h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .3px; color: var(--ink2); }
.crm-intel-summary-body ul,
.crm-intel-summary-body ol {
  padding-left: 20px;
  margin: 6px 0 10px;
}
.crm-intel-summary-body li { margin-bottom: 4px; }
.crm-intel-summary-body p { margin: 6px 0; }
.crm-intel-summary-body strong { color: var(--ink); font-weight: 700; }
/* (.crm-intel-summary-empty styled near .crm-intel-rank-list — keep this stub
   for class load-order coherence; old terse style replaced by the bigger card.) */
.crm-intel-summary-meta {
  font-size: 11.5px;
  color: var(--ink3);
  margin-right: 10px;
}
.ch-section-head .ch-section-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ph-sb-badge--new {
  background: var(--c-yellow);
  color: #000;
  font-weight: 700;
}

/* ═══════════════════════════════════
   REPORT TABLE
   ═══════════════════════════════════ */
.crm-report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.crm-report-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--ink3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.crm-report-table td {
  padding: 9px 12px;
  color: var(--ink);
  border-bottom: 1px solid var(--border-light, var(--border));
  vertical-align: middle;
}
.crm-report-table tbody tr:hover td { background: var(--hover-bg, rgba(0,0,0,.025)); }
.crm-report-table td:first-child { font-weight: 500; }

/* ═══════════════════════════════════
   CUSTOM REPORT BUILDER
   ═══════════════════════════════════ */
.crm-cb { display: flex; flex-direction: column; gap: 18px; }
.crm-cb-row { display: flex; flex-direction: column; gap: 8px; }
.crm-cb-row--inline { flex-direction: row; align-items: center; flex-wrap: wrap; }
.crm-cb-row--inline .crm-cb-label { margin-right: 4px; }
.crm-cb-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--ink3); }
.crm-cb-hint { font-size: 12px; color: var(--ink3); font-weight: 400; text-transform: none; letter-spacing: 0; }
.crm-cb-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 16px; padding: 10px 12px; background: var(--bg-soft, rgba(0,0,0,.02)); border: 1px solid var(--border); border-radius: 8px; }
.crm-cb-chk { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; user-select: none; }
.crm-cb-chk input { margin: 0; }
.crm-cb-filter { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(120px, 1fr) minmax(120px, 1.2fr) auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.crm-cb-filter .ch-input { font-size: 13px; padding: 6px 8px; }
.crm-cb-val-placeholder { color: var(--ink3); font-size: 13px; padding: 0 8px; }
.crm-cb-empty { font-size: 12px; color: var(--ink3); padding: 8px 0; }
.crm-cb-actions { flex-direction: row; align-items: center; gap: 12px; }
.crm-cb-report-actions { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.crm-cb-report-actions .crm-cb-hint { margin-left: auto; }
@media (max-width: 720px) {
  .crm-cb-filter { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════
   VIEW TRANSITIONS
   ═══════════════════════════════════ */
/* Row entrance animation — applied via JS class */
@keyframes crmRowIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.crm-row {
  animation: crmRowIn 250ms var(--ease-spring) both;
}
.crm-row:nth-child(2)  { animation-delay: 30ms; }
.crm-row:nth-child(3)  { animation-delay: 55ms; }
.crm-row:nth-child(4)  { animation-delay: 75ms; }
.crm-row:nth-child(5)  { animation-delay: 95ms; }
.crm-row:nth-child(n+6){ animation-delay: 110ms; }
.crm-timeline-item {
  animation: crmRowIn 250ms var(--ease-spring) both;
}
.crm-timeline-item:nth-child(2)  { animation-delay: 30ms; }
.crm-timeline-item:nth-child(3)  { animation-delay: 55ms; }
.crm-timeline-item:nth-child(4)  { animation-delay: 75ms; }
.crm-timeline-item:nth-child(5)  { animation-delay: 95ms; }
.crm-timeline-item:nth-child(n+6){ animation-delay: 110ms; }

/* View content fade on switch */
@keyframes crmViewFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ch-view--active {
  animation: crmViewFadeIn 200ms ease;
}

/* Pipeline card entrance */
@keyframes crmCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.crm-deal-card--enter,
.crm-pipeline-cards > .crm-deal-card {
  animation: crmCardIn 160ms ease both;
}
.crm-pipeline-cards > .crm-deal-card:nth-child(2) { animation-delay: 30ms; }
.crm-pipeline-cards > .crm-deal-card:nth-child(3) { animation-delay: 60ms; }
.crm-pipeline-cards > .crm-deal-card:nth-child(n+4) { animation-delay: 90ms; }

/* ═══════════════════════════════════
   DETAIL PANEL ACTIONS
   ═══════════════════════════════════ */
.crm-detail-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

/* ═══════════════════════════════════
   TOAST NOTIFICATION
   ═══════════════════════════════════ */
.crm-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  /* 🚨 2147483500, not 99999. Every .ch-overlay is 2147483000 and openOverlay
     bumps a stacked one higher still, so at 99999 the toast was painted BEHIND
     the modal's tinted, blurred backdrop: every message a popup raised was
     invisible. That is how "Image must be 2MB or smaller" became Tyler's "when
     i uploaded nothing happened" — the guard fired, the toast spoke, and the
     screen showed neither. A toast reports on the thing in front of you, so it
     has to be in front of it.
     Below .crm-sel-pop (…645), the cropper (…646) and the unsaved-work card
     (…600) — a toast never needs to cover a dialog. */
  z-index: 2147483500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  white-space: nowrap;
}
.crm-toast.crm-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.crm-toast--success { background: var(--c-green); }
.crm-toast--error { background: var(--c-red); }

/* ═══════════════════════════════════
   BULK IMPORT WIZARD
   ═══════════════════════════════════ */
.crm-import-step-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--ink);
}
.crm-import-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.crm-import-dropzone:hover,
.crm-import-dropzone.crm-import-dropzone--over {
  border-color: var(--c-blue);
  background: var(--c-blue-bg);
}
.crm-import-dropzone-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink2);
  margin: 0;
}
.crm-import-dropzone-hint {
  font-size: 12px;
  color: var(--ink3);
  margin: 0;
}
.crm-import-file-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--c-blue-bg);
  border-radius: var(--radius-sm);
  margin-top: 12px;
}
.crm-import-filename {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.crm-import-filesize {
  font-size: 12px;
  color: var(--ink3);
}
.crm-import-map-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.crm-import-map-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.crm-import-map-col {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.crm-import-map-arrow {
  color: var(--ink3);
  font-size: 16px;
}
.crm-import-map-row select {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-family: var(--f);
}
.crm-import-preview-table-wrap {
  max-height: 300px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.crm-import-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.crm-import-preview-table th {
  background: var(--wt-neutral-bg);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 8px 10px;
  text-align: left;
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--border);
}
.crm-import-preview-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-s);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-import-preview-table tr:nth-child(even) { background: var(--wt-neutral-bg); }
.crm-import-progress-wrap {
  text-align: center;
  padding: 30px 0;
}
.crm-import-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--border-s);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}
.crm-import-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--c-blue);
  border-radius: 4px;
  transition: width 0.3s;
}
.crm-import-progress-text {
  font-size: 13px;
  color: var(--ink2);
}
.crm-import-results {
  margin-top: 16px;
  padding: 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.crm-import-results--success {
  background: var(--c-green-bg);
  color: var(--c-green);
}
.crm-import-results--error {
  background: var(--c-red-bg);
  color: var(--c-red);
}

/* ═══════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════ */
@media (max-width: 900px) {
  .ph-hub {
    grid-template-columns: 1fr;
  }
  .ph-sidebar {
    position: static;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
  }
  .ph-sb-label {
    width: 100%;
    padding: 8px 6px 2px;
  }
  .ph-sb-divider {
    width: 100%;
    height: 1px;
    margin: 2px 0;
  }
  .crm-form-row {
    grid-template-columns: 1fr;
  }
  .ch-panel--detail,
  .ch-panel--right {
    width: 100%;
    max-width: 100vw;
  }
  .ch-modal--detail {
    max-width: 100vw;
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }
  .crm-intel-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

@media (max-width: 600px) {
  .wt-page-frame { padding: 12px 10px 40px; }
  .ch-stats-strip { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .ch-stat-divider { width: 100%; height: 1px; }
  .ch-action-bar { flex-direction: column; align-items: stretch; }
  .ch-action-bar-right { justify-content: flex-end; }
}

/* ═══════════════════════════════════
   LOADING SKELETON (matches Training Materials)
   ═══════════════════════════════════ */
@keyframes crmSkeletonPulse {
  from { opacity: .6; }
  to { opacity: 1; }
}
.crm-skeleton {
  animation: crmSkeletonPulse 1.2s ease-in-out infinite alternate;
}

/* ═══════════════════════════════════
   EXPORT DROPDOWN
   ═══════════════════════════════════ */
.crm-export-wrap { position: relative; display: inline-block; }
.crm-export-menu {
  position: absolute; top: 100%; right: 0; z-index: 1200;
  min-width: 180px; margin-top: 4px;
  background: var(--surf); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 4px 0; animation: crmMenuFade 120ms ease;
}
@keyframes crmMenuFade { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.crm-export-menu-item {
  display: block; width: 100%; padding: 8px 14px; border: none;
  background: none; font: inherit; font-size: 13px; color: var(--ink);
  text-align: left; cursor: pointer; transition: background 150ms;
}
.crm-export-menu-item:hover { background: var(--wt-neutral-bg); }
.crm-export-divider { height: 1px; background: var(--border-s); margin: 4px 0; }

/* ═══════════════════════════════════
   BULK SELECT
   ═══════════════════════════════════ */
.crm-bulk-toggle.is-active {
  background: var(--c-red-bg); color: var(--c-red); border-color: var(--c-red);
}
.crm-row--selectable { padding-left: 0; }
.crm-row-cb-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 36px; min-width: 36px; cursor: pointer;
}
.crm-row-checkbox {
  width: 16px; height: 16px; accent-color: var(--c-blue); cursor: pointer;
}
.crm-select-all-wrap {
  display: flex; align-items: center; gap: 6px; padding: 4px 0;
  font-size: 12px; color: var(--ink3); font-weight: 500;
}
.crm-select-all-cb { width: 16px; height: 16px; accent-color: var(--c-blue); cursor: pointer; }

/* Bulk action bar — floating bottom */
.crm-bulk-bar {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 1300;
  display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: #fff;
  padding: 10px 20px; border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  font-size: 13px; font-weight: 600;
  animation: crmBulkSlide 200ms ease;
}
@keyframes crmBulkSlide { from { opacity:0; transform: translate(-50%, 20px); } to { opacity:1; transform: translate(-50%, 0); } }
.crm-bulk-bar .ch-btn--ghost { color: #fff; border-color: rgba(255,255,255,0.3); }
.crm-bulk-bar .ch-btn--ghost:hover { background: rgba(255,255,255,0.1); }
.crm-bulk-bar .ch-btn--danger { background: var(--c-red); border-color: var(--c-red); color: #fff; }

/* ═══════════════════════════════════
   PAGINATION
   ═══════════════════════════════════ */
.crm-pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; gap: 12px; font-size: 13px;
}
.crm-page-info { color: var(--ink3); font-weight: 500; }
.crm-page-btns { display: flex; gap: 4px; }
.crm-page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surf); font: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink2); cursor: pointer; transition: all 150ms;
}
.crm-page-btn:hover:not(:disabled) { background: var(--wt-neutral-bg); border-color: var(--ink4); }
.crm-page-btn.is-active { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
.crm-page-btn:disabled { opacity: 0.4; cursor: default; }

/* ═══════════════════════════════════
   DATE RANGE FILTER
   ═══════════════════════════════════ */
.crm-date-range { display: flex; align-items: center; gap: 6px; }
.crm-date-label { font-size: 12px; color: var(--ink3); font-weight: 500; }
.crm-date-input {
  height: 30px; padding: 0 8px; border: 1px solid var(--border);
  border-radius: 6px; font: inherit; font-size: 12px; color: var(--ink);
  background: var(--surf); transition: border-color 150ms;
}
.crm-date-input:focus { outline: none; border-color: var(--c-blue); }

/* ═══════════════════════════════════
   PIPELINE — Kanban Board
   ═══════════════════════════════════ */
#crmPipeline {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 4px 0 12px; min-height: 340px;
}
.crm-pipeline-col {
  flex: 1 1 0; min-width: 200px; max-width: 280px;
  background: var(--wt-neutral-bg); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; overflow: hidden;
}
.crm-pipeline-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .4px; color: var(--ink2);
  border-bottom: 1px solid var(--border-s);
}
.crm-pipeline-col-count {
  background: var(--surf); border-radius: 10px;
  padding: 1px 8px; font-size: 11px; font-weight: 700; color: var(--ink3);
}
.crm-pipeline-cards {
  flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px;
}
.crm-pipeline-empty {
  color: var(--ink3); font-size: 12px; text-align: center; padding: 24px 0;
}

/* ═══════════════════════════════════
   DEAL CARDS
   ═══════════════════════════════════ */
.crm-deal-card {
  background: var(--surf); border-radius: 12px;
  padding: 14px; cursor: pointer;
  border: 1px solid var(--border-s);
  box-shadow: var(--shadow-sm);
  transition: all .22s var(--ease-spring);
}
.crm-deal-card:hover {
  box-shadow: var(--shadow-lg); transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--c-blue) 15%, transparent);
}
.crm-deal-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 6px;
}
.crm-deal-card-name {
  font-weight: 600; font-size: 13px; color: var(--ink); line-height: 1.3;
}
.crm-deal-card-company {
  font-size: 12px; color: var(--ink2-4); margin-top: 4px;
}
.crm-deal-card-row {
  display: flex; gap: 10px; align-items: center; margin-top: 8px;
  font-size: 12px; color: var(--ink2); flex-wrap: wrap;
}
.crm-deal-card-amount {
  font-weight: 700; color: var(--ink);
}
.crm-deal-card-prob {
  background: var(--c-blue-bg); color: var(--c-blue); border-radius: 6px;
  padding: 1px 6px; font-size: 11px; font-weight: 600;
}
.crm-deal-card-close {
  color: var(--ink3); font-size: 11px;
}
.crm-deal-card .crm-badge { margin-top: 8px; font-size: 10px; }
.crm-deal-card .crm-row-actions { opacity: 0; transition: opacity 150ms; }
.crm-deal-card:hover .crm-row-actions { opacity: 1; }

/* Deal stage badges */
.crm-badge--prospecting   { background: #eef2ff; color: #6366f1; }
.crm-badge--qualification { background: #f0fdfa; color: #0d9488; }
.crm-badge--proposal      { background: #e0f2fe; color: #0284c7; }
.crm-badge--negotiation   { background: #fef9c3; color: #a16207; }
.crm-badge--closed-won    { background: var(--c-green-bg); color: var(--c-green); }
.crm-badge--closed-lost   { background: var(--c-red-bg); color: var(--c-red); }
.crm-badge--high          { background: #fef3c7; color: #d97706; }
.crm-badge--critical      { background: var(--c-red-bg); color: var(--c-red); }
.crm-badge--low           { background: #f0fdf4; color: #16a34a; }
.crm-badge--medium        { background: #eff6ff; color: #2563eb; }

/* Deals view-mode toggle */
.crm-deals-viewmode {
  padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--border); background: transparent; color: var(--ink2);
  cursor: pointer; transition: all var(--wt-transition);
}
.crm-deals-viewmode.is-active {
  background: var(--c-blue); color: #fff; border-color: var(--c-blue);
}

/* ═══════════════════════════════════
   NOTE CARDS
   ═══════════════════════════════════ */
#crmNotesList {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.crm-note-card {
  background: var(--surf); border-radius: 12px;
  padding: 18px; border: 1px solid var(--border-s);
  transition: all .22s var(--ease-spring);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.crm-note-card:hover {
  box-shadow: var(--shadow-lg); transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--c-blue) 15%, transparent);
}
.crm-note-card--pinned {
  border-color: var(--c-yellow-soft); background: #fffbeb;
}
.crm-note-card-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.crm-note-card-type {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: 6px; font-size: 10px; font-weight: 600;
  color: #fff; text-transform: capitalize;
}
.crm-note-card-icons {
  display: flex; gap: 4px; color: var(--ink3); margin-left: auto;
}
.crm-note-card-icons svg { opacity: .7; }
.crm-note-card .crm-row-actions { opacity: 0; transition: opacity 150ms; }
.crm-note-card:hover .crm-row-actions { opacity: 1; }
.crm-note-card-title {
  font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 6px;
}
.crm-note-card-body {
  font-size: 13px; color: var(--ink2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.crm-note-card-linked {
  font-size: 11px; color: var(--ink3); margin-top: 8px;
}
.crm-note-card-date {
  font-size: 11px; color: var(--ink4); margin-top: 8px;
}

/* ═══════════════════════════════════
   SEGMENT TAGS
   ═══════════════════════════════════ */
.crm-row-tags {
  display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
}
.crm-tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 500;
  background: var(--c-blue-bg); color: var(--c-blue);
}

/* ═══════════════════════════════════
   GROUPS — help icon tooltip, label row, tag-add row
   ═══════════════════════════════════ */
.ch-label-row {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.ch-label-row .ch-label { margin-bottom: 0; }
.crm-help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  font-size: 10px; font-weight: 700; line-height: 1;
  background: var(--ink4); color: #fff; cursor: default;
  flex-shrink: 0;
}

/* Body-level tooltip (JS-positioned, escapes overflow:hidden modals) */
.crm-tooltip-bubble {
  position: fixed;
  z-index: 2147483647;
  width: 260px; white-space: pre-wrap;
  background: #1e293b; color: #e2e8f0;
  font-size: 11.5px; font-weight: 400; line-height: 1.55;
  padding: 8px 10px; border-radius: 7px;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  pointer-events: none;
  opacity: 0; transition: opacity .12s;
}
.crm-tooltip-bubble.is-visible { opacity: 1; }

.crm-tag-input-row {
  display: flex; gap: 8px; align-items: flex-start;
}
.crm-tag-input-row .crm-tag-input { flex: 1; }
.crm-tag-input-row .ch-btn { flex-shrink: 0; height: 38px; align-self: flex-start; margin-top: 1px; }

/* ═══════════════════════════════════
   GROUPS — single-column hub, filter popover, tag-chip input
   ═══════════════════════════════════ */
.ph-hub--no-sidebar { grid-template-columns: 1fr; }

.crm-filter-pop-wrap { position: relative; display: inline-flex; align-items: center; margin-left: 8px; }
.crm-filter-pop-wrap .ch-btn { gap: 6px; }
.crm-filter-pop-wrap .ch-btn.is-active {
  background: var(--c-blue-bg); color: var(--c-blue); border-color: color-mix(in srgb, var(--c-blue) 30%, var(--border));
}
.crm-filter-pop-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; font-size: 10.5px; font-weight: 700;
  background: var(--c-blue); color: #fff;
}
.crm-filter-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 260px;
  background: var(--surf); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 10px; display: flex; flex-direction: column; gap: 10px;
}
.crm-filter-pop[hidden] { display: none; }
.crm-filter-pop-group { display: flex; flex-direction: column; gap: 4px; }
.crm-filter-pop-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink4); padding: 2px 4px;
}
.crm-filter-pop-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
  font-size: 12.5px; color: var(--ink2);
}
.crm-filter-pop-item:hover { background: var(--surf2, #f6f7f9); }
.crm-filter-pop-item input[type="checkbox"] { margin: 0; }
.crm-filter-pop-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.crm-filter-pop-hint { color: var(--ink4); font-size: 11.5px; font-weight: 400; }
.crm-filter-pop-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 6px; border-top: 1px solid var(--border);
}
.crm-filter-pop-clear {
  background: none; border: 0; color: var(--ink3); font-size: 12px; font-weight: 600;
  cursor: pointer; padding: 4px 6px;
}
.crm-filter-pop-clear:hover { color: var(--ink); }


/* Tag chip input */
.crm-tag-input {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  min-height: 38px; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surf); cursor: text;
  transition: border-color .15s;
}
.crm-tag-input:focus-within { border-color: var(--c-blue); }
.crm-tag-input-chips { display: contents; }
.crm-tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 10px; border-radius: 999px;
  background: var(--c-blue-bg); color: var(--c-blue);
  font-size: 12px; font-weight: 500;
}
.crm-tag-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 999px;
  background: transparent; border: 0; color: var(--c-blue);
  cursor: pointer; font-size: 14px; line-height: 1;
}
.crm-tag-chip-x:hover { background: color-mix(in srgb, var(--c-blue) 20%, transparent); }
.crm-tag-input-field {
  flex: 1; min-width: 140px;
  border: 0; background: transparent; outline: none;
  font-size: 13px; padding: 4px 2px;
}

/* ═══════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════ */
@media print {
  .ph-nav-wrap, .ch-action-bar, .crm-row-actions, .crm-bulk-bar,
  .crm-pagination, .ph-sidebar, #wtHeaderContainer,
  .crm-export-wrap, .crm-bulk-toggle,
  .ch-empty, .crm-toast { display: none !important; }
  .ph-hub { display: block !important; }
  .ph-content { margin: 0 !important; padding: 0 !important; }
  .crm-row { break-inside: avoid; border-bottom: 1px solid #ccc; }
  body { font-size: 11px; }
}

/* ═══════════════════════════════════
   SEGMENT/DEAL MEMBER MANAGEMENT
   ═══════════════════════════════════ */
.ch-modal--xl {
  max-width: 720px; width: 96vw;
}
.crm-seg-detail-info {
  display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 16px;
  /* --surf2 is not a defined token; fall back to --bg2 so this panel is not
     a light slab in dark mode. */
  background: var(--surf2, var(--bg2)); border-radius: var(--radius-sm); margin-bottom: 16px;
}
.crm-seg-info-item {
  display: flex; flex-direction: column; gap: 2px; min-width: 100px;
}
.crm-seg-info-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink4);
}
.crm-seg-info-value {
  font-size: 13px; font-weight: 500; color: var(--ink);
}
/* ═══ "THIS GROUP" PANEL ═══════════════════════════════════════════
   What the group IS — size, where its people work, how they got in. Sits at
   the top of the group-detail popup, above the member list, mounted by
   crm-audience.js. Tokens only, so it themes with everything else.

   ⚠️ The two ACTION CARDS that used to live under these tiles are gone
   (`.crm-aud-action*`, ~45 lines): a full-width blue "Copy emails" card was
   the loudest thing in a popup about a group. They are small footer buttons
   now — see `.crm-segd-foot-actions`. The stat COLOURS went with them: these
   tiles count the group, and a count is not a warning, so nothing here is
   green/yellow/red any more and a zero needs no dimming. */
.crm-aud {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg2); padding: 14px 16px 16px; margin-bottom: 16px;
}
.crm-aud-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.crm-aud-title {
  margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -.01em;
}
.crm-aud-src { font-size: 11px; color: var(--ink3); margin-left: auto; }

/* ── Stat strip ── */
.crm-aud-stats {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.crm-aud-stat {
  flex: 1 1 96px; min-width: 88px;
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 12px; border-radius: 8px;
  background: var(--surf); border: 1px solid var(--border);
  border-left: 3px solid var(--ink4);
}
.crm-aud-stat-num {
  font-size: 19px; font-weight: 700; line-height: 1.1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.crm-aud-stat-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink3); white-space: nowrap;
}
/* The headline number gets the accent; the ones beside it are context, so they
   keep the neutral rule. One emphasis per strip, or none of them is emphasis. */
.crm-aud-stat--lead { border-left-color: var(--c-blue); }
.crm-aud-stat--lead .crm-aud-stat-num { color: var(--c-blue); }
html[data-theme="dark"] .crm-aud-stat--lead .crm-aud-stat-num { color: var(--c-blue-soft, #7dabff); }

/* The tiles are the last thing in the panel now unless consent excluded
   somebody, which is the one sentence that has to be said out loud. */
.crm-aud-note {
  margin: 10px 0 0; font-size: 11px; line-height: 1.45; color: var(--ink3);
}

/* ═══ "ACTIVITY" PANEL ═════════════════════════════════════════════
   What the group has been PART OF — sends, campaigns, pieces, the other
   groups built on it, its own edits. Mounted by crm-group-activity.js,
   directly under the "This group" panel: WHO, then WHAT WAS DONE WITH
   THEM. Deliberately wears the same card and the same stat strip, one
   step quieter — this is history, and history should not out-shout the
   group it belongs to. */
.crm-ga {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg2); padding: 14px 16px 16px; margin-bottom: 16px;
}
.crm-ga-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.crm-ga-title-h {
  margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -.01em;
}
.crm-ga-src { font-size: 11px; color: var(--ink3); margin-left: auto; }

.crm-ga-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.crm-ga-stat {
  flex: 1 1 96px; min-width: 88px;
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 12px; border-radius: 8px;
  background: var(--surf); border: 1px solid var(--border);
  border-left: 3px solid var(--ink4);
}
/* ⚠️ NOT `font-size:19px` LIKE THE PANEL ABOVE. "Last used" holds a DATE
   ("3 days ago"), not a count — at the headline size it wraps to two lines
   and shoves that tile taller than the numbers beside it. Every tile here
   is sized for the longest thing any of them can hold. */
.crm-ga-stat-num {
  font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.crm-ga-stat-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink3); white-space: nowrap;
}
.crm-ga-stat--lead { border-left-color: #7c3aed; }
.crm-ga-stat--lead .crm-ga-stat-num { color: #7c3aed; }
html[data-theme="dark"] .crm-ga-stat--lead .crm-ga-stat-num { color: #c4b5fd; }

.crm-ga-list { display: flex; flex-direction: column; gap: 2px; }
/* A row is a `div` unless it opens something, in which case it is a
   `button` — the same rule the sub-group list follows. Both are declared
   here so the two cannot drift apart visually. */
.crm-ga-row {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; min-width: 0;
  padding: 8px 10px; border: 1px solid transparent; border-radius: 9px;
  background: none; font-family: inherit; text-align: left; color: inherit;
}
button.crm-ga-row { cursor: pointer; }
button.crm-ga-row:hover { border-color: #c4b5fd; background: var(--surf); }
.crm-ga-ic {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surf2, #f3f4f6); color: var(--ink3);
}
.crm-ga-ic svg { width: 13px; height: 13px; }
/* Colour carries the KIND, so a long list is skimmable before it is read.
   Muted on purpose — these are facts, not statuses. */
.crm-ga-ic--send     { background: var(--c-blue-bg, #eff6ff); color: var(--c-blue, #2563eb); }
.crm-ga-ic--piece    { background: var(--c-blue-bg, #eff6ff); color: var(--c-blue, #2563eb); }
.crm-ga-ic--campaign { background: #f5f3ff; color: #7c3aed; }
.crm-ga-ic--usedby   { background: #f5f3ff; color: #7c3aed; }
html[data-theme="dark"] .crm-ga-ic--campaign,
html[data-theme="dark"] .crm-ga-ic--usedby { background: rgba(124,58,237,.18); color: #c4b5fd; }
.crm-ga-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.crm-ga-title {
  font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-ga-sub { font-size: 11px; color: var(--ink3); line-height: 1.4; }
/* ⚠️ `flex: 0 0 auto` AND `white-space: nowrap`. Without both, a long
   subject line squeezes the date until "3 days ago" wraps mid-phrase and
   the column stops being a column. */
.crm-ga-when {
  flex: 0 0 auto; margin-top: 1px; font-size: 11px; color: var(--ink3);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.crm-ga-more {
  margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--c-blue);
}
.crm-ga-more:hover { text-decoration: underline; }
.crm-ga-empty, .crm-ga-note {
  margin: 8px 0 0; font-size: 11px; line-height: 1.45; color: var(--ink3);
}
.crm-ga-note--what { font-style: italic; }

@media (max-width: 560px) {
  .crm-ga-src { margin-left: 0; flex: 1 1 100%; }
  /* The date drops UNDER the text rather than off the side of it. */
  .crm-ga-row { flex-wrap: wrap; }
  .crm-ga-when { margin-left: 36px; }
}

/* ── Footer actions on the group-detail popup ──
   Small, left of Done, and no card anywhere: taking the list away is a
   footnote to reading the group, not the point of the screen. */
.crm-segd-foot-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-right: auto; min-width: 0;
}
.crm-segd-foot-actions .ch-btn[disabled] { opacity: .45; cursor: not-allowed; }

@media (max-width: 560px) {
  .crm-aud-src { margin-left: 0; flex: 1 1 100%; }
}

.crm-seg-section-title {
  font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 8px; display: flex; align-items: center; gap: 6px;
}
.crm-seg-member-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: 10px; font-size: 11px; font-weight: 600;
  background: var(--c-blue-bg); color: var(--c-blue);
  font-variant-numeric: tabular-nums;
}

/* ═══ GROUP DETAIL POPUP — the header, and the groups inside this one ═══════
   Tyler, on the popup in the screenshot: "There should be an edit button that
   shows even on this pop-up… You shouldn't have to click the edit button
   outside the card to be able to edit it." */
.crm-segd-headactions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.crm-segd-edit { white-space: nowrap; gap: 6px; }

/* The hub, from inside a group: its children, each one openable. */
.crm-segd-subs {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg2); padding: 14px 16px 16px; margin-bottom: 16px;
}
.crm-segd-subs-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.crm-segd-subs-head .crm-seg-section-title { margin: 0; }
.crm-segd-subs-head > .ch-btn { margin-left: auto; }
/* `.crm-segd-subs-empty` was here. A group with no sub-groups now renders
   nothing at all rather than a paragraph explaining nesting. */
.crm-segd-sublist { display: flex; flex-direction: column; gap: 6px; }
.crm-segd-sub {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surf); cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.crm-segd-sub:hover { border-color: #c4b5fd; background: #faf7ff; }
.crm-segd-sub-av {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700;
}
.crm-segd-sub-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crm-segd-sub-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.crm-segd-sub-name {
  font-size: 13px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-segd-sub-meta { font-size: 11.5px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.crm-segd-sub-go { flex: 0 0 auto; color: var(--ink4); font-size: 14px; }
.crm-segd-sub:hover .crm-segd-sub-go { color: #7c3aed; }

/* ── "Group inside" on a groups-list row ─────────────────────────────────
   The hub's other half. Hidden until the row is hovered or focused, because
   every row carries one and a column of them would read as the point of the
   page; `:focus-within` keeps it reachable by keyboard. */
.crm-seg-nestadd {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border: 1px dashed #d9e2ec; border-radius: 999px;
  background: #fff; cursor: pointer; font-family: inherit;
  font-size: 11.5px; font-weight: 600; color: #64748b;
  opacity: 0; transition: opacity .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.crm-row:hover .crm-seg-nestadd,
.crm-row:focus-within .crm-seg-nestadd { opacity: 1; }
.crm-seg-nestadd:focus-visible { opacity: 1; outline: 2px solid #a78bfa; outline-offset: 2px; }
.crm-seg-nestadd:hover { border-style: solid; border-color: #c4b5fd; color: #6d28d9; background: #faf7ff; }
@media (hover: none) {
  /* No hover to reveal it on a touch screen, so it is simply always there. */
  .crm-seg-nestadd { opacity: 1; }
}
.crm-seg-add-member {
  margin-bottom: 16px;
}
.crm-seg-add-row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.crm-seg-add-type {
  max-width: 130px;
}
.crm-seg-add-select {
  flex: 1; min-width: 180px;
}
.crm-seg-members-list {
  display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto;
}
.crm-seg-member-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: var(--radius-sm); background: var(--surf);
  /* Borderless list — keep a transparent border so the --key/--flagged
     state variants can still paint a colored edge, but no grey boxes. */
  border: 1px solid transparent; transition: background var(--wt-transition);
}
/* The foot of a paged member list — "Show 60 more · 60 of 7126 shown", or the
   same slot saying the list is complete. Full width, so it reads as the end of
   the list and not as another member. */
.crm-seg-member-more {
  display: block; width: 100%; margin-top: 6px; padding: 9px 12px;
  border: 1px dashed var(--line, #d4d4d8); border-radius: var(--radius-sm);
  background: transparent; color: var(--txt-2, #6b7280);
  font: inherit; font-size: 12.5px; text-align: center;
}
button.crm-seg-member-more:hover {
  background: var(--surf, #fff); color: var(--txt, #111827); border-style: solid;
}
.crm-seg-member-more--done { border-style: solid; opacity: .75; }
.crm-seg-member-check,
.crm-co-people-check {
  width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; accent-color: var(--c-blue, #0ea5e9);
}
/* Shared inline bulk-action bar inside detail panels (groups + companies) */
.crm-inline-bulk-bar {
  display: none;
  align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; margin-bottom: 8px;
  background: var(--c-blue-bg, #eff6ff);
  border: 1px solid color-mix(in srgb, var(--c-blue, #0ea5e9) 25%, transparent);
  border-radius: var(--radius-sm, 8px);
  font-size: 12px; font-weight: 600; color: var(--ink, #0f172a);
}
.crm-inline-bulk-bar[data-open="true"] { display: flex; }
.crm-inline-bulk-bar__select-all {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.crm-inline-bulk-bar__select-all input[type="checkbox"] {
  width: 16px; height: 16px; cursor: pointer; accent-color: var(--c-blue, #0ea5e9);
}
.crm-inline-bulk-bar__actions { display: inline-flex; gap: 6px; flex-shrink: 0; }
.crm-seg-member-row:hover {
  background: var(--surf2, #f4f6f9);
}
.crm-seg-member-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: #fff; flex-shrink: 0;
}
.crm-seg-member-info {
  flex: 1; min-width: 0;
}
.crm-seg-member-name {
  font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crm-seg-member-meta {
  font-size: 11px; color: var(--ink3);
}
.crm-seg-member-email {
  color: var(--c-blue, #0284c7);
  text-decoration: none;
}
.crm-seg-member-email:hover { text-decoration: underline; }
.crm-seg-member-badge {
  display: inline-flex; padding: 2px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 500;
  background: var(--c-blue-bg); color: var(--c-blue);
}
.crm-seg-member-badge--company {
  background: #f0fdf4; color: #16a34a;
}
/* WHY this member is in the group, in the group list's own colours — dynamic
   #7c3aed, static #0284c7 — so this popup and the editor's Members tab describe
   the same person the same way. Filled vs outlined carries the same second axis
   the picker's tick boxes use: a rule decided, or a person did. */
.crm-seg-member-src {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 6px; white-space: nowrap;
  font-size: 10px; font-weight: 700; letter-spacing: .01em;
  border: 1px solid transparent;
}
.crm-seg-member-src.is-auto { background: #fff; color: #6d28d9; border-color: #c4b5fd; }
.crm-seg-member-src.is-hand { background: #e8f5ff; color: #0369a1; border-color: #bae2fb; }
/* Both reasons at once — reads as the two it is made of, not as a fourth idea. */
.crm-seg-member-src.is-both {
  background: linear-gradient(100deg, #f6f2ff 0 52%, #e8f5ff 52% 100%);
  color: #4c1d95; border-color: #cfc4f3;
}
/* Came in on a list. Amber, because it is the one reason that OVERRIDES the
   filters rather than agreeing with them — this person is in whether they
   match or not, and that is worth spotting from across the row.
   ⚠️ It carries the file name, so unlike the other three it can be long: it is
   the one badge allowed to truncate rather than push the row wide. */
.crm-seg-member-src.is-imported {
  background: #fff7e6; color: #92400e; border-color: #fcd9a4;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; display: inline-block;
}
/* Imported AND matched — the amber keeps the override meaning, the violet edge
   says the filters would have found them anyway. */
.crm-seg-member-src.is-imported.is-both {
  background: linear-gradient(100deg, #fff7e6 0 52%, #f6f2ff 52% 100%);
  color: #92400e; border-color: #e3cdb0;
}

/* Key-contact + anomaly visuals on the company detail People tab.
   Two row variants (key-flagged and anomaly-flagged) with subtle
   borders/tints, plus a star toggle button on every row. */
.crm-co-people-section {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px;
}
.crm-co-people-section-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink3);
  padding: 6px 4px 2px;
  margin-bottom: 4px;
}
.crm-co-people-section-title { color: var(--ink2); }
.crm-co-people-section-count {
  background: var(--surf2); color: var(--ink2);
  border-radius: 999px; padding: 1px 8px; font-size: 10px; font-weight: 600;
  letter-spacing: 0;
}
.crm-co-people-empty-inline {
  font-size: 12px; color: var(--ink3); font-style: italic;
  padding: 8px 12px;
}
.crm-seg-member-row--key {
  background: color-mix(in srgb, var(--c-yellow, #f59e0b) 5%, var(--surf));
  border-color: color-mix(in srgb, var(--c-yellow, #f59e0b) 25%, var(--border));
}
.crm-seg-member-row--flagged {
  border-color: color-mix(in srgb, var(--c-orange, #f97316) 35%, var(--border));
}
.crm-seg-key-pill {
  display: inline-block; margin-left: 8px; padding: 1px 6px;
  background: color-mix(in srgb, var(--c-yellow, #f59e0b) 15%, transparent);
  color: var(--c-yellow, #f59e0b);
  border-radius: 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  vertical-align: middle;
}
.crm-co-key-toggle {
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--border); background: transparent;
  color: var(--ink3); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: all .15s var(--ease-spring);
}
.crm-co-key-toggle:hover { border-color: var(--c-yellow, #f59e0b); color: var(--c-yellow, #f59e0b); }
.crm-co-key-toggle.is-key { background: var(--c-yellow, #f59e0b); color: white; border-color: var(--c-yellow, #f59e0b); }
.crm-co-key-toggle.is-key:hover { opacity: 0.85; }
.crm-co-anomaly-badge {
  flex-shrink: 0; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--c-orange, #f97316) 12%, transparent);
  color: var(--c-orange, #f97316);
  border: 1px solid color-mix(in srgb, var(--c-orange, #f97316) 35%, transparent);
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: all .15s var(--ease-spring);
}
.crm-co-anomaly-badge:hover {
  background: var(--c-orange, #f97316); color: white;
}

/* Override the crm-seg-members-list max-height for the company popup people grid
   so cards aren't clipped; the outer tabpanel already handles scrolling. */
#crmCoDetailPeople.crm-seg-members-list {
  max-height: none;
  overflow-y: visible;
  flex-direction: column;
  gap: 0;
}

/* ── Person card grid (company popup → Network → People) ── */
.crm-pcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.crm-pcard {
  background: var(--surf);
  /* Soft floating card — transparent border (state variants still color it)
     plus a subtle shadow instead of a hard grey outline. */
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04));
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  transition: box-shadow .15s var(--ease-spring), border-color .15s, transform .12s;
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
}
.crm-pcard:hover {
  border-color: color-mix(in srgb, var(--c-blue) 30%, var(--border));
  box-shadow: 0 4px 14px rgba(0,0,0,.07);
  transform: translateY(-2px);
}
.crm-pcard--key {
  background: color-mix(in srgb, var(--c-yellow, #f59e0b) 4%, var(--surf));
  border-color: color-mix(in srgb, var(--c-yellow, #f59e0b) 28%, var(--border));
}
.crm-pcard--primary {
  background: color-mix(in srgb, #0ea5e9 5%, var(--surf));
  border-color: color-mix(in srgb, #0ea5e9 30%, var(--border));
}
.crm-pcard--flagged {
  border-color: color-mix(in srgb, var(--c-orange, #f97316) 35%, var(--border));
}
.crm-pcard-top {
  display: flex; align-items: flex-start; gap: 10px;
}
/* Bulk-select box on a company's people cards. Ghosted until you hover the
   card or tick it, so 45 contacts don't read as 45 checkboxes. */
.crm-co-people-check {
  width: 15px; height: 15px; margin: 2px 0 0; flex-shrink: 0;
  cursor: pointer; accent-color: var(--c-blue, #2563eb);
  opacity: .28; transition: opacity .15s;
}
.crm-pcard:hover .crm-co-people-check,
.crm-co-people-check:checked,
.crm-co-people-check:focus-visible { opacity: 1; }
.crm-pcard-avatar-wrap {
  position: relative; flex-shrink: 0;
}
.crm-pcard-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
  overflow: hidden; flex-shrink: 0;
}
.crm-pcard-avatar img { width: 100%; height: 100%; object-fit: cover; }
.crm-pcard-lc-dot {
  position: absolute; bottom: 0; right: 0;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--surf);
}
.crm-pcard-info { flex: 1; min-width: 0; }
.crm-pcard-name {
  font-size: 13px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  min-width: 0;
}
/* The name wraps to a second line rather than ellipsing behind a MERGE
   badge — the card is a fixed grid cell and a half-read name is useless. */
.crm-pcard-name-txt {
  /* ⚠️ min-content, NOT 0. As a shrinkable flex item beside a MERGE badge the
     span was squeezed narrower than its own longest word, so "COREY WHITE"
     still broke into "CORE / Y". A floor of min-content makes the BADGE wrap
     to the next line instead of the name breaking mid-word. */
  min-width: min-content;
  /* break-word, not `anywhere` — `anywhere` drops min-content to one char and
     re-opens the same bug. */
  overflow-wrap: break-word;
  line-height: 1.25;
}
.crm-pcard-key-badge {
  font-size: 9px; padding: 1px 5px; border-radius: 4px;
  background: var(--c-yellow, #f59e0b); color: white; font-weight: 700;
  letter-spacing: 0.04em; flex-shrink: 0;
}
.crm-pcard-title {
  font-size: 11.5px; color: var(--ink3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.crm-pcard-pills {
  display: flex; align-items: center; gap: 5px; margin-top: 5px; flex-wrap: wrap;
}
.crm-pcard-lc-pill {
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  letter-spacing: 0.02em;
}
.crm-pcard-role-pill {
  font-size: 10px; color: var(--ink3); background: var(--surf2);
  border: 1px solid var(--border); padding: 2px 7px; border-radius: 999px;
}
.crm-pcard-actions {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.crm-pcard-star {
  width: 24px; height: 24px; border-radius: 5px; font-size: 14px;
  border: 1px solid var(--border); background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s;
}
.crm-pcard-star:hover { border-color: var(--c-yellow, #f59e0b); color: var(--c-yellow, #f59e0b); }
.crm-pcard-star.is-key { background: var(--c-yellow, #f59e0b); color: white; border-color: var(--c-yellow, #f59e0b); }
.crm-pcard-anomaly {
  width: 24px; height: 24px; border-radius: 5px; font-size: 12px;
  padding: 0; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c-orange, #f97316) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-orange, #f97316) 30%, transparent);
  color: var(--c-orange, #f97316); cursor: pointer; transition: all .15s;
}
.crm-pcard-anomaly:hover { background: var(--c-orange, #f97316); color: white; }
.crm-pcard-anomaly--critical {
  width: auto; padding: 0 8px; font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  background: #ef4444; border-color: #dc2626; color: #fff;
}
.crm-pcard-anomaly--critical:hover { background: #dc2626; color: #fff; }
.crm-pcard--duplicate {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, #ef4444 35%, transparent), 0 1px 3px rgba(239,68,68,.15);
}
/* A button now, not a label — it reads as a call to action, so it has to act
   like one. Keeps the same silhouette; gains a cursor and a hover state. */
.crm-pcard-dup-pill {
  font-size: 9px; padding: 1px 6px; border-radius: 4px;
  background: #ef4444; color: #fff; font-weight: 800; letter-spacing: 0.06em; flex-shrink: 0;
  border: 0; font-family: inherit; line-height: 1.5; cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.crm-pcard-dup-pill:hover { background: #dc2626; box-shadow: 0 1px 6px rgba(239,68,68,.4); }

/* ── Duplicate summary strip, top of the company People tab ── */
.crm-co-dup-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--c-orange, #f97316) 7%, var(--surf));
  border: 1px solid color-mix(in srgb, var(--c-orange, #f97316) 30%, var(--border));
  border-radius: var(--radius-sm, 8px);
}
.crm-co-dup-banner-icon {
  font-size: 15px; color: var(--c-orange, #f97316); flex-shrink: 0;
}
.crm-co-dup-banner-text {
  flex: 1; min-width: 0; font-size: 12px; color: var(--ink2); line-height: 1.45;
}
.crm-co-dup-banner-text strong { color: var(--ink); }
.crm-co-dup-banner-btn {
  flex-shrink: 0;
  background: var(--c-orange, #f97316); color: #fff; border-color: transparent;
}
.crm-co-dup-banner-btn:hover { background: #ea580c; }

/* ── A duplicate, shown as a record you can judge before deleting one ── */
.crm-anom-dup {
  border: 1px solid var(--border-s, #e5e7eb);
  border-radius: var(--radius-sm, 8px);
  background: var(--surf);
  padding: 9px 10px;
  margin-bottom: 8px;
}
.crm-anom-dup:last-child { margin-bottom: 0; }
.crm-anom-dup-head { display: flex; align-items: flex-start; gap: 8px; }
.crm-anom-dup-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; overflow: hidden;
  text-transform: uppercase;
}
.crm-anom-dup-avatar img { width: 100%; height: 100%; object-fit: cover; }
.crm-anom-dup-id { flex: 1; min-width: 0; }
.crm-anom-dup-name {
  font-size: 12px; font-weight: 700; color: var(--ink);
  overflow-wrap: break-word;
}
.crm-anom-dup-meta {
  font-size: 11px; color: var(--ink3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The verdict, stated before the irreversible button is pressed. */
.crm-anom-dup-verdict {
  flex-shrink: 0; font-size: 9px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 4px;
}
.crm-anom-dup-verdict--survivor { background: #dcfce7; color: #15803d; }
.crm-anom-dup-verdict--loser    { background: #fee2e2; color: #b91c1c; }
.crm-anom-dup-explain {
  font-size: 11px; color: var(--ink2); line-height: 1.45; margin: 7px 0 8px;
}
.crm-anom-dup-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-pcard-contacts {
  display: flex; flex-direction: column; gap: 3px;
}
.crm-pcard-contact-link {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--ink3); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .12s;
}
.crm-pcard-contact-link:hover { color: var(--c-blue); }
.crm-pcard-contact-link svg { flex-shrink: 0; opacity: .65; }
.crm-pcard-footer {
  font-size: 10.5px; color: var(--ink4);
  padding-top: 5px; margin-top: 2px;
}

/* Section header with inline action button (company activity notes/tasks) */
.crm-detail-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.crm-detail-section-hdr h3 { margin: 0; }

/* Clickable task rows with chevron affordance */
.crm-detail-task-row { display: flex; align-items: center; gap: 10px; }
.crm-detail-task-body { flex: 1; min-width: 0; }
.crm-detail-task-chevron { flex-shrink: 0; color: var(--ink4); opacity: .5; }
.crm-detail-task-row[data-task-id]:hover .crm-detail-task-chevron { opacity: 1; color: var(--c-blue); }

/* Empty-state copy when no key contacts have been starred yet. */
.crm-co-key-overview-empty {
  font-size: 12.5px; color: var(--ink3); font-style: italic;
  padding: 10px 14px; background: var(--surf2);
  border-radius: var(--radius-sm); border: 1px dashed var(--border);
}

/* Anomaly popover content (uses existing .crm-review-popover container). */
.crm-anomaly-flag {
  padding: 10px 12px; margin-bottom: 8px;
  background: color-mix(in srgb, var(--c-orange, #f97316) 5%, var(--surf));
  border: 1px solid color-mix(in srgb, var(--c-orange, #f97316) 25%, var(--border));
  border-radius: var(--radius-sm);
}
.crm-anomaly-flag:last-child { margin-bottom: 0; }
.crm-anomaly-flag-label {
  font-size: 12px; font-weight: 700;
  color: var(--c-orange, #f97316); margin-bottom: 4px;
}
.crm-anomaly-flag-detail {
  font-size: 12px; color: var(--ink2); line-height: 1.45;
}
.crm-anomaly-actions {
  margin-top: 8px; display: flex; flex-direction: column; gap: 4px;
}
.crm-seg-member-remove {
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--border); background: transparent;
  color: var(--ink3); cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: all var(--wt-transition); flex-shrink: 0;
}
.crm-seg-member-remove:hover {
  background: #fef2f2; color: #dc2626; border-color: #fca5a5;
}
.crm-seg-members-empty {
  text-align: center; padding: 24px; color: var(--ink4); font-size: 13px;
}

/* ═══ INLINE QUICK FIELDS (detail panel dropdowns) ═══ */
.crm-detail-quick-fields {
  display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 0 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  margin-bottom: 14px;
  /* `backwards`, not `both` — see the note on .crm-detail-section. */
  animation: crmFadeUp .25s var(--ease-spring) backwards;
}
.crm-qf-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--wt-neutral-bg, #f4f4f4);
  border-radius: 8px;
  transition: background .2s ease;
}
.crm-qf-row:hover { background: var(--c-blue-bg, #e6f3ff); }
.crm-qf-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink3, #6b7280); white-space: nowrap;
}
.crm-qf-select {
  font-size: 12px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid transparent; background: transparent;
  color: var(--ink, #111); cursor: pointer; min-width: 90px;
  font-weight: 600; font-family: var(--f);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.crm-qf-select:hover { border-color: var(--border); background: var(--surf); }
.crm-qf-select:focus { outline: none; border-color: var(--c-blue); background: var(--surf); box-shadow: 0 0 0 2px var(--c-blue-bg); }
.crm-qf-select--sm { font-size: 11px; padding: 3px 6px; min-width: 120px; flex: 1; }
/* Read-only badge for detail-panel quick fields (Lifecycle, Role, Tier,
   Contract, Status). Edit affordances live in the Edit modal only. */
.crm-qf-display {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surf2, #f3f4f6);
  color: var(--ink2, #475569);
  font-weight: 600;
  font-family: var(--f);
  display: inline-block;
  text-transform: capitalize;
  line-height: 1.4;
}
.crm-qf-display.is-set {
  background: var(--c-blue-bg, rgba(59,130,246,.12));
  color: var(--c-blue, #2563eb);
}
.crm-qf-display[data-value="active"],
.crm-qf-display[data-value="champion"] {
  background: rgba(22,163,74,.12);
  color: #15803d;
}
.crm-qf-display[data-value="at-risk"],
.crm-qf-display[data-value="dormant"],
.crm-qf-display[data-value="churned"],
.crm-qf-display[data-value="expired"],
.crm-qf-display[data-value="terminated"] {
  background: rgba(220,38,38,.12);
  color: #b91c1c;
}
.crm-qf-display[data-value="lead"],
.crm-qf-display[data-value="prospect"],
.crm-qf-display[data-value="pending"] {
  background: rgba(202,138,4,.14);
  color: #92400e;
}
.crm-qf-display[data-value="platinum"] { background: rgba(99,102,241,.14); color: #4338ca; }
.crm-qf-display[data-value="gold"]     { background: rgba(202,138,4,.14);  color: #92400e; }
.crm-qf-display[data-value="silver"]   { background: rgba(100,116,139,.14); color: #475569; }
.crm-qf-display[data-value="bronze"]   { background: rgba(180,83,9,.14);   color: #92400e; }

/* ═══ ADD TO GROUP (in detail panel) ═══ */
.crm-detail-add-group {
  display: flex; gap: 6px; margin-top: 8px; align-items: center;
}
.crm-detail-add-group .ch-btn--sm {
  font-size: 11px; padding: 3px 10px; white-space: nowrap;
}

/* ═══ COMPANY DETAIL AVATAR ═══ */
/* Uniformly circular per design — companies and persons match. */
.crm-detail-avatar--co { border-radius: 50%; }

/* ═══ CLICKABLE CONN TAGS ═══ */
.crm-detail-conn-tag--clickable {
  cursor: pointer; transition: background .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.crm-detail-conn-tag--clickable:hover {
  background: var(--wt-theme-primary-mist, #e0f2fe);
}
.crm-conn-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.crm-conn-sub {
  font-size: 11px; color: var(--ink4, #6b7280); margin-left: 4px;
}

/* ═══════════════════════════════════
   PERSON 360 — TAB BAR
   ═══════════════════════════════════ */
.crm-detail-tabs {
  display: flex;
  gap: 4px;
  padding: 0;
  border-bottom: none;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.crm-detail-tabs::-webkit-scrollbar { display: none; }
.crm-detail-tab {
  flex-shrink: 0;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink3, #6b7280);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
  margin-bottom: -1px;
  border-radius: 8px 8px 0 0;
}
.crm-detail-tab:hover { color: var(--ink, #111); background: rgba(0,0,0,.03); }
.crm-detail-tab--active {
  color: var(--c-blue, #0284c7);
  border-bottom-color: var(--c-blue, #0284c7);
  font-weight: 600;
  background: rgba(2,132,199,.06);
}

/* ── Activity view toggle (List / Calendar) ── */
.crm-detail-activity-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}
.crm-detail-view-toggle {
  display: inline-flex;
  background: var(--surf2, #f3f4f6);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.crm-detail-view-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--ink3, #6b7280);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.crm-detail-view-btn:hover { color: var(--ink, #111); }
.crm-detail-view-btn--active {
  background: var(--surf, #fff);
  color: var(--c-blue, #0284c7);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.crm-detail-activity-calendar { min-height: 520px; }
.crm-detail-activity-calendar[hidden] { display: none !important; }
.crm-detail-tab .crm-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--c-blue, #0284c7);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  margin-left: 5px;
  vertical-align: middle;
}
.crm-detail-tab .crm-tab-badge:empty { display: none; }

/* ── Tab panels ── */
.crm-detail-tabpanel {
  display: none;
  flex: 1;
  overflow-y: auto;
}
.crm-detail-tabpanel--active { display: block; }

/* ── Activity timeline ── */
.crm-detail-timeline { display: flex; flex-direction: column; gap: 8px; }
.crm-detail-timeline-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: flex-start;
}
.crm-detail-tl-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surf2, #f3f4f6);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}
.crm-detail-tl-icon svg { width: 13px; height: 13px; color: var(--ink3, #6b7280); }
.crm-detail-tl-body {}
.crm-detail-tl-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink, #111);
  line-height: 1.4;
}
.crm-detail-tl-meta {
  font-size: 11px;
  color: var(--ink4, #9ca3af);
  margin-top: 1px;
}

/* ── Notes list ── */
.crm-detail-notes-list { display: flex; flex-direction: column; gap: 8px; }
.crm-detail-note-card {
  background: var(--surf2, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 10px 12px;
}
.crm-detail-note-title {
  font-size: 12px; font-weight: 600; color: var(--ink, #111); margin-bottom: 3px;
}
.crm-detail-note-body {
  font-size: 12px; color: var(--ink2, #374151); line-height: 1.5;
}
.crm-detail-note-meta {
  font-size: 11px; color: var(--ink4, #9ca3af); margin-top: 5px;
}

/* ── Tasks list ── */
.crm-detail-tasks-list { display: flex; flex-direction: column; gap: 6px; }
.crm-detail-task-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--surf2, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 7px;
}
.crm-detail-task-status {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.crm-detail-task-status--open    { background: var(--c-blue, #0284c7); }
.crm-detail-task-status--done    { background: #16a34a; }
.crm-detail-task-status--blocked { background: #ef4444; }
.crm-detail-task-name {
  flex: 1; font-size: 12px; font-weight: 500; color: var(--ink, #111);
}
.crm-detail-task-meta {
  font-size: 11px; color: var(--ink4, #9ca3af); flex-shrink: 0;
}

/* ── Campaign memberships ── */
.crm-detail-campaigns { display: flex; flex-direction: column; gap: 8px; }
.crm-detail-campaign-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  background: var(--surf2, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-left: 3px solid var(--c-blue, #0284c7);
  border-radius: 8px;
  padding: 10px 12px;
}
.crm-detail-campaign-name {
  font-size: 12px; font-weight: 600; color: var(--ink, #111);
}
.crm-detail-campaign-meta {
  font-size: 11px; color: var(--ink4, #9ca3af); margin-top: 2px;
}
.crm-detail-campaign-status {
  font-size: 10px; font-weight: 600; padding: 3px 7px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.crm-detail-campaign-status--active   { background: #dcfce7; color: #166534; }
.crm-detail-campaign-status--draft    { background: #f3f4f6; color: #6b7280; }
.crm-detail-campaign-status--paused   { background: #fef9c3; color: #854d0e; }
.crm-detail-campaign-status--complete { background: #e0f2fe; color: #0369a1; }

/* ── Deals list ── */
.crm-detail-deals-list { display: flex; flex-direction: column; gap: 8px; }
.crm-detail-deal-card {
  background: var(--surf2, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
}
.crm-detail-deal-name {
  font-size: 12px; font-weight: 600; color: var(--ink, #111);
}
.crm-detail-deal-meta {
  font-size: 11px; color: var(--ink4, #9ca3af); margin-top: 2px;
}
.crm-detail-deal-amount {
  font-size: 13px; font-weight: 700; color: #16a34a;
}

/* ── Files list ── */
.crm-detail-files-list { display: flex; flex-direction: column; gap: 6px; }
.crm-detail-file-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--surf2, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 7px;
}
.crm-detail-file-icon {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--c-blue-mist, #e0f2fe);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.crm-detail-file-icon svg { width: 14px; height: 14px; color: var(--c-blue, #0284c7); }
.crm-detail-file-name {
  flex: 1; font-size: 12px; font-weight: 500; color: var(--ink, #111);
}
.crm-detail-file-meta {
  font-size: 11px; color: var(--ink4, #9ca3af); flex-shrink: 0;
}
.crm-detail-file-row a {
  color: var(--c-blue, #0284c7); font-size: 11px; text-decoration: none;
}
.crm-detail-file-row a:hover { text-decoration: underline; }

/* ── Time Entry rows ────────────────────────────────────── */
.crm-detail-time-row {
  display: grid;
  grid-template-columns: 48px 1fr auto auto;
  gap: 6px 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--surf2, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  margin-bottom: 6px;
}
.crm-detail-time-hours {
  font-size: 15px; font-weight: 700;
  color: var(--c-blue, #0284c7); text-align: center;
  line-height: 1;
}
.crm-detail-time-hours span {
  display: block; font-size: 10px; font-weight: 400;
  color: var(--ink3, #6b7280); text-transform: uppercase; letter-spacing: .04em;
}
.crm-detail-time-desc {
  font-size: 13px; color: var(--ink, #111827); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-detail-time-meta {
  font-size: 11px; color: var(--ink4, #9ca3af);
  white-space: nowrap;
}
.crm-detail-time-amount {
  font-size: 12px; font-weight: 600;
  color: var(--c-green, #16a34a); text-align: right; white-space: nowrap;
}

/* ── Project cards ──────────────────────────────────────── */
.crm-detail-project-card {
  border: 1px solid var(--border, #e2e8f0);
  border-left: 3px solid var(--c-blue, #0284c7);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--surf, #fff);
}
.crm-detail-project-card--complete { border-left-color: var(--c-green, #16a34a); }
.crm-detail-project-card--at-risk  { border-left-color: #f59e0b; }
.crm-detail-project-card--red      { border-left-color: #ef4444; }
.crm-detail-project-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px; margin-bottom: 6px;
}
.crm-detail-project-name {
  font-size: 13px; font-weight: 600; color: var(--ink, #111827);
  flex: 1; min-width: 0;
}
.crm-detail-project-role {
  font-size: 11px; color: var(--ink3, #6b7280);
  background: var(--surf2, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px; padding: 2px 8px; white-space: nowrap; flex-shrink: 0;
}
.crm-detail-project-meta {
  display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px;
  color: var(--ink3, #6b7280); margin-bottom: 6px;
}
.crm-detail-project-meta strong {
  font-weight: 600; color: var(--ink, #111827);
}
.crm-detail-project-progress {
  height: 4px; background: var(--border, #e2e8f0); border-radius: 2px; overflow: hidden;
}
.crm-detail-project-progress-fill {
  height: 100%; border-radius: 2px; background: var(--c-blue, #0284c7);
  transition: width .3s ease;
}

/* ── Score history list ─────────────────────────────────── */
.crm-detail-scores-history {
  display: flex; flex-direction: column; gap: 4px;
}
.crm-detail-score-row {
  display: grid;
  grid-template-columns: 140px 1fr 60px 60px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--surf2, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  font-size: 12px;
}
.crm-detail-score-type {
  font-weight: 600; color: var(--ink, #111827);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-detail-score-bar-wrap {
  height: 6px; background: var(--border, #e2e8f0); border-radius: 3px; overflow: hidden;
}
.crm-detail-score-bar {
  height: 100%; border-radius: 3px; background: var(--c-blue, #0284c7);
}
.crm-detail-score-val {
  font-weight: 700; color: var(--ink, #111827); text-align: right;
}
.crm-detail-score-trend {
  font-size: 11px; text-align: center;
}
.crm-detail-score-trend--up   { color: var(--c-green, #16a34a); }
.crm-detail-score-trend--down { color: #ef4444; }
.crm-detail-score-trend--flat { color: var(--ink4, #9ca3af); }

/* ── Deal member badge (role / influence on deal cards) ─── */
.crm-detail-deal-role {
  display: inline-flex; gap: 4px; flex-wrap: wrap; margin-top: 4px;
}
.crm-detail-deal-role-badge {
  font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 10px;
  background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;
}
.crm-detail-deal-role-badge--primary {
  background: #ecfdf5; color: #065f46; border-color: #a7f3d0;
}
.crm-detail-deal-role-badge--influence {
  background: #fef9c3; color: #92400e; border-color: #fde68a;
}

/* ── Plan step list inside plan cards ───────────────────── */
.crm-detail-plan-steps {
  margin-top: 8px; border-top: 1px solid var(--border, #e2e8f0); padding-top: 6px;
}
.crm-detail-plan-step {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0; font-size: 11px; color: var(--ink, #111827);
}
.crm-detail-plan-step-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--border, #e2e8f0);
}
.crm-detail-plan-step--done .crm-detail-plan-step-dot   { background: var(--c-green, #16a34a); }
.crm-detail-plan-step--active .crm-detail-plan-step-dot { background: var(--c-blue, #0284c7); }
.crm-detail-plan-step--blocked .crm-detail-plan-step-dot { background: #ef4444; }
.crm-detail-plan-step-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-detail-plan-step-seq {
  font-size: 10px; color: var(--ink4, #9ca3af); flex-shrink: 0;
  min-width: 18px; text-align: center;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .crm-row,
  .crm-deal-card--enter,
  .crm-pipeline-cards > .crm-deal-card,
  .ch-view--active,
  .crm-detail-section,
  .crm-score-badge,
  .crm-detail-quick-fields,
  .ch-stat,
  .ch-section,
  .ch-empty {
    animation: none !important;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════
   ANIMATED OVERLAY (open/close)
   ═══════════════════════════════════ */
.ch-overlay--closing {
  background: rgba(15, 23, 42, 0) !important;
  backdrop-filter: blur(0px) !important;
  -webkit-backdrop-filter: blur(0px) !important;
  /* Leave with the modal rather than lingering behind it. */
  transition-duration: .2s !important;
}
.ch-overlay--closing .ch-modal {
  animation: crmModalOut .2s cubic-bezier(.4, 0, .7, .3) forwards;
}
/* Mirrors crmFadeScaleIn's distance — the old .95/12px close fell twice as far
   as the open rose, which is what made dismissing a popup feel like a snap. */
@keyframes crmModalOut {
  to { opacity: 0; transform: scale(.97) translateY(8px); }
}

/* ═══════════════════════════════════
   SAVE FEEDBACK — green flash on selects
   ═══════════════════════════════════ */
@keyframes crmSaveFlash {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.4); }
  50%  { box-shadow: 0 0 0 4px rgba(22,163,74,.15); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
.crm-qf-select--saved {
  border-color: #16a34a !important;
  animation: crmSaveFlash .5s ease;
}

/* ═══════════════════════════════════
   ROW HIGHLIGHT — flash after create/edit
   ═══════════════════════════════════ */
@keyframes crmRowHighlight {
  0%   { background: color-mix(in srgb, var(--c-blue) 12%, var(--surf)); }
  100% { background: transparent; }
}
.crm-row--highlight {
  animation: crmRowHighlight 1.2s ease both;
}

/* ═══════════════════════════════════
   CONNECT-TO-PLAN QUICK ACTION
   ═══════════════════════════════════ */
.crm-detail-plan-connect {
  display: flex; gap: 8px; margin-top: 10px; align-items: center;
}
.crm-detail-plan-connect select {
  flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 12px; font-family: var(--f);
  background: var(--surf); color: var(--ink); cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.crm-detail-plan-connect select:focus {
  outline: none; border-color: var(--c-blue);
  box-shadow: 0 0 0 2px var(--c-blue-bg);
}
.crm-detail-plan-connect .ch-btn {
  flex-shrink: 0;
}

/* ═══════════════════════════════════
   DETAIL PANEL HEADER ENHANCEMENTS
   ═══════════════════════════════════ */
.crm-detail-header {
  padding: 20px 24px 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-blue) 3%, var(--surf)), var(--surf));
  border-bottom: 1px solid var(--border-s);
}
/* "← Back to <company>" breadcrumb in the person detail header. First flex
   item, so it sits left of the avatar. ⚠️ The [hidden] rule is required —
   an author `display` beats the hidden attribute and the button would show
   on every person, pointing nowhere. */
.crm-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: center;
  flex-shrink: 0;
  max-width: 190px;
  padding: 5px 10px 5px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surf);
  color: var(--ink2, #475569);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.crm-detail-back[hidden] { display: none; }
.crm-detail-back > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-detail-back:hover {
  background: color-mix(in srgb, var(--c-blue) 8%, var(--surf));
  border-color: color-mix(in srgb, var(--c-blue) 35%, var(--border));
  color: var(--c-blue, #2563eb);
}
.crm-detail-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.crm-detail-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: #fff;
  flex-shrink: 0; text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  transition: transform .25s var(--ease-spring);
  overflow: hidden;
}
.crm-detail-header:hover .crm-detail-avatar { transform: scale(1.05); }
.crm-detail-avatar-upload {
  position: absolute;
  right: -6px;
  bottom: -6px;
  border: 1px solid rgba(255,255,255,.9);
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15,23,42,.18);
}
.crm-detail-avatar-upload:hover {
  background: var(--c-blue);
}
.crm-detail-name {
  font-size: 18px; font-weight: 800; color: var(--ink);
  letter-spacing: -.02em; margin: 0;
}
.crm-detail-subtitle {
  font-size: 13px; color: var(--ink3); margin: 2px 0 0;
}
.crm-detail-body {
  padding: 0;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.crm-detail-quick-fields { padding: 0 0 14px; display: flex; flex-wrap: wrap; gap: 14px; }
.crm-detail-scores { padding: 0; }
.crm-detail-tabpanel { padding: 20px 24px 28px; overflow-y: auto; flex: 1; }
.crm-detail-section h3 {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink3); margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-s);
}
.crm-detail-scores {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px;
}
.crm-detail-props {
  display: flex; flex-direction: column; gap: 4px;
}
.crm-detail-prop {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; padding: 3px 0;
}
.crm-detail-prop-label {
  font-weight: 600; color: var(--ink3); min-width: 80px; flex-shrink: 0;
  font-size: 12px;
}
.crm-detail-prop-val {
  color: var(--ink); word-break: break-word;
}
.crm-detail-connections {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.crm-detail-metrics {
  display: grid;
  /* Force exactly 8 columns so the 16-tile grid lays out evenly:
     8 on top, 8 on the bottom. minmax(0, 1fr) lets tiles shrink to
     prevent overflow on narrower detail panels. */
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 0 4px;
}
/* On narrow detail panels (< ~720px) drop to 4-across so the labels
   stay readable. The 16 tiles still split evenly: 4 rows of 4. */
@media (max-width: 720px) {
  .crm-detail-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Skeleton / empty states — always look good when data is absent */
.crm-detail-scores:empty::before {
  content: 'Awaiting scoring data';
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: crmShimmer 1.6s linear infinite;
  font-size: 12px;
  color: var(--ink3);
}
.crm-detail-score-badge--skeleton {
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%) !important;
  background-size: 200% 100% !important;
  animation: crmShimmer 1.6s linear infinite;
  color: var(--ink3) !important;
}
.crm-detail-coverage-empty {
  grid-column: 1 / -1;
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--ink3);
  background: var(--surf2, #f9fafb);
  border: 1px dashed var(--border);
  border-radius: 10px;
  text-align: center;
}

/* ═══════════════════════════════════
   SHELL BUTTON BLUR (while detail modal open)
   Matches the top-level FAB stack (Improve, Notes, Preview/Edit,
   Ask AI) so they're visibly unreachable while a contact is open.
   Selectors come from assets/js/quick-tools-registry.js
   ═══════════════════════════════════ */
body.crm-detail-open .ph-nav-wrap,
body.crm-detail-open .wt-ask-ai-fab,
body.crm-detail-open .wt-improve-fab,
body.crm-detail-open [data-wt-improve-btn],
body.crm-detail-open .wt-notes-fab,
body.crm-detail-open [data-wt-notes-btn],
body.crm-detail-open [data-wt-edit-fab],
body.crm-detail-open .wt-fab-stack,
body.crm-detail-open [data-shell-btn] {
  filter: blur(3px);
  pointer-events: none;
  user-select: none;
  transition: filter .25s ease;
}
.crm-detail-metric {
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff, var(--surf2, #f8fafc));
  border: 1px solid var(--border-s);
  text-align: left;
  font: inherit;
  color: inherit;
  display: block;
  width: 100%;
  min-width: 0;
}
button.crm-detail-metric {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.crm-detail-metric--clickable:hover {
  border-color: color-mix(in srgb, var(--c-blue, #2563eb) 35%, var(--border-s));
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--c-blue, #2563eb) 5%, var(--surf2, #f8fafc)));
  box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--c-blue, #2563eb) 30%, transparent);
  transform: translateY(-1px);
}
.crm-detail-metric--clickable:hover .crm-detail-metric-label {
  color: var(--c-blue, #2563eb);
}
.crm-detail-metric--clickable:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px -2px color-mix(in srgb, var(--c-blue, #2563eb) 30%, transparent);
}
.crm-detail-metric--clickable:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--c-blue, #2563eb) 70%, transparent);
  outline-offset: 2px;
}
.crm-detail-metric.is-empty {
  opacity: .55;
}
.crm-detail-metric.is-empty:hover {
  opacity: 1;
}
.crm-detail-metric-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink3);
  transition: color .15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-detail-metric-value {
  margin-top: 3px;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-sidebar-group-summary {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c-blue) 5%, var(--surf));
  border: 1px solid color-mix(in srgb, var(--c-blue) 10%, var(--border-s));
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.5;
}
.crm-detail-timeline {
  display: flex; flex-direction: column; gap: 6px;
}
.crm-detail-tl-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 8px;
  transition: background .15s ease;
}
.crm-detail-tl-item:hover { background: var(--surf2, #f9fafb); }
.crm-detail-tl-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.crm-detail-tl-text {
  font-size: 12.5px; color: var(--ink2); flex: 1; min-width: 0;
}
.crm-detail-tl-date {
  font-size: 11px; color: var(--ink4); flex-shrink: 0;
}
.crm-detail-ai-text {
  font-size: 13px; color: var(--ink2); line-height: 1.6;
  padding: 10px 14px; background: var(--surf2, #f9fafb);
  border-radius: 8px; margin: 0;
}
.crm-detail-plans {
  display: flex; flex-wrap: wrap; gap: 6px;
}

/* ═══════════════════════════════════
   PANEL CLOSE BUTTON HOVER
   ═══════════════════════════════════ */
.ch-panel-close {
  width: 32px; height: 32px; border: none; border-radius: 8px;
  background: transparent; color: var(--ink3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s var(--ease-spring);
}
.ch-panel-close:hover {
  background: var(--c-red-bg); color: var(--c-red); transform: rotate(90deg);
}
.crm-detail-actions {
  display: flex; gap: 4px; margin-left: auto;
}

/* ═══════════════════════════════════
   SIDEBAR SECTION TRANSITIONS
   ═══════════════════════════════════ */
.ph-sb-section {
  /* `backwards`, not `both` — see the note on .crm-detail-section. The
     staggered delays below still get their FROM state, which is the point. */
  animation: crmFadeUp .25s var(--ease-spring) backwards;
}
.ph-sb-section:nth-child(2) { animation-delay: .04s; }
.ph-sb-section:nth-child(3) { animation-delay: .08s; }
.ph-sb-section:nth-child(4) { animation-delay: .12s; }

/* ═══════════════════════════════════
   TOOLTIP / MICRO-INTERACTION
   ═══════════════════════════════════ */
.crm-badge {
  transition: transform .15s var(--ease-spring), box-shadow .15s ease;
}
.crm-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* ═══════════════════════════════════
   SMOOTH SCROLLBAR
   ═══════════════════════════════════ */
.crm-detail-body::-webkit-scrollbar { width: 5px; }
.crm-detail-body::-webkit-scrollbar-track { background: transparent; }
.crm-detail-body::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 10px;
}
.crm-detail-body::-webkit-scrollbar-thumb:hover { background: var(--ink3); }

/* ═══════════════════════════════════
   AUTOMATIONS VIEW (embedded health dashboard)
   ═══════════════════════════════════ */

/* Loading / empty state */
.crm-auto-loading {
  text-align: center; padding: 48px 24px; color: var(--ink3); font-size: 14px;
}

/* ── Sidebar search ── */
.crm-auto-sb-search {
  position: relative; margin: 0 0 10px;
}
.crm-auto-sb-search input {
  width: 100%; padding: 8px 10px 8px 32px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 12px; background: var(--surf);
  box-sizing: border-box; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.crm-auto-sb-search input:focus {
  border-color: var(--c-blue); outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.crm-auto-sb-search input::placeholder { color: var(--ink4); }
.crm-auto-sb-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--ink4); pointer-events: none;
}

/* Status dots */
.crm-auto-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink4); flex-shrink: 0; margin-right: 6px;
}
.crm-auto-dot--ok       { background: var(--c-green); }
.crm-auto-dot--fail     { background: var(--c-red); }
.crm-auto-dot--untested { background: var(--ink4); }
.crm-auto-dot--testing  { background: var(--c-yellow); animation: autoRotate 1s linear infinite; }

@keyframes autoRotate { to { opacity: .4; } from { opacity: 1; } }

/* Sidebar badges */
.crm-auto-badge--red  { background: var(--c-red-bg) !important; color: var(--c-red) !important; }
.crm-auto-badge--green { background: var(--c-green-bg) !important; color: var(--c-green) !important; }

/* Sidebar status dot (category health) */
.crm-auto-sb-status {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; margin-right: 2px;
}
.crm-auto-sb-status--green { background: var(--c-green); box-shadow: 0 0 4px rgba(34,197,94,.4); }
.crm-auto-sb-status--red   { background: var(--c-red); box-shadow: 0 0 4px rgba(239,68,68,.4); }
.crm-auto-sb-status--yellow { background: var(--c-yellow); box-shadow: 0 0 4px rgba(234,179,8,.4); }

.ph-sb-item-label { flex: 1; text-align: left; }

/* ── Header ── */
.crm-auto-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; padding: 0 0 20px; border-bottom: 1px solid var(--border-s);
  margin-bottom: 20px; flex-wrap: wrap;
}
.crm-auto-header-left h2 {
  font-size: 18px; font-weight: 700; margin: 0 0 4px; color: var(--ink);
}
.crm-auto-header-left p {
  font-size: 13px; color: var(--ink3); margin: 0; line-height: 1.5;
}

/* ── Summary strip ── */
#crmAutoSummary {
  display: flex; gap: 6px; flex-shrink: 0;
}
.crm-auto-stat {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 8px 14px; background: var(--surf); border: 1px solid var(--border-s);
  border-radius: 10px; min-width: 58px;
}
.crm-auto-stat-num { font-size: 20px; font-weight: 700; line-height: 1.1; }
.crm-auto-stat-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink3); font-weight: 600; }

/* ── Category group ── */
.crm-auto-cat-group { margin-bottom: 28px; }
.crm-auto-cat-title {
  font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: .4px;
}
.crm-auto-cat-title::after {
  content: ''; flex: 1; height: 1px; background: var(--border-s);
}
.crm-auto-cat-count {
  font-size: 11px; font-weight: 600; color: var(--ink3); background: var(--wt-neutral-bg);
  padding: 1px 8px; border-radius: 20px; text-transform: none; letter-spacing: 0;
}

/* ── Card grid ── */
.crm-auto-cards { /* container for groups */ }
.crm-auto-cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 10px; margin-bottom: 0;
}

/* ── Cards ── */
.crm-auto-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; background: var(--surf); border: 1px solid var(--border-s);
  border-radius: 10px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.crm-auto-card:hover {
  border-color: var(--c-blue); box-shadow: 0 2px 12px rgba(37,99,235,.08);
  transform: translateY(-1px);
}
.crm-auto-card-dot {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
}
.crm-auto-card-dot.crm-auto-dot--ok      { background: var(--c-green); }
.crm-auto-card-dot.crm-auto-dot--fail    { background: var(--c-red); }
.crm-auto-card-dot.crm-auto-dot--untested { background: var(--ink4); color: var(--ink2); }
.crm-auto-card-dot.crm-auto-dot--testing  { background: var(--c-yellow); }

.crm-auto-card-body { flex: 1; min-width: 0; }
.crm-auto-card-body h4 { font-size: 13px; font-weight: 600; margin: 0 0 3px; color: var(--ink); }
.crm-auto-card-body p  { font-size: 11.5px; color: var(--ink3); margin: 0 0 7px; line-height: 1.4; }

.crm-auto-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.crm-auto-tag {
  display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 10px;
  font-weight: 600; background: var(--wt-neutral-bg); color: var(--ink2-4);
}
.crm-auto-tag--method {
  font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  letter-spacing: .3px; background: var(--wt-neutral-bg);
}

.crm-auto-card-crm { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.crm-auto-crm-pill {
  display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 10px;
  font-weight: 600; background: var(--c-blue-bg); color: var(--c-blue);
}

.crm-auto-card-actions {
  flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
}
.crm-auto-test-btn {
  padding: 5px 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surf); font-size: 11px; font-weight: 600; cursor: pointer;
  color: var(--ink2); transition: all .15s;
}
.crm-auto-test-btn:hover { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
.crm-auto-test-btn:disabled { opacity: .5; cursor: default; }

.crm-auto-result {
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 6px; white-space: nowrap;
}
.crm-auto-result--ok   { color: var(--c-green); background: var(--c-green-bg); }
.crm-auto-result--fail  { color: var(--c-red); background: var(--c-red-bg); }

/* Spinner */
.crm-auto-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: autoSpin .6s linear infinite;
}
@keyframes autoSpin { to { transform: rotate(360deg); } }

/* ── Detail view ── */
.crm-auto-back { margin-bottom: 12px; }
.crm-auto-detail-section {
  background: var(--surf); border: 1px solid var(--border-s);
  border-radius: 10px; padding: 18px; margin-bottom: 12px;
}
.crm-auto-detail-section h3 {
  font-size: 13px; font-weight: 700; margin: 0 0 12px; color: var(--ink);
  text-transform: uppercase; letter-spacing: .3px;
}
.crm-auto-detail-row {
  display: flex; gap: 12px; padding: 8px 0; font-size: 12px; border-bottom: 1px solid var(--border-s);
  align-items: center;
}
.crm-auto-detail-row:last-child { border-bottom: none; }
.crm-auto-dlabel {
  flex-shrink: 0; width: 100px; font-weight: 600; color: var(--ink3);
}
.crm-auto-detail-test { margin-bottom: 10px; }
.crm-auto-detail-result {
  margin-top: 8px; padding: 12px; border-radius: 10px; font-size: 12px; line-height: 1.5;
}

/* Automations sidebar action buttons */
.crm-auto-actions {
  display: flex; gap: 6px; padding: 0 0 8px;
}
.crm-auto-act-btn {
  flex: 1; padding: 6px 0; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surf); font-size: 11px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  color: var(--ink2); transition: background .15s, color .15s;
}
.crm-auto-act-btn:hover { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }

/* ═══════════════════════════════════
   EDIT PERSON AVATAR ROW
   ═══════════════════════════════════ */
.crm-edit-avatar-row {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 4px 0 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-s);
}
.crm-edit-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surf2, #f3f4f6);
  border: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink2);
}
.crm-edit-avatar img { width: 100%; height: 100%; object-fit: cover; }
.crm-edit-avatar-controls { display: flex; flex-direction: column; gap: 4px; }
.crm-edit-avatar-hint { font-size: 11px; color: var(--ink3); }

/* ═══════════════════════════════════
   TASKS VIEW
   ═══════════════════════════════════ */
.crm-tasks-scope {
  display: inline-flex;
  background: var(--surf2, #f3f4f6);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  margin-right: 8px;
}
.crm-tasks-scope-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--ink3);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.crm-tasks-scope-btn:hover { color: var(--ink); }
.crm-tasks-scope-btn--active {
  background: var(--surf, #fff);
  color: var(--c-blue);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.crm-tasks-hint {
  font-size: 12px;
  color: var(--ink3);
  margin: 0 0 10px;
  padding: 8px 12px;
  background: var(--c-blue-bg, #e6f3ff);
  border-radius: 8px;
  border-left: 3px solid var(--c-blue);
}
.crm-tasks-hint strong { color: var(--ink); font-weight: 600; }

.crm-task-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; border-radius: var(--radius); background: var(--surf);
  border: 1px solid var(--border); transition: border-color .15s, box-shadow .15s;
  position: relative;
}
.crm-task-card:hover {
  border-color: var(--c-blue); box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.crm-task-card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.crm-task-priority {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
}
.crm-task-status {
  font-size: 11px; font-weight: 600; text-transform: capitalize;
}
.crm-task-card-title {
  font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.4;
}
.crm-task-card-meta {
  display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--ink3);
  align-items: center;
}
.crm-task-type-badge, .crm-task-source-badge {
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 8px;
  background: var(--c-blue-bg, rgba(59,130,246,.1)); color: var(--c-blue);
}
.crm-task-source-badge {
  background: var(--c-purple-bg, rgba(139,92,246,.1)); color: var(--c-purple, #8b5cf6);
}
#crmTasksList {
  display: flex; flex-direction: column; gap: 8px;
}
#crmRoutingRulesList table { border-collapse: collapse; }
#crmRoutingRulesList th { text-align: left; padding: 8px; font-size: 12px; color: var(--ink3); border-bottom: 1px solid var(--border); }
#crmRoutingRulesList td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
#crmRoutingRulesList input { font-size: 12px; padding: 4px 8px; }

/* ── Person 360 — Finance / Support / Engagement tab rows ────────────── */
.crm-detail-contracts-list,
.crm-detail-subscriptions-list,
.crm-detail-invoices-list,
.crm-detail-payments-list,
.crm-detail-quotes-list,
.crm-detail-tickets-list,
.crm-detail-events-list,
.crm-detail-emailevents-list,
.crm-detail-surveys-list,
.crm-detail-referrals-list,
.crm-detail-docviews-list {
  display: flex; flex-direction: column; gap: 8px;
}
.crm-detail-row {
  background: var(--surf2, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-left: 3px solid var(--c-blue, #0284c7);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.crm-detail-row--compact { padding: 7px 10px; gap: 2px; border-left-width: 2px; }
.crm-detail-row-title {
  font-size: 12px; font-weight: 600; color: var(--ink, #111);
}
.crm-detail-row-meta {
  font-size: 11px; color: var(--ink4, #9ca3af); line-height: 1.45;
}
.crm-detail-row-desc {
  font-size: 11px; color: var(--ink3, #6b7280);
  margin-top: 4px; padding: 6px 8px;
  background: var(--surf1, #fff);
  border-radius: 6px;
  white-space: pre-wrap;
}
.crm-detail-row-link {
  font-size: 11px; margin-top: 2px;
}
.crm-detail-row-link a { color: var(--c-blue, #0284c7); text-decoration: none; }
.crm-detail-row-link a:hover { text-decoration: underline; }

/* Ticket priority accents */
.crm-detail-row--priority-urgent   { border-left-color: #dc2626; }
.crm-detail-row--priority-high     { border-left-color: #ea580c; }
.crm-detail-row--priority-medium   { border-left-color: #ca8a04; }
.crm-detail-row--priority-low      { border-left-color: #16a34a; }
.crm-detail-row--priority-critical { border-left-color: #991b1b; }

/* ─── Industry combobox ─── */
.crm-combobox { position: relative; }
.crm-combobox-input { width: 100%; }
.crm-combobox-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1000;
  max-height: 240px;
  overflow-y: auto;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 4px;
}
.crm-combobox-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: inherit;
  color: var(--c-text, #111);
  cursor: pointer;
}
.crm-combobox-item:hover,
.crm-combobox-item:focus {
  background: var(--c-hover, #f3f4f6);
  outline: none;
}
.crm-combobox-empty {
  padding: 10px;
  font-size: 13px;
  color: var(--c-muted, #6b7280);
  text-align: center;
}
.crm-combobox-create {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  margin-top: 4px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--c-border, #e5e7eb);
  border-radius: 0 0 6px 6px;
  font: inherit;
  font-weight: 600;
  color: var(--c-accent, #2563eb);
  cursor: pointer;
}
.crm-combobox-create:hover { background: var(--c-hover, #f3f4f6); }
.crm-combobox-meta {
  font-size: 11px;
  font-weight: 400;
  color: var(--c-muted, #94a3b8);
  margin-left: 4px;
}

/* ═══ IMAGE CROPPER (Person / Company / Group) ═══════════════════════ */
.crm-crop-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 2147483646;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s, visibility .25s;
}
.crm-crop-overlay[aria-hidden="false"] {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.crm-crop-panel {
  width: min(92vw, 420px);
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 24px 60px rgba(15,23,42,.45);
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0;
  transform: translateY(14px) scale(.97);
  transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease;
}
.crm-crop-overlay[aria-hidden="false"] .crm-crop-panel {
  opacity: 1; transform: translateY(0) scale(1);
}
.crm-crop-title {
  font-size: 14px; font-weight: 700; color: #0f172a;
}
.crm-crop-area {
  width: 240px; height: 240px;
  margin: 0 auto;
  position: relative;
  border-radius: 14px;
  background: #f1f5f9;
  overflow: hidden;
}
.crm-crop-img {
  position: absolute; left: 0; top: 0;
  cursor: grab; user-select: none;
  will-change: transform;
}
.crm-crop-mask {
  position: absolute; inset: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 999px rgba(15,23,42,.55);
  pointer-events: none;
}
/* Square mask for company/group (rectangular logo). Toggled via class. */
.crm-crop-mask--square {
  border-radius: 16px;
  outline: 2px dashed rgba(255,255,255,.65);
  outline-offset: -8px;
}
.crm-crop-controls {
  display: flex; align-items: center; gap: 10px;
  padding: 0 4px;
}
.crm-crop-controls input[type="range"] { flex: 1; }
.crm-crop-actions {
  display: flex; justify-content: flex-end; gap: 8px;
}


/* ═══════════════════════════════════════════════════════════
   CRM Report Builder (modular) — modern 3-pane layout
   ═══════════════════════════════════════════════════════════ */
.crb-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: stretch;
  min-height: calc(100vh - 260px);
  padding: 4px 4px 24px;
}
@media (max-width: 1180px) {
  .crb-shell { grid-template-columns: 200px minmax(0, 1fr) 280px; }
}
@media (max-width: 980px) {
  .crb-shell { grid-template-columns: 1fr; }
}

.crb-pane {
  background: var(--surf, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--radius, 16px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.crb-pane--data    { padding: 16px; }
.crb-pane--canvas  { padding: 0; }
.crb-pane--config  { padding: 14px; overflow-y: auto; max-height: calc(100vh - 200px); }

.crb-pane-head {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink3, #6b7280);
  text-transform: uppercase;
  margin: 0 0 10px;
}
.crb-pane-head--with-action {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.crb-tpl-save-btn {
  font: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  border: 1px dashed var(--border, #e0e0e0);
  background: transparent;
  color: var(--c-blue, #004b7c);
  padding: 3px 8px; border-radius: 6px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.crb-tpl-save-btn:hover {
  background: var(--c-blue-bg, #e6f0ff);
  border-color: var(--c-blue, #004b7c);
  border-style: solid;
}
.crb-tpl-section {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink3, #6b7280);
  padding: 8px 10px 4px;
}

/* ── Name dialog (modal-on-modal) ──────────────── */
/* 🚫 THIS WAS z-index: 10000 AND IT OPENED BEHIND THE GROUP EDITOR.
   Tyler: "when you click Add Group inside the pop-up, all shows up behind."
   Exactly that — "Add a group inside" asks for a name through this dialog,
   and `.ch-overlay` (the editor it is asked FROM) sits at 2147483000, so the
   dialog rendered under it: you got a dimmer screen, a keyboard trap and no
   visible box. The z-index here is a WINDOW, not a big number — above the
   editor and the templates popup (2147483300), below `.crm-sel-pop`
   (2147483645) so coded dropdowns still land on top of it. Same window the
   filter builder lives in. */
.crb-namedlg-overlay {
  position: fixed; inset: 0;
  z-index: 2147483400;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: crbNameFadeIn .15s ease-out;
}
@keyframes crbNameFadeIn { from { opacity: 0; } to { opacity: 1; } }
.crb-namedlg {
  position: relative;
  width: min(440px, 100%);
  background: var(--surf, #fff);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  padding: 24px 24px 20px;
  animation: crbNamePop .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes crbNamePop { from { transform: translateY(8px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.crb-namedlg-x {
  position: absolute; top: 10px; right: 12px;
  width: 28px; height: 28px;
  border: none; background: transparent;
  font-size: 22px; line-height: 1; color: var(--ink3, #6b7280);
  border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.crb-namedlg-x:hover { background: var(--ink-bg, #f4f4f5); color: var(--ink, #161616); }
.crb-namedlg-title {
  margin: 0 0 6px;
  font-size: 17px; font-weight: 700; color: var(--ink, #161616);
}
.crb-namedlg-sub {
  margin: 0 0 18px;
  font-size: 12.5px; color: var(--ink3, #6b7280); line-height: 1.5;
}
.crb-namedlg-label {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink2, #393939);
  margin-bottom: 6px;
}
.crb-namedlg-input {
  width: 100%;
  font: inherit; font-size: 14px;
  padding: 10px 12px;
  border: 1.5px solid var(--border, #e0e0e0);
  border-radius: 8px;
  background: var(--surf, #fff);
  color: var(--ink, #161616);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.crb-namedlg-input:focus {
  border-color: var(--c-blue, #004b7c);
  box-shadow: 0 0 0 3px rgba(0, 75, 124, .15);
}
.crb-namedlg-err {
  margin-top: 6px; font-size: 12px; color: #b91c1c;
}
.crb-namedlg-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 20px;
}

/* ── Source list ─────────────────────────────── */
.crb-srclist { display: flex; flex-direction: column; gap: 4px; }
.crb-src {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--ink, #161616);
  text-align: left;
  transition: background .12s, border-color .12s;
}
.crb-src:hover { background: var(--ink-bg, #f4f4f5); }
.crb-src.is-active {
  background: var(--c-blue-bg, #e6f0ff);
  border-color: var(--c-blue, #004b7c);
  color: var(--c-blue, #004b7c);
  font-weight: 600;
}
.crb-src-icon { font-size: 16px; line-height: 1; }
.crb-src-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,.06);
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--ink2, #393939);
}
.crb-src.is-active .crb-src-count {
  background: var(--c-blue, #004b7c);
  color: #fff;
}

/* ── Templates ──────────────────────────────── */
.crb-tpl { display: flex; flex-direction: column; gap: 4px; }
.crb-tpl-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font: inherit; font-size: 12.5px;
  color: var(--ink2, #393939);
  text-align: left;
}
.crb-tpl-item:hover { background: var(--ink-bg, #f4f4f5); color: var(--ink, #161616); }
.crb-tpl-item--user {
  display: grid;
  grid-template-columns: 14px 1fr 22px;
  align-items: center;
  gap: 8px;
}
.crb-tpl-item--user .crb-tpl-label {
  flex: 1; min-width: 0; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crb-tpl-del {
  width: 22px; height: 22px;
  border: none; background: transparent;
  color: var(--ink3, #6b7280);
  font-size: 18px; line-height: 1; cursor: pointer;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .12s, background .12s, color .12s;
}
.crb-tpl-item--user:hover .crb-tpl-del { opacity: 1; }
.crb-tpl-del:hover { background: #fee2e2; color: #991b1b; }

/* ── Canvas ─────────────────────────────────── */
.crb-canvas-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border, #e0e0e0);
  background: var(--surf, #fff);
}
.crb-canvas-head-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.crb-canvas-head-row--top { justify-content: space-between; }
.crb-canvas-head-row--top .crb-name-input { flex: 1 1 auto; min-width: 120px; }
.crb-canvas-head-row--top .crb-canvas-actions { flex: 0 0 auto; }
.crb-name-input {
  font-size: 18px;
  font-weight: 600;
  border: none;
  background: transparent;
  outline: none;
  color: var(--ink, #161616);
  padding: 4px 0;
  border-bottom: 1px dashed transparent;
}
.crb-name-input:focus { border-bottom-color: var(--c-blue, #004b7c); }

.crb-viz-tabs {
  display: inline-flex;
  background: var(--ink-bg, #f4f4f5);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.crb-viz-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: var(--ink3, #6b7280);
  border-radius: 7px;
  cursor: pointer;
  transition: all .15s;
}
.crb-viz-tab:hover { color: var(--ink, #161616); }
.crb-viz-tab.is-active {
  background: var(--surf, #fff);
  color: var(--c-blue, #004b7c);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  font-weight: 600;
}

.crb-canvas-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.crb-canvas {
  padding: 18px;
  overflow: auto;
  flex: 1;
  background: linear-gradient(180deg, #fafbfc 0%, #fff 60px);
}
.crb-canvas-summary {
  font-size: 12px;
  color: var(--ink3, #6b7280);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border, #e0e0e0);
}
.crb-canvas-summary b { color: var(--ink, #161616); font-weight: 600; }

/* ── Empty state ─────────────────────────── */
.crb-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px;
  padding: 60px 24px;
  color: var(--ink3, #6b7280);
  text-align: center;
}
.crb-empty-title { font-size: 15px; font-weight: 600; color: var(--ink, #161616); }
.crb-empty-desc  { font-size: 13px; max-width: 340px; }

/* ── Table ──────────────────────────────── */
.crb-table-wrap {
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.crb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.crb-table th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink3, #6b7280);
  padding: 10px 12px;
  background: #fafbfc;
  border-bottom: 1px solid var(--border, #e0e0e0);
  position: sticky;
  top: 0;
}
.crb-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #f1f2f4;
  color: var(--ink, #161616);
  vertical-align: middle;
}
.crb-table tr:last-child td { border-bottom: none; }
.crb-table tr:hover td { background: #fafbfc; }
.crb-group-row td {
  background: #f4f6fa !important;
  font-size: 12px;
  color: var(--ink2, #393939);
  padding: 8px 12px;
}
.crb-group-meta { color: var(--ink3, #6b7280); font-weight: 400; margin-left: 8px; }
.crb-muted { color: var(--ink4, #9ca3af); }
.crb-more-note {
  font-size: 11px;
  color: var(--ink3, #6b7280);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}

/* ── Score cells ────────────────────────── */
.crb-score { display: inline-flex; align-items: center; gap: 8px; min-width: 80px; }
.crb-score-bar {
  flex: 1;
  height: 6px;
  background: #eef0f3;
  border-radius: 3px;
  overflow: hidden;
  min-width: 40px;
  max-width: 80px;
}
.crb-score-fill { display: block; height: 100%; border-radius: 3px; transition: width .3s; }
.crb-score-num { font-variant-numeric: tabular-nums; font-size: 12px; min-width: 22px; text-align: right; }

/* ── Charts ─────────────────────────────── */
.crb-chart {
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 10px;
  padding: 16px;
}
.crb-chart svg { width: 100%; height: auto; max-height: 320px; }
.crb-legend {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  margin: -8px 0 16px;
  padding: 12px 16px;
  background: #fafbfc;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 10px;
  font-size: 12px;
  color: var(--ink2, #393939);
}
.crb-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.crb-legend-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.crb-legend-val { color: var(--ink3, #6b7280); margin-left: 4px; font-variant-numeric: tabular-nums; }

/* ── KPI cards ──────────────────────────── */
.crb-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.crb-kpi {
  background: #fff;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04));
}
.crb-kpi-label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink3, #6b7280);
  font-weight: 600;
  margin-bottom: 6px;
}
.crb-kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--c-blue, #004b7c);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* ── Config panel ──────────────────────── */
.crb-section {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f2f4;
}
.crb-section:last-child { border-bottom: none; padding-bottom: 0; }
.crb-section-head {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink3, #6b7280);
  text-transform: uppercase;
  margin: 0 0 8px;
}
.crb-section-body { display: flex; flex-direction: column; gap: 6px; }
.crb-cols {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 200px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 8px;
  background: #fafbfc;
}
.crb-chk {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--ink2, #393939);
}
.crb-chk:hover { background: rgba(0,75,124,.06); }
.crb-chk input { accent-color: var(--c-blue, #004b7c); }

.crb-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 7px;
  font: inherit;
  font-size: 12.5px;
  background: #fff;
  color: var(--ink, #161616);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.crb-input:focus {
  border-color: var(--c-blue, #004b7c);
  box-shadow: 0 0 0 3px rgba(0,75,124,.12);
}
.crb-input--readonly { background: #f4f4f5; color: var(--ink3, #6b7280); display: inline-flex; align-items: center; justify-content: center; }
.crb-row-label {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink3, #6b7280);
  margin: 4px 0 2px;
}

.crb-filter {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 24px;
  gap: 4px;
  padding: 6px;
  background: #fafbfc;
  border: 1px solid #eaecef;
  border-radius: 8px;
  margin-bottom: 4px;
}
.crb-filter .crb-input { padding: 5px 7px; font-size: 11.5px; }
.crb-icon-btn {
  background: transparent;
  border: none;
  font-size: 16px;
  color: var(--ink3, #6b7280);
  cursor: pointer;
  border-radius: 5px;
  line-height: 1;
}
.crb-icon-btn:hover { background: var(--c-red-bg, #fee); color: var(--c-red, #b91c1c); }
.crb-empty-mini { font-size: 12px; color: var(--ink3, #6b7280); padding: 6px 0; font-style: italic; }
.crb-add-btn {
  margin-top: 4px;
  background: transparent;
  border: 1px dashed var(--border, #e0e0e0);
  color: var(--c-blue, #004b7c);
  padding: 6px 10px;
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
}
.crb-add-btn:hover { background: var(--c-blue-bg, #e6f0ff); border-color: var(--c-blue, #004b7c); }

/* ── Saved-report top-bar actions ─────────── */
.crb-report-actions {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border, #e0e0e0);
}
.crb-report-meta {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink3, #6b7280);
}

/* ── Builder inside modal ── */
.crb-modal { width: min(96vw, 1280px); max-width: 96vw; height: min(92vh, 860px); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.crb-modal .ch-modal-header { padding: 14px 20px; border-bottom: 1px solid var(--border, #e0e0e0); }
.crb-modal .ch-modal-body { flex: 1; min-height: 0; overflow: hidden; }
.crb-modal #crmReportBuilderHost { height: 100%; overflow: hidden; }
.crb-modal .crb-shell { min-height: 0; height: 100%; padding: 14px; }
.crb-modal .crb-pane--config { max-height: none; }
.crb-modal .crb-canvas { max-height: none; }

/* Multi-select chips */
.crb-multi {
  grid-column: 3 / 4;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 110px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 7px;
  background: #fff;
}
.crb-filter:has(.crb-multi) { grid-template-columns: 1fr 1fr 24px; }
.crb-filter:has(.crb-multi) .crb-multi { grid-column: 1 / -2; margin-top: 4px; }
.crb-multi-chk {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px;
  background: var(--ink-bg, #f4f4f5);
  border-radius: 5px;
  padding: 3px 7px;
  cursor: pointer;
  color: var(--ink2, #393939);
}
.crb-multi-chk:has(input:checked) {
  background: var(--c-blue-bg, #e6f0ff);
  color: var(--c-blue, #004b7c);
  font-weight: 600;
}
.crb-multi-chk input { accent-color: var(--c-blue, #004b7c); margin: 0; }


/* ═══════════════════════════════════════════════════════════════
   RIGHT ASIDE PANELS (People / Companies / Groups insights)
   ═══════════════════════════════════════════════════════════════ */
.ph-hub--with-aside {
  grid-template-columns: 220px minmax(0, 1fr);
}
.ph-hub--aside-only {
  grid-template-columns: minmax(0, 1fr);
}
/* People view: scorecards span the full content width on top, then a 2-column
   body splits into the People list (wider, left) and a sticky "Recently Added"
   aside (right). Mirrors Work.html (.wk-body) and CRM Meet (.crm-meet-meetings-grid). */
.crm-people-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}
.crm-people-body-main { min-width: 0; }
.crm-people-body > .ph-aside--inline {
  /* Scroll with the page \u2014 NOT in its own scroll wheel. The whole page
     scrolls so users can see Recently Added + Activity Pulse + anything
     else we add below in one continuous flow. */
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  align-self: start;
  padding: 0;
  position: static;
  max-height: none;
  overflow: visible;
}
@media (max-width: 1180px) {
  .crm-people-body { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────
   Person profile -> Activity tab: per-channel sub-tabs
   Each sub-tab is its own browseable list — clicking one hides
   every other section so heavy chat/email never buries Notes,
   Tasks, etc. Active sub-tab is keyed on the timeline element,
   resets when a different person is opened.
   ──────────────────────────────────────────────────────────── */
.crm-detail-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 8px 0;
  margin: -4px -4px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  position: sticky;
  top: 0;
  background: var(--surf, #fff);
  z-index: 5;
}
.crm-detail-subtab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border: none;
  background: transparent;
  color: var(--ink2, #374151);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
  margin-bottom: -1px;
  white-space: nowrap;
}
.crm-detail-subtab:hover {
  background: color-mix(in srgb, var(--c-blue, #3b82f6) 6%, transparent);
  color: var(--ink, #111827);
}
.crm-detail-subtab.is-active {
  color: var(--c-blue, #3b82f6);
  border-bottom-color: var(--c-blue, #3b82f6);
  background: color-mix(in srgb, var(--c-blue, #3b82f6) 8%, transparent);
}
.crm-detail-subtab.is-empty {
  color: var(--ink4, #9ca3af);
  opacity: .55;
}
.crm-detail-subtab.is-empty:hover {
  opacity: .85;
}
.crm-detail-subtab-icon {
  flex-shrink: 0;
  color: currentColor;
}
.crm-detail-subtab-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surf2, #f1f5f9);
  color: var(--ink3, #6b7280);
  font-size: 11px;
  font-weight: 700;
}
.crm-detail-subtab.is-active .crm-detail-subtab-n {
  background: var(--c-blue, #3b82f6);
  color: #fff;
}
.crm-detail-subtab.is-empty .crm-detail-subtab-n {
  background: transparent;
  color: var(--ink4, #9ca3af);
}

/* ────────────────────────────────────────────────────────────
   Detail panel — left-sidebar variant for sub-tabs.
   Used by Activity / Deals & Plans / Finance / Marketing & Support /
   Network so a tab with many sections doesn't read as a stacked
   "second header" under the main tab bar. The sub-tab nav becomes
   a vertical rail on the left, content flows in the right column.
   Falls back to the original horizontal style on narrow viewports.
   ──────────────────────────────────────────────────────────── */
/* Only the ACTIVE --side panel becomes a grid. Inactive panels keep
   the inherited `display: none` from .crm-detail-tabpanel; otherwise
   every hidden panel's sub-tab rail bleeds onto the active tab. */
.crm-detail-tabpanel--side.crm-detail-tabpanel--active {
  display: grid;
  grid-template-columns: 196px 1fr;
  column-gap: 28px;
  align-items: start;
}
/* Sidebar nav: column 1, spans every row so it sits flush with the
   first content row and stretches the full panel height. */
.crm-detail-tabpanel--side > .crm-detail-subtabs--side {
  grid-column: 1;
  grid-row: 1 / span 99;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 2px;
  padding: 8px 6px;
  margin: 0;
  border-bottom: none;
  border-right: 1px solid var(--border, #e5e7eb);
  background: transparent;
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 100%;
  z-index: 4;
}
/* Every other panel child sits in column 2. */
.crm-detail-tabpanel--side > *:not(.crm-detail-subtabs--side) {
  grid-column: 2;
  min-width: 0; /* prevents overflow from long timeline content */
}
/* Sub-tab buttons stack vertically, full-width, with a left
   accent bar on the active one (instead of the bottom underline). */
.crm-detail-subtabs--side .crm-detail-subtab {
  width: 100%;
  justify-content: flex-start;
  border-bottom: none;
  border-left: 2px solid transparent;
  border-radius: 6px;
  padding: 9px 12px;
  margin-bottom: 0;
  text-align: left;
}
.crm-detail-subtabs--side .crm-detail-subtab.is-active {
  border-bottom-color: transparent;
  border-left-color: var(--c-blue, #3b82f6);
  background: color-mix(in srgb, var(--c-blue, #3b82f6) 8%, transparent);
}
/* Push the count badge to the right edge so the rail reads cleanly. */
.crm-detail-subtabs--side .crm-detail-subtab-n {
  margin-left: auto;
}
/* Section sub-tabs (Finance/Marketing/Network/Deals) have no icons —
   give them a touch more vertical breathing room since they're shorter. */
.crm-detail-subtabs--side.crm-detail-subtabs--sections .crm-detail-subtab {
  padding: 10px 12px;
  font-size: 13px;
}

/* Narrow viewports: collapse the sidebar back to the horizontal sub-tab
   bar so we don't burn a third of a phone screen on navigation. */
@media (max-width: 820px) {
  .crm-detail-tabpanel--side {
    display: block;
  }
  .crm-detail-tabpanel--side > .crm-detail-subtabs--side {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--border, #e5e7eb);
    padding: 8px 8px 0;
    margin: -4px -4px 12px;
    min-height: 0;
  }
  .crm-detail-subtabs--side .crm-detail-subtab {
    width: auto;
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
  }
  .crm-detail-subtabs--side .crm-detail-subtab.is-active {
    border-left-color: transparent;
    border-bottom-color: var(--c-blue, #3b82f6);
  }
  .crm-detail-subtabs--side .crm-detail-subtab-n {
    margin-left: 0;
  }
}

/* ────────────────────────────────────────────────────────────
   Person profile -> Activity tab: filter toolbar
   Per-person search + faceted filters. State lives on the
   timeline element, so opening a different person resets
   filters automatically.
   ──────────────────────────────────────────────────────────── */
.crm-detail-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--surf2, #f8fafc);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
}
/* Flex layout (icon · input · clear are siblings with a gap) so the
   magnifier can never overlap the placeholder/text, regardless of the
   surrounding cascade. The border + focus ring live on the wrapper; the
   input itself is borderless and transparent. */
.crm-detail-filter-search {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--surf, #fff);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.crm-detail-filter-search:focus-within {
  border-color: var(--c-blue, #3b82f6);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-blue, #3b82f6) 18%, transparent);
}
.crm-detail-filter-search-icon {
  flex: 0 0 auto;
  color: var(--ink3, #6b7280);
  pointer-events: none;
}
.crm-detail-filter-search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 0;
  border: none;
  background: transparent;
  color: var(--ink, #111827);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.crm-detail-filter-search-input:focus { outline: none; box-shadow: none; }
.crm-detail-filter-search-clear {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: none;
  background: var(--surf2, #f1f5f9);
  color: var(--ink3, #6b7280);
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.crm-detail-filter-search-clear:hover {
  background: var(--surf3, #e2e8f0);
  color: var(--ink, #111827);
}
.crm-detail-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.crm-detail-filter-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink3, #6b7280);
  min-width: 64px;
  flex-shrink: 0;
}
.crm-detail-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--surf, #fff);
  border: 1px solid var(--border, #e5e7eb);
  color: var(--ink2, #374151);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s ease;
  white-space: nowrap;
}
.crm-detail-chip:hover {
  border-color: var(--c-blue, #3b82f6);
  color: var(--ink, #111827);
}
.crm-detail-chip.is-active {
  background: linear-gradient(135deg, var(--c-blue, #3b82f6), var(--c-purple, #8b5cf6));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 1px 4px rgba(59, 130, 246, .35);
}
.crm-detail-chip-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 5px;
  height: 16px;
  border-radius: 999px;
  background: var(--surf2, #f1f5f9);
  color: var(--ink3, #6b7280);
  font-size: 10px;
  font-weight: 700;
}
.crm-detail-chip.is-active .crm-detail-chip-n {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}
.crm-detail-filter-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px dashed var(--border, #e5e7eb);
}
.crm-detail-filter-count {
  font-size: 11px;
  color: var(--ink3, #6b7280);
  font-weight: 600;
}
.crm-detail-filter-reset {
  background: transparent;
  border: none;
  color: var(--c-blue, #3b82f6);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.crm-detail-filter-reset:hover { text-decoration: underline; }

/* ────────────────────────────────────────────────────────────
   Person profile -> Activity tab: card-based timeline
   Each activity is a clickable card that opens the shared
   activity-detail modal. Designed to feel like the Sales Hub
   feed but compact and at-a-glance scannable.
   ──────────────────────────────────────────────────────────── */
.crm-act-cards {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.crm-act-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 3px;
  width: 100%;
}
.crm-act-card {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: var(--surf, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 7px;
  padding: 6px 10px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink, #111827);
  transition: border-color .12s ease, background .12s ease;
}
.crm-act-card:hover {
  border-color: #93c5fd;
  background: color-mix(in srgb, #2563eb 3%, var(--surf, #fff));
}
.crm-act-card:active { opacity: .85; }
.crm-act-card:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.crm-act-card-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
}
.crm-act-card-icon svg {
  width: 12px;
  height: 12px;
}
.crm-act-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 6px;
  overflow: hidden;
}
/* Person badge on company activity cards — tiny avatar/name pill showing
   which linked person this activity belongs to */
.crm-act-card-via {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--ink3);
  margin-bottom: 1px;
}
.crm-act-card-contact-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; color: var(--ink2);
  background: var(--surf2); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 6px 1px 2px;
}
.crm-act-card-contact-avatar {
  width: 16px; height: 16px; border-radius: 50%;
  font-size: 7px; font-weight: 700; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.crm-act-card-kind {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.crm-act-card-when {
  flex-shrink: 0;
  font-size: 10.5px;
  color: var(--ink4, #6b7280);
  white-space: nowrap;
}
.crm-act-card-title {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink2, #374151);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-act-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.crm-act-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg, #f3f4f6);
  color: var(--ink3, #4b5563);
  border: 1px solid var(--border, #e5e7eb);
}
.crm-act-chip--accent {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
.crm-act-chip--rec {
  background: #eef2ff;
  color: #4338ca;
  border-color: #c7d2fe;
}
/* ── Activity row blur visual ──────────────────────────────────
   When the visibility model returns vo_visibility='blurred', the
   row title + summary are swapped server-side for redacted content
   and client-side for realistic-looking placeholder text. CSS blur
   + non-selectable + low opacity makes it read as "private". The
   staff actor mini-avatar stays sharp so the user always knows
   WHO from the team owns the row. */
.crm-blur-text {
  filter: blur(4.5px);
  user-select: none;
  pointer-events: none;
  color: var(--ink2, #334155);
  opacity: .82;
}
.crm-act-card.is-blurred .crm-act-card-title { /* extra polish on the card */
  font-style: italic;
}
.crm-act-card-staff,
.crm-detail-tl-staff {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--c-blue, #3b82f6) 14%, transparent);
  color: var(--c-blue, #1d4ed8);
  font: 700 10.5px/1 var(--f, system-ui);
  border: 1px solid color-mix(in srgb, var(--c-blue, #3b82f6) 28%, transparent);
  margin: 0 6px;
  flex-shrink: 0;
}
.crm-act-card-staff img,
.crm-detail-tl-staff img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.crm-act-card-staff--initials,
.crm-detail-tl-staff--initials {
  background: color-mix(in srgb, var(--ink, #0f172a) 8%, transparent);
  color: var(--ink, #0f172a);
  border-color: color-mix(in srgb, var(--ink, #0f172a) 18%, transparent);
}
/* Generic "MRG team" pill when no specific staff resolved */
.crm-act-card-staff--team,
.crm-detail-tl-staff--team {
  background: color-mix(in srgb, var(--c-blue, #3b82f6) 18%, transparent);
  color: var(--c-blue, #1d4ed8);
  border-color: color-mix(in srgb, var(--c-blue, #3b82f6) 32%, transparent);
  font-size: 9.5px;
}

/* MRG brand pill — generic actor (Vapi AI calls, marketing sends,
   un-attributable shared-mailbox rows). Wider pill carrying the brand
   mark + readable label so it's instantly distinguishable from a person. */
.crm-act-card-staff--brand,
.crm-detail-tl-staff--brand {
  width: auto;
  min-width: 26px;
  height: 26px;
  padding: 0 9px 0 5px;
  border-radius: 999px;
  gap: 5px;
  background: linear-gradient(135deg,
    color-mix(in srgb, #6366f1 14%, var(--surface, #fff)) 0%,
    color-mix(in srgb, #0ea5e9 14%, var(--surface, #fff)) 100%);
  color: var(--ink, #0f172a);
  border-color: color-mix(in srgb, #6366f1 30%, transparent);
}
.crm-act-card-staff--brand .crm-vo-mark,
.crm-detail-tl-staff--brand .crm-vo-mark {
  flex: 0 0 auto;
  width: 14px; height: 14px;
}
.crm-act-card-staff-label,
.crm-detail-tl-staff-label {
  font: 600 10.5px/1 var(--f, system-ui);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Initials stand in for the gradient "V" on any CRM that is not VisionOne's —
   see _crmBrandMark(). Sized to match .crm-vo-mark exactly so the pill keeps
   its geometry whichever mark it carries. */
.crm-brand-initials {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #0ea5e9);
  color: #fff;
  font: 700 7.5px/1 var(--f, system-ui);
  letter-spacing: 0.02em;
}

/* ── The folded email card ──────────────────────────────────────────────────
   One row per EMAIL, not per tracking pixel. This is the muted line under the
   subject that says what became of it. Grey by default because delivery is
   unremarkable; only a bounce earns colour. */
.crm-act-card-staff--auto {
  width: auto;
  min-width: 26px;
  height: 26px;
  padding: 0 9px 0 6px;
  border-radius: 999px;
  gap: 5px;
  background: var(--surface-2, #f1f5f9);
  color: var(--muted, #64748b);
  border-color: color-mix(in srgb, var(--muted, #64748b) 22%, transparent);
}
.crm-act-card-emailstatus {
  margin-top: 3px;
  font: 500 11px/1.35 var(--f, system-ui);
  color: var(--muted, #64748b);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.crm-act-card-emailstatus.is-bounced {
  color: #b91c1c;
  font-weight: 600;
}
/* The provider's own words for a bounce. Monospaced and dimmed — it is a
   quotation from the receiving server, not our sentence. */
.crm-act-card-emailreason {
  font: 500 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted, #64748b);
  background: var(--surface-2, #f1f5f9);
  border-radius: 4px;
  padding: 1px 5px;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.crm-act-card-cta {
  flex: 0 0 auto;
  align-self: center;
  color: var(--ink4, #9ca3af);
  display: flex;
  align-items: center;
  justify-content: center;
}
.crm-act-card:hover .crm-act-card-cta { color: #2563eb; }
.ph-aside { display: none !important; }
.ph-aside {
  position: sticky;
  top: 60px;
  align-self: start;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0 40px;
  scrollbar-width: thin;
}
.ph-aside::-webkit-scrollbar { width: 4px; }
.ph-aside::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Compact card style optimized for the 360px aside column. */
.crm-people-body > .ph-aside--inline .crm-aside-card {
  padding: 12px 12px 14px;
  gap: 8px;
}
.crm-people-body > .ph-aside--inline .crm-aside-item {
  padding: 7px 8px;
}
.crm-people-body > .ph-aside--inline .crm-aside-item-name {
  font-size: 13px;
}
.crm-people-body > .ph-aside--inline .crm-aside-item-meta {
  font-size: 11px;
}

.crm-aside-card {
  background: var(--surf);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: crmSlideIn .4s var(--ease-spring) both;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.crm-aside-card:hover {
  box-shadow: 0 10px 28px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04);
  border-color: color-mix(in srgb, var(--c-blue, #2563eb) 22%, var(--border, #e5e7eb));
}

/* "Activity Pulse" — second aside card with rolled-up activity counts */
.crm-aside-pulse-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.crm-aside-pulse-cell {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 9px;
  padding: 10px 11px;
  background: var(--surf, #fff);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color .15s ease, transform .12s ease;
}
.crm-aside-pulse-cell:hover { transform: translateY(-1px); }
.crm-aside-pulse-cell-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink1, #111827);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.crm-aside-pulse-cell-lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink3, #6b7280);
}
.crm-aside-pulse-cell--call    { border-top: 2px solid #16a34a; }
.crm-aside-pulse-cell--missed  { border-top: 2px solid #dc2626; }
.crm-aside-pulse-cell--sms     { border-top: 2px solid #0ea5e9; }
.crm-aside-pulse-cell--booked  { border-top: 2px solid #7c3aed; }
.crm-aside-card--accent-blue { border-top: 3px solid var(--c-blue); }
.crm-aside-card--accent-green { border-top: 3px solid var(--c-green); }
.crm-aside-card--accent-amber { border-top: 3px solid #f59e0b; }
.crm-aside-card--accent-purple { border-top: 3px solid var(--c-purple); }
.crm-aside-card--accent-rose { border-top: 3px solid #f43f5e; }
.crm-aside-card--accent-teal { border-top: 3px solid #0d9488; }

.crm-aside-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.crm-aside-card-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ink2);
}
.crm-aside-card-title svg { width: 13px; height: 13px; }
.crm-aside-card-count {
  font-size: 10.5px; font-weight: 700; padding: 2px 7px;
  border-radius: 999px; background: var(--c-soft); color: var(--ink2);
}
.crm-aside-card-sub {
  font-size: 11.5px; color: var(--ink3); margin-top: -4px;
}
.crm-aside-list { display: flex; flex-direction: column; gap: 6px; }
.crm-aside-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 9px; border-radius: 9px;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease, border-color .15s ease;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  width: 100%;
}
.crm-aside-item:hover {
  background: color-mix(in srgb, var(--c-blue, #2563eb) 6%, var(--surf, #fff));
  border-color: color-mix(in srgb, var(--c-blue, #2563eb) 22%, transparent);
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(37, 99, 235, .08);
}
.crm-aside-item:active { transform: translateX(2px) scale(.99); }
.crm-aside-item-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.crm-aside-item-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Person + company avatars are now uniformly circular per design — keep
   the --square modifier as a no-op so existing markup doesn't break,
   but render circular like everything else. */
.crm-aside-item-avatar--square { border-radius: 50%; }
.crm-aside-item-body { flex: 1; min-width: 0; }
/* Inline variant: name + secondary meta share one row, name takes the
   available width (truncating with ellipsis), meta hugs the right edge
   with a small gap. Used in Recently Added + Activity Pulse rows so the
   time stays visually close to the name and never escapes the card. */
.crm-aside-item-body--inline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
}
.crm-aside-item-body--inline .crm-aside-item-name {
  flex: 1 1 auto;
  min-width: 0;
}
.crm-aside-item-body--inline .crm-aside-item-meta {
  flex: 0 0 auto;
  max-width: 50%;
}
.crm-aside-item-name {
  font-size: 12.5px; font-weight: 600; color: var(--ink1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block;
}
.crm-aside-item-meta {
  font-size: 11px; color: var(--ink3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block;
}
/* Hard containment guarantee: nothing inside an aside card may visually
   escape the card's padding box, even if a long single token slips
   through the truncation rules. */
.crm-aside-card { overflow: hidden; min-width: 0; }
.crm-aside-list { min-width: 0; }
.crm-aside-item { max-width: 100%; min-width: 0; box-sizing: border-box; }
.crm-aside-item-val {
  font-size: 12px; font-weight: 700; color: var(--ink1);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.crm-aside-item-val--score {
  padding: 2px 7px; border-radius: 6px;
  background: var(--c-blue-bg); color: var(--c-blue);
  font-size: 11px;
}
.crm-aside-item-val--warn {
  background: #fef3c7; color: #92400e;
}
.crm-aside-item-val--danger {
  background: #fee2e2; color: #991b1b;
}
.crm-aside-empty {
  font-size: 11.5px; color: var(--ink3);
  text-align: center; padding: 8px 4px;
}

/* Bar chart in aside cards (industry / tier breakdowns) */
.crm-aside-bars { display: flex; flex-direction: column; gap: 6px; }
.crm-aside-bar-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.crm-aside-bar-label { flex: 0 0 80px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-aside-bar-track { flex: 1; height: 7px; background: var(--c-soft); border-radius: 4px; overflow: hidden; }
.crm-aside-bar-fill { height: 100%; border-radius: 4px; transition: width .4s var(--ease-spring); }
.crm-aside-bar-val { flex: 0 0 28px; text-align: right; font-weight: 700; color: var(--ink2); font-variant-numeric: tabular-nums; }

/* Sparkline / pulse stat */
.crm-aside-pulse {
  display: flex; align-items: baseline; gap: 8px;
}
.crm-aside-pulse-num {
  font-size: 26px; font-weight: 700; color: var(--ink1);
  font-variant-numeric: tabular-nums;
}
.crm-aside-pulse-delta {
  font-size: 11.5px; font-weight: 600;
}
.crm-aside-pulse-delta--up { color: var(--c-green); }
.crm-aside-pulse-delta--down { color: #ef4444; }
.crm-aside-pulse-label {
  font-size: 11.5px; color: var(--ink3);
}

@media (max-width: 1280px) {
  .ph-hub--with-aside { grid-template-columns: 200px minmax(0, 1fr) 250px; }
  .ph-hub--aside-only { grid-template-columns: minmax(0, 1fr) 250px; }
}
@media (max-width: 1080px) {
  .ph-hub--with-aside { grid-template-columns: 220px 1fr; }
  .ph-hub--aside-only { grid-template-columns: 1fr; }
  .ph-aside { display: none; }
}
@media (max-width: 900px) {
  .ph-hub--with-aside { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   PLAN CARDS — unique design per plan type
   ═══════════════════════════════════════════════════════════════ */
.crm-plan-card {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--surf);
  border: 1px solid var(--border);
  border-left: 4px solid var(--c-purple);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  box-shadow: var(--shadow-sm);
}
.crm-plan-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.crm-plan-card--person { border-left-color: var(--c-blue); }
.crm-plan-card--company { border-left-color: #0d9488; }
.crm-plan-card--journey { border-left-color: #f59e0b; }

.crm-plan-card-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #6d28d9, #a855f7);
}
.crm-plan-card-icon svg { width: 22px; height: 22px; }
.crm-plan-card--person .crm-plan-card-icon { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.crm-plan-card--company .crm-plan-card-icon { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.crm-plan-card--journey .crm-plan-card-icon { background: linear-gradient(135deg, #b45309, #f59e0b); }

.crm-plan-card-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.crm-plan-card-name {
  font-size: 14.5px; font-weight: 700; color: var(--ink1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crm-plan-card-meta {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  font-size: 11.5px; color: var(--ink3);
}
.crm-plan-card-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 999px;
  background: var(--c-soft); color: var(--ink2);
  font-weight: 600; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .3px;
}
.crm-plan-card--person .crm-plan-card-chip--type { background: var(--c-blue-bg); color: var(--c-blue); }
.crm-plan-card--company .crm-plan-card-chip--type { background: #ccfbf1; color: #0f766e; }
.crm-plan-card--journey .crm-plan-card-chip--type { background: #fef3c7; color: #92400e; }

.crm-plan-card-stage {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--ink2);
}
.crm-plan-card-stage-arrow { color: var(--ink3); }
.crm-plan-card-stage strong { color: var(--ink1); font-weight: 600; }

.crm-plan-card-progress-wrap {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  min-width: 110px;
}
.crm-plan-card-progress-num {
  font-size: 13px; font-weight: 700; color: var(--ink1);
  font-variant-numeric: tabular-nums;
}
.crm-plan-card-progress-label {
  font-size: 10.5px; color: var(--ink3); font-weight: 500;
  text-transform: uppercase; letter-spacing: .4px;
}
.crm-plan-card-progress-bar {
  width: 100%; height: 5px; background: var(--c-soft);
  border-radius: 4px; overflow: hidden;
}
.crm-plan-card-progress-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #6d28d9, #a855f7);
  transition: width .4s var(--ease-spring);
}
.crm-plan-card--person .crm-plan-card-progress-fill { background: linear-gradient(90deg, #1d4ed8, #3b82f6); }
.crm-plan-card--company .crm-plan-card-progress-fill { background: linear-gradient(90deg, #0f766e, #14b8a6); }
.crm-plan-card--journey .crm-plan-card-progress-fill { background: linear-gradient(90deg, #b45309, #f59e0b); }

.crm-plan-card-actions { position: absolute; top: 10px; right: 12px; opacity: 0; transition: opacity .15s; }
.crm-plan-card:hover .crm-plan-card-actions { opacity: 1; }

.crm-plan-card-tasks {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 6px;
  font-size: 10.5px; font-weight: 600;
  background: var(--c-soft); color: var(--ink2);
  border: 1px solid transparent;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.crm-plan-card-tasks:hover { background: #e0f2fe; border-color: #7dd3fc; color: #0369a1; transform: translateY(-1px); }
.crm-plan-card-tasks:focus-visible { outline: 2px solid #0ea5e9; outline-offset: 2px; }
.crm-plan-card-tasks svg { width: 11px; height: 11px; }

/* ──────────────────────────────────────────────
   Avatar / logo / group-image lightbox
   Click any populated profile image inside a
   person, company, or group popup to view it
   centered and large; click anywhere to close.
   ────────────────────────────────────────────── */
.crm-avatar-zoomable { cursor: zoom-in; }
/* Auto-cursor: any of the three popup image hosts becomes zoom-in
   only when it actually contains an <img> (a real uploaded picture),
   not when it's showing fallback initials. */
#crmDetailAvatar:has(img),
#crmCoDetailAvatar:has(img),
#crmSegmentEditImage:has(img) { cursor: zoom-in; }
.crm-avatar-lightbox {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .78);
  display: flex; align-items: center; justify-content: center;
  /* Sit above .ch-overlay (2147483000) — must be highest in the doc */
  z-index: 2147483647;
  cursor: zoom-out;
  animation: crmAvLbFade .15s ease-out;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.crm-avatar-lightbox img {
  max-width: min(90vw, 720px);
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  background: #fff;
  object-fit: contain;
  animation: crmAvLbPop .2s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
/* Person avatars are always square (the cropper outputs 256x256). Force
   a uniform large size so every profile photo opens at the same scale —
   without this, hi-res legacy uploads filled the lightbox while
   newer cropper-output avatars rendered at their tiny native pixel
   size. Logos / group images keep contain behavior since their aspect
   ratio varies. */
.crm-avatar-lightbox.crm-avatar-lightbox--circle img {
  border-radius: 50%;
  width: min(90vw, 90vh, 520px);
  height: min(90vw, 90vh, 520px);
  object-fit: cover;
}
@keyframes crmAvLbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes crmAvLbPop  { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }

/* ─── Suggestions UI (rules-engine output) ──────────────── */
.crm-sug-list { display: flex; flex-direction: column; gap: 10px; }
.crm-sug-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 10px;
  padding: 12px 14px 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: box-shadow .2s ease, transform .2s ease;
  overflow: hidden;
}
.crm-sug-card:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); }
.crm-sug-card.is-pending { opacity: .6; pointer-events: none; }
.crm-sug-card-prio {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--c-blue);
}
.crm-sug-card-head { display: flex; align-items: baseline; gap: 10px; }
.crm-sug-card-title { font-weight: 700; color: #0f172a; flex: 1; }
.crm-sug-card-score {
  font-size: 12px; font-weight: 800; color: #0f172a;
  background: #f1f5f9; padding: 2px 8px; border-radius: 999px;
  min-width: 28px; text-align: center;
}
.crm-sug-card-target { font-size: 12px; color: #64748b; }
.crm-sug-card-rule { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; color: #94a3b8; }
.crm-sug-card-time { color: #94a3b8; }
.crm-sug-card-action {
  font-size: 13px;
  background: #f8fafc;
  padding: 6px 10px;
  border-radius: 6px;
  border-left: 3px solid var(--c-blue);
}
.crm-sug-card-action strong { color: var(--c-blue, #0b63a6); }
.crm-sug-card-rationale { font-size: 12px; color: #475569; }
.crm-sug-card-bars { display: flex; gap: 16px; font-size: 11px; }
.crm-sug-bar { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.crm-sug-bar label { color: #64748b; font-weight: 600; min-width: 60px; }
.crm-sug-bar-track {
  flex: 1; height: 6px; background: #f1f5f9; border-radius: 999px; overflow: hidden;
}
.crm-sug-bar-fill { height: 100%; transition: width .25s ease; }
.crm-sug-bar span { font-weight: 700; color: #0f172a; min-width: 32px; text-align: right; }
.crm-sug-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.crm-sug-btn {
  border: 1px solid #eef0f3;
  background: #fff;
  color: #0f172a;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.crm-sug-btn:hover:not([disabled]) { border-color: #e6e9ee; background: #f8fafc; }
.crm-sug-btn[disabled] { opacity: .5; cursor: default; }
.crm-sug-btn--approve {
  background: var(--c-green, #16a34a); color: #fff; border-color: transparent;
}
.crm-sug-btn--approve:hover:not([disabled]) { background: #15803d; }
.crm-sug-btn--reject:hover:not([disabled]) {
  background: #fef2f2; border-color: #fecaca; color: var(--c-red, #b91c1c);
}
.crm-sug-btn--ghost { background: transparent; border-color: transparent; color: #64748b; }
.crm-sug-btn--ghost:hover:not([disabled]) { color: #0f172a; }

/* ── Inline details panel — opens under a suggestion when "View details"
      is clicked. Shows the full proposed change (from / to), rationale,
      evidence, and identifiers. Replaces the old "View" button that
      tried to open the same record you were already on. */
.crm-sug-detail-panel {
  margin-top: 4px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #eef0f3;
  border-radius: 8px;
  animation: crmSugDetailIn .18s ease;
}
.crm-sug-detail-panel[hidden] { display: none; }
@keyframes crmSugDetailIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.crm-sug-detail-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  margin: 0;
  font-size: 12.5px;
}
.crm-sug-detail-grid dt {
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .04em;
  padding-top: 3px;
}
.crm-sug-detail-grid dd {
  margin: 0;
  color: #0f172a;
  word-break: break-word;
  min-width: 0;
}
.crm-sug-detail-grid dd code {
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 4px;
  padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px;
}
.crm-sug-detail-field {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px;
  color: #475569;
  margin-bottom: 4px;
}
.crm-sug-detail-change {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.crm-sug-detail-from,
.crm-sug-detail-to {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #eef0f3;
}
.crm-sug-detail-to {
  background: color-mix(in srgb, var(--c-blue, #2563eb) 6%, #fff);
  border-color: color-mix(in srgb, var(--c-blue, #2563eb) 20%, #e5e7eb);
}
.crm-sug-detail-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.crm-sug-detail-to .crm-sug-detail-tag {
  background: var(--c-blue, #2563eb);
  color: #fff;
}
.crm-sug-detail-json {
  margin: 0;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  white-space: pre-wrap;
  max-height: 220px;
  overflow: auto;
}
.crm-sug-detail-actions {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
  display: flex;
  gap: 6px;
}

.crm-sug-loading, .crm-sug-record-empty {
  text-align: center; padding: 24px; color: #94a3b8; font-size: 13px;
}
.crm-sug-low summary {
  cursor: pointer; padding: 8px 0; color: #64748b; font-size: 12px; user-select: none;
}
.crm-sug-low summary:hover { color: #0f172a; }
.crm-sug-low[open] summary { margin-bottom: 8px; }
.crm-sug-stats-row {
  display: flex; gap: 14px; padding: 10px 0 14px;
  border-bottom: 1px solid #f1f5f9; margin-bottom: 12px;
  flex-wrap: wrap;
}
.crm-sug-stat { min-width: 80px; }
.crm-sug-stat-num { font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1; }
.crm-sug-stat-label { font-size: 10px; color: #94a3b8; font-weight: 700; letter-spacing: .5px; margin-top: 4px; }
.crm-sug-stat--warn .crm-sug-stat-num { color: var(--c-amber, #d97706); }

/* Compact card variant for right-rail widget */
.crm-sug-card--compact {
  padding: 10px 12px 10px 16px;
  gap: 6px;
}
.crm-sug-card--compact .crm-sug-card-title { font-size: 13px; }
.crm-sug-card--compact .crm-sug-card-action { font-size: 12px; padding: 4px 8px; }
.crm-sug-card--compact .crm-sug-card-actions .crm-sug-btn { padding: 4px 8px; font-size: 11px; }

.crm-sug-rail-card { padding: 12px; }
.crm-sug-rail-loading { color: #94a3b8; font-size: 12px; }
.crm-sug-rail-more { width: 100%; margin-top: 8px; }

.crm-sug-record-head {
  font-weight: 700; color: #0f172a; margin-bottom: 8px;
  display: flex; align-items: baseline; gap: 6px;
}

/* ─── Merge / duplicate side-by-side comparison ───────────────────────
   Renders inside the suggestion card for proposedAction.field === 'merge'.
   Auto-loads both contact records and shows them in a 3-column grid:
   field label | survivor | candidate. Matching values get a green pill,
   diffs get an amber pill — reviewer can scan in seconds. */
.crm-sug-card--merge { padding-bottom: 14px; }
.crm-sug-merge-panel {
  margin: 4px 0 6px;
  border: 1px solid #eef0f3;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.crm-cmp-why {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--c-amber, #d97706) 8%, #fff),
    color-mix(in srgb, var(--c-amber, #d97706) 3%, #fff));
  border-bottom: 1px solid color-mix(in srgb, var(--c-amber, #d97706) 22%, #e5e7eb);
}
.crm-cmp-why-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--c-amber, #d97706);
  padding: 3px 7px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 1px;
}
.crm-cmp-why-text { font-size: 13px; color: #0f172a; line-height: 1.45; }
.crm-cmp-why-text strong { color: var(--c-amber-dark, #92400e); font-weight: 700; }

.crm-cmp-loading { padding: 18px; text-align: center; color: #94a3b8; font-size: 12.5px; }
.crm-cmp-error {
  padding: 14px; color: var(--c-red, #b91c1c); font-size: 12.5px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.crm-cmp-error code {
  background: #fee2e2; padding: 1px 6px; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px;
}

.crm-cmp-grid {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr 1fr;
  font-size: 12.5px;
}
.crm-cmp-head {
  padding: 10px 12px;
  border-bottom: 2px solid #eef0f3;
  background: #f8fafc;
}
.crm-cmp-head--label { background: #fff; border-bottom-color: #f1f5f9; }
.crm-cmp-head--keep {
  background: color-mix(in srgb, var(--c-blue, #2563eb) 6%, #fff);
  border-bottom-color: color-mix(in srgb, var(--c-blue, #2563eb) 30%, #e5e7eb);
}
.crm-cmp-head--fold {
  background: color-mix(in srgb, var(--c-amber, #d97706) 5%, #fff);
  border-bottom-color: color-mix(in srgb, var(--c-amber, #d97706) 22%, #e5e7eb);
}
.crm-cmp-head-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 4px;
}
.crm-cmp-head--keep .crm-cmp-head-tag { color: var(--c-blue, #2563eb); }
.crm-cmp-head--fold .crm-cmp-head-tag { color: var(--c-amber-dark, #92400e); }
.crm-cmp-head-name {
  font-size: 14px; font-weight: 700; color: #0f172a;
  margin-bottom: 6px; word-break: break-word;
}
.crm-cmp-open {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 11.5px;
  color: var(--c-blue, #2563eb);
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
}
.crm-cmp-open:hover { text-decoration: underline; }

.crm-cmp-row {
  display: contents;
}
.crm-cmp-row > div {
  padding: 7px 12px;
  border-bottom: 1px solid #f1f5f9;
  word-break: break-word;
  min-width: 0;
}
.crm-cmp-row:last-child > div { border-bottom: 0; }
.crm-cmp-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #64748b;
  background: #fafbfc;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.crm-cmp-val { color: #0f172a; }
.crm-cmp-empty { color: #cbd5e1; font-style: italic; }
.crm-cmp-pill {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 999px;
}
.crm-cmp-pill--match {
  background: color-mix(in srgb, var(--c-green, #16a34a) 14%, #fff);
  color: var(--c-green-dark, #166534);
}
.crm-cmp-pill--diff {
  background: color-mix(in srgb, var(--c-amber, #d97706) 14%, #fff);
  color: var(--c-amber-dark, #92400e);
}
.crm-cmp-row.is-match > .crm-cmp-val {
  background: color-mix(in srgb, var(--c-green, #16a34a) 5%, #fff);
}
.crm-cmp-row.is-match > .crm-cmp-label {
  background: color-mix(in srgb, var(--c-green, #16a34a) 7%, #fafbfc);
  color: var(--c-green-dark, #166534);
}

@media (max-width: 720px) {
  .crm-cmp-grid {
    grid-template-columns: 1fr;
  }
  .crm-cmp-head--label { display: none; }
  .crm-cmp-row { display: grid; grid-template-columns: minmax(110px, 28%) 1fr; column-gap: 0; }
  .crm-cmp-row > .crm-cmp-label { grid-column: 1 / 2; }
  .crm-cmp-row > .crm-cmp-val:nth-of-type(2) { grid-column: 2 / 3; border-left: 3px solid color-mix(in srgb, var(--c-blue, #2563eb) 25%, transparent); }
  .crm-cmp-row > .crm-cmp-val:nth-of-type(3) { grid-column: 2 / 3; border-left: 3px solid color-mix(in srgb, var(--c-amber, #d97706) 25%, transparent); }
}

/* ─── Suggestion type chip (top of every card) ────────────────────────
   At-a-glance label so reviewers see "Duplicate merge" / "Tier promotion"
   / "Churn risk" before they parse anything else on the card. */
.crm-sug-card-typeline { margin-top: -2px; margin-bottom: 6px; }
.crm-sug-type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #eef0f3;
}
.crm-sug-type--merge {
  background: color-mix(in srgb, var(--c-amber, #d97706) 12%, #fff);
  color: var(--c-amber-dark, #92400e);
  border-color: color-mix(in srgb, var(--c-amber, #d97706) 28%, #e2e8f0);
}
.crm-sug-type--churnrisk, .crm-sug-type--atriskflag {
  background: color-mix(in srgb, var(--c-red, #dc2626) 10%, #fff);
  color: var(--c-red-dark, #991b1b);
  border-color: color-mix(in srgb, var(--c-red, #dc2626) 25%, #e2e8f0);
}
.crm-sug-type--lifecyclestate, .crm-sug-type--tier {
  background: color-mix(in srgb, var(--c-blue, #2563eb) 10%, #fff);
  color: var(--c-blue-dark, #1e3a8a);
  border-color: color-mix(in srgb, var(--c-blue, #2563eb) 25%, #e2e8f0);
}
.crm-sug-type--highintent {
  background: color-mix(in srgb, var(--c-green, #16a34a) 12%, #fff);
  color: var(--c-green-dark, #166534);
  border-color: color-mix(in srgb, var(--c-green, #16a34a) 25%, #e2e8f0);
}
.crm-sug-type--spamflag {
  background: color-mix(in srgb, var(--c-red, #dc2626) 14%, #fff);
  color: var(--c-red-dark, #991b1b);
  border-color: color-mix(in srgb, var(--c-red, #dc2626) 35%, #e2e8f0);
}

/* ─── Rule-decision review panel (auto-loaded for every non-merge card) ──
   Layout: [Who] · [What] · [Why] · [Evidence], stacked. Matches the merge
   panel's outer chrome so the reviewer sees a consistent shell across
   suggestion types. */
.crm-sug-card--rule { padding-bottom: 14px; }
.crm-sug-rule-panel {
  margin: 4px 0 6px;
  border: 1px solid #eef0f3;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.crm-sug-rule-panel > * + * { border-top: 1px solid #f1f5f9; }

/* WHO — person summary at the top */
.crm-rule-who { padding: 10px 12px; background: #fafbfc; }
.crm-rule-who--missing { color: var(--ink3, #94a3b8); font-style: italic; }
.crm-rule-who-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 4px; flex-wrap: wrap;
}
.crm-rule-who-name { font-size: 14px; font-weight: 700; color: #0f172a; }
.crm-rule-who-meta { font-size: 12px; color: #64748b; word-break: break-word; }
.crm-rule-who-stats {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
  gap: 6px;
}
.crm-rule-who-stat {
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 6px;
  padding: 5px 7px;
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.crm-rule-who-stat-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #94a3b8;
}
.crm-rule-who-stat-val {
  font-size: 13px; font-weight: 600; color: #0f172a;
  word-break: break-word; line-height: 1.2;
}

/* Risk chip strip (spam / troll / suspect / pending review) */
.crm-rule-risk { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.crm-rule-risk-chip {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
}
.crm-rule-risk-chip--red {
  background: color-mix(in srgb, var(--c-red, #dc2626) 12%, #fff);
  color: var(--c-red-dark, #991b1b);
  border: 1px solid color-mix(in srgb, var(--c-red, #dc2626) 30%, #fff);
}
.crm-rule-risk-chip--amber {
  background: color-mix(in srgb, var(--c-amber, #d97706) 12%, #fff);
  color: var(--c-amber-dark, #92400e);
  border: 1px solid color-mix(in srgb, var(--c-amber, #d97706) 28%, #fff);
}
.crm-rule-risk-chip--neutral {
  background: #f1f5f9; color: #475569; border: 1px solid #eef0f3;
}

/* WHAT — the proposed change row */
.crm-rule-change {
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.crm-rule-change--blue  { background: color-mix(in srgb, var(--c-blue,  #2563eb) 5%, #fff); }
.crm-rule-change--amber { background: color-mix(in srgb, var(--c-amber, #d97706) 5%, #fff); }
.crm-rule-change--red   { background: color-mix(in srgb, var(--c-red,   #dc2626) 5%, #fff); }
.crm-rule-change--green { background: color-mix(in srgb, var(--c-green, #16a34a) 5%, #fff); }
.crm-rule-change-icon { font-size: 22px; line-height: 1; }
.crm-rule-change-body { flex: 1; min-width: 0; }
.crm-rule-change-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #64748b; margin-bottom: 4px;
}
.crm-rule-change-flow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px;
}
.crm-rule-change-from, .crm-rule-change-to {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 6px;
  background: #fff; border: 1px solid #eef0f3; color: #0f172a;
  font-weight: 600;
}
.crm-rule-change-to {
  background: color-mix(in srgb, var(--c-blue, #2563eb) 8%, #fff);
  border-color: color-mix(in srgb, var(--c-blue, #2563eb) 30%, #e2e8f0);
}
.crm-rule-change--amber .crm-rule-change-to {
  background: color-mix(in srgb, var(--c-amber, #d97706) 10%, #fff);
  border-color: color-mix(in srgb, var(--c-amber, #d97706) 30%, #e2e8f0);
}
.crm-rule-change--red .crm-rule-change-to {
  background: color-mix(in srgb, var(--c-red, #dc2626) 10%, #fff);
  border-color: color-mix(in srgb, var(--c-red, #dc2626) 30%, #e2e8f0);
}
.crm-rule-change-tag {
  font-size: 9px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #64748b; padding: 1px 5px;
  background: #f1f5f9; border-radius: 999px;
}
.crm-rule-change-to .crm-rule-change-tag {
  background: var(--c-blue, #2563eb); color: #fff;
}
.crm-rule-change--amber .crm-rule-change-to .crm-rule-change-tag { background: var(--c-amber, #d97706); }
.crm-rule-change--red   .crm-rule-change-to .crm-rule-change-tag { background: var(--c-red, #dc2626); }
.crm-rule-change-arrow { color: #94a3b8; font-weight: 700; font-size: 16px; }
.crm-rule-change-already {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--c-amber-dark, #92400e);
  background: color-mix(in srgb, var(--c-amber, #d97706) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--c-amber, #d97706) 25%, #fff);
  padding: 5px 8px; border-radius: 6px;
}

/* WHY — translated featureVector */
.crm-rule-why { padding: 10px 12px; }
.crm-rule-why-head {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #64748b; margin-bottom: 6px;
}
.crm-rule-why-list {
  margin: 0; padding: 0 0 0 16px;
  font-size: 12.5px; color: #0f172a; line-height: 1.5;
}
.crm-rule-why-list li { margin: 2px 0; }

/* EVIDENCE — triggering activities mini-timeline */
.crm-rule-evidence { padding: 10px 12px; }
.crm-rule-evidence-head {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #64748b; margin-bottom: 8px;
}
.crm-rule-act {
  display: flex; gap: 8px; padding: 7px 0;
  border-top: 1px solid #f1f5f9;
}
.crm-rule-act:first-of-type { border-top: 0; padding-top: 0; }
.crm-rule-act-dir {
  flex-shrink: 0; width: 18px; text-align: center;
  font-weight: 700; font-size: 14px; line-height: 1.4;
  color: #94a3b8;
}
.crm-rule-act--inbound  .crm-rule-act-dir { color: var(--c-blue, #2563eb); }
.crm-rule-act--outbound .crm-rule-act-dir { color: var(--c-green, #16a34a); }
.crm-rule-act-body { flex: 1; min-width: 0; }
.crm-rule-act-head {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin-bottom: 2px;
}
.crm-rule-act-event {
  font-size: 12.5px; font-weight: 600; color: #0f172a;
  word-break: break-word;
}
.crm-rule-act-date {
  font-size: 11px; color: #94a3b8; margin-left: auto; white-space: nowrap;
}
.crm-rule-act-summary {
  font-size: 12px; color: #475569; line-height: 1.45; word-break: break-word;
}
.crm-rule-act-pill {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 1px 5px; border-radius: 999px;
  background: #f1f5f9; color: #475569;
}
.crm-rule-act-pill--negative {
  background: color-mix(in srgb, var(--c-red, #dc2626) 12%, #fff);
  color: var(--c-red-dark, #991b1b);
}
.crm-rule-act-pill--positive {
  background: color-mix(in srgb, var(--c-green, #16a34a) 12%, #fff);
  color: var(--c-green-dark, #166534);
}
.crm-rule-act-pill--intent {
  background: color-mix(in srgb, var(--c-blue, #2563eb) 12%, #fff);
  color: var(--c-blue-dark, #1e3a8a);
}
.crm-rule-act-pill--imp {
  background: color-mix(in srgb, var(--c-amber, #d97706) 14%, #fff);
  color: var(--c-amber-dark, #92400e);
}

/* ─── Review Queue overlay (focused triage mode) ─────────────────────
   Lives in #crmReviewQueue. Full-screen-ish modal that walks pending
   contacts one at a time. Keyboard-driven; pairs with the PENDING
   REVIEW stat card and the row REVIEW chip. */
.crm-rq-overlay[data-open="true"] {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .58);
}
.crm-rq-shell {
  width: min(720px, 92vw);
  max-height: 88vh;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28), 0 4px 12px rgba(15, 23, 42, .12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.crm-rq-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid #f1f5f9;
}
.crm-rq-header-left { display: flex; align-items: baseline; gap: 12px; }
.crm-rq-title { margin: 0; font-size: 16px; font-weight: 700; color: #0f172a; }
.crm-rq-progress { font-size: 12px; color: #64748b; font-weight: 600; }
.crm-rq-header-right { display: flex; align-items: center; gap: 10px; }
.crm-rq-hint {
  font-size: 11px; color: #94a3b8; letter-spacing: .02em;
}
.crm-rq-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px;
  background: #f8fafc;
}
.crm-rq-card {
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.crm-rq-reason {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  background: #fef3c7;
  border-left: 3px solid #eab308;
  color: #713f12;
}
.crm-rq-reason--hot     { background: #fff1e6; border-left-color: #f97316; color: #9a3412; }
.crm-rq-reason--at-risk { background: #fef3c7; border-left-color: #eab308; color: #713f12; }
.crm-rq-reason--active  { background: #ecfdf5; border-left-color: #10b981; color: #065f46; }
.crm-rq-reason--cold    { background: #f1f5f9; border-left-color: #94a3b8; color: #334155; }
.crm-rq-reason-label { font-weight: 700; margin-right: 4px; }
.crm-rq-identity {
  display: flex; align-items: center; gap: 12px;
}
.crm-rq-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.crm-rq-identity-body { flex: 1; min-width: 0; }
.crm-rq-name {
  font-size: 17px; font-weight: 700; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crm-rq-meta {
  font-size: 12px; color: #64748b; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crm-rq-score-block { text-align: right; flex-shrink: 0; }
.crm-rq-score-num {
  font-size: 26px; font-weight: 800; color: #0f172a; margin-top: 4px;
}
.crm-rq-score-denom { font-size: 13px; color: #94a3b8; font-weight: 500; }
.crm-rq-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 10px;
  background: #f8fafc;
  border-radius: 8px;
}
.crm-rq-stat {
  display: flex; flex-direction: column; gap: 2px; text-align: center;
}
.crm-rq-stat-label {
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #94a3b8;
}
.crm-rq-stat-val { font-size: 14px; font-weight: 700; color: #1e293b; }
.crm-rq-section-label {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #64748b; margin-bottom: 8px;
}
.crm-rq-deals {
  border-top: 1px solid #f1f5f9;
  padding-top: 12px;
}
.crm-rq-deal {
  font-size: 13px; color: #1e293b; padding: 4px 0;
}
.crm-rq-timeline { border-top: 1px solid #f1f5f9; padding-top: 12px; }
.crm-rq-act {
  display: flex; gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f8fafc;
}
.crm-rq-act:last-child { border-bottom: none; }
.crm-rq-act-dir {
  font-size: 14px; flex-shrink: 0; width: 16px;
  color: #94a3b8;
}
.crm-rq-act--inbound .crm-rq-act-dir { color: #10b981; font-weight: 700; }
.crm-rq-act--outbound .crm-rq-act-dir { color: #6366f1; }
.crm-rq-act-body { flex: 1; min-width: 0; }
.crm-rq-act-head {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px; font-weight: 600; color: #1e293b;
}
.crm-rq-act-event { font-family: ui-monospace, monospace; font-size: 11px; }
.crm-rq-act-date { color: #94a3b8; font-weight: 500; flex-shrink: 0; }
.crm-rq-act-summary {
  font-size: 12px; color: #475569; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.crm-rq-empty {
  padding: 16px; text-align: center; font-size: 13px; color: #94a3b8;
  font-style: italic;
}
.crm-rq-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; border-top: 1px solid #f1f5f9; background: #fff;
}
.crm-rq-footer-left, .crm-rq-footer-right {
  display: flex; gap: 6px;
}

@media (max-width: 640px) {
  .crm-rq-stats { grid-template-columns: repeat(2, 1fr); }
  .crm-rq-hint { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   TECH STACK TAB — Client Technology Inventory (catalog-driven)
   ═══════════════════════════════════════════════════════════════ */

.crm-techstack { display: flex; flex-direction: column; gap: 18px; padding: 4px 0 24px; }

.crm-techstack-scores {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px; padding: 16px;
  border: 1px solid #eef0f3;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.crm-techstack-score {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 8px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #eef1f6;
}
.crm-techstack-score-ring { position: relative; width: 72px; height: 72px; }
.crm-techstack-score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.crm-techstack-score-track { fill: none; stroke: #f1f5f9; stroke-width: 3; }
.crm-techstack-score-fill {
  fill: none; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 100 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset .65s cubic-bezier(.4,.0,.2,1), stroke .35s;
}
.crm-techstack-score[data-score="digital"]      .crm-techstack-score-fill { stroke: #6366f1; }
.crm-techstack-score[data-score="ai"]           .crm-techstack-score-fill { stroke: #8b5cf6; }
.crm-techstack-score[data-score="integration"]  .crm-techstack-score-fill { stroke: #14b8a6; }
.crm-techstack-score[data-score="data"]         .crm-techstack-score-fill { stroke: #f59e0b; }
.crm-techstack-score[data-score="coverage"]     .crm-techstack-score-fill { stroke: #22c55e; }
.crm-techstack-score-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: #0f172a; letter-spacing: -.02em;
}
.crm-techstack-score-label {
  font-size: 11.5px; font-weight: 600; color: #475569;
  text-align: center; letter-spacing: .01em;
}

.crm-techstack-coverage-map {
  border: 1px solid #eef0f3; border-radius: 12px; background: #fff;
  padding: 12px 14px;
}
.crm-techstack-coverage-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.crm-techstack-coverage-title {
  font-size: 12px; font-weight: 700; color: #0f172a;
  text-transform: uppercase; letter-spacing: .04em;
}
.crm-techstack-coverage-sub { font-size: 12px; color: #64748b; }
.crm-techstack-coverage-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-techstack-coverage-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer; transition: transform .08s, box-shadow .15s;
}
.crm-techstack-coverage-chip:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(15,23,42,.06); }
.crm-techstack-coverage-chip[data-coverage="covered"]  { background: #ecfdf5; color: #166534; border-color: #bbf7d0; }
.crm-techstack-coverage-chip[data-coverage="partial"]  { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.crm-techstack-coverage-chip[data-coverage="missing"]  { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.crm-techstack-coverage-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.crm-techstack-coverage-chip-count {
  background: rgba(255,255,255,.7); border-radius: 99px;
  padding: 0 6px; font-size: 11px; font-weight: 700;
}

.crm-techstack-recs {
  border: 1px solid #e9d5ff;
  background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 100%);
  border-radius: 12px; padding: 14px 16px;
}
.crm-techstack-recs-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.crm-techstack-recs-title {
  font-size: 12px; font-weight: 700; color: #6b21a8;
  text-transform: uppercase; letter-spacing: .04em;
}
.crm-techstack-recs-sub { font-size: 11.5px; color: #7c3aed; opacity: .8; }
.crm-techstack-recs-list { display: flex; flex-direction: column; gap: 8px; }
.crm-techstack-rec {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e9d5ff;
  border-radius: 10px;
}
.crm-techstack-rec-ico {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: #ede9fe; color: #6d28d9;
}
.crm-techstack-rec-body { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; color: #334155; }
.crm-techstack-rec-body strong { color: #0f172a; }
.crm-techstack-rec-suggest { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.crm-techstack-rec-suggest button {
  font-size: 11.5px; padding: 3px 8px;
  border-radius: 99px;
  border: 1px solid #ddd6fe;
  background: #f5f3ff; color: #5b21b6;
  cursor: pointer; transition: background .15s;
}
.crm-techstack-rec-suggest button:hover { background: #ede9fe; }

.crm-techstack-toolbar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.crm-techstack-search-wrap { flex: 1 1 240px; min-width: 200px; }
.crm-techstack-search { width: 100%; }
.crm-techstack-cat-filter { flex: 0 0 200px; }

.crm-techstack-grid { display: flex; flex-direction: column; gap: 16px; }
.crm-techstack-cat-group { display: flex; flex-direction: column; gap: 8px; }
.crm-techstack-cat-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; color: #475569;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 4px 0 4px 4px;
}
.crm-techstack-cat-count {
  background: #e2e8f0; color: #475569;
  padding: 1px 8px; border-radius: 99px;
  font-size: 11px; font-weight: 700;
}
.crm-techstack-cat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.crm-techstack-card {
  position: relative;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #eef0f3;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .05s;
  display: flex; flex-direction: column; gap: 8px;
}
.crm-techstack-card:hover {
  border-color: #6366f1;
  box-shadow: 0 2px 10px rgba(99,102,241,.10);
}
.crm-techstack-card:active { transform: translateY(1px); }
.crm-techstack-card-head { display: flex; gap: 10px; align-items: flex-start; }
.crm-techstack-card-logo {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
  letter-spacing: -.02em;
}
.crm-techstack-card-title { flex: 1; min-width: 0; }
.crm-techstack-card-name {
  font-weight: 700; font-size: 14px; color: #0f172a;
  line-height: 1.2; word-break: break-word;
}
.crm-techstack-card-vendor { font-size: 12px; color: #64748b; margin-top: 1px; }
.crm-techstack-card-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.crm-techstack-pill-status {
  display: inline-block; padding: 2px 7px; border-radius: 99px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  background: #dcfce7; color: #166534;
}
.crm-techstack-pill-status[data-status="Planned"]    { background: #fef3c7; color: #92400e; }
.crm-techstack-pill-status[data-status="Replacing"]  { background: #ffedd5; color: #9a3412; }
.crm-techstack-pill-status[data-status="Deprecated"] { background: #fee2e2; color: #991b1b; }
.crm-techstack-pill-status[data-status="Custom"]     { background: #f1f5f9; color: #475569; }

.crm-techstack-card-caps { display: flex; flex-wrap: wrap; gap: 4px; }
.crm-techstack-card-cap {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  font-weight: 500;
}
.crm-techstack-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px dashed #e2e8f0;
  padding-top: 6px; margin-top: 2px;
  font-size: 11px; color: #94a3b8;
}
.crm-techstack-card-rating { display: inline-flex; align-items: center; gap: 6px; }
.crm-techstack-card-rating-bar {
  width: 36px; height: 4px;
  border-radius: 99px;
  background: #f1f5f9;
  overflow: hidden;
  position: relative;
}
.crm-techstack-card-rating-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 99px;
}

.crm-techstack-empty {
  padding: 32px;
  border-radius: 12px;
  border: 1px dashed #cbd5e1;
  text-align: center;
  color: #64748b;
  background: #f8fafc;
}
.crm-techstack-empty p { margin: 0; font-size: 13px; }

.crm-detail-tab-n {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  background: #e2e8f0; color: #475569;
  border-radius: 99px;
  font-size: 11px; font-weight: 700;
}
.crm-detail-tab.crm-detail-tab--active .crm-detail-tab-n {
  background: #6366f1; color: #fff;
}

/* Catalog picker */
.crm-techpicker .ch-modal-body {
  display: flex; flex-direction: column; gap: 12px;
  max-height: 70vh;
}
.crm-techpicker-toolbar { display: flex; gap: 8px; flex-shrink: 0; }
.crm-techpicker-search { flex: 1; }
.crm-techpicker-cat { flex: 0 0 180px; }

.crm-techpicker-cats { display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; }
.crm-techpicker-cat-chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid #eef0f3;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.crm-techpicker-cat-chip.is-active {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4338ca;
}
.crm-techpicker-cat-chip:hover { background: #f8fafc; }

.crm-techpicker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  overflow-y: auto;
  padding: 4px;
  flex: 1; min-height: 0;
}
.crm-techpicker-item {
  position: relative;
  display: flex; gap: 10px;
  padding: 10px 12px;
  border: 1px solid #eef0f3;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
.crm-techpicker-item:hover {
  border-color: #6366f1;
  box-shadow: 0 2px 8px rgba(99,102,241,.08);
}
.crm-techpicker-item:active { transform: translateY(1px); }
.crm-techpicker-item.is-added {
  background: #f0fdf4;
  border-color: #bbf7d0;
  cursor: default;
  opacity: .85;
}
.crm-techpicker-item.is-added::after {
  content: '\2713  Added';
  position: absolute; top: 8px; right: 12px;
  font-size: 11px; font-weight: 700; color: #166534;
}
.crm-techpicker-logo {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
}
.crm-techpicker-info { flex: 1; min-width: 0; }
.crm-techpicker-name {
  font-weight: 700; font-size: 13px; color: #0f172a;
  line-height: 1.2; word-break: break-word;
}
.crm-techpicker-meta { font-size: 11.5px; color: #64748b; margin-top: 2px; }
.crm-techpicker-empty { padding: 32px; text-align: center; color: #64748b; }
.crm-techpicker-empty p { font-size: 13px; }
.crm-techpicker-custom-link {
  background: none; border: none; color: #6366f1;
  font-weight: 600; cursor: pointer; padding: 0; font-size: inherit;
}

/* Slim edit modal (legacy, retained for fallback) */
.crm-techedit-meta {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #eef0f3;
  margin-bottom: 14px;
}
.crm-techedit-meta-logo {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.crm-techedit-meta-info { flex: 1; min-width: 0; font-size: 12px; color: #64748b; }
.crm-techedit-meta-info b { color: #0f172a; font-size: 13px; display: block; }
.crm-techedit-meta-caps { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.crm-techedit-meta-caps .crm-techstack-card-cap { font-size: 10.5px; padding: 1px 6px; }

/* ─── Tech Detail / Usage modal ───────────────────────────────────── */
.crm-techdet { width: min(820px, 96vw); }
.crm-techdet-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 18px 22px 14px;
  border-bottom: 1px solid #eef0f3;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
.crm-techdet-head-info { display: flex; gap: 14px; align-items: center; min-width: 0; flex: 1; }
.crm-techdet-meta .crm-techstack-card-logo {
  width: 52px !important; height: 52px !important;
  border-radius: 12px;
  border: 1px solid #eef0f3;
  font-size: 18px;
}
.crm-techdet-head-text { min-width: 0; }
.crm-techdet-head-text .ch-modal-title { font-size: 18px; margin: 0; }
.crm-techdet-head-text .ch-modal-subtitle { font-size: 13px; color: #64748b; margin: 2px 0 0; }
.crm-techdet-meta-caps { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.crm-techdet-meta-caps .crm-techstack-card-cap { font-size: 10.5px; padding: 1.5px 7px; }

.crm-techdet-body {
  padding: 18px 22px 4px;
  max-height: calc(90vh - 200px);
  overflow-y: auto;
}
.crm-techdet-section {
  padding: 14px 0 16px;
  border-bottom: 1px solid #f1f5f9;
}
.crm-techdet-section:last-of-type { border-bottom: 0; }
.crm-techdet-section-head { margin-bottom: 10px; }
.crm-techdet-section-title {
  margin: 0; font-size: 12px; font-weight: 700; color: #0f172a;
  text-transform: uppercase; letter-spacing: .04em;
}
.crm-techdet-section-sub { margin: 3px 0 0; font-size: 12px; color: #64748b; }

/* Use-case chips */
.crm-techdet-caps {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.crm-techdet-cap {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid #e6e9ee;
  background: #fff;
  font-size: 12.5px; font-weight: 500; color: #475569;
  cursor: pointer; transition: all .12s;
  font-family: inherit;
}
.crm-techdet-cap:hover { background: #f8fafc; border-color: #94a3b8; }
.crm-techdet-cap.is-on {
  background: rgba(58,134,255,.08); color: #1d4ed8;
  border-color: #3a86ff; font-weight: 600;
}
.crm-techdet-cap.is-on::before {
  content: '✓'; color: #3a86ff; font-weight: 700;
}
.crm-techdet-cap.is-custom { border-style: dashed; color: #6366f1; }
.crm-techdet-cap-rm {
  background: transparent; border: 0; color: inherit;
  cursor: pointer; padding: 0 0 0 4px; font-size: 14px; opacity: .55;
}
.crm-techdet-cap-rm:hover { opacity: 1; }

.crm-techdet-customcase {
  display: flex; gap: 6px; align-items: center;
}
.crm-techdet-customcase .ch-input { flex: 1; }

/* 3-col grid override (since ch-form-grid--3col may not exist app-wide) */
.ch-form-grid.ch-form-grid--3col {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 14px;
}
@media (max-width: 720px) {
  .ch-form-grid.ch-form-grid--3col { grid-template-columns: 1fr; }
}

/* Segmented (adoption) */
.crm-techdet-segmented {
  display: inline-flex; flex-wrap: wrap;
  background: #f1f5f9;
  border-radius: 8px; padding: 3px;
  border: 1px solid #eef0f3;
}
.crm-techdet-seg {
  background: transparent; border: 0;
  padding: 6px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 600; color: #64748b;
  cursor: pointer; font-family: inherit;
  transition: all .12s;
}
.crm-techdet-seg:hover { color: #0f172a; }
.crm-techdet-seg.is-on {
  background: #fff; color: #0f172a;
  box-shadow: 0 1px 3px rgba(15,23,42,.08), 0 0 0 1px rgba(15,23,42,.04);
}
.crm-techdet-seg[data-val="Stalled"].is-on { color: #b91c1c; }
.crm-techdet-seg[data-val="Underused"].is-on { color: #b45309; }
.crm-techdet-seg[data-val="Healthy"].is-on { color: #15803d; }
.crm-techdet-seg[data-val="Power"].is-on { color: #1d4ed8; }

/* Stars */
.crm-techdet-stars { display: inline-flex; gap: 2px; }
.crm-techdet-star {
  background: transparent; border: 0;
  font-size: 22px; color: #cbd5e1; cursor: pointer;
  padding: 2px 4px; line-height: 1;
  transition: color .12s, transform .12s;
}
.crm-techdet-star:hover { color: #fbbf24; transform: scale(1.1); }
.crm-techdet-star.is-on { color: #f59e0b; }

/* Hint text under inputs */
.crm-techdet-hint {
  font-size: 11px; color: #64748b;
  display: block; margin-top: 4px;
  font-style: italic;
}
.crm-techdet-hint--warn { color: #b45309; font-style: normal; font-weight: 600; }
.crm-techdet-hint--auto { color: #1d4ed8; font-style: normal; cursor: pointer; }
.crm-techdet-hint--auto:hover { text-decoration: underline; }

/* Money input */
.crm-techdet-money { position: relative; }
.crm-techdet-money-prefix {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: #64748b; font-weight: 600; font-size: 14px;
  pointer-events: none;
}
.crm-techdet-money .ch-input { padding-left: 24px; }

/* Owner picker */
.crm-techdet-owner { position: relative; }
.crm-techdet-owner-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10;
  background: #fff; border: 1px solid #eef0f3; border-radius: 8px;
  box-shadow: 0 12px 32px -8px rgba(15,23,42,.18);
  max-height: 220px; overflow-y: auto; padding: 4px;
}
.crm-techdet-owner-menu[hidden] { display: none; }
.crm-techdet-owner-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 9px; border: 0; background: transparent;
  cursor: pointer; font-family: inherit; font-size: 13px;
  color: #0f172a; text-align: left; border-radius: 6px;
}
.crm-techdet-owner-item:hover, .crm-techdet-owner-item.is-hover { background: #f1f5f9; }
.crm-techdet-owner-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: #e2e8f0; color: #475569;
  font-size: 10.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.crm-techdet-owner-avatar img { width: 100%; height: 100%; object-fit: cover; }
.crm-techdet-owner-text { flex: 1; min-width: 0; }
.crm-techdet-owner-name { color: #0f172a; }
.crm-techdet-owner-sub { font-size: 11px; color: #64748b; }
.crm-techdet-owner-empty { padding: 10px; color: #94a3b8; font-size: 12px; text-align: center; }

/* Integration map */
.crm-techdet-integrations {
  display: flex; gap: 6px; flex-wrap: wrap;
  min-height: 36px;
}
.crm-techdet-integration {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 5px;
  border-radius: 99px;
  border: 1px solid #e6e9ee;
  background: #fff;
  cursor: pointer; transition: all .12s;
  font-family: inherit; font-size: 12.5px; color: #475569;
}
.crm-techdet-integration:hover { border-color: #94a3b8; background: #f8fafc; }
.crm-techdet-integration.is-on {
  background: rgba(34,197,94,.08); border-color: #22c55e; color: #15803d; font-weight: 600;
}
.crm-techdet-integration .crm-techstack-card-logo {
  width: 22px !important; height: 22px !important; font-size: 9px;
}
.crm-techdet-integration-empty {
  font-size: 12px; color: #94a3b8; padding: 6px 0; font-style: italic;
}

/* Score-impact preview inside the detail modal */
.crm-techdet-impact { background: #f8fafc; border-radius: 10px; padding: 14px; margin-top: 10px; border: 1px dashed #cbd5e1; }
.crm-techdet-impact-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 8px;
}
@media (max-width: 720px) { .crm-techdet-impact-grid { grid-template-columns: 1fr; } }
.crm-techdet-impact-cell {
  background: #fff; border: 1px solid #eef0f3; border-radius: 8px;
  padding: 8px 10px;
}
.crm-techdet-impact-cell-label { font-size: 10.5px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.crm-techdet-impact-cell-row { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.crm-techdet-impact-nominal { font-size: 12px; color: #94a3b8; text-decoration: line-through; }
.crm-techdet-impact-effective { font-size: 16px; font-weight: 700; color: #0f172a; }
.crm-techdet-impact-effective--down { color: #b45309; }
.crm-techdet-impact-effective--up { color: #15803d; }
.crm-techdet-impact-formula {
  font-size: 11.5px; color: #475569;
  padding: 8px 10px; background: #fff;
  border-radius: 6px; border: 1px solid #eef0f3;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  white-space: pre-wrap; word-break: break-word;
}

/* Methodology link button (next to score rings) */
.crm-techstack-methodology-btn {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: auto;
  background: transparent; border: 1px solid #eef0f3;
  color: #475569; cursor: pointer;
  border-radius: 8px; padding: 6px 11px;
  font-size: 12px; font-weight: 600; font-family: inherit;
  transition: all .12s;
}
.crm-techstack-methodology-btn:hover { background: #f1f5f9; color: #0f172a; border-color: #e6e9ee; }

/* Methodology popup */
.crm-method-body { padding: 18px 22px 6px; max-height: calc(90vh - 180px); overflow-y: auto; }
.crm-method-formula {
  background: linear-gradient(180deg, #f0f9ff 0%, #fff 100%);
  border: 1px solid #bae6fd;
  border-radius: 10px; padding: 12px 14px;
  font-size: 12.5px; color: #0c4a6e; line-height: 1.5;
  margin-bottom: 16px;
}
.crm-method-formula b { color: #0369a1; }
.crm-method-section { margin-bottom: 22px; }
.crm-method-h { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: #0f172a; text-transform: uppercase; letter-spacing: .04em; }
.crm-method-sub { margin: 0 0 10px; font-size: 12px; color: #64748b; }
.crm-method-table-wrap { overflow-x: auto; border: 1px solid #eef0f3; border-radius: 10px; }
.crm-method-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.crm-method-table thead th {
  background: #f8fafc; padding: 10px 12px;
  text-align: left; font-weight: 700; color: #475569;
  border-bottom: 1px solid #eef0f3;
  font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap;
}
.crm-method-table tbody td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.crm-method-table tbody tr:last-child td { border-bottom: 0; }
.crm-method-system { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #0f172a; }
.crm-method-system .crm-techstack-card-logo { width: 24px !important; height: 24px !important; font-size: 10px; }
.crm-method-eff {
  font-weight: 700;
  display: inline-block; padding: 2px 7px; border-radius: 99px;
  background: #f1f5f9; color: #0f172a;
}
.crm-method-eff--bad { background: #fef2f2; color: #b91c1c; }
.crm-method-eff--ok { background: #ecfdf5; color: #15803d; }
.crm-method-mult { font-size: 12px; color: #475569; line-height: 1.5; padding: 6px 0; border-top: 1px solid #f1f5f9; }
.crm-method-mult:first-child { border-top: 0; }
.crm-method-mult b { display: inline-block; min-width: 130px; color: #0f172a; }
.crm-method-formulas { margin: 0; padding-left: 20px; font-size: 12.5px; color: #475569; line-height: 1.7; }
.crm-method-formulas b { color: #0f172a; }

@media (max-width: 720px) {
  .crm-techstack-scores { grid-template-columns: repeat(2, 1fr); }
  .crm-techpicker-cat { flex: 0 0 140px; }
}

/* Fix: activity-card contact avatar photo overflow (img was unconstrained) */
.crm-act-card-contact-avatar{overflow:hidden}
.crm-act-card-contact-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* ═══════════════════════════════════════════════════════════════
   GROUPS — dynamic rule builder, nesting tree, channel badges
   ═══════════════════════════════════════════════════════════════ */

/* ⚠️ `.crm-seg-dynamic*` IS GONE — the "Anyone who matches joins
   automatically" heading and the inline rule wall it sat on moved to the
   filter builder popup. Do not resurrect these class names; a second surface
   styling the same rows is how the wall came back last time. */
.crm-seg-match { font-size: 13px; color: #64748b; display: inline-flex; align-items: center; gap: 6px; }
.ch-input--inline { width: auto; min-width: 72px; display: inline-block; padding: 4px 8px; height: auto; }

.crm-rule-list { display: flex; flex-direction: column; gap: 8px; }
/* ONE line per filter: field · is/is-not · value · remove. A flex row let the
   coded dropdown's inherited width:100% take the whole line and pushed the
   operator and value onto a second one, which is why a short list of filters
   read as a wall. */
.crm-rule-row {
  display: grid; align-items: center; gap: 8px;
  /* fixed operator column so every value box starts on the same line, whether
     the row has an is/is-not dropdown or a plain "is" */
  grid-template-columns: minmax(140px, 220px) 78px minmax(150px, 1fr) 28px;
}
/* "no data yet" on a filter that is already in the set. It is the FIFTH child
   of a four-column grid, so it takes a line of its own under the row — put it
   anywhere before the × and the × is the one that wraps. */
.crm-rule-nodata {
  grid-column: 1 / -1; justify-self: start;
  font-size: 11px; font-weight: 600; color: #b45309;
  padding: 2px 7px; border-radius: 5px; background: #fef3c7;
}
.crm-rule-row.is-nodata .crm-rule-fieldlbl { color: #b45309; }
.crm-rule-opwrap { display: flex; align-items: center; }
.crm-rule-opwrap .crm-rule-op { padding-left: 6px; }
.crm-rule-row > * { min-width: 0; }
.crm-rule-row > .crm-rule-field,
.crm-rule-row > .crm-sel-trigger { width: auto; }
.crm-rule-op { font-size: 12px; color: #94a3b8; padding: 0 2px; }
.crm-rule-valuewrap { min-width: 0; }
.crm-rule-valuewrap .crm-rule-value { width: 100%; }
/* Narrow popup (or a deeply nested bucket): let it stack rather than squash. */
@media (max-width: 720px) {
  .crm-rule-row { grid-template-columns: 1fr auto 28px; }
  .crm-rule-row > .crm-rule-valuewrap { grid-column: 1 / -1; }
  /* ⚠️ The builder's six-column row (0-2-0) beats the three-column rule above
     it (0-1-0) even in here, so the narrow layout has to be restated for it or
     a phone gets six tracks in 360px. Value on its own line, badges beside the
     × where they cost no height. */
  .crm-fb-scroll .crm-rule-row { grid-template-columns: 1fr auto auto 28px; }
  .crm-fb-scroll .crm-rule-row > .crm-rule-fieldlbl,
  .crm-fb-scroll .crm-rule-row > .crm-rule-field,
  .crm-fb-scroll .crm-rule-row > .crm-sel-trigger[data-sel-for="crm-rule-field"] { grid-column: 1; }
  .crm-fb-scroll .crm-rule-row > .crm-rule-opwrap { grid-column: 2; }
  .crm-fb-scroll .crm-rule-row > .crm-rule-nodata { grid-column: 3; }
  .crm-fb-scroll .crm-rule-row > .crm-rule-tally { grid-column: 3; }
  .crm-fb-scroll .crm-rule-row > .crm-rule-remove { grid-column: 4; }
  .crm-fb-scroll .crm-rule-row > .crm-rule-valuewrap { grid-column: 1 / -1; }
}
.crm-rule-remove {
  flex: 0 0 auto; width: 28px; height: 28px; border: 0; background: none;
  border-radius: 8px; color: #cbd5e1; font-size: 18px; line-height: 1; cursor: pointer;
}
.crm-rule-remove:hover { color: #dc2626; background: #fef2f2; }

/* ── Nested buckets: a set of filters with its own all/any ──
   Marked by a coloured spine rather than a full frame, so depth reads at a
   glance without stacking boxes inside boxes. */
.crm-rule-grp {
  border: 0; border-left: 2px solid #ddd0fb; border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, rgba(245, 240, 255, .85), rgba(250, 248, 255, .35));
  padding: 10px 12px 8px 14px;
}
.crm-rule-grp[data-depth="2"] { border-left-color: #b9e3f5; background: linear-gradient(90deg, rgba(236, 248, 255, .85), rgba(248, 252, 255, .35)); }
.crm-rule-grp[data-depth="3"] { border-left-color: #d6e3b8; background: linear-gradient(90deg, rgba(246, 250, 236, .85), rgba(252, 253, 246, .35)); }
.crm-rule-grp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.crm-rule-grp-lbl {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: #6d28d9; text-transform: none;
}
.crm-rule-grp[data-depth="2"] .crm-rule-grp-lbl { color: #0e7490; }
.crm-rule-grp[data-depth="3"] .crm-rule-grp-lbl { color: #4d7c0f; }
.crm-rule-grp-body { gap: 8px; }
.crm-rule-grp-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.crm-rule-grp .crm-grp-match,
.crm-rule-grp .crm-sel-trigger[data-sel-for="crm-grp-match"] {
  width: auto; min-width: 66px; padding: 3px 8px; height: auto; font-size: 12px; font-weight: 600;
}

/* Add buttons read as actions, not as form furniture */
.crm-rule-add {
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  font-size: 12px; font-weight: 700; color: #7c3aed; font-family: inherit;
}
.crm-rule-add:hover { text-decoration: underline; }
.crm-rule-add--lg { font-size: 12.5px; }

.crm-seg-dynamic-foot { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.crm-seg-count { flex: 1 1 auto; text-align: right; font-size: 12.5px; font-weight: 600; color: #94a3b8; font-variant-numeric: tabular-nums; }
.crm-seg-count[data-has] { color: #7c3aed; }

/* ── Group builder: identity row (image + name) ── */
.crm-seg-idrow { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.crm-seg-idrow .crm-edit-avatar { flex: 0 0 auto; width: 52px; height: 52px; margin-top: 22px; }
.crm-seg-namewrap { flex: 1 1 auto; min-width: 0; }

/* ── Hand-pick escape hatch ── */
.crm-seg-handpick-link {
  display: inline-block; margin-top: 16px; background: none; border: 0; padding: 0;
  font-size: 12.5px; color: #7c3aed; cursor: pointer; font-weight: 600; font-family: inherit;
}
.crm-seg-handpick-link:hover { text-decoration: underline; }

/* ── Optional-field tag + Advanced disclosure ── */
.crm-opt { font-size: 11px; font-weight: 500; color: #94a3b8; text-transform: none; letter-spacing: 0; }
.crm-seg-adv { margin-top: 18px; border-top: 1px solid #eef2f7; padding-top: 6px; }
.crm-seg-adv > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: #64748b; padding: 8px 0; list-style: none;
  display: flex; align-items: center; gap: 6px; user-select: none;
}
.crm-seg-adv > summary::-webkit-details-marker { display: none; }
.crm-seg-adv > summary::before { content: "▸"; font-size: 10px; color: #94a3b8; transition: transform .15s ease; }
.crm-seg-adv[open] > summary::before { transform: rotate(90deg); }
.crm-seg-adv[open] > summary { color: #334155; }

/* ═══════════════════════════════════════════════════════════════
   CRM_SELECT — coded dropdown (crm-select.js)
   ═══════════════════════════════════════════════════════════════
   Replaces the OS <select> list. The native element stays in the DOM as the
   value holder and is parked off-layout; .crm-sel-trigger carries whatever
   classes the select had, so .ch-input / .crm-rule-field sizing still applies.
   The popover lives on <body> at position:fixed so no modal's overflow can
   clip it. */
select.crm-sel-native {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  clip-path: inset(50%);
}
.crm-sel-trigger {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  text-align: left;
  cursor: pointer;
  background: #fff;
}
.crm-sel-trigger .crm-sel-label {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-sel-trigger.is-empty .crm-sel-label { color: var(--ink4, #94a3b8); }
.crm-sel-trigger .crm-sel-caret { flex: none; width: 14px; height: 14px; color: #94a3b8; }
.crm-sel-trigger[aria-expanded="true"] {
  border-color: #a78bda;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}
.crm-sel-trigger[aria-expanded="true"] .crm-sel-caret { transform: rotate(180deg); }
/* Per-control sizing. The trigger deliberately does NOT inherit the select's
   classes (see the note in crm-select.js — it would shadow every
   querySelector('.crm-rule-field') style value read), so each control that
   needs a specific width gets one rule here, keyed on the select it fronts. */
.crm-rule-row .crm-sel-trigger[data-sel-for="crm-rule-field"] { flex: 0 0 auto; min-width: 190px; }
.crm-rule-row .crm-sel-trigger[data-sel-for="crm-rule-op-sel"] {
  width: auto; min-width: 84px; padding: 4px 8px; min-height: 0; font-size: 12.5px;
}
.crm-rule-row .crm-sel-trigger[data-sel-for="crm-rule-value"] { flex: 1 1 200px; min-width: 160px; }
.crm-sel-trigger[data-sel-for="crm-within-u"] {
  width: auto; min-width: 92px; padding: 5px 8px; min-height: 0;
  border: 1px solid #d9e2ec; border-radius: 8px; font-size: 12.5px;
}
.crm-sel-trigger[data-sel-for="crm-mp-sort"] { width: auto; min-width: 150px; }
/* Lives in the modal header now, beside the group name — sized to its text, not
   to the old full-width form field it used to be. */
.crm-sel-trigger[data-sel-for="crmSegmentParent"] {
  width: auto; max-width: 260px; min-width: 108px; padding: 3px 8px; min-height: 0;
  font-size: 12px; font-weight: 600; color: #475569;
}
.crm-sel-trigger[data-sel-for="crmSegmentMatch"],
.crm-sel-trigger[data-sel-for="crm-mp-match"] {
  width: auto; min-width: 74px; padding: 3px 8px; min-height: 0; font-size: inherit;
}
/* The chip picker's "+ add…" trigger stays a link, not a boxed control. */
.crm-sel-trigger[data-sel-for="crm-chip-add"] {
  background: none; border: 0; padding: 2px 4px; min-height: 0; width: auto; min-width: 70px;
}
.crm-sel-trigger[data-sel-for="crm-chip-add"] .crm-sel-label { color: #7c3aed; font-weight: 600; font-size: 12.5px; }
.crm-sel-trigger[data-sel-for="crm-chip-add"] .crm-sel-caret { color: #a78bda; }
.crm-sel-trigger[data-sel-for="crm-chip-add"]:hover .crm-sel-label { text-decoration: underline; }

.crm-sel-pop {
  position: fixed;
  /* ⚠️ Must clear `.ch-overlay`, which is z-index 2147483000 — the modal this
     dropdown almost always opens inside. A "comfortably high" number like
     12000 renders the popover BEHIND the modal: the trigger opens and nothing
     appears. Stay under .crm-avatar-lightbox / .crm-tooltip-bubble
     (2147483647) and .crm-crop-overlay (2147483646), which are full-screen and
     legitimately outrank a dropdown. */
  z-index: 2147483645;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .06);
  overflow: hidden;
  font-family: var(--f);
}
/* ⚠️ The search is the TOP OF THE POPOVER, not a field parked in a tray on
   top of it. It used to be four nested frames deep — the popover's border,
   then a tinted head panel, then the field's own 1px box, then a 3px focus
   ring around that — which is the grey-outline-over-everything Tyler called
   out: "you have the gray outline over everything, you do that a lot."
   One frame now (the popover's), one hairline to divide, and focus is carried
   by the magnifier turning purple rather than by another box. Do not give the
   field back its border or the head back its background. */
.crm-sel-head {
  flex: none;
  padding: 0;
  border-bottom: 1px solid #f1f5f9;
  background: none;
}
.crm-sel-search {
  display: flex; align-items: center; gap: 9px;
  background: none;
  border: 0;
  padding: 0 12px;
}
.crm-sel-search svg {
  width: 14px; height: 14px; color: #b6c0cd; flex: none;
  transition: color .14s ease;
}
.crm-sel-search:focus-within svg { color: #7c3aed; }
.crm-sel-q {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: none; background: none;
  font: inherit; font-size: 13.5px; color: var(--ink);
  padding: 12px 0;
}
.crm-sel-q::placeholder { color: #aab4c2; }
/* Category chips — jump between kinds of filter instead of scrolling past
   them. Built from the <optgroup> labels. The head has no padding of its own
   now, so the chip row carries its own; :first-child covers the short lists
   that get chips without a search box above them. */
.crm-sel-cats { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 9px; }
.crm-sel-cats:first-child { padding-top: 10px; }
.crm-sel-cat {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid #e2e8f0; background: #fff;
  border-radius: 999px; padding: 3px 9px;
  font: inherit; font-size: 11.5px; font-weight: 600; color: #64748b;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.crm-sel-cat:hover { border-color: #c9b6f0; color: #6d28d9; }
.crm-sel-cat.is-on { background: #f1ebff; border-color: #ddcffb; color: #6d28d9; }
.crm-sel-cat-n { font-size: 10px; font-weight: 700; opacity: .65; }

.crm-sel-list { flex: 1 1 auto; overflow-y: auto; padding: 5px; scrollbar-width: thin; }
.crm-sel-list::-webkit-scrollbar { width: 8px; }
.crm-sel-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .16); border-radius: 4px; }
.crm-sel-grp {
  position: sticky; top: -5px;
  background: #fff;
  padding: 8px 8px 4px;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #94a3b8;
}
.crm-sel-opt {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; background: none;
  border-radius: 7px;
  padding: 8px 9px;
  font: inherit; font-size: 13px; color: var(--ink);
  text-align: left; cursor: pointer;
}
.crm-sel-opt-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-sel-opt.is-active { background: #f4f0ff; color: #4c1d95; }
.crm-sel-opt.is-sel { font-weight: 700; color: #6d28d9; }
.crm-sel-tick { flex: none; width: 13px; height: 13px; color: #7c3aed; }
.crm-sel-empty { padding: 18px 12px; text-align: center; font-size: 12.5px; color: #94a3b8; }
/* Foot of a capped list — says what is not on screen instead of pretending the
   list ends here. */
.crm-sel-more {
  padding: 9px 10px; margin-top: 3px;
  border-top: 1px dashed #e8edf4;
  font-size: 11.5px; color: #94a3b8; text-align: center;
}
/* ── "Use what I typed" ────────────────────────────────────────────
   Only ever on a `data-free` picker, and only while there is something in the
   search box. It is a DIFFERENT kind of row from the ones above it — those are
   values on file, this one is a value you are making — so it reads as an
   action, dashed off from the list, never as one more option in the pile. */
.crm-sel-opt--free {
  margin-top: 3px;
  border-top: 1px dashed #e8edf4;
  border-radius: 0 0 7px 7px;
  color: #6d28d9; font-weight: 600;
}
.crm-sel-opt--free:only-child { margin-top: 0; border-top: 0; border-radius: 7px; }
.crm-sel-opt--free .crm-sel-opt-label b { font-weight: 800; }
.crm-sel-opt--free.is-active { background: #f4f0ff; }
.crm-sel-opt-plus {
  background: #7c3aed; color: #fff;
  font-size: 15px; font-weight: 700; line-height: 1;
}

/* ── Coded rule controls: grouped field select, op selector, chips ── */
.crm-rule-field optgroup { font-weight: 700; color: #475569; }
.crm-rule-opwrap { flex: 0 0 auto; }
.crm-rule-op-sel { width: auto; min-width: 74px; padding: 4px 8px; height: auto; font-size: 12.5px; }
.crm-rule-row .crm-rule-op { font-size: 12px; color: #94a3b8; padding: 0 2px; }
.crm-rule-multi { min-height: 34px; padding: 4px; }

/* chip multiselect — coded "is one of" picker, no free typing */
.crm-chip-multi {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%;
  border: 1px solid #d9e2ec; border-radius: 8px; padding: 5px 6px; background: #fff; min-height: 34px;
}
.crm-chip-list { display: contents; }
.crm-chip {
  display: inline-flex; align-items: center; gap: 4px; background: #f1ebff; color: #6d28d9;
  border: 1px solid #e2d6fb; border-radius: 999px; padding: 2px 4px 2px 9px; font-size: 12px; font-weight: 600;
}
.crm-chip-x {
  border: 0; background: none; color: #9a7fd1; cursor: pointer; font-size: 15px; line-height: 1;
  padding: 0 2px; border-radius: 999px;
}
.crm-chip-x:hover { color: #6d28d9; }
.crm-chip-add {
  border: 0; background: none; color: #7c3aed; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 2px 4px; min-width: 70px; outline: none;
}
.crm-chip-add:hover { text-decoration: underline; }

/* "Active within the last N weeks" compound control */
.crm-within { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #475569; flex-wrap: wrap; }
.crm-within-n { width: 62px; padding: 5px 8px; border: 1px solid #d9e2ec; border-radius: 8px; text-align: center; font: inherit; }
.crm-within-u { padding: 5px 8px; border: 1px solid #d9e2ec; border-radius: 8px; background: #fff; font: inherit; }

/* ── Collapsible group tree: chevron toggle ── */
.crm-seg-toggle {
  flex: 0 0 auto; width: 22px; height: 22px; margin-right: 4px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer; color: #94a3b8; border-radius: 6px;
  transition: background-color .15s ease, color .15s ease;
}
.crm-seg-toggle:hover { background: #eef2ff; color: #6d28d9; }
.crm-seg-toggle svg { transition: transform .18s ease; }
.crm-seg-toggle.is-open svg { transform: rotate(90deg); }
.crm-seg-toggle--leaf { cursor: default; }
.crm-seg-toggle--leaf:hover { background: none; }

/* ── Motion & polish: smooth, tasteful, not flashy ── */
@keyframes crmRowIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .crm-rule-row { animation: crmRowIn .2s ease both; }
}
.crm-rule-row .ch-input, .crm-chip, .crm-chip-add, .crm-rule-op-sel,
.crm-within-n, .crm-within-u, .crm-rule-remove, .crm-seg-count,
.crm-seg-ai-btn, .crm-seg-handpick-link {
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, color .15s ease, transform .12s ease;
}
.crm-rule-row .ch-input:focus, .crm-within-n:focus, .crm-within-u:focus, .crm-chip-add:focus {
  border-color: #a78bda; box-shadow: 0 0 0 3px rgba(124, 58, 237, .12); outline: none;
}
.crm-chip:hover { transform: translateY(-1px); }
.crm-rule-remove:hover { transform: scale(1.06); }
.crm-seg-ai-btn:active { transform: translateY(1px); }
.crm-seg-count[data-has] { animation: crmRowIn .2s ease; }

/* Type + channel badges (segments list + detail) */
.crm-seg-typebadge {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 6px;
}
.crm-seg-typebadge--static { background: #e2f1fb; color: #075985; }
.crm-seg-typebadge--dynamic { background: #ece7fd; color: #6d28d9; }

.crm-seg-chan {
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 6px; white-space: nowrap;
}
.crm-seg-chan--card { background: #fdf0d9; color: #b45309; }
.crm-seg-chan--email { background: #d6f5ef; color: #0e7c6f; }
.crm-seg-chan--sms { background: #e5e5fb; color: #4338ca; }
.crm-seg-chan--none { display: none; }

.crm-seg-kidhint { color: #7c3aed; font-weight: 600; }
.crm-seg-rollup { color: #15803d; font-weight: 700; }
/* "checking the user roster…" — a count this row cannot stand behind. Reads as
   a state, not as a number, because a wrong zero here is the whole company. */
.crm-seg-unknown { color: #b45309; font-style: italic; }
.crm-seg-live { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #6d28d9; background: #ece7fd; padding: 1px 6px; border-radius: 5px; margin-left: 4px; }

/* Nested (child) rows in the segments list: indent guide + connector */
.crm-row--child { position: relative; }
.crm-row--child::before {
  content: ""; position: absolute; left: -12px; top: 50%; width: 10px; height: 2px;
  background: #d8b4fe;
}

/* Rule summary + wide info item in the group-detail panel */
.crm-seg-info-item--wide { grid-column: 1 / -1; }
.crm-seg-rulesummary { font-size: 12.5px; color: #475569; line-height: 1.5; }

/* ── A group the platform owns ───────────────────────────────────
   The padlock is not decoration. The row has no pencil and no bin, and the
   popup has no Edit button, so without a mark saying why, a locked group
   reads as a permissions bug. One line, above the definition, in the same
   purple the list already uses for "dynamic". */
.crm-seg-sysnote {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-radius: 8px;
  background: #f5f3ff; border: 1px solid #ddd6fe;
  color: #5b21b6; font-size: 12.5px; line-height: 1.5;
}
.crm-seg-sysnote svg { flex: none; margin-top: 2px; }
/* The roster did not answer — what is on screen is stale or empty, and that
   is a warning, not a description of how the group works. */
.crm-seg-sysnote--stale { background: #fffbeb; border-color: #fde68a; color: #92400e; }

.crm-seg-lockbadge {
  display: inline-flex; align-items: center; margin-left: 5px;
  color: #6d28d9; vertical-align: -2px;
}
/* Same footprint as the two buttons it replaces, so a locked row does not
   sit narrower than the ones above and below it. */
.crm-row-actions--locked {
  display: flex; align-items: center; justify-content: flex-end;
  min-width: 64px; color: #94a3b8;
}
.crm-row-lock { display: inline-flex; padding: 6px; }

/* ═══════════════════════════════════════════════════════════
   RELATIONSHIP TAGS + DETAIL BADGES — ported from the VisionOne
   CRM (vo-app-crm) so the MRG company & person popups render the
   Client/Prospect/Vendor/Partner/Member pills + multi-select
   dropdown identically. Uses var() fallbacks so it works whether
   or not MRG defines the matching design tokens.
   ═══════════════════════════════════════════════════════════ */
.crm-emp-badge {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: #166534; background: #dcfce7; border: 1px solid #bbf7d0;
  border-radius: 999px; vertical-align: middle;
}
.crm-tag-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  font-size: 10px; font-weight: 600; text-transform: capitalize;
  color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 999px; vertical-align: middle;
}
/* ── Relationship tags (client/prospect/vendor/partner/member) ──
   Colored read-only pills next to a name, plus a multi-select dropdown
   in the overview. --reltag carries the per-tag color inline. */
.crm-reltag {
  display: inline-flex; align-items: center; margin-left: 6px;
  padding: 2px 9px; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: var(--reltag, #6366f1); border-radius: 999px;
  vertical-align: middle; white-space: nowrap;
}
/* Multi-select dropdown.
   ⚠️ `.crm-reldd-menu` is PORTALLED to <body> at position:fixed by crm.js
   while it is open (see the long note there) — it is a top-level layer, not a
   child of `.crm-reldd`, so do not give it `top: 100%` or any rule that
   assumes the trigger is its offset parent.
   ⚠️ These used to reference `--surface` / `--line` / `--hover`, which this
   app does not define — so every colour silently fell back to a hard-coded
   light value and the menu stayed white on the dark theme. Use the real
   tokens (`--surf`, `--border`, `--ink*`, `--wt-neutral-bg`). */
.crm-reldd { position: relative; display: inline-block; }
.crm-reldd-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 232px; max-width: 460px; min-height: 34px; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surf); color: var(--ink); cursor: pointer; font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.crm-reldd-trigger:hover { border-color: var(--ink4); }
.crm-reldd-trigger:focus-visible,
.crm-reldd-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-blue) 15%, transparent);
}
.crm-reldd-trigger[aria-expanded="true"] .crm-reldd-caret { transform: rotate(180deg); }
.crm-reldd-current { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; flex: 1; min-width: 0; }
.crm-reldd-current .crm-reltag { margin-left: 0; }
.crm-reldd-placeholder { color: var(--ink3); font-size: 12.5px; }
.crm-reldd-caret {
  color: var(--ink3); font-size: 11px; margin-left: auto; flex: none;
  transition: transform .18s var(--ease-spring);
}
.crm-reldd-menu {
  position: fixed;
  /* Same tier as `.crm-sel-pop` — see the note there. It must clear
     `.ch-overlay` (2147483000) or the menu opens BEHIND the detail modal it
     belongs to, and stay under the full-screen lightbox/crop layers. */
  z-index: 2147483645;
  min-width: 248px; padding: 6px;
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto; overscroll-behavior: contain;
  font-family: var(--f);
  animation: crmRelddIn .16s var(--ease-spring) backwards;
}
@keyframes crmRelddIn { from { opacity: 0; transform: translateY(-5px); } }
.crm-reldd-menu[hidden] { display: none; }
.crm-reldd-opt {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 0; background: transparent; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--ink); text-align: left;
  flex: none;   /* the menu scrolls when capped — rows must not squash */
  transition: background .12s ease;
}
.crm-reldd-opt:hover { background: var(--wt-neutral-bg); }
.crm-reldd-opt:focus-visible {
  outline: none; background: var(--wt-neutral-bg);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--reltag, var(--c-blue)) 45%, transparent);
}
.crm-reldd-opt.is-on {
  background: color-mix(in srgb, var(--reltag, var(--c-blue)) 10%, transparent);
  font-weight: 600;
}
.crm-reldd-opt.is-on:hover { background: color-mix(in srgb, var(--reltag, var(--c-blue)) 16%, transparent); }
.crm-reldd-check { width: 14px; text-align: center; color: var(--reltag, #6366f1); opacity: 0; font-weight: 800; transition: opacity .12s ease; }
.crm-reldd-opt.is-on .crm-reldd-check { opacity: 1; }
.crm-reldd-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.crm-reldd-lbl { flex: 1; }
.crm-reldd-auto {
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink3); background: var(--wt-neutral-bg);
  border-radius: 999px; padding: 2px 7px; white-space: nowrap;
}
.crm-reldd-opt.is-auto { cursor: default; opacity: .75; }
.crm-reldd-opt.is-auto:hover { background: transparent; }
@media (prefers-reduced-motion: reduce) {
  .crm-reldd-menu { animation: none; }
  .crm-reldd-caret { transition: none; }
}
.crm-tags-val { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crm-tags-val .crm-reltag, .crm-tags-val .crm-tag-badge { margin-left: 0; }
.crm-detail-prop--rel { align-items: center; }

/* ═══════════════════════════════════════════════════════════════════
   GROUP EDITOR — one popup: filters, members and details
   Replaces the old two-popup flow (Edit Group, then a stacked
   "Add Members" picker floating on top of it).
   ═══════════════════════════════════════════════════════════════════ */
/* A FIXED height, not max-height. The three tabs are wildly different lengths
   (Members runs to the cap, Details is half a screen), so a content-driven
   frame resized under the cursor on every tab click — the jump read as
   jankier than any animation could fix. The body scrolls inside instead. */
.crm-seg-modal { max-width: 940px; display: flex; flex-direction: column; height: min(92vh, 880px); max-height: 92vh; }
.crm-seg-modal .ch-modal-body { flex: 1 1 auto; min-height: 0; }

/* ── NOTHING IN A GROUP POPUP SCROLLS SIDEWAYS ───────────────────────────
   Tyler: "I don't want to be able to scroll left and right on this pop-up
   either." A modal body only scrolls up and down; anything too wide for it is a
   bug in that thing's own layout, and clipping it here is what makes the bug
   visible instead of navigable.

   ⚠️ `overflow-x: hidden` needs `min-width: 0` on the flex/grid children to
   actually bite — a flex item's default `min-width: auto` refuses to shrink
   below its content, so the CHILD keeps the overflowing width and the popup
   gets a horizontal bar anyway. That is why every wrapper down to the panels is
   named here rather than just the body. The member list and the rule rows are
   the two things that were wide: long emails in the picker, and a filter row
   whose three coded dropdowns each claim a min-width. */
#crmSegmentModal .ch-modal-body,
#crmSegmentDetailModal .ch-modal-body { overflow-x: hidden; }
#crmSegmentModal .ch-modal,
#crmSegmentDetailModal .ch-modal { overflow-x: hidden; }
.crm-seg-modal > *,
.crm-seg-body > *,
.crm-seg-panel,
.crm-seg-det,
.crm-seg-det-field { min-width: 0; }
/* Wrap rather than widen: an email that does not fit breaks, it does not push. */
#crmSegmentModal .crm-mp-name,
#crmSegmentModal .crm-mp-sub,
#crmSegmentDetailModal .crm-seg-member-name,
#crmSegmentDetailModal .crm-seg-member-sub { overflow-wrap: anywhere; }

/* Header: the image and name stay put on every tab, so you always know
   which group you are editing. */
.crm-seg-head { align-items: center; gap: 12px; padding-bottom: 12px; }
.crm-seg-head .crm-seg-idrow { margin-bottom: 0; flex: 1 1 auto; min-width: 0; align-items: center; }
.crm-seg-head .crm-seg-idrow .crm-edit-avatar { margin-top: 0; width: 46px; height: 46px; }
.crm-seg-headactions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.crm-seg-aibtn { white-space: nowrap; }
.crm-seg-headimg {
  border: 0; padding: 0; cursor: pointer; position: relative; overflow: hidden;
  transition: box-shadow .15s ease;
}
.crm-seg-headimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Hover the picture to change it. The pencil is an ::after overlay so the
   render code stays free to rewrite the button's contents (initial or photo). */
.crm-seg-headimg::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(15, 23, 42, .55) center / 17px 17px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E");
  opacity: 0; transition: opacity .15s ease;
}
.crm-seg-headimg:hover::after, .crm-seg-headimg:focus-visible::after { opacity: 1; }
.crm-seg-nameinput {
  width: 100%; border: 1px solid transparent; background: transparent; border-radius: 8px;
  font-size: 19px; font-weight: 700; color: #0f172a; padding: 4px 8px; margin-left: -8px;
  font-family: inherit; transition: background .15s ease, border-color .15s ease;
}
.crm-seg-nameinput::placeholder { color: #94a3b8; font-weight: 600; }
.crm-seg-nameinput:hover { background: #f8fafc; }
.crm-seg-nameinput:focus { outline: none; background: #fff; border-color: #c4b5fd; box-shadow: 0 0 0 3px rgba(124, 58, 237, .12); }
.crm-seg-headsubrow { display: flex; align-items: center; gap: 4px; margin-left: -8px; flex-wrap: wrap; }
.crm-seg-headsub { font-size: 12px; color: #94a3b8; font-weight: 600; padding-left: 8px; }

/* "Sits inside" reads as one sentence in the header rather than a form field,
   so nesting is visible the moment the popup opens. */
.crm-seg-headnest { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.crm-seg-headnest-sep { color: #cbd5e1; font-weight: 700; }
.crm-seg-headnest-lbl { font-size: 12px; color: #94a3b8; font-weight: 600; }
.ch-label--sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Tabs */
.crm-seg-tabs { display: flex; gap: 2px; padding: 0 22px; border-bottom: 1px solid #e9eef5; flex: 0 0 auto; }
.crm-seg-tab {
  position: relative; background: none; border: 0; padding: 11px 14px 12px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: #64748b; display: inline-flex; align-items: center; gap: 7px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s ease, border-color .15s ease;
}
.crm-seg-tab:hover { color: #334155; }
.crm-seg-tab.is-on { color: #6d28d9; }
/* The underline grows out of the middle instead of the border-bottom-colour
   flicking on. ⚠️ bottom:-2px, not 0 — absolute offsets are measured from the
   padding box, so 0 parks the bar ABOVE the 2px border it is meant to replace.
   The transparent border stays for layout: without it the row shifts 2px. */
.crm-seg-tab::after {
  content: ''; position: absolute; left: 11px; right: 11px; bottom: -2px; height: 2px;
  background: #7c3aed; border-radius: 2px 2px 0 0;
  transform: scaleX(.35); opacity: 0;
  transition: transform .26s var(--ease-spring), opacity .2s ease;
}
.crm-seg-tab.is-on::after { transform: none; opacity: 1; }
.crm-seg-tab-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px;
  padding: 0 6px; border-radius: 999px; background: #eef2f7; color: #64748b;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background .2s ease, color .2s ease;
}
.crm-seg-tab.is-on .crm-seg-tab-badge { background: #f1ebff; color: #6d28d9; }
/* The PENDING one. Solid purple, so it reads as something you still have to do
   rather than one more count — and it wears the same purple as the selected
   rows and the "N selected" pill, which is how you know the three are one idea.
   ⚠️ Restated inside .is-on, or the rule above repaints it pale the moment you
   are actually on the Members tab. */
.crm-seg-tab-badge--sel,
.crm-seg-tab.is-on .crm-seg-tab-badge--sel { background: #7c3aed; color: #fff; }

.crm-seg-panel[hidden] { display: none; }
/* ⚠️ The `hidden` attribute is only display:none at UA weight, so ANY class rule
   that sets display beats it. Both of these set hidden correctly from JS and
   showed anyway: the badge as an empty pill on a tab with no count, and Add
   selected on all three tabs with nothing selected. Same trap that kept
   #crmSegmentStaticNote on screen. Scoped, so nothing outside the editor moves. */
.crm-seg-tab-badge[hidden] { display: none; }
#crmSegmentAddSelected[hidden] { display: none; }
.crm-seg-body { padding-top: 18px; }
.crm-seg-foot { display: flex; align-items: center; gap: 12px; }
.crm-seg-foot-note { flex: 1 1 auto; font-size: 12.5px; color: #94a3b8; }

/* Tab switch reads as a move, not a flash */
@keyframes crmSegPanelIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  /* Long enough to be a movement — .18s ease was fast enough to register as a
     blink. Matched to the tab underline so both land together. */
  .crm-seg-panel.is-in { animation: crmSegPanelIn .26s var(--ease-spring) both; }
}

/* ── Details tab: labelled fields, no grey frames ── */
.crm-seg-det { display: flex; flex-direction: column; gap: 22px; max-width: 620px; }
.crm-seg-det-field { display: flex; flex-direction: column; gap: 7px; }
.crm-seg-det-lblrow { display: flex; align-items: center; gap: 6px; }
.crm-seg-det-lbl { font-size: 13px; font-weight: 700; color: #0f172a; letter-spacing: -.01em; }
.crm-seg-det-input {
  width: 100%; box-sizing: border-box; resize: vertical;
  border: 1px solid #e6ebf2; border-radius: 10px; background: #fff;
  padding: 11px 13px; font: inherit; font-size: 13.5px; line-height: 1.55; color: #0f172a;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.crm-seg-det-input:hover { border-color: #d9e2ec; }
.crm-seg-det-input:focus { outline: none; border-color: #c4b5fd; box-shadow: 0 0 0 3px rgba(124, 58, 237, .12); }
.crm-seg-det-hint { margin: 0; font-size: 12px; color: #94a3b8; line-height: 1.5; }
/* The live read-out beside a label — "3 filters + 12 added by hand". Pushed to
   the far end so the label stays the thing you read first. */
.crm-seg-det-now {
  margin-left: auto; font-size: 11.5px; font-weight: 600; color: #94a3b8;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ⚠️ `.crm-seg-typepick` / `.crm-seg-typeopt` ARE GONE. The choice moved off
   the Details tab to the TOP of Who belongs, and it is `.crm-seg-how` /
   `.crm-seg-howopt` now — one squared bar of two halves, not two big rounded
   cards. The cards are what Tyler was pointing at: "that pill bar or the pill
   look… should not ever be a thing for any of the selections on here." Two
   free-standing <button> cards is exactly the shape the runtime radius rule
   turns into lozenges, so the replacement is deliberately one bar with a
   divider and a square tick, and it carries border-radius:0 !important on the
   halves so the same rule cannot round them again. */

/* ── Tags, back on the Details tab ──────────────────────────────────────
   Deleted once on the grounds that a group's name says what it is. It does not
   say what the group is BUILT ON: the group in Tyler's screenshot is
   `Has tag = DYT Email List`, and there was no way to see or change that tag. */
.crm-seg-tagfield { width: 100%; box-sizing: border-box; }
.crm-seg-tagsug { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crm-seg-tagsug[hidden] { display: none; }
.crm-seg-tagsug-lbl { font-size: 11.5px; font-weight: 600; color: #94a3b8; }
.crm-seg-tagsug-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border: 1px dashed #d9e2ec; border-radius: 999px;
  background: #fff; cursor: pointer; font-family: inherit;
  font-size: 11.5px; font-weight: 600; color: #475569;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.crm-seg-tagsug-chip:hover { border-style: solid; border-color: #c4b5fd; color: #6d28d9; background: #faf7ff; }
.crm-seg-tagsug-n { font-size: 10px; font-weight: 700; color: #94a3b8; font-variant-numeric: tabular-nums; }
.crm-seg-tagsug-chip:hover .crm-seg-tagsug-n { color: #a78bfa; }

/* ═══ Member picker ═══════════════════════════════════════════════ */
.crm-mp { display: flex; flex-direction: column; gap: 10px; }
.crm-mp-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* ═══ A SEARCH FIELD INSIDE A PANEL HAS NO BOX OF ITS OWN ═══════════
   Tyler: "There should surely be a box around the main thing, not around the
   inner text stuff like that."

   The rule, applied to every search in the group editor and its popups: the
   PANEL is the box. The field is a magnifier, some text, and a 1px hairline
   separating it from the rows it filters — the same treatment `.crm-sel-search`
   in the coded dropdown has always had, which is the one nobody complained
   about. Focus is the hairline and the magnifier turning purple; nothing is
   added and nothing is enclosed, which is this file's standing answer to a
   focus state (see the note on #crmSegmentModal .crm-mp-search:focus-within).

   ⚠️ Removing the wrapper's border is only HALF of it. The inner <input> was
   wearing a forced #C9CFD6 border from assets/css/mrg-brand-override.css — the
   actual grey box he pointed at — and that rule wins with !important no matter
   what is set here. Both halves or neither. */
.crm-mp-search {
  flex: 1 1 260px; min-width: 200px; display: flex; align-items: center; gap: 9px;
  border: 0; border-bottom: 1px solid #e6ecf3; border-radius: 0; padding: 0 2px; background: none;
  transition: border-color .15s ease;
}
.crm-mp-search:focus-within { border-bottom-color: #a78bfa; }
.crm-mp-search:focus-within svg { color: #7c3aed; }
.crm-mp-search svg { flex: 0 0 auto; color: #94a3b8; }
.crm-mp-q { flex: 1 1 auto; border: 0; outline: none; padding: 9px 0; font: inherit; font-size: 13.5px; background: none; color: #0f172a; }

/* Everyone / People / Companies — a facet, not a pair of tabs */
.crm-mp-seg { display: inline-flex; background: #f1f5f9; border-radius: 9px; padding: 3px; gap: 2px; }
.crm-mp-seg button {
  border: 0; background: none; cursor: pointer; padding: 6px 11px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; color: #64748b; transition: background .15s ease, color .15s ease;
}
.crm-mp-seg button:hover { color: #334155; }
.crm-mp-seg button.is-on { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.crm-mp-sort { flex: 0 0 auto; width: auto; min-width: 150px; font-size: 12.5px; }

/* ═══ The membership switch ══════════════════════════════════════════
   Tyler: "When you click Members, it should probably show you who are already
   in, but make it obvious that you can click 'Not in this group' so people
   don't get confused on how they add more individually."

   It is bigger and heavier than the chips below it on purpose — it is not one
   more filter, it is the question the list answers. Each side carries its own
   count, and the count on the side you are NOT on is the discoverable bit:
   "Not in yet 9,591" reads as somewhere to go. A grey pill does not. */
.crm-mp-moderow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.crm-mp-mode {
  display: inline-flex; flex: 0 0 auto; background: #f1f5f9; border-radius: 10px; padding: 3px; gap: 2px;
}
.crm-mp-mode button {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: none; cursor: pointer; padding: 7px 13px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: #64748b;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.crm-mp-mode button:hover { color: #334155; }
.crm-mp-mode button.is-on { background: #fff; color: #4c1d95; box-shadow: 0 1px 2px rgba(15, 23, 42, .10); }
/* The count is the invitation. On the side you are not on it stays legible
   rather than fading out — the whole point is that you can see there are 9,591
   people over there to add. */
.crm-mp-mode-n {
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: #64748b; background: #e6ebf2; border-radius: 999px; padding: 1px 7px;
}
.crm-mp-mode button.is-on .crm-mp-mode-n { color: #6d28d9; background: #f1ebff; }
.crm-mp-modehint { flex: 1 1 auto; min-width: 0; font-size: 12px; color: #94a3b8; }

/* The empty state's own way over to the other side. */
.crm-mp-emptybtn {
  margin-top: 4px; border: 1px solid #ddd0fb; background: #f6f2ff; border-radius: 8px;
  padding: 6px 13px; font-size: 12.5px; font-weight: 600; color: #6d28d9; cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.crm-mp-emptybtn:hover { background: #ede4fd; border-color: #c4b5fd; }

/* Facet chips */
.crm-mp-facets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crm-mp-chip {
  border: 1px solid #e2e8f0; background: #fff; border-radius: 999px; padding: 5px 12px;
  font-size: 12px; font-weight: 600; color: #64748b; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.crm-mp-chip:hover { border-color: #cbd5e1; color: #334155; }
.crm-mp-chip.is-on { background: #f1ebff; border-color: #ddd0fb; color: #6d28d9; }
.crm-mp-chip--quiet.is-on { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
.crm-mp-facets-sep { flex: 1 1 auto; }
.crm-mp-adv-toggle {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e2e8f0; background: #fff;
  border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: #64748b; cursor: pointer;
  /* It sits in the same row as the chips; it should light up the same way. */
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.crm-mp-adv-toggle:hover { border-color: #cbd5e1; color: #334155; }
.crm-mp-adv-toggle.is-on { background: #f1ebff; border-color: #ddd0fb; color: #6d28d9; }

/* Full filter catalog — the same builder the group rules use */
.crm-mp-adv { border: 1px solid #e9eef5; border-radius: 12px; padding: 13px 14px; background: #fbfcfe; }
/* It appears mid-list on a click, so it slides in rather than shoving the
   list down in one frame. */
@media (prefers-reduced-motion: no-preference) {
  .crm-mp-adv { animation: crmSegPanelIn .24s var(--ease-spring) both; }
}
.crm-mp-adv[hidden] { display: none; }
.crm-mp-adv-head { font-size: 12.5px; color: #475569; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.crm-mp-rules { margin-bottom: 10px; }

/* Count + bulk actions */
.crm-mp-actions { display: flex; align-items: center; gap: 12px; }
/* How many you have PICKED, as a number. The tray of faces underneath says
   WHO; this says how many, which is what the footer's Add button acts on. */
.crm-mp-tally {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  background: #7c3aed; color: #fff; border-radius: 999px; padding: 4px 11px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.crm-mp-tally svg { width: 12px; height: 12px; }
/* ⚠️ REQUIRED, not tidiness: `hidden` is only display:none at UA weight, so
   the display:inline-flex above beats it and an empty pill sits on screen
   saying "0 selected". Fourth time in this file — see #crmSegmentAddSelected. */
.crm-mp-tally[hidden] { display: none; }
.crm-mp-count { flex: 1 1 auto; font-size: 12.5px; color: #475569; font-variant-numeric: tabular-nums; }
.crm-mp-count strong { color: #0f172a; font-weight: 700; }
.crm-mp-count-note { color: #94a3b8; font-weight: 500; }
.crm-mp-actions-right { display: flex; align-items: center; gap: 12px; }
.crm-mp-link { background: none; border: 0; padding: 0; cursor: pointer; font-size: 12.5px; font-weight: 600; color: #7c3aed; }
.crm-mp-link:hover { text-decoration: underline; }
.crm-mp-link[hidden] { display: none; }

/* Selected tray — every pick keeps its face */
.crm-mp-tray {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 10px; border-radius: 10px;
  background: #faf7ff; border: 1px solid #ede4fd; max-height: 104px; overflow-y: auto;
}
.crm-mp-tray[hidden] { display: none; }
.crm-mp-pill {
  display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #e2d6fb;
  border-radius: 999px; padding: 3px 4px; font-size: 12px; font-weight: 600; color: #4c1d95;
}
.crm-mp-pill .crm-mp-avatar { width: 20px; height: 20px; font-size: 8px; }
.crm-mp-pill-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-mp-pill-x {
  border: 0; background: none; color: #a78bfa; cursor: pointer; font-size: 15px; line-height: 1;
  padding: 0 4px 0 0; border-radius: 999px;
}
.crm-mp-pill-x:hover { color: #6d28d9; }
.crm-mp-pill--more { background: none; border-style: dashed; color: #7c3aed; padding: 3px 10px; }

/* The list — windowed, so every person scrolls instead of truncating */
.crm-mp-list {
  position: relative; height: 46vh; min-height: 260px; overflow-y: auto; overflow-x: hidden;
  border: 1px solid #e9eef5; border-radius: 12px; background: #fff;
}
.crm-mp-list:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 2px; }
.crm-mp-spacer { position: relative; width: 100%; }
.crm-mp-window { position: absolute; top: 0; left: 0; right: 0; will-change: transform; }

.crm-mp-row {
  display: flex; align-items: center; gap: 11px; padding: 0 13px; height: 56px; box-sizing: border-box;
  border-bottom: 1px solid #f4f7fb; cursor: pointer; user-select: none; transition: background .12s ease;
}
.crm-mp-row:hover { background: #f8fafc; }
/* ═══ The four states of one 56px row ═══════════════════════════════
   Tyler, on the Members tab: "the people you have selected need to show a
   better visual of them being selected… if you click that they are in, I just
   want a better visual that shows they're selected."

   Before this, three of the four states drew the SAME empty 19px box and
   differed only by a wash too pale to see (`is-sel` was #faf7ff on white —
   three points of lightness). Turn the "Already in" facet on and the whole
   left column was identical faint squares: a roster of 9,605 members that
   looked like a list of nothing.

   Each state now differs by SHAPE first and colour second, and says its name
   in words on the right-hand side:
     · selectable    an empty rounded SQUARE, ghost tick on hover
     · selected      filled square + white tick, tinted row, purple spine,
                     ringed face, and the word "Selected"
     · in by hand    a blue CIRCLE with a tick     + "Remove"
     · in by filter  a purple CIRCLE with a tick   + "By filter"
   A square is a choice you are making; a circle is a done-marker. That reads
   without looking twice and it survives colour blindness, which three shades
   of purple do not. The two colours are the group list's own and travel with
   its words — static #0284c7, dynamic #7c3aed. */
.crm-mp-row.is-sel {
  background: #f4edff;
  box-shadow: inset 3px 0 0 #7c3aed;
}
.crm-mp-row.is-sel:hover { background: #eee3ff; }
.crm-mp-row.is-sel .crm-mp-name { color: #4c1d95; font-weight: 700; }
.crm-mp-row.is-sel .crm-mp-sub { color: #9182b5; }
/* The white ring first, so the purple reads as a ring around the face rather
   than a halo bleeding into it. It is a box-shadow, so it sits outside the
   avatar's own overflow:hidden and the photo itself is untouched. */
.crm-mp-row.is-sel .crm-mp-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #7c3aed; }

/* ⚠️ Already-in rows are no longer DIMMED. `opacity: .55` on the name made a
   member look unavailable rather than included, which is the opposite of what
   the row is saying. They step back via ink colour instead, so the face and
   the badge beside them stay at full strength. */
.crm-mp-row.is-member { cursor: default; box-shadow: inset 3px 0 0 #7dd3fc; }
.crm-mp-row.is-member .crm-mp-name { color: #475569; }
.crm-mp-row.is-member .crm-mp-sub { color: #aab5c4; }

.crm-mp-check {
  flex: 0 0 auto; width: 20px; height: 20px; border: 2px solid #cbd5e1; border-radius: 6px;
  background: #fff; display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease, border-color .12s ease, border-radius .12s ease, box-shadow .12s ease;
}
.crm-mp-check svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity .12s ease; }
/* Hovering a row you CAN pick previews the tick, so the box reads as a control
   rather than as decoration. Scoped away from the three states that are not
   pickable, or hovering a member would promise a toggle that `toggle()`
   refuses on the way in. */
.crm-mp-row:not(.is-sel):not(.is-member):not(.is-auto):hover .crm-mp-check { border-color: #b9a6ee; }
.crm-mp-row:not(.is-sel):not(.is-member):not(.is-auto):hover .crm-mp-check svg { color: #a78bfa; opacity: .45; }

.crm-mp-row.is-sel .crm-mp-check {
  background: #7c3aed; border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .18);
}
.crm-mp-row.is-sel .crm-mp-check svg { opacity: 1; color: #fff; }

/* Already in — a filled circle with a tick, because they are DONE, not
   disabled. The dashed empty box this replaces was the whole complaint. */
.crm-mp-row.is-member .crm-mp-check,
.crm-mp-row.is-auto .crm-mp-check { border-radius: 50%; border-style: solid; }
/* FILLED = somebody decided. OUTLINED = a rule decided. That second axis is
   what keeps "by filter" from wearing the same solid purple as the row you
   just picked — they would have differed only by shape, and the loudest
   colour in the modal belongs to the thing you are about to do, not to a
   passive match. A purple tick on white also clears 3:1 where white on light
   violet does not. */
.crm-mp-row.is-member .crm-mp-check { background: #0284c7; border-color: #0284c7; }
.crm-mp-row.is-member .crm-mp-check svg { opacity: 1; color: #fff; }
.crm-mp-row.is-auto .crm-mp-check { background: #fff; border-color: #7c3aed; }
.crm-mp-row.is-auto .crm-mp-check svg { opacity: 1; color: #7c3aed; }

/* "Selected" — the state said in a word, on the same edge of the row where an
   already-in person says "Remove" or "By filter". A colour alone is a legend
   you have to have been taught. */
.crm-mp-state {
  flex: 0 0 auto; border: 1px solid #cbb4fb; background: #ede4fd; border-radius: 999px;
  padding: 3px 9px; font-size: 11px; font-weight: 700; color: #5b21b6; letter-spacing: .01em;
  white-space: nowrap;
}

.crm-mp-avatar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.crm-mp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.crm-mp-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crm-mp-name {
  font-size: 13.5px; font-weight: 600; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
}
.crm-mp-kind {
  flex: 0 0 auto; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: #64748b; background: #f1f5f9; border-radius: 4px; padding: 2px 5px;
}
.crm-mp-sub { font-size: 12px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-mp-dot { margin: 0 6px; color: #cbd5e1; }
.crm-mp-rm {
  flex: 0 0 auto; border: 1px solid #e2e8f0; background: #fff; border-radius: 8px;
  padding: 4px 10px; font-size: 11.5px; font-weight: 600; color: #94a3b8; cursor: pointer;
}
.crm-mp-rm:hover { color: #dc2626; border-color: #fecaca; background: #fef2f2; }

/* In the group because a FILTER catches them — nothing to remove here, so it
   is a label, not a button. */
.crm-mp-auto {
  flex: 0 0 auto; border: 1px solid #e4dbfb; background: #f6f2ff; border-radius: 999px;
  padding: 3px 9px; font-size: 11px; font-weight: 700; color: #6d28d9; letter-spacing: .01em;
  cursor: help;
}
/* ── Held BOTH ways: a filter catches them AND somebody added them ──
   The row carries both reasons because only one of them can be taken away
   here, and a plain "Remove" on this row deletes the stored member row and
   leaves the person in the group. Two small parts, so the label reads first and
   the button says which half it owns. */
.crm-mp-heldby { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.crm-mp-rm--half {
  border-color: #e4dbfb; color: #8b74c9;
}
.crm-mp-rm--half:hover { color: #b45309; border-color: #fde3af; background: #fffbeb; }
/* The dynamic side of "already in". Its check and spine are set with the other
   three states above; what is left here is the row itself. ⚠️ These lines come
   AFTER that block, so anything restated here WINS — the dashed faint box this
   replaces was overriding the ticked circle from 50 lines up. */
.crm-mp-row.is-auto { cursor: default; box-shadow: inset 3px 0 0 #c4b5fd; }
.crm-mp-row.is-auto .crm-mp-name { color: #475569; }
.crm-mp-row.is-auto .crm-mp-sub { color: #aab5c4; }
.crm-mp-adv-foot { display: flex; align-items: center; gap: 14px; }

/* ═══ Selecting is the BOX. Opening is the ROW. ══════════════════════
   Tyler: "There shouldn'''t be a preview button. You should just be able to
   click right on the person'''s thing." The eye and the bespoke preview card
   that used to be styled here are deleted — a row now opens the CRM'''s real
   person/company popup, and the tick box is the only thing that selects.

   Which means the box has to look and feel like a hit target rather than a
   decoration: it grows a padded halo on row hover so it is obvious it is the
   separate control, and it says so on focus. Everything about the four states
   (square vs circle, the three fills) is unchanged and lives above. */
.crm-mp-row { cursor: pointer; }
.crm-mp-check { cursor: pointer; }
/* The halo is a box-shadow ring, not padding — padding would resize the box and
   break the 20px square/circle the state language depends on. */
.crm-mp-row:hover .crm-mp-check { box-shadow: 0 0 0 6px #eff2f7; }
.crm-mp-row.is-sel:hover .crm-mp-check { box-shadow: 0 0 0 6px rgba(124, 58, 237, .14); }
.crm-mp-check:hover { box-shadow: 0 0 0 6px #e6ebf2 !important; }
.crm-mp-check:focus-visible { outline: 2px solid #7c3aed; outline-offset: 3px; }
/* An already-in row cannot be ticked, so its box is not a target. */
.crm-mp-row[data-locked] .crm-mp-check { cursor: default; }
.crm-mp-row[data-locked]:hover .crm-mp-check { box-shadow: none; }
/* The row itself, as a keyboard target. */
.crm-mp-row:focus-visible { outline: 2px solid #c4b5fd; outline-offset: -2px; }


.crm-mp-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 54px 20px; text-align: center;
}
.crm-mp-empty strong { font-size: 13.5px; color: #334155; }
.crm-mp-empty span { font-size: 12.5px; color: #94a3b8; }

@media (max-width: 720px) {
  .crm-mp-bar { gap: 6px; }
  .crm-mp-sort { width: 100%; }
  .crm-mp-list { height: 40vh; }
  .crm-seg-tabs { padding: 0 14px; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .crm-mp-row, .crm-mp-check, .crm-mp-check svg, .crm-seg-tab, .crm-seg-tab::after,
  .crm-mp-chip, .crm-mp-adv-toggle, .crm-seg-nameinput, .crm-seg-headimg { transition: none; }
  /* No grow — just be there, on the right tab. */
  .crm-seg-tab::after { transform: none; }
}

/* "Draft with AI" button in the Add/Edit Person header. The header is a flex
   row of [title block][close]; margin-left:auto parks the button hard right,
   just before the close, on every width. */
#crmPersonHeadAi {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* ══ The groups inside this one ════════════════════════════════════
   The bottom half of Who belongs, not a tab of its own: the block above says
   who is in the whole group, and this says which named lists it is made of.
   They are PEERS — "hard invitations" beside "email list" — so the section
   reads as a continuation of the same panel (a rule, a heading, no card), not
   as a level below it.

   A row is a real group, so it reads like one — picture, name, what its
   filters say, and its live count. Expanding one unfolds the same three
   controls the group above has, in place, rather than stacking a second
   popup. */
.crm-seg-inside { margin-top: 24px; padding-top: 18px; border-top: 1px solid #eef2f7; }
/* ⚠️ `hidden` is only display:none at UA weight — it has been beaten in this
   file three times already. This section is hidden on a group that already
   sits inside another one, so guard it. */
.crm-seg-inside[hidden] { display: none; }
.crm-seg-inside-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.crm-seg-inside-ttl {
  margin: 0; font-size: 13.5px; font-weight: 800; color: #0f172a; letter-spacing: -.01em;
}
.crm-seg-inside-count {
  font-size: 11px; font-weight: 700; color: #6d28d9;
  background: #f1ebff; border-radius: 999px; padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}
.crm-seg-inside-count[hidden] { display: none; }
.crm-seg-inside-lede {
  margin: 5px 0 13px; max-width: 640px;
  font-size: 12.5px; line-height: 1.5; color: #94a3b8;
}
.crm-seg-inside-lede[hidden] { display: none; }

.crm-subs { display: flex; flex-direction: column; gap: 8px; }
.crm-sub {
  border: 1px solid #e9eef5; border-radius: 12px; background: #fff; overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.crm-sub:hover { border-color: #dbe3ee; }
.crm-sub.is-open { border-color: #c4b5fd; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }
.crm-sub-head {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
  background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit;
}
.crm-sub-head--new { cursor: default; padding-bottom: 0; }
.crm-sub-newlbl { font-size: 12px; font-weight: 700; color: #7c3aed; text-transform: uppercase; letter-spacing: .04em; }
.crm-sub-chev { flex: none; color: #94a3b8; transition: transform .18s ease; }
.crm-sub.is-open .crm-sub-chev { transform: rotate(90deg); }
.crm-sub-avatar {
  flex: none; width: 34px; height: 34px; border-radius: 9px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 14px; font-weight: 800;
  background: #e2e8f0; color: #475569; overflow: hidden;
}
.crm-sub-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crm-sub-avatar--edit { border: 0; padding: 0; cursor: pointer; position: relative; }
.crm-sub-avatar--edit::after {
  content: "✎"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; background: rgba(15, 23, 42, .55); color: #fff;
  font-size: 13px; opacity: 0; transition: opacity .15s ease;
}
.crm-sub-avatar--edit:hover::after { opacity: 1; }
.crm-sub-avatar--placeholder { color: #94a3b8; font-size: 18px; font-weight: 500; }
.crm-sub-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.crm-sub-name { font-size: 13.5px; font-weight: 700; color: #0f172a; }
.crm-sub-meta { font-size: 12px; color: #94a3b8; font-weight: 600; }
.crm-sub-dot { color: #cbd5e1; }
/* The rule summary is the long part — it truncates, the count never does. */
.crm-sub-rules { color: #7c3aed; }
.crm-sub-edit { padding: 4px 12px 12px; border-top: 1px solid #f1f5f9; }
.crm-sub-idrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.crm-sub-nameinput {
  flex: 1 1 auto; min-width: 0; border: 1px solid transparent; background: transparent;
  border-radius: 8px; font-size: 15px; font-weight: 700; color: #0f172a; padding: 5px 8px;
  font-family: inherit; transition: background .15s ease, border-color .15s ease;
}
.crm-sub-nameinput:hover { background: #f8fafc; }
.crm-sub-nameinput:focus { outline: none; background: #fff; border-color: #c4b5fd; box-shadow: 0 0 0 3px rgba(124, 58, 237, .12); }
.crm-sub-rulehead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.crm-sub-rulelbl { font-size: 12.5px; font-weight: 700; color: #334155; }
.crm-sub-foot { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.crm-sub-foot-spacer { flex: 1 1 auto; }
.crm-sub-foot .crm-seg-count { flex: 0 0 auto; text-align: left; }
.crm-sub-unlink {
  background: none; border: 0; padding: 2px 0; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 600; color: #94a3b8;
}
.crm-sub-unlink:hover { color: #dc2626; text-decoration: underline; }
.crm-sub-save { padding: 7px 14px; font-size: 12.5px; }
.crm-sub-actions { display: flex; align-items: center; gap: 16px; padding: 4px 2px; }
.crm-sub-rollup {
  margin-left: auto; font-size: 12.5px; font-weight: 700; color: #6d28d9;
  background: #ece7fd; padding: 2px 8px; border-radius: 6px; font-variant-numeric: tabular-nums;
}
.crm-sub-empty { padding: 22px 16px; text-align: center; border: 1px dashed #e2e8f0; border-radius: 12px; }
.crm-sub-empty-ttl { margin: 0 0 4px; font-size: 13.5px; font-weight: 700; color: #334155; }
.crm-sub-empty-sub { margin: 0 auto; max-width: 460px; font-size: 12.5px; line-height: 1.5; color: #94a3b8; }
.crm-sub-adopt { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.crm-sub-adopt-lbl { font-size: 12px; font-weight: 600; color: #94a3b8; }
.crm-sel-trigger[data-sel-for="crmSegSubAdopt"] {
  width: auto; max-width: 220px; min-width: 132px; padding: 3px 8px; min-height: 0;
  font-size: 12px; font-weight: 600; color: #475569;
}

/* ── Sub-group motion + polish ─────────────────────────────────────
   Same vocabulary as the groups list (crmRowIn + a short stagger), so a
   sub-group arriving reads like a row arriving anywhere else in the CRM. */
.crm-sub { animation: crmRowIn 220ms var(--ease-spring) both; }
.crm-sub:nth-child(2) { animation-delay: 28ms; }
.crm-sub:nth-child(3) { animation-delay: 50ms; }
.crm-sub:nth-child(4) { animation-delay: 68ms; }
.crm-sub:nth-child(5) { animation-delay: 82ms; }
.crm-sub:nth-child(n+6) { animation-delay: 92ms; }
/* The editor unfolds rather than appearing: the row is re-rendered on expand,
   so this is an entrance animation, not a height transition. */
@keyframes crmSubUnfold {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.crm-sub-edit { animation: crmSubUnfold 200ms var(--ease-spring) both; }
.crm-sub-head:hover { background: #fbfcfe; }
.crm-sub-head:hover .crm-sub-chev { color: #7c3aed; }
.crm-sub-head:focus-visible,
.crm-sub-avatar--edit:focus-visible,
.crm-sub-unlink:focus-visible,
.crm-sub-save:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(124, 58, 237, .22); border-radius: 10px;
}
.crm-sub-save:disabled { opacity: .6; cursor: progress; }
/* Unsaved work is kept, not lost — the row says so instead of the popup
   guessing whether you meant to discard it. */
.crm-sub.is-dirty { border-color: #fcd34d; }
.crm-sub-dirty {
  margin-left: 8px; font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: #92400e; background: #fef3c7; padding: 1px 6px; border-radius: 5px;
}
.crm-sub-draftnote { margin: 8px 0 0; font-size: 12px; font-weight: 600; color: #92400e; }
/* The inherited ceiling, said above the filters it applies to. Purple because
   it is a statement about a Dynamic group's membership, which is the colour
   that word carries everywhere else in this editor. */
.crm-sub-inherit {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 10px 0 0; padding: 9px 12px;
  background: #faf7ff; border: 1px solid #ece2ff; border-left: 3px solid #7c3aed;
  border-radius: 9px;
  font-size: 12.5px; line-height: 1.55; color: #4c3a75;
}
.crm-sub-inherit b { color: #3b1f6b; font-weight: 700; }
.crm-sub-inherit-mark { flex: none; color: #7c3aed; margin-top: 1px; display: inline-flex; }
.crm-sub-inherit.is-empty {
  background: #fffaf3; border-color: #fde8c8; border-left-color: #d97706; color: #7c4a13;
}
.crm-sub-inherit.is-empty b { color: #713f12; }
.crm-sub-inherit.is-empty .crm-sub-inherit-mark { color: #d97706; }
.crm-sub-rules {
  display: inline-block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
@media (prefers-reduced-motion: reduce) {
  .crm-sub, .crm-sub-edit { animation: none; }
  .crm-sub, .crm-sub-chev, .crm-sub-head, .crm-sub-nameinput { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   NO PILLS ANYWHERE IN THE GROUP EDITOR OR THE FILTER BUILDER
   ──────────────────────────────────────────────────────────────────
   Tyler, 2026-08-06: "All the selections, like the details, should not have
   that pill bar or the pill look at all. That should not ever be a thing for
   any of the selections on here."

   Two separate causes, and fixing one alone leaves the surface looking
   untouched — this is the fourth surface it has bitten:

   1. assets/js/dashboard-meta.js injects at RUNTIME
        button:not(.ax-card):not(…){border-radius:var(--wt-theme-btn-radius)!important}
      scoring (0,5,1). Every button on the page gets the tenant's large button
      radius: the type-choice cards became lozenges and the tab's focus ring
      became an ellipse drawn around the word "Details". An id beats five
      classes, so #crmSegmentModal button wins where three classes plus
      !important measurably do not. ⚠️ Never fix this by adding a :not() to
      dashboard-meta's own selector — that file has no ?v= and every browser
      that has ever loaded the page keeps the old copy.
   2. Our OWN 999px on the chips, badges and counters — plain spans that (1)
      never touches, so they survive an id fix that "works".

   The exemptions below are the things that really ARE round: an avatar is a
   circle because it is a face, and a chip's × is a circle because it is a dot.
   ══════════════════════════════════════════════════════════════════ */
#crmSegmentModal button:not(.crm-edit-avatar):not(.crm-sub-avatar):not(.crm-mp-pill-x):not(.crm-chip-x),
#crmSegmentDetailModal button:not(.crm-edit-avatar):not(.crm-sub-avatar):not(.crm-mp-pill-x):not(.crm-chip-x),
#crmFilterOv button:not(.crm-chip-x) {
  border-radius: 8px !important;
}
/* Restate the genuinely-round few INSIDE the same id scope, or the rule above
   squares off the faces as collateral. */
#crmSegmentModal .crm-edit-avatar,
#crmSegmentDetailModal .crm-edit-avatar { border-radius: 50% !important; }
#crmSegmentModal .crm-mp-avatar,
#crmSegmentDetailModal .crm-mp-avatar { border-radius: 50% !important; }
#crmSegmentModal .crm-sub-avatar,
#crmSegmentDetailModal .crm-sub-avatar { border-radius: 9px !important; }

/* Our own capsules, squared. Rule of thumb: radius ≥ ~45% of height AND wider
   than tall = a pill, square it; equally wide and tall = a dot, leave it. */
#crmSegmentModal .crm-seg-tab-badge,
#crmSegmentModal .crm-seg-inside-count,
#crmSegmentModal .crm-mp-chip,
#crmSegmentModal .crm-mp-adv-toggle,
#crmSegmentModal .crm-mp-pill,
#crmSegmentModal .crm-mp-auto,
#crmSegmentModal .crm-mp-state,
#crmSegmentModal .crm-mp-mode-n,
#crmSegmentModal .crm-mp-tally,
#crmSegmentModal .crm-seg-tagsug-chip,
/* ⚠️ `.crm-tag-chip`, not `.crm-tag-input-chip` (which is the CONTAINER, and
   `display:contents` at that). Guessing a class name is how the last capsule
   on the Details tab survived a fix that measured as working everywhere else
   — the browser sweep caught it, reading the class off the live node. */
#crmSegmentModal .crm-tag-chip,
#crmSegmentModal .crm-chip,
#crmFilterOv .crm-chip,
#crmFilterOv .crm-sel-cat { border-radius: 6px !important; }
/* A tab's focus ring followed the runtime radius, which is what drew the oval
   around "Details". It is a square ring now, and it belongs to the tab. */
#crmSegmentModal .crm-seg-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(124, 58, 237, .35);
  border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════════════
   HOW PEOPLE GET IN — decided FIRST, at the top of Who belongs
   ──────────────────────────────────────────────────────────────────
   Tyler: "the static versus dynamic needs to be better… should the selection
   of dynamic or static be right away and not at the end?" Yes — it decides
   what the rest of the popup even means, so it cannot be the last field on the
   third tab. Two squared choices, side by side, on the panel they govern.
   ══════════════════════════════════════════════════════════════════ */
.crm-seg-how {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid #e6ebf2; border-radius: 10px; overflow: hidden;
  background: #fff; margin-bottom: 20px;
}
.crm-seg-howopt {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  text-align: left; padding: 11px 14px; border: 0; background: #fff;
  cursor: pointer; font-family: inherit;
  border-radius: 0 !important;   /* it is one bar of two halves, not two cards */
  transition: background .14s ease, color .14s ease;
}
.crm-seg-howopt + .crm-seg-howopt { border-left: 1px solid #e6ebf2; }
.crm-seg-howopt:hover { background: #fbfaff; }
.crm-seg-howopt.is-on { background: #f7f4ff; }
.crm-seg-howopt-ttl {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: #475569; letter-spacing: -.01em;
}
.crm-seg-howopt.is-on .crm-seg-howopt-ttl { color: #6d28d9; }
/* A square tick box, not a radio dot — the rest of this popup has no circles
   left in it and one would read as a stray. */
.crm-seg-howopt-mark {
  flex: none; width: 15px; height: 15px; border: 1.5px solid #cbd5e1;
  border-radius: 4px; background: #fff; position: relative;
  transition: background .14s ease, border-color .14s ease;
}
.crm-seg-howopt.is-on .crm-seg-howopt-mark { background: #7c3aed; border-color: #7c3aed; }
.crm-seg-howopt.is-on .crm-seg-howopt-mark::after {
  content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.crm-seg-howopt-sub { font-size: 11.5px; line-height: 1.5; color: #94a3b8; padding-left: 22px; }
.crm-seg-howopt.is-on .crm-seg-howopt-sub { color: #7c6aa8; }

/* ══════════════════════════════════════════════════════════════════
   THIS GROUP'S OWN FILTERS — one card, not a wall
   ──────────────────────────────────────────────────────────────────
   The rule rows moved out to their own popup (crm-filter-builder.js). What is
   left here is the answer to "what does this group say?", in one line, with
   the one button that changes it. The wall of dropdowns is what pushed the
   groups inside off the bottom of the screen.
   ══════════════════════════════════════════════════════════════════ */
.crm-seg-filtcard {
  border: 1px solid #e6ebf2; border-radius: 12px; background: #fff; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.crm-seg-filtcard.is-empty { border-style: dashed; background: #fcfdff; }
.crm-seg-filtcard[hidden] { display: none; }
.crm-seg-filthead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crm-seg-filtttl { font-size: 13px; font-weight: 800; color: #0f172a; letter-spacing: -.01em; }
.crm-seg-filtn {
  font-size: 11px; font-weight: 700; color: #6d28d9; background: #f1ebff;
  border-radius: 5px; padding: 2px 7px; font-variant-numeric: tabular-nums;
}
.crm-seg-filtn[hidden] { display: none; }
.crm-seg-filtedit { margin-left: auto; flex: 0 0 auto; }
.crm-seg-filtbody { font-size: 12.5px; line-height: 1.6; color: #475569; overflow-wrap: anywhere; }
.crm-seg-filtbody em { color: #94a3b8; font-style: normal; }
/* The summary reads as the sentence it is — the joins in a quieter weight so
   the values are what the eye lands on. */
.crm-seg-filtjoin { color: #a78bfa; font-weight: 800; font-size: 11px; letter-spacing: .04em; padding: 0 3px; }
.crm-seg-filtfoot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.crm-seg-filtfoot .crm-seg-count { flex: 1 1 auto; text-align: left; }

/* ══════════════════════════════════════════════════════════════════
   THE FILTER BUILDER POPUP (crm-filter-builder.js)
   ══════════════════════════════════════════════════════════════════ */
body.crm-fb-lock { overflow: hidden; }
.crm-fb-ov {
  position: fixed; inset: 0;
  /* ⚠️ Above .ch-overlay (2147483000 — the group editor it opens from) and
     below .crm-sel-pop (2147483645) so its own dropdowns land on top of it. */
  z-index: 2147483200;
  display: none; align-items: center; justify-content: center;
  padding: 24px; box-sizing: border-box;
  background: rgba(15, 23, 42, .52);
  font-family: var(--f);
}
.crm-fb-ov[data-open="true"] { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .crm-fb-ov[data-open="true"] { animation: crmFbFade .18s ease both; }
  .crm-fb-ov[data-open="true"] .crm-fb { animation: crmFbRise .26s var(--ease-spring, cubic-bezier(.2,.8,.2,1)) both; }
}
@keyframes crmFbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes crmFbRise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

.crm-fb {
  display: flex; flex-direction: column; min-width: 0;
  width: min(1160px, 100%); height: min(86vh, 780px);
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 32px 80px rgba(15, 23, 42, .28), 0 4px 14px rgba(15, 23, 42, .1);
}
.crm-fb-head {
  flex: none; display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px 15px; border-bottom: 1px solid #eef2f7;
}
.crm-fb-headtxt { flex: 1 1 auto; min-width: 0; }
.crm-fb-ttl { margin: 0; font-size: 17px; font-weight: 800; color: #0f172a; letter-spacing: -.015em; }
.crm-fb-sub { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: #94a3b8; max-width: 720px; }
.crm-fb-x {
  flex: none; width: 32px; height: 32px; border: 0; background: none; cursor: pointer;
  color: #94a3b8; font-size: 24px; line-height: 1; padding: 0;
  transition: background .14s ease, color .14s ease;
}
.crm-fb-x:hover { background: #f1f5f9; color: #334155; }

.crm-fb-body { flex: 1 1 auto; min-height: 0; display: flex; }

/* ── Left rail: the catalogue ─────────────────────────────────── */
.crm-fb-rail {
  flex: 0 0 296px; min-width: 0; display: flex; flex-direction: column;
  border-right: 1px solid #eef2f7; background: #fbfcfe;
}
.crm-fb-railhead { flex: none; padding: 14px 14px 10px; border-bottom: 1px solid #f1f5f9; }
/* One frame, and focus is the magnifier turning purple — the same language as
   the coded dropdown's search, because it is the same job. */
/* The filter catalogue's search — same rule as .crm-mp-search above: the pane
   is the box, the field is a hairline. */
.crm-fb-search {
  display: flex; align-items: center; gap: 9px;
  border: 0; border-bottom: 1px solid #e6ecf3; border-radius: 0; background: none; padding: 0 2px;
  transition: border-color .14s ease;
}
.crm-fb-search:focus-within { border-bottom-color: #a78bfa; }
.crm-fb-search svg { flex: none; width: 14px; height: 14px; color: #b6c0cd; transition: color .14s ease; }
.crm-fb-search:focus-within svg { color: #7c3aed; }
.crm-fb-q {
  flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: none;
  font: inherit; font-size: 13px; color: #0f172a; padding: 9px 0;
}
.crm-fb-q::placeholder { color: #aab4c2; }
.crm-fb-qx {
  flex: none; border: 0; background: none; color: #94a3b8; cursor: pointer;
  font-size: 17px; line-height: 1; padding: 0 2px;
}
.crm-fb-qx:hover { color: #334155; }
.crm-fb-qx[hidden] { display: none; }
.crm-fb-railnote { margin: 8px 2px 0; font-size: 11.5px; line-height: 1.45; color: #a3adba; }

.crm-fb-cats { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 10px 18px; scrollbar-width: thin; }
.crm-fb-cats::-webkit-scrollbar { width: 8px; }
.crm-fb-cats::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .14); border-radius: 4px; }
.crm-fb-cat + .crm-fb-cat { margin-top: 10px; }
/* 🚨 STICKY, because this list is 54 filters in a 538px rail and always will be.
   Scroll a plain grouped list and the heading leaves before the group does, so
   halfway down you are reading "Account tier / Account health / Company status"
   with no idea they are the Company ones. The heading that owns the rows you are
   looking at stays on screen — the one thing that makes a long catalogue feel
   navigable instead of endless. Needs an opaque background or the rows scroll
   through it. */
.crm-fb-cat-ttl {
  position: sticky; top: -10px; z-index: 2;
  display: flex; align-items: center; gap: 7px; padding: 6px 6px 4px;
  background: #fbfcfe;
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #7c3aed;
}
.crm-fb-cat-n { font-size: 10px; font-weight: 700; color: #b8a5e8; letter-spacing: 0; }
.crm-fb-cat-sub { margin: 0 6px 6px; font-size: 11.5px; line-height: 1.45; color: #a3adba; }
.crm-fb-field {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 1px solid transparent; background: none; cursor: pointer; font-family: inherit;
  padding: 5px 8px; font-size: 13px; color: #334155;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.crm-fb-field:hover, .crm-fb-field:focus-visible {
  background: #fff; border-color: #e2d9fb; color: #4c1d95; outline: none;
}
.crm-fb-field-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-fb-field-plus {
  flex: none; width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px; background: #f1ebff; color: #7c3aed; font-size: 14px; font-weight: 700; line-height: 1;
  opacity: 0; transition: opacity .12s ease;
}
.crm-fb-field:hover .crm-fb-field-plus, .crm-fb-field:focus-visible .crm-fb-field-plus { opacity: 1; }
.crm-fb-norail { padding: 26px 12px; text-align: center; font-size: 12.5px; line-height: 1.55; color: #94a3b8; }

/* A filter this CRM has no values for. Dimmed and marked, sorted to the bottom
   of its category by renderCats — but still clickable, because the column may
   be filled in tomorrow and a filter you cannot find is its own bug. */
.crm-fb-field.is-nodata { color: #94a3b8; }
.crm-fb-field.is-nodata .crm-fb-field-lbl { opacity: .72; }
.crm-fb-field.is-nodata:hover, .crm-fb-field.is-nodata:focus-visible { color: #64748b; }
.crm-fb-field-nod {
  flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 5px; border-radius: 4px; background: #f1f5f9; color: #94a3b8; white-space: nowrap;
}

/* ── The hover explanation ────────────────────────────────────── */
.crm-fb-tip {
  position: fixed; z-index: 2147483400; width: 268px;
  display: flex; flex-direction: column; gap: 5px;
  padding: 11px 13px; border-radius: 10px;
  background: #1e1b34; color: #e9e4fb;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .34);
  pointer-events: none;   /* it must never sit between the cursor and the row */
}
.crm-fb-tip[hidden] { display: none; }
.crm-fb-tip-ttl { font-size: 12.5px; font-weight: 800; color: #fff; }
.crm-fb-tip-txt { font-size: 12px; line-height: 1.55; color: #c5bce6; }
.crm-fb-tip-cta { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #a78bfa; }
/* Why this one would match nobody — said in the same card that explains what
   it asks, because that is the moment you are deciding whether to add it. */
.crm-fb-tip-warn {
  font-size: 11.5px; line-height: 1.5; color: #fcd34d;
  padding: 6px 8px; border-radius: 7px; background: rgba(252, 211, 77, .12);
}

/* ── Right: what you have built ───────────────────────────────── */
.crm-fb-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.crm-fb-mainhead {
  flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid #f1f5f9;
}
.crm-fb-match { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: #0f172a; }
.crm-fb-clear {
  margin-left: auto; border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 600; color: #94a3b8; padding: 4px 6px;
}
.crm-fb-clear:hover { color: #dc2626; }
.crm-fb-clear[hidden] { display: none; }
.crm-fb-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 20px; scrollbar-width: thin; }
.crm-fb-scroll::-webkit-scrollbar { width: 9px; }
.crm-fb-scroll::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .14); border-radius: 4px; }
.crm-fb-rules[hidden] { display: none; }
/* A bucket you clicked into is where the next filter lands — say so, or the
   filter appears somewhere you were not looking. */
.crm-fb-scroll .crm-rule-grp.is-target { box-shadow: 0 0 0 2px rgba(124, 58, 237, .18); }
.crm-fb-empty {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 58px 24px; text-align: center;
}
.crm-fb-empty[hidden] { display: none; }
.crm-fb-empty-mark {
  width: 46px; height: 46px; border-radius: 12px; background: #f5f2ff; color: #a78bfa;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 3px;
}
.crm-fb-empty-mark svg { width: 22px; height: 22px; }
.crm-fb-empty-ttl { margin: 0; font-size: 14px; font-weight: 800; color: #334155; }
.crm-fb-empty-sub { margin: 0; max-width: 400px; font-size: 12.5px; line-height: 1.6; color: #94a3b8; }
.crm-fb-mainfoot {
  flex: none; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 20px; border-top: 1px solid #f1f5f9;
}
.crm-fb-add {
  border: 0; background: none; padding: 2px 0; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 700; color: #7c3aed;
}
.crm-fb-add:hover { text-decoration: underline; }
.crm-fb-hint { flex: 1 1 200px; min-width: 0; font-size: 11.5px; color: #a3adba; }

/* Two decisions and nothing else. The count that used to stretch across this
   footer moved up beside the filters, so the buttons are pushed right by the
   footer itself rather than by whatever happened to sit on their left. */
.crm-fb-foot {
  flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 14px 20px; border-top: 1px solid #eef2f7; background: #fbfcfe;
}
.crm-fb-foot .crm-fb-dirty { margin-right: auto; }

@media (max-width: 900px) {
  .crm-fb-ov { padding: 0; }
  .crm-fb { width: 100%; height: 100%; border-radius: 0; }
  .crm-fb-body { flex-direction: column; }
  .crm-fb-rail { flex: 0 0 auto; max-height: 42%; border-right: 0; border-bottom: 1px solid #eef2f7; }
  .crm-fb-tip { display: none !important; }   /* no hover on a touch screen */
}
@media (prefers-reduced-motion: reduce) {
  .crm-fb-ov[data-open="true"], .crm-fb-ov[data-open="true"] .crm-fb { animation: none; }
  .crm-fb-field, .crm-fb-search, .crm-fb-x { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   GROUPS INSIDE — the empty state, and the actions under it
   ──────────────────────────────────────────────────────────────────
   Tyler: "Nothing inside this one still shows the design… the new group
   inside buttons are not good." The empty state was a dashed box with two
   paragraphs and no way out of it; the actions under it were three text links
   and a bare dropdown in a row. Now: one illustration, one sentence, one
   primary action — and moving an existing group in is the quiet second option
   it always was.
   ══════════════════════════════════════════════════════════════════ */
.crm-sub-empty {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 30px 22px 26px; text-align: center;
  border: 1px dashed #e2e8f0; border-radius: 12px; background: #fcfdff;
}
.crm-sub-empty-mark {
  width: 42px; height: 42px; border-radius: 11px; background: #f5f2ff; color: #a78bfa;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 2px;
}
.crm-sub-empty-mark svg { width: 20px; height: 20px; }
.crm-sub-empty-ttl { margin: 0; font-size: 14px; font-weight: 800; color: #334155; }
.crm-sub-empty-sub { margin: 0 auto; max-width: 430px; font-size: 12.5px; line-height: 1.6; color: #94a3b8; }
/* One real button, not a text link — it is the primary thing to do on an
   empty section, and a link reads as an aside. */
.crm-sub-empty .crm-sub-empty-go { margin-top: 9px; }

.crm-sub-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 2px 2px; margin-top: 10px; border-top: 1px solid #f4f7fb;
}
.crm-sub-actions--bare { border-top: 0; padding-top: 2px; margin-top: 12px; }
.crm-sub-newbtn { flex: 0 0 auto; }
.crm-sub-adopt {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  padding-left: 12px; border-left: 1px solid #eef2f7;
}
.crm-sub-adopt-lbl { font-size: 12px; font-weight: 600; color: #94a3b8; }

/* A sub-group's own filters read exactly like the parent's — one line and one
   button — because a group inside is not a lesser record. */
.crm-sub-filt {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid #eef2f7; border-radius: 10px; background: #fbfcfe; padding: 10px 12px;
}
.crm-sub-filt-body { flex: 1 1 220px; min-width: 0; font-size: 12.5px; line-height: 1.55; color: #475569; overflow-wrap: anywhere; }
.crm-sub-filt-body em { color: #94a3b8; font-style: normal; }
.crm-sub-filt-go { flex: 0 0 auto; }

/* Two margin-left:auto items in one flex row SPLIT the free space, so the
   read-out drifted to the middle of the card head instead of sitting with the
   count. Only the Edit button pushes right. */
.crm-seg-filthead .crm-seg-det-now { margin-left: 0; }

/* The Members tab says which of the two things it is — a read-out of who the
   filters caught, or the list itself. See _segMemberNote(). */
.crm-seg-mpnote {
  margin: 0 0 14px; padding: 10px 13px;
  border: 1px solid #ede4fd; border-left: 3px solid #a78bfa; border-radius: 0 9px 9px 0;
  background: #faf8ff;
  font-size: 12.5px; line-height: 1.6; color: #5b4a86;
}
.crm-seg-mpnote:empty { display: none; }

/* ══════════════════════════════════════════════════════════════════
   DYNAMIC / STATIC — the words, and the colours that go with them
   ──────────────────────────────────────────────────────────────────
   Tyler: "dynamic and static are the terminology we use for the group
   types." They are already the vocabulary of the two scorecards over the
   list, the type filter popover and the badge on every row — and the colour
   pair is already decided by `_segSubAvatar` and `renderSegments`: dynamic
   purple, static blue. Repeating both here is what makes the editor and the
   list one screen instead of two dialects.
   ══════════════════════════════════════════════════════════════════ */
.crm-seg-howopt-mark { /* base is in the block above; the tint is per-type */ }
.crm-seg-howopt--dyn.is-on { background: #f7f4ff; }
.crm-seg-howopt--dyn.is-on .crm-seg-howopt-ttl { color: #6d28d9; }
.crm-seg-howopt--dyn.is-on .crm-seg-howopt-mark { background: #7c3aed; border-color: #7c3aed; }
.crm-seg-howopt--dyn.is-on .crm-seg-howopt-sub { color: #7c6aa8; }
.crm-seg-howopt--dyn:hover { background: #fbfaff; }
.crm-seg-howopt--stat.is-on { background: #f2f9fd; }
.crm-seg-howopt--stat.is-on .crm-seg-howopt-ttl { color: #0369a1; }
.crm-seg-howopt--stat.is-on .crm-seg-howopt-mark { background: #0284c7; border-color: #0284c7; }
.crm-seg-howopt--stat.is-on .crm-seg-howopt-sub { color: #5b7f96; }
.crm-seg-howopt--stat:hover { background: #f9fcfe; }
/* The word carries the weight; the sentence under it is the gloss. */
.crm-seg-howopt-ttl { font-size: 13.5px; font-weight: 800; }

/* ══════════════════════════════════════════════════════════════════
   FILTER BUILDER — the second pass
   ══════════════════════════════════════════════════════════════════ */

/* How many filters, beside the all/any it applies to. */
.crm-fb-n {
  font-size: 11px; font-weight: 700; color: #6d28d9; background: #f1ebff;
  border-radius: 5px; padding: 2px 8px; font-variant-numeric: tabular-nums;
}
.crm-fb-n[hidden] { display: none; }
.crm-fb-undo {
  margin-left: auto; border: 1px solid #ddd0fb; background: #faf7ff; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700; color: #6d28d9;
  padding: 4px 10px; border-radius: 7px;
}
.crm-fb-undo:hover { background: #f1ebff; }
.crm-fb-undo[hidden] { display: none; }

/* ── An exclusion must not read like an inclusion ────────────────
   "is not" is one word in a dropdown in the middle of a row, and it is the
   filter that quietly empties a mailing list. A red spine and a red operator
   make a set with an exclusion in it impossible to mistake for one without. */
.crm-fb-scroll .crm-rule-row.is-not {
  border-left: 2px solid #fca5a5;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(90deg, rgba(254, 242, 242, .9), rgba(255, 251, 251, .2));
  padding: 4px 6px 4px 10px;
  margin-left: -12px;
}
.crm-fb-scroll .crm-rule-row.is-not .crm-sel-trigger[data-sel-for="crm-rule-op-sel"] {
  color: #b91c1c; border-color: #fecaca; background: #fff5f5; font-weight: 700;
}

/* ── The rail: what is already in use ──────────────────────────── */
.crm-fb-field-n {
  flex: none; min-width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px; background: #ece7fd; color: #6d28d9;
  font-size: 10px; font-weight: 800; line-height: 1; padding: 0 4px;
  font-variant-numeric: tabular-nums;
}
.crm-fb-field-n[hidden] { display: none; }
/* The + and the ✓ occupy the same slot: hovering a field you already have
   should still offer to add a second one, not hide that it is there. */
.crm-fb-field:hover .crm-fb-field-n, .crm-fb-field:focus-visible .crm-fb-field-n { display: none; }

/* ── The count sits with the filters, and IS the way in to the faces ──
   🚨 It used to live in the footer. Tyler, 2026-08-10: *"as we're filtering…
   maybe put that at the top."* The number is the reason you touched a filter at
   all, and it was 600px below the filter you touched. `flex: 0 1 auto` here,
   not `1 1 auto` — in the header it shares a line with the match dropdown and
   the filter count, and growing pushes Clear all off the end. */
.crm-fb-count {
  flex: 0 1 auto; min-width: 0; text-align: left;
  display: inline-flex; align-items: center; gap: 9px;
  border: 0; background: none; padding: 4px 0; font-family: inherit;
  font-size: 13px; font-weight: 600; color: #94a3b8;
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.crm-fb-count:disabled { cursor: default; }
.crm-fb-count[data-has] { color: #6d28d9; }
.crm-fb-see {
  flex: none; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #a78bfa; border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.crm-fb-count:hover .crm-fb-see { color: #6d28d9; }
.crm-fb-dirty {
  flex: none; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: #92400e; background: #fef3c7; padding: 3px 8px; border-radius: 5px;
}
.crm-fb-dirty[hidden] { display: none; }

/* ── Who matches: the preview ──────────────────────────────────── */
.crm-fb-pv {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  background: #fff;
}
.crm-fb-pv[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .crm-fb-pv { animation: crmFbPvIn .2s var(--ease-spring, cubic-bezier(.2,.8,.2,1)) both; }
}
@keyframes crmFbPvIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.crm-fb-pv-head {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 13px 20px; border-bottom: 1px solid #f1f5f9;
}
.crm-fb-pv-ttl { font-size: 13px; font-weight: 800; color: #0f172a; letter-spacing: -.01em; }
.crm-fb-pv-n {
  font-size: 11px; font-weight: 700; color: #6d28d9; background: #f1ebff;
  border-radius: 5px; padding: 2px 8px; font-variant-numeric: tabular-nums;
}
.crm-fb-pv-x {
  margin-left: auto; flex: none; width: 28px; height: 28px; border: 0; background: none;
  color: #94a3b8; font-size: 20px; line-height: 1; cursor: pointer; padding: 0;
}
.crm-fb-pv-x:hover { background: #f1f5f9; color: #334155; }
.crm-fb-pv-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 12px 14px; scrollbar-width: thin; }
.crm-fb-pv-list::-webkit-scrollbar { width: 9px; }
.crm-fb-pv-list::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .14); border-radius: 4px; }
.crm-fb-pv-row {
  display: flex; align-items: center; gap: 11px; padding: 7px 8px;
  border-bottom: 1px solid #f6f9fc;
}
.crm-fb-pv-row .crm-mp-avatar { width: 30px; height: 30px; font-size: 11px; }
.crm-fb-pv-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.crm-fb-pv-name {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-fb-pv-kind {
  flex: none; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: #64748b; background: #f1f5f9; border-radius: 4px; padding: 2px 5px;
}
.crm-fb-pv-sub { font-size: 11.5px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-fb-pv-empty { padding: 54px 20px; text-align: center; font-size: 13px; color: #94a3b8; }
.crm-fb-pv-more {
  padding: 11px 10px; margin-top: 4px; border-top: 1px dashed #e8edf4;
  font-size: 11.5px; color: #94a3b8; text-align: center;
}

/* ── Draft with AI, in the header where the filters are ──────────
   Same violet spark language as every other AI door in the app, sized to sit
   beside a 17px title without competing with it. */
.crm-fb-ai {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 9px; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 700; color: #6d28d9;
  background: #f5f2ff; border: 1px solid #e5dcff;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.crm-fb-ai:hover { background: #ede7ff; border-color: #d6c8ff; color: #5b21b6; }
.crm-fb-ai[hidden] { display: none; }
.crm-fb-ai svg { flex: none; }

/* ── "You closed this with 6 filters you never used" ─────────────
   🚫 WHAT REPLACED THE KEEP/DISCARD BAR. That bar was the only popup in this
   app that argued with you on the way out, and it covered its own footer to do
   it. The × just closes now; unused work is kept and offered back here, at the
   top of the pane it belongs to, where it is an offer rather than a question
   blocking the exit. */
.crm-fb-restore {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 11px 13px;
  border: 1px solid #ddd0ff; border-radius: 11px; background: #f8f6ff;
}
.crm-fb-restore[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .crm-fb-restore { animation: crmFbPvIn .2s var(--ease-spring, cubic-bezier(.2,.8,.2,1)) both; }
}
.crm-fb-restore-txt { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: #4c1d95; }
.crm-fb-restore-txt b { font-weight: 800; }
.crm-fb-restore-x {
  flex: none; width: 26px; height: 26px; border: 0; background: none; cursor: pointer;
  color: #a78bfa; font-size: 19px; line-height: 1; padding: 0; border-radius: 7px;
}
.crm-fb-restore-x:hover { background: #ede7ff; color: #6d28d9; }

/* ── What ONE filter does on its own ─────────────────────────────
   The FIFTH child of a four-column grid, exactly like .crm-rule-nodata above
   it — it takes its own line under the row, and anything that lands before the
   × is what pushes the × onto a line of its own. Two tones, and both of them
   are filters that look fine and are not: `zero` catches nobody (a typo'd
   value, an empty field) and takes the whole group to zero under "match all";
   `wide` catches nearly every record there is, so it narrows nothing. */
.crm-rule-tally {
  grid-column: 1 / -1; justify-self: start;
  font-size: 11px; font-weight: 600; color: #7c8798;
  padding: 2px 7px; border-radius: 5px; background: #f4f7fb;
  font-variant-numeric: tabular-nums;
}
.crm-rule-tally[hidden] { display: none; }
.crm-rule-tally[data-tone="zero"] { color: #b91c1c; background: #fef2f2; }
.crm-rule-tally[data-tone="wide"] { color: #b45309; background: #fffbeb; }
/* ── "Every filter finds people; the set finds nobody" ────────────
   The one state in this screen that used to be unexplainable, so it gets a real
   band rather than another small tone on a pill — and the band holds the fix.
   Amber, not red: nothing is broken, the logic just says something other than
   what was meant. */
.crm-fb-conflict {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 9px 12px;
  border: 1px solid #fde3af; border-left: 3px solid #f59e0b; border-radius: 9px;
  background: #fffbeb;
}
.crm-fb-conflict[hidden] { display: none; }
.crm-fb-conflict-txt { flex: 1 1 240px; min-width: 0; font-size: 12.5px; line-height: 1.5; color: #7c5310; }
.crm-fb-conflict-txt b { font-weight: 800; color: #78350f; }
.crm-fb-conflict-go {
  flex: 0 0 auto; border: 1px solid #f0c274; background: #fff; border-radius: 8px;
  padding: 5px 11px; font-family: inherit; font-size: 12px; font-weight: 700;
  color: #92400e; cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease;
}
.crm-fb-conflict-go:hover { background: #fef3c7; border-color: #d99b3a; }
.crm-fb-conflict-go[hidden] { display: none; }

/* ── WHAT THE AI JUST WROTE, SAID IN THE BUILDER ──────────────────
   The review popup this replaced was a second card in front of the one screen
   that already shows the count, the faces and the sentence — live, and
   editable. What the card was genuinely for is two lines of fact: how many
   filters landed, and what the model asked for that this CRM does not have.
   Violet, because it is the AI speaking, not a warning. */
.crm-fb-note {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  margin: 12px 20px 0; padding: 9px 12px;
  border: 1px solid #e2d6ff; border-left: 3px solid #7c3aed; border-radius: 9px;
  background: linear-gradient(90deg, #f7f3ff, #fdfcff);
}
.crm-fb-note[hidden] { display: none; }
.crm-fb-note-mark {
  flex: none; width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; background: #ece4ff; color: #7c3aed;
}
.crm-fb-note-mark svg { width: 12px; height: 12px; }
.crm-fb-note-txt { flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.5; color: #4c1d95; }
.crm-fb-note-txt b { font-weight: 800; }
/* Said out loud, always — a dropped filter is the difference between "clients
   in Ohio" and "clients", and the count above looks equally confident either
   way. It was the one thing on the review card nothing else on this screen
   says. */
.crm-fb-note-txt em { font-style: normal; display: block; margin-top: 3px; color: #7c5310; }
.crm-fb-note-undo, .crm-fb-note-x {
  flex: 0 0 auto; border: 1px solid #d8c9fb; background: #fff; border-radius: 8px;
  padding: 4px 10px; font-family: inherit; font-size: 12px; font-weight: 700;
  color: #6d28d9; cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease;
}
.crm-fb-note-undo:hover, .crm-fb-note-x:hover { background: #f3ecff; border-color: #b79df5; }
.crm-fb-note-undo[hidden] { display: none; }
.crm-fb-note-x { border: 0; padding: 2px 6px; font-size: 17px; line-height: 1; color: #a78bda; }

/* ── On the row, the count is a number and not a banner ───────────
   Inline, the plain state carries no chip at all: a filled pill repeated down
   six rows is a row of buttons that cannot be pressed. Only the two states
   worth acting on keep a background, and even those are one shade off white —
   the tone is the signal, and it should not out-shout the filter it describes. */
.crm-fb-scroll .crm-rule-row > .crm-rule-tally {
  font-size: 11px; font-weight: 700; letter-spacing: -.01em;
  padding: 1px 2px; background: none; color: #a3aec0; white-space: nowrap;
}
.crm-fb-scroll .crm-rule-row > .crm-rule-tally[data-tone] { padding: 1px 6px; border-radius: 5px; }
.crm-fb-scroll .crm-rule-row > .crm-rule-tally[data-tone="zero"] { color: #b91c1c; background: #fef2f2; }
.crm-fb-scroll .crm-rule-row > .crm-rule-tally[data-tone="wide"] { color: #a16207; background: #fefce8; }
/* Same for "no data yet": beside the count, not a line under the row. */
.crm-fb-scroll .crm-rule-row > .crm-rule-nodata {
  font-size: 10.5px; font-weight: 700; padding: 1px 6px; white-space: nowrap;
}

/* The main pane and the whole dialog have to be positioning contexts, or the
   preview anchors to the window instead. */
.crm-fb-main { position: relative; }
.crm-fb { position: relative; }

/* ══════════════════════════════════════════════════════════════════
   NO HIGHLIGHTER ON A FOCUSED FIELD
   ──────────────────────────────────────────────────────────────────
   Tyler, 2026-08-06: "I hate the highlighter on the search bars." It is the
   same complaint as "you have the gray outline over everything" — a focused
   field was wearing a 1px border AND a 3px translucent ring, which reads as a
   second box drawn on top of the first. Two frames to say one thing.

   The house answer, already used by the coded dropdown's search and the
   filter builder's: ONE frame, and focus is the frame CHANGING COLOUR (plus
   the magnifier turning purple where there is one). Nothing is added.

   ⚠️ Scoped to the group editor + the filter builder rather than done
   globally: `.ch-search` is on every list screen in the CRM and re-styling all
   of them from here is a change nobody asked for. The rule that has to win is
   the ring, so these are `box-shadow: none` overrides, not rewrites.
   ══════════════════════════════════════════════════════════════════ */
#crmSegmentModal .crm-mp-search:focus-within,
#crmSegmentModal .crm-seg-nameinput:focus,
#crmSegmentModal .crm-seg-det-input:focus,
#crmSegmentModal .crm-sub-nameinput:focus,
#crmSegmentModal .ch-search:focus,
#crmSegmentModal .crm-tag-input:focus-within,
#crmFilterOv .crm-fb-search:focus-within,
#crmFilterOv input:focus,
.crm-sel-pop .crm-sel-search:focus-within,
.crm-sel-pop .crm-sel-q:focus { box-shadow: none; }
/* Keep the signal — the frame goes purple, and that is the whole signal. */
#crmSegmentModal .crm-mp-search:focus-within,
#crmSegmentModal .crm-tag-input:focus-within { border-color: #c4b5fd; }
#crmSegmentModal .crm-seg-nameinput:focus,
#crmSegmentModal .crm-seg-det-input:focus,
#crmSegmentModal .crm-sub-nameinput:focus { border-color: #c4b5fd; }

/* ── The header is three things on one line ─────────────────────
   Tyler: "make sure it's all even and beautiful." The sub-row under the name
   is deleted, so the picture, the name and the buttons are one row that
   centres on itself — the avatar no longer needs the top margin it carried to
   line up with a two-line block. */
.crm-seg-head { align-items: center; padding-bottom: 14px; }
.crm-seg-namewrap { display: flex; align-items: center; }
.crm-seg-nameinput {
  font-size: 20px;
  padding: 7px 10px;
  border-radius: 9px;
}
.crm-seg-headactions { gap: 7px; }
.crm-seg-tplbtn { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════
   STATIC IS A SNAPSHOT, NOT "NO FILTERS"
   ──────────────────────────────────────────────────────────────────
   Tyler, 2026-08-06, spelling out the model:
     "Dynamic is when you have filters and the filters continuously add or take
      away people based on the filter. Static, you can still have the same exact
      filters and build processes dynamically but once that group is set it's
      set… If someone has not been active in this past year they're going to
      leave [a Dynamic] group. In static it's just going to stay the same."

   So a Static group is BUILT the same way — same catalogue, same filters, same
   preview — and then FROZEN: the matches are written into the group as real
   members and stop re-evaluating. This bar is where you freeze it, and where
   it tells you what the filters would say TODAY versus what is actually in.
   ══════════════════════════════════════════════════════════════════ */
.crm-seg-freeze {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 13px; border-radius: 10px;
  border: 1px solid #cfe6f5; background: #f2f9fd;
}
.crm-seg-freeze[hidden] { display: none; }
.crm-seg-freeze-txt { flex: 1 1 240px; min-width: 0; font-size: 12.5px; line-height: 1.55; color: #37627d; }
.crm-seg-freeze-txt b { color: #0369a1; }
/* The people Static is HOLDING that the filters have let go of — the one thing
   that is true of a frozen group and of no other kind, so it gets its own line
   rather than being folded into the sentence about who is missing. */
.crm-seg-freeze-drift {
  display: block; margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed #bfdcec; color: #4b5c68;
}
.crm-seg-freeze-drift b { color: #b45309; }

/* What saving will DO, shown only while you have actually changed the type.
   Its own line, because it is a consequence and not another statistic. */
.crm-seg-typeswap {
  display: block; margin-top: 4px;
  font-size: 12px; line-height: 1.5; font-weight: 600; color: #b45309;
}
.crm-seg-freeze-go { flex: 0 0 auto; }
/* The snapshot button is Static's colour, not the app's purple primary —
   it belongs to the blue half of the Dynamic/Static pair. */
.crm-seg-freeze-go.ch-btn--primary { background: #0284c7; border-color: #0284c7; }
.crm-seg-freeze-go.ch-btn--primary:hover { background: #0369a1; border-color: #0369a1; }
.crm-seg-freeze-go:disabled { opacity: .6; cursor: progress; }

/* ══════════════════════════════════════════════════════════════════
   A FILTER ROW'S FIELD IS A LABEL, NOT A SECOND CATALOGUE
   ──────────────────────────────────────────────────────────────────
   Tyler: "when you click 'in another group' it defeats the purpose, because
   the dropdown is literally just showing the left sidebar."  Exactly — the
   row's field control was a searchable 46-option list with the same five
   category chips as the rail two inches to its left. Two catalogues on one
   screen, and the popup existed to replace the little one.

   Inside the builder the field is now TEXT. You choose fields in the rail and
   remove them with the ×. The native <select> stays in the row as the value
   holder (`data-plain`, so CRM_SELECT leaves it alone) — every read still goes
   through `.crm-rule-field`.
   ══════════════════════════════════════════════════════════════════ */
/* It is a <button> now (see fieldLabelHtml) so the filter on a row can be
   changed at all — but it must still READ as the plain name of the filter, so
   every button affordance is stripped back to text and only hover reveals that
   it does something. */
.crm-rule-fieldlbl {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; width: 100%;
  font-family: inherit; font-size: 13px; font-weight: 700; color: #0f172a; letter-spacing: -.01em;
  padding: 6px 0; border: 0; background: none; text-align: left; cursor: pointer;
  overflow: hidden; white-space: nowrap;
}
.crm-rule-fieldlbl-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* "change" appears on hover only, and it is what tells you the name is a
   control without putting a chevron on all six rows. */
.crm-rule-fieldlbl-swap {
  flex: none; max-width: 0; overflow: hidden; opacity: 0;
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #7c3aed;
  transition: max-width .16s ease, opacity .16s ease;
}
.crm-rule-fieldlbl:hover, .crm-rule-fieldlbl:focus-visible { color: #4c1d95; outline: none; }
.crm-rule-fieldlbl:hover .crm-rule-fieldlbl-swap,
.crm-rule-fieldlbl:focus-visible .crm-rule-fieldlbl-swap { max-width: 54px; opacity: 1; }
.crm-fb-scroll .crm-rule-row.is-not .crm-rule-fieldlbl { color: #b91c1c; }

/* ── The row that is waiting for you to pick its filter ───────────
   Armed by pressing the field name, or by "+ Add another filter" — which used
   to hand you a row locked to Last activity. The row holds a visible focus so
   that when your eyes are in the rail you still know where the pick will land,
   and the rail says which mode it is in through its placeholder. */
.crm-fb-scroll .crm-rule-row[data-swapping] {
  border-color: #a78bfa; background: #fcfaff;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .10);
}
.crm-fb-scroll .crm-rule-row[data-swapping] .crm-rule-fieldlbl { color: #6d28d9; }
.crm-fb-scroll .crm-rule-row[data-swapping] .crm-rule-fieldlbl-swap { max-width: 54px; opacity: 1; }
.crm-fb-rail[data-swapping] { background: #fbf9ff; }
.crm-fb-rail[data-swapping] .crm-fb-cat-ttl { background: #fbf9ff; }

/* ══════════════════════════════════════════════════════════════════
   A GROUP IS A FACE — its picture travels with its name
   ──────────────────────────────────────────────────────────────────
   Tyler: "you can find different groups, those will show their profile
   pictures, the circles, even inside the groups." So the "In another group"
   value picker draws each group's own mark, in the dropdown AND on the chip
   it becomes, exactly like the list does.
   ══════════════════════════════════════════════════════════════════ */
.crm-sel-opt-img,
.crm-chip-img {
  flex: none; width: 20px; height: 20px; border-radius: 6px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #fff; letter-spacing: .02em;
}
.crm-sel-opt-img img, .crm-chip-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crm-chip-img { width: 17px; height: 17px; border-radius: 5px; font-size: 8px; margin-right: 1px; }
.crm-chip { display: inline-flex; align-items: center; gap: 5px; }

/* ══════════════════════════════════════════════════════════════════
   TEMPLATES — the same shape the report builder uses
   ──────────────────────────────────────────────────────────────────
   Built-in starters at the top, your own saved ones under them, and
   "Save this group as a template" through the shared name dialog
   (`openNameDialog` in crm-report-builder.js). Nothing new is invented.
   ══════════════════════════════════════════════════════════════════ */
.crm-tpl-ov {
  position: fixed; inset: 0; z-index: 2147483300;
  display: none; align-items: center; justify-content: center; padding: 24px;
  background: rgba(15, 23, 42, .52); font-family: var(--f);
}
.crm-tpl-ov[data-open="true"] { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .crm-tpl-ov[data-open="true"] .crm-tpl { animation: crmFbRise .24s var(--ease-spring, cubic-bezier(.2,.8,.2,1)) both; }
}
.crm-tpl {
  display: flex; flex-direction: column; width: min(1000px, 100%);
  height: min(82vh, 760px); max-height: min(82vh, 760px);
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 32px 80px rgba(15, 23, 42, .28);
}
/* ── One bar, two ways to ask ───────────────────────────────────────
   The field ranks the shelves as you type; the button hands the same words
   to the model. Deliberately ONE input — a separate AI box would make you
   decide what kind of question you were asking before asking it. ────── */
.crm-tpl-searchbar {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 10px 20px 11px; border-bottom: 1px solid #eef2f7; background: #fff;
}
.crm-tpl-searchwrap { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.crm-tpl-searchico {
  position: absolute; left: 11px; display: inline-flex; color: #94a3b8; pointer-events: none;
}
/* No border and no grey fill: .crm-tpl-searchbar already carries the hairline
   that separates this from the wall of cards, so a second frame around the
   placeholder text is the box Tyler asked us to stop drawing. */
.crm-tpl-search {
  width: 100%; height: 36px; padding: 0 30px 0 33px;
  border: 0; border-radius: 0; background: none;
  font-family: inherit; font-size: 13px; color: #0f172a; outline: none;
  transition: color .14s ease;
}
.crm-tpl-search::placeholder { color: #b3becd; }
.crm-tpl-searchwrap:focus-within .crm-tpl-searchico { color: #7c3aed; }
.crm-tpl-searchx {
  position: absolute; right: 4px; border: 0; background: none;
  color: #cbd5e1; font-size: 17px; line-height: 1; cursor: pointer; padding: 3px 6px;
}
.crm-tpl-searchx:hover { color: #64748b; }
.crm-tpl-searchx[hidden] { display: none; }
.crm-tpl-aibtn {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px;
  padding: 0 13px; border: 1px solid #ddd0ff; border-radius: 9px;
  background: linear-gradient(135deg, #f6f1ff, #eee7ff); color: #6d28d9;
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: box-shadow .14s ease, border-color .14s ease;
}
.crm-tpl-aibtn:hover { border-color: #c4b5fd; box-shadow: 0 4px 14px rgba(124, 58, 237, .16); }
.crm-tpl-aibtn svg { width: 15px; height: 15px; }
/* ── Two panes: the rail decides WHAT you are looking at, the pane shows it.
   Same shape as the filter builder one layer down, so the two screens the
   group editor opens do not read as two different products. ───────────── */
.crm-tpl-main { flex: 1 1 auto; min-height: 0; display: flex; }
.crm-tpl-side {
  flex: none; width: 236px; min-height: 0; overflow-y: auto;
  padding: 12px 10px; border-right: 1px solid #eef2f7; background: #fbfcfe;
  display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin;
}
.crm-tpl-cat {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; border: 0; border-radius: 9px; background: transparent;
  font-family: inherit; font-size: 13px; font-weight: 600; color: #475569; cursor: pointer;
  transition: background .13s ease, color .13s ease;
}
.crm-tpl-cat:hover { background: #f1f5f9; color: #0f172a; }
.crm-tpl-cat.is-active { background: #f1ebff; color: #5b21b6; }
.crm-tpl-cat-ico { flex: none; display: inline-flex; color: #94a3b8; }
.crm-tpl-cat.is-active .crm-tpl-cat-ico { color: #7c3aed; }
.crm-tpl-cat-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-tpl-cat-n {
  flex: none; min-width: 20px; padding: 1px 6px; border-radius: 9px;
  background: #eef2f7; color: #94a3b8; font-size: 10.5px; font-weight: 800; text-align: center;
}
.crm-tpl-cat.is-active .crm-tpl-cat-n { background: #e2d5ff; color: #6d28d9; }
.crm-tpl-pane { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; padding: 16px 20px 20px; scrollbar-width: thin; }
.crm-tpl-panehead { margin-bottom: 14px; }
.crm-tpl-panettl { margin: 0; font-size: 15px; font-weight: 800; color: #0f172a; letter-spacing: -.012em; }
.crm-tpl-panesub { margin: 5px 0 0; font-size: 12.5px; line-height: 1.55; color: #94a3b8; max-width: 62ch; }
.crm-tpl-cat.is-muted { opacity: .5; }
.crm-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 10px; }
.crm-tpl-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.crm-tpl-tag {
  padding: 2px 7px; border-radius: 6px; background: #f1f5f9; color: #64748b;
  font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
}
.crm-tpl-tag--ask { background: #f1ebff; color: #6d28d9; }
/* The card's own colour, so the first pill reads as part of the tile. */
.crm-tpl-tag--tone { background: var(--tpl-bg, #f1ebff); color: var(--tpl-fg, #6d28d9); }
.crm-tpl-tag--used { background: #fff7e6; color: #b45309; }
.crm-tpl-tag--cat { background: transparent; color: #94a3b8; padding-left: 0; padding-right: 4px; }
/* The live count. Muted until it arrives, and RED at zero — a starting point
   that catches nobody in this tenant is the one thing you need to know before
   you build a campaign on it. */
.crm-tpl-tag--n { background: #eef6ff; color: #0369a1; }
.crm-tpl-tag--n.is-zero { background: #fef2f2; color: #b91c1c; }

/* ── Personality: one tone per template ─────────────────────────────
   Ten identical purple tiles is a wall you have to READ to navigate. The
   tone is chosen by what the template DOES — the composed ones share
   violet, the tidying ones share amber — so the colour is a category you
   can see rather than decoration. ─────────────────────────────────── */
.crm-tpl-item--violet  { --tpl-fg: #7c3aed; --tpl-bg: #f3edff; --tpl-edge: #d9c9ff; }
.crm-tpl-item--sky     { --tpl-fg: #0284c7; --tpl-bg: #e8f5ff; --tpl-edge: #bae2fb; }
.crm-tpl-item--emerald { --tpl-fg: #059669; --tpl-bg: #e7f8f1; --tpl-edge: #b4e6d2; }
.crm-tpl-item--amber   { --tpl-fg: #b45309; --tpl-bg: #fef4e3; --tpl-edge: #f4d9a8; }
.crm-tpl-item--rose    { --tpl-fg: #be123c; --tpl-bg: #ffeef2; --tpl-edge: #f7c6d2; }
.crm-tpl-item--slate   { --tpl-fg: #475569; --tpl-bg: #eef2f7; --tpl-edge: #cfd9e5; }
@media (max-width: 720px) {
  .crm-tpl-main { flex-direction: column; }
  .crm-tpl-side {
    width: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-bottom: 1px solid #eef2f7; padding: 8px 10px;
  }
  .crm-tpl-cat { width: auto; flex: none; }
  .crm-tpl-cat-lbl { white-space: nowrap; }
}
.crm-tpl-head {
  flex: none; display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px 14px; border-bottom: 1px solid #eef2f7;
}
.crm-tpl-head h2 { margin: 0; font-size: 16px; font-weight: 800; color: #0f172a; letter-spacing: -.015em; }
.crm-tpl-head p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: #94a3b8; }
.crm-tpl-x {
  margin-left: auto; flex: none; width: 30px; height: 30px; border: 0; background: none;
  color: #94a3b8; font-size: 22px; line-height: 1; cursor: pointer; padding: 0;
}
.crm-tpl-x:hover { background: #f1f5f9; color: #334155; }
.crm-tpl-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 20px 18px; scrollbar-width: thin; }
.crm-tpl-sec {
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #7c3aed; margin: 14px 2px 7px;
}
.crm-tpl-sec:first-child { margin-top: 0; }
.crm-tpl-item {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left;
  border: 1px solid #e9eef5; border-radius: 10px; background: #fff; cursor: pointer;
  padding: 13px 13px 13px 16px; font-family: inherit;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
/* The tone as a spine down the left edge — readable from across the grid,
   where a 32px tile on its own is not. */
.crm-tpl-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--tpl-fg, #cbd5e1); opacity: .85;
}
.crm-tpl-item:hover {
  border-color: var(--tpl-edge, #d9c9ff); background: #fcfdff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .09);
}
.crm-tpl-mark {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  background: var(--tpl-bg, #f1ebff); color: var(--tpl-fg, #7c3aed);
  display: inline-flex; align-items: center; justify-content: center;
}
.crm-tpl-body-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.crm-tpl-name { font-size: 13.5px; font-weight: 700; line-height: 1.35; color: #0f172a; }
/* ⚠️ #94a3b8 on white is 2.8:1 — under the floor, and this is the line that
   says what the template actually DOES. "Hard to read" was literally true:
   the description is the readable half of the card, not its caption. */
.crm-tpl-desc {
  font-size: 12.5px; line-height: 1.55; color: #64748b; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.crm-tpl-del {
  flex: none; border: 0; background: none; color: #cbd5e1; cursor: pointer;
  font-size: 17px; line-height: 1; padding: 2px 4px; border-radius: 6px;
}
.crm-tpl-del:hover { color: #dc2626; background: #fef2f2; }
.crm-tpl-empty { padding: 18px 4px; font-size: 12.5px; line-height: 1.6; color: #94a3b8; }
.crm-tpl-foot {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 13px 20px; border-top: 1px solid #eef2f7; background: #fbfcfe;
}
.crm-tpl-foot-note { flex: 1 1 auto; min-width: 0; font-size: 12px; color: #94a3b8; }

/* ⚠️ The old `.crm-tpl-ai*` inline strip is DELETED. Find with AI is its own
   popup now (.crm-tpl-findov) — a strip under the search box cannot hold six
   options with their counts and their faces, and it made the button read as a
   filter rather than as something that answers you. */

/* ── The review step, in both places it appears ──────────────────
   ⚠️ This block is shared by the Templates popup's AI result AND the
   header's Draft-with-AI card. One skin, two callers — the same rule the
   name dialog follows — so "here is what the model built" never looks
   like two different features. ────────────────────────────────── */
.crm-ai-rev { display: flex; flex-direction: column; gap: 11px; }
/* ⚠️ The shared skin caps the card at 560px with no max-height — fine for a
   textarea, not for a summary sentence plus a face strip plus a warning. It
   grows a little wider and, more importantly, is allowed to SCROLL: a review
   you cannot reach the buttons of is worse than no review. */
.crm-ai-card--wide {
  max-width: min(620px, 92vw) !important;
  max-height: 88vh; overflow-y: auto; scrollbar-width: thin;
}
.crm-ai-rev-name { font-size: 15px; font-weight: 800; color: #0f172a; letter-spacing: -.012em; }
.crm-ai-rev-desc { margin-top: 3px; font-size: 12.5px; line-height: 1.55; color: #64748b; }
.crm-ai-rev-sum {
  padding: 10px 12px; border: 1px solid #e9eef5; border-radius: 10px; background: #fbfcfe;
  font-size: 12.5px; line-height: 1.7; color: #0f172a; overflow-wrap: anywhere;
}
.crm-ai-rev-lbl { color: #64748b; }
.crm-ai-rev-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-ai-rev-stat {
  padding: 3px 9px; border-radius: 7px; background: #f1f5f9; color: #475569;
  font-size: 11.5px; font-weight: 600;
}
.crm-ai-rev-stat b { font-weight: 800; color: #0f172a; }
.crm-ai-rev-stat.is-count { background: #eef6ff; color: #0369a1; }
.crm-ai-rev-stat.is-count b { color: #075985; }
/* ⚠️ A count is believable and wrong in exactly the cases that matter —
   a tag with a typo, a domain filter that caught the whole of gmail. The
   faces are what makes the number checkable. */
.crm-ai-faces { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.crm-ai-face { display: inline-flex; }
.crm-ai-face .crm-mp-avatar {
  width: 28px; height: 28px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; overflow: hidden;
  font-size: 11px; font-weight: 700; color: #fff; border: 2px solid #fff;
  box-shadow: 0 0 0 1px #e9eef5;
}
.crm-ai-face .crm-mp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.crm-ai-face-more { font-size: 11.5px; font-weight: 700; color: #64748b; padding-left: 4px; }
.crm-ai-rev-drop {
  padding: 9px 11px; border-radius: 9px; background: #fff8e8; color: #92400e;
  font-size: 11.5px; line-height: 1.6;
}
.crm-ai-rev-drop b { font-weight: 800; }
.crm-ai-rev-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* Same no-pill rule as the editor — this popup is a <button> field too. */
#crmTemplateOv button:not(.crm-chip-x) { border-radius: 8px !important; }

/* ══════════════════════════════════════════════════════════════════
   START ONE FROM NOTHING
   ──────────────────────────────────────────────────────────────────
   The card that opens the creator. It leads My templates — the shelf you
   are on when you want one — and tails every other shelf, quietly, as the
   same action you can always reach. ══════════════════════════════ */
.crm-tpl-new {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  margin-bottom: 12px; padding: 13px 15px; cursor: pointer; font-family: inherit;
  border: 1px dashed #d9c9ff; border-radius: 12px;
  background: linear-gradient(135deg, #fbf9ff, #f6f1ff);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.crm-tpl-new:hover { border-color: #a78bfa; box-shadow: 0 6px 18px rgba(124, 58, 237, .12); }
.crm-tpl-new.is-quiet { margin: 14px 0 0; background: #fbfcfe; border-color: #e2e8f0; }
.crm-tpl-new.is-quiet:hover { border-color: #c4b5fd; }
.crm-tpl-new-plus {
  flex: none; width: 32px; height: 32px; border-radius: 9px; background: #ede4ff; color: #7c3aed;
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; font-weight: 400;
}
.crm-tpl-new-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crm-tpl-new-txt b { font-size: 13.5px; font-weight: 700; color: #0f172a; }
.crm-tpl-new-txt span { font-size: 12.5px; line-height: 1.5; color: #64748b; }

/* Own-template actions. Two 22px targets, so "edit" is not a second meaning
   bolted onto the delete ×. */
.crm-tpl-owned { flex: none; display: flex; align-items: center; gap: 2px; }
.crm-tpl-mini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; color: #cbd5e1; cursor: pointer;
}
.crm-tpl-mini:hover { color: #6d28d9; background: #f1ebff; }
/* Reserves no space until the faces land, so nothing jumps mid-scroll. */
.crm-tpl-faceslot:empty { display: none; }
.crm-tpl-faceslot { display: block; margin-top: 8px; }
.crm-tpl-faceslot .crm-ai-face .crm-mp-avatar { width: 24px; height: 24px; font-size: 10px; }

/* ══════════════════════════════════════════════════════════════════
   FIND WITH AI — a popup that answers with OPTIONS
   ──────────────────────────────────────────────────────────────────
   It wears the shared .wk-aifill-* skin, like Draft with AI, because it is
   the same gesture: say what you want, wait, get an answer. What is
   different is the answer — a shortlist you pick from rather than one
   thing to accept. ═══════════════════════════════════════════════ */
.crm-fnd-card {
  max-width: min(680px, 94vw) !important;
  max-height: 88vh; overflow-y: auto; scrollbar-width: thin;
}
.crm-fnd-lead { margin: 0; font-size: 12.5px; line-height: 1.55; color: #64748b; }
.crm-fnd-list { display: flex; flex-direction: column; gap: 9px; }
.crm-fnd-opt {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left;
  padding: 12px 13px 12px 16px; cursor: pointer; font-family: inherit;
  border: 1px solid #e9eef5; border-radius: 11px; background: #fff;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.crm-fnd-opt::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--tpl-fg, #cbd5e1); opacity: .85;
}
.crm-fnd-opt:hover {
  border-color: var(--tpl-edge, #d9c9ff); background: #fcfdff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .09);
}
.crm-fnd-opt--violet  { --tpl-fg: #7c3aed; --tpl-bg: #f3edff; --tpl-edge: #d9c9ff; }
.crm-fnd-opt--sky     { --tpl-fg: #0284c7; --tpl-bg: #e8f5ff; --tpl-edge: #bae2fb; }
.crm-fnd-opt--emerald { --tpl-fg: #059669; --tpl-bg: #e7f8f1; --tpl-edge: #b4e6d2; }
.crm-fnd-opt--amber   { --tpl-fg: #b45309; --tpl-bg: #fef4e3; --tpl-edge: #f4d9a8; }
.crm-fnd-opt--rose    { --tpl-fg: #be123c; --tpl-bg: #ffeef2; --tpl-edge: #f7c6d2; }
.crm-fnd-opt--slate   { --tpl-fg: #475569; --tpl-bg: #eef2f7; --tpl-edge: #cfd9e5; }
/* The built-to-order one is not a template and must not look like one. */
.crm-fnd-opt.is-built { background: linear-gradient(135deg, #fbf9ff, #f7f3ff); border-color: #e2d5ff; }
.crm-fnd-opt-mark {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  background: var(--tpl-bg, #f1ebff); color: var(--tpl-fg, #7c3aed);
  display: inline-flex; align-items: center; justify-content: center;
}
.crm-fnd-opt-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.crm-fnd-opt-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.crm-fnd-opt-name { font-size: 13.5px; font-weight: 700; line-height: 1.35; color: #0f172a; }
.crm-fnd-opt-badge {
  padding: 2px 7px; border-radius: 6px; background: #ede4ff; color: #6d28d9;
  font-size: 10px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
}
/* The model's own sentence about why it offered this one. It is the reason
   the shortlist is worth reading, so it gets the ink. */
.crm-fnd-opt-why { font-size: 12.5px; line-height: 1.55; color: #475569; }
.crm-fnd-opt-sum {
  font-size: 11.5px; line-height: 1.6; color: #94a3b8; overflow-wrap: anywhere;
  padding: 6px 9px; border-radius: 8px; background: #f8fafc;
}
.crm-fnd-opt-sum b { color: #64748b; }
.crm-fnd-opt-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.crm-fnd-opt .crm-ai-faces { margin-top: 2px; }
.crm-fnd-opt .crm-ai-face .crm-mp-avatar { width: 24px; height: 24px; font-size: 10px; }
.crm-fnd-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.crm-fnd-acts svg { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.crm-fnd-newlink { align-self: center; }
/* The honest dead end. It has to lead somewhere or you are stuck in a popup
   with nothing to press. */
.crm-fnd-none {
  padding: 14px 15px; border-radius: 11px; background: #fbfcfe; border: 1px solid #eef2f7;
}
.crm-fnd-none p { margin: 0 0 7px; font-size: 12.5px; line-height: 1.6; color: #64748b; }
.crm-fnd-none p:last-child { margin-bottom: 0; }
.crm-fnd-none b { color: #0f172a; font-size: 13.5px; }
.crm-fnd-none-drop { color: #92400e !important; }
.crm-tpl-findov button:not(.crm-chip-x) { border-radius: 9px !important; }

/* ══════════════════════════════════════════════════════════════════
   NEW / EDIT TEMPLATE — the door "My templates" never had
   ──────────────────────────────────────────────────────────────────
   ⚠️ The overlay's z-index is set inline in JS (2147483150) and belongs
   there: it has to sit above the group editor and BELOW the filter builder
   it opens, and that relationship is a fact about the stack, not a theme
   value. Do not move it here and do not round it up. ═══════════════ */
.crm-tplnew-ov {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(15, 23, 42, .52); font-family: var(--f);
}
.crm-tplnew {
  display: flex; flex-direction: column; width: min(620px, 100%);
  max-height: min(88vh, 780px); background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 32px 80px rgba(15, 23, 42, .28);
}
@media (prefers-reduced-motion: no-preference) {
  .crm-tplnew { animation: crmFbRise .24s var(--ease-spring, cubic-bezier(.2,.8,.2,1)) both; }
}
.crm-tplnew-head {
  flex: none; display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px 14px; border-bottom: 1px solid #eef2f7;
}
.crm-tplnew-head h2 { margin: 0; font-size: 16px; font-weight: 800; color: #0f172a; letter-spacing: -.015em; }
.crm-tplnew-head p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: #94a3b8; max-width: 60ch; }
.crm-tplnew-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 20px 18px; scrollbar-width: thin; }
.crm-tplnew-lbl {
  display: block; margin: 0 0 6px; font-size: 12px; font-weight: 700; color: #334155;
}
.crm-tplnew-lbl:not(:first-child) { margin-top: 16px; }
.crm-tplnew-lbl em { font-style: normal; font-weight: 600; color: #b3becd; }
.crm-tplnew-namerow { display: flex; align-items: center; gap: 8px; }
.crm-tplnew-input {
  flex: 1 1 auto; min-width: 0; width: 100%; padding: 9px 12px;
  border: 1px solid #e2e8f0; border-radius: 9px; background: #f8fafc;
  font-family: inherit; font-size: 13px; color: #0f172a; outline: none;
  transition: border-color .14s ease, background .14s ease;
}
/* One frame that changes colour — never a border plus a ring. */
.crm-tplnew-input:focus { border-color: #c4b5fd; background: #fff; }
.crm-tplnew-input::placeholder { color: #b3becd; }
.crm-tplnew-area { resize: vertical; min-height: 52px; line-height: 1.55; }
.crm-tplnew-ai {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px;
  padding: 0 12px; border: 1px solid #ddd0ff; border-radius: 9px;
  background: linear-gradient(135deg, #f6f1ff, #eee7ff); color: #6d28d9;
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.crm-tplnew-ai:hover { border-color: #c4b5fd; }
.crm-tplnew-ai svg { width: 15px; height: 15px; }
.crm-tplnew-ai.is-busy { opacity: .6; cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .crm-tplnew-ai.is-busy svg { animation: crmTplSpin 1.1s linear infinite; }
}
@keyframes crmTplSpin { to { transform: rotate(360deg); } }
.crm-tplnew-filt {
  margin-top: 16px; padding: 12px 13px; border: 1px solid #e9eef5; border-radius: 11px; background: #fbfcfe;
}
.crm-tplnew-filt.is-empty { border-style: dashed; }
.crm-tplnew-filt-hd { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.crm-tplnew-filt-ttl { flex: 1 1 auto; font-size: 12px; font-weight: 800; color: #334155; letter-spacing: .01em; }
.crm-tplnew-filt-body { font-size: 12.5px; line-height: 1.7; color: #0f172a; overflow-wrap: anywhere; }
.crm-tplnew-filt-body em { color: #94a3b8; font-style: normal; }
.crm-tplnew-filt .crm-ai-faces { margin-top: 9px; }
.crm-tplnew-filt .crm-ai-face .crm-mp-avatar { width: 26px; height: 26px; font-size: 10px; }
.crm-tplnew-foot {
  flex: none; display: flex; align-items: center; gap: 9px;
  padding: 13px 20px; border-top: 1px solid #eef2f7; background: #fbfcfe;
}
.crm-tplnew-foot-note { flex: 1 1 auto; min-width: 0; font-size: 12px; color: #94a3b8; }
.crm-tplnew-foot-note b { color: #64748b; font-weight: 700; }
.crm-tplnew-ov button:not(.crm-chip-x) { border-radius: 9px !important; }


/* ══════════════════════════════════════════════════════════════════
   FILTER BUILDER — the second pass on "what am I actually filtering?"
   ──────────────────────────────────────────────────────────────────
   Tyler, 2026-08-10, looking at the live MRG CRM: "this design is terrible.
   You have to actually make it polished, with smooth transitions. It actually
   has to make sense and be easy for the user to understand what they're
   filtering."

   Three separate things were wrong, and only one of them was taste:

   1. EVERY DROPDOWN WAS DOUBLED. The Marketing tab brought in
      `marketing/vendor/wk-form-controls.js`, which auto-upgrades every
      <select> on the page and watches for more. It honours neither `hidden`
      nor `data-plain` nor `.crm-sel-native`, so each coded dropdown had a
      second one wedged beside it and the row's invisible value-holder was
      drawn as a third control. A 38px filter row rendered at 186px with its
      parts spread over two lines. Fixed in crm-select.js (it claims its
      selects now); the belt-and-braces rule is at the bottom of this block.
   2. THE ROW WAS A FORM, NOT A SENTENCE. Field / operator / value in fixed
      tracks with 66px of dead air between them, and nothing anywhere in the
      list saying whether the rows were ANDed or ORed.
   3. NOTHING MOVED. Rows appeared and vanished instantly, so on a list of six
      near-identical filters you pressed × and then had to re-read the list to
      work out which one had gone.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Park the native select properly ──────────────────────────
   ⚠️ `select.crm-sel-native` (0-1-1) was being beaten on width by
   `.crm-rule-valuewrap .crm-rule-value` (0-2-0), so the parked element kept a
   real 824px width. It is position:absolute so it never showed — but an
   absolutely positioned box still contributes to its containing block's
   scrollable overflow, and .crm-fb-main is the positioned ancestor. Measured:
   the rule list reported scrollWidth 1632 against clientWidth 864, which is
   why the value controls and the "+ add…" ran off the right-hand edge.
   These declarations are functional, not cosmetic — !important is the point. */
select.crm-sel-native {
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  max-width: 1px !important;
  flex: none !important;
}

/* ── 2. The row reads left to right, with no dead air ────────────
   The field column is sized to the longest label worth a column, the operator
   track fits "is not" exactly, and the value takes everything left. Both
   operator variants — the is/is-not dropdown, and the plain "is" on a field
   that has no negation — fill the same track, so value boxes line up down the
   whole list whether or not a given filter can be inverted. */
/* 🚨 ONE FILTER IS ONE LINE. Measured 2026-08-11 on a group with six filters
   and one either/or: every row was **115px** tall — the row itself, then the
   "no data yet" badge on a line of its own, then the tally on a third — against
   a 494px scroller. Three filters filled the pane, so a six-filter group (the
   normal size here) could never be read at once, and "smooth" is impossible
   when you scroll to see what you just built. The badges are not extra lines
   any more: they are two auto tracks that collapse to nothing when empty, so a
   plain row is ~38px and all six fit with room over. Every part is placed by
   COLUMN NUMBER rather than by DOM order, which is what lets the × stay last on
   screen while the badges are appended after it in the markup — the ordering
   the four-column grid could only express by wrapping. */
/* ⚠️ COLUMN 4 IS AN EMPTY 1fr, AND IT IS THE POINT. With the value track on
   `1fr` it swelled to 560px to hold the word "Yes" — the single biggest reason
   the row still read as a form rather than a sentence. `minmax(140px,
   max-content)` lets it hug what is actually in it (a word, two chips, a date
   window) and the spacer absorbs the slack, so the count and the × keep a
   straight right edge to scan down while nothing is stretched to fill space it
   does not need. It still shrinks to 140px before anything overflows. */
.crm-fb-scroll .crm-rule-row {
  grid-template-columns: minmax(0, 168px) auto minmax(140px, max-content) 1fr auto auto 28px;
  gap: 10px;
  align-items: center;
  padding: 5px 8px 5px 12px;
  border: 1px solid #edf1f7;
  border-radius: 10px;
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
/* 🚨 `grid-row: 1` ON EVERY PART, and it is the whole fix — not tidiness.
   Naming only the column leaves the ROW to auto-placement, which is *sparse*:
   the cursor advances past column 6 when the × is placed (the × is the fourth
   child in the markup, the badges are appended after it), so the badges could no
   longer be put in columns 4 and 5 of line one and were dropped onto line two.
   Measured: `grid-template-rows: 36px 18.5px` — a phantom second row on every
   filter, which is the same 115px symptom in a new disguise. Explicit rows, and
   the height is whatever the tallest control is. */
.crm-fb-scroll .crm-rule-row > * { grid-row: 1; }
.crm-fb-scroll .crm-rule-row > .crm-rule-fieldlbl,
.crm-fb-scroll .crm-rule-row > .crm-rule-field,
.crm-fb-scroll .crm-rule-row > .crm-sel-trigger[data-sel-for="crm-rule-field"] { grid-column: 1; }
.crm-fb-scroll .crm-rule-row > .crm-rule-opwrap { grid-column: 2; }
.crm-fb-scroll .crm-rule-row > .crm-rule-valuewrap { grid-column: 3; }
/* ⚠️ These two override `grid-column: 1 / -1` on the base badges (0-1-0 each) —
   that declaration is what put them on their own line. Do not delete it there:
   the member picker's narrow rail still mounts a four-column row and needs it. */
.crm-fb-scroll .crm-rule-row > .crm-rule-nodata { grid-column: 5; justify-self: end; }
.crm-fb-scroll .crm-rule-row > .crm-rule-tally { grid-column: 6; justify-self: end; }
.crm-fb-scroll .crm-rule-row > .crm-rule-remove { grid-column: 7; }
/* The operator track was a fixed 82px so every value box began on the same
   x — worth it when the row was a form. It sizes to its words now ("is" /
   "was" / "contains"), and the value box takes what it frees. */
.crm-fb-scroll .crm-rule-row .crm-rule-op,
.crm-fb-scroll .crm-rule-row .crm-sel-trigger[data-sel-for="crm-rule-op-sel"] { min-width: 62px; }
.crm-fb-scroll .crm-rule-row:hover { border-color: #ddd6f3; box-shadow: 0 1px 3px rgba(15, 23, 42, .05); }
.crm-fb-scroll .crm-rule-row:focus-within { border-color: #c4b5fd; box-shadow: 0 0 0 3px rgba(124, 58, 237, .08); }

/* The plain "is" — a field that cannot be negated still has to look like it
   has an operator, or the row reads as though a control failed to load. */
.crm-fb-scroll .crm-rule-opwrap { justify-content: stretch; }
.crm-fb-scroll .crm-rule-row .crm-rule-op {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: 5px 0;
  border-radius: 7px; background: #f6f8fb;
  font-size: 12.5px; font-weight: 600; color: #94a3b8;
}
.crm-fb-scroll .crm-rule-row .crm-sel-trigger[data-sel-for="crm-rule-op-sel"] {
  width: 100%; min-width: 0; justify-content: space-between;
}
.crm-fb-scroll .crm-rule-fieldlbl { padding: 0; line-height: 1.35; }

/* An exclusion is the filter that quietly empties a mailing list, so it is the
   one row state that gets colour on all of its parts, not just the spine. */
.crm-fb-scroll .crm-rule-row.is-not { background: #fffafa; }
.crm-fb-scroll .crm-rule-row.is-not .crm-rule-op { background: #fef2f2; color: #dc2626; }

/* ── 3. THE JOINING WORD, IN THE GUTTER, BETWEEN THE ROWS ────────
   "Match all of these" is one line at the top of a list that scrolls away
   from it. By the third filter you are remembering, not reading. Every gap
   between two siblings now carries the word that joins them, taken from the
   list's own data-match — so a nested bucket says OR in its gutter while the
   list around it says AND, and the structure is legible without a legend. */
/* ⚠️ 22px WAS SIZED FOR A 115px ROW. Now that a filter is one 48px line, a
   22px gap plus the joiner sitting in it made the space between two filters as
   tall as the filters — measured pitch 97px for a 48px row, so half the pane
   was gutter. 12px keeps the joiner chip clear of both rows and puts seven
   filters inside the scroller instead of four. */
.crm-fb-rules, .crm-fb-scroll .crm-rule-grp-body { gap: 12px; }
.crm-fb-rules > * + *, .crm-fb-scroll .crm-rule-grp-body > * + * { position: relative; }
.crm-fb-rules > * + *::before,
.crm-fb-scroll .crm-rule-grp-body > * + *::before {
  content: "AND";
  position: absolute; top: -17px; left: 12px;
  padding: 1px 7px; border-radius: 5px;
  background: #f1f5f9; color: #94a3b8;
  font-size: 9.5px; font-weight: 800; letter-spacing: .09em;
  pointer-events: none;
}
.crm-fb-rules[data-match="any"] > * + *::before,
.crm-fb-scroll .crm-rule-grp-body[data-match="any"] > * + *::before {
  content: "OR"; background: #f1ebff; color: #7c3aed;
}
/* A row collapsing out must not leave its connector floating over the gap. */
.crm-fb-rules > *[data-leaving]::before,
.crm-fb-scroll .crm-rule-grp-body > *[data-leaving]::before,
.crm-fb-rules > *[data-leaving] + *::before,
.crm-fb-scroll .crm-rule-grp-body > *[data-leaving] + *::before { opacity: 0; }

/* ── 4. The sentence ─────────────────────────────────────────────
   The whole set, in English, directly above the rows it describes. */
.crm-fb-say {
  flex: none; display: flex; align-items: flex-start; gap: 10px;
  margin: 0; padding: 11px 20px 12px;
  border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(180deg, #faf8ff, #fdfcff);
}
.crm-fb-say[hidden] { display: none; }
.crm-fb-say-mark {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; background: #ece4ff; color: #7c3aed;
}
.crm-fb-say-mark svg { width: 13px; height: 13px; }
.crm-fb-say-txt {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: 12.5px; line-height: 1.65; color: #475569;
}
/* The values are what you scan for; the joining words are what you get wrong. */
.crm-fb-say-txt b { font-weight: 700; color: #0f172a; }
.crm-fb-say-txt i {
  font-style: normal; font-weight: 800; color: #7c3aed;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  padding: 0 1px;
}
.crm-fb-say-txt i.crm-fb-say-not { color: #dc2626; }
.crm-fb-say-todo {
  color: #b45309; background: #fef3c7; border-radius: 5px; padding: 0 5px; font-weight: 600;
}

/* ── 5. Motion ───────────────────────────────────────────────────
   Enough to follow what changed, short enough that a fast editor never waits
   on it. Everything here is opacity/transform except the collapse, which has
   to be height because that is what the list below is reacting to. */
@keyframes crmFbRowIn {
  from { opacity: 0; transform: translateY(-6px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
@keyframes crmFbChipIn {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: none; }
}
@keyframes crmFbSayIn { from { opacity: .45; } to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .crm-fb-scroll .crm-rule-row,
  .crm-fb-scroll .crm-rule-grp {
    animation: crmFbRowIn .24s cubic-bezier(.2, .8, .2, 1) both;
  }
  .crm-chip.is-fresh { animation: crmFbChipIn .18s cubic-bezier(.2, .8, .2, 1) both; }
  .crm-fb-say.is-fresh .crm-fb-say-txt { animation: crmFbSayIn .28s ease both; }
  /* The collapse. Height is pinned in js before the class lands — see
     G.leaveThenRemove — because `auto` does not transition. */
  .crm-fb-scroll .crm-rule-row.is-leaving,
  .crm-fb-scroll .crm-rule-grp.is-leaving,
  .crm-rule-row.is-leaving, .crm-rule-grp.is-leaving {
    transition: height .2s ease, margin .2s ease, opacity .14s ease, transform .18s ease;
    opacity: 0; transform: translateX(10px);
    animation: none;              /* the entrance must not fight the exit */
    pointer-events: none;
  }
  .crm-chip.is-leaving {
    transition: opacity .13s ease, transform .13s ease;
    opacity: 0; transform: scale(.8);
  }
}
/* Reduced motion still needs the row GONE, not frozen mid-collapse. */
@media (prefers-reduced-motion: reduce) {
  .crm-rule-row.is-leaving, .crm-rule-grp.is-leaving, .crm-chip.is-leaving { display: none; }
}

/* ── 6. Buckets read as one thing ────────────────────────────────
   A bucket is the hardest idea on this screen, so its all/any gets a real
   header rule under it instead of a label floating above a spine. */
.crm-fb-scroll .crm-rule-grp {
  border-left-width: 3px;
  border-radius: 0 12px 12px 0;
  padding: 11px 12px 9px 15px;
}
.crm-fb-scroll .crm-rule-grp-head {
  margin-bottom: 12px; padding-bottom: 9px;
  border-bottom: 1px dashed rgba(124, 58, 237, .18);
}
.crm-fb-scroll .crm-rule-grp[data-depth="2"] .crm-rule-grp-head { border-bottom-color: rgba(14, 116, 144, .18); }
.crm-fb-scroll .crm-rule-grp[data-depth="3"] .crm-rule-grp-head { border-bottom-color: rgba(77, 124, 15, .18); }
.crm-fb-scroll .crm-rule-grp.is-target {
  box-shadow: 0 0 0 2px rgba(124, 58, 237, .18);
  transition: box-shadow .18s ease;
}

/* ── 7. Belt and braces on the doubled control ───────────────────
   crm-select.js claims its selects before anything else can upgrade them, and
   evicts a foreign button that got there first. If a third enhancer ever
   lands, this keeps the symptom cosmetic instead of a broken layout. */
#crmFilterOv .wk-cs-btn, #crmSegmentModal .wk-cs-btn { display: none !important; }

/* The sentence is clamped to three lines by default. A group with fifteen
   filters says all fifteen, and eight lines of prose above the rows pushes the
   rows out of the pane — which defeats the point of explaining them. */
/* ⚠️ `flex: 1 1 0`, not `1 1 auto`. `display:-webkit-box` computes an intrinsic
   width off the whole unwrapped sentence, so on an `auto` basis the paragraph
   demanded a line to itself and the band stacked THREE flex lines — 144px of
   chrome around three lines of text (measured: mark at top 12, text at 44,
   toggle at 116). A zero basis lets it share the line with the mark. */
.crm-fb-say-txt {
  flex: 1 1 0; min-width: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.crm-fb-say.is-open .crm-fb-say-txt { display: block; -webkit-line-clamp: unset; overflow: visible; }
.crm-fb-say-more {
  flex: none; align-self: flex-end; margin-left: 10px; padding: 0;
  border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 11.5px; font-weight: 700; color: #7c3aed; white-space: nowrap;
}
.crm-fb-say-more:hover { text-decoration: underline; }
.crm-fb-say-more[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════
   "WHAT DOES ADD A BUCKET MEAN?" — it means nothing, so it is gone
   ──────────────────────────────────────────────────────────────────
   Tyler, 2026-08-10: *"You can do the and/or if you want… How do you group
   that together? When you add a bucket, what does that mean? In my opinion,
   I'm confused."* The set was named after its shape in the stored JSON. Its
   head is a sentence now — "Matching [just one ▾] of these is enough" — with
   a worked example beside it while the set is still too empty to explain
   itself. See groupHtml in crm-groups.js.
   ══════════════════════════════════════════════════════════════════ */
.crm-rule-grp-head { flex-wrap: wrap; }
.crm-fb-scroll .crm-rule-grp-lbl { font-size: 12.5px; font-weight: 700; }
/* The dropdown sits INSIDE the sentence, so changing it changes what you just
   read. It has to look like part of the line, not like a form field dropped
   into one. */
.crm-fb-scroll .crm-rule-grp .crm-sel-trigger[data-sel-for="crm-grp-match"] {
  min-width: 92px; font-weight: 700;
  background: rgba(255, 255, 255, .78);
  border-color: rgba(124, 58, 237, .28);
}
.crm-rule-grp-eg {
  flex: 1 1 auto; min-width: 0;
  font-size: 11.5px; color: #a3adba; font-style: italic;
}
.crm-rule-grp-eg b { font-style: normal; font-weight: 800; color: #8b5cf6; }
.crm-rule-grp-eg[hidden] { display: none; }
/* An either/or set is the OR case almost every time; when it is switched to
   "every one" it is an AND inside an AND, which is worth looking different so
   nobody reads it as the or-set they asked for. */
.crm-fb-scroll .crm-rule-grp[data-mode="all"] {
  border-left-color: #cbd5e1;
  background: linear-gradient(90deg, rgba(248, 250, 252, .9), rgba(252, 253, 254, .4));
}
.crm-fb-scroll .crm-rule-grp[data-mode="all"] .crm-rule-grp-lbl { color: #64748b; }
.crm-fb-scroll .crm-rule-grp[data-mode="all"] .crm-rule-grp-head { border-bottom-color: #e2e8f0; }
.crm-fb-scroll .crm-rule-grp[data-mode="all"] .crm-sel-trigger[data-sel-for="crm-grp-match"] {
  border-color: #d9e2ec;
}
/* The worked example under the footer buttons — the thing that actually
   answered "what does this mean", so it gets room to be a sentence. */
.crm-fb-hint b { font-weight: 800; color: #7c3aed; }

/* "Any group" is a real answer in the group picker, not a placeholder — it
   carries a mark like every other row so the list does not look like it has
   one broken avatar in it. */
.crm-chip[data-val="*"] { background: #ede4ff; border-color: #d6c4fb; }

/* ── A group inside a group inside a group ─────────────────────────
   Tyler, 2026-08-10: "you can have multiple different groups inside this
   group… and so on." Depth needs to be visible without inventing a second
   visual language for it — so a nested group is the SAME row, stepped in and
   hung off a rail that continues its parent's left edge downward. That reads
   as containment; an indent on its own reads as a list with a margin. */
.crm-sub-kids {
  margin: 0 10px 10px 27px;
  padding-left: 12px;
  border-left: 2px solid #ece2ff;
  display: flex; flex-direction: column; gap: 8px;
}
.crm-sub-kids .crm-sub { border-color: #eef1f7; }
/* ⚠️ The arrival stagger is written as :nth-child, and a nested row's parent
   is .crm-sub-kids, not the host — so every level would restart the delay and
   the tree would ripple in from four different places at once. */
.crm-sub-kids .crm-sub { animation-delay: 0ms; }
/* A queued group is not saved yet and the row says so twice: the amber chip,
   and a mark that is ringed rather than bare — the same shape a real group
   will have, not yet filled in. */
.crm-sub.is-queued > .crm-sub-head > .crm-sub-avatar { box-shadow: 0 0 0 2px #ede9fe; }

/* ══════════════════════════════════════════════════════════════════
   A GROUP INSIDE A GROUP GETS THE GROUP POPUP  (crm-subgroup.js)
   ──────────────────────────────────────────────────────────────────
   Tyler, 2026-08-10: "it almost just needs to be its own pop-up, just like
   how Edit Filters has it… where you can see the members, the details, and
   what belongs, all inside of it. It's just that there are no subgroups."
   So: the filter builder's overlay skin, the group editor's header and tabs,
   and no groups-inside section. The row it opens from is one line now — the
   inline accordion, its second name box and its amber note are gone.
   ⚠️ z-index 2147483100 — ABOVE .ch-overlay (2147483000, the editor it opens
   from), BELOW .crm-fb-ov (2147483200, the filter screen IT opens) and
   .crm-sel-pop (2147483645). Four layers; a number outside that window hides
   this popup or the screen it opens. */
.crm-sg-ov {
  position: fixed; inset: 0; z-index: 2147483100;
  display: none; align-items: center; justify-content: center;
  padding: 24px; box-sizing: border-box;
  background: rgba(15, 23, 42, .5);
  font-family: var(--f);
}
.crm-sg-ov[data-open="true"] { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .crm-sg-ov[data-open="true"] { animation: crmFbFade .18s ease both; }
  .crm-sg-ov[data-open="true"] .crm-sg { animation: crmFbRise .26s var(--ease-spring, cubic-bezier(.2,.8,.2,1)) both; }
}
.crm-sg {
  display: flex; flex-direction: column; min-width: 0;
  width: min(720px, 100%); height: min(86vh, 720px);
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 32px 80px rgba(15, 23, 42, .28), 0 4px 14px rgba(15, 23, 42, .1);
}

/* ── header: the picture and the name, at the top ─────────────── */
.crm-sg-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; }
.crm-sg-img {
  flex: none; width: 46px; height: 46px; border-radius: 12px; border: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 19px; font-weight: 800; color: #fff; overflow: hidden; position: relative;
  font-family: inherit;
}
.crm-sg-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ⚠️ A CSS ::after, not a child — paintImage() rewrites innerHTML, which
   would take a real element with it every time the name or type changes. */
.crm-sg-img::after {
  content: "\270E"; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .55); color: #fff; font-size: 16px;
  opacity: 0; transition: opacity .15s ease;
}
.crm-sg-img:hover::after, .crm-sg-img:focus-visible::after { opacity: 1; }
.crm-sg-name {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid transparent; background: transparent; border-radius: 10px;
  font-family: inherit; font-size: 20px; font-weight: 800; color: #0f172a;
  letter-spacing: -.015em; padding: 7px 10px;
  transition: background .15s ease, border-color .15s ease;
}
.crm-sg-name::placeholder { color: #cbd5e1; font-weight: 700; }
.crm-sg-name:hover { background: #f8fafc; }
.crm-sg-name:focus { outline: none; background: #fff; border-color: #c4b5fd; }
.crm-sg-x {
  flex: none; width: 32px; height: 32px; border: 0; background: none; cursor: pointer;
  color: #94a3b8; font-size: 24px; line-height: 1; padding: 0; border-radius: 8px;
  transition: background .14s ease, color .14s ease;
}
.crm-sg-x:hover { background: #f1f5f9; color: #334155; }

/* Where you are: one quiet line, so "inside what" never has to be guessed. */
.crm-sg-inside {
  flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 0 20px 12px; font-size: 12px; font-weight: 600; color: #94a3b8;
}
.crm-sg-inside b { color: #475569; font-weight: 700; }
.crm-sg-queued {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #92400e; background: #fef3c7; padding: 2px 7px; border-radius: 5px;
}

/* ── tabs: the editor's, so the two screens are one language ──── */
.crm-sg-tabs { flex: none; display: flex; gap: 4px; padding: 0 14px; border-bottom: 1px solid #eef2f7; }
.crm-sg-tab {
  position: relative; border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 700; color: #94a3b8; padding: 10px 12px 12px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .15s ease;
}
.crm-sg-tab:hover { color: #475569; }
.crm-sg-tab.is-active { color: #7c3aed; }
.crm-sg-tab.is-active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; background: #7c3aed; border-radius: 2px 2px 0 0;
}
.crm-sg-tabn {
  font-size: 10.5px; font-weight: 800; color: #6d28d9; background: #ede9fe;
  padding: 1px 6px; border-radius: 6px; font-variant-numeric: tabular-nums;
}
.crm-sg-tabn[hidden] { display: none; }

.crm-sg-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 20px 20px; }
.crm-sg-panel { display: none; }
.crm-sg-panel.is-active { display: block; }
.crm-sg-spacer { flex: 1 1 auto; }

/* ── who belongs ──────────────────────────────────────────────── */
.crm-sg-filt { margin-top: 14px; border: 1px solid #e9eef5; border-radius: 12px; padding: 12px 14px 14px; }
.crm-sg-filt.is-empty { background: #fbfcfe; }
.crm-sg-filt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crm-sg-filt-ttl { font-size: 13.5px; font-weight: 800; color: #0f172a; }
.crm-sg-filt-n {
  font-size: 11px; font-weight: 800; color: #6d28d9; background: #ede9fe;
  padding: 1px 7px; border-radius: 6px;
}
.crm-sg-filt-n[hidden] { display: none; }
.crm-sg-filt-body { margin-top: 10px; }
/* The ceiling, said INSIDE the filters it governs — it used to be a separate
   amber panel above the name, which is not where you are looking. */
.crm-sg-ceil {
  display: flex; align-items: flex-start; gap: 9px; margin: 0 0 10px;
  padding: 9px 12px; border-radius: 9px;
  background: #faf7ff; border: 1px solid #ece2ff; border-left: 3px solid #7c3aed;
  font-size: 12.5px; line-height: 1.55; color: #4c3a75;
}
.crm-sg-ceil b { color: #3b1f6b; font-weight: 700; }
.crm-sg-ceil svg { flex: none; color: #7c3aed; margin-top: 2px; }
.crm-sg-ceil.is-empty {
  background: #fffaf3; border-color: #fde8c8; border-left-color: #d97706; color: #7c4a13;
}
.crm-sg-ceil.is-empty b { color: #713f12; }
.crm-sg-ceil.is-empty svg { color: #d97706; }
.crm-sg-sum { margin: 0; font-size: 12.5px; line-height: 1.6; color: #475569; overflow-wrap: anywhere; }
.crm-sg-sum.is-none em { color: #94a3b8; font-style: normal; }
.crm-sg-sum.is-none b { color: #7c3aed; font-weight: 800; }

/* ── members ──────────────────────────────────────────────────── */
.crm-sg-mnote {
  margin: 0 0 12px; font-size: 12.5px; line-height: 1.6; color: #64748b;
  background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px; padding: 10px 12px;
}
.crm-sg-mnote b { color: #334155; font-weight: 700; }
.crm-sg-mlist { display: flex; flex-direction: column; gap: 2px; }
.crm-sg-mrow {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px;
  font-size: 13px; color: #0f172a; min-width: 0;
}
.crm-sg-mrow:hover { background: #f8fafc; }
.crm-sg-mname { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-sg-msub { color: #94a3b8; font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-sg-mtag {
  margin-left: auto; flex: none; font-size: 10.5px; font-weight: 800; color: #6d28d9;
  background: #ede9fe; padding: 2px 7px; border-radius: 6px;
}
.crm-sg-mmore { margin: 10px 2px 0; font-size: 12px; color: #94a3b8; font-weight: 600; }
.crm-sg-mempty {
  padding: 26px 16px; text-align: center; border: 1px dashed #e2e8f0; border-radius: 12px;
  font-size: 12.5px; line-height: 1.6; color: #94a3b8;
}
.crm-sg-mempty b { color: #475569; font-weight: 700; }

/* ── details ──────────────────────────────────────────────────── */
.crm-sg-lbl { display: block; font-size: 12px; font-weight: 700; color: #475569; margin: 0 0 6px; }
.crm-sg-lbl + .ch-input, .crm-sg-ta { margin-bottom: 16px; }
.crm-sg-ta { width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit; }

/* ── footer ───────────────────────────────────────────────────── */
.crm-sg-foot {
  flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 20px; border-top: 1px solid #eef2f7; background: #fcfdfe;
}
.crm-sg-foot .crm-seg-count { flex: 0 0 auto; text-align: left; }
.crm-sg-unlink {
  background: none; border: 0; padding: 2px 0; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 600; color: #94a3b8;
}
.crm-sg-unlink:hover { color: #dc2626; text-decoration: underline; }
.crm-sg-unlink[hidden] { display: none; }

/* No pills in here either — dashboard-meta stamps every button at runtime
   with the tenant's radius, and an id beats its five classes. */
#crmSubOv button { border-radius: 10px !important; }
#crmSubOv .crm-sg-img { border-radius: 12px !important; }
#crmSubOv .crm-seg-howopt { border-radius: 10px !important; }

/* The row that opens it: one line, no accordion. */
.crm-sub.is-flat > .crm-sub-head { width: 100%; }
.crm-sub.is-flat .crm-sub-go {
  flex: none; color: #cbd5e1; display: inline-flex; transition: color .15s ease, transform .15s ease;
}
.crm-sub.is-flat .crm-sub-head:hover .crm-sub-go { color: #7c3aed; transform: translateX(2px); }

/* 🚫 `hidden` is only display:none at UA weight, so `.ch-btn{display:inline-flex}`
   beats it — the Add button sat in the footer of all three tabs, offering to
   add nothing, while syncAdd() was setting `hidden` perfectly correctly. Same
   family as #crmSegmentAddSelected and .crm-seg-tab-badge before it: add the
   scoped rule, don't go debugging the toggle. */
#crmSubOv .ch-btn[hidden],
#crmSubOv [hidden] { display: none !important; }
/* The queued badge is the WORD; the sentence beside it is ordinary text. A
   whole clause inside an uppercased, letter-spaced pill reads as a banner
   across the header. */
.crm-sg-when { font-size: 12px; font-weight: 600; color: #94a3b8; }

/* ══════════════════════════════════════════════════════════════════
   FILTERS YOU CAN ACTUALLY DRIVE — 2026-08-11
   ──────────────────────────────────────────────────────────────────
   Three things Tyler could see and not touch, made into controls:
     1. the AND / OR between two filters was a ::before, so the word that
        decides whether four filters mean an audience or mean nobody was
        the one thing on the screen you could not click;
     2. a date could only be one of five bands somebody chose in advance;
     3. a number could only be one of four.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. The joining word IS the control ──────────────────────────
   ⚠️ THE OLD ::before RULES MUST DIE, not be overridden. A pseudo-element is
   `pointer-events:none` in that block and sits in the same 22px gutter these
   buttons now occupy — leave it in place and every gap draws the word twice,
   once dead and once live, a few pixels apart. */
.crm-fb-rules > * + *::before,
.crm-fb-scroll .crm-rule-grp-body > * + *::before,
.crm-fb-rules[data-match="any"] > * + *::before,
.crm-fb-scroll .crm-rule-grp-body[data-match="any"] > * + *::before { content: none !important; }

.crm-rule-list > .crm-rule-join {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  margin: -7px 0 -7px 12px;           /* sit IN the gutter, not between two of them */
  padding: 2px 8px;
  border: 1px solid transparent; border-radius: 6px;
  background: #f1f5f9; color: #94a3b8;
  font-family: inherit; font-size: 9.5px; font-weight: 800; letter-spacing: .09em;
  cursor: pointer; position: relative; z-index: 1;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.crm-rule-list > .crm-rule-join[data-mode="any"] { background: #f1ebff; color: #7c3aed; }
/* What it will BECOME, shown only on the way to pressing it. Without this the
   button says "AND" and gives no hint that pressing it says "OR" — which is
   the whole reason the word was unreadable as a control in the first place. */
.crm-rule-join-swap {
  max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap;
  color: #7c3aed; transition: max-width .18s ease, opacity .14s ease;
}
.crm-rule-join:hover, .crm-rule-join:focus-visible {
  background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; outline: none;
}
.crm-rule-join[data-mode="any"]:hover, .crm-rule-join[data-mode="any"]:focus-visible {
  background: #eef2f7; color: #64748b; border-color: #e2e8f0;
}
.crm-rule-join:hover .crm-rule-join-swap,
.crm-rule-join:focus-visible .crm-rule-join-swap { max-width: 46px; opacity: .85; }
/* 🚨 ONE LIST HAS ONE JOINING WORD. Flipping any gap flips all of them, so
   hovering one has to light the others — otherwise the first click reads as a
   bug ("I changed that one and they all moved"). */
.crm-rule-list:has(> .crm-rule-join:hover) > .crm-rule-join {
  background: #ede9fe; color: #6d28d9;
}
.crm-rule-list:has(> .crm-rule-join[data-mode="any"]:hover) > .crm-rule-join {
  background: #eef2f7; color: #64748b;
}
/* Outside the filter builder the lists are tighter, so the chip needs no gutter
   to hang in — it just sits on its own line between the two rows. */
.crm-rule-list > .crm-rule-join { margin-top: -2px; margin-bottom: -2px; }
.crm-fb-rules > .crm-rule-join,
.crm-fb-scroll .crm-rule-grp-body > .crm-rule-join { margin-top: -6px; margin-bottom: -6px; }

/* ── 2. WHEN — a date, however you want to say it ────────────────── */
.crm-when {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  min-width: 0; width: 100%;
}
.crm-when > .crm-sel-trigger[data-sel-for="crm-when-mode"],
.crm-when > .crm-when-mode { flex: 1 1 150px; min-width: 0; }
.crm-when-args { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.crm-when-n {
  width: 62px; flex: none; padding: 5px 8px; border: 1px solid #d9e2ec;
  border-radius: 8px; text-align: center; font: inherit; font-size: 12.5px; background: #fff;
}
.crm-when-a, .crm-when-b {
  flex: 1 1 128px; min-width: 118px; padding: 4px 8px; border: 1px solid #d9e2ec;
  border-radius: 8px; font: inherit; font-size: 12.5px; color: #334155; background: #fff;
}
.crm-when-word { font-size: 12px; color: #94a3b8; flex: none; }
.crm-when .crm-sel-trigger[data-sel-for="crm-when-u"] { flex: 0 0 auto; min-width: 92px; }
.crm-when-a:focus, .crm-when-b:focus, .crm-when-n:focus {
  outline: none; border-color: #c4b5fd; box-shadow: 0 0 0 3px rgba(124, 58, 237, .1);
}
/* A date input's own picker button is grey-on-grey at this size. */
.crm-when-a::-webkit-calendar-picker-indicator,
.crm-when-b::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
.crm-when-a:hover::-webkit-calendar-picker-indicator,
.crm-when-b:hover::-webkit-calendar-picker-indicator { opacity: .9; }
/* The value cell has to be allowed to grow now that it can hold two dates. */
.crm-fb-scroll .crm-rule-row:has(.crm-when-args[data-mode="between"]) {
  grid-template-columns: minmax(0, 150px) 78px minmax(240px, 1fr) 30px;
}

/* ── 3. A number range of your own ───────────────────────────────── */
.crm-num-own { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; width: 100%; }
.crm-num-openown {
  border: 0; background: none; padding: 2px 0; cursor: pointer; font-family: inherit;
  font-size: 11.5px; font-weight: 700; color: #7c3aed;
}
.crm-num-openown:hover { text-decoration: underline; }
.crm-num-form { display: inline-flex; align-items: center; gap: 5px; }
.crm-num-form[hidden] { display: none; }
.crm-num-a, .crm-num-b {
  width: 76px; padding: 4px 8px; border: 1px solid #d9e2ec; border-radius: 8px;
  font: inherit; font-size: 12.5px; text-align: center; background: #fff;
}
.crm-num-a:focus, .crm-num-b:focus {
  outline: none; border-color: #c4b5fd; box-shadow: 0 0 0 3px rgba(124, 58, 237, .1);
}
.crm-num-word { font-size: 11.5px; color: #94a3b8; }
.crm-num-go {
  border: 1px solid #ddd6fe; background: #f5f3ff; color: #6d28d9; cursor: pointer;
  padding: 4px 10px; border-radius: 8px; font-family: inherit; font-size: 11.5px; font-weight: 700;
}
.crm-num-go:hover { background: #ede9fe; }
/* The hint earns its line only while the boxes are open. */
.crm-num-hint { flex: 1 1 100%; font-size: 10.5px; color: #b6bfcb; }
.crm-num-own:has(.crm-num-form[hidden]) .crm-num-hint { display: none; }

/* ── 4. "+ Add filter" belongs under the filters ──────────────────
   🚨 It was in a pinned footer under the scroller. Tyler: *"I added one
   filter. Adding more filters should be right underneath it."* It is now the
   last thing in the list, so the next filter lands where you are looking. */
.crm-fb-inlineadd {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 18px 0 4px; padding-left: 2px;
}
.crm-fb-inlineadd[hidden] { display: none; }
.crm-fb-inlineadd .crm-fb-add {
  border: 1px dashed #ddd6fe; border-radius: 9px; padding: 6px 12px; background: #fdfcff;
}
.crm-fb-inlineadd .crm-fb-add:hover { text-decoration: none; background: #f5f3ff; border-color: #c4b5fd; }
.crm-fb-inlineadd .crm-fb-hint { flex: 1 1 220px; }

/* The one line the filter builder's AI card has that the header's does not:
   what is already on screen, so "add" reads as a real choice. */
.crm-fbai-have {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 9px;
  background: #f8f5ff; border: 1px solid #ece4ff;
  font-size: 12.5px; line-height: 1.55; color: #5b21b6;
}
.crm-fbai-have b { font-weight: 800; }

/* ══════════════════════════════════════════════════════════════════
   A GROUP'S FACE — an icon and a colour, not only a photo
   ──────────────────────────────────────────────────────────────────
   Tyler, 2026-08-11: "make sure you can attach an icon or image to all the
   different groups adding personality to each group, especially as we start
   having a bunch of groups."

   `.is-icon` is added by the ONE renderer (renderSegmentImageInto in crm.js) and
   by the markup helpers beside it, so every surface that already draws a group's
   circle gets the icon for free: the list rows, the editor header, the detail
   popup, the sub-group rows, the picker options and the chips they become. These
   rules only stop the svg being stretched by the flexbox those circles use, and
   size it to the circle it sits in.
   ⚠️ `flex: none` matters — without it the svg is a flex item and gets squashed
   to nothing inside the smaller marks (the 18px chip face).
   ══════════════════════════════════════════════════════════════════ */
.crm-row-avatar.is-icon > svg,
.crm-edit-avatar.is-icon > svg,
.crm-sub-avatar.is-icon > svg,
.crm-segd-sub-av.is-icon > svg,
.crm-sel-opt-img.is-icon > svg,
.crm-chip-img.is-icon > svg,
.crm-gface.is-icon > svg,
.crm-seg-headimg.is-icon > svg {
  flex: none;
  width: 58%; height: 58%;
  display: block;
  color: #fff;
}
/* The bigger the circle, the smaller the icon can sit inside it and still read
   as a mark rather than as a filled disc. */
.crm-edit-avatar.is-icon > svg,
.crm-seg-headimg.is-icon > svg { width: 50%; height: 50%; }
.crm-chip-img.is-icon > svg,
.crm-sel-opt-img.is-icon > svg { width: 66%; height: 66%; }
/* An icon face never wants the letter's typography. */
.crm-row-avatar.is-icon,
.crm-edit-avatar.is-icon,
.crm-sub-avatar.is-icon,
.crm-segd-sub-av.is-icon,
.crm-sel-opt-img.is-icon,
.crm-chip-img.is-icon,
.crm-gface.is-icon,
.crm-seg-headimg.is-icon {
  font-size: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

/* The shared face mark, for surfaces with no circle of their own yet. */
.crm-gface {
  flex: none; width: 28px; height: 28px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; font-size: 12px; font-weight: 800; color: #fff;
}
.crm-gface img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── The picker ────────────────────────────────────────────────────
   ⚠️ z-index 2147483420: above the group editor (2147483000), the sub-group
   popup (…100), the filter builder (…200) and the name dialog (…400); below
   .crm-sel-pop (2147483645) so a coded dropdown still lands on top. */
.crm-gf-ov {
  position: fixed; inset: 0; z-index: 2147483420;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, .44);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: background-color .22s ease;
}
.crm-gf-ov[data-open="true"] { display: flex; }
/* ⚠️ display:none → flex gives the backdrop no first frame to ease from, so the
   tint slams to full while only the card moves. Same fix as .ch-overlay. */
@starting-style { .crm-gf-ov[data-open="true"] { background: rgba(15, 23, 42, 0); } }
.crm-gf {
  width: min(520px, 100%); max-height: min(88vh, 720px);
  display: flex; flex-direction: column;
  background: #fff; border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
  overflow: hidden;
  transition: transform .28s var(--ease-spring, cubic-bezier(.2,.9,.3,1.2)), opacity .22s ease;
}
@starting-style {
  .crm-gf-ov[data-open="true"] .crm-gf { transform: translateY(12px) scale(.97); opacity: 0; }
}

.crm-gf-head {
  flex: none; display: flex; align-items: center; gap: 14px;
  padding: 18px 18px 14px; border-bottom: 1px solid #f1f5f9;
}
/* The face at the size it will actually be seen, beside the name it will be
   seen next to — the only honest preview. */
.crm-gf-preview {
  flex: none; width: 52px; height: 52px; border-radius: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; font-size: 21px; font-weight: 800; color: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .14);
  transition: background-color .18s ease;
}
.crm-gf-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crm-gf-preview.is-icon { font-size: 0; }
.crm-gf-preview.is-icon > svg { flex: none; width: 52%; height: 52%; display: block; }
.crm-gf-headtxt { flex: 1 1 auto; min-width: 0; }
.crm-gf-ttl { margin: 0; font-size: 16px; font-weight: 800; color: #0f172a; letter-spacing: -.015em; }
.crm-gf-sub { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: #94a3b8; }
.crm-gf-x {
  flex: none; width: 32px; height: 32px; border: 0; background: none; cursor: pointer;
  color: #94a3b8; font-size: 24px; line-height: 1; border-radius: 9px;
}
.crm-gf-x:hover { background: #f1f5f9; color: #334155; }

.crm-gf-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px 18px; }
.crm-gf-sec + .crm-gf-sec { margin-top: 18px; }
.crm-gf-lbl {
  margin-bottom: 9px;
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #7c3aed;
}
.crm-gf-tints { display: flex; flex-wrap: wrap; gap: 9px; }
.crm-gf-tint {
  width: 34px; height: 34px; border-radius: 11px; border: 2px solid transparent;
  cursor: pointer; padding: 0; position: relative;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
  transition: transform .14s ease, box-shadow .14s ease;
}
.crm-gf-tint:hover { transform: translateY(-1px) scale(1.05); }
/* The ring sits OUTSIDE the swatch, so the colour being selected is never
   covered by the thing saying it is selected. */
.crm-gf-tint.is-on {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(15, 23, 42, .22), inset 0 0 0 1px rgba(15, 23, 42, .08);
}
.crm-gf-tint.is-on::after {
  content: ""; position: absolute; inset: 0;
  background: no-repeat center / 15px 15px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='m5 13 4 4L19 7'/></svg>");
}
.crm-gf-icons {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px;
}
.crm-gf-icon {
  aspect-ratio: 1; border-radius: 12px; border: 1px solid #e8edf4;
  background: #fbfcfe; color: #64748b; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}
.crm-gf-icon > svg { flex: none; width: 54%; height: 54%; display: block; }
.crm-gf-icon:hover { border-color: #ddd0fb; color: #4c1d95; transform: translateY(-1px); }
/* Selected draws on the CHOSEN colour (set inline by the painter), so the grid
   previews the decision instead of being a legend of shapes. */
.crm-gf-icon.is-on { border-color: transparent; box-shadow: 0 2px 8px rgba(15, 23, 42, .16); }

.crm-gf-photorow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crm-gf-rm {
  border: 1px solid #fecaca; background: #fff; border-radius: 8px; cursor: pointer;
  padding: 5px 11px; font-family: inherit; font-size: 12px; font-weight: 700; color: #b91c1c;
}
.crm-gf-rm:hover { background: #fef2f2; }
.crm-gf-rm[hidden] { display: none; }
.crm-gf-note { font-size: 12px; color: #a3adba; }
.crm-gf-note[hidden] { display: none; }
.crm-gf-photo[hidden] { display: none; }

.crm-gf-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px; border-top: 1px solid #f1f5f9; background: #fcfdff;
}
.crm-gf-clear {
  border: 0; background: none; cursor: pointer; padding: 4px 2px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: #94a3b8;
}
.crm-gf-clear:hover { color: #334155; text-decoration: underline; }
.crm-gf-clear[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════
   A CLOSED DROPDOWN IS A VALUE, NOT A FORM FIELD
   ──────────────────────────────────────────────────────────────────
   Tyler, 2026-08-12: *"when you look at the things, like what the years are,
   the dropdown looks tacky. The selection list looks good."* The open list is
   fine — it is the closed control that reads badly, and measuring it says why:

     · the value box was pinned to `min-width: 160px` with the caret shoved to
       the far edge by `justify-content: space-between`, so the word "Yes" sat
       in a 160px box with 120px of nothing between it and its own arrow;
     · the track is `max-content`, so every row sized itself independently —
       measured 205px / 160px / 238px down one pane. Three different widths of
       the same control is what "tacky" looks like when you take it apart;
     · the operator came in three finishes on one screen — a white bordered
       trigger, a grey chip for the fields that cannot be negated, and a red
       one for `is not`.

   So: the value hugs its own text with the caret right after it, the operator
   is the grey chip in every case, and the row reads Field · is · Value instead
   of three boxes of unrelated sizes.
   ══════════════════════════════════════════════════════════════════ */
.crm-fb-scroll .crm-rule-row > .crm-rule-valuewrap { justify-self: start; max-width: 100%; }
.crm-fb-scroll .crm-rule-row .crm-sel-trigger[data-sel-for="crm-rule-value"] {
  width: auto; min-width: 0; max-width: 100%;
  justify-content: flex-start; gap: 7px;
  padding: 5px 10px; min-height: 32px;
  border: 1px solid #e6ebf3; border-radius: 9px; background: #fff;
  font-size: 12.5px; font-weight: 600; color: #0f172a;
}
.crm-fb-scroll .crm-rule-row .crm-sel-trigger[data-sel-for="crm-rule-value"]:hover {
  border-color: #cdbcf7; background: #fdfcff;
}
/* The caret is punctuation after the word, not a control of its own. */
.crm-fb-scroll .crm-rule-row .crm-sel-trigger .crm-sel-caret { width: 12px; height: 12px; color: #b6c1cf; }
.crm-fb-scroll .crm-rule-row .crm-sel-trigger[aria-expanded="true"] .crm-sel-caret { color: #7c3aed; }
/* One finish for the operator, whether it is a dropdown or the fixed word. */
.crm-fb-scroll .crm-rule-row .crm-sel-trigger[data-sel-for="crm-rule-op-sel"] {
  justify-content: center; gap: 5px;
  padding: 5px 8px; min-height: 32px; min-width: 58px;
  border: 1px solid transparent; border-radius: 8px; background: #f4f7fb;
  font-size: 12.5px; font-weight: 600; color: #64748b;
}
.crm-fb-scroll .crm-rule-row .crm-sel-trigger[data-sel-for="crm-rule-op-sel"]:hover {
  background: #edf2f9; color: #334155;
}
.crm-fb-scroll .crm-rule-row .crm-rule-op { min-height: 32px; border-radius: 8px; background: #f4f7fb; }
/* An exclusion still owns the row — it is the filter that empties a list. */
.crm-fb-scroll .crm-rule-row.is-not .crm-sel-trigger[data-sel-for="crm-rule-op-sel"] {
  background: #fef2f2; color: #dc2626; border-color: #fbd5d5;
}
/* The chip picker beside it is the control Tyler already likes, so the boxed
   one is matched to IT rather than the other way round. */
.crm-fb-scroll .crm-rule-row .crm-chip-multi { border-radius: 9px; border-color: #e6ebf3; min-height: 32px; }

/* ── "Match [all] of these" is a sentence, so its control is inline ──
   A 100px bordered box with the caret on the far right, dropped into the
   middle of a line of prose, is the same fault one size up. */
.crm-fb-mainhead .crm-sel-trigger[data-sel-for="crmFbMatch"],
.crm-fb-scroll .crm-rule-grp .crm-sel-trigger[data-sel-for="crm-grp-match"] {
  width: auto; min-width: 0; min-height: 0;
  justify-content: flex-start; gap: 5px;
  padding: 3px 8px; border-radius: 8px;
  border: 1px solid #e2d6ff; background: #f7f3ff;
  font-size: 13px; font-weight: 800; color: #6d28d9;
}
.crm-fb-mainhead .crm-sel-trigger[data-sel-for="crmFbMatch"] .crm-sel-caret,
.crm-fb-scroll .crm-rule-grp .crm-sel-trigger[data-sel-for="crm-grp-match"] .crm-sel-caret {
  width: 12px; height: 12px; color: #b39ceb;
}
.crm-fb-mainhead .crm-sel-trigger[data-sel-for="crmFbMatch"]:hover,
.crm-fb-scroll .crm-rule-grp .crm-sel-trigger[data-sel-for="crm-grp-match"]:hover {
  background: #f1e9ff; border-color: #cdbcf7;
}
.crm-fb-scroll .crm-rule-grp[data-mode="all"] .crm-sel-trigger[data-sel-for="crm-grp-match"] {
  border-color: #dde5ee; background: #f6f8fb; color: #475569;
}
.crm-fb-scroll .crm-rule-grp[data-mode="all"] .crm-sel-trigger[data-sel-for="crm-grp-match"] .crm-sel-caret { color: #a8b3c2; }

/* ══════════════════════════════════════════════════════════════════
   A SUB-GROUP SAYS WHAT IT CATCHES ON ITS OWN
   ──────────────────────────────────────────────────────────────────
   Tyler, 2026-08-12: *"it's just confusing how the sub-groups are."* The brief
   that sent him here — all the clients, plus the vendors active in the last
   two years — is exactly the shape a sub-group exists for, and the reading
   that would have caught the AI putting the two-year window on BOTH sides is
   the one nobody could get: what does each side catch. Every filter had a
   number and the group had a number; the branch between them had none.
   ══════════════════════════════════════════════════════════════════ */
.crm-fb-scroll .crm-rule-grp-head .crm-rule-remove { order: 3; margin-left: 0; }
.crm-fb-scroll .crm-rule-grp-eg { order: 1; }
.crm-rule-grp-tally {
  order: 2; margin-left: auto; flex: 0 0 auto;
  font-size: 11.5px; font-weight: 700; color: #94a3b8; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .7);
}
.crm-rule-grp-tally[hidden] { display: none; }
.crm-rule-grp-tally[data-tone="zero"] { color: #b42318; background: #fef2f2; }
.crm-fb-scroll .crm-rule-grp[data-mode="any"] .crm-rule-grp-tally:not([data-tone]) { color: #6d28d9; }
/* The two add-buttons inside a set now name the set, so give them room to. */
.crm-fb-scroll .crm-rule-grp-foot { flex-wrap: wrap; gap: 14px; }

/* ── "what the years are" — the date control is the one he named ───
   Tyler said the tacky dropdown was the years, and the years are `.crm-when`,
   NOT `[data-sel-for="crm-rule-value"]`: a date question renders a
   `.crm-when-mode` select inside a `width:100%` wrapper, on `flex: 1 1 150px`,
   so it stretched to whatever the value cell happened to be — which is where
   the 205 / 160 / 238px spread down one pane came from. Styling only the
   plain value select would have left the very control he pointed at
   untouched, and the screenshot would still have looked wrong. */
.crm-fb-scroll .crm-rule-row .crm-when { width: auto; max-width: 100%; }
.crm-fb-scroll .crm-rule-row .crm-when > .crm-sel-trigger[data-sel-for="crm-when-mode"] {
  flex: 0 0 auto; width: auto; min-width: 0; max-width: 100%;
  justify-content: flex-start; gap: 7px;
  padding: 5px 10px; min-height: 32px;
  border: 1px solid #e6ebf3; border-radius: 9px; background: #fff;
  font-size: 12.5px; font-weight: 600; color: #0f172a;
}
.crm-fb-scroll .crm-rule-row .crm-when > .crm-sel-trigger[data-sel-for="crm-when-mode"]:hover {
  border-color: #cdbcf7; background: #fdfcff;
}
/* The unit beside "the last 6 ▾" is part of the same phrase, so it hugs too. */
.crm-fb-scroll .crm-rule-row .crm-when .crm-sel-trigger[data-sel-for="crm-when-u"] {
  min-width: 0; width: auto; justify-content: flex-start; gap: 6px;
  padding: 5px 9px; min-height: 32px;
  border: 1px solid #e6ebf3; border-radius: 9px; background: #fff;
  font-size: 12.5px; font-weight: 600; color: #0f172a;
}
.crm-fb-scroll .crm-rule-row .crm-when-n { min-height: 32px; border-radius: 9px; border-color: #e6ebf3; }
.crm-fb-scroll .crm-rule-row .crm-when-a,
.crm-fb-scroll .crm-rule-row .crm-when-b { min-height: 32px; border-radius: 9px; border-color: #e6ebf3; }