/* === css/departments.css === */
/* ═══════════════════════════════════════════════════════════
   Department Views — dept- prefix
   Shared styling for all 16 department-specific pages.
   ═══════════════════════════════════════════════════════════ */

/* ── Page Header ─────────────────────────────────────────── */
.dept-header {
  padding: 28px 32px 8px;
}
.dept-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dept-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dept-icon svg { width: 22px; height: 22px; color: #fff; }
.dept-icon.sales { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.dept-icon.marketing { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.dept-icon.cs { background: linear-gradient(135deg, #10b981, #059669); }
.dept-icon.events { background: linear-gradient(135deg, #f59e0b, #d97706); }
.dept-icon.content { background: linear-gradient(135deg, #ec4899, #db2777); }
.dept-icon.digital { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.dept-icon.editorial { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.dept-icon.subs { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.dept-icon.executive { background: linear-gradient(135deg, #1e293b, #0f172a); }
.dept-icon.revops { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.dept-icon.navigator { background: linear-gradient(135deg, #f97316, #ea580c); }
.dept-icon.finance { background: linear-gradient(135deg, #22c55e, #16a34a); }
.dept-icon.programs { background: linear-gradient(135deg, #a855f7, #9333ea); }
.dept-icon.design { background: linear-gradient(135deg, #e879f9, #c026d3); }
.dept-icon.engineering { background: linear-gradient(135deg, #64748b, #475569); }
.dept-icon.people { background: linear-gradient(135deg, #fb923c, #ea580c); }
.dept-icon.product { background: linear-gradient(135deg, #2dd4bf, #14b8a6); }
.dept-icon.audience { background: linear-gradient(135deg, #06b6d4, #0891b2); }

.dept-title {
  font-size: var(--font-3xl, 1.875rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.dept-subtitle {
  font-size: var(--font-sm, 0.875rem);
  color: var(--text-muted);
  margin-top: 4px;
  padding-left: 52px;
  font-style: italic;
}
.dept-refresh-btn {
  margin-left: auto;
  padding: 6px 14px;
  font-size: var(--font-xs, 0.75rem);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition, 0.15s ease);
  display: flex;
  align-items: center;
  gap: 6px;
}
.dept-refresh-btn:hover { border-color: var(--accent); color: var(--accent); }
.dept-refresh-btn svg { width: 14px; height: 14px; }

/* ── KPI Strip ───────────────────────────────────────────── */
.dept-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding: 16px 32px;
}
.dept-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  padding: 18px 20px;
  transition: var(--transition, 0.15s ease);
  position: relative;
}
.dept-kpi:not(.no-accent)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--stripe, var(--accent));
  border-radius: var(--radius, 6px) var(--radius, 6px) 0 0;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.dept-kpi:hover { border-color: var(--border-light); transform: translateY(-1px); }
.dept-kpi:not(.no-accent):hover::before { opacity: 1; }
/* Chart-ramp cycling when no explicit accent class is set */
.dept-kpi-strip > .dept-kpi:nth-child(5n+1):not(.no-accent):not([class*="accent-"]) { --stripe: var(--chart-1); }
.dept-kpi-strip > .dept-kpi:nth-child(5n+2):not(.no-accent):not([class*="accent-"]) { --stripe: var(--chart-2); }
.dept-kpi-strip > .dept-kpi:nth-child(5n+3):not(.no-accent):not([class*="accent-"]) { --stripe: var(--chart-3); }
.dept-kpi-strip > .dept-kpi:nth-child(5n+4):not(.no-accent):not([class*="accent-"]) { --stripe: var(--chart-4); }
.dept-kpi-strip > .dept-kpi:nth-child(5n+5):not(.no-accent):not([class*="accent-"]) { --stripe: var(--chart-5); }
/* Explicit accent overrides (theme-token mapped) */
.dept-kpi.accent-blue::before   { background: var(--chart-1); opacity: 0.85; }
.dept-kpi.accent-green::before  { background: var(--chart-2); opacity: 0.85; }
.dept-kpi.accent-amber::before  { background: var(--chart-3); opacity: 0.85; }
.dept-kpi.accent-rose::before   { background: var(--chart-4); opacity: 0.85; }
.dept-kpi.accent-purple::before { background: var(--chart-5); opacity: 0.85; }
.dept-kpi.accent-cyan::before   { background: var(--cyan); opacity: 0.85; }

.dept-kpi-label {
  font-size: var(--font-2xs, 0.625rem);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  font-weight: 600;
}
.dept-kpi-value {
  font-size: var(--font-2xl, 1.5rem);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary);
}
.dept-kpi-value.loading {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--border) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: dept-shimmer 1.5s infinite;
  border-radius: 4px;
  color: transparent;
  user-select: none;
}
@keyframes dept-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.dept-kpi-delta {
  font-size: var(--font-xs, 0.75rem);
  margin-top: 4px;
  font-weight: 500;
}
.dept-kpi-delta.up { color: #10b981; }
.dept-kpi-delta.down { color: #f43f5e; }
.dept-kpi-delta.neutral { color: var(--text-muted); }
.dept-kpi-note {
  font-size: var(--font-2xs, 0.625rem);
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Tab Bar ─────────────────────────────────────────────── */
.dept-tabs {
  display: flex;
  gap: 0;
  padding: 0 32px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dept-tab {
  padding: 12px 20px;
  font-size: var(--font-sm, 0.875rem);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  /* Overlap the strip's 1px bottom border so the active underline reads as
     a continuous tab bar rather than a floating rule. */
  margin-bottom: -1px;
  transition: var(--transition, 0.15s ease);
  white-space: nowrap;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.dept-tab:hover { color: var(--text-primary); }
.dept-tab.active {
  color: var(--accent, #3b82f6);
  border-bottom-color: var(--accent, #3b82f6);
  font-weight: 600;
}

/* ── Tab Content ─────────────────────────────────────────── */
.dept-content {
  padding: 24px 32px;
}
.dept-panel { display: none; }
.dept-panel.active { display: block; }

/* ── Section Cards ───────────────────────────────────────── */
.dept-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  margin-bottom: 16px;
  overflow: hidden;
}
.dept-section-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dept-section-title {
  font-size: var(--font-base, 1rem);
  font-weight: 600;
  color: var(--text-primary);
  position: relative;
  padding-left: 12px;
}
.dept-section-title:not(.no-accent)::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 0.95em;
  border-radius: 2px;
  background: var(--gradient-primary);
}
.dept-section-badge {
  font-size: var(--font-2xs, 0.625rem);
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dept-section-badge.live { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.dept-section-badge.ml { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.dept-section-badge.ai { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.dept-section-body { padding: 20px; }

/* ── Data Table ──────────────────────────────────────────── */
.dept-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dept-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm, 0.875rem);
}
.dept-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: var(--font-2xs, 0.625rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.dept-table th:hover { color: var(--text-primary); }
.dept-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.dept-table th.sortable.sort-asc::after { content: " ▲"; font-size: 9px; opacity: .8; }
.dept-table th.sortable.sort-desc::after { content: " ▼"; font-size: 9px; opacity: .8; }
.dept-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.03));
  color: var(--text-secondary);
  vertical-align: middle;
}
.dept-table tr:hover td {
  background: var(--bg-hover, rgba(255,255,255,0.02));
}
.dept-table .mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-xs, 0.75rem);
}
.dept-table .text-right { text-align: right; }
.dept-table .text-center { text-align: center; }

/* ── Status Badges ───────────────────────────────────────── */
.dept-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--font-2xs, 0.625rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dept-badge.green { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.dept-badge.amber { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.dept-badge.red { background: rgba(244, 63, 94, 0.15); color: #f43f5e; }
.dept-badge.blue { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.dept-badge.purple { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.dept-badge.gray { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }

/* ── Metric Bars ─────────────────────────────────────────── */
.dept-bar-track {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}
.dept-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.dept-bar-fill.blue { background: linear-gradient(90deg, var(--accent-dark), var(--accent-light)); }
.dept-bar-fill.green { background: var(--gradient-success); }
.dept-bar-fill.amber { background: linear-gradient(90deg, var(--accent-amber), var(--warning)); }
.dept-bar-fill.purple { background: var(--gradient-purple); }
.dept-bar-fill.rose { background: var(--gradient-danger); }
.dept-bar-fill.cyan { background: linear-gradient(90deg, var(--cyan), var(--accent-cyan)); }

/* ── Insight Cards ───────────────────────────────────────── */
.dept-insight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.dept-insight {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  padding: 18px;
  transition: var(--transition, 0.15s ease);
  position: relative;
}
.dept-insight:not(.no-accent)::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--stripe, var(--accent));
  border-radius: var(--radius, 6px) var(--radius, 6px) 0 0;
  opacity: 0.7;
}
.dept-insight-grid > .dept-insight:nth-child(5n+1):not(.no-accent) { --stripe: var(--chart-1); }
.dept-insight-grid > .dept-insight:nth-child(5n+2):not(.no-accent) { --stripe: var(--chart-2); }
.dept-insight-grid > .dept-insight:nth-child(5n+3):not(.no-accent) { --stripe: var(--chart-3); }
.dept-insight-grid > .dept-insight:nth-child(5n+4):not(.no-accent) { --stripe: var(--chart-4); }
.dept-insight-grid > .dept-insight:nth-child(5n+5):not(.no-accent) { --stripe: var(--chart-5); }
.dept-insight:hover { border-color: var(--border-light); }
.dept-insight-label {
  font-size: var(--font-2xs, 0.625rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 600;
}
.dept-insight-value {
  font-size: var(--font-xl, 1.25rem);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
.dept-insight-detail {
  font-size: var(--font-xs, 0.75rem);
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.5;
}

/* ── Value Proposition Banner ────────────────────────────── */
.dept-value-banner {
  margin: 0 32px 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.08));
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: var(--radius, 6px);
  display: flex;
  align-items: center;
  gap: 16px;
}
.dept-value-banner.sales { background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(37,99,235,0.04)); border-color: rgba(59,130,246,0.15); }
.dept-value-banner.marketing { background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(124,58,237,0.04)); border-color: rgba(139,92,246,0.15); }
.dept-value-banner.cs { background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(5,150,105,0.04)); border-color: rgba(16,185,129,0.15); }
.dept-value-banner.events { background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(217,119,6,0.04)); border-color: rgba(245,158,11,0.15); }
.dept-value-banner.content { background: linear-gradient(135deg, rgba(236,72,153,0.08), rgba(219,39,119,0.04)); border-color: rgba(236,72,153,0.15); }
.dept-value-banner.digital { background: linear-gradient(135deg, rgba(6,182,212,0.08), rgba(8,145,178,0.04)); border-color: rgba(6,182,212,0.15); }
.dept-value-banner.editorial { background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(79,70,229,0.04)); border-color: rgba(99,102,241,0.15); }
.dept-value-banner.subs { background: linear-gradient(135deg, rgba(20,184,166,0.08), rgba(13,148,136,0.04)); border-color: rgba(20,184,166,0.15); }
.dept-value-banner.executive { background: linear-gradient(135deg, rgba(30,41,59,0.12), rgba(15,23,42,0.06)); border-color: rgba(100,116,139,0.2); }
.dept-value-banner.revops { background: linear-gradient(135deg, rgba(14,165,233,0.08), rgba(2,132,199,0.04)); border-color: rgba(14,165,233,0.15); }
.dept-value-banner.navigator { background: linear-gradient(135deg, rgba(249,115,22,0.08), rgba(234,88,12,0.04)); border-color: rgba(249,115,22,0.15); }
.dept-value-banner.finance { background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(22,163,74,0.04)); border-color: rgba(34,197,94,0.15); }
.dept-value-banner.programs { background: linear-gradient(135deg, rgba(168,85,247,0.08), rgba(147,51,234,0.04)); border-color: rgba(168,85,247,0.15); }
.dept-value-banner.design { background: linear-gradient(135deg, rgba(232,121,249,0.08), rgba(192,38,211,0.04)); border-color: rgba(232,121,249,0.15); }
.dept-value-banner.engineering { background: linear-gradient(135deg, rgba(100,116,139,0.08), rgba(71,85,105,0.04)); border-color: rgba(100,116,139,0.15); }
.dept-value-banner.people { background: linear-gradient(135deg, rgba(251,146,60,0.08), rgba(234,88,12,0.04)); border-color: rgba(251,146,60,0.15); }
.dept-value-banner.product { background: linear-gradient(135deg, rgba(45,212,191,0.08), rgba(20,184,166,0.04)); border-color: rgba(45,212,191,0.15); }
.dept-value-banner.audience { background: linear-gradient(135deg, rgba(6,182,212,0.08), rgba(8,145,178,0.04)); border-color: rgba(6,182,212,0.15); }

.dept-value-text {
  font-size: var(--font-sm, 0.875rem);
  color: var(--text-secondary);
  line-height: 1.6;
}
.dept-value-text strong { color: var(--text-primary); font-weight: 600; }

/* ── Empty / Loading States ──────────────────────────────── */
.dept-loading {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
}
.dept-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent, #3b82f6);
  border-radius: 50%;
  animation: dept-spin 0.8s linear infinite;
  margin: 0 auto 12px;
}
@keyframes dept-spin { to { transform: rotate(360deg); } }
.dept-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
  font-size: var(--font-sm, 0.875rem);
}

/* ── CS segment roster controls + niche breakdown bars ──────── */
.cs-roster-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.cs-roster-controls .cs-search {
  flex: 1;
  min-width: 200px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: var(--font-sm, 0.875rem);
}
.cs-roster-controls .cs-sort {
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: var(--font-sm, 0.875rem);
}
.cs-breakdown-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.cs-breakdown-row .cs-bd-label {
  flex: 0 0 42%;
  font-size: 0.8125rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-breakdown-row .dept-bar-track { flex: 1; margin: 0; }
.cs-breakdown-row .cs-bd-count {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  color: var(--text-muted);
  min-width: 70px;
  text-align: right;
}

/* Collapsible book-of-business band merged into the top of the roster box
   (replaces the former standalone breakdown card + niche summary grid). */
.cs-breakdown-fold {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.cs-breakdown-fold > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-2xs, 0.625rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  user-select: none;
}
.cs-breakdown-fold > summary::-webkit-details-marker { display: none; }
.cs-breakdown-fold > summary::before {
  content: '\25B8';
  font-size: 0.7rem;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.cs-breakdown-fold[open] > summary::before { transform: rotate(90deg); }
.cs-breakdown-fold > summary:hover { color: var(--text-primary); }
.cs-fold-body { margin-top: 12px; }

/* ── ML Intelligence tab ─────────────────────────────────── */
.ml-lanes {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ml-lane {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: var(--font-sm, 0.8125rem);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.ml-lane:hover { color: var(--text-primary); border-color: #8b5cf6; }
.ml-lane.active {
  background: rgba(139, 92, 246, 0.15);
  border-color: #8b5cf6;
  color: #c4b5fd;
  font-weight: 600;
}
.ml-dist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.ml-dist-card {
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  background: var(--bg-card);
  padding: 14px 16px;
}
.ml-dist-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

/* ── Expandable client rows + service card ───────────────── */
.dept-table tr.cs-row { cursor: pointer; }
.dept-table tr.cs-row:hover td { background: rgba(16, 185, 129, 0.06); }
.dept-table tr.cs-row-open td { background: rgba(16, 185, 129, 0.10); }
.cs-caret {
  display: inline-block;
  width: 16px;
  color: var(--text-muted);
  transition: transform 0.15s ease;
  font-size: 9px;
}
.dept-table tr.cs-row-open .cs-caret { transform: rotate(90deg); color: #10b981; }

.dept-table tr.cs-detail-row td { padding: 0 !important; border-bottom: 1px solid var(--border) !important; }
.dept-table tr.cs-detail-row:hover td { background: transparent; }
.cs-detail {
  padding: 20px 24px 22px;
  border-left: 3px solid #10b981;
  background: var(--bg-hover, rgba(255, 255, 255, 0.02));
}

/* snapshot metrics */
.cs-snapshot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.cs-metric { min-width: 72px; }
.cs-metric-label {
  font-size: var(--font-2xs, 0.625rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: 600;
}
.cs-metric-value {
  font-size: var(--font-base, 1rem);
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
}

/* owner / csm meta + chips */
.cs-meta-line {
  font-size: var(--font-sm, 0.875rem);
  color: var(--text-secondary);
  margin: 14px 0 10px;
}
.cs-meta-line strong { color: var(--text-primary); font-weight: 600; }
.cs-dot { margin: 0 10px; color: var(--border-light, var(--text-muted)); }
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-chip {
  display: inline-block;
  padding: 3px 10px;
  font-size: var(--font-xs, 0.75rem);
  border-radius: 99px;
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.22);
  white-space: nowrap;
}
.cs-drivers {
  font-size: var(--font-xs, 0.75rem);
  color: var(--text-muted);
  margin-top: 10px;
  line-height: 1.5;
}

/* detail panel grid */
.cs-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.cs-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  padding: 14px 16px;
}
.cs-panel-wide { grid-column: 1 / -1; }

/* "What the models say" — plain-language ML explainer panel */
.cs-ml-headline {
  font-size: var(--font-sm, 0.85rem);
  font-weight: 600;
  color: var(--text);
  margin: 6px 0 12px;
  line-height: 1.45;
}
.cs-ml-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.cs-ml-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius, 6px);
  padding: 10px 12px;
  background: var(--bg-app, transparent);
}
.cs-ml-card.red { border-left-color: #ef4444; }
.cs-ml-card.amber { border-left-color: #f59e0b; }
.cs-ml-card.blue { border-left-color: #3b82f6; }
.cs-ml-card.green { border-left-color: #22c55e; }
.cs-ml-card.gray { border-left-color: var(--border); }
.cs-ml-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 6px;
}
.cs-ml-q { font-weight: 600; font-size: var(--font-sm, 0.85rem); color: var(--text); }
.cs-ml-conf {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}
.cs-ml-plain { font-size: var(--font-xs, 0.78rem); color: var(--text); line-height: 1.45; }
.cs-ml-why {
  font-size: var(--font-xs, 0.75rem);
  color: var(--text-muted);
  margin-top: 5px;
  line-height: 1.4;
}
.cs-ml-action {
  font-size: var(--font-xs, 0.75rem);
  color: var(--text);
  margin-top: 6px;
  font-weight: 500;
  line-height: 1.4;
}
.cs-sec-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--font-2xs, 0.625rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle, var(--border));
}
.cs-sec-badge {
  font-weight: 600;
  font-size: var(--font-2xs, 0.625rem);
  color: #34d399;
  text-transform: none;
  letter-spacing: 0;
  font-family: 'JetBrains Mono', monospace;
}
.cs-sec-left { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
/* "?" help affordance + hover/focus tooltip explaining each expansion card */
.cs-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%;
  background: var(--border, #2a2a35); color: var(--text-muted);
  font-size: 9px; font-weight: 700; line-height: 1;
  letter-spacing: 0; text-transform: none; cursor: help; position: relative;
}
.cs-help:hover, .cs-help:focus { background: #4f46e5; color: #fff; outline: none; }
.cs-help[data-tip]:hover::after, .cs-help[data-tip]:focus::after {
  content: attr(data-tip);
  position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: 260px;
  background: #0f1117; color: #e5e7eb;
  border: 1px solid var(--border, #2a2a35); border-radius: 6px;
  padding: 8px 10px; font-size: 11px; font-weight: 500; line-height: 1.45;
  letter-spacing: 0; text-transform: none; white-space: normal; text-align: left;
  z-index: 50; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); pointer-events: none;
}
.cs-help[data-tip]:hover::before, .cs-help[data-tip]:focus::before {
  content: ''; position: absolute; left: 50%; top: calc(100% + 3px);
  transform: translateX(-50%);
  border: 5px solid transparent; border-bottom-color: var(--border, #2a2a35);
  z-index: 50;
}
.cs-subhdr {
  font-size: var(--font-2xs, 0.625rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 14px 0 6px;
}
.cs-subhdr:first-child { margin-top: 0; }

/* detail lists */
.cs-list { list-style: none; margin: 0; padding: 0; }
.cs-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04));
  font-size: var(--font-sm, 0.875rem);
}
.cs-list li:last-child { border-bottom: none; }
.cs-li-main { color: var(--text-primary); line-height: 1.35; }
.cs-li-main a { color: #34d399; text-decoration: none; }
.cs-li-main a:hover { text-decoration: underline; }
.cs-li-amt {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--font-xs, 0.75rem);
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
  white-space: nowrap;
}
.cs-li-meta {
  grid-column: 1 / -1;
  font-size: var(--font-2xs, 0.625rem);
  color: var(--text-muted);
  margin-top: 2px;
}
.cs-li-sub {
  grid-column: 1 / -1;
  font-size: var(--font-2xs, 0.625rem);
  color: var(--text-secondary, #94a3b8);
  font-style: italic;
  margin-top: 1px;
}
.cs-list-scroll { max-height: 340px; overflow-y: auto; padding-right: 4px; }
.cs-li-snip {
  grid-column: 1 / -1;
  font-size: var(--font-xs, 0.75rem);
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.45;
}
.cs-none {
  font-size: var(--font-sm, 0.875rem);
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 0;
}
.cs-mix {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 12px;
  font-size: var(--font-sm, 0.875rem);
  color: var(--text-secondary);
}
.cs-mix strong { color: var(--text-primary); font-family: 'JetBrains Mono', monospace; }
.cs-detail-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cs-detail-links .ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

/* ── CS: primary users / champion-risk, usage trend, content ──────── */
.cs-champ-badge {
  font-weight: 600;
  font-size: var(--font-2xs, 0.625rem);
  text-transform: none;
  letter-spacing: 0;
  padding: 2px 8px;
  border-radius: 99px;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}
.cs-champ-badge.ok    { color: #34d399; background: rgba(16,185,129,0.12); }
.cs-champ-badge.watch { color: #fb923c; background: rgba(251,146,60,0.14); }
.cs-champ-badge.dark  { color: #f43f5e; background: rgba(244,63,94,0.15); }
.cs-champ-badge.gray  { color: #94a3b8; background: rgba(148,163,184,0.12); }
.cs-pu-list .cs-li-amt { font-size: var(--font-2xs, 0.625rem); }

.cs-trend-rows { display: flex; flex-direction: column; gap: 4px; }
.cs-trend-row {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.cs-trend-label {
  font-size: var(--font-2xs, 0.625rem);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cs-spark { display: block; }
.cs-trend-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-xs, 0.75rem);
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
  white-space: nowrap;
}
.cs-delta { font-size: var(--font-2xs, 0.625rem); font-weight: 600; margin-left: 4px; }
.cs-trend-foot {
  font-size: var(--font-2xs, 0.625rem);
  color: var(--text-muted);
  margin-top: 8px;
  text-align: right;
}
.cs-risk-drivers { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.cs-risk-driver {
  font-size: var(--font-xs, 0.75rem);
  color: #fb923c;
  background: rgba(251, 146, 60, 0.10);
  border-left: 2px solid #fb923c;
  padding: 3px 8px;
  border-radius: 3px;
}

/* ── Donut / Pie Viz ─────────────────────────────────────── */
.dept-donut-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}
.dept-donut-legend {
  flex: 1;
  min-width: 200px;
}
.dept-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: var(--font-sm, 0.875rem);
}
.dept-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.dept-legend-label { flex: 1; color: var(--text-secondary); }
.dept-legend-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-xs, 0.75rem);
  color: var(--text-primary);
  font-weight: 600;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .dept-header { padding: 20px 16px 8px; }
  .dept-subtitle { padding-left: 0; margin-top: 8px; }
  .dept-kpi-strip { padding: 12px 16px; grid-template-columns: repeat(2, 1fr); }
  .dept-tabs { padding: 0 16px; }
  .dept-content { padding: 16px; }
  .dept-value-banner { margin: 0 16px 12px; flex-direction: column; }
  .dept-insight-grid { grid-template-columns: 1fr; }
  .dept-title { font-size: var(--font-2xl, 1.5rem); }
}

/* ── Highlight Rows ──────────────────────────────────────── */
.dept-table tr.highlight-row td { background: rgba(59, 130, 246, 0.05); }
.dept-table tr.risk-row td { background: rgba(244, 63, 94, 0.05); }

/* ── Sparkline inline ────────────────────────────────────── */
.dept-sparkbar {
  display: flex;
  gap: 2px;
  height: 20px;
  align-items: flex-end;
}
.dept-sparkbar-seg {
  flex: 1;
  min-width: 4px;
  border-radius: 2px 2px 0 0;
  background: var(--accent, #3b82f6);
  opacity: 0.7;
  transition: opacity 0.15s;
}
.dept-sparkbar-seg:hover { opacity: 1; }

/* ── Quick Action Buttons ────────────────────────────────── */
.dept-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 0;
}
.dept-action-btn {
  padding: 8px 16px;
  font-size: var(--font-sm, 0.875rem);
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition, 0.15s ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dept-action-btn:hover { border-color: var(--accent); color: var(--accent); }
.dept-action-btn.primary {
  background: var(--accent, #3b82f6);
  color: #fff;
  border-color: var(--accent, #3b82f6);
}
.dept-action-btn.primary:hover { opacity: 0.9; }
.dept-action-btn svg { width: 14px; height: 14px; }

/* ── Stat Row (horizontal stats) ─────────────────────────── */
.dept-stat-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  padding: 12px 0;
}
.dept-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dept-stat-label {
  font-size: var(--font-2xs, 0.625rem);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dept-stat-val {
  font-size: var(--font-lg, 1.125rem);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

/* ── Account Card (for drill-down) ───────────────────────── */
.dept-account-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  padding: 16px 20px;
  margin-bottom: 10px;
  transition: var(--transition, 0.15s ease);
  cursor: pointer;
}
.dept-account-card:hover { border-color: var(--accent); }
.dept-account-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.dept-account-meta {
  font-size: var(--font-xs, 0.75rem);
  color: var(--text-muted);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── Power BI Embed Containers ──────────────────────────────────── */
.dept-pbi-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
}
.dept-pbi-section-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dept-pbi-section-title {
  font-size: var(--font-base, 1rem);
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.dept-pbi-section-title svg { color: var(--text-muted); }
.dept-pbi-fs-btn {
  padding: 4px 10px;
  font-size: var(--font-2xs, 0.625rem);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition, 0.15s ease);
  display: flex;
  align-items: center;
  gap: 4px;
}
.dept-pbi-fs-btn:hover { border-color: var(--accent); color: var(--accent); }

.dept-pbi-slot {
  position: relative;
  min-height: 500px;
}
.dept-pbi-header {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.dept-pbi-label {
  font-size: var(--font-sm, 0.875rem);
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.dept-pbi-label svg { color: var(--text-muted); }
.dept-pbi-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dept-pbi-refresh-btn {
  padding: 4px 10px;
  font-size: var(--font-2xs, 0.625rem);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition, 0.15s ease);
  display: flex;
  align-items: center;
  gap: 4px;
}
.dept-pbi-refresh-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.dept-pbi-refresh-btn:disabled { opacity: 0.5; cursor: default; }
.dept-pbi-refresh-btn.refreshing .dept-pbi-refresh-icon {
  animation: dept-pbi-spin 0.8s linear infinite;
}
@keyframes dept-pbi-spin {
  to { transform: rotate(360deg); }
}
.dept-pbi-status {
  font-size: var(--font-2xs, 0.625rem) !important;
  padding: 2px 8px !important;
}

.dept-pbi-report {
  width: 100%;
  height: 600px;
  min-height: 500px;
}
.dept-pbi-report iframe {
  border: none !important;
  border-radius: 0 !important;
}

.dept-pbi-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: var(--font-sm, 0.875rem);
}
.dept-pbi-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: var(--font-sm, 0.875rem);
}
.dept-pbi-error svg { color: #f59e0b; }

.dept-pbi-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 20px;
  color: var(--text-muted);
  font-size: var(--font-sm, 0.875rem);
  text-align: center;
}
.dept-pbi-empty-state svg { opacity: 0.4; }

/* Fullscreen mode */
.dept-pbi-section.dept-pbi-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  margin: 0;
  border-radius: 0;
  overflow: auto;
}
.dept-pbi-section.dept-pbi-fullscreen .dept-pbi-report {
  height: calc(100vh - 100px);
}

@media (max-width: 768px) {
  .dept-pbi-report { height: 400px; min-height: 300px; }
  .dept-pbi-section.dept-pbi-fullscreen .dept-pbi-report { height: calc(100vh - 80px); }
}

/* ═══════════════════════════════════════════════════════════
   Newsletters tab — HubSpot CampaignEmail browser
   ═══════════════════════════════════════════════════════════ */

.dept-section-meta {
  margin-left: auto;
  font-size: var(--font-xs, 0.75rem);
  color: var(--text-muted);
}

/* Filter bar — responsive grid */
.nl-filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px 14px;
  padding: 14px;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  margin-bottom: 14px;
}
.nl-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.nl-filter-group label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
  font-weight: 600;
}
.nl-filter-group select,
.nl-filter-group input {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--text-primary, #0f172a);
  min-width: 0;
}
.nl-filter-group.nl-filter-grow {
  grid-column: span 2;
}
.nl-filter-group.nl-filter-actions {
  align-self: end;
  justify-content: flex-end;
  flex-direction: row;
  gap: 12px;
  align-items: center;
}
.nl-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-primary, #0f172a);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.nl-checkbox input { margin: 0; }
.nl-dim { color: var(--text-muted, #94a3b8); }

.nl-btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border, #cbd5e1);
  background: var(--surface, #fff);
  color: var(--text-primary, #0f172a);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}
.nl-btn:hover { background: var(--surface-2, #f1f5f9); }
.nl-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.nl-btn.primary {
  background: linear-gradient(135deg, #ec4899, #db2777);
  color: #fff;
  border-color: transparent;
}
.nl-btn.primary:hover { filter: brightness(1.05); }

/* Recipient lookup */
.nl-recipient-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.nl-recipient-row label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
}
.nl-recipient-row input {
  flex: 1 1 240px;
  min-width: 200px;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 6px;
  background: var(--surface, #fff);
}
.nl-help {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  font-style: italic;
}

/* Newsletter table */
.nl-table-wrap { max-height: 60vh; overflow: auto; }
.nl-table { font-size: 13px; }
.nl-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2, #f8fafc);
  z-index: 1;
}
.nl-table tbody tr.nl-row { cursor: pointer; }
.nl-table tbody tr.nl-row:hover { background: var(--surface-2, #f1f5f9); }
.nl-table .mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.nl-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted, #64748b);
}

/* Modals */
.nl-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 24px;
}
.nl-modal-overlay[hidden] { display: none; }
.nl-modal {
  background: var(--surface, #fff);
  width: min(800px, 100%);
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(2, 6, 23, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.nl-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.nl-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}
.nl-modal-subtitle {
  font-size: 13px;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
}
.nl-modal-close {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  padding: 0 4px;
}
.nl-modal-close:hover { color: var(--text-primary, #0f172a); }
.nl-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
}
.nl-modal-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 13px;
  flex-wrap: wrap;
}
.nl-modal-controls input {
  padding: 4px 8px;
  font-size: 13px;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 6px;
  margin-left: 6px;
}

.nl-recipient-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.nl-recipient-input-row label { font-size: 13px; font-weight: 600; }
.nl-recipient-input-row input {
  flex: 1 1 220px;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 6px;
}

/* Modal stats strip */
.nl-modal-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 14px;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  margin-bottom: 14px;
}
.nl-stat { display: flex; flex-direction: column; min-width: 70px; }
.nl-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
  font-weight: 600;
}
.nl-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  font-variant-numeric: tabular-nums;
}

/* Event timeline */
.nl-event-timeline { font-size: 13px; }
.nl-event-list { list-style: none; margin: 0; padding: 0; }
.nl-event {
  display: grid;
  grid-template-columns: 150px 90px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
  word-break: break-word;
}
.nl-event:last-child { border-bottom: none; }
.nl-event-campaign {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--text-muted, #64748b);
  font-weight: 600;
}
.nl-event-time {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.nl-event-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  width: fit-content;
}
.nl-event-pill.ev-sent      { background: #e0e7ff; color: #3730a3; }
.nl-event-pill.ev-delivered { background: #d1fae5; color: #047857; }
.nl-event-pill.ev-open      { background: #dbeafe; color: #1d4ed8; }
.nl-event-pill.ev-click     { background: #fef3c7; color: #92400e; }
.nl-event-pill.ev-bounce    { background: #fee2e2; color: #b91c1c; }
.nl-event-pill.ev-unsub     { background: #fce7f3; color: #9d174d; }
.nl-event-pill.ev-soft      { background: #f1f5f9; color: #475569; }

.nl-event-detail {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  word-break: break-all;
}
.nl-event-detail a {
  color: #2563eb;
  text-decoration: none;
}
.nl-event-detail a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .nl-event { grid-template-columns: 1fr; }
  .nl-event-time { font-size: 11px; }
}

/* ──────────────────────────────────────────────────────────────────
   Newsletter Pulse view — KPI cards, trend chart, leaderboards
   ────────────────────────────────────────────────────────────────── */

/* Pulse / Browse segmented toggle */
.nl-view-toggle {
  display: inline-flex;
  background: var(--surface-2, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.nl-view-btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.nl-view-btn:hover { color: var(--text-primary, #0f172a); }
.nl-view-btn.active {
  background: var(--surface, #fff);
  color: var(--text-primary, #0f172a);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.nl-view { animation: nl-fade-in 0.18s ease-out; }
@keyframes nl-fade-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* KPI strip */
.nl-kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}
@media (max-width: 1100px) {
  .nl-kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .nl-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.nl-kpi-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 80px;
}
.nl-kpi-card[data-loading] { opacity: 0.5; }

.nl-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
  font-weight: 600;
}
.nl-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.nl-kpi-sub {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  font-variant-numeric: tabular-nums;
}
.nl-kpi-delta {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nl-kpi-delta.up    { color: #047857; }
.nl-kpi-delta.down  { color: #b91c1c; }
.nl-kpi-delta.flat  { color: #64748b; }
/* For bounce rate, "up" is bad. We flip semantics via .invert. */
.nl-kpi-delta.up.invert    { color: #b91c1c; }
.nl-kpi-delta.down.invert  { color: #047857; }

.nl-kpi-footnote {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  margin: 4px 2px 16px;
}

/* Trend chart */
.nl-trend-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 14px 16px 18px;
  margin-bottom: 18px;
}
.nl-trend-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 12px;
  flex-wrap: wrap;
}
.nl-trend-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}
.nl-trend-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text-muted, #64748b);
}
.nl-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.nl-legend-bar {
  width: 10px; height: 10px;
  background: #6366f1;
  border-radius: 2px;
  display: inline-block;
}
.nl-legend-line {
  width: 14px; height: 2px;
  background: #f59e0b;
  display: inline-block;
}
.nl-trend-chart {
  width: 100%;
  height: 220px;
  position: relative;
}
.nl-trend-chart svg {
  display: block;
  width: 100%;
  height: 100%;
}
.nl-trend-bar {
  fill: #6366f1;
  opacity: 0.85;
  transition: opacity 0.12s;
}
.nl-trend-bar:hover { opacity: 1; fill: #4f46e5; }
.nl-trend-line {
  fill: none;
  stroke: #f59e0b;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.nl-trend-axis {
  stroke: #cbd5e1;
  stroke-width: 1;
}
.nl-trend-grid {
  stroke: #e2e8f0;
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.nl-trend-axis-label {
  fill: #94a3b8;
  font-size: 10px;
  font-family: inherit;
}
.nl-trend-tooltip {
  position: absolute;
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  display: none;
  z-index: 10;
}
.nl-trend-tooltip strong { color: #fff; font-weight: 700; }

/* Two-column pulse grid */
.nl-pulse-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 900px) {
  .nl-pulse-grid { grid-template-columns: 1fr; }
}

.nl-pulse-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 12px 14px;
}
.nl-pulse-card-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  margin-bottom: 10px;
}
.nl-pulse-card-meta {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted, #94a3b8);
  letter-spacing: 0;
  text-transform: none;
}

/* Mini-tables (top brands / types) */
.nl-mini-table th,
.nl-mini-table td {
  padding: 6px 8px;
  font-size: 12px;
}
.nl-mini-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
}

/* Leader-list (top performers / biggest misses) */
.nl-leader-list { display: flex; flex-direction: column; gap: 6px; }
.nl-leader-row {
  display: grid;
  grid-template-columns: 64px 1fr 84px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-light, #f1f5f9);
  border-radius: 8px;
  background: var(--surface, #fff);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.nl-leader-row:hover {
  border-color: #c7d2fe;
  background: #f8faff;
}
.nl-leader-metric {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  font-variant-numeric: tabular-nums;
}
.nl-leader-metric.warn { color: #b91c1c; }
.nl-leader-body { min-width: 0; }
.nl-leader-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nl-leader-meta {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nl-leader-volume {
  text-align: right;
  font-size: 11px;
  color: var(--text-muted, #64748b);
  font-variant-numeric: tabular-nums;
}

/* Browse-view summary row (small bar above filter bar in browse mode) */
.nl-browse-summary-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════════
   Audience Builder (dept_audience.html)
   Scoped under .aud-* — no leakage into other dept pages.
   ═══════════════════════════════════════════════════════════ */

.aud-intro {
  font-size: var(--font-sm, 0.875rem);
  color: var(--text-secondary, #475569);
  line-height: 1.55;
  margin-bottom: 14px;
  max-width: 820px;
}

.aud-query-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.aud-query-input {
  width: 100%;
  min-height: 70px;
  padding: 12px 14px;
  font-size: var(--font-sm, 0.875rem);
  line-height: 1.5;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 6px);
  background: var(--bg-card, #fff);
  color: var(--text-primary, #0f172a);
  resize: vertical;
  transition: border-color 0.15s ease;
  font-family: inherit;
}
.aud-query-input:focus {
  outline: none;
  border-color: #06b6d4;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.12);
}
.aud-query-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.aud-control-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-xs, 0.75rem);
  color: var(--text-muted, #64748b);
}
.aud-control-input {
  width: 64px;
  padding: 4px 8px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 4px;
  font-size: var(--font-xs, 0.75rem);
  background: var(--bg-card, #fff);
  color: var(--text-primary, #0f172a);
}
.aud-control-toggle {
  cursor: pointer;
  user-select: none;
  padding: 4px 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px;
  background: #f1f5f9;
  color: #0f172a;
  transition: background 0.15s;
}
.aud-control-toggle:hover { background: #e2e8f0; }
.aud-control-toggle input[type="checkbox"] {
  margin: 0;
  accent-color: var(--accent-primary, #2563eb);
}
.aud-control-toggle:has(input[type="checkbox"]:checked) {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1e3a8a;
}
.aud-mini-stat-sector { background: #f0fdf4; border-color: #86efac; }
.aud-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.aud-preset-btn {
  padding: 5px 10px;
  font-size: var(--font-2xs, 0.6875rem);
  font-weight: 500;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-card, #fff);
  color: var(--text-secondary, #475569);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.aud-preset-btn:hover {
  border-color: #06b6d4;
  color: #0891b2;
  background: #ecfeff;
}
.aud-run-btn {
  margin-left: auto;
  padding: 8px 18px;
  font-size: var(--font-sm, 0.875rem);
  font-weight: 600;
  border: 0;
  border-radius: var(--radius, 6px);
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  color: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
}
.aud-run-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.aud-run-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.aud-secondary-btn {
  padding: 8px 14px;
  font-size: var(--font-xs, 0.75rem);
  font-weight: 500;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 6px);
  background: var(--bg-card, #fff);
  color: var(--text-secondary, #475569);
  cursor: pointer;
}
.aud-secondary-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.aud-secondary-btn:not(:disabled):hover { border-color: #06b6d4; color: #0891b2; }

.aud-status {
  padding: 10px 14px;
  border-radius: var(--radius, 6px);
  font-size: var(--font-xs, 0.75rem);
  margin-bottom: 14px;
  background: #f1f5f9;
  color: var(--text-secondary, #475569);
  border-left: 3px solid #94a3b8;
}
.aud-status-info { background: #eff6ff; border-left-color: #3b82f6; color: #1e40af; }
.aud-status-ok { background: #ecfdf5; border-left-color: #10b981; color: #065f46; }
.aud-status-warn { background: #fffbeb; border-left-color: #f59e0b; color: #92400e; }
.aud-status-error { background: #fef2f2; border-left-color: #ef4444; color: #991b1b; }

.aud-spin {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  margin-right: 8px;
  animation: aud-spin 0.7s linear infinite;
}
@keyframes aud-spin { to { transform: rotate(360deg); } }

.aud-summary {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 6px);
  background: var(--bg-card, #fff);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.aud-summary-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
  align-items: start;
}
.aud-summary-row:last-child { border-bottom: 0; }
.aud-summary-label {
  font-size: var(--font-2xs, 0.6875rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
  padding-top: 4px;
}
.aud-summary-value {
  font-size: var(--font-sm, 0.875rem);
  color: var(--text-primary, #0f172a);
  line-height: 1.5;
}
.aud-mute { color: var(--text-muted, #64748b); font-weight: 400; }

.aud-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.aud-chip {
  display: inline-block;
  padding: 3px 9px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: var(--font-2xs, 0.6875rem);
  font-weight: 500;
}
.aud-chip-more { background: #fff; color: var(--text-muted, #64748b); font-style: italic; }

.aud-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.aud-mini-stat {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 8px 10px;
}
.aud-mini-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  margin-bottom: 4px;
}
.aud-mini-stat-value {
  font-size: var(--font-base, 1rem);
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  font-family: 'JetBrains Mono', monospace;
}
.aud-mini-stat-tier { background: #ecfeff; border-color: #67e8f9; }

.aud-results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px;
  margin-bottom: 10px;
}
.aud-results-count {
  font-size: var(--font-sm, 0.875rem);
  color: var(--text-secondary, #475569);
}
.aud-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted, #64748b);
  background: var(--bg-card, #fff);
  border: 1px dashed var(--border, #e2e8f0);
  border-radius: var(--radius, 6px);
}

.aud-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aud-row {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 6px);
  background: var(--bg-card, #fff);
  padding: 12px 14px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.aud-row:hover {
  border-color: #67e8f9;
  transform: translateY(-1px);
}
.aud-row-head {
  display: grid;
  grid-template-columns: 36px 1fr 200px 220px auto;
  gap: 14px;
  align-items: center;
}
.aud-row-rank {
  font-size: var(--font-xs, 0.75rem);
  font-weight: 700;
  color: var(--text-muted, #64748b);
  font-family: 'JetBrains Mono', monospace;
  text-align: right;
}
.aud-row-name-line {
  font-size: var(--font-base, 1rem);
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.aud-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.aud-meta-pill {
  display: inline-block;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 500;
  background: #f1f5f9;
  border-radius: 3px;
  color: #475569;
}
.aud-meta-owner { background: #fef3c7; color: #92400e; }

.aud-tier {
  display: inline-block;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.aud-tier-a { background: #047857; color: #fff; }
.aud-tier-b { background: #0891b2; color: #fff; }
.aud-tier-c { background: #94a3b8; color: #fff; }

.aud-row-score {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aud-score-num {
  font-size: var(--font-lg, 1.125rem);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary, #0f172a);
}
.aud-score-bar {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}
.aud-score-fill {
  height: 100%;
  background: linear-gradient(90deg, #06b6d4, #0891b2);
  transition: width 0.3s ease;
}

.aud-row-stats {
  font-size: var(--font-xs, 0.75rem);
  color: var(--text-muted, #64748b);
  font-family: 'JetBrains Mono', monospace;
  text-align: right;
}

.aud-expand-btn {
  padding: 5px 12px;
  font-size: var(--font-2xs, 0.6875rem);
  font-weight: 500;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-card, #fff);
  color: var(--text-secondary, #475569);
  border-radius: 4px;
  cursor: pointer;
}
.aud-expand-btn:hover { border-color: #06b6d4; color: #0891b2; }

.aud-row-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #f1f5f9;
}
.aud-sig {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  border-radius: 3px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}
.aud-sig-pts {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #0891b2;
}
.aud-sig-tag { background: #ecfeff; border-color: #67e8f9; color: #155e75; }
.aud-sig-agency_function { background: #f0f9ff; border-color: #bae6fd; color: #075985; }
.aud-sig-bi_text { background: #faf5ff; border-color: #d8b4fe; color: #6b21a8; }
.aud-sig-semantic { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.aud-sig-award_category { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.aud-sig-sponsorship_history { background: #fdf2f8; border-color: #f9a8d4; color: #9d174d; }

.aud-row-excerpt {
  margin-top: 8px;
  padding: 8px 10px;
  background: #f8fafc;
  border-left: 3px solid #67e8f9;
  border-radius: 3px;
  font-size: var(--font-xs, 0.75rem);
  color: var(--text-secondary, #475569);
  line-height: 1.5;
  font-style: italic;
}

.aud-row-detail {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aud-detail-block {
  font-size: var(--font-xs, 0.75rem);
}
.aud-detail-h {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
  margin-bottom: 6px;
}
.aud-reason-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-primary, #0f172a);
  line-height: 1.55;
}
.aud-reason-list li { margin-bottom: 3px; }

.aud-ev-block {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.aud-ev-name {
  font-size: 11px;
  font-weight: 700;
  color: #0891b2;
  margin-bottom: 3px;
}
.aud-ev-detail {
  font-size: 11px;
  color: var(--text-secondary, #475569);
  margin-bottom: 5px;
}
.aud-ev-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.aud-ev-tag {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 3px;
  color: #475569;
}
.aud-ev-tag b { color: #1e293b; font-weight: 600; }

.aud-outreach {
  padding: 10px 12px;
  background: #ecfeff;
  border-left: 3px solid #06b6d4;
  border-radius: 3px;
  color: #155e75;
  font-size: var(--font-xs, 0.75rem);
  line-height: 1.55;
}

.aud-detail-id {
  font-size: 10px;
  color: var(--text-muted, #64748b);
}
.aud-detail-id code {
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}

@media (max-width: 1080px) {
  .aud-row-head {
    grid-template-columns: 28px 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 8px;
  }
  .aud-row-score, .aud-row-stats {
    grid-column: 1 / -1;
    text-align: left;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Gap Analysis tab — gap-* namespace
   Sibling of the aud-* styles. Reuses .aud-row / .aud-chip / .aud-status
   shells where possible and adds gap-specific tints + the inline
   ZoomInfo panel.
   ──────────────────────────────────────────────────────────────── */

/* Scope filter bar ─────────────────────────────────────────────────── */
.gap-scope-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.gap-scope-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-secondary, #f3f4f6);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
  transition: background 0.15s;
}
.gap-scope-toggle:hover {
  background: var(--bg-hover, #e9eaed);
  color: var(--text-primary, #111827);
}
.gap-scope-icon { font-size: 0.88em; }
.gap-scope-caret { font-size: 0.72em; }
.gap-scope-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}
.gap-scope-chip {
  background: var(--accent-subtle, #eff6ff);
  border: 1px solid var(--accent-border, #bfdbfe);
  color: var(--accent-text, #1d4ed8);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 0.73rem;
  font-weight: 500;
}
.gap-scope-panel {
  background: var(--bg-secondary, #f9fafb);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.gap-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}
.gap-scope-field { display: flex; flex-direction: column; gap: 4px; }
.gap-scope-label {
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gap-scope-actions { display: flex; justify-content: flex-end; }

/* Multiselect widget */
.gap-multiselect {
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 6px;
  background: var(--bg-primary, #fff);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.gap-multiselect-search {
  border: none;
  border-bottom: 1px solid var(--border, #e0e0e0);
  padding: 5px 8px;
  font-size: 0.78rem;
  outline: none;
  background: transparent;
}
.gap-multiselect-list {
  max-height: 140px;
  overflow-y: auto;
  padding: 4px 0;
}
.gap-ms-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 0.78rem;
  cursor: pointer;
  user-select: none;
}
.gap-ms-item:hover { background: var(--bg-hover, #f3f4f6); }
.gap-ms-item input[type=checkbox] { cursor: pointer; }

.gap-presets-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  flex-wrap: wrap;
}
.gap-presets-label {
  font-size: var(--font-xs, 0.75rem);
  font-weight: 600;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gap-presets-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gap-preset-chip {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: var(--font-xs, 0.75rem);
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.gap-preset-chip:hover {
  background: #f0f9ff;
  border-color: #38bdf8;
  transform: translateY(-1px);
}
.gap-preset-meta {
  font-weight: 400;
  color: var(--text-muted, #64748b);
  margin-left: 4px;
}

.gap-row {
  border-left: 3px solid #fb923c;
}

.gap-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.gap-zi-btn {
  white-space: nowrap;
  padding: 6px 12px !important;
}
.gap-inline-toggle {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  font-weight: bold;
}
.gap-inline-toggle[aria-expanded="true"] {
  background: #fef3c7;
  border-color: #fbbf24;
}

.gap-missing-pill {
  display: inline-block;
  padding: 2px 8px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fbbf24;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.gap-present-chip {
  display: inline-block;
  padding: 2px 8px;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #6ee7b7;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 6px;
}

/* reachable_count pill — only shown when it differs from total_contacts,
   indicating some contacts are excluded by privacy/reachable gate */
.gap-reachable-pill {
  background: #fef9c3;
  color: #713f12;
  border-color: #fde047;
  cursor: help;
}

.gap-rationale {
  margin-top: 8px;
  padding: 8px 10px;
  background: #f8fafc;
  border-left: 3px solid #fb923c;
  border-radius: 3px;
  color: #334155;
  font-size: var(--font-xs, 0.75rem);
  line-height: 1.55;
}

.gap-chip {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  color: #0369a1;
}

/* Inline ZoomInfo quick-search panel */
.gap-inline-zi {
  margin-top: 10px;
  padding: 10px 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 4px;
  font-size: var(--font-xs, 0.75rem);
}
.gap-inline-zi[hidden] {
  display: none;
}
.gap-inline-spin {
  font-style: italic;
  color: #9a3412;
}
.gap-inline-empty {
  color: #6b7280;
}
.gap-inline-head {
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #9a3412;
}
.gap-inline-link {
  color: #ea580c;
  text-decoration: underline;
  font-weight: 500;
}
.gap-inline-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #fed7aa;
  border-radius: 3px;
  overflow: hidden;
}
.gap-inline-table thead {
  background: #ffedd5;
}
.gap-inline-table th,
.gap-inline-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid #fde9c7;
  vertical-align: top;
}
.gap-inline-table tbody tr:last-child td {
  border-bottom: none;
}

/* Campaign List tab — cl-* namespace */
.cl-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.cl-row {
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--bg-surface, #fff);
}
.cl-row-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.cl-row-title { flex: 1; min-width: 200px; }
.cl-source-chips { margin-left: 8px; }
.aud-chip-pipeline { background: #ecfdf5; border-color: #6ee7b7; color: #047857; }
.aud-chip-prospect { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.cl-multi-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}
.cl-row-meta {
  font-size: var(--font-xs, 0.75rem);
  color: var(--text-muted, #64748b);
  margin: 4px 0 8px;
}
.cl-row-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 900px) {
  .cl-row-body { grid-template-columns: 1fr; }
}
.cl-col-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
  margin-bottom: 4px;
}
.cl-mini-list {
  margin: 0;
  padding-left: 16px;
  font-size: var(--font-xs, 0.75rem);
  line-height: 1.5;
}
.cl-contact-email { font-size: var(--font-xs, 0.75rem); color: var(--text-muted, #64748b); }
.cl-rationale {
  margin-top: 8px;
  font-size: var(--font-xs, 0.75rem);
  color: #475569;
  border-left: 3px solid #6b8e60;
  padding-left: 8px;
}

/* Sponsor Registrations tab (/dept/cs?tab=sponsor-registrations) */
.dept-sr-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  gap: 12px;
  color: var(--text-muted);
  font-size: 13px;
}
.dept-sr-empty-state {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.dept-sr-empty-title {
  font-size: 14px;
  color: var(--warning, #d97706);
  margin-bottom: 8px;
}
.dept-sr-body { padding: 4px 0 8px; }
.dept-sr-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 8px 0 12px;
  flex-wrap: wrap;
}
.dept-sr-subtitle {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  max-width: 640px;
}
.dept-sr-kpis {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-secondary);
}
.dept-sr-kpi-highlight { color: var(--accent, #6b8e60); font-weight: 600; }
.dept-sr-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 16px;
  flex-wrap: wrap;
}
.dept-sr-search-wrap {
  display: flex;
  align-items: center;
  background: var(--bg-secondary, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  padding: 0 10px;
  flex: 1;
  max-width: 320px;
}
.dept-sr-search-wrap svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.dept-sr-search {
  background: none;
  border: none;
  color: var(--text-primary);
  padding: 7px 8px;
  font-size: 13px;
  width: 100%;
  outline: none;
}
.dept-sr-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.dept-sr-grid {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 18px;
  align-items: flex-start;
}
.dept-sr-list {
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 72vh;
  overflow: auto;
  background: var(--bg-card, #fff);
}
.dept-sr-acct-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.dept-sr-acct-row:hover { background: var(--surface-2, rgba(0,0,0,0.03)); }
.dept-sr-acct-row.active {
  background: rgba(107, 142, 96, 0.08);
  border-left: 3px solid var(--accent, #6b8e60);
}
.dept-sr-acct-name { font-weight: 600; font-size: 13px; }
.dept-sr-acct-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.dept-sr-overlap-pill {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(107, 142, 96, 0.15);
  color: var(--accent, #6b8e60);
  font-weight: 600;
}
.dept-sr-detail { min-height: 200px; }
.dept-sr-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: 6px;
}
.dept-sr-detail-head { margin-bottom: 12px; }
.dept-sr-detail-head h3 { margin: 0 0 6px; font-size: 16px; }
.dept-sr-detail-kpis {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.dept-sr-events { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.dept-sr-event-chip {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card, #fff);
  cursor: pointer;
  color: var(--text-secondary);
}
.dept-sr-event-chip.active {
  border-color: var(--accent, #6b8e60);
  background: rgba(107, 142, 96, 0.1);
  color: var(--accent, #6b8e60);
}
.dept-sr-event-clear { font-style: italic; }
.dept-sr-table-wrap {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: auto;
  max-height: 60vh;
}
.dept-sr-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dept-sr-table th {
  position: sticky;
  top: 0;
  background: var(--surface-2, #f6f7f9);
  text-align: left;
  padding: 8px 10px;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.dept-sr-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.dept-sr-row-overlap { background: rgba(107, 142, 96, 0.04); }
.dept-sr-muted { font-size: 11px; color: var(--text-muted); }
.dept-sr-select {
  margin-left: 6px;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card, #fff);
}
.dept-sr-expand-cell { width: 28px; text-align: center; vertical-align: middle; }
.dept-sr-expand-btn {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--accent, #6b8e60);
  font-size: 10px;
  padding: 2px 4px;
}
.dept-sr-overlap-btn { border: none; cursor: pointer; }
.dept-sr-prior-detail-row td { background: rgba(107, 142, 96, 0.03); padding: 0 !important; }
.dept-sr-prior-panel { padding: 10px 14px 12px 36px; }
.dept-sr-prior-panel-title { font-size: 11px; font-weight: 600; margin-bottom: 6px; color: var(--text-secondary); }
.dept-sr-prior-list { margin: 0; padding-left: 18px; font-size: 12px; }
.dept-sr-prior-list li { margin-bottom: 4px; }
.dept-sr-prior-cat {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--surface-2, #f0f0f0);
  margin-right: 6px;
  color: var(--text-muted);
}
.dept-sr-row-expanded > td { border-bottom: none; }
.dept-sr-horizon-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(107, 142, 96, 0.1);
  color: var(--accent, #6b8e60);
  white-space: nowrap;
}
.dept-sr-horizon-badge--all { background: rgba(34, 197, 94, 0.12); color: #15803d; }
.dept-sr-show-all-toggle { margin-left: auto; }
.dept-sr-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.dept-sr-modal {
  width: min(420px, 100%);
  background: var(--bg-card, #fff);
  border-radius: 8px;
  padding: 20px 22px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.dept-sr-modal h4 { margin: 0 0 8px; font-size: 15px; }
.dept-sr-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ═══════════════════════════════════════════════════════════
   Navigator Subscription-Usage report (nav-rep- prefix)
   ═══════════════════════════════════════════════════════════ */
.nav-rep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.nav-rep-chart { min-height: 60px; }

/* Overview "omniscience" breadth tiles */
.nav-ov-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.nav-ov-tile {
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 14px 16px;
}
.nav-ov-tile-v {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text, #0f172a);
}
.nav-ov-tile-l {
  font-size: var(--font-xs, 0.75rem);
  color: var(--text-muted, #64748b);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.nav-ov-tile-s {
  font-size: var(--font-xs, 0.7rem);
  color: var(--text-subtle, #94a3b8);
  margin-top: 3px;
}

/* horizontal bar list */
.nav-rep-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
}
.nav-rep-bar-label {
  flex: 0 0 150px;
  font-size: var(--font-xs, 0.75rem);
  color: var(--text-secondary, #475569);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-rep-bar-track {
  flex: 1 1 auto;
  height: 14px;
  background: var(--bg-subtle, rgba(148, 163, 184, 0.18));
  border-radius: 7px;
  overflow: hidden;
}
.nav-rep-bar-fill { height: 100%; border-radius: 7px; transition: width .3s ease; }
.nav-rep-bar-value {
  flex: 0 0 70px;
  text-align: right;
  font-size: var(--font-xs, 0.75rem);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* monthly column chart */
.nav-rep-legend { display: flex; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
.nav-rep-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--font-xs, 0.75rem); color: var(--text-muted);
}
.nav-rep-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.nav-rep-months {
  display: flex; align-items: flex-end; gap: 6px;
  height: 180px; overflow-x: auto; padding-bottom: 4px;
}
.nav-rep-month { display: flex; flex-direction: column; align-items: center; min-width: 34px; height: 100%; }
.nav-rep-mbars { display: flex; align-items: flex-end; gap: 2px; height: 150px; }
.nav-rep-mbar { width: 7px; border-radius: 2px 2px 0 0; min-height: 2px; }
.nav-rep-mlabel {
  margin-top: 6px; font-size: 10px; color: var(--text-muted);
  white-space: nowrap; transform: rotate(-35deg); transform-origin: top right;
}

/* tier definitions explainer — "what each category means", always visible */
.nav-tier-explain { margin: 0 0 14px; }
.nav-tier-basis {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 9px 12px; margin-bottom: 10px;
  font-size: 12px; line-height: 1.45; color: var(--text-secondary, #475569);
  background: var(--bg-subtle, rgba(148, 163, 184, 0.10));
  border: 1px solid var(--border, #e2e8f0);
  border-left: 3px solid #3b82f6; border-radius: 8px;
}
.nav-tier-basis-ic { color: #3b82f6; font-weight: 700; flex: 0 0 auto; }
.nav-tier-defrow { display: flex; gap: 8px 18px; flex-wrap: wrap; }
.nav-tier-def {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-secondary, #475569); line-height: 1.3;
}
.nav-tier-def b { color: var(--text-primary); font-weight: 600; }
.nav-tier-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.nav-tier-why { margin-top: 3px; font-size: 10.5px; color: var(--text-muted); line-height: 1.3; }
.nav-dr-kpi-sub { margin-top: 3px; font-size: 10px; color: var(--text-muted); line-height: 1.25; }

/* tier summary cards */
.nav-rep-tier-card { cursor: help; }
.nav-rep-tier-cards { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.nav-rep-tier-card {
  flex: 1 1 130px;
  border: 1px solid var(--border, #e2e8f0);
  border-left-width: 4px;
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--bg-card, #fff);
}
.nav-rep-tier-count { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.nav-rep-tier-label { margin-top: 4px; font-size: var(--font-xs, 0.75rem); color: var(--text-muted); }

/* toolbar (search + filter) */
.nav-rep-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.nav-rep-input {
  padding: 7px 11px;
  font-size: var(--font-sm, 0.875rem);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--bg-card, #fff);
  color: var(--text-primary);
}
.nav-rep-count { font-size: var(--font-xs, 0.75rem); color: var(--text-muted); margin-left: auto; }

/* pills + account cell */
.nav-rep-pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap;
}
.nav-rep-acct { font-weight: 600; color: var(--text-primary); }
.nav-rep-sub { font-size: 11px; color: var(--text-muted); }

/* scope toolbar (account / application / range) */
.nav-rep-scope {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px;
  background: var(--bg-subtle, rgba(148, 163, 184, 0.10));
  border: 1px solid var(--border, #e2e8f0); border-radius: 10px;
}
.nav-rep-scope-label {
  font-size: var(--font-xs, 0.75rem); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.nav-rep-scope #scope-account-input { min-width: 260px; }
.nav-rep-chip-btn {
  padding: 6px 12px; font-size: var(--font-xs, 0.75rem); font-weight: 600;
  border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
  background: var(--bg-card, #fff); color: var(--text-secondary); cursor: pointer;
}
.nav-rep-chip-btn:hover { background: var(--bg-subtle, rgba(148, 163, 184, 0.18)); }

/* sortable table headers */
.nav-rep-sortable thead th.sortable { cursor: pointer; user-select: none; position: relative; }
.nav-rep-sortable thead th.sortable:hover { color: var(--text-primary); }
.nav-rep-sortable thead th.sort-asc::after { content: " ▲"; font-size: 9px; opacity: .8; }
.nav-rep-sortable thead th.sort-desc::after { content: " ▼"; font-size: 9px; opacity: .8; }

/* expandable aggregate bars */
.nav-rep-bar-row.expandable { cursor: pointer; border-radius: 6px; }
.nav-rep-bar-row.expandable:hover { background: var(--bg-subtle, rgba(148, 163, 184, 0.12)); }
.nav-rep-caret { display: inline-block; width: 12px; font-size: 9px; color: var(--text-muted); transition: transform .15s ease; }
.nav-rep-bar-row.expandable.open .nav-rep-caret { transform: rotate(90deg); }
.nav-rep-bar-detail { margin: 2px 0 8px 18px; padding-left: 10px; border-left: 2px solid var(--border, #e2e8f0); }
.nav-rep-bar-row.sub { margin: 3px 0; }
.nav-rep-bar-row.sub .nav-rep-bar-label { flex-basis: 140px; font-size: 11px; }

/* renewal due-in buckets (replaces the by-month bar chart) */
.nav-rep-buckets { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.nav-rep-bucket {
  flex: 1 1 130px; border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px; padding: 12px 14px; background: var(--bg-card, #fff);
}
.nav-rep-bucket-count { font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--accent-amber, #f59e0b); }
.nav-rep-bucket-label { margin-top: 4px; font-size: var(--font-xs, 0.75rem); color: var(--text-muted); }

/* ===== Accounts tab — click-to-filter chrome ===== */
.nav-rep-tier-card { cursor: pointer; transition: box-shadow .12s ease, transform .12s ease; }
.nav-rep-tier-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.nav-rep-tier-card.on { box-shadow: 0 0 0 2px var(--accent-blue, #3b82f6) inset; }
.nav-rep-bucket { cursor: pointer; transition: box-shadow .12s ease; }
.nav-rep-bucket:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.nav-rep-bucket.on { box-shadow: 0 0 0 2px var(--accent-amber, #f59e0b) inset; }
.nav-rep-chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.nav-rep-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  font-size: var(--font-xs, 0.75rem); font-weight: 600;
  border: 1px solid var(--chip, #94a3b8); color: var(--chip, #94a3b8);
  background: transparent;
}
.nav-rep-chip:hover { background: color-mix(in srgb, var(--chip, #94a3b8) 12%, transparent); }
.nav-rep-chip.on { background: var(--chip, #94a3b8); color: #fff; }
.nav-rep-chip-n { font-weight: 700; opacity: .85; }
.nav-rep-filters { font-size: var(--font-xs, 0.75rem); color: var(--text-muted); }
.nav-rep-filters a { color: var(--accent-blue, #3b82f6); text-decoration: none; margin-left: 4px; }

/* clickable account rows */
tr.nav-rep-clickable { cursor: pointer; }
tr.nav-rep-clickable:hover { background: var(--bg-subtle, rgba(148, 163, 184, 0.10)); }
tr.nav-rep-clickable .nav-rep-acct .nav-rep-caret { margin-right: 4px; transition: transform .15s ease; }
tr.nav-rep-clickable.open .nav-rep-acct .nav-rep-caret { transform: rotate(90deg); }
td.due-30 { color: #ef4444; font-weight: 700; }
td.due-60 { color: #f59e0b; font-weight: 600; }
td.due-90 { color: #3b82f6; }

/* ===== Account drawer ===== */
.nav-rep-drawer-row > td { padding: 0 !important; background: var(--bg-subtle, rgba(148,163,184,0.06)); }
.nav-rep-drawer { padding: 16px 18px; border-top: 2px solid var(--accent-blue, #3b82f6); }
.nav-dr-kpis { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.nav-dr-kpi { min-width: 110px; }
.nav-dr-kpi-v { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.nav-dr-kpi-l { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-top: 2px; }
.nav-dr-actions { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.nav-dr-btn {
  padding: 6px 12px; border-radius: 8px; font-size: var(--font-xs, .75rem); font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  background: var(--accent-blue, #3b82f6); color: #fff;
}
.nav-dr-btn.ghost { background: transparent; border-color: var(--border, #e2e8f0); color: var(--text-secondary); }
.nav-dr-btn:hover { filter: brightness(1.05); }
.nav-dr-owner { font-size: var(--font-xs, .75rem); color: var(--text-muted); margin-left: auto; }
.nav-dr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.nav-dr-card {
  border: 1px solid var(--border, #e2e8f0); border-radius: 10px;
  padding: 12px 14px; background: var(--bg-card, #fff);
}
.nav-dr-card.wide { grid-column: 1 / -1; }
.nav-dr-card-h { font-size: var(--font-xs, .75rem); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 8px; }
.nav-dr-note { font-size: var(--font-sm, .875rem); color: var(--text-secondary); }

/* product cards */
.nav-dr-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.nav-dr-prod { border: 1px solid var(--border, #e2e8f0); border-radius: 8px; padding: 10px; background: var(--bg-subtle, rgba(148,163,184,0.05)); }
.nav-dr-prod-h { font-weight: 700; font-size: var(--font-sm, .875rem); display: flex; flex-direction: column; gap: 2px; }
.nav-dr-prod-st { font-size: 11px; font-weight: 600; color: var(--accent-green, #10b981); }
.nav-dr-prod-tier { align-self: flex-start; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; letter-spacing: .02em; }
.nav-dr-prod-m { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--text-secondary); }
.nav-dr-prod-x { margin-top: 6px; font-size: 11px; color: var(--accent-amber, #f59e0b); font-weight: 600; }

/* mini bars */
.nav-dr-bar { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.nav-dr-bar-l { flex: 0 0 130px; font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-dr-bar-t { flex: 1; height: 8px; background: var(--bg-subtle, rgba(148,163,184,0.18)); border-radius: 4px; overflow: hidden; }
.nav-dr-bar-f { height: 100%; border-radius: 4px; }
.nav-dr-bar-v { flex: 0 0 auto; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.nav-dr-bar-sub { color: var(--text-muted); font-size: 10px; }

/* expandable content-category bars (break into content_label subtypes) */
.nav-dr-cat.expandable { cursor: pointer; border-radius: 6px; padding: 1px 2px; margin-left: -2px; }
.nav-dr-cat.expandable:hover { background: var(--bg-subtle, rgba(148, 163, 184, 0.12)); }
.nav-dr-cat .nav-rep-caret { transform: rotate(0); }
.nav-dr-cat.expandable.open .nav-rep-caret { transform: rotate(90deg); }
.nav-dr-cat-detail { margin: 2px 0 8px 20px; padding-left: 10px; border-left: 2px solid var(--border, #e2e8f0); }
.nav-dr-cat-sub .nav-dr-bar-l { flex-basis: 150px; font-size: 10.5px; color: var(--text-muted); }

/* sparkline + trend */
.nav-dr-spark { display: flex; align-items: flex-end; gap: 3px; height: 36px; margin-top: 8px; }
.nav-dr-spark-b { flex: 1; min-width: 4px; background: var(--accent-blue, #3b82f6); border-radius: 2px 2px 0 0; opacity: .8; }
.nav-dr-trend-row { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--font-sm, .875rem); color: var(--text-secondary); }
.nav-dr-trend-row b { color: var(--text-primary); }
.nav-dr-yoy { font-size: 10px; font-weight: 700; }
.nav-dr-yoy.up { color: var(--accent-green, #10b981); }
.nav-dr-yoy.down { color: #ef4444; }

/* readers (per-user reading swim) */
.nav-dr-readers { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.nav-dr-reader { border: 1px solid var(--border, #e2e8f0); border-radius: 8px; padding: 8px 10px; }
.nav-dr-reader-h { font-size: var(--font-sm, .875rem); }
.nav-dr-reader-id { font-weight: 700; color: var(--accent-blue, #3b82f6); }
.nav-dr-reader-v { display: block; font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.nav-dr-reader-top { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.nav-dr-reader-topics { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.nav-dr-topic-pill {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 9px;
  background: rgba(99,102,241,0.12);
  color: #4f46e5;
  white-space: nowrap;
}

/* generic lists */
.nav-dr-list .nav-dr-li, .nav-dr-li { font-size: var(--font-sm, .875rem); padding: 4px 0; border-bottom: 1px solid var(--border-subtle, rgba(148,163,184,0.12)); }
.nav-dr-li:last-child { border-bottom: none; }
.nav-dr-li-r { float: right; font-size: 11px; color: var(--text-muted); }
.nav-dr-li-sub { font-size: 11px; color: var(--text-secondary, #94a3b8); font-style: italic; margin-top: 1px; }
.nav-dr-list.nav-dr-flag-bad { border-left: 3px solid #ef4444; padding-left: 8px; }
.nav-dr-list.nav-dr-flag-warn { border-left: 3px solid #f59e0b; padding-left: 8px; }
.nav-dr-list.nav-dr-scroll { max-height: 340px; overflow-y: auto; padding-right: 4px; }

/* SHAP waterfall */
.nav-dr-shap { margin-bottom: 12px; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 12px 14px; background: var(--bg-card, #fff); }
.nav-dr-shap-h { font-size: var(--font-xs, .75rem); font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.nav-dr-shap-key { color: var(--text-muted); font-weight: 400; }
.nav-dr-shap-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.nav-dr-shap-l { flex: 0 0 240px; font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-dr-shap-av { color: var(--text-muted); }
.nav-dr-shap-t { flex: 1; height: 8px; background: var(--bg-subtle, rgba(148,163,184,0.15)); border-radius: 4px; overflow: hidden; display: flex; }
.nav-dr-shap-f { height: 100%; border-radius: 4px; }
.nav-dr-shap-f.pos { background: var(--accent-green, #10b981); }
.nav-dr-shap-f.neg { background: #ef4444; }
.nav-dr-shap-v { flex: 0 0 56px; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
.nav-dr-shap-v.pos { color: var(--accent-green, #10b981); }
.nav-dr-shap-v.neg { color: #ef4444; }
.nav-dr-shap-narr { margin-top: 8px; font-size: var(--font-sm, .875rem); color: var(--text-secondary); font-style: italic; }

/* =========================================================================
   Navigator cockpit — Market momentum, Reading correlation heatmap, Save List
   ========================================================================= */

/* Segmented toggle (shared by Market + Reading) */
.nav-mkt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 12px; }
.nav-seg { display: inline-flex; align-items: center; gap: 2px; background: var(--surface-2, #f1f5f9); border: 1px solid var(--border, #e2e8f0); border-radius: 9px; padding: 3px; }
.nav-seg-cap { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 0 8px 0 6px; }
.nav-seg-btn { border: none; background: transparent; color: var(--text-secondary); font-size: var(--font-xs, .75rem); font-weight: 600; padding: 5px 11px; border-radius: 7px; cursor: pointer; transition: background .12s ease, color .12s ease; }
.nav-seg-btn:hover { color: var(--text-primary); }
.nav-seg-btn.active { background: var(--bg-card, #fff); color: var(--accent-blue, #3b82f6); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.nav-mkt-hint { font-size: 11px; color: var(--text-muted); }

/* Movers strips */
.nav-mkt-movers { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.nav-mkt-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nav-mkt-strip-t { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-right: 4px; }
.nav-mkt-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--border, #e2e8f0); background: var(--surface-2, #f8fafc); }
.nav-mkt-chip.up { border-color: rgba(16,185,129,.4); }
.nav-mkt-chip.down { border-color: rgba(239,68,68,.4); }

/* Momentum list */
.nav-mkt-list { display: flex; flex-direction: column; }
.nav-mkt-row { display: flex; align-items: center; gap: 12px; padding: 7px 6px; border-bottom: 1px solid var(--border-subtle, rgba(148,163,184,0.12)); }
.nav-mkt-row.has-kids { cursor: pointer; }
.nav-mkt-row.has-kids:hover { background: var(--surface-2, #f8fafc); }
.nav-mkt-row.child { padding-left: 26px; background: var(--bg-subtle, rgba(148,163,184,0.04)); }
.nav-mkt-caret { display: inline-block; width: 12px; font-size: 9px; color: var(--text-muted); transition: transform .15s ease; }
.nav-mkt-row.open .nav-mkt-caret { transform: rotate(90deg); }
.nav-mkt-name { flex: 1; min-width: 0; font-size: var(--font-sm, .875rem); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-mkt-par { font-size: 10px; color: var(--text-subtle, #94a3b8); margin-left: 6px; }
.nav-mkt-views { flex: 0 0 64px; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--font-sm, .875rem); color: var(--text-secondary); }
.nav-mkt-spark { flex: 0 0 90px; display: flex; align-items: flex-end; gap: 2px; height: 24px; }
.nav-mkt-spark i { flex: 1; min-width: 2px; background: linear-gradient(to top, var(--accent-blue, #6366f1), rgba(99,102,241,.5)); border-radius: 1px; }
.nav-mkt-delta { flex: 0 0 64px; text-align: right; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nav-mkt-delta.up { color: var(--accent-green, #10b981); }
.nav-mkt-delta.down { color: #ef4444; }
.nav-mkt-delta.flat { color: var(--text-muted); font-weight: 500; }

/* Category → real opportunity records drill-down */
.nav-mkt-row.opp-row { cursor: pointer; }
.nav-mkt-row.opp-row:hover { background: var(--surface-2, #f8fafc); }
.nav-mkt-opp-caret { display: inline-block; width: 11px; font-size: 9px; color: var(--accent-blue, #6366f1); transition: transform .15s ease; margin-right: 2px; }
.nav-mkt-row.opp-open .nav-mkt-opp-caret { transform: rotate(90deg); }
.nav-mkt-opps { padding: 4px 6px 10px 30px; background: var(--bg-subtle, rgba(148,163,184,0.05)); border-bottom: 1px solid var(--border-subtle, rgba(148,163,184,0.12)); }
.nav-mkt-opps-hd { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-subtle, #94a3b8); padding: 4px 0 6px; }
.nav-mkt-opps-note { font-size: var(--font-sm, .875rem); color: var(--text-muted); padding: 6px 0; }
.nav-mkt-opp { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; border-top: 1px solid var(--border-subtle, rgba(148,163,184,0.08)); }
.nav-mkt-opp-title { flex: 1; min-width: 0; font-size: var(--font-sm, .875rem); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-mkt-opp-title a { color: var(--accent-blue, #3b82f6); text-decoration: none; }
.nav-mkt-opp-title a:hover { text-decoration: underline; }
.nav-mkt-opp-meta { flex: 0 0 auto; max-width: 45%; font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-mkt-opp-views { flex: 0 0 74px; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-muted); }

/* Reading correlation heatmap (mirrors the editorial mp-heatmap pattern) */
.mp-heatmap-wrap { overflow-x: auto; }
.mp-heatmap { display: grid; gap: 3px; min-width: 560px; font-size: 11px; }
.mp-heatmap-corner { font-weight: 600; color: var(--text-muted); padding: 6px 4px; align-self: end; }
.mp-heatmap-col { text-align: center; font-weight: 600; color: var(--text-secondary); padding: 8px 4px; white-space: nowrap; }
.mp-heatmap-row-label { font-weight: 600; color: var(--text-primary); display: flex; align-items: center; padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-heatmap-row-label.expandable { cursor: pointer; }
.mp-heatmap-row-label.expandable:hover { color: var(--accent-blue, #3b82f6); }
.mp-heatmap-cell { border-radius: 4px; min-height: 30px; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-primary); transition: transform .12s ease, box-shadow .12s ease; }
.mp-heatmap-cell.nav-rd-cell { cursor: pointer; }
.mp-heatmap-cell.nav-rd-cell:hover { transform: scale(1.06); box-shadow: 0 2px 8px rgba(0,0,0,.18); z-index: 1; }
.mp-heatmap-cell.empty { background: var(--bg-tertiary, rgba(128,128,128,0.08)); color: transparent; }

/* Cell drill-down list */
.nav-rd-drill { margin-top: 14px; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 12px 14px; background: var(--bg-card, #fff); }
.nav-rd-drill-h { font-size: var(--font-sm, .875rem); color: var(--text-secondary); margin-bottom: 8px; }
.nav-rd-drill-h a { float: right; color: var(--text-muted); text-decoration: none; font-size: 11px; }
.nav-rd-drill-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px; max-height: 320px; overflow-y: auto; }
.nav-rd-drill-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border-subtle, rgba(148,163,184,0.16)); border-radius: 8px; cursor: pointer; font-size: var(--font-xs, .75rem); }
.nav-rd-drill-row:hover { border-color: var(--accent-blue, #3b82f6); background: var(--surface-2, #f8fafc); }
.nav-rd-drill-n { flex: 1; min-width: 0; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-rd-drill-m { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nav-rd-drill-csm { color: var(--text-subtle, #94a3b8); }

/* Save List — quadrant + repair cards */
.nav-sv-split { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .nav-sv-split { grid-template-columns: 1fr; } }
.nav-sv-quad-wrap { position: sticky; top: 12px; }
.nav-sv-quad-title { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.nav-sv-quad { position: relative; width: 100%; aspect-ratio: 1 / 1; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; background:
  linear-gradient(to right, rgba(239,68,68,.05), rgba(16,185,129,.04)); overflow: hidden; }
.nav-sv-quad-band { position: absolute; left: 0; top: 0; width: 50%; height: 50%; background: rgba(99,102,241,.07); border-right: 1px dashed rgba(99,102,241,.3); border-bottom: 1px dashed rgba(99,102,241,.3); }
.nav-sv-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, 50%); cursor: pointer; border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.nav-sv-dot.repair { background: #6366f1; width: 12px; height: 12px; }
.nav-sv-dot.other { background: #94a3b8; opacity: .7; }
.nav-sv-dot:hover { transform: translate(-50%, 50%) scale(1.5); z-index: 2; }
.nav-sv-ax-x { position: absolute; bottom: 4px; right: 8px; font-size: 9px; color: var(--text-subtle, #94a3b8); }
.nav-sv-ax-y { position: absolute; top: 6px; left: 6px; font-size: 9px; color: var(--text-subtle, #94a3b8); writing-mode: vertical-rl; }
.nav-sv-quad-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 11px; color: var(--text-muted); }
.nav-sv-quad-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.nav-sv-quad-legend .repair { background: #6366f1; }
.nav-sv-quad-legend .other { background: #94a3b8; }

.nav-sv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.nav-sv-card { border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: 13px 15px; background: var(--bg-card, #fff); cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; border-left: 3px solid #6366f1; }
.nav-sv-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); transform: translateY(-2px); border-left-color: #4f46e5; }
.nav-sv-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav-sv-card-n { font-weight: 700; color: var(--text-primary); font-size: var(--font-sm, .9rem); }
.nav-sv-card-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.nav-sv-lev { display: flex; align-items: center; gap: 8px; margin: 9px 0 6px; }
.nav-sv-lev-l { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); flex: 0 0 auto; }
.nav-sv-lev-t { flex: 1; height: 7px; background: var(--bg-subtle, rgba(148,163,184,0.18)); border-radius: 4px; overflow: hidden; }
.nav-sv-lev-f { height: 100%; border-radius: 4px; background: linear-gradient(to right, #6366f1, #14b8a6); }
.nav-sv-lev-v { font-size: 11px; font-weight: 700; color: var(--accent-blue, #4f46e5); font-variant-numeric: tabular-nums; }
.nav-sv-cats { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.nav-sv-cat { font-size: 10px; padding: 2px 8px; border-radius: 9px; background: rgba(99,102,241,0.1); color: #4f46e5; }
.nav-sv-plays { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.nav-sv-play { font-size: var(--font-xs, .75rem); color: var(--text-secondary); line-height: 1.4; display: flex; gap: 6px; }
.nav-sv-play span { flex: 0 0 auto; }
.nav-sv-play.wins { color: var(--text-primary); }

/* ---- Global active-only toggle ----------------------------------------- */
.nav-global-scope { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; flex-wrap: wrap; }
.nav-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.nav-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.nav-toggle-track { width: 38px; height: 21px; border-radius: 12px; background: var(--border, #cbd5e1); position: relative; transition: background .15s ease; flex: 0 0 auto; }
.nav-toggle-knob { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease; }
.nav-toggle input:checked + .nav-toggle-track { background: var(--accent-blue, #3b82f6); }
.nav-toggle input:checked + .nav-toggle-track .nav-toggle-knob { transform: translateX(17px); }
.nav-toggle-label { font-size: var(--font-sm, .85rem); font-weight: 600; color: var(--text-primary); }
.nav-global-note { font-size: 11px; color: var(--text-muted); }

/* ---- Market Opportunities: resolved solicitation records --------------- */
.nav-opp-list { display: flex; flex-direction: column; gap: 7px; }
.nav-opp-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border: 1px solid var(--border, #e2e8f0); border-radius: 9px; background: var(--bg-card, #fff); }
.nav-opp-ic { font-size: 16px; flex: 0 0 auto; line-height: 1.4; }
.nav-opp-main { flex: 1; min-width: 0; }
.nav-opp-title { font-weight: 600; font-size: var(--font-sm, .88rem); color: var(--text-primary); }
.nav-opp-title a { color: var(--accent-blue, #3b82f6); text-decoration: none; }
.nav-opp-title a:hover { text-decoration: underline; }
.nav-opp-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nav-opp-cat { padding: 1px 7px; border-radius: 8px; background: rgba(99,102,241,0.1); color: #4f46e5; }
.nav-opp-right { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.nav-opp-amt { font-weight: 700; color: #059669; font-size: var(--font-sm, .85rem); font-variant-numeric: tabular-nums; }
.nav-opp-views { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nav-opp-attr { margin-top: 12px; padding: 10px 13px; border-radius: 9px; background: var(--bg-subtle, rgba(148,163,184,0.1)); font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; }
.nav-opp-attr-ic { margin-right: 5px; }

/* ---- Champions & power users ------------------------------------------- */
.nav-ch-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.nav-ch-kpi { border: 1px solid var(--border, #e2e8f0); border-top: 3px solid #6366f1; border-radius: 10px; padding: 11px 13px; background: var(--bg-card, #fff); }
.nav-ch-kpi-v { font-size: 1.55rem; font-weight: 800; color: var(--text-primary); line-height: 1; font-variant-numeric: tabular-nums; }
.nav-ch-kpi-l { font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-top: 4px; }
.nav-ch-kpi-s { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.nav-ch-signals { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.nav-ch-mini { font-size: 10px; color: var(--text-muted); }
.nav-ch-none { font-size: 11px; color: var(--text-subtle, #94a3b8); font-style: italic; }
.nav-ch-same { font-size: 10px; color: #059669; font-weight: 600; }
.nav-ch-diff { font-size: 10px; color: #8b5cf6; font-weight: 700; }
.nav-ch-glossary { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 14px; padding: 10px 12px; background: var(--bg-muted, #f8fafc); border: 1px solid var(--border, #e2e8f0); border-radius: 10px; }
.nav-ch-gloss { display: flex; flex-direction: column; gap: 3px; max-width: 280px; }
.nav-ch-gloss-b { font-size: 11px; color: var(--text-secondary, #64748b); line-height: 1.35; }
.nav-ch-gloss-b em { font-style: normal; font-weight: 600; color: var(--text-primary); }
.nav-ch-role { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; padding: 2px 7px; border-radius: 999px; margin-right: 4px; }
.nav-ch-role.champion { background: #e0e7ff; color: #3730a3; }
.nav-ch-role.power { background: #ede9fe; color: #5b21b6; }
.nav-ch-role.reader { background: #e0f2fe; color: #075985; }
.nav-ch-role.dormant { background: #f1f5f9; color: #64748b; }
.nav-ch-drawer { padding: 12px 4px 8px; }
.nav-ch-drawer-h { margin-bottom: 10px; }
.nav-ch-drawer-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.nav-ch-drawer-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.nav-ch-meta-n { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.nav-ch-drawer-note { font-size: 11px; color: var(--text-muted); margin-top: 6px; max-width: 720px; }
.nav-ch-drawer-defs { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 10px 0 14px; }
.nav-ch-users { display: flex; flex-direction: column; gap: 8px; }
.nav-ch-user { border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 10px 12px; background: var(--bg-card, #fff); }
.nav-ch-user.is-champion { border-left: 3px solid #6366f1; }
.nav-ch-user.is-power { border-left: 3px solid #8b5cf6; }
.nav-ch-user.is-champion.is-power { border-left: 3px solid #7c3aed; background: linear-gradient(90deg, #f5f3ff 0, #fff 48px); }
.nav-ch-user-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
.nav-ch-user-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nav-ch-uid { font-family: ui-monospace, monospace; font-size: 11px; color: var(--text-muted); }
.nav-ch-title { font-weight: 600; color: var(--text-primary); }
.nav-ch-user-stats { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.nav-ch-rank { font-weight: 600; color: #7c3aed; }
.nav-ch-user-topics { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.nav-ch-user-content { margin: 6px 0 0; padding: 0; list-style: none; font-size: 11px; color: var(--text-secondary); }
.nav-ch-user-content li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; border-top: 1px solid var(--border, #f1f5f9); }
.nav-ch-c-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.nav-ch-c-v { font-variant-numeric: tabular-nums; color: var(--text-muted); flex-shrink: 0; }
.nav-ch-acct-topics { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nav-ch-acct-topics-h { font-size: 11px; font-weight: 700; color: var(--text-secondary); margin-right: 4px; width: 100%; }

/* ---- Products coverage landscape --------------------------------------- */
.nav-cov-pen { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; max-width: 520px; }
.nav-cov-pen-row { display: flex; align-items: center; gap: 10px; }
.nav-cov-pen-l { flex: 0 0 130px; font-size: 12px; color: var(--text-secondary); }
.nav-cov-pen-t { flex: 1; height: 14px; background: var(--bg-subtle, rgba(148,163,184,0.16)); border-radius: 7px; overflow: hidden; }
.nav-cov-pen-f { height: 100%; border-radius: 7px; background: linear-gradient(to right, #6366f1, #0ea5e9); }
.nav-cov-pen-v { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.nav-cov-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px; }
.nav-cov-card { border: 1px solid var(--border, #e2e8f0); border-top: 3px solid #6366f1; border-radius: 11px; padding: 12px 14px; background: var(--bg-card, #fff); }
.nav-cov-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nav-cov-card-n { font-weight: 700; font-size: var(--font-sm, .9rem); color: var(--text-primary); }
.nav-cov-card-a { font-size: 1.3rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.nav-cov-card-pct { font-size: 11px; color: var(--text-muted); margin: 3px 0 9px; }
.nav-cov-mini { display: flex; align-items: center; gap: 7px; font-size: 10px; color: var(--text-muted); margin-bottom: 4px; }
.nav-cov-mini > span:first-child { flex: 0 0 48px; }
.nav-cov-mini > span:last-child { flex: 0 0 auto; font-weight: 700; color: var(--text-secondary); }
.nav-cov-mini-t { flex: 1; height: 6px; background: var(--bg-subtle, rgba(148,163,184,0.18)); border-radius: 3px; overflow: hidden; }
.nav-cov-mini-f { height: 100%; border-radius: 3px; }
.nav-cov-lvls { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.nav-cov-lvl { font-size: 10px; padding: 2px 8px; border-radius: 8px; background: var(--bg-subtle, rgba(148,163,184,0.12)); color: var(--text-secondary); }
.nav-cov-lvl b { color: var(--text-primary); }
.nav-cov-bottom { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(240px, 1.2fr); gap: 20px; }
.nav-cov-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-bottom: 8px; }
.nav-cov-ws-row { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--border, #e2e8f0); border-radius: 9px; margin-bottom: 6px; }
.nav-cov-ws-row.target { border-left: 3px solid #f59e0b; background: rgba(245,158,11,0.05); }
.nav-cov-ws-v { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; flex: 0 0 56px; }
.nav-cov-ws-l { font-size: 12px; color: var(--text-secondary); }
@media (max-width: 720px) { .nav-cov-bottom { grid-template-columns: 1fr; } }

/* ===================================================================== */
/* Marketing Intelligence — calendar + MQL attribution                   */
/* ===================================================================== */

/* layer/kind dots + chip colors */
.mkt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #8b5cf6; flex: 0 0 auto; }
.mkt-dot.kind-marketing { background: #8b5cf6; }
.mkt-dot.kind-event_start { background: #3b82f6; }
.mkt-dot.kind-deadline { background: #f59e0b; }

/* ── calendar toolbar ── */
.mkt-cal { display: flex; flex-direction: column; gap: 14px; }
.mkt-cal-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.mkt-cal-nav { display: flex; align-items: center; gap: 8px; }
.mkt-cal-btn {
  background: var(--bg-secondary, #1a1f2e); color: var(--text-primary); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 14px; line-height: 1;
}
.mkt-cal-btn:hover { border-color: #8b5cf6; color: #fff; }
.mkt-cal-label { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-left: 8px; }
.mkt-cal-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mkt-cal-views { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.mkt-cal-view { background: transparent; color: var(--text-secondary); border: none; padding: 6px 14px; cursor: pointer; font-size: 13px; }
.mkt-cal-view.active { background: #8b5cf6; color: #fff; }
.mkt-cal-layer { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }

/* ── calendar grid ── */
.mkt-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.mkt-cal-grid.head { border-bottom: 1px solid var(--border); }
.mkt-cal-dow { padding: 6px 8px; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-align: left; }
.mkt-cal-cell {
  min-height: 104px; border: 1px solid var(--border); margin: -0.5px; padding: 4px 6px;
  display: flex; flex-direction: column; gap: 3px; cursor: pointer; overflow: hidden;
}
.mkt-cal-grid.week .mkt-cal-cell { min-height: 320px; }
.mkt-cal-cell:hover { background: rgba(139, 92, 246, 0.05); }
.mkt-cal-cell.out { opacity: 0.4; }
.mkt-cal-cell.today { background: rgba(139, 92, 246, 0.10); border-color: #8b5cf6; }
.mkt-cal-date { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.mkt-chip {
  display: flex; align-items: center; gap: 5px; font-size: 11px; padding: 2px 6px; border-radius: 5px;
  background: rgba(139, 92, 246, 0.14); color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mkt-chip.kind-event_start { background: rgba(59, 130, 246, 0.16); }
.mkt-chip.kind-deadline { background: rgba(245, 158, 11, 0.16); }
.mkt-chip-more { font-size: 11px; color: var(--text-secondary); padding-left: 4px; }

/* ── day agenda + modal ── */
.mkt-agenda { display: flex; flex-direction: column; gap: 8px; }
.mkt-agenda-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.mkt-agenda-row .mkt-dot { margin-top: 5px; }
.mkt-agenda-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.mkt-agenda-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.mkt-cal-modal { position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; }
.mkt-cal-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.mkt-cal-modal-card { position: relative; background: var(--bg-secondary, #161b27); border: 1px solid var(--border); border-radius: 12px; width: min(560px, 92vw); max-height: 80vh; overflow: auto; }
.mkt-cal-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 700; color: var(--text-primary); }
.mkt-cal-modal-body { padding: 16px 18px; }

/* ── MQL attribution flow ── */
.mkt-attr-flow { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.mkt-attr-card { flex: 1 1 180px; border: 1px solid var(--border); border-radius: 10px; padding: 16px; background: var(--bg-secondary, rgba(255,255,255,0.02)); }
.mkt-attr-label { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.mkt-attr-val { font-size: 28px; font-weight: 800; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.mkt-attr-sub { font-size: 12px; color: var(--text-secondary); }
.mkt-attr-arrow { display: flex; align-items: center; font-size: 22px; color: var(--text-secondary); }

.mkt-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) {
  .mkt-two-col { grid-template-columns: 1fr; }
  .mkt-attr-arrow { display: none; }
  .mkt-cal-cell { min-height: 72px; }
}

/* ======================================================================
   Telemetry — the Reading Floor (interactive streamgraph + who×what + leaderboard)
   ====================================================================== */
.nav-tel-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 1100px) { .nav-tel-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .nav-tel-kpis { grid-template-columns: repeat(2, 1fr); } }
.nav-tel-kpi { border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 10px 12px; background: var(--bg-card, #fff); }
.nav-tel-kpi.warn { border-color: rgba(245, 158, 11, .5); background: rgba(245, 158, 11, .05); }
.nav-tel-kpi-v { font-size: 20px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.15; }
.nav-tel-kpi-l { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.nav-tel-kpi-s { font-size: 10px; color: var(--text-muted); margin-top: 1px; }

.nav-tel-toggle { margin-left: 4px; }
.nav-tel-stream-wrap { position: relative; margin-top: 10px; }
.nav-tel-stream { width: 100%; }
.nav-tel-svg { width: 100%; height: 300px; display: block; cursor: crosshair; user-select: none; }
.nav-tel-area { transition: opacity .15s ease; cursor: pointer; }
.nav-tel-area:hover { opacity: 1 !important; }
.nav-tel-grid { stroke: var(--border-subtle, rgba(148,163,184,0.22)); stroke-width: 0.5; }
.nav-tel-yl { fill: var(--text-muted); font-size: 9px; text-anchor: end; font-family: 'JetBrains Mono', monospace; }
.nav-tel-xl { fill: var(--text-muted); font-size: 9px; text-anchor: middle; font-family: 'JetBrains Mono', monospace; }
.nav-tel-guide { stroke: var(--text-primary); stroke-width: 0.6; stroke-dasharray: 3 3; opacity: .5; pointer-events: none; }
.nav-tel-shade { fill: rgba(99,102,241,0.10); stroke: rgba(99,102,241,0.4); stroke-width: 0.6; pointer-events: none; }
.nav-tel-brush { fill: rgba(99,102,241,0.16); stroke: rgba(99,102,241,0.6); stroke-width: 0.6; pointer-events: none; }

.nav-tel-tip { position: absolute; z-index: 20; min-width: 160px; max-width: 220px; background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18); padding: 8px 10px;
  font-size: 11px; pointer-events: none; }
.nav-tel-tip-h { font-weight: 700; color: var(--text-primary); margin-bottom: 5px; font-variant-numeric: tabular-nums; }
.nav-tel-tip-row { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); margin: 2px 0; }
.nav-tel-tip-row b { margin-left: auto; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.nav-tel-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.nav-tel-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--border, #e2e8f0); background: var(--bg-card, #fff); color: var(--text-secondary); cursor: pointer; transition: all .12s ease; }
.nav-tel-leg:hover { border-color: var(--accent-blue, #3b82f6); }
.nav-tel-leg.on { border-color: var(--text-primary); color: var(--text-primary); font-weight: 600; }
.nav-tel-leg.dim { opacity: .45; }
.nav-tel-leg-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.nav-tel-leg-n { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.nav-tel-cols { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .nav-tel-cols { grid-template-columns: 1fr; } }
/* Vertical column headers: band names are long and there are up to 9 of them,
   so horizontal labels overlap into an unreadable smear in ~46px columns.
   Rotate them (same pattern as the editorial-traffic heatmap) so each band is
   legible; the colour dot sits at the bottom, nearest the column it labels. */
.nav-tel-col {
  cursor: pointer;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 150px;
  align-self: end;
  justify-self: center;
}
.nav-tel-col.on { color: var(--text-primary); text-decoration: underline; }
.nav-tel-col-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin: 4px 0 0; vertical-align: middle; }
.nav-tel-cell { cursor: pointer; }
.nav-tel-cell:not(.empty):hover { transform: scale(1.06); box-shadow: 0 2px 8px rgba(0,0,0,.18); z-index: 1; }

.nav-tel-lead { display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow-y: auto; }
.nav-tel-lead-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border-subtle, rgba(148,163,184,0.14)); }
.nav-tel-lead-main { flex: 1; min-width: 0; }
.nav-tel-lead-t { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-tel-lead-m { font-size: 11px; color: var(--text-muted); margin: 2px 0 5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav-tel-lead-tag { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: var(--bg-tertiary, rgba(99,102,241,.1)); color: var(--text-secondary); }
.nav-tel-lead-acct { color: var(--accent-blue, #3b82f6); cursor: pointer; font-weight: 600; }
.nav-tel-lead-acct:hover { text-decoration: underline; }
.nav-tel-lead-bar { height: 4px; border-radius: 3px; background: var(--bg-tertiary, rgba(128,128,128,0.12)); overflow: hidden; }
.nav-tel-lead-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #0ea5e9); }
.nav-tel-lead-v { font-size: 13px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }


/* === css/event_operations.css === */
/* ???????????????????????????????????????????????????????????
   Event Operations Center ? eo- prefix
   ??????????????????????????????????????????????????????????? */

/* ?? Header ????????????????????????????????????????????????? */
.eo-header {
  padding: 28px 32px 12px;
}
.eo-title {
  font-size: var(--font-3xl);
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eo-title svg { width: 28px; height: 28px; color: var(--accent); }
.eo-subtitle {
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-top: 4px;
}

/* ?? Year Selector ?????????????????????????????????????????? */
.eo-year-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 32px 8px;
}
.eo-year-select {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  cursor: pointer;
}
.eo-year-select:focus { outline: none; border-color: var(--accent); }

/* ?? KPI Strip ?????????????????????????????????????????????? */
.eo-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  padding: 12px 32px 16px;
}
.eo-kpi {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  transition: var(--transition);
}
.eo-kpi:hover { border-color: var(--border-light); transform: translateY(-1px); }
.eo-kpi-label {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.eo-kpi-value {
  font-size: var(--font-2xl);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
.eo-kpi-value.accent { color: var(--accent); }
.eo-kpi-value.green { color: var(--success); }
.eo-kpi-value.yellow { color: var(--warning); }
.eo-kpi-value.red { color: var(--error); }
.eo-kpi-value.purple { color: var(--purple); }
.eo-kpi-value.cyan { color: var(--cyan); }
.eo-kpi-sub {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  /* Match tallest common wrap (2 subtitle lines) so headline figures stay visually aligned row-to-row */
  line-height: 1.35;
  min-height: calc(2 * 1.35em);
}
.eo-kpi-sub .pos { color: var(--success); }
.eo-kpi-sub .neg { color: var(--error); }

/* Contract fill velocity */
.eo-kpi-velocity { justify-content: flex-start; }
.eo-kpi-spark {
  width: 100%;
  height: 28px;
  margin-top: 6px;
}
.eo-vel-line {
  fill: none;
  stroke: var(--cyan, #22d3ee);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.eo-vel-area {
  fill: var(--cyan, #22d3ee);
  opacity: 0.12;
}
.eo-vel-grid {
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.5;
}
.eo-vel-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin: 8px 0;
}
.eo-vel-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  padding: 8px 10px;
}
.eo-vel-stat-label {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.eo-vel-stat-val { font-size: var(--font-sm); font-weight: 600; }
.eo-vel-chart {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  padding: 8px 10px 4px;
  background: var(--bg-card);
}
.eo-vel-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 2px;
}

/* In-row velocity sparkline (post-event review table topline) */
.eo-vel-spark-col { width: 120px; }
.eo-vel-spark-cell { width: 120px; }
.eo-vel-spark-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.eo-vel-spark-svg {
  width: 80px;
  height: 24px;
  flex: 0 0 auto;
}
.eo-vel-spark-days {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ?? Tabs ??????????????????????????????????????????????????? */
.eo-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0;
  row-gap: 0;
  padding: 0 32px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.eo-tab {
  padding: 10px 16px;
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--transition);
}
.eo-tab:hover { color: var(--text-primary); }
.eo-tab.active {
  color: var(--accent-light);
  border-bottom-color: var(--accent-light);
}
.eo-tab svg { width: 15px; height: 15px; }
.eo-tab .eo-tab-badge {
  background: var(--error);
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 600;
}

/* ?? View Toggle ???????????????????????????????????????????? */
.eo-view-toggle {
  display: flex;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.eo-view-btn {
  padding: 6px 14px;
  font-size: var(--font-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.eo-view-btn:last-child { border-right: none; }
.eo-view-btn:hover { color: var(--text-primary); background: var(--bg-card); }
.eo-view-btn.active {
  color: var(--accent-light);
  background: var(--bg-card);
  font-weight: 600;
}

/* ?? Toolbar ???????????????????????????????????????????????? */
.eo-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  flex-wrap: wrap;
}
.eo-search-wrap {
  display: flex;
  align-items: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  flex: 1;
  max-width: 320px;
}
.eo-search-wrap svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.eo-search {
  background: none;
  border: none;
  color: var(--text-primary);
  padding: 7px 8px;
  font-size: var(--font-sm);
  width: 100%;
  outline: none;
}
.eo-select {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  cursor: pointer;
}
.eo-select:focus { outline: none; border-color: var(--accent); }

/* Event Director filter — first-class, labeled, hard to miss */
.eo-director-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 10px;
  border: 2px solid var(--brand, #4fc3f7);
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand, #4fc3f7) 12%, var(--bg-card, #fff));
}
.eo-director-filter.is-on {
  background: color-mix(in srgb, var(--brand, #4fc3f7) 22%, var(--bg-card, #fff));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #4fc3f7) 25%, transparent);
}
.eo-director-filter-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand, #0277bd);
  white-space: nowrap;
}
.eo-director-select {
  min-width: 180px;
  max-width: 260px;
  font-weight: 600;
  border-color: var(--brand, #4fc3f7);
}
.eo-director-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
}
.eo-director-clear:hover { color: var(--text-primary); }
.eo-director-name {
  font-weight: 600;
  color: var(--text-secondary);
}
.eo-toolbar-info {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-left: auto;
}
.eo-btn-export {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  cursor: pointer;
  transition: var(--transition);
}
.eo-btn-export:hover { border-color: var(--accent); color: var(--accent); }
.eo-btn-export svg { width: 14px; height: 14px; }

/* ?? Alerts ????????????????????????????????????????????????? */
.eo-alerts {
  padding: 0 32px 8px;
}
.eo-alert-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  font-size: var(--font-sm);
  cursor: pointer;
  transition: var(--transition);
}
.eo-alert-row:hover { background: rgba(239, 68, 68, 0.14); }
.eo-alert-row.warning {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.2);
}
.eo-alert-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.eo-alert-icon.critical { color: var(--error); }
.eo-alert-icon.atrisk { color: var(--warning); }
.eo-alert-name { font-weight: 600; color: var(--text-primary); }
.eo-alert-detail { color: var(--text-muted); margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: var(--font-xs); }

/* ?? Health Matrix Table ???????????????????????????????????? */
.eo-matrix-wrap {
  padding: 0 32px 32px;
}
.eo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
}
.eo-table thead th {
  padding: 10px 12px;
  text-align: left;
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: none;
  box-shadow: inset 0 -1px 0 var(--border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-primary);
}
.eo-table thead th:hover { color: var(--text-primary); }
.eo-table thead th.sorted { color: var(--accent-light); }
.eo-table thead th.right { text-align: right; }
.eo-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.eo-table tbody td.right { text-align: right; }
.eo-table tbody td.mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-xs);
}
.eo-table tbody tr.eo-data-row { cursor: pointer; transition: var(--transition); }
.eo-table tbody tr.eo-data-row:hover { background: var(--bg-card-hover); }
.eo-table tbody tr.eo-data-row-expanded {
  position: sticky;
  top: 41px;
  z-index: 9;
  background: var(--bg-primary);
  box-shadow: 0 1px 0 var(--border);
}
.eo-table tbody tr.eo-data-row-expanded:hover { background: var(--bg-primary); }

/* Matrix row action handoffs (Tearsheet / Prospects / Prior registrants / Hail Mary) */
.eo-matrix-actions-col {
  width: 1%;
  min-width: 280px;
  white-space: nowrap;
  cursor: default;
}
.eo-matrix-actions-cell {
  padding: 6px 8px !important;
  vertical-align: middle;
  cursor: default;
}
.eo-matrix-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}
.eo-matrix-action-hm {
  border-color: #b91c1c !important;
  color: #b91c1c !important;
  font-weight: 700;
}
.eo-matrix-action-hm:hover {
  border-color: #dc2626 !important;
  color: #dc2626 !important;
}

.eo-event-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--font-sm);
}
.eo-event-meta {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.eo-sort-icon { font-size: 10px; margin-left: 3px; }

/* ?? Ad Boards ? How They Buy disclosure ????????????????????? */
.eo-htb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 8px;
  font-size: var(--font-2xs);
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition);
}
.eo-htb-toggle:hover {
  color: var(--text-on-accent, #fff);
  background: var(--accent);
}
.eo-htb-toggle[aria-expanded="true"] {
  color: var(--text-on-accent, #fff);
  background: var(--accent);
}
.eo-htb-toggle > span:first-child {
  display: inline-block;
  width: 10px;
  text-align: center;
  font-weight: 700;
}
.eo-htb-row td {
  border-top: none !important;
  cursor: default;
}

/* ?? Ad Boards ? Major sponsors + per-sponsor tearsheet ??? */

.eo-ab-sponsors {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  padding: 12px 14px;
}

.eo-ab-tier-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.eo-ab-tier {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: start;
}
.eo-ab-tier-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}
.eo-ab-tier-label {
  font-weight: 600;
  font-size: var(--font-sm);
  color: var(--text-primary);
}
.eo-ab-tier-count {
  font-size: var(--font-2xs);
  color: var(--text-muted);
}

.eo-ab-sponsor-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.eo-ab-sponsor-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  font-size: var(--font-2xs);
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: var(--transition);
}
.eo-ab-sponsor-pill:hover {
  border-color: var(--accent);
  background: var(--bg-card-hover);
  color: var(--accent);
}
.eo-ab-sponsor-pill.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--text-on-accent, #fff);
}
.eo-ab-sponsor-pill.active .eo-ab-sponsor-status {
  color: rgba(255, 255, 255, 0.85);
}
.eo-ab-sponsor-name {
  font-weight: 500;
}
.eo-ab-sponsor-status {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Tearsheet panel */
.eo-ab-tearsheet {
  margin-top: 14px;
  padding: 18px 22px 22px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.eo-ab-ts-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.eo-ab-ts-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.eo-ab-ts-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 4px 0 4px;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.eo-ab-ts-tier {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--text-on-accent, #fff);
}
.eo-ab-ts-sub {
  font-size: var(--font-2xs);
  color: var(--text-muted);
}
.eo-ab-ts-actions {
  display: flex;
  gap: 6px;
}

.eo-ab-ts-section {
  padding: 12px 0;
  border-bottom: 1px dashed var(--border);
}
.eo-ab-ts-section:last-of-type {
  border-bottom: none;
}
.eo-ab-ts-section h3 {
  font-size: 13px;
  margin: 0 0 8px;
  color: var(--text-primary);
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}
.eo-ab-ts-h3-meta {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}
.eo-ab-ts-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
.eo-ab-ts-stat {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
}
.eo-ab-ts-stat-num {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.eo-ab-ts-stat-lbl {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}
.eo-ab-ts-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  margin-bottom: 6px;
  font-size: var(--font-2xs);
  align-items: baseline;
}
.eo-ab-ts-row-lbl {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-size: 10px;
  padding-top: 2px;
}
.eo-ab-ts-row-val {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  color: var(--text-primary);
}
.eo-ab-ts-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 11px;
  color: var(--text-primary);
}
.eo-ab-ts-chip-pos {
  border-color: var(--success);
  color: var(--success);
}
.eo-ab-ts-chip-warn {
  border-color: var(--warning);
  color: var(--warning);
}
.eo-ab-ts-empty {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  font-style: italic;
}

/* ?? Event-collateral link chips (header: SF / datasheet / agenda) ? */
.eo-ab-event-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.eo-ab-event-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.eo-ab-event-link:hover {
  background: rgba(122, 96, 230, 0.10);
  border-color: var(--accent);
  text-decoration: none;
}
.eo-ab-event-link-ico {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--accent);
  color: var(--bg-primary);
  line-height: 1.5;
}
/* Internal Salesforce link gets a distinct color so users can quickly
 * tell external (sponsor-shareable) collateral apart from internal links. */
.eo-ab-event-link-sf {
  color: #0a66c2;
}
.eo-ab-event-link-sf .eo-ab-event-link-ico {
  background: #0a66c2;
}
.eo-ab-event-link-sf:hover {
  background: rgba(10, 102, 194, 0.10);
  border-color: #0a66c2;
}

/* ?? Roster tables (full attendee breakdown) ????????? */
.eo-ab-ts-roster-block {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.eo-ab-ts-roster-h {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.eo-ab-ts-roster-meta {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  font-size: 11px;
}
.eo-ab-ts-roster {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 1.4;
}
.eo-ab-ts-roster th {
  text-align: left;
  padding: 5px 8px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--accent);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.eo-ab-ts-roster th.num { text-align: right; }
.eo-ab-ts-roster td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.eo-ab-ts-roster td.num { text-align: right; }
.eo-ab-ts-roster tbody tr:hover td { background: var(--bg-secondary); }
.eo-ab-ts-roster-name {
  font-weight: 600;
  color: var(--text-primary);
}
.eo-ab-ts-roster-sub {
  color: var(--text-muted);
  font-size: 11px;
}
.eo-ab-ts-rel-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--border);
}
.eo-ab-ts-rel-same-vertical {
  background: rgba(220, 53, 69, 0.10);
  color: #b04141;
  border-color: rgba(220, 53, 69, 0.4);
}
.eo-ab-ts-rel-overlapping-vertical {
  background: rgba(255, 193, 7, 0.12);
  color: #a07a1f;
  border-color: rgba(255, 193, 7, 0.4);
}
.eo-ab-ts-rel-complementary {
  background: rgba(40, 167, 69, 0.10);
  color: #3a7546;
  border-color: rgba(40, 167, 69, 0.4);
}
.eo-ab-ts-rel-unprofiled {
  background: var(--bg-secondary);
  color: var(--text-muted);
}
.eo-ab-ts-chip-shared {
  background: rgba(40, 167, 69, 0.10);
  border-color: rgba(40, 167, 69, 0.4);
  color: #3a7546;
  font-size: 10px;
  padding: 1px 6px;
}
.eo-ab-ts-chip-distinct {
  background: var(--bg-secondary);
  border-color: var(--border);
  color: var(--text-muted);
  font-size: 10px;
  padding: 1px 6px;
}
.eo-ab-ts-empty-inline {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  font-style: italic;
}
.eo-ab-ts-research {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.eo-ab-ts-research-sec {
  padding: 8px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.eo-ab-ts-research-h {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 4px;
}
.eo-ab-ts-research-body {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-primary);
}
.eo-ab-ts-sol {
  font-size: 11px;
  padding: 3px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.eo-ab-ts-sol-title {
  color: var(--text-primary);
  font-weight: 500;
}
.eo-ab-ts-signal {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 4px;
}
.eo-ab-ts-signal-h {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.eo-ab-ts-signal-v {
  font-size: 11px;
  color: var(--text-primary);
}
.eo-ab-ts-foot {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  text-align: right;
}

.eo-ab-ts-narrative {
  font-size: var(--font-2xs);
  line-height: 1.55;
  margin: 0 0 8px;
  color: var(--text-primary);
}
.eo-ab-ts-narrative-lead {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  font-size: var(--font-sm);
  line-height: 1.55;
  color: var(--text-primary);
}
.eo-ab-ts-bullets {
  margin: 6px 0 0;
  padding-left: 18px;
}
.eo-ab-ts-bullets li {
  margin-bottom: 4px;
  font-size: var(--font-2xs);
  line-height: 1.45;
}

@media print {
  .eo-ab-ts-actions { display: none !important; }
  .eo-ab-tearsheet {
    border: none !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
}

/* ?? Pacing Bar ????????????????????????????????????????????? */
.eo-pacing-cell {
  min-width: 140px;
}
.eo-pacing-bar {
  height: 18px;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  position: relative;
}
.eo-pacing-booked {
  height: 100%;
  background: var(--success);
  transition: width 0.3s ease;
}
.eo-pacing-pipe {
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(59, 130, 246, 0.5),
    rgba(59, 130, 246, 0.5) 3px,
    rgba(59, 130, 246, 0.25) 3px,
    rgba(59, 130, 246, 0.25) 6px
  );
  transition: width 0.3s ease;
}
.eo-pacing-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-2xs);
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  justify-content: space-between;
}

/* ?? Health Badge ??????????????????????????????????????????? */
.eo-health {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: var(--font-2xs);
  font-weight: 600;
  white-space: nowrap;
}
.eo-health.exceeded { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.eo-health.on-track { background: rgba(16, 185, 129, 0.10); color: #6ee7b7; }
.eo-health.hit { background: rgba(16, 185, 129, 0.12); color: #34d399; }
.eo-health.at-risk { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.eo-health.behind { background: rgba(239, 68, 68, 0.12); color: #f87171; }
.eo-health.critical { background: rgba(239, 68, 68, 0.2); color: #ef4444; font-weight: 700; }
.eo-health.missed { background: rgba(239, 68, 68, 0.12); color: #f87171; }
.eo-health.failed { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.eo-health.no-target { background: var(--bg-secondary); color: var(--text-muted); }

/* ?? Brand Badge ???????????????????????????????????????????? */
.eo-brand {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--font-2xs);
  font-weight: 600;
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

/* ?? Expanded Row ??????????????????????????????????????????? */
.eo-expand-panel {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin: 4px 12px 12px;
  padding: 20px;
}
.eo-expand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.eo-expand-section-title {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* Sponsor movement cards */
.eo-movement-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.eo-mv-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
}
.eo-mv-card .count {
  font-size: var(--font-xl);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
.eo-mv-card .label {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  margin-top: 4px;
}
.eo-mv-card.retained .count { color: var(--success); }
.eo-mv-card.churned .count { color: var(--error); }
.eo-mv-card.net-new .count { color: var(--accent); }
.eo-mv-card.returned .count { color: var(--purple); }

/* Sponsor roster */
.eo-sponsor-roster {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.eo-sponsor-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  font-size: var(--font-2xs);
  color: var(--text-secondary);
}
.eo-sponsor-chip .eo-stag {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.eo-tag-new .eo-stag { background: rgba(59,130,246,0.2); color: var(--accent-light); }
.eo-tag-returning .eo-stag { background: rgba(139,92,246,0.2); color: #a78bfa; }
.eo-tag-resign .eo-stag { background: rgba(16,185,129,0.2); color: #6ee7b7; }

/* ?? Prospect Chips ???????????????????????????????????????? */
.eo-prospect-chip {
  border-style: dashed;
  opacity: 0.9;
}
.eo-prospect-chip:hover { opacity: 1; }
.eo-prospect-level {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.eo-level-anchor { background: rgba(245,158,11,0.2); color: #fbbf24; }
.eo-level-exhibitor { background: rgba(139,92,246,0.2); color: #a78bfa; }
.eo-level-patron { background: rgba(16,185,129,0.2); color: #6ee7b7; }
.eo-prospect-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(255,255,255,0.05);
  letter-spacing: -0.3px;
}
.eo-prospect-chip:not(.eo-prospect-has-pipeline):not(.eo-prospect-has-opp):hover {
  border-color: var(--accent);
  background: rgba(59,130,246,0.08);
}
.eo-prospect-has-pipeline {
  border-style: solid;
  border-color: rgba(16,185,129,0.4);
  opacity: 1;
}
.eo-prospect-pipeline {
  background: rgba(16,185,129,0.2);
  color: #6ee7b7;
}
.eo-prospect-has-opp {
  border-style: solid;
  border-color: rgba(139,92,246,0.4);
  opacity: 1;
}
.eo-prospect-staged {
  background: rgba(139,92,246,0.2);
  color: #a78bfa;
}

/* ?? Opportunity Modal Form ???????????????????????????????? */
.eo-opp-context {
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  margin-bottom: 16px;
}
.eo-opp-account {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.eo-opp-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.eo-opp-field label {
  display: block;
  font-size: var(--font-2xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.eo-opp-field input,
.eo-opp-field textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--font-xs);
  font-family: inherit;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.eo-opp-field input:focus,
.eo-opp-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* Open opps mini table */
.eo-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-xs);
}
.eo-mini-table th {
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.eo-mini-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(45, 55, 72, 0.5);
}
.eo-mini-table .stale { color: var(--error); }
.eo-table td.stale { color: var(--error); }

/* ?? Pipeline Tab ??????????????????????????????????????????? */
.eo-pipeline-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  padding: 16px 32px;
}
.eo-stage-bar {
  display: flex;
  height: 32px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 0 32px 16px;
}
.eo-stage-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-2xs);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  padding: 0 6px;
  min-width: 40px;
}
.eo-stage-legend {
  display: flex;
  gap: 16px;
  padding: 0 32px 12px;
  flex-wrap: wrap;
}
.eo-stage-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-xs);
  color: var(--text-secondary);
}
.eo-stage-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* Stage colors */
.eo-stage-0 { background: var(--chart-1); }
.eo-stage-1 { background: var(--chart-2); }
.eo-stage-2 { background: var(--chart-3); }
.eo-stage-3 { background: var(--chart-4); }
.eo-stage-4 { background: var(--chart-5); }
.eo-stage-5 { background: #a855f7; }
.eo-stage-6 { background: #f97316; }

/* Aging buckets */
.eo-aging-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 0 32px 20px;
}
.eo-aging-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  text-align: center;
}
.eo-aging-card .val {
  font-size: var(--font-xl);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary);
}
.eo-aging-card .lbl {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  margin-top: 4px;
}
.eo-aging-card.hot .val { color: var(--error); }

/* ?? Post-Mortem Tab ???????????????????????????????????????? */
.eo-pm-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  padding: 16px 32px;
}
.eo-verdict {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: var(--font-2xs);
  font-weight: 600;
}
.eo-verdict.exceeded { background: rgba(16,185,129,0.15); color: #34d399; }
.eo-verdict.hit { background: rgba(16,185,129,0.10); color: #6ee7b7; }
.eo-verdict.missed { background: rgba(245,158,11,0.15); color: #fbbf24; }
.eo-verdict.failed { background: rgba(239,68,68,0.2); color: #ef4444; }

.eo-variance { font-family: 'JetBrains Mono', monospace; font-size: var(--font-xs); }
.eo-variance.pos { color: var(--success); }
.eo-variance.neg { color: var(--error); }

/* ?? Trends Tab ????????????????????????????????????????????? */
.eo-trends-v2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 32px 32px;
}
.eo-trends-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 16px 32px 32px;
}
.eo-trend-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.eo-trend-title {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.eo-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 160px;
  padding-top: 8px;
}
.eo-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}
.eo-bar {
  width: 100%;
  max-width: 48px;
  border-radius: 3px 3px 0 0;
  transition: height 0.3s ease;
  position: relative;
}
.eo-bar:hover { opacity: 0.85; }
.eo-bar-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 6px;
  text-align: center;
}
.eo-bar-val {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary);
  margin-bottom: 4px;
  text-align: center;
}
.eo-bar.target {
  background: rgba(99, 102, 241, 0.25);
  border: 1px dashed rgba(99, 102, 241, 0.5);
}
.eo-bar.actual { background: var(--success); }
.eo-bar.brand-0 { background: var(--chart-1); }
.eo-bar.brand-1 { background: var(--chart-2); }
.eo-bar.brand-2 { background: var(--chart-3); }
.eo-bar.brand-3 { background: var(--chart-4); }
.eo-bar.brand-4 { background: var(--chart-5); }

/* Retention sparkline */
.eo-retention-line {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 120px;
}
.eo-ret-point {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.eo-ret-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.eo-ret-stem {
  width: 2px;
  background: var(--accent);
  border-radius: 1px;
}

/* ?? Pagination ????????????????????????????????????????????? */
.eo-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 32px;
}
.eo-page-info {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

/* ?? Loading / Empty ???????????????????????????????????????? */
.eo-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 32px;
  gap: 16px;
  color: var(--text-muted);
  font-size: var(--font-md);
}
.eo-empty {
  text-align: center;
  padding: 48px 32px;
  color: var(--text-muted);
  font-size: var(--font-sm);
}
.eo-empty svg { width: 36px; height: 36px; margin-bottom: 10px; }

/* ?? Chevron animation ?????????????????????????????????????? */
.eo-chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-right: 6px;
}
.eo-chevron.open { transform: rotate(90deg); }

/* ?? Pipeline event grouping ???????????????????????????????? */
.eo-pipeline-event-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin: 2px 32px;
  cursor: pointer;
  font-size: var(--font-sm);
  transition: var(--transition);
}
.eo-pipeline-event-header:hover { background: var(--bg-card-hover); border-color: var(--border-light); }

/* ?? Webinar toggle ????????????????????????????????????????? */
.eo-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-sm);
  color: var(--text-muted);
  user-select: none;
}
.eo-toggle-box {
  display: inline-block;
  width: 32px;
  height: 18px;
  border-radius: 10px;
  background: var(--surface-alt, #333);
  position: relative;
  transition: background 0.2s ease;
}
.eo-toggle-box::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.2s ease, background 0.2s ease;
}
.eo-toggle-box.active { background: var(--brand, #4fc3f7); }
.eo-toggle-box.active::after { transform: translateX(14px); background: #fff; }

/* ?? Pipeline Mode Selector ???????????????????????????????? */
.eo-mode-btn {
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.eo-mode-btn:first-of-type { border-radius: 6px 0 0 6px; }
.eo-mode-btn:last-of-type { border-radius: 0 6px 6px 0; }
.eo-mode-btn:not(:first-of-type) { border-left: none; }
.eo-mode-btn:hover { color: var(--text-primary); background: var(--bg-secondary); }
.eo-mode-btn.active {
  background: var(--brand, #4fc3f7);
  color: #fff;
  border-color: var(--brand, #4fc3f7);
  font-weight: 600;
}
.eo-mode-btn.active + .eo-mode-btn { border-left-color: var(--brand, #4fc3f7); }

/* ?? ML Renewal Badges ?????????????????????????????????????? */
.eo-renewal-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  letter-spacing: -0.3px;
}
.eo-renewal-badge.likely { background: rgba(76, 175, 80, 0.15); color: var(--success); }
.eo-renewal-badge.uncertain { background: rgba(255, 193, 7, 0.15); color: var(--warning); }
.eo-renewal-badge.at-risk { background: rgba(244, 67, 54, 0.15); color: var(--error); }

.eo-renewal-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}
.eo-ren-likely { background: rgba(76, 175, 80, 0.15); color: var(--success); }
.eo-ren-uncertain { background: rgba(255, 193, 7, 0.15); color: var(--warning); }
.eo-ren-atrisk { background: rgba(244, 67, 54, 0.15); color: var(--error); }

/* ?? Pipeline Event Meta ??????????????????????????????????? */
.eo-pipe-evt-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 10px;
  font-weight: 400;
  font-family: 'JetBrains Mono', monospace;
}

/* ?? Coaching Signals ?????????????????????????????????????? */
.eo-coaching-signals { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 3px; }
.eo-coaching-signal {
  font-size: 9px;
  line-height: 1.2;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
  border: 1px solid rgba(245, 158, 11, 0.15);
  max-width: 280px;
}

/* ?? Account Intelligence Tags ????????????????????????????? */
.eo-acct-intel { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.eo-acct-tag {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  white-space: nowrap;
}
.eo-tag-danger { background: rgba(239, 68, 68, 0.12); color: var(--error); }
.eo-tag-warn { background: rgba(245, 158, 11, 0.12); color: var(--warning); }
.eo-tag-ok { background: rgba(16, 185, 129, 0.08); color: var(--text-muted); }

/* ?? Pipeline Opportunity Expansion ????????????????????????? */
.eo-opp-expand {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin: 2px 8px 10px;
  padding: 16px 20px;
}
.eo-opp-expand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.eo-opp-section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.eo-opp-kv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}
.eo-opp-kv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
}
.eo-opp-kv-label {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}
.eo-opp-kv-value {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary);
  text-align: right;
}
.eo-opp-renewal-hero {
  display: flex;
  align-items: center;
  gap: 10px;
}
.eo-opp-renewal-pct {
  font-size: var(--font-2xl);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
.eo-opp-renewal-risk {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}
.eo-opp-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  justify-content: flex-end;
}
.eo-opp-action-btn {
  font-size: 11px !important;
}

@media (max-width: 1200px) {
  .eo-opp-expand-grid { grid-template-columns: 1fr; }
  .eo-opp-kv-grid { grid-template-columns: 1fr; }
}

/* ?? Intelligence Badges ??????????????????????????????????? */
.eo-intel-badges { display: flex; flex-wrap: wrap; gap: 3px; }
.eo-intel-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.eo-ib-expand { background: rgba(99, 102, 241, 0.12); color: #818cf8; }
.eo-ib-portfolio { background: rgba(16, 185, 129, 0.12); color: var(--success); }
.eo-ib-stuck { background: rgba(239, 68, 68, 0.1); color: var(--error); }

/* ?? Trends v2 narrative layout ????????????????????????????? */
.eo-narrative-strip {
  display: flex;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.eo-narrative-item {
  flex: 1;
  padding: 16px 20px;
  border-right: 1px solid var(--border);
  text-align: center;
}
.eo-narrative-item:last-child { border-right: none; }
.eo-narrative-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.eo-narrative-value {
  font-size: 24px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.eo-narrative-value.positive { color: var(--success); }
.eo-narrative-value.negative { color: var(--error); }
.eo-narrative-value.neutral { color: var(--text-primary); }
.eo-narrative-ctx {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}
.eo-narrative-delta {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}
.eo-narrative-delta.up { background: rgba(76, 175, 80, 0.12); color: var(--success); }
.eo-narrative-delta.down { background: rgba(244, 67, 54, 0.12); color: var(--error); }

.eo-trend-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.eo-trend-hero { }
.eo-trend-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}
.eo-trend-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}
.eo-bar-chart-hero {
  height: 200px;
}

/* ?? Opportunities Tab ?????????????????????????????????????? */
.eo-opps-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}
.eo-opps-count {
  font-size: 12px;
  color: var(--text-muted);
}
.eo-opps-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.eo-opps-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  border-bottom: none;
  box-shadow: inset 0 -2px 0 var(--border);
  font-weight: 600;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-primary);
}
.eo-opps-table td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.eo-opps-table tr:hover td {
  background: rgba(255,255,255,0.02);
}
.eo-opps-source {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(99,102,241,0.12);
  color: var(--accent-light, #818cf8);
  white-space: nowrap;
}
.eo-opps-level {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(16,185,129,0.12);
  color: var(--success);
  white-space: nowrap;
}
.eo-opps-del {
  background: none;
  border: 1px solid rgba(239,68,68,0.3);
  color: var(--error, #f87171);
  border-radius: 4px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.eo-opps-del:hover {
  opacity: 1;
  background: rgba(239,68,68,0.1);
}

.eo-opps-sync {
  background: none;
  border: 1px solid rgba(59,130,246,0.4);
  color: var(--primary, #60a5fa);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
  transition: all .15s;
}
.eo-opps-sync:hover:not(:disabled) {
  background: rgba(59,130,246,0.1);
  border-color: rgba(59,130,246,0.7);
}
.eo-opps-sync:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* ?? README Tab ????????????????????????????????????????????? */
.eo-readme {
  max-width: 880px;
  padding: 24px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
}
.eo-readme h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 12px 0;
  color: var(--text-primary);
}
.eo-readme h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 28px 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
.eo-readme h4 {
  font-size: 13px;
  font-weight: 600;
  margin: 20px 0 8px 0;
  color: var(--text-secondary);
}
.eo-readme p {
  margin: 0 0 12px 0;
  color: var(--text-secondary);
}
.eo-readme ul, .eo-readme ol {
  margin: 0 0 14px 0;
  padding-left: 22px;
}
.eo-readme li {
  margin-bottom: 5px;
  color: var(--text-secondary);
}
.eo-readme li strong {
  color: var(--text-primary);
}
.eo-readme em {
  color: var(--text-muted);
}
.eo-readme code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-secondary);
  color: var(--accent-light, #818cf8);
}
.eo-readme-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 20px 0;
  font-size: 13px;
}
.eo-readme-table th {
  text-align: left;
  padding: 8px 10px;
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--border);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}
.eo-readme-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
.eo-readme-table tr:hover td {
  background: rgba(255,255,255,0.02);
}
.eo-readme-pre {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 16px;
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  overflow-x: auto;
  margin: 10px 0 20px 0;
  white-space: pre;
}

/* ?? Sessions Tab ??????????????????????????????????????????? */
.eo-sessions-upload {
  padding: 16px 32px;
}
.eo-sessions-upload-zone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
  transition: all 0.2s;
  cursor: pointer;
}
.eo-sessions-upload-zone:hover,
.eo-sessions-upload-zone.drag-over {
  border-color: var(--accent);
  background: rgba(59, 130, 246, 0.04);
}
.eo-sessions-upload-confirm {
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.eo-sessions-upload-result {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: var(--font-sm);
}
.eo-sessions-upload-result.success {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
}
.eo-sessions-upload-result.error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.eo-session-topic-tag {
  display: inline-block;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 8px;
  background: rgba(139, 92, 246, 0.12);
  color: #a78bfa;
  font-weight: 500;
  white-space: nowrap;
}
.eo-session-card .eo-session-topic-tag {
  font-size: 9px;
  padding: 0 6px;
  line-height: 1.45;
}

.eo-sessions-toolbar {
  margin-bottom: 14px;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
}
.eo-sessions-toolbar-top {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(160px, auto) auto;
  gap: 10px 16px;
  align-items: center;
  margin-bottom: 10px;
}
@media (max-width: 960px) {
  .eo-sessions-toolbar-top {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  .eo-sessions-toolbar-metrics-wrap {
    justify-self: start;
    text-align: left;
  }
  .eo-sessions-toolbar-actions {
    justify-self: start;
  }
}
.eo-sessions-toolbar-label-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.eo-sessions-toolbar-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.eo-sessions-toolbar-hint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}
.eo-sessions-toolbar-metrics-wrap {
  justify-self: center;
  text-align: center;
}
.eo-sessions-metrics {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 6px;
  font-size: 13px;
  color: var(--text-primary);
}
.eo-sessions-metrics-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 2px;
}
.eo-sessions-metrics-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
}
.eo-sessions-metrics-unit {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, var(--text-muted));
}
.eo-sessions-metrics-sep {
  color: var(--text-muted);
  margin: 0 2px;
  user-select: none;
}
.eo-sessions-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-self: end;
}
.eo-sessions-toolbar-filters-row {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 14px;
}
/* Topic multiselect: grow with row up to a wide cap so long labels aren't cramped. */
.eo-sessions-topic-multiselect {
  position: relative;
  flex: 1 1 520px;
  width: 100%;
  max-width: min(720px, 100%);
  min-width: min(320px, 100%);
}
.eo-sessions-multiselect-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
}
.eo-sessions-multiselect-trigger:hover {
  border-color: var(--border-light);
  background: var(--bg-card-hover);
}
.eo-sessions-multiselect-trigger-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eo-sessions-multiselect-chevron {
  flex-shrink: 0;
  opacity: 0.65;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.eo-sessions-multiselect-chevron.open {
  transform: rotate(180deg);
}
.eo-sessions-selected-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 120px;
}
.eo-sessions-selected-chips-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-right: 2px;
}
.eo-sessions-topic-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 2px 4px 2px 8px;
  border-radius: 999px;
  background: var(--purple-bg-subtle);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-primary);
}
.eo-sessions-topic-pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}
.eo-sessions-topic-pill-remove {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.eo-sessions-topic-pill-remove:hover {
  background: var(--danger-bg-subtle, rgba(239, 68, 68, 0.12));
  color: var(--error);
}
/* Popover: use theme surfaces only ? never hardcode dark fallbacks; pastel/light
   themes use dark text tokens and would become unreadable on a dark panel. */
.eo-sessions-multiselect-panel {
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 4px;
  z-index: 60;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.eo-sessions-multiselect-search {
  width: 100%;
  padding: 8px 10px;
  font-size: 12px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  outline: none;
}
.eo-sessions-multiselect-search::placeholder {
  color: var(--text-muted);
}
.eo-sessions-multiselect-search:focus {
  border-bottom-color: var(--accent);
  box-shadow: inset 0 -1px 0 var(--accent);
}
.eo-sessions-multiselect-options {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
  background: var(--bg-card);
}
.eo-sessions-multiselect-empty {
  padding: 12px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
.eo-sessions-multiselect-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 12px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-primary);
}
.eo-sessions-multiselect-option:hover {
  background: var(--accent-bg-subtle);
}
.eo-sessions-multiselect-option input {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--purple, #8b5cf6);
}
.eo-sessions-multiselect-option span {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
  color: var(--text-primary);
  white-space: normal;
  word-break: break-word;
}
.eo-sessions-multiselect-footer {
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  background: var(--bg-tertiary);
}
.eo-sessions-multiselect-clear {
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}
.eo-sessions-multiselect-clear:hover {
  color: var(--accent-dark);
}
.eo-sessions-session-filter-empty {
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: var(--font-sm);
  color: var(--text-muted);
  background: rgba(139, 92, 246, 0.06);
  border: 1px dashed rgba(139, 92, 246, 0.25);
  border-radius: var(--radius-sm);
}
.eo-sessions-filter-empty {
  padding: 24px;
  margin-bottom: 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-sm);
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

.eo-sessions-grid-header {
  display: grid;
  grid-template-columns: 2fr 80px 80px 80px 2fr 140px;
  gap: 8px;
  padding: 8px 16px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}
.eo-sessions-grid-row {
  display: grid;
  grid-template-columns: 2fr 80px 80px 80px 2fr 140px;
  gap: 8px;
  padding: 10px 16px;
  font-size: var(--font-sm);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  align-items: center;
  transition: background 0.15s;
}
.eo-sessions-grid-row:hover {
  background: rgba(255, 255, 255, 0.02);
}
.eo-sessions-detail-panel {
  padding: 0 12px 10px;
  background: rgba(0, 0, 0, 0.12);
  border-bottom: 2px solid var(--border);
}
.eo-sessions-tier-strip {
  display: flex;
  gap: 8px;
  padding: 8px 0 4px;
  flex-wrap: wrap;
}
.eo-sessions-tier-card {
  flex: 1;
  min-width: 140px;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.eo-sessions-tier-name {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.eo-sessions-tier-counts {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.35;
}
.eo-sessions-speakers {
  padding: 6px 0 4px;
}
.eo-sessions-speakers .eo-expand-section-title {
  margin-bottom: 6px;
  padding-bottom: 4px;
}
.eo-sessions-speaker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0 0;
}
.eo-sessions-speaker-chip {
  display: flex;
  flex-direction: column;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  min-width: 160px;
}
.eo-sessions-speaker-name {
  font-weight: 600;
  color: var(--text-primary);
}
.eo-sessions-speaker-title {
  font-size: 10px;
  color: var(--accent-light);
  margin-top: 2px;
}
.eo-sessions-speaker-org {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
}
.eo-sessions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 0 4px;
}
.eo-session-card {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  transition: border-color 0.2s;
}
.eo-session-card.open {
  border-left: 3px solid var(--warning);
}
.eo-session-card.sponsored {
  border-left: 3px solid var(--success);
}
.eo-session-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
}
.eo-session-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  gap: 8px;
}
.eo-session-tier-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}
.eo-session-tier-badge.tier-platinum {
  background: rgba(234, 179, 8, 0.15);
  color: #facc15;
}
.eo-session-tier-badge.tier-keynote {
  background: rgba(234, 179, 8, 0.2);
  color: #fbbf24;
}
.eo-session-tier-badge.tier-anchor {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}
.eo-session-tier-badge.tier-exhibitor {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
}
.eo-session-tier-badge.tier-patron {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}
.eo-session-status-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 6px;
}
.eo-session-status-badge.status-open {
  background: rgba(234, 179, 8, 0.15);
  color: #facc15;
}
.eo-session-status-badge.status-filled {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}
.eo-session-type {
  font-size: 10px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}
.eo-session-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.25;
}
.eo-session-description {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.eo-session-topics-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 5px;
}
.eo-session-people {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.eo-session-person {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
}
.eo-session-role-tag {
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(139, 92, 246, 0.2);
  color: #a78bfa;
}
.eo-session-role-tag.speaker {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}
.eo-session-sponsors {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.eo-session-sponsor-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  font-size: 11px;
  color: #34d399;
  font-weight: 600;
}
.eo-session-leads {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.eo-session-lead-chip {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.15);
  color: var(--accent-light);
}
.eo-session-prospects {
  padding: 4px 0;
}
.eo-sessions-prospect-cta-block {
  padding: 6px 0 4px;
}
.eo-session-prospects .eo-expand-section-title {
  margin-bottom: 6px;
  padding-bottom: 4px;
}
.eo-session-prospect-group {
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--bg-secondary);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.eo-session-prospect-group:last-child {
  margin-bottom: 0;
}
.eo-session-prospect-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.eo-session-prospect-session-name {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-primary);
}
.eo-session-prospect-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.eo-session-prospect-row {
  display: grid;
  grid-template-columns: 24px 200px 60px 1fr;
  gap: 8px;
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 4px;
  align-items: start;
}
.eo-session-prospect-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.eo-session-prospect-rank {
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-align: right;
}
.eo-session-prospect-name {
  font-weight: 600;
  color: var(--text-primary);
}
.eo-session-prospect-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--accent-light);
}
.eo-session-prospect-summary {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ?? Staleness & Version Tracking ??????????????????????????? */
.eo-sessions-grid-row.stale {
  border-left: 3px solid var(--warning);
}
.eo-sessions-stale-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 600;
  color: var(--warning);
  background: rgba(255, 193, 7, 0.12);
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
}
.eo-sessions-reupload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.eo-sessions-reupload-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.08);
}
.eo-sessions-grid-row.stale .eo-sessions-reupload-btn {
  color: var(--warning);
  border-color: var(--warning);
}
.eo-sessions-update-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(99, 102, 241, 0.1);
  padding: 2px 8px;
  border-radius: 8px;
}

/* ?? Changelog ?????????????????????????????????????????????? */
.eo-sessions-changelog {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.eo-sessions-changelog-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.eo-sessions-changelog-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 0;
  font-size: 11px;
  line-height: 1.4;
}
.eo-sessions-changelog-icon {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-weight: 700;
}
.change-session_filled .eo-sessions-changelog-icon { color: var(--success); }
.change-session_reopened .eo-sessions-changelog-icon { color: var(--warning); }
.change-session_added .eo-sessions-changelog-icon { color: var(--primary); }
.change-session_removed .eo-sessions-changelog-icon { color: var(--error); }
.change-speaker_added .eo-sessions-changelog-icon { color: var(--accent-light); }
.change-lead_added .eo-sessions-changelog-icon { color: #f97316; }
.change-open_count_changed .eo-sessions-changelog-icon { color: var(--text-muted); }
.eo-sessions-changelog-detail {
  color: var(--text-primary);
}
.eo-sessions-changelog-session {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
  margin-left: auto;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ?? Churn Analysis Tab ???????????????????????????????????? */
.eo-tab-badge-churn {
  background: var(--error) !important;
}

.eo-churn-kpi-danger {
  border-color: rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.04);
}

.eo-churn-views {
  display: flex;
  gap: 0;
  padding: 0 32px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.eo-churn-view-btn {
  padding: 8px 16px;
  font-size: var(--font-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.eo-churn-view-btn:hover { color: var(--text-primary); }
.eo-churn-view-btn.active {
  color: var(--error);
  border-bottom-color: var(--error);
  font-weight: 600;
}

/* Churn rate badges */
.eo-churn-rate-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: var(--font-2xs);
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}
.eo-churn-rate-badge.severe { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.eo-churn-rate-badge.moderate { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.eo-churn-rate-badge.mild { background: rgba(16, 185, 129, 0.1); color: #6ee7b7; }

/* Movement mini-bar */
.eo-churn-movement-bar {
  height: 8px;
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-secondary);
  min-width: 80px;
}
.eo-cmb-retained {
  height: 100%;
  background: var(--success);
  transition: width 0.3s ease;
}
.eo-cmb-churned {
  height: 100%;
  background: var(--error);
  transition: width 0.3s ease;
}

/* Account view tags */
.eo-churn-series-tag {
  display: inline-block;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eo-churn-risk-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.eo-churn-risk-tag.high { background: rgba(239, 68, 68, 0.15); color: var(--error); }
.eo-churn-risk-tag.medium { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.eo-churn-risk-tag.low { background: rgba(16, 185, 129, 0.08); color: var(--text-muted); }

.eo-churn-status-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.eo-churn-status-badge.pipeline { background: rgba(6, 182, 212, 0.15); color: var(--cyan); }
.eo-churn-status-badge.gone { background: rgba(239, 68, 68, 0.12); color: var(--error); opacity: 0.7; }

.eo-churn-reason-tag {
  display: inline-block;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reason bar chart */
.eo-churn-reason-bar {
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
  min-width: 60px;
  max-width: 200px;
}
.eo-churn-reason-fill {
  height: 100%;
  background: var(--error);
  border-radius: 4px;
  transition: width 0.3s ease;
  min-width: 2px;
}

/* Sponsorship level cards */
.eo-churn-level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  padding: 0 0 16px;
}
.eo-churn-level-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--error);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  transition: var(--transition);
}
.eo-churn-level-card:hover { border-color: var(--border-light); transform: translateY(-1px); }
.eo-churn-level-name {
  font-size: var(--font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.eo-churn-level-count {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.eo-churn-level-rev {
  font-size: var(--font-md);
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  color: var(--error);
  margin-top: 6px;
}

/* ?? Series x Level grouped accordion ?????????????????????? */
.eo-sl-action-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}
.eo-sl-action-btn:hover { color: var(--text-primary); border-color: var(--accent); }

.eo-sl-header {
  display: grid;
  grid-template-columns: 28px 2fr 100px 80px 80px 110px 80px 1fr;
  gap: 4px;
  padding: 8px 32px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: none;
  box-shadow: 0 2px 0 var(--border);
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-primary);
}
.eo-sl-header > div:hover { color: var(--text-primary); }

.eo-sl-groups {
  padding: 0 32px 16px;
}

.eo-sl-group {
  border-bottom: 1px solid var(--border);
}
.eo-sl-group.expanded {
  background: rgba(255, 255, 255, 0.01);
}

.eo-sl-series-row {
  display: grid;
  grid-template-columns: 28px 2fr 100px 80px 80px 110px 80px 1fr;
  gap: 4px;
  padding: 10px 0;
  align-items: center;
  font-size: var(--font-sm);
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: background 0.15s;
}
.eo-sl-series-row:hover { background: var(--bg-card-hover); }

.eo-sl-col-expand { display: flex; align-items: center; justify-content: center; }
.eo-sl-col-series { overflow: hidden; text-overflow: ellipsis; font-family: inherit; }
.eo-sl-col-brand { }
.eo-sl-col-num { text-align: right; font-family: 'JetBrains Mono', monospace; font-size: var(--font-xs); }
.eo-sl-col-bar { padding-left: 8px; }

.eo-sl-level-rows {
  padding-bottom: 6px;
}

.eo-sl-level-row {
  display: grid;
  grid-template-columns: 28px 2fr 100px 80px 80px 110px 80px 1fr;
  gap: 4px;
  padding: 7px 0;
  align-items: center;
  font-size: var(--font-xs);
  font-family: 'JetBrains Mono', monospace;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  margin: 1px 0;
  transition: background 0.1s;
}
.eo-sl-level-row:hover { background: rgba(0, 0, 0, 0.14); }

.eo-sl-acct-rows {
  padding: 0 0 8px 56px;
}
.eo-sl-acct-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 12px;
  font-size: 12px;
  border-left: 2px solid var(--border);
  margin-left: 12px;
  transition: background 0.1s;
}
.eo-sl-acct-row:hover { background: rgba(255, 255, 255, 0.03); }
.eo-sl-acct-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
  font-weight: 500;
}
.eo-sl-acct-owner {
  width: 120px;
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eo-sl-acct-rev {
  width: 90px;
  flex-shrink: 0;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--error);
}

/* Series x Level badges */
.eo-churn-level-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: var(--font-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
.eo-churn-level-badge.lvl-anchor { background: rgba(245,158,11,0.15); color: #fbbf24; }
.eo-churn-level-badge.lvl-platinum { background: rgba(234,179,8,0.15); color: #facc15; }
.eo-churn-level-badge.lvl-keynote { background: rgba(234,179,8,0.2); color: #fbbf24; }
.eo-churn-level-badge.lvl-exhibitor { background: rgba(139,92,246,0.15); color: #a78bfa; }
.eo-churn-level-badge.lvl-patron { background: rgba(16,185,129,0.15); color: #34d399; }
.eo-churn-level-badge.lvl-premier { background: rgba(59,130,246,0.15); color: #60a5fa; }
.eo-churn-level-badge.lvl-gold { background: rgba(245,158,11,0.2); color: #f59e0b; }
.eo-churn-level-badge.lvl-silver { background: rgba(148,163,184,0.15); color: #94a3b8; }
.eo-churn-level-badge.lvl-bronze { background: rgba(180,83,9,0.15); color: #d97706; }

.eo-churn-acct-chip {
  display: inline-block;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.15);
  color: var(--text-secondary);
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ?? Vendors x State ???????????????????????????????????????? */
.eo-sv-header {
  display: grid;
  grid-template-columns: 28px 2fr 80px 80px 110px 80px 1fr;
  gap: 4px;
  padding: 8px 32px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: none;
  box-shadow: 0 2px 0 var(--border);
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-primary);
}
.eo-sv-header > div:hover { color: var(--text-primary); }

.eo-sv-groups { padding: 0 32px 16px; }
.eo-sv-group { border-bottom: 1px solid var(--border); }
.eo-sv-group.expanded { background: rgba(255, 255, 255, 0.01); }

.eo-sv-state-row {
  display: grid;
  grid-template-columns: 28px 2fr 80px 80px 110px 80px 1fr;
  gap: 4px;
  padding: 10px 0;
  align-items: center;
  cursor: pointer;
  transition: background 0.15s;
}
.eo-sv-state-row:hover { background: rgba(255, 255, 255, 0.03); }

.eo-sv-col-expand { display: flex; align-items: center; justify-content: center; }
.eo-sv-col-state { display: flex; align-items: center; gap: 4px; min-width: 0; }
.eo-sv-col-num { text-align: right; font-family: 'JetBrains Mono', monospace; font-size: var(--font-xs); }
.eo-sv-col-bar { padding-left: 8px; }

.eo-sv-vendor-rows {
  padding: 0 0 10px 56px;
}
.eo-sv-vendor-row {
  display: grid;
  grid-template-columns: 1.5fr 120px 120px 90px auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 5px 12px;
  font-size: 12px;
  border-left: 2px solid var(--border);
  margin-left: 12px;
  transition: background 0.1s;
}
.eo-sv-vendor-row:hover { background: rgba(255, 255, 255, 0.03); }
.eo-sv-vendor-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
  font-weight: 500;
}
.eo-sv-vendor-owner {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eo-sv-vendor-team {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eo-sv-vendor-rev {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--error);
}
.eo-sv-vendor-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.eo-sv-vendor-series {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

/* ?? Sponsor Status Tab ????????????????????????????????????? */
.eo-ss-summary {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.eo-ss-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 18px; min-width: 120px; text-align: center;
}
.eo-ss-card-val { font-size: 1.4rem; font-weight: 700; color: var(--text); }
.eo-ss-card-lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-top: 2px; }

.eo-ss-card.eo-ss-recurring .eo-ss-card-val { color: #6ee7b7; }
.eo-ss-card.eo-ss-returning .eo-ss-card-val { color: #a78bfa; }
.eo-ss-card.eo-ss-new-series .eo-ss-card-val { color: var(--accent-light); }
.eo-ss-card.eo-ss-new-er .eo-ss-card-val { color: #f59e0b; }

.eo-ss-chip {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em;
  white-space: nowrap;
}
.eo-ss-recurring { background: rgba(16,185,129,0.15); color: #6ee7b7; }
.eo-ss-returning { background: rgba(139,92,246,0.15); color: #a78bfa; }
.eo-ss-new-series { background: rgba(59,130,246,0.15); color: var(--accent-light); }
.eo-ss-new-er { background: rgba(245,158,11,0.18); color: #fbbf24; }

.eo-ss-series-hint {
  display: block; font-size: 0.65rem; color: var(--text-secondary); margin-top: 1px;
}

.eo-export-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 10px; font-size: 0.72rem; color: var(--text-secondary); cursor: pointer;
  transition: all 0.15s;
}
.eo-export-btn:hover { border-color: var(--accent); color: var(--accent-light); }

/* ?? Churn: Level-Movement Pills ??????????????????????????? */
.eo-level-move-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.eo-lm-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 9px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  line-height: 1.4;
}
.eo-lm-pill.up { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.eo-lm-pill.down { background: rgba(239, 68, 68, 0.15); color: var(--error); }
.eo-lm-pill.flat { background: rgba(148, 163, 184, 0.12); color: var(--text-muted); }
.eo-lm-pill.mute { background: rgba(148, 163, 184, 0.07); color: var(--text-muted); opacity: 0.75; }

/* ?? Churn: By-Series Detail Drawer ??????????????????????? */
.eo-mini-icon-btn {
  background: transparent; border: none; padding: 2px;
  cursor: pointer; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.eo-mini-icon-btn:hover { color: var(--accent); }
.eo-mini-icon-btn .eo-chevron {
  width: 14px; height: 14px;
  transition: transform 0.15s ease;
}
.eo-mini-icon-btn .eo-chevron.open { transform: rotate(90deg); }

.eo-churn-series-row.expanded { background: rgba(99, 102, 241, 0.04); }
.eo-churn-series-detail td {
  border-top: none !important;
}

.eo-churn-detail-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 16px 0;
  border-bottom: 1px solid var(--border);
}
.eo-cdt-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.eo-cdt-tab:hover { color: var(--text-primary); }
.eo-cdt-tab.active {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
}
.eo-cdt-count {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
  padding: 0 6px;
  border-radius: 8px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}
.eo-cdt-tab.active .eo-cdt-count {
  background: rgba(99, 102, 241, 0.2);
  color: var(--accent-light);
}

.eo-churn-detail-body {
  padding: 8px 16px 16px;
}
.eo-mini-table {
  width: 100%;
  font-size: 11px;
}
.eo-mini-table th,
.eo-mini-table td {
  padding: 4px 8px !important;
  font-size: 11px !important;
}
.eo-mini-lvl {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.1);
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ?? Series x Level: section labels for retained/promoted/demoted ?? */
.eo-sl-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 4px 56px;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.eo-sl-section-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
}

/* ?? Responsive ????????????????????????????????????????????? */
@media (max-width: 1200px) {
  .eo-trends-grid { grid-template-columns: 1fr; }
  .eo-trend-duo { grid-template-columns: 1fr; }
  .eo-narrative-strip { flex-wrap: wrap; }
  .eo-narrative-item { min-width: 140px; }
  .eo-expand-grid { grid-template-columns: 1fr; }
  .eo-movement-grid { grid-template-columns: repeat(2, 1fr); }
  .eo-churn-level-grid { grid-template-columns: repeat(2, 1fr); }
  .eo-churn-views { flex-wrap: wrap; }
  .eo-sl-header, .eo-sl-series-row, .eo-sl-level-row {
    grid-template-columns: 28px 1.5fr 80px 60px 60px 90px 70px 1fr;
    font-size: 11px;
  }
  .eo-sv-header, .eo-sv-state-row {
    grid-template-columns: 28px 1.5fr 60px 60px 90px 70px 1fr;
    font-size: 11px;
  }
  .eo-sv-vendor-row {
    grid-template-columns: 1.2fr 100px 100px 80px auto 1fr;
    font-size: 11px;
  }
}
@media (max-width: 900px) {
  .eo-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .eo-aging-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ???????????????????????????????????????????????????????????
   Quarterly Pipeline ? qp- prefix
   ??????????????????????????????????????????????????????????? */

/* ?? Header & Controls ????????????????????????????????????? */
.qp-header {
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.qp-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.qp-label {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-secondary);
}
.qp-select {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
}
.qp-select:focus { outline: none; border-color: var(--accent); }

.qp-period-picker {
  position: relative;
}
.qp-period-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  justify-content: space-between;
}
.qp-period-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 120;
  display: flex;
  min-width: 220px;
  max-height: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.qp-period-quarters {
  flex: 1 1 auto;
  min-width: 110px;
  max-height: 320px;
  overflow-y: auto;
  border-right: 1px solid var(--border-subtle, var(--border));
}
.qp-period-q-item {
  display: block;
  width: 100%;
  padding: 7px 12px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-sm);
  text-align: left;
  cursor: pointer;
}
.qp-period-q-item:hover {
  background: var(--bg-secondary, rgba(0, 0, 0, 0.04));
}
.qp-period-q-item.active {
  background: var(--accent);
  color: #fff;
}
.qp-period-months {
  flex: 0 0 140px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qp-period-months-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.qp-period-month {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  padding: 2px 0;
}
.qp-period-month input {
  accent-color: var(--accent);
  cursor: pointer;
}

.qp-stage-filters {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.qp-stage-filter-chip {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.qp-stage-filter-chip:hover { opacity: 0.85; }
.qp-stage-filter-chip.excluded {
  background: var(--bg-secondary);
  color: var(--text-muted);
  text-decoration: line-through;
  opacity: 0.6;
}
.qp-stage-filter-chip.excluded:hover { opacity: 0.8; }

/* Sold-out filter chip ? distinct from stage chips (amber/warning vs accent). */
.qp-soldout-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: var(--bg-secondary);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.qp-soldout-chip:hover { background: rgba(245, 158, 11, 0.08); color: #f59e0b; }
.qp-soldout-chip.active {
  background: rgba(245, 158, 11, 0.2);
  border-color: #f59e0b;
  color: #fbbf24;
}

/* Pipeline toolbar variant ? sized to sit flush next to .eo-select so the
   toolbar row stays aligned. The base .qp-soldout-chip is tuned for the
   tighter Quarterly header; this variant matches Event Ops toolbar height. */
.eo-pipeline-soldout-chip {
  padding: 7px 12px;
  font-size: var(--font-sm);
  border-radius: var(--radius-sm);
  line-height: 1;
  align-self: stretch;
}

/* Mass-Outflow custom template editor ? full-width fields (not squeezed in toolbar flex). */
.qp-mass {
  display: block;
  width: 100%;
  max-width: 100%;
}
.qp-mass-toolbar .qp-template-editor,
.qp-template-editor {
  display: block;
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  box-sizing: border-box;
  margin: 0 0 14px 0;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle, #e5e7eb);
  background: var(--surface, #fff);
}
.qp-template-editor__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.qp-template-editor__title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}
.qp-template-editor__hint {
  font-size: 11px;
  color: var(--text-muted);
  margin: 4px 0 0;
  line-height: 1.45;
  max-width: 720px;
}
.qp-template-editor__hint code {
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--surface-2, #f6f7f9);
}
.qp-template-editor__head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.qp-template-editor__saved {
  font-size: 11px;
  color: #059669;
  font-weight: 600;
}
.qp-template-editor__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.qp-template-editor__chip {
  font-size: 10px !important;
  padding: 2px 8px !important;
}
.qp-template-editor__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.qp-template-editor__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-width: 0;
}
.qp-template-editor__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.qp-template-editor__input,
.qp-template-editor__textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-secondary, #f9fafb);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  resize: vertical;
}
.qp-template-editor__input:focus,
.qp-template-editor__textarea:focus {
  outline: none;
  border-color: var(--accent, #4f46e5);
  background: var(--surface, #fff);
}
.qp-template-editor__field--body .qp-template-editor__textarea {
  min-height: 160px;
}
.qp-template-editor__textarea--sig {
  max-width: 420px;
  min-height: 88px;
}
.qp-owner-row__bake {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.qp-kpis {
  display: flex;
  gap: 24px;
}
.qp-kpi { text-align: center; }
.qp-kpi-value {
  font-size: var(--font-xl);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
.qp-kpi-value.accent { color: var(--accent); }
.qp-kpi-label {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ?? Shared Events Callout ????????????????????????????????? */
.qp-shared-callout {
  margin: 0 32px 12px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.qp-shared-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--accent);
}
.qp-shared-header:hover { background: rgba(59, 130, 246, 0.04); }
.qp-shared-body { padding: 0 14px 12px; }
.qp-shared-event { margin-bottom: 10px; }
.qp-shared-event-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.qp-shared-date {
  font-size: var(--font-xs);
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}
.qp-shared-opps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 8px;
}
.qp-shared-opp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

/* ?? Tree Structure ???????????????????????????????????????? */
.qp-tree { padding: 0 32px 24px; }

.qp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.qp-row:hover { background: var(--bg-card); }

.qp-row-team {
  font-weight: 700;
  font-size: var(--font-base);
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 4px;
}
.qp-row-owner {
  font-weight: 600;
  font-size: var(--font-sm);
  color: var(--text-primary);
  padding-left: 24px;
}
.qp-row-acct {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  padding-left: 40px;
}
.qp-opp-node {
  border-left: 2px solid var(--border);
  margin-left: 40px;
  padding: 8px 12px 8px 16px;
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.qp-opp-node:hover { background: var(--bg-card); }
.qp-row-opp {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 0;
  cursor: default;
  border-left: none;
  margin-left: 0;
}
.qp-row-opp:hover { background: transparent; }

.qp-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s;
  color: var(--text-muted);
}
.qp-chevron.expanded { transform: rotate(90deg); }

.qp-row-label { flex: 1; min-width: 0; }
.qp-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.qp-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.qp-count {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.qp-children {
  padding-left: 8px;
}

/* ?? Opportunity Row ??????????????????????????????????????? */
.qp-opp-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.qp-opp-name {
  font-weight: 600;
  font-size: var(--font-sm);
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.qp-opp-clickable {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s, color 0.15s;
}
.qp-opp-clickable:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
.qp-opp-amount {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.qp-opp-close {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.qp-opp-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}

/* ?? Stage Pills ??????????????????????????????????????????? */
.qp-stage-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--bg-secondary);
  color: var(--text-muted);
}
.qp-stage-pill.stage-lead-opportunity { background: rgba(99,102,241,0.15); color: #818cf8; }
.qp-stage-pill.stage-qualification { background: rgba(59,130,246,0.15); color: #60a5fa; }
.qp-stage-pill.stage-assess-interest { background: rgba(14,165,233,0.15); color: #38bdf8; }
.qp-stage-pill.stage-discover { background: rgba(6,182,212,0.15); color: #22d3ee; }
.qp-stage-pill.stage-negotiate { background: rgba(245,158,11,0.15); color: #fbbf24; }
.qp-stage-pill.stage-finalize { background: rgba(16,185,129,0.15); color: #34d399; }
.qp-stage-pill.stage-written { background: rgba(16,185,129,0.25); color: #10b981; }
.qp-stage-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}
.qp-stage-dot.stage-negotiate { background: #fbbf24; }
.qp-stage-dot.stage-finalize { background: #34d399; }
.qp-stage-dot.stage-written { background: #10b981; }
.qp-stage-dot.stage-discover { background: #22d3ee; }

/* ?? Badges ???????????????????????????????????????????????? */
.qp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.qp-badge-shared {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent);
}
.qp-badge-stale {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}
.qp-badge-soldout {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
  cursor: help;
}

.qp-task-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.qp-task-badge.task-pending {
  background: var(--bg-secondary);
  color: var(--text-muted);
}
.qp-task-badge.task-viewed {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
}
.qp-task-badge.task-responded {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
}
.qp-task-badge.task-sent {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}
.qp-task-badge.task-crm_confirmed {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

/* ?? Coaching Signals ?????????????????????????????????????? */
.qp-coaching {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 4px;
}
.qp-coaching-signal {
  font-size: 11px;
  color: var(--warning);
  padding: 2px 6px;
  background: rgba(245, 158, 11, 0.08);
  border-radius: var(--radius-sm);
}

/* Events multiselect — quarterly mass-outflow toolbar (mirrors .eo-sessions-multiselect-*) */
.qp-event-ms-wrap {
  position: relative;
  min-width: 200px;
}
.qp-event-ms-trigger {
  width: 100%;
  padding: 4px 8px;
  font-size: 11px;
  text-align: left;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.qp-event-ms-trigger-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qp-event-ms-trigger-label.is-placeholder {
  color: var(--text-muted);
  font-weight: 400;
}
.qp-event-ms-trigger-clear {
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}
.qp-event-ms-trigger-chevron {
  color: var(--text-muted);
  font-size: 10px;
  flex-shrink: 0;
}
.qp-event-ms-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  z-index: 30;
  min-width: 280px;
  background: var(--surface, #fff);
  color: var(--text-primary);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.qp-event-ms-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-subtle, #eef0f3);
}
.qp-event-ms-search {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  font-size: 11px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 4px;
}
.qp-event-ms-clear-link {
  font-size: 10px;
  color: var(--accent, #4f46e5);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.qp-event-ms-options {
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
}
.qp-event-ms-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-primary);
  line-height: 1.35;
}
.qp-event-ms-option:hover {
  background: var(--surface-hover, rgba(79, 70, 229, 0.08));
}
.qp-event-ms-option.is-selected {
  background: var(--accent-subtle, #eef2ff);
  font-weight: 600;
}
.qp-event-ms-option input[type="checkbox"] {
  margin: 2px 0 0;
  flex-shrink: 0;
}
.qp-event-ms-option span {
  flex: 1;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
}
.qp-event-ms-empty {
  padding: 8px 10px;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.qp-event-ms-footer {
  padding: 6px 10px;
  font-size: 10px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle, #eef0f3);
}

/* ?? Event Chips ??????????????????????????????????????????? */
.qp-event-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 4px;
  margin-top: 2px;
}
.qp-event-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text-secondary);
  cursor: default;
}
.qp-event-chip.shared {
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.06);
}
.qp-event-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
}
.qp-shared-icon { display: inline-flex; color: var(--accent); }

/* ?? Outflow Panel ????????????????????????????????????????? */
.qp-outflow-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
}
.qp-outflow-panel {
  width: min(640px, 90vw);
  height: 100vh;
  background: var(--bg-primary);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2);
}
.qp-outflow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.qp-outflow-header h3 {
  font-size: var(--font-base);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qp-outflow-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.qp-outflow-close:hover { color: var(--text-primary); }
.qp-outflow-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.qp-outflow-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.qp-outflow-tag {
  display: inline-flex;
  padding: 3px 8px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text-secondary);
}
.qp-outflow-subject {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.qp-outflow-subject strong {
  color: var(--text-primary);
}
.qp-outflow-email {
  font-size: var(--font-sm);
  line-height: 1.7;
  color: var(--text-primary);
}
.qp-outflow-error {
  color: var(--error);
  padding: 20px;
  text-align: center;
}
.qp-outflow-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

/* ?? Buttons ??????????????????????????????????????????????? */
.btn-xs {
  padding: 3px 10px;
  font-size: 11px;
  border-radius: var(--radius-sm);
}

/* ?? Responsive ???????????????????????????????????????????? */
@media (max-width: 768px) {
  .qp-header { flex-direction: column; align-items: flex-start; }
  .qp-kpis { flex-wrap: wrap; gap: 12px; }
  .qp-opp-node { margin-left: 24px; }
  .qp-opp-name { max-width: 180px; }
  .qp-outflow-panel { width: 100vw; }
}

/* ???????????????????????????????????????????????????????????
   Inventory Grid (sf-tools parity)
   ??????????????????????????????????????????????????????????? */

.eo-inv-value-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 28px;
  padding: 14px 18px;
  margin-bottom: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  position: relative;
}
.eo-inv-value-warn {
  flex: 1 1 100%;
  font-size: var(--font-sm);
  color: #b45309;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.eo-inv-value-stat { display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.eo-inv-value-stat.accent .eo-inv-value-num { color: var(--accent); }
.eo-inv-value-label {
  font-size: var(--font-2xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.eo-inv-value-num {
  font-size: 1.45rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  line-height: 1.15;
}
.eo-inv-value-meta {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}
.eo-inv-value-note { font-size: var(--font-2xs); color: var(--text-muted); }

.eo-inventory-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  padding: 14px 18px;
  margin-bottom: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.eo-inv-filter-group { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.eo-inv-filter-group label {
  font-size: var(--font-2xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.eo-inv-filter-group select {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  min-width: 140px;
}
.eo-inv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-sm);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px 0;
}
.eo-inv-toggle input[type="checkbox"] { accent-color: var(--accent); }
.eo-inv-filter-spacer { flex: 1 1 auto; }
.eo-inv-legend {
  display: flex;
  gap: 14px;
  font-size: var(--font-2xs);
  color: var(--text-muted);
  align-items: center;
}
.eo-inv-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.eo-inv-export {
  display: flex;
  align-items: center;
  gap: 6px;
}

.eo-inv-freshness {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-2xs);
  color: var(--text-muted);
}
.eo-inv-freshness-label {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: right;
}
.eo-inv-freshness-ts {
  font-weight: 600;
  color: var(--text-base);
  font-size: var(--font-xs);
}
.eo-inv-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--font-xs);
  font-weight: 500;
  color: var(--text-base);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}
.eo-inv-refresh-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.eo-inv-refresh-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}
.eo-inv-refresh-btn svg {
  width: 14px;
  height: 14px;
}
.eo-inv-refresh-btn svg.spinning {
  animation: eo-inv-spin 1s linear infinite;
}
@keyframes eo-inv-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.eo-inv-toast {
  margin: 8px 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid;
}
.eo-inv-toast.ok  { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.35); color: #16a34a; }
.eo-inv-toast.err { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.35); color: #dc2626; }
.eo-inv-toast-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
}

.eo-inv-loading, .eo-inv-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.eo-inv-loading .spinner { margin: 0 auto 12px; }

.eo-inv-wrap {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100vh - 280px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.eo-inv-grid {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 10.5px;
  width: 100%;
  table-layout: fixed;
}
.eo-inv-grid th,
.eo-inv-grid td {
  padding: 4px 3px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Column order: Event ? Notes ? Open Opps ? Open Sess ? [6 date cols] ? [19 tier cols]
   Width budget (table-layout: fixed): 13 + 4.5 + 2?2.8 + 6?3.1 + 19?3.05 = ~100% */
.eo-inv-grid .eo-inv-col-event    { width: 12%; }
.eo-inv-grid .eo-inv-col-notes    { width: 4%; }
.eo-inv-grid .eo-inv-col-num      { width: 2.6%; }
.eo-inv-grid .eo-inv-col-money    { width: 4.2%; }
.eo-inv-grid .eo-inv-col-date     { width: 3%; }
.eo-inv-grid .eo-inv-col-tier     { width: 2.9%; }

/* Group separators ? thicker left border between Stats / Dates / Tiers bands */
.eo-inv-grid th.eo-inv-group-start,
.eo-inv-grid td.eo-inv-group-start {
  border-left: 2px solid var(--border-strong, var(--border));
}

/* ?????????????????????????????????????????????????????????????
   Headers ? near-vertical labels with a slight down-right lean.
   Text reads bottom-to-top, top-of-letters tilted right so it
   has movement without being a fully rigid 90? column.
   ????????????????????????????????????????????????????????????? */
.eo-inv-grid thead th.eo-inv-h {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-card-strong, var(--bg-card));
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  height: 118px;
  vertical-align: bottom;
  padding: 0;
  border-bottom: 2px solid var(--border-strong, var(--border));
  overflow: visible;  /* let the tilted label overhang cleanly */
  white-space: nowrap;
}
.eo-inv-grid thead th.eo-inv-h .eo-inv-h-label {
  display: inline-block;
  /* -78? ? near-vertical reading bottom-to-top with the top of each
     word leaning slightly to the right (so the baseline trails
     down-and-to-the-right). 12? off-vertical is enough to give the
     header row some motion without the horizontal sprawl of 45?. */
  transform: rotate(-78deg);
  transform-origin: left bottom;
  position: relative;
  left: 50%;
  bottom: 6px;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 3px 2px;
}
.eo-inv-grid thead th.eo-inv-h.deadline { color: var(--warning); }
.eo-inv-grid thead th.eo-inv-h.tier    { color: var(--accent); }

/* Sticky first column (event name) ? left-aligned text, z-index above others */
.eo-inv-sticky-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-card);
  text-align: left !important;
}
.eo-inv-grid thead th.eo-inv-sticky-col { z-index: 4; }
.eo-inv-grid thead th.eo-inv-sticky-col .eo-inv-h-label {
  /* Event column is wide ? keep its header horizontal and left-aligned */
  transform: none;
  position: static;
  left: auto;
  bottom: auto;
  padding: 0 0 8px 10px;
  vertical-align: bottom;
  font-size: 11px;
  color: var(--text-primary);
}

.eo-inv-cell { color: var(--text-primary); text-align: center; }
.eo-inv-cell.date {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}
.eo-inv-cell.date.deadline {
  color: var(--warning);
  background: rgba(251, 191, 36, 0.04);
}
.eo-inv-cell.numeric { font-variant-numeric: tabular-nums; }
.eo-inv-cell.money {
  font-variant-numeric: tabular-nums;
  font-size: var(--font-xs, 11px);
  white-space: nowrap;
  color: var(--text-secondary);
}
.eo-inv-cell.money.open-potential { color: var(--accent); font-weight: 600; }
.eo-inv-cell.tier { cursor: pointer; }
.eo-inv-cell.tier:hover { background: var(--bg-hover, rgba(255,255,255,0.05)); }

/* ?????????????????????????????????????????????????????????????
   Notes cell ? narrow/collapsed by default, contenteditable.
   Auto-expands visually while focused so the user can read & edit.
   Persists via POST /api/event-operations/inventory/note.
   ????????????????????????????????????????????????????????????? */
.eo-inv-cell.note-edit {
  padding: 0;
  background: var(--bg-card);
  vertical-align: middle;
}
.eo-inv-cell.note-edit.user-edited {
  background: rgba(59, 130, 246, 0.06);
  border-left: 2px solid var(--accent);
}
.eo-inv-note-editable {
  display: block;
  min-height: 22px;
  padding: 4px 6px;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: none;
  cursor: text;
  border: 1px solid transparent;
  border-radius: 3px;
  transition: background 80ms ease, border-color 80ms ease;
}
.eo-inv-note-editable:hover {
  background: var(--bg-hover, rgba(255,255,255,0.04));
}
.eo-inv-cell.note-edit.empty .eo-inv-note-editable::before {
  content: '';
  color: var(--text-tertiary, var(--text-secondary));
  font-style: italic;
  opacity: 0.55;
}
.eo-inv-cell.note-edit.empty:hover .eo-inv-note-editable::before {
  content: '+ note';
  opacity: 0.75;
}
/* Focused state ? override width/wrap so the user can see & edit full text */
.eo-inv-note-editable.editing {
  position: relative;
  z-index: 5;
  background: var(--bg-card);
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  white-space: normal;
  overflow: visible;
  min-width: 240px;
  max-width: 360px;
  min-height: 60px;
  color: var(--text-primary);
  font-size: 11.5px;
}
.eo-inv-note-editable.saving {
  border-color: var(--success, #22c55e);
}

.eo-inv-event-name { padding: 6px 8px; }
.eo-inv-event-line {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  font-size: 11px;
}
.eo-inv-event-sub {
  margin-top: 1px;
  font-size: 9.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eo-inv-open-opps {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent);
  border-radius: 10px;
  font-weight: 600;
}
.eo-inv-open-opps-btn {
  border: 1px solid rgba(59, 130, 246, 0.35);
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
  transition: background 0.15s, transform 0.05s;
}
.eo-inv-open-opps-btn:hover {
  background: rgba(59, 130, 246, 0.28);
  transform: translateY(-1px);
}
.eo-inv-open-opps-btn:active { transform: translateY(0); }
.eo-inv-na { color: var(--text-muted); font-size: 11px; opacity: 0.55; }

/* Inventory rows on the global tab are read-only (no expand).
   Row hover highlights for scanning; tier cells stay clickable (? popover). */
.eo-inv-row { cursor: default; transition: background 0.12s; }
.eo-inv-row:hover { background: var(--bg-hover, rgba(255,255,255,0.03)); }
.eo-inv-row:hover .eo-inv-sticky-col { background: var(--bg-card); }

.eo-inv-chevron {
  width: 12px;
  height: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: 2px;
  transition: transform 0.15s;
}
.eo-inv-chevron.open {
  transform: rotate(90deg);
  color: var(--accent);
}

.eo-inv-expand-row > .eo-inv-expand-cell {
  padding: 0;
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}

/* ??????????????????????????????????????????????????????
   OPEN-OPPS SIDEBAR DRAWER (Inventory tab)
   ?????????????????????????????????????????????????????? */
.eo-opps-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1100;
  display: flex;
  justify-content: flex-end;
}
.eo-opps-drawer {
  width: 560px;
  max-width: 92vw;
  height: 100vh;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: eo-opps-slide 0.18s ease-out;
}
@keyframes eo-opps-slide {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.eo-opps-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.eo-opps-drawer-title {
  font-size: var(--font-lg, 15px);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}
.eo-opps-drawer-sub {
  font-size: var(--font-xs, 11px);
  color: var(--text-muted);
  margin-top: 2px;
}
.eo-opps-drawer-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.eo-opps-drawer-close:hover { color: var(--text-primary); }

.eo-opps-drawer-loading,
.eo-opps-drawer-error,
.eo-opps-drawer-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-sm, 13px);
}
.eo-opps-drawer-error { color: var(--error, #f87171); }

.eo-opps-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 24px;
}

/* Summary strip */
.eo-opps-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 6px;
  margin-bottom: 14px;
}
.eo-opps-summary > div { text-align: center; }
.eo-opps-summary-num {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-lg, 15px);
  font-weight: 700;
  color: var(--accent);
}
.eo-opps-summary-lbl {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Sort + search controls */
.eo-opps-drawer-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.eo-opps-drawer-controls select,
.eo-opps-drawer-controls input {
  flex: 1;
  padding: 6px 8px;
  font-size: var(--font-xs, 11px);
  background: var(--bg-card, #1a1e24);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.eo-opps-drawer-controls select { flex: 0 0 180px; }

/* Group sections */
.eo-opps-group {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-card, #1a1e24);
}
.eo-opps-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  user-select: none;
}
.eo-opps-group-head:hover { background: rgba(255, 255, 255, 0.05); }
.eo-opps-group-lbl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-sm, 13px);
  font-weight: 600;
}
.eo-opps-group-caret { color: var(--text-muted); font-size: 10px; }
.eo-opps-group-name { color: var(--text-primary); }
.eo-opps-group-inv {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  white-space: nowrap;
}
.eo-opps-group-inv-count { font-weight: 600; }
.eo-opps-group-inv-left {
  font-size: 9px;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.eo-opps-group-inv.sold-out  { color: #fca5a5; background: rgba(239, 68, 68, 0.12); }
.eo-opps-group-inv.last-unit { color: var(--warning); background: rgba(251, 191, 36, 0.12); }

/* Bundle section ? highlighted at the top of the drawer */
.eo-opps-group.is-bundle {
  border-color: rgba(168, 85, 247, 0.35);
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.06), var(--bg-card, #1a1e24));
}
.eo-opps-group.is-bundle .eo-opps-group-head {
  background: rgba(168, 85, 247, 0.08);
}
.eo-opps-group.is-bundle .eo-opps-group-name {
  color: #c4b5fd;
  letter-spacing: 0.04em;
}
.eo-opps-badge.eo-opps-bundle-levels {
  color: #c4b5fd;
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.3);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.eo-opps-group-totals {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-xs, 11px);
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}
.eo-opps-group-amt { color: var(--accent); font-weight: 700; }

.eo-opps-group-body { border-top: 1px solid var(--border); }

/* Per-opp card */
.eo-opps-card {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.eo-opps-card:last-child { border-bottom: none; }
.eo-opps-card:hover { background: rgba(59, 130, 246, 0.05); }

.eo-opps-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.eo-opps-card-main { flex: 1; min-width: 0; }
.eo-opps-card-name {
  font-size: var(--font-sm, 13px);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eo-opps-card-acct {
  font-size: var(--font-xs, 11px);
  color: var(--text-muted);
  margin-top: 1px;
}
.eo-opps-card-amt {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-sm, 13px);
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.eo-opps-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}
.eo-opps-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.eo-opps-badge.muted { color: var(--text-muted); }
.eo-opps-badge.prob-hi  { color: var(--success); background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.25); }
.eo-opps-badge.prob-mid { color: var(--warning); background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.25); }
.eo-opps-badge.prob-lo  { color: #fca5a5;       background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.25); }
.eo-opps-badge.warn     { color: var(--warning); background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.25); }
.eo-opps-stage          { color: var(--accent); background: rgba(59, 130, 246, 0.10); border-color: rgba(59, 130, 246, 0.25); }

@media (max-width: 640px) {
  .eo-opps-drawer { width: 100vw; max-width: 100vw; }
  .eo-opps-summary { grid-template-columns: repeat(2, 1fr); }
  .eo-opps-drawer-controls { flex-direction: column; }
  .eo-opps-drawer-controls select { flex: 1 1 auto; }
}

/* Tier status chip */
.eo-inv-chip {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  border: 1px solid transparent;
}
/* Inventory is a *completion* dashboard ? 100% sold-through is the win.
   Color semantics are flipped vs. scarcity views: sold = green celebration,
   partial = amber in-progress, empty = red "needs attention". The opps
   drawer keeps scarcity red because there it signals "you can't sell this". */
.eo-inv-chip.sold-out {
  background: rgba(16, 185, 129, 0.18);
  color: #86efac;
  border-color: rgba(16, 185, 129, 0.4);
}
/* Partial = fuel for momentum. Four tiers build visual heat as sell-through
   climbs ? from cool yellow at "just started" to a pulsing orange halo at
   "one more and it's gold". Keeps 12/15 from looking like 1/15. */
.eo-inv-chip.partial {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warning);
  border-color: rgba(251, 191, 36, 0.3);
}
.eo-inv-chip.partial.starting {
  /* 1?49% ? early progress, muted */
  background: rgba(251, 191, 36, 0.12);
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.25);
}
.eo-inv-chip.partial.progressing {
  /* 50?79% ? halfway home */
  background: rgba(251, 146, 60, 0.16);
  color: #fed7aa;
  border-color: rgba(251, 146, 60, 0.35);
}
.eo-inv-chip.partial.almost {
  /* 80?99% ? heat on */
  background: rgba(249, 115, 22, 0.22);
  color: #fdba74;
  border-color: rgba(249, 115, 22, 0.5);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.15);
  font-weight: 700;
}
.eo-inv-chip.partial.last-unit {
  /* One sale away from gold ? pulsing halo + bright fill so the eye can't
     miss it scanning a dense grid. Reward the "pick up the phone" moment. */
  background: linear-gradient(135deg, #f97316, #fb923c);
  color: #fff;
  border-color: #ea580c;
  font-weight: 800;
  letter-spacing: 0.03em;
  animation: eo-inv-last-unit-pulse 1.8s ease-in-out infinite;
}

@keyframes eo-inv-last-unit-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.55); }
  50%      { box-shadow: 0 0 0 4px rgba(249, 115, 22, 0);    }
}
.eo-inv-chip.available {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.3);
}

/* SOLD badge ? solid green pill reading "Sold". Hover shows the N/N count.
   Heaviest visual weight on the grid because 100% sell-through is the goal
   state we want to reward and make visible at a glance. */
.eo-inv-chip.sold-out.eo-inv-chip-badge {
  background: #16a34a;
  color: #fff;
  border-color: #15803d;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  font-size: 9.5px;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.22);
}

/* Light themes (pastel / sage / demo) — chip text was tuned for dark card
   surfaces. The same rgba fills read as pale washes on cream/rose cards and
   the light text vanishes. Darker semantic ink restores grid legibility. */
[data-theme="pastel"] .eo-inv-chip.sold-out:not(.eo-inv-chip-badge),
.pastel-mode .eo-inv-chip.sold-out:not(.eo-inv-chip-badge),
[data-theme="sage"] .eo-inv-chip.sold-out:not(.eo-inv-chip-badge),
[data-theme="demo"] .eo-inv-chip.sold-out:not(.eo-inv-chip-badge) {
  color: #047857;
  background: rgba(16, 185, 129, 0.22);
  border-color: rgba(5, 150, 105, 0.35);
}
[data-theme="pastel"] .eo-inv-chip.partial,
.pastel-mode .eo-inv-chip.partial,
[data-theme="sage"] .eo-inv-chip.partial,
[data-theme="demo"] .eo-inv-chip.partial {
  color: #92400e;
  background: rgba(245, 158, 11, 0.22);
  border-color: rgba(180, 83, 9, 0.35);
}
[data-theme="pastel"] .eo-inv-chip.partial.starting,
.pastel-mode .eo-inv-chip.partial.starting,
[data-theme="sage"] .eo-inv-chip.partial.starting,
[data-theme="demo"] .eo-inv-chip.partial.starting {
  color: #92400e;
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(180, 83, 9, 0.3);
}
[data-theme="pastel"] .eo-inv-chip.partial.progressing,
.pastel-mode .eo-inv-chip.partial.progressing,
[data-theme="sage"] .eo-inv-chip.partial.progressing,
[data-theme="demo"] .eo-inv-chip.partial.progressing {
  color: #c2410c;
  background: rgba(234, 88, 12, 0.18);
  border-color: rgba(194, 65, 12, 0.35);
}
[data-theme="pastel"] .eo-inv-chip.partial.almost,
.pastel-mode .eo-inv-chip.partial.almost,
[data-theme="sage"] .eo-inv-chip.partial.almost,
[data-theme="demo"] .eo-inv-chip.partial.almost {
  color: #9a3412;
  background: rgba(249, 115, 22, 0.22);
  border-color: rgba(154, 52, 18, 0.4);
}
[data-theme="pastel"] .eo-inv-chip.available,
.pastel-mode .eo-inv-chip.available,
[data-theme="sage"] .eo-inv-chip.available,
[data-theme="demo"] .eo-inv-chip.available {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(185, 28, 28, 0.35);
}
[data-theme="pastel"] .eo-inv-open-opps,
.pastel-mode .eo-inv-open-opps,
[data-theme="sage"] .eo-inv-open-opps,
[data-theme="demo"] .eo-inv-open-opps {
  background: var(--accent-bg);
  color: var(--accent-dark);
}
[data-theme="pastel"] .eo-inv-open-opps-btn,
.pastel-mode .eo-inv-open-opps-btn,
[data-theme="sage"] .eo-inv-open-opps-btn,
[data-theme="demo"] .eo-inv-open-opps-btn {
  border-color: color-mix(in srgb, var(--accent-dark) 35%, transparent);
}
[data-theme="pastel"] .eo-inv-open-opps-btn:hover,
.pastel-mode .eo-inv-open-opps-btn:hover,
[data-theme="sage"] .eo-inv-open-opps-btn:hover,
[data-theme="demo"] .eo-inv-open-opps-btn:hover {
  background: var(--accent-bg-strong);
}

.eo-inv-cell.inv-sold-out  { background: rgba(16, 185, 129, 0.07); }
.eo-inv-cell.inv-partial   { background: rgba(251, 191, 36, 0.04); }
.eo-inv-cell.inv-available { background: rgba(239, 68, 68, 0.03); }

/* Past dates / past deadlines ? strike them through and fade so they
   visually drop into the background without disappearing entirely. */
.eo-inv-cell.date.past-date {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--text-muted);
  opacity: 0.55;
}
.eo-inv-cell.date.deadline.past-date {
  /* Override the amber deadline tint once the date is in the past */
  color: var(--text-muted);
  background: transparent;
}

/* ?? Popover ??????????????????????????????????????????????? */
.eo-inv-popover {
  position: absolute;
  z-index: 1000;
  width: 340px;
  max-width: 90vw;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  padding: 0;
  overflow: hidden;
}
.eo-inv-pop-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(59, 130, 246, 0.06);
}
.eo-inv-pop-title {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.eo-inv-pop-count {
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--text-muted);
}
.eo-inv-pop-event {
  padding: 6px 14px;
  font-size: 11px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.eo-inv-pop-body {
  max-height: 260px;
  overflow-y: auto;
}
.eo-inv-pop-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-xs);
}
.eo-inv-pop-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.eo-inv-pop-row:last-child { border-bottom: none; }
.eo-inv-pop-acct {
  color: var(--accent);
  text-decoration: none;
  font-size: var(--font-sm);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}
.eo-inv-pop-acct:hover { text-decoration: underline; }
.eo-inv-pop-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.eo-inv-pop-status.status-activated {
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
  border-color: rgba(16, 185, 129, 0.3);
}
.eo-inv-pop-status.status-updated {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent);
  border-color: rgba(59, 130, 246, 0.3);
}
.eo-inv-pop-status.status-draft {
  background: rgba(251, 191, 36, 0.12);
  color: var(--warning);
  border-color: rgba(251, 191, 36, 0.28);
}
/* Inventory Market — candidate panel inside the cell popover */
.eo-inv-pop-sold-label {
  padding: 7px 14px 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eo-inv-pop-cands {
  border-top: 1px dashed var(--border);
}
.eo-inv-pop-cands-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 12px;
}
.eo-inv-pop-seeall {
  font-size: 10.5px;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.eo-inv-pop-seeall:hover { text-decoration: underline; }
.eo-inv-pop-cands-msg {
  padding: 10px 14px;
  font-size: var(--font-xs);
  color: var(--text-muted);
}
.eo-inv-pop-cands-msg.err { color: var(--danger, #f87171); }
.eo-inv-cand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--border);
}
.eo-inv-cand-row:last-child { border-bottom: none; }
.eo-inv-cand-main { min-width: 0; flex: 1 1 auto; }
.eo-inv-cand-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
}
.eo-inv-cand-meta > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eo-inv-cand-flag {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.04em;
  background: rgba(59, 130, 246, 0.16);
  color: var(--accent);
}
.eo-inv-cand-reason { font-style: italic; }
.eo-inv-cand-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.eo-inv-cand-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--success);
}
.eo-inv-cand-opp { padding: 4px 8px; font-size: 10.5px; }

.eo-inv-pop-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

/* ?? Inventory popover action buttons ????????????????????? */
.eo-inv-pop-actions { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.eo-inv-action-btn {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent);
  border: 1px solid rgba(59, 130, 246, 0.28);
  cursor: pointer;
  transition: background 120ms ease;
}
.eo-inv-action-btn:hover:not(:disabled) { background: rgba(59, 130, 246, 0.22); }
.eo-inv-action-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ?? Inventory action toast ??????????????????????????????? */
.eo-inv-toast {
  position: fixed; right: 24px; bottom: 24px;
  padding: 10px 14px; border-radius: 8px; font-size: 13px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35); z-index: 1200;
  display: flex; gap: 10px; align-items: center;
}
.eo-inv-toast.ok  { background: rgba(16, 185, 129, 0.12); color: var(--success); border: 1px solid rgba(16,185,129,0.3); }
.eo-inv-toast.err { background: rgba(239, 68, 68, 0.12); color: var(--danger);  border: 1px solid rgba(239, 68, 68, 0.3); }
.eo-inv-toast-link { color: inherit; text-decoration: underline; font-weight: 600; }

/* ?? Inventory ROI strip ?????????????????????????????????? */
.eo-inv-roi {
  margin: 10px 0 14px; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: 8px;
  background: rgba(59, 130, 246, 0.05);
}
.eo-inv-roi-title { font-weight: 600; font-size: 13px; margin-bottom: 8px; display: flex; gap: 10px; align-items: baseline; }
.eo-inv-roi-sub   { font-weight: 400; color: var(--text-secondary); font-size: 11px; }
.eo-inv-roi-stats { display: flex; gap: 20px; flex-wrap: wrap; }
.eo-inv-roi-stat  { display: flex; flex-direction: column; min-width: 100px; }
.eo-inv-roi-stat-label { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.eo-inv-roi-stat-value { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.eo-inv-roi-bands { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.eo-inv-roi-band  {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 11px; color: var(--text-secondary);
  background: rgba(148,163,184,0.05);
}
.eo-inv-roi-band-label { font-weight: 600; color: var(--text-primary); text-transform: capitalize; }
.eo-inv-roi-band-val   { margin-left: 6px; }

/* ?? Tearsheet modal (iframe srcdoc) ?????????????????????? */
.eo-ts-modal-overlay {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.eo-ts-modal {
  width: min(1200px, 100%); height: min(86vh, 920px);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.eo-ts-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  flex: 0 0 auto;
}
.eo-ts-modal-title {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eo-ts-modal-actions { display: flex; gap: 12px; align-items: center; }
.eo-ts-modal-link {
  font-size: 12px; color: var(--accent);
  text-decoration: none; font-weight: 600;
}
.eo-ts-modal-link:hover { text-decoration: underline; }
.eo-ts-modal-close {
  background: none; border: none; color: var(--text-secondary);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.eo-ts-modal-close:hover { color: var(--text-primary); }
.eo-ts-modal-frame {
  flex: 1 1 auto;
  width: 100%; border: 0;
  background: var(--bg-primary);
}

/* Unified inventory modal ? tab bar + body framing */
.eo-ts-modal-tabs {
  display: flex; gap: 2px;
  padding: 0 12px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.eo-ts-modal-tab {
  position: relative;
  background: none; border: 0;
  color: var(--text-secondary);
  font-size: 13px; font-weight: 500;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.eo-ts-modal-tab:hover {
  color: var(--text-primary);
  background: rgba(148, 163, 184, 0.06);
}
.eo-ts-modal-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.eo-ts-modal-tab-count {
  display: inline-block;
  min-width: 18px; padding: 1px 6px;
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-secondary);
  font-size: 11px; font-weight: 600;
  text-align: center;
}
.eo-ts-modal-tab.active .eo-ts-modal-tab-count {
  background: rgba(var(--accent-rgb, 99, 102, 241), 0.18);
  color: var(--accent);
}
.eo-ts-modal-tab-spin {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(148, 163, 184, 0.3);
  border-top-color: var(--accent);
  animation: eo-ts-tab-spin 0.8s linear infinite;
}
@keyframes eo-ts-tab-spin { to { transform: rotate(360deg); } }
.eo-ts-modal-tab-scope {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-secondary);
  align-self: center;
}
.eo-ts-modal-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-primary);
}
.eo-ts-modal-loading,
.eo-ts-modal-error {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  padding: 32px;
  text-align: center;
}
.eo-ts-modal-loading { color: var(--text-secondary); }
.eo-ts-modal-error { color: var(--error, #ef4444); }

/* ?? Prospect drawer filters + row pills ?????????????????? */
.eo-opps-drawer-filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  background: rgba(148, 163, 184, 0.04);
}
.eo-opps-drawer-filters select {
  padding: 4px 8px; border-radius: 6px;
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border); font-size: 12px;
}
.eo-opps-drawer-check { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.eo-opps-row-pill {
  display: inline-block; padding: 1px 6px; margin-left: 4px;
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 10px; color: var(--text-secondary); background: rgba(148,163,184,0.08);
  text-transform: capitalize;
}

/* ?? Inventory snapshot inside Command Center expand panel ????? */
.eo-inv-snap {
  margin: 10px 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  overflow: hidden;
}
.eo-inv-snap-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(148, 163, 184, 0.04);
}
.eo-inv-snap-title {
  font-size: 11px; font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.eo-inv-snap-sub {
  font-size: 11px; color: var(--text-muted);
}

.eo-inv-snap-body { padding: 12px; }

/* Summary strip */
.eo-inv-snap-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.eo-inv-snap-stat {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary);
  padding: 8px 10px;
  min-width: 0;
}
.eo-inv-snap-stat-label {
  font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.eo-inv-snap-stat-val {
  font-size: 15px; font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.eo-inv-snap-stat-val.muted { color: var(--text-muted); font-weight: 500; }
.eo-inv-snap-stat-val.is-btn {
  background: rgba(var(--accent-rgb, 99, 102, 241), 0.12);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb, 99, 102, 241), 0.35);
  border-radius: 4px;
  padding: 1px 8px;
  cursor: pointer;
  font-family: inherit;
}
.eo-inv-snap-stat-val.is-btn:hover {
  background: rgba(var(--accent-rgb, 99, 102, 241), 0.2);
}
.eo-inv-snap-stat-val.deadline-past   { color: var(--text-muted); }
.eo-inv-snap-stat-val.deadline-urgent { color: var(--error, #ef4444); }
.eo-inv-snap-stat-val.deadline-soon   { color: var(--warning, #f59e0b); }

.eo-inv-snap-stat-actions {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.eo-inv-snap-action {
  font-size: 11px; font-weight: 500;
  padding: 3px 8px;
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.eo-inv-snap-action:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(var(--accent-rgb, 99, 102, 241), 0.08);
}

/* Section wrappers (Deadlines / Levels / Notes) */
.eo-inv-snap-section { margin-top: 12px; }
.eo-inv-snap-section:first-of-type { margin-top: 0; }
.eo-inv-snap-section-title {
  font-size: 10px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.eo-inv-snap-chips {
  display: flex; flex-wrap: wrap;
  gap: 6px;
}

/* Deadline pills */
.eo-inv-snap-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.eo-inv-snap-pill-label {
  text-transform: capitalize;
  color: var(--text-muted);
}
.eo-inv-snap-pill-val {
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.eo-inv-snap-pill.deadline-past {
  opacity: 0.6;
}
.eo-inv-snap-pill.deadline-past .eo-inv-snap-pill-val {
  color: var(--text-muted);
  text-decoration: line-through;
}
.eo-inv-snap-pill.deadline-urgent {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
}
.eo-inv-snap-pill.deadline-urgent .eo-inv-snap-pill-val { color: var(--error, #ef4444); }
.eo-inv-snap-pill.deadline-soon {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.3);
}
.eo-inv-snap-pill.deadline-soon .eo-inv-snap-pill-val { color: var(--warning, #f59e0b); }

/* Tier chips ? clickable, status-colored, route to existing popover */
.eo-inv-snap-tier {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.eo-inv-snap-tier:hover:not(:disabled) {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.eo-inv-snap-tier:disabled {
  cursor: default;
  opacity: 0.45;
}
.eo-inv-snap-tier-label {
  text-transform: capitalize;
  color: var(--text-secondary);
}
.eo-inv-snap-tier-count {
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.15);
}
.eo-inv-snap-tier-count.na {
  background: transparent;
  color: var(--text-muted);
  font-weight: 500;
}
/* Snapshot tiers ? same completion semantics as the grid:
   sold-out = win (green), partial = in-progress (amber), available = empty (red). */
.eo-inv-snap-tier.sold-out {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.3);
}
.eo-inv-snap-tier.sold-out .eo-inv-snap-tier-count {
  background: rgba(34, 197, 94, 0.2);
  color: var(--success, #22c55e);
}
.eo-inv-snap-tier.partial {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.3);
}
.eo-inv-snap-tier.partial .eo-inv-snap-tier-count {
  background: rgba(251, 191, 36, 0.2);
  color: var(--warning, #f59e0b);
}
.eo-inv-snap-tier.available {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
}
.eo-inv-snap-tier.available .eo-inv-snap-tier-count {
  background: rgba(239, 68, 68, 0.2);
  color: var(--error, #ef4444);
}

.eo-inv-snap-note {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ???????????????????????????????????????????????????????????????
   Inventory Modal ? Research tab (native digested deep research)
   ??????????????????????????????????????????????????????????????? */
.eo-research-body { padding: 0; }
.eo-research-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 24px 28px;
}
.eo-research-headstrip {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 4px 4px 14px; border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.eo-research-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin-bottom: 4px;
}
.eo-research-headline {
  font-size: 17px; font-weight: 700; color: var(--text-primary);
}
.eo-research-sub {
  font-size: 11px; color: var(--text-muted); margin-top: 2px;
}

.eo-research-section {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  margin-bottom: 12px;
  overflow: hidden;
}
.eo-research-sec-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  background: rgba(148, 163, 184, 0.04);
  user-select: none;
}
.eo-research-sec-head:hover { background: rgba(148, 163, 184, 0.08); }
.eo-research-sec-caret {
  font-size: 9px; color: var(--text-muted);
  transition: transform .15s ease;
  display: inline-block;
}
.eo-research-sec-caret.open { transform: rotate(90deg); }
.eo-research-sec-title {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  letter-spacing: .01em;
}
.eo-research-sec-pill {
  font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 10px;
  background: rgba(99, 102, 241, 0.14); color: #a5b4fc;
  margin-left: auto;
  text-transform: uppercase; letter-spacing: .05em;
}
.eo-research-sec-pill.warn {
  background: rgba(251, 191, 36, 0.18); color: var(--warning);
}

.eo-research-digest {
  padding: 12px 16px 14px 32px;
  display: flex; flex-direction: column; gap: 8px;
}
.eo-research-digest-line {
  font-size: 13px; color: var(--text-primary);
  line-height: 1.55;
  position: relative;
}
.eo-research-digest-line::before {
  content: "?";
  position: absolute;
  left: -16px;
  color: var(--accent);
  font-size: 10px;
}
.eo-research-muted {
  font-size: 12px; color: var(--text-muted);
}
.eo-research-empty {
  padding: 14px 16px; font-size: 12px; color: var(--text-muted);
  background: rgba(148, 163, 184, 0.04);
  border-top: 1px dashed var(--border);
  line-height: 1.6;
}

.eo-research-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
  padding: 12px 14px 14px;
}
.eo-research-card {
  background: var(--bg-secondary, rgba(148, 163, 184, 0.04));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.eo-research-card-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent); font-weight: 600; margin-bottom: 3px;
}
.eo-research-card-title {
  font-size: 12px; font-weight: 700; color: var(--text-primary);
  margin-bottom: 6px;
}
.eo-research-card-body {
  font-size: 12px; color: var(--text-secondary); line-height: 1.55;
  white-space: pre-wrap;
}

.eo-research-audience {
  padding: 12px 16px 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 16px;
}
.eo-research-kv {
  display: flex; flex-direction: column; gap: 2px;
}
.eo-research-kv-k {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); font-weight: 600;
}
.eo-research-kv-v {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ???????????????????????????????????????????????????????????????
   Inventory Modal ? Prospects tab (scoring expansion cards)
   ??????????????????????????????????????????????????????????????? */
.eo-prospect-body { padding: 10px 14px 20px; overflow-y: auto; flex: 1 1 auto; }

.eo-prospect-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .15s;
}
.eo-prospect-card.expanded { border-color: rgba(99, 102, 241, 0.4); }

.eo-prospect-head {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; cursor: pointer;
  background: var(--bg-card);
}
.eo-prospect-head:hover { background: rgba(148, 163, 184, 0.04); }

.eo-prospect-title-col { flex: 1 1 auto; min-width: 0; }
.eo-prospect-title {
  font-size: 14px; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 8px;
}
.eo-prospect-flag {
  font-size: 9px; font-weight: 700; padding: 2px 6px;
  background: rgba(99, 102, 241, 0.18); color: #a5b4fc;
  border-radius: 4px; letter-spacing: .08em;
}
.eo-prospect-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.eo-prospect-sub-count { color: var(--text-muted); }

.eo-prospect-pills {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px;
}
.eo-prospect-pill {
  font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 10px;
  background: rgba(148, 163, 184, 0.12); color: var(--text-secondary);
  white-space: nowrap;
}
.eo-prospect-pill.urg  { background: rgba(239, 68, 68, 0.14);  color: #fca5a5; }
.eo-prospect-pill.scar { background: rgba(251, 191, 36, 0.14); color: var(--warning); }

.eo-prospect-score {
  display: flex; flex-direction: column; align-items: center;
  padding-left: 8px; flex-shrink: 0;
  min-width: 64px; text-align: center;
}
.eo-prospect-score-val {
  font-size: 22px; font-weight: 800; color: var(--accent);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.eo-prospect-score-lbl {
  font-size: 9px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .08em; margin-top: 2px;
}

.eo-prospect-expand {
  border-top: 1px solid var(--border);
  padding: 14px 16px 16px;
  background: rgba(148, 163, 184, 0.03);
  display: flex; flex-direction: column; gap: 14px;
}
.eo-prospect-block-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); font-weight: 700; margin-bottom: 8px;
}

.eo-prospect-bd {
  display: grid;
  grid-template-columns: 150px 1fr 42px;
  align-items: center;
  gap: 10px; margin-bottom: 4px;
}
.eo-prospect-bd-label {
  font-size: 11px; color: var(--text-secondary);
}
.eo-prospect-bd-track {
  display: block; height: 6px; border-radius: 3px;
  background: rgba(148, 163, 184, 0.15); overflow: hidden;
}
.eo-prospect-bd-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, #6366f1, #818cf8);
  transition: width .3s ease;
}
.eo-prospect-bd-pct {
  font-size: 11px; font-weight: 600; color: var(--text-primary);
  text-align: right; font-variant-numeric: tabular-nums;
}

.eo-prospect-tier-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.eo-prospect-tier-chip {
  font-size: 11px; padding: 3px 8px; border-radius: 12px;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.25);
  color: var(--text-primary);
}

.eo-prospect-ml-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 14px;
}
.eo-prospect-ml-cell {
  display: flex; flex-direction: column; gap: 1px;
}
.eo-prospect-ml-k {
  font-size: 10px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.eo-prospect-ml-v {
  font-size: 12px; font-weight: 600; color: var(--text-primary);
}

.eo-prospect-crm {
  font-size: 12px; color: var(--text-secondary);
  padding: 8px 10px; border-radius: 6px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
}
.eo-prospect-crm-warn { color: var(--warning); font-weight: 600; }

.eo-prospect-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-top: 4px;
}
.eo-prospect-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: 6px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-primary); font-size: 11px; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.eo-prospect-btn:hover { border-color: var(--accent); color: var(--accent); }


/* ???????????????????????????????????????????????????????????
   Shape-of-Churn Diagnosis (Churn Analysis tab ? Diagnosis view)
   ??????????????????????????????????????????????????????????? */
.eo-diag-wrap { padding: 0; }

.eo-diag-headline {
  font-size: 15px; font-weight: 600; line-height: 1.5;
  color: var(--text-primary);
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(168,85,247,0.04));
  border-left: 3px solid var(--accent);
  padding: 14px 18px; border-radius: 8px;
  margin-bottom: 16px;
}

/* Composition strip */
.eo-diag-comp {
  display: grid;
  grid-template-columns: 1fr auto 1fr 1fr 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
}
.eo-diag-comp-block {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.eo-diag-comp-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted);
}
.eo-diag-comp-value {
  font-size: 22px; font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.eo-diag-comp-value.green { color: #10b981; }
.eo-diag-comp-value.red { color: #ef4444; }
.eo-diag-comp-sub {
  font-size: 11px; color: var(--text-muted);
}
.eo-diag-comp-arrow {
  font-size: 24px; color: var(--text-muted); padding: 0 4px;
}

.eo-diag-callout {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: var(--text-primary);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  margin-bottom: 16px;
}
.eo-diag-callout strong { color: #f59e0b; }

/* Lens grid */
.eo-diag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.eo-diag-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.eo-diag-card-title {
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: baseline; gap: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.eo-diag-card-sub {
  font-size: 11px; font-weight: 400; color: var(--text-muted);
}

/* Bar rows (sales process + geography) */
.eo-diag-bars { display: flex; flex-direction: column; gap: 6px; }
.eo-diag-bar-row {
  display: grid;
  grid-template-columns: 180px 1fr 36px 70px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 4px 0;
  cursor: pointer;
  border-radius: 4px;
  transition: background .15s ease;
}
.eo-diag-bar-row:hover { background: rgba(99, 102, 241, 0.06); }
.eo-diag-bar-label {
  color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eo-diag-bar-track {
  height: 18px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.eo-diag-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .3s ease;
  min-width: 2px;
}
.eo-diag-bar-fill.red { background: linear-gradient(90deg, #ef4444, #f87171); }
.eo-diag-bar-fill.amber { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.eo-diag-bar-fill.green { background: linear-gradient(90deg, #10b981, #34d399); }
.eo-diag-bar-num {
  font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.eo-diag-bar-rev {
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Geography hot-spots pills */
.eo-diag-hotspots {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding-top: 4px;
}
.eo-diag-hotspots-label {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.eo-diag-hotspot-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--text-primary);
  border-radius: 12px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.eo-diag-hotspot-pill strong { color: #ef4444; }
.eo-diag-note {
  font-size: 11px; color: var(--text-muted); line-height: 1.5;
  padding-top: 6px; border-top: 1px dashed var(--border);
}
.eo-diag-note em { color: var(--text-secondary); font-style: normal; font-weight: 600; }

/* Account shape ? tenure strip */
.eo-diag-tenure-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.eo-diag-tenure-cell {
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 6px;
  text-align: center;
}
.eo-diag-tenure-num {
  font-size: 18px; font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.eo-diag-tenure-label {
  font-size: 10px; color: var(--text-muted);
}
.eo-diag-tenure-rev {
  font-size: 11px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; margin-top: 2px;
}

/* Account shape ? cross-tab */
.eo-diag-cross {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.eo-diag-cross thead th {
  text-align: left; font-size: 10px; font-weight: 600; color: var(--text-muted);
  padding: 6px 8px; border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.eo-diag-cross thead th.right { text-align: right; }
.eo-diag-cross tbody td {
  padding: 6px 8px; border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
.eo-diag-cross tbody td.right { text-align: right; }
.eo-diag-cross tbody td.mono { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-primary); }
.eo-diag-cross tbody td.mute { color: var(--text-muted); font-weight: 400; }

/* Trajectory big numbers */
.eo-diag-traj-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.eo-diag-traj-cell {
  text-align: center;
  padding: 14px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
}
.eo-diag-traj-cell.tr-declining { border-left: 3px solid #f59e0b; }
.eo-diag-traj-cell.tr-sudden    { border-left: 3px solid #ef4444; }
.eo-diag-traj-cell.tr-single_year { border-left: 3px solid #6366f1; }
.eo-diag-traj-num {
  font-size: 28px; font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.eo-diag-traj-label {
  font-size: 11px; color: var(--text-secondary); margin-top: 4px;
}
.eo-diag-traj-rev {
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

/* Cohort survival */
.eo-diag-cohort { margin-top: 4px; }
.eo-cohort-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(70px, 1fr);
  gap: 6px;
  align-items: end;
  padding: 6px 0;
}
.eo-cohort-bar {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
}
.eo-cohort-rate {
  font-size: 11px; font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.eo-cohort-fill-track {
  width: 100%; height: 80px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.eo-cohort-fill {
  width: 100%;
  border-radius: 4px 4px 0 0;
  transition: height .3s ease;
  min-height: 2px;
}
.eo-cohort-fill.red { background: linear-gradient(180deg, #f87171, #ef4444); }
.eo-cohort-fill.amber { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.eo-cohort-fill.green { background: linear-gradient(180deg, #34d399, #10b981); }
.eo-cohort-year {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.eo-cohort-size {
  font-size: 10px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ???????????????????????????????????????????????????????????
   Multi-Year Trends Tab (Shape of Churn over time)
   ??????????????????????????????????????????????????????????? */
.eo-my-wrap { padding: 16px 0; display: flex; flex-direction: column; gap: 18px; }

.eo-my-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.eo-my-title {
  font-size: 18px; font-weight: 700; color: var(--text-primary);
}
.eo-my-sub {
  font-size: 12px; color: var(--text-muted); margin-top: 2px;
}
.eo-my-controls {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted);
}

.eo-my-headline {
  font-size: 14px; font-weight: 500; line-height: 1.55;
  color: var(--text-primary);
  background: rgba(99, 102, 241, 0.06);
  border-left: 3px solid var(--accent);
  padding: 14px 18px; border-radius: 6px;
}

.eo-my-hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px;
}
.eo-my-hero-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.eo-my-hero-stat.warn { border-left: 3px solid #f59e0b; }
.eo-my-hero-stat.info { border-left: 3px solid #6366f1; }
.eo-my-hero-value {
  font-size: 28px; font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.eo-my-hero-label {
  font-size: 11px; color: var(--text-muted); line-height: 1.4;
}

/* Section block */
.eo-my-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.eo-my-section-title {
  font-size: 14px; font-weight: 700; color: var(--text-primary);
}
.eo-my-section-sub {
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
}

/* Annual revenue trend bars */
.eo-my-trend-rows { display: flex; flex-direction: column; gap: 4px; }
.eo-my-trend-row {
  display: grid;
  grid-template-columns: 90px 1fr 80px 280px;
  align-items: center; gap: 10px;
  font-size: 12px; padding: 6px 0;
}
.eo-my-trend-row.partial { opacity: 0.85; }
.eo-my-trend-year {
  font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.eo-my-trend-track {
  height: 22px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  overflow: hidden;
}
.eo-my-trend-fill {
  height: 100%;
  background: #6366f1;
  border-radius: 4px;
  transition: width .3s ease;
}
.eo-my-trend-rev {
  font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums; text-align: right;
}
.eo-my-trend-meta {
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.eo-my-partial-pill {
  display: inline-block;
  padding: 1px 6px; border-radius: 8px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #f59e0b;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
}

/* Tables */
.eo-my-table-wrap { overflow-x: auto; }
.eo-my-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.eo-my-table thead th {
  text-align: left; font-size: 10px; font-weight: 600; color: var(--text-muted);
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: 0.5px;
  white-space: nowrap;
}
.eo-my-table thead th.right { text-align: right; }
.eo-my-table tbody td {
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.eo-my-table tbody td.right { text-align: right; }
.eo-my-table tbody td.mono { font-weight: 600; color: var(--text-primary); }
.eo-my-table .eo-my-row-partial { background: rgba(245, 158, 11, 0.04); }
.eo-my-churned { color: #ef4444; font-weight: 600; }
.eo-my-new { color: #10b981; font-weight: 600; }

/* Revenue flow stacked bars */
.eo-my-flow-rows { display: flex; flex-direction: column; gap: 6px; }
.eo-my-flow-row {
  display: grid;
  grid-template-columns: 70px 1fr 80px;
  align-items: center; gap: 10px;
  font-size: 12px;
}
.eo-my-flow-row.partial { opacity: 0.85; }
.eo-my-flow-year {
  font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.eo-my-flow-stack {
  display: flex; height: 28px; border-radius: 4px; overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.eo-my-flow-seg {
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
  transition: flex .3s ease;
  min-width: 0;
  padding: 0 6px;
}
.eo-my-flow-seg.retained  { background: #6366f1; }
.eo-my-flow-seg.new       { background: #10b981; }
.eo-my-flow-seg.returned  { background: #f59e0b; }
.eo-my-flow-total {
  font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums; text-align: right;
}

.eo-my-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 11px; color: var(--text-muted);
  padding-top: 4px; border-top: 1px dashed var(--border);
}
.eo-my-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.eo-my-swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
}
.eo-my-swatch.retained   { background: #6366f1; }
.eo-my-swatch.new        { background: #10b981; }
.eo-my-swatch.returned   { background: #f59e0b; }
.eo-my-swatch.same       { background: #10b981; }
.eo-my-swatch.expanded   { background: #6366f1; }
.eo-my-swatch.contracted { background: #f59e0b; }
.eo-my-swatch.migrated   { background: #ef4444; }

/* Presence pattern grid */
.eo-my-presence-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.eo-my-presence-cell {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.eo-my-presence-cell.tone-danger  { border-left-color: #ef4444; }
.eo-my-presence-cell.tone-warning { border-left-color: #f59e0b; }
.eo-my-presence-cell.tone-info    { border-left-color: #6366f1; }
.eo-my-presence-cell.tone-success { border-left-color: #10b981; }
.eo-my-presence-num {
  font-size: 22px; font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.eo-my-presence-pct {
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.eo-my-presence-label {
  font-size: 11px; color: var(--text-muted); line-height: 1.4;
}

.eo-my-on-off {
  padding-top: 8px; border-top: 1px dashed var(--border);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.eo-my-on-off-label {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.eo-my-on-off-list { display: flex; flex-wrap: wrap; gap: 6px; }
.eo-my-on-off-pill {
  font-size: 11px;
  padding: 3px 8px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Stickiness stacked bars */
.eo-my-stick-rows { display: flex; flex-direction: column; gap: 6px; }
.eo-my-stick-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center; gap: 10px;
  font-size: 12px;
}
.eo-my-stick-row.partial { opacity: 0.85; }
.eo-my-stick-trans {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  color: var(--text-primary); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.eo-my-stick-n {
  font-size: 10px; color: var(--text-muted); font-weight: 400;
}
.eo-my-stick-stack {
  display: flex; height: 24px; border-radius: 4px; overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.eo-my-stick-seg {
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
  transition: flex .3s ease;
  min-width: 0;
}
.eo-my-stick-seg.same       { background: #10b981; }
.eo-my-stick-seg.expanded   { background: #6366f1; }
.eo-my-stick-seg.contracted { background: #f59e0b; }
.eo-my-stick-seg.migrated   { background: #ef4444; }

/* Takeaways */
.eo-my-takeaway-list { display: flex; flex-direction: column; gap: 10px; }
.eo-my-takeaway {
  display: grid; grid-template-columns: 28px 1fr;
  gap: 10px; align-items: start;
  font-size: 12px; color: var(--text-secondary); line-height: 1.6;
}
.eo-my-takeaway strong { color: var(--text-primary); font-weight: 600; }
.eo-my-takeaway-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.eo-my-takeaway-pill.info {
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #a5b4fc;
}
.eo-my-takeaway-pill.warn {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}
.eo-my-takeaway-pill.ok {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}

/* Methodology footer */
.eo-my-method {
  font-size: 11px; color: var(--text-muted); line-height: 1.6;
  padding: 12px 18px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--border);
  border-radius: 6px;
}
.eo-my-method-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 6px; color: var(--text-secondary);
}
.eo-my-method code {
  font-family: 'JetBrains Mono', Consolas, monospace;
  background: rgba(255,255,255,0.05);
  padding: 1px 5px; border-radius: 3px;
  color: var(--text-secondary);
}

/* ???????????????????????????????????????????????????????????
   Action Queue Tab (operationalized prescriptions)
   ??????????????????????????????????????????????????????????? */
.eo-aq-wrap { padding: 16px 0; display: flex; flex-direction: column; gap: 16px; }

.eo-aq-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.eo-aq-title { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.eo-aq-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; max-width: 720px; line-height: 1.5; }
.eo-aq-asof { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.eo-aq-headline {
  font-size: 14px; font-weight: 500; line-height: 1.55;
  color: var(--text-primary);
  background: rgba(99, 102, 241, 0.06);
  border-left: 3px solid var(--accent);
  padding: 14px 18px; border-radius: 6px;
}

/* Hero stats */
.eo-aq-hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px;
}
.eo-aq-hero-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.eo-aq-hero-stat.warn     { border-left: 3px solid #f59e0b; }
.eo-aq-hero-stat.critical { border-left: 3px solid #ef4444; }
.eo-aq-hero-stat.info     { border-left: 3px solid #06b6d4; }
.eo-aq-hero-sub {
  display: block; font-size: 10px; color: var(--text-muted); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.eo-aq-hero-value {
  font-size: 28px; font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.eo-aq-hero-label {
  font-size: 11px; color: var(--text-muted); line-height: 1.4;
}

/* Feed selector cards */
.eo-aq-feeds {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px;
}
.eo-aq-feed-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  display: flex; flex-direction: column; gap: 6px;
}
.eo-aq-feed-btn:hover { border-color: var(--accent); }
.eo-aq-feed-btn.active {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.08);
}
.eo-aq-feed-name {
  font-size: 13px; font-weight: 700; color: var(--text-primary);
}
.eo-aq-feed-count {
  font-size: 11px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 8px;
}
.eo-aq-feed-critical {
  display: inline-block; padding: 2px 8px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
  border-radius: 10px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.eo-aq-feed-desc {
  font-size: 11px; color: var(--text-muted); line-height: 1.5;
}

/* Tab badge for action queue (red) */
.eo-tab-badge-action {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #f87171 !important;
}

/* Multi-select toolbar */
.eo-aq-toolbar { flex-wrap: wrap; gap: 8px; }
.eo-aq-toolbar .eo-select { min-width: 110px; max-width: 220px; }
.eo-aq-toolbar .eo-select[title="Last event series"] { max-width: 280px; }
.eo-btn-clear {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  padding: 4px 10px; border-radius: 4px;
  font-size: 11px; font-weight: 600; cursor: pointer;
}
.eo-btn-clear:hover { background: rgba(239, 68, 68, 0.15); }

/* Action queue table */
.eo-aq-table-wrap {
  overflow-x: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.eo-aq-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.eo-aq-table thead th {
  text-align: left; font-size: 10px; font-weight: 600; color: var(--text-muted);
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: 0.5px;
  white-space: nowrap;
  background: rgba(255,255,255,0.02);
  position: sticky; top: 0;
}
.eo-aq-table thead th.right { text-align: right; }
.eo-aq-table thead th.sortable {
  cursor: pointer; user-select: none;
  transition: color .12s;
}
.eo-aq-table thead th.sortable:hover { color: var(--text-primary); }
.eo-aq-sort-ind {
  display: inline-block; margin-left: 4px;
  font-size: 9px; color: var(--accent);
  vertical-align: middle;
}
.eo-aq-table thead th.eo-aq-expand-col { width: 22px; padding: 8px 0 8px 8px; }
.eo-aq-table tbody td {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  vertical-align: top;
}
.eo-aq-table tbody td.right { text-align: right; font-variant-numeric: tabular-nums; }
.eo-aq-table tbody td.mono { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.eo-aq-table tbody td.eo-aq-expand-col { padding: 10px 0 10px 8px; }
.eo-aq-table tbody td.eo-aq-series { color: var(--text-secondary); max-width: 220px; line-height: 1.3; }

/* Clickable rows + expand glyph */
.eo-aq-row { cursor: pointer; transition: background .12s; }
.eo-aq-row:hover { background: rgba(99, 102, 241, 0.06); }
.eo-aq-row-body.expanded > .eo-aq-row { background: rgba(99, 102, 241, 0.10); }
.eo-aq-expand-glyph {
  display: inline-block; width: 14px; text-align: center;
  font-size: 12px; color: var(--text-muted);
  transition: transform .12s, color .12s;
}
.eo-aq-expand-glyph.open { color: var(--accent); }
.eo-aq-expand-glyph.has-opp { color: #06b6d4; font-size: 13px; }
.eo-aq-row:hover .eo-aq-expand-glyph { color: var(--text-primary); }

/* Opp status pills */
.eo-aq-opp-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
  white-space: nowrap;
}
.eo-aq-opp-pill.open {
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: #67e8f9;
}
.eo-aq-opp-pill.closed {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.eo-aq-opp-pill.none {
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}
.eo-aq-opp-pill.inline {
  margin: 0 2px; padding: 1px 6px; font-size: 9px;
}

/* Inline expand panel */
.eo-aq-expand-row > td {
  padding: 0 !important;
  background: rgba(99, 102, 241, 0.04);
  border-bottom: 1px solid var(--border) !important;
}
.eo-aq-expand-panel {
  padding: 14px 18px 16px 50px;
}
.eo-aq-expand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 24px;
  align-items: start;
}
.eo-aq-expand-section { display: flex; flex-direction: column; gap: 4px; }
.eo-aq-expand-label {
  font-size: 10px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.eo-aq-expand-value {
  font-size: 12px; line-height: 1.5; color: var(--text-primary);
}
.eo-aq-expand-value strong { color: var(--text-primary); font-weight: 600; }
.eo-aq-expand-sub { color: var(--text-muted); font-size: 11px; margin-left: 4px; }
.eo-aq-expand-warn {
  display: inline-block; padding: 1px 8px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
  border-radius: 8px;
  font-size: 10px; font-weight: 600; margin-left: 4px;
}
.eo-aq-expand-actions {
  grid-column: 1 / -1;
  display: flex; gap: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.eo-aq-action-btn {
  background: rgba(99, 102, 241, 0.10);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: var(--accent);
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}
.eo-aq-action-btn:hover { background: rgba(99, 102, 241, 0.18); }

.eo-aq-account strong { color: var(--text-primary); display: block; }
.eo-aq-acct-id {
  display: block;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 10px; color: var(--text-muted); margin-top: 2px;
}
.eo-aq-signal { color: var(--text-primary); max-width: 280px; line-height: 1.4; }
.eo-aq-rec   { color: var(--text-secondary); max-width: 320px; line-height: 1.4; font-style: italic; }
.eo-aq-down  { color: #ef4444; }
.eo-aq-up    { color: #10b981; }

/* CY-event column cell */
.eo-aq-cy-cell { white-space: nowrap; }
.eo-aq-cy-date {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 12px; color: var(--text-primary); font-weight: 500;
}
.eo-aq-cy-sub  { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.eo-aq-cy-sub.soon { color: #fbbf24; font-weight: 600; }
.eo-aq-cy-sub.past { color: var(--text-muted); }
.eo-aq-cy-empty { color: var(--text-muted); }

/* Expand-row cards (PY won opp, CY event, inventory, assets) */
.eo-aq-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px;
}

/* PY won opp card ? clickable button styled like a tile */
.eo-aq-py-opp-card {
  display: flex; flex-direction: column; gap: 3px;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.30);
  border-radius: 6px;
  padding: 8px 10px;
  text-align: left; cursor: pointer;
  transition: background .12s, border-color .12s;
  font: inherit; color: inherit;
}
.eo-aq-py-opp-card:hover {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.55);
}
.eo-aq-py-opp-amount { font-size: 16px; font-weight: 700; color: #10b981; }
.eo-aq-py-opp-meta {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-size: 11px; color: var(--text-muted);
}
.eo-aq-py-opp-level { color: var(--text-secondary); font-weight: 600; }
.eo-aq-py-opp-link { font-size: 11px; color: var(--accent); margin-top: 2px; }

/* CY event card */
.eo-aq-cy-event-card { display: flex; flex-direction: column; gap: 3px; }
.eo-aq-cy-event-name { font-weight: 600; color: var(--text-primary); font-size: 13px; }
.eo-aq-cy-event-meta {
  display: flex; flex-wrap: wrap; gap: 2px 6px;
  font-size: 11px; color: var(--text-secondary);
}
.eo-aq-cy-event-sub { margin-left: 6px; font-size: 10px; }
.eo-aq-cy-event-sub.soon { color: #fbbf24; font-weight: 600; }
.eo-aq-cy-event-sub.past { color: var(--text-muted); }
.eo-aq-cy-event-venue, .eo-aq-cy-event-brand { color: var(--text-muted); }

/* Inventory snapshot */
.eo-aq-inv-summary {
  font-size: 12px; color: var(--text-primary);
  display: flex; flex-wrap: wrap; gap: 4px 8px;
}
.eo-aq-inv-headline strong { font-size: 14px; color: var(--accent); font-weight: 700; }
.eo-aq-inv-competition { color: var(--text-muted); font-size: 11px; }
.eo-aq-inv-competition strong { color: #fbbf24; }
.eo-aq-inv-tiers {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-direction: column; gap: 3px;
}
.eo-aq-inv-tiers li {
  display: flex; flex-wrap: wrap; gap: 4px 8px;
  font-size: 11px; line-height: 1.4;
  padding: 2px 6px;
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
}
.eo-aq-inv-tier-label { color: var(--text-secondary); flex: 1 1 auto; min-width: 0; }
.eo-aq-inv-tier-count { color: var(--text-primary); font-family: 'JetBrains Mono', Consolas, monospace; }
.eo-aq-inv-tier-count strong { color: var(--accent); }
.eo-aq-inv-tier-link {
  color: var(--accent); font-size: 10px; font-weight: 600;
  text-decoration: none;
}
.eo-aq-inv-tier-link:hover { text-decoration: underline; }
.eo-aq-inv-note {
  font-size: 10px; color: var(--text-muted); font-style: italic;
  margin-top: 2px;
}

/* Asset link chips */
.eo-aq-asset-links {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.eo-aq-asset-link {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.30);
  border-radius: 12px;
  font-size: 11px; font-weight: 500;
  color: var(--accent); text-decoration: none;
  transition: background .12s, border-color .12s;
}
.eo-aq-asset-link:hover {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.55);
  text-decoration: none;
}

/* Urgency pills */
.eo-aq-urgency-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  white-space: nowrap;
}
.eo-aq-urgency-pill.u-critical {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
}
.eo-aq-urgency-pill.u-high {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}
.eo-aq-urgency-pill.u-medium {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #a5b4fc;
}
.eo-aq-urgency-pill.u-low {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* Methodology footer */
.eo-aq-method {
  font-size: 11px; color: var(--text-muted); line-height: 1.7;
  padding: 14px 18px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--border);
  border-radius: 6px;
}
.eo-aq-method-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 8px; color: var(--text-secondary);
}
.eo-aq-method-list { display: flex; flex-direction: column; gap: 4px; }
.eo-aq-method strong { color: var(--text-secondary); font-weight: 600; }
.eo-aq-method code {
  font-family: 'JetBrains Mono', Consolas, monospace;
  background: rgba(255,255,255,0.05);
  padding: 1px 5px; border-radius: 3px;
  color: var(--text-secondary);
}

/* Bucket-filter pill in toolbar */
.eo-bucket-filter-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: var(--text-primary);
  border-radius: 14px;
  font-size: 12px;
  margin-left: 8px;
}
.eo-bucket-filter-pill strong { color: var(--accent); font-weight: 600; }
.eo-bucket-filter-clear {
  background: transparent; border: none; color: var(--text-muted);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.eo-bucket-filter-clear:hover { color: #ef4444; }

/* ??????????????????????????????????????????????????????????? */
/* Retention tab ? subtab nav + Overview surface               */
/* ??????????????????????????????????????????????????????????? */
.eo-subtabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 32px 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  flex-wrap: wrap;
}
.eo-subtab {
  padding: 8px 16px;
  font-size: var(--font-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.eo-subtab:hover { color: var(--text-primary); }
.eo-subtab.active {
  color: var(--accent-light);
  border-bottom-color: var(--accent);
}
.eo-subtab svg { width: 13px; height: 13px; }
.eo-subtab .eo-tab-badge {
  background: var(--error);
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 600;
}
.eo-subtab-spacer { flex: 1; }

/* ?? Retention Overview surface ????????????????????????????? */
.eo-ro-wrap { padding: 20px 32px 32px; max-width: 1380px; }
.eo-ro-headline {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text-primary);
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.10), rgba(99, 102, 241, 0.04));
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin: 14px 0 6px;
  line-height: 1.55;
}
.eo-ro-caveat {
  font-size: var(--font-xs);
  color: var(--text-muted);
  font-style: italic;
  padding: 0 4px;
  margin-bottom: 18px;
}
.eo-ro-frame {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 24px;
}
.eo-ro-frame-title {
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--accent-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.eo-ro-frame p {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0 0 10px;
}
.eo-ro-frame p:last-child { margin-bottom: 0; }
.eo-ro-frame strong { color: var(--text-primary); }
.eo-ro-frame em { color: var(--text-muted); font-style: italic; }

/* ?? KPI strip ?????????????????????????????????????????????? */
.eo-ro-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.eo-ro-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  position: relative;
}
.eo-ro-kpi.good { border-top: 3px solid var(--success); }
.eo-ro-kpi.mid  { border-top: 3px solid var(--warning); }
.eo-ro-kpi.bad  { border-top: 3px solid var(--error); }
.eo-ro-kpi-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.eo-ro-kpi-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 4px;
  font-family: 'JetBrains Mono', monospace;
}
.eo-ro-kpi.good .eo-ro-kpi-value { color: var(--success); }
.eo-ro-kpi.mid  .eo-ro-kpi-value { color: var(--warning); }
.eo-ro-kpi.bad  .eo-ro-kpi-value { color: var(--error); }
.eo-ro-kpi-sub {
  font-size: var(--font-xs);
  color: var(--text-muted);
  line-height: 1.45;
}

/* ?? Cohort grid ???????????????????????????????????????????? */
.eo-ro-cohort-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.eo-ro-cohort {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.eo-ro-cohort.tone-danger  { border-left: 3px solid var(--error); }
.eo-ro-cohort.tone-warning { border-left: 3px solid var(--warning); }
.eo-ro-cohort.tone-info    { border-left: 3px solid var(--accent); }
.eo-ro-cohort.tone-success { border-left: 3px solid var(--success); }
.eo-ro-cohort-label {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.eo-ro-cohort-value {
  font-size: 28px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 6px;
}
.eo-ro-cohort.tone-danger  .eo-ro-cohort-value { color: var(--error); }
.eo-ro-cohort.tone-warning .eo-ro-cohort-value { color: var(--warning); }
.eo-ro-cohort-frac {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}
.eo-ro-cohort-loss {
  font-size: var(--font-xs);
  color: var(--error);
  margin-bottom: 8px;
  font-weight: 500;
}
.eo-ro-cohort-narrative {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ?? Section headers (shared by buckets / new logos / threads) ?? */
.eo-ro-section-title {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.eo-ro-section-aside {
  font-size: var(--font-xs);
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 6px;
}
.eo-ro-section-sub {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* ?? Bucket waterfall ??????????????????????????????????????? */
.eo-ro-bucket-block { margin-bottom: 28px; }
.eo-ro-buckets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.eo-ro-bucket {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.eo-ro-bucket.tone-danger  { border-top: 3px solid var(--error); }
.eo-ro-bucket.tone-warning { border-top: 3px solid var(--warning); }
.eo-ro-bucket.tone-info    { border-top: 3px solid var(--accent); }
.eo-ro-bucket.tone-success { border-top: 3px solid var(--success); }
.eo-ro-bucket-label {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.eo-ro-bucket-counts {
  font-size: 24px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 6px;
}
.eo-ro-bucket-counts-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  font-family: var(--font-sans, system-ui, sans-serif);
  margin-left: 4px;
}
.eo-ro-bucket-flow {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 6px;
}
.eo-ro-bucket-flow-py { color: var(--text-muted); }
.eo-ro-bucket-flow-arrow { margin: 0 6px; color: var(--text-muted); }
.eo-ro-bucket-flow-cy { color: var(--text-primary); font-weight: 600; }
.eo-ro-bucket.tone-danger  .eo-ro-bucket-flow-cy { color: var(--error); }
.eo-ro-bucket.tone-warning .eo-ro-bucket-flow-cy { color: var(--warning); }
.eo-ro-bucket-narrative {
  font-size: var(--font-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

/* ?? New logos block ??????????????????????????????????????? */
.eo-ro-newlogo-block { margin-bottom: 28px; }
.eo-ro-newlogo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.eo-ro-newlogo {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}
.eo-ro-newlogo-label {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-bottom: 4px;
}
.eo-ro-newlogo-value {
  font-size: 22px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent-light);
}
.eo-ro-newlogo-sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 4px;
}

/* ?? Narrative threads ?????????????????????????????????????? */
.eo-ro-narrative-block { margin-bottom: 28px; }
.eo-ro-narrative-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.eo-ro-narrative-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.eo-ro-narrative-h {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.eo-ro-narrative-item p {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}
.eo-ro-narrative-item strong { color: var(--text-primary); }
.eo-ro-narrative-item em { color: var(--text-muted); font-style: italic; }
.eo-ro-jump {
  align-self: flex-start;
  background: rgba(99, 102, 241, 0.10);
  border: 1px solid rgba(99, 102, 241, 0.30);
  color: var(--accent-light);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  margin-top: 4px;
}
.eo-ro-jump:hover {
  background: rgba(99, 102, 241, 0.18);
  border-color: var(--accent);
}

/* ?? Show-your-work export card (sits above Methodology) ???? */
.eo-ro-export {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.eo-ro-export-body { flex: 1 1 auto; min-width: 0; }
.eo-ro-export-title {
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--accent-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.eo-ro-export-text {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}
.eo-ro-export-text strong { color: var(--text-primary); }
.eo-ro-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  flex: 0 0 auto;
}
.eo-ro-export-btn:hover {
  background: var(--accent-light, var(--accent));
  border-color: var(--accent-light, var(--accent));
}
.eo-ro-export-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}
.eo-ro-export-btn svg { width: 16px; height: 16px; }
@media (max-width: 720px) {
  .eo-ro-export { flex-direction: column; align-items: stretch; }
  .eo-ro-export-btn { justify-content: center; }
}

/* ?? Methodology details ???????????????????????????????????? */
.eo-ro-method {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  margin-top: 8px;
}
.eo-ro-method summary {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.eo-ro-method summary:hover { color: var(--text-primary); }
.eo-ro-method dl {
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 18px;
  row-gap: 8px;
}
.eo-ro-method-row {
  display: contents;
}
.eo-ro-method dt {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.eo-ro-method dd {
  margin: 0;
  font-size: var(--font-xs);
  color: var(--text-muted);
  line-height: 1.55;
}

/* ?? White glove (new sponsor welcome) ????????????????????????? */
.eo-ro-newlogo-actions { margin-top: 12px; }
.eo-wg-wrap { padding: 20px 32px 32px; max-width: 1380px; }
.eo-wg-headline { margin-top: 8px; }
.eo-subtab .eo-tab-badge.eo-tab-badge-welcome {
  background: rgba(16, 185, 129, 0.2) !important;
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
  color: #6ee7b7 !important;
}
.eo-wg-kpi-strip {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin: 16px 0 8px;
}
.eo-wg-kpi {
  flex: 1; min-width: 180px;
  background: var(--bg-muted); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px 16px;
}
.eo-wg-kpi-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
.eo-wg-kpi-value { font-size: 22px; font-weight: 700; margin-top: 4px; }
.eo-wg-kpi-value.accent { color: var(--accent-light); }
.eo-wg-section-title {
  margin: 24px 0 4px;
  font-size: var(--font-sm); font-weight: 600;
  color: var(--text-primary);
}
.eo-wg-section-sub {
  margin: 0 0 12px; font-size: 12px; color: var(--text-muted); line-height: 1.5;
}
.eo-wg-playbook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.eo-wg-playbook-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.eo-wg-playbook-k {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--accent-light); margin-bottom: 8px;
}
.eo-wg-playbook-v { font-size: 12px; color: var(--text-secondary); line-height: 1.55; }
.eo-wg-toolbar { margin: 16px 0 10px; }
.eo-wg-phase { font-size: 11px; color: var(--text-muted); text-transform: capitalize; }
.eo-wg-method { margin-top: 24px; }

/* Year-2 Watch ? Got away slice + white-glove bridge */
.eo-wg-bridge {
  margin: 18px 0 8px;
  padding: 14px 16px;
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.06);
}
.eo-wg-bridge-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.eo-wg-bridge-body {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 12px;
}
.eo-aq-feed-hint {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
}
.eo-aq-gotaway-pill {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fcd34d;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
}
.eo-aq-gotaway-toggle { align-items: center; gap: 6px; }
.eo-aq-gotaway-n { font-size: 11px; color: var(--text-muted); }

/* ?? Speakers tab ??????????????????????????????????????????? */
.eo-speakers-header {
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.eo-speakers-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.eo-spk-stat {
  background: var(--surface-2, #f6f7f9);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}
.eo-spk-stat-label {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.eo-spk-stat-value {
  font-size: 22px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary);
}
.eo-spk-stat-value.accent { color: var(--accent); }
.eo-speakers-source-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}
.eo-speakers-source-note code {
  background: var(--surface-2, #f6f7f9);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10.5px;
}
.eo-speakers-empty {
  padding: 24px;
  background: var(--surface-2, #f6f7f9);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-align: center;
}
.eo-speakers-empty code {
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 3px;
}
.eo-speakers-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.eo-spk-search {
  flex: 1 1 280px;
  min-width: 220px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--surface);
  color: var(--text-primary);
}
.eo-spk-search:focus { outline: none; border-color: var(--accent); }
.eo-speakers-controls select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 12px;
  max-width: 220px;
}
.eo-spk-facet-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.eo-spk-facet-sort-label {
  font-size: 11px;
  color: var(--text-muted);
  padding: 0 6px;
  white-space: nowrap;
}
.eo-spk-facet-sort-btn {
  padding: 5px 8px;
  font-size: 11px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.eo-spk-facet-sort-btn:hover { background: rgba(15, 23, 42, 0.06); }
.eo-spk-facet-sort-btn.active {
  background: var(--accent);
  color: #fff;
}
.eo-spk-filter-ms {
  position: relative;
  min-width: 140px;
  max-width: 220px;
}
.eo-spk-filter-ms .eo-sessions-multiselect-trigger {
  width: 100%;
  max-width: 220px;
}
.eo-spk-detail-scope-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-xs);
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  margin-right: 8px;
}
.eo-spk-detail-scope-toggle input {
  accent-color: var(--accent);
  cursor: pointer;
}

.eo-spk-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -4px 0 10px;
}
.eo-spk-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 999px;
  background: rgba(107, 142, 96, 0.12);
  color: var(--text-primary);
  border: 1px solid rgba(107, 142, 96, 0.35);
}
.eo-spk-filter-chip button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.eo-spk-filter-chip button:hover { color: var(--error); }
.eo-speakers-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.eo-spk-table-wrap {
  overflow-x: auto;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.eo-spk-hier-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.eo-spk-hier-table thead th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--border);
  font-size: var(--font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
}
.eo-spk-col-toggle {
  width: 36px;
  text-align: center;
  vertical-align: middle;
}
.eo-spk-num { text-align: right; font-variant-numeric: tabular-nums; }
.eo-spk-chevron {
  font-size: 10px;
  color: var(--text-muted);
  user-select: none;
}
.eo-spk-row-sector td {
  padding: 10px 12px;
  background: var(--surface-2, #f6f7f9);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.eo-spk-row-sector:hover td { filter: brightness(0.98); }
.eo-spk-row-account td {
  padding: 8px 12px;
  background: rgba(99, 102, 241, 0.06);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.eo-spk-row-account:hover td { background: rgba(99, 102, 241, 0.1); }
.eo-spk-row-contact td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  cursor: pointer;
}
.eo-spk-row-contact:hover td { background: rgba(15, 23, 42, 0.03); }
.eo-spk-cell-rollup {
  font-size: 13px;
  color: var(--text-primary);
}
.eo-spk-cell-account { font-weight: 500; }
.eo-spk-indent-account { padding-left: 8px; }
.eo-spk-indent-contact { padding-left: 20px; border-left: 2px solid rgba(99, 102, 241, 0.35); }
.eo-spk-row-meta {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 8px;
}
.eo-spk-acct-link {
  margin-left: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.eo-spk-acct-link:hover { text-decoration: underline; }
.eo-spk-contact-name { font-weight: 600; color: var(--text-primary); }
.eo-spk-topic-inline {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Flat speaker directory (name-first, sessions nested on expand) */
.eo-spk-flat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.eo-spk-flat-table thead th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--border);
  font-size: var(--font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
}
.eo-spk-row-speaker td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  cursor: pointer;
}
.eo-spk-row-speaker:hover td { background: rgba(15, 23, 42, 0.03); }
.eo-spk-speaker-name { font-weight: 600; }
.eo-spk-name-btn {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-align: left;
}
.eo-spk-name-btn:hover { text-decoration: underline; }
.eo-spk-match-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.eo-spk-match-chip--ok {
  color: #166534;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
}
.eo-spk-match-chip--warn {
  color: #92400e;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.eo-spk-match-chip--bad {
  color: #991b1b;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.eo-spk-match-detail {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
.eo-spk-row-sessions td { padding: 0; border-bottom: 1px solid var(--border); }
.eo-spk-sessions-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: var(--font-xs);
  color: var(--text-muted);
}
.eo-spk-sessions-scope--modal {
  margin-bottom: 0;
  font-weight: 400;
}

.eo-spk-sessions-cell {
  background: var(--surface-2, #f6f7f9);
  padding: 10px 14px 12px 12px !important;
}
.eo-spk-sessions-loading {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 0;
}
.eo-spk-sessions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.eo-spk-sessions-table th {
  text-align: left;
  padding: 6px 8px;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.eo-spk-sessions-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  vertical-align: top;
}

/* Topic chips (modal + inline) */
.eo-speaker-card-topic {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 500;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.25);
  color: #4338ca;
}
.eo-speaker-card-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.eo-speaker-card-badge.gov {
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.35);
}

/* Detail modal ? must win over EO tearsheet (1300), toasts (1200), drawers (1100).
   Teleport target is body; keep backdrop nearly opaque so KPI rows cannot print through. */
#eo-speaker-detail-overlay.eo-speaker-modal-backdrop,
.eo-speaker-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  margin: 0;
  padding: 48px 20px 24px;
  background: rgb(15 23 42 / 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10050;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  isolation: isolate;
  pointer-events: auto;
}
.eo-speaker-modal {
  position: relative;
  z-index: 1;
  flex: 0 1 auto;
  isolation: isolate;
  background: var(--surface, var(--bg-secondary, #f8fafc));
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  width: min(840px, 100%);
  max-width: 100%;
  max-height: min(88vh, 880px);
  padding: 22px 26px 18px;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.06),
    0 24px 80px rgb(0 0 0 / 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
}
.eo-speaker-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.eo-speaker-modal-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.eo-speaker-modal-affil {
  font-size: 13px;
  color: var(--text-secondary, var(--text-muted));
  margin-top: 2px;
  line-height: 1.4;
}
.eo-speaker-modal-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.eo-speaker-modal-stats strong {
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
}
.eo-speaker-modal-stats a {
  color: var(--accent);
  text-decoration: none;
}
.eo-speaker-modal-stats a:hover { text-decoration: underline; }
.eo-speaker-modal-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 14px;
}
.eo-speaker-modal-sessions-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.eo-speaker-modal-sessions {
  flex: 1;
  min-height: 0;
  max-height: 460px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eo-speaker-session-affiliation {
  font-size: 11.5px;
  color: var(--text-secondary, var(--text-muted));
  margin-top: 6px;
  line-height: 1.45;
}
.eo-speaker-session-affiliation-part { font-weight: 500; color: var(--text-primary); }
.eo-speaker-session-affiliation-sep { color: var(--text-muted); font-weight: 400; }
.eo-speaker-modal-session-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  align-items: flex-start;
}
.eo-speaker-modal-session-topic {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.22);
  color: #4338ca;
  max-width: 100%;
  word-break: break-word;
}
.eo-speaker-session-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.eo-speaker-session-row:last-child { border-bottom: none; }
.eo-speaker-session-date {
  font-size: 11.5px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}
.eo-speaker-session-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.eo-speaker-session-context {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}
@media (max-width: 720px) {
  .eo-speakers-summary { grid-template-columns: repeat(2, 1fr); }
  .eo-speaker-session-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Post-Event Performance Review ? ROI questionnaire under Command Center expand */
.eo-pep-form { padding: 12px 20px 20px 20px; background: rgba(15, 23, 42, 0.22); border-top: 1px solid var(--border); }
.eo-pep-form-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.eo-pep-form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.eo-pep-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 12px 16px; }
.eo-pep-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--font-xs); }
.eo-pep-field-full { grid-column: 1 / -1; }
.eo-pep-field .eo-search { width: 100%; box-sizing: border-box; }
.eo-pep-label { font-weight: 600; color: var(--text-secondary); }
.eo-pep-hint { font-weight: 400; color: var(--text-muted); font-size: 10px; }
.eo-pep-req { color: var(--error); font-weight: 700; }
.eo-pep-field-missing .eo-pep-textarea,
.eo-pep-field-missing .eo-search { border-color: rgba(239, 68, 68, 0.55); }
.eo-pep-validation {
  font-size: 11px;
  color: var(--error);
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.eo-pep-textarea {
  width: 100%; min-height: 52px; padding: 8px 10px; border-radius: 6px; box-sizing: border-box;
  border: 1px solid var(--border); background: var(--bg-secondary, rgba(0, 0, 0, 0.2)); color: var(--text-primary);
  font-family: inherit; font-size: var(--font-xs); line-height: 1.45; resize: vertical;
}
@media (max-width: 900px) {
  .eo-pep-grid { grid-template-columns: 1fr; }
}

/* Post-event review: collapsed-row exports + compact fold panels */
.eo-pep-export-col { width: 1%; white-space: nowrap; text-align: center !important; font-size: 10px !important; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.eo-pep-export-cell { vertical-align: top; padding: 8px 6px !important; border-left: 1px solid var(--border); }
.eo-pep-row-exports { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.eo-pep-row-btn { padding: 2px 6px !important; font-size: 10px !important; min-width: 2rem; }
.eo-pep-actions-label { font-size: 10px; color: var(--text-muted); align-self: center; margin: 0 4px; }
.eo-pep-actions-hint {
  font-size: 10px;
  color: var(--text-muted);
  align-self: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}
.eo-pep-actions-divider { width: 1px; height: 18px; background: var(--border); margin: 0 6px; align-self: center; }
.eo-pep-actions-group {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 7px; border: 1px solid var(--border);
  border-radius: 8px; background: rgba(15, 23, 42, 0.12);
}
.eo-pep-group-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-secondary); align-self: center;
}
.eo-pep-form-actions .eo-pep-submit-btn:not(.is-busy) { opacity: 1; }
.eo-pep-form-actions .eo-pep-draft-btn:not(.is-busy) { opacity: 1; }
.eo-pep-form-actions .btn.is-busy { opacity: 0.65; cursor: wait; }
details.eo-xp-fold { margin-top: 10px; border: 1px solid var(--border); border-radius: 6px; background: rgba(15, 23, 42, 0.15); }
details.eo-xp-fold > summary.eo-xp-fold-summary {
  cursor: pointer; font-size: var(--font-xs); font-weight: 600; padding: 8px 12px;
  list-style: none; color: var(--text-secondary);
}
details.eo-xp-fold > summary::-webkit-details-marker { display: none; }
details.eo-xp-fold > .eo-xp-fold-body { padding: 0 12px 12px 12px; }

/* ????????????????????????????????????????????????????
   Contract Roles tab ? sponsor contact lookup for outreach.
   Backed by /api/event-operations/contract-roles
   (etl/contract_contact_roles.py + services/contract_roles.py).
   ???????????????????????????????????????????????????? */
.eo-cr-header {
  padding: 14px 32px 8px 32px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.eo-cr-export-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface-elevated); color: var(--text-primary);
  font-size: var(--font-sm); font-weight: 500; cursor: pointer; white-space: nowrap;
  flex-shrink: 0;
}
.eo-cr-export-btn:hover:not(:disabled) {
  border-color: var(--accent); color: var(--accent);
}
.eo-cr-export-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.eo-cr-title { display: flex; flex-direction: column; gap: 2px; }
.eo-cr-title strong { font-size: var(--font-md); }
.eo-cr-subtitle { font-size: 11px; color: var(--text-muted); }
.eo-cr-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eo-cr-search {
  flex: 1 1 220px; min-width: 180px;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); color: var(--text); font-size: var(--font-sm);
}
.eo-cr-meta { font-size: 11px; color: var(--text-muted); }

.eo-cr-empty {
  margin: 24px 32px; padding: 18px 22px;
  background: rgba(15, 23, 42, 0.20);
  border: 1px dashed var(--border); border-radius: 6px;
  font-size: var(--font-sm); color: var(--text-secondary); line-height: 1.45;
}
.eo-cr-empty-inline {
  font-size: 11px; color: var(--text-muted); padding: 6px 0;
}

.eo-cr-body {
  display: grid; grid-template-columns: minmax(320px, 1fr) minmax(420px, 1.4fr);
  gap: 16px; padding: 14px 32px 24px 32px; align-items: start;
}
@media (max-width: 1100px) {
  .eo-cr-body { grid-template-columns: 1fr; }
}

.eo-cr-event-name {
  font-size: var(--font-md); font-weight: 600; padding: 0 0 6px 0; color: var(--text);
}
.eo-cr-table { width: 100%; }
.eo-cr-row { cursor: pointer; }
.eo-cr-row.active td { background: rgba(99, 102, 241, 0.18); }
.eo-cr-sponsor-name { font-weight: 600; font-size: var(--font-sm); }
.eo-cr-sponsor-status { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.eo-cr-tier-chip {
  display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 10px;
  background: rgba(99, 102, 241, 0.18); color: var(--text);
  border: 1px solid rgba(99, 102, 241, 0.35);
}

.eo-cr-detail { display: flex; flex-direction: column; gap: 14px; }
.eo-cr-composer, .eo-cr-roles {
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); padding: 12px 14px;
}
.eo-cr-composer-head, .eo-cr-roles-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 8px;
}
.eo-cr-rationale { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.4; }
.eo-cr-warning {
  font-size: 11px; padding: 6px 10px; border-radius: 4px;
  background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.4);
  color: var(--text); margin-bottom: 10px;
}

.eo-cr-recipient-block { margin-top: 10px; }
.eo-cr-recipient-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--text-secondary); padding: 4px 0;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.eo-cr-recipient {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; gap: 10px;
  border-bottom: 1px dotted var(--border);
}
.eo-cr-recipient:last-child { border-bottom: none; }
.eo-cr-recipient-name { font-size: var(--font-sm); font-weight: 500; }
.eo-cr-recipient-email { font-size: 11px; color: var(--text-muted); }
.eo-cr-recipient-title { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.eo-cr-missing-email { color: var(--error, #ef4444); font-style: italic; }

.eo-cr-role-chip {
  display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 10px;
  background: rgba(34, 197, 94, 0.18); color: var(--text);
  border: 1px solid rgba(34, 197, 94, 0.35);
}
.eo-cr-role-chip.unmapped {
  background: rgba(148, 163, 184, 0.18); border-color: rgba(148, 163, 184, 0.4);
  color: var(--text-muted); font-style: italic;
}
.eo-cr-primary-flag {
  display: inline-block; margin-left: 6px; font-size: 9px;
  padding: 1px 5px; border-radius: 3px; background: var(--accent, #6366f1); color: white;
  text-transform: uppercase; letter-spacing: 0.5px;
}

.eo-cr-actions {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.eo-cr-action-hint { font-size: 10px; color: var(--text-muted); flex: 1 1 auto; }
.eo-cr-roles-table { width: 100%; }
.eo-cr-roles-table th { font-size: 10px; text-transform: uppercase; color: var(--text-muted); }
.eo-cr-roles-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }

/* ?? Sponsor Registrations tab ????????????????????????????? */
.eo-sr-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding: 8px 0 12px; flex-wrap: wrap;
}
.eo-sr-subtitle { display: block; font-size: 11px; color: var(--text-muted); margin-top: 4px; max-width: 640px; }
.eo-sr-kpis { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); }
.eo-sr-kpi-highlight { color: var(--accent, #6366f1); font-weight: 600; }
.eo-sr-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.eo-sr-grid {
  display: grid; grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 18px; align-items: flex-start;
}
.eo-sr-list {
  border: 1px solid var(--border); border-radius: 6px;
  max-height: 72vh; overflow: auto; background: var(--surface);
}
.eo-sr-acct-row {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.eo-sr-acct-row:hover { background: var(--surface-2, rgba(0,0,0,0.03)); }
.eo-sr-acct-row.active { background: rgba(99, 102, 241, 0.08); border-left: 3px solid var(--accent, #6366f1); }
.eo-sr-acct-name { font-weight: 600; font-size: 13px; }
.eo-sr-acct-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.eo-sr-overlap-pill {
  display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 10px;
  background: rgba(99, 102, 241, 0.15); color: var(--accent, #6366f1); font-weight: 600;
}
.eo-sr-detail { min-height: 200px; }
.eo-sr-empty {
  padding: 48px 20px; text-align: center; color: var(--text-muted); font-size: 13px;
  border: 1px dashed var(--border); border-radius: 6px;
}
.eo-sr-detail-head { margin-bottom: 12px; }
.eo-sr-detail-head h3 { margin: 0 0 6px; font-size: 16px; }
.eo-sr-detail-kpis { font-size: 12px; color: var(--text-secondary); display: flex; gap: 12px; flex-wrap: wrap; }
.eo-sr-events { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.eo-sr-event-chip {
  font-size: 11px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; color: var(--text-secondary);
}
.eo-sr-event-chip.active { border-color: var(--accent, #6366f1); background: rgba(99, 102, 241, 0.1); color: var(--accent, #6366f1); }
.eo-sr-event-clear { font-style: italic; }
.eo-sr-table-wrap { border: 1px solid var(--border); border-radius: 6px; overflow: auto; max-height: 60vh; }
.eo-sr-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.eo-sr-table th {
  position: sticky; top: 0; background: var(--surface-2, #f6f7f9);
  text-align: left; padding: 8px 10px; font-size: 10px; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 1px solid var(--border);
}
.eo-sr-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.eo-sr-row-overlap { background: rgba(99, 102, 241, 0.04); }
.eo-sr-muted { font-size: 11px; color: var(--text-muted); }
.eo-sr-select {
  margin-left: 6px; font-size: 12px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 4px; background: var(--surface);
}
.eo-sr-expand-cell { width: 28px; text-align: center; vertical-align: middle; }
.eo-sr-expand-btn {
  border: none; background: none; cursor: pointer; color: var(--accent, #6366f1);
  font-size: 10px; padding: 2px 4px;
}
.eo-sr-overlap-btn { border: none; cursor: pointer; }
.eo-sr-prior-detail-row td { background: rgba(99, 102, 241, 0.03); padding: 0 !important; }
.eo-sr-prior-panel { padding: 10px 14px 12px 36px; }
.eo-sr-prior-panel-title { font-size: 11px; font-weight: 600; margin-bottom: 6px; color: var(--text-secondary); }
.eo-sr-prior-list { margin: 0; padding-left: 18px; font-size: 12px; }
.eo-sr-prior-list li { margin-bottom: 4px; }
.eo-sr-prior-cat {
  display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 8px;
  background: var(--surface-2, #f0f0f0); margin-right: 6px; color: var(--text-muted);
}
.eo-sr-row-expanded > td { border-bottom: none; }
.eo-sr-horizon-badge {
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: rgba(99, 102, 241, 0.1); color: var(--accent, #6366f1); white-space: nowrap;
}
.eo-sr-horizon-badge--all { background: rgba(34, 197, 94, 0.12); color: #15803d; }
.eo-sr-show-all-toggle { margin-left: auto; }
.eo-sr-modal-backdrop {
  position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.eo-sr-modal {
  width: min(420px, 100%); background: var(--surface, #fff); border-radius: 8px;
  padding: 20px 22px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.eo-sr-modal h4 { margin: 0 0 8px; font-size: 15px; }
.eo-sr-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ============================================================
   Enroll-in-Sequence modal ? Quarterly Pipeline ? Outflow Engine
   bridge. Scoped under .qp-seq-* so it doesn't collide with the
   existing .eo-speaker-modal-* family. Styles mirror the speaker
   modal's look-and-feel (deep-slate backdrop, sage-card surface)
   for visual consistency across the quarterly tab.
   ============================================================ */
.qp-seq-modal-backdrop {
  position: fixed; inset: 0;
  width: 100vw; min-height: 100vh; min-height: 100dvh;
  box-sizing: border-box; margin: 0; padding: 36px 20px 24px;
  background: rgb(15 23 42 / 0.92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 10050;
  display: flex; align-items: flex-start; justify-content: center;
  overflow-x: hidden; overflow-y: auto; isolation: isolate;
}
.qp-seq-modal {
  position: relative; z-index: 1; flex: 0 1 auto; isolation: isolate;
  background: var(--surface, var(--bg-secondary, #f8fafc));
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  width: min(960px, 100%); max-width: 100%;
  max-height: calc(100vh - 60px);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.qp-seq-modal-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.qp-seq-modal-title { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.qp-seq-modal-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.qp-seq-modal-body {
  padding: 14px 20px; overflow-y: auto; flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.qp-seq-modal-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-top: 1px solid var(--border);
  background: var(--surface-2, var(--bg-tertiary, #eef0f3));
  flex-shrink: 0; flex-wrap: wrap;
}
.qp-seq-loading {
  padding: 36px; text-align: center;
}
.qp-seq-error {
  padding: 12px 14px; margin: 0 20px 14px;
  background: rgb(239 68 68 / 0.08);
  border: 1px solid rgb(239 68 68 / 0.3);
  color: #b91c1c; border-radius: 6px; font-size: 12px;
}
.qp-seq-warn-text { color: #b45309; font-weight: 600; }
.qp-seq-muted-text { color: var(--text-muted); }

/* ----- Sections ----- */
.qp-seq-section {
  background: var(--surface, #fff);
  border: 1px solid var(--border-subtle, #eef0f3);
  border-radius: 8px; padding: 12px 14px;
}
.qp-seq-section-warn { border-color: rgb(217 119 6 / 0.4); background: rgb(254 243 199 / 0.18); }
.qp-seq-section-muted { background: var(--surface-2, #f6f7f9); }
.qp-seq-section-head {
  font-size: var(--font-xs, 11px); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); margin-bottom: 8px;
}
.qp-seq-section-help {
  font-size: 11.5px; color: var(--text-secondary, var(--text-muted));
  line-height: 1.5; margin: 0 0 10px; padding: 6px 10px;
  background: var(--surface-2, #f6f7f9); border-radius: 6px;
}
.qp-seq-section-help em { font-style: italic; color: var(--text-primary); }

/* ----- Event grid (section 1) ----- */
.qp-seq-event-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.qp-seq-event-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px;
  background: var(--surface-2, #f6f7f9);
  border: 1px solid var(--border-subtle, #eef0f3);
  border-radius: 6px;
}
.qp-seq-event-meta { min-width: 0; }
.qp-seq-event-name { font-size: 13px; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qp-seq-event-date { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.qp-seq-event-picker {
  display: flex; flex-direction: column; gap: 3px;
}
.qp-seq-event-picker-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted);
}
.qp-seq-event-select {
  width: 100%;
  padding: 6px 8px; font-size: 12px;
  border: 1px solid var(--border, #d1d5db); border-radius: 4px;
  background: var(--surface, #fff);
}

/* ----- Multi-event collision section (section 2) ----- */
.qp-seq-multi-list { display: flex; flex-direction: column; gap: 8px; }
.qp-seq-multi-row {
  padding: 10px 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border-subtle, #eef0f3);
  border-radius: 6px;
}
.qp-seq-multi-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 6px;
}
.qp-seq-multi-name { font-weight: 600; font-size: 13px; }
.qp-seq-multi-email { font-size: 11.5px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
.qp-seq-multi-count {
  font-size: 10px; padding: 2px 6px; border-radius: 10px;
  background: rgb(217 119 6 / 0.15); color: #92400e; font-weight: 700;
}
.qp-seq-multi-events { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.qp-seq-multi-chip {
  font-size: 10.5px; padding: 2px 7px; border-radius: 10px;
  background: rgb(99 102 241 / 0.08); border: 1px solid rgb(99 102 241 / 0.22);
  color: #4338ca;
}
.qp-seq-multi-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.qp-seq-multi-btn {
  font-size: 11px; padding: 4px 10px; border-radius: 4px;
  background: var(--surface-2, #f5f6f8); color: var(--text-secondary, var(--text-muted));
  border: 1px solid var(--border, #d1d5db); cursor: pointer;
}
.qp-seq-multi-btn:hover { background: var(--surface, #fff); }
.qp-seq-multi-btn.is-active {
  background: var(--accent-subtle, #eef2ff); color: var(--accent, #4f46e5);
  border-color: var(--accent, #4f46e5); font-weight: 600;
}
.qp-seq-multi-btn-sm { font-size: 10.5px; padding: 3px 8px; }
.qp-seq-multi-pick { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 0 0; font-size: 12px; }
.qp-seq-multi-pick-opt { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.qp-seq-multi-merge { padding: 8px 0 0; }

.qp-seq-merge-preview {
  margin-top: 8px; padding: 8px 10px;
  background: var(--surface-2, #f6f7f9);
  border-radius: 6px; font-size: 11.5px;
}
.qp-seq-merge-preview-head {
  font-weight: 600; margin-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle, #eef0f3); padding-bottom: 4px;
}
.qp-seq-merge-step { padding: 4px 0; border-bottom: 1px dashed var(--border-subtle, #eef0f3); }
.qp-seq-merge-step:last-child { border-bottom: none; }
.qp-seq-merge-step-head { font-weight: 600; font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; }
.qp-seq-merge-step-subj { margin-top: 2px; }

/* ----- Enrollee list (section 3) ----- */
.qp-seq-enrollees-block { margin-top: 6px; }
.qp-seq-enrollees-block:first-child { margin-top: 0; }
.qp-seq-enrollees-head {
  font-size: 12px; font-weight: 600; color: var(--text-secondary, var(--text-muted));
  padding: 6px 0 4px; border-bottom: 1px solid var(--border-subtle, #eef0f3);
  margin-bottom: 4px;
}
.qp-seq-enrollee-row {
  border-bottom: 1px solid var(--border-subtle, #eef0f3);
}
.qp-seq-enrollee-row:last-child { border-bottom: none; }
.qp-seq-enrollee-row.is-done { background: rgb(34 197 94 / 0.04); }
.qp-seq-enrollee-row.is-error { background: rgb(239 68 68 / 0.05); }
.qp-seq-enrollee-main {
  display: flex; align-items: center; gap: 10px; padding: 8px 6px;
  cursor: pointer; user-select: none;
}
.qp-seq-enrollee-main:hover { background: var(--surface-2, #f6f7f9); }
.qp-seq-enrollee-who { flex: 1; min-width: 0; }
.qp-seq-enrollee-name { font-size: 12.5px; font-weight: 600; }
.qp-seq-enrollee-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qp-seq-enrollee-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.qp-seq-multi-flag {
  font-size: 9.5px; padding: 1px 5px; border-radius: 3px;
  background: rgb(217 119 6 / 0.15); color: #92400e;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  margin-left: 6px;
}
.qp-seq-result-chip {
  font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.qp-seq-result-chip.is-ok { background: rgb(34 197 94 / 0.18); color: #047857; }
.qp-seq-result-chip.is-err { background: rgb(239 68 68 / 0.15); color: #b91c1c;
  cursor: help; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.qp-seq-row-remove {
  background: transparent; border: 1px solid transparent;
  color: var(--text-muted); cursor: pointer;
  font-size: 16px; line-height: 1; font-weight: 600;
  width: 24px; height: 24px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s, border-color .12s;
}

.qp-seq-sig-flag {
  font-size: 9.5px; padding: 1px 5px; border-radius: 3px;
  background: rgb(217 119 6 / 0.15); color: #92400e;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  margin-left: 6px; cursor: help;
}
.qp-seq-swapped-flag {
  font-size: 9.5px; padding: 1px 5px; border-radius: 3px;
  background: rgb(59 130 246 / 0.15); color: #1d4ed8;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  margin-left: 6px; cursor: help;
}

.qp-seq-skipped-row-action {
  flex-direction: column; align-items: stretch; gap: 6px;
  padding: 8px 10px; background: var(--surface-2, #f6f7f9);
  border: 1px solid var(--border-subtle, #eef0f3); border-radius: 5px;
  margin-bottom: 6px;
}
.qp-seq-skipped-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.qp-seq-skipped-acct { font-weight: 600; color: var(--text-primary); font-size: 12px; }
.qp-seq-alt-pane {
  margin-top: 4px; padding: 8px 10px;
  background: var(--surface, #fff);
  border: 1px solid var(--border-subtle, #eef0f3); border-radius: 4px;
}
.qp-seq-alt-list { display: flex; flex-direction: column; gap: 6px; }
.qp-seq-alt-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 8px; border-radius: 4px;
  transition: background .12s;
}
.qp-seq-alt-row:hover { background: var(--surface-2, #f6f7f9); }
.qp-seq-alt-who { flex: 1; min-width: 0; }
.qp-seq-alt-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.qp-seq-alt-email { font-size: 11.5px; color: var(--text-muted); font-weight: 400; }
.qp-seq-alt-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.qp-seq-foot-stack {
  display: flex; flex-direction: column; gap: 8px;
}
.qp-seq-foot-compliance {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-secondary);
  cursor: pointer; user-select: none;
}
.qp-seq-foot-compliance input[type="checkbox"] { margin: 0; }
.qp-seq-row-remove:hover {
  background: rgb(239 68 68 / 0.12); color: #b91c1c;
  border-color: rgb(239 68 68 / 0.22);
}
.qp-seq-enrollee-row.is-excluded { opacity: 0.55; }
.qp-seq-enrollee-row.is-excluded .qp-seq-enrollee-name { text-decoration: line-through; }
.qp-seq-excluded-flag {
  font-size: 9.5px; padding: 1px 5px; border-radius: 3px;
  background: rgb(107 114 128 / 0.18); color: #4b5563;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  margin-left: 6px;
}

.qp-seq-enrollee-detail {
  padding: 8px 12px 12px 18px; background: var(--surface-2, #f6f7f9);
  border-left: 3px solid var(--accent, #4f46e5);
}
.qp-seq-from-line {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; margin-bottom: 8px;
}
.qp-seq-sendas-select {
  padding: 3px 6px; font-size: 11px; border-radius: 4px;
  border: 1px solid var(--border, #d1d5db); background: var(--surface, #fff);
}
.qp-seq-sendas-input {
  padding: 3px 8px; font-size: 11px; border-radius: 4px;
  border: 1px solid var(--border, #d1d5db); min-width: 200px;
}

.qp-seq-step-list { display: flex; flex-direction: column; gap: 8px; }
.qp-seq-step {
  padding: 6px 10px; background: var(--surface, #fff);
  border: 1px solid var(--border-subtle, #eef0f3); border-radius: 6px;
  font-size: 12px;
}
.qp-seq-step-head { font-size: 10.5px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em; }
.qp-seq-step-subj { margin: 4px 0; font-weight: 600; }
.qp-seq-step-body summary { font-size: 11px; color: var(--accent, #4f46e5); cursor: pointer; }
.qp-seq-step-body-html {
  margin-top: 6px; padding: 8px 10px;
  background: var(--surface-2, #f6f7f9); border-radius: 4px;
  font-size: 12px; line-height: 1.5;
}
.qp-seq-loading-inline { display: flex; align-items: center; padding: 6px 0; font-size: 11.5px; color: var(--text-muted); }
.spinner-xs { width: 12px; height: 12px; border-width: 2px; }

/* ----- Skipped list ----- */
.qp-seq-skipped-list { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; }
.qp-seq-skipped-row { padding: 3px 0; }

/* ----- Footer default-send-as picker ----- */
.qp-seq-foot-default-sendas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════
   Pipeline Outflow Mode — drawer + per-row Compose button
   Toggled from /event-operations?tab=pipeline. Drawer is a fixed-
   position right-side panel; attendee list shows prior-instance
   private-sector attendees with chip-with-dropdown for multi-event,
   ContactValueEngine fallback picker for unresolved rows.
   ════════════════════════════════════════════════════════════════ */

/* ----- Toggle pill in toolbar ----- */
.pipe-outflow-toggle-label { padding-left: 4px; }
.pipe-outflow-attn-filter { padding-left: 4px; }

/* ----- "Edit my template" toggle in toolbar ----- */
.pipe-outflow-edit-template-btn {
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* ----- Inline Pipeline-Outflow template editor ----- */
.pipe-outflow-template-editor {
  margin: 12px 0 16px;
  padding: 16px 18px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 8px;
  background: var(--bg-secondary, #f8f9f7);
}
.pipe-outflow-template-editor__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}
.pipe-outflow-template-editor__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.pipe-outflow-template-editor__hint {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  line-height: 1.5;
  margin: 0;
  max-width: 720px;
}
.pipe-outflow-template-editor__hint code {
  background: rgba(100, 116, 139, 0.12);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10.5px;
}
.pipe-outflow-template-editor__head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.pipe-outflow-template-editor__saved {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(107, 142, 96, 0.12);
}
.pipe-outflow-template-editor__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.pipe-outflow-template-editor__chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 3px 8px;
}
.pipe-outflow-template-editor__chip-sep {
  display: inline-block;
  width: 1px;
  background: var(--border, #d1d5db);
  margin: 2px 4px;
  align-self: stretch;
}
.pipe-outflow-template-editor__chip--ai {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
}
.pipe-outflow-template-editor__chip--ai svg {
  flex-shrink: 0;
}

/* ----- AI-assisted template extraction panel ----- */
.pipe-outflow-template-ai {
  margin: 4px 0 14px 0;
  padding: 12px;
  background: rgba(99, 102, 241, 0.04);
  border: 1px solid rgba(99, 102, 241, 0.20);
  border-radius: 6px;
}
.pipe-outflow-template-ai__hint {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted, #64748b);
  margin-bottom: 8px;
}
.pipe-outflow-template-ai__hint code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  background: rgba(99, 102, 241, 0.10);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text-primary, #1e293b);
}
.pipe-outflow-template-ai__hint em {
  font-style: italic;
  color: var(--text-primary, #1e293b);
}
.pipe-outflow-template-ai__input {
  width: 100%;
  font-size: 12.5px;
  font-family: inherit;
  line-height: 1.5;
  padding: 8px 10px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  resize: vertical;
  min-height: 140px;
  background: var(--bg-primary, #ffffff);
}
.pipe-outflow-template-ai__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(107, 142, 96, 0.18);
}
.pipe-outflow-template-ai__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.pipe-outflow-template-ai__error {
  flex: 1 1 auto;
  font-size: 11px;
  color: var(--error, #dc2626);
}
.pipe-outflow-template-editor__fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pipe-outflow-template-editor__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pipe-outflow-template-editor__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
}
.pipe-outflow-template-editor__input,
.pipe-outflow-template-editor__textarea {
  font-size: 12.5px;
  font-family: inherit;
  line-height: 1.5;
  padding: 8px 10px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  resize: vertical;
}
.pipe-outflow-template-editor__textarea {
  min-height: 180px;
}
.pipe-outflow-template-editor__textarea--sig {
  min-height: 80px;
  background: rgba(100, 116, 139, 0.04);
}
.pipe-outflow-template-editor__input:focus,
.pipe-outflow-template-editor__textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(107, 142, 96, 0.18);
}

/* ----- Apply-template button + result toast ----- */
.pipe-outflow-apply-btn,
.pipe-outflow-apply-force-btn {
  white-space: nowrap;
}
.pipe-outflow-apply-result {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.01em;
}
.pipe-outflow-apply-result.is-ok {
  color: var(--success, #047857);
  background: rgba(16, 185, 129, 0.08);
}
.pipe-outflow-apply-result.is-err {
  color: var(--error, #dc2626);
  background: rgba(220, 38, 38, 0.08);
}

/* ----- Event \u203a Account hierarchy table (Outflow Mode only) ----- */
.pipe-outflow-acct-wrap {
  /* No structural override — inherits .eo-matrix-wrap. */
}
.pipe-outflow-acct-table .pipe-outflow-acct-row {
  cursor: pointer;
  transition: background-color .12s ease;
}
.pipe-outflow-acct-table .pipe-outflow-acct-row:hover {
  background: rgba(99, 102, 241, 0.06);
}
.pipe-outflow-acct-table .pipe-outflow-acct-row.has-draft {
  background: rgba(16, 185, 129, 0.04);
}
.pipe-outflow-acct-table .pipe-outflow-acct-row.has-draft:hover {
  background: rgba(16, 185, 129, 0.10);
}
.pipe-outflow-acct-name-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pipe-outflow-acct-name {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--text-primary);
}
.pipe-outflow-draft-chip {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(16, 185, 129, 0.15);
  color: var(--success, #047857);
  border: 1px solid rgba(16, 185, 129, 0.35);
}
/* Per-account count chip — "12 prior". Highlighted when > 0 (worth
   clicking), muted when 0 (operator can skip). */
.pipe-outflow-priors-chip {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(99, 102, 241, 0.12);
  color: #4f46e5;
  border: 1px solid rgba(99, 102, 241, 0.28);
}
.pipe-outflow-priors-chip.is-zero {
  background: rgba(107, 114, 128, 0.08);
  color: var(--text-secondary);
  border-color: rgba(107, 114, 128, 0.20);
}
/* Per-series banner that surfaces when an upcoming event has zero
   prior instances in our event history. Honest-empty — explains
   *why* the drawer will be empty rather than letting the rep click
   into a blank panel and wonder. */
.pipe-outflow-no-priors-banner {
  margin: 0 0 4px 0;
  padding: 8px 14px;
  background: rgba(245, 158, 11, 0.07);
  border-left: 3px solid rgba(245, 158, 11, 0.55);
  color: var(--text-secondary);
  font-size: var(--font-xs);
  line-height: 1.4;
}
.pipe-outflow-no-priors-banner strong {
  color: var(--text-primary);
}
.pipe-outflow-multi-chip {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(245, 158, 11, 0.10);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.30);
}
.pipe-outflow-row-cta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.pipe-outflow-empty {
  padding: 32px;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-xs);
}

/* ----- Drawer overlay (click-to-close backdrop) ----- */
.pipe-outflow-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 9000;
  display: flex; justify-content: flex-end;
}

/* ----- Drawer panel ----- */
.pipe-outflow-drawer {
  background: var(--surface, #fff);
  width: min(1100px, 92vw);
  height: 100%;
  display: flex; flex-direction: column;
  box-shadow: -16px 0 48px rgba(0,0,0,.25);
}

.pipe-outflow-drawer-enter         { transition: transform .22s ease-out; }
.pipe-outflow-drawer-enter-start   { transform: translateX(100%); }
.pipe-outflow-drawer-enter-end     { transform: translateX(0); }
.pipe-outflow-drawer-leave         { transition: transform .15s ease-in; }
.pipe-outflow-drawer-leave-start   { transform: translateX(0); }
.pipe-outflow-drawer-leave-end     { transform: translateX(100%); }

/* ----- Header ----- */
.pipe-outflow-header {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle, #eef0f3);
  background: var(--surface-2, #f8fafc);
}
.pipe-outflow-header-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  margin-bottom: 2px;
}
.pipe-outflow-header-title {
  margin: 0; font-size: 16px; font-weight: 700;
  color: var(--text-primary);
}
.pipe-outflow-header-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-secondary, #475569);
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.pipe-outflow-stage-chip {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent);
  border-radius: 3px;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .02em;
}
.pipe-outflow-amount-chip {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--success, #16a34a);
}
.pipe-outflow-close {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-subtle, #eef0f3);
  background: transparent;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-secondary, #475569);
}
.pipe-outflow-close:hover { background: var(--border-subtle, #eef0f3); }

/* ----- Body grid ----- */
.pipe-outflow-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--border-subtle, #eef0f3);
  overflow: hidden;
}
@media (max-width: 900px) {
  .pipe-outflow-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
}

.pipe-outflow-compose,
.pipe-outflow-attendees {
  background: var(--surface, #fff);
  display: flex; flex-direction: column;
  padding: 14px 18px;
  overflow-y: auto;
  min-height: 0;
}

.pipe-outflow-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  margin: 0 0 8px 0;
  display: flex; justify-content: space-between; align-items: center;
}
.pipe-outflow-section-meta {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary, #475569);
}

/* ----- Composer ----- */
.pipe-outflow-row {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 10px;
}
/* Body + signature only — quick docs/inventory live in compose-extras below. */
.pipe-outflow-row-grow {
  flex: 0 0 auto;
  margin-bottom: 0;
}
.pipe-outflow-row-grow .pipe-outflow-sig-row {
  margin-top: 8px;
  margin-bottom: 0;
}
.pipe-outflow-compose-extras {
  flex: 0 0 auto;
  margin-bottom: 10px;
}
.pipe-outflow-row-foot {
  flex-direction: row;
  margin-bottom: 12px;
  margin-top: 12px;
  padding-top: 12px;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid var(--border-subtle, #eef0f3);
}

.pipe-outflow-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}

.pipe-outflow-to {
  font-size: 12px;
  padding: 6px 10px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.pipe-outflow-to-empty {
  font-size: 12px;
  padding: 6px 10px;
  background: var(--surface-2, #f8fafc);
  border: 1px dashed var(--border, #d1d5db);
  border-radius: 6px;
  color: var(--text-muted, #64748b);
}
.pipe-outflow-clear-to {
  font-size: 10px;
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}

.pipe-outflow-subject {
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  font-family: inherit;
}
.pipe-outflow-body-input {
  flex: 1 1 auto;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  padding: 10px 12px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  resize: vertical;
  min-height: 200px;
}
.pipe-outflow-subject:focus,
.pipe-outflow-body-input:focus,
.pipe-outflow-sig-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
}

.pipe-outflow-sig-row {
  flex: 0 0 auto;
  gap: 4px;
}
.pipe-outflow-sig-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
}
.pipe-outflow-sig-help {
  font-size: 10px;
  color: var(--text-muted, #64748b);
  line-height: 1.35;
  margin-bottom: 2px;
}
.pipe-outflow-sig-input {
  font-size: 12px;
  font-family: inherit;
  line-height: 1.45;
  padding: 8px 10px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  resize: vertical;
  min-height: 64px;
  max-height: 140px;
  background: rgba(100, 116, 139, 0.04);
}

.pipe-outflow-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: opacity .12s ease;
}
.pipe-outflow-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pipe-outflow-btn-primary { background: var(--accent); border-color: var(--accent); }
.pipe-outflow-btn-secondary {
  background: transparent;
  color: var(--accent);
}
.pipe-outflow-btn-tiny {
  font-size: 10.5px;
  padding: 3px 9px;
}

/* ----- Rich-HTML editor + toolbar (Pipeline Outflow drawer) ----- */
/* Reuses .opp-editor / .opp-editor-toolbar / .opp-toolbar-btn from
   static/css/opp_detail.css (bundled into head.css). The pipe-outflow-*
   overrides below tighten spacing for the narrower drawer surface. */
.pipe-outflow-toolbar {
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 0;
}
.pipe-outflow-attach-count {
  font-size: 10.5px;
  color: var(--text-muted, #64748b);
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pipe-outflow-editor {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1.55;
  min-height: 160px;
  max-height: 280px;
  overflow-y: auto;
  border-radius: 0 0 6px 6px;   /* attaches to toolbar above */
  border-top: none;
}
.pipe-outflow-editor:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.18);
}

/* ----- Attachment chip strip ----- */
.pipe-outflow-attach-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 8px 0;
}
.pipe-outflow-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 14px;
  font-size: 11px;
  background: rgba(99, 102, 241, 0.10);
  color: var(--accent);
  border: 1px solid var(--accent);
}
.pipe-outflow-attach-chip svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  flex-shrink: 0;
}
.pipe-outflow-attach-name { font-weight: 600; }
.pipe-outflow-attach-size { opacity: 0.75; }
.pipe-outflow-attach-remove {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  font-weight: 700;
}
.pipe-outflow-attach-remove:hover { color: var(--error, #b91c1c); }

/* ----- Quick docs panel ----- */
.pipe-outflow-docs {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--border, #d1d5db);
  border-radius: 6px;
  background: var(--surface-2, #f8fafc);
  flex: 0 0 auto;
}
.pipe-outflow-docs-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.pipe-outflow-docs-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}
.pipe-outflow-docs-meta {
  font-size: 10px;
  color: var(--text-muted, #64748b);
  font-style: italic;
}
.pipe-outflow-docs-empty {
  font-size: 11.5px;
  color: var(--text-muted, #64748b);
  padding: 4px 0;
}
.pipe-outflow-docs-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pipe-outflow-doc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, auto);
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  background: var(--surface, #fff);
  border: 1px solid var(--border-subtle, #eef0f3);
}
.pipe-outflow-doc-row:hover { border-color: var(--border, #d1d5db); }
.pipe-outflow-doc-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pipe-outflow-doc-name:hover { text-decoration: underline; }
.pipe-outflow-doc-filename {
  font-size: 10.5px;
  color: var(--text-muted, #64748b);
  font-family: var(--font-mono, monospace);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.pipe-outflow-doc-actions {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}
.pipe-outflow-doc-btn {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border, #d1d5db);
  background: transparent;
  color: var(--text-secondary, #475569);
  cursor: pointer;
}
.pipe-outflow-doc-btn:hover {
  background: var(--bg-card-hover, rgba(99, 102, 241, 0.06));
  color: var(--text-primary, #111827);
}
.pipe-outflow-doc-btn-primary {
  border-color: var(--accent);
  color: var(--accent);
}
.pipe-outflow-doc-btn-primary:hover {
  background: var(--accent);
  color: #fff;
}
.pipe-outflow-doc-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ----- Quick docs · event inventory ----- */
.pipe-outflow-inv {
  margin-top: 14px;
  padding: 10px 12px 12px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-primary, #222);
}
.pipe-outflow-inv-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pipe-outflow-inv-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary, #222);
}
.pipe-outflow-inv-meta {
  font-size: 12px;
  color: var(--text-secondary, #666);
}
.pipe-outflow-inv-note {
  margin-bottom: 8px;
  padding: 6px 8px;
  background: rgba(217, 119, 6, 0.08);
  border-left: 3px solid #d97706;
  border-radius: 3px;
  font-size: 12px;
  color: #92400e;
}
.pipe-outflow-inv-note-text {
  flex: 1 1 auto;
  min-width: 0;
}
.pipe-outflow-inv-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 520px) {
  .pipe-outflow-inv-list { grid-template-columns: 1fr; }
}
.pipe-outflow-inv-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.06));
  border-radius: 4px;
  min-width: 0;
}
.pipe-outflow-inv-row.is-sold-out {
  opacity: 0.78;
  background: rgba(0, 0, 0, 0.02);
}
.pipe-outflow-inv-row.is-low {
  border-color: rgba(217, 119, 6, 0.35);
  background: rgba(217, 119, 6, 0.04);
}
.pipe-outflow-inv-row-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.pipe-outflow-inv-tier {
  font-weight: 600;
  color: var(--text-primary, #222);
}
.pipe-outflow-inv-counts {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary, #555);
  font-size: 12px;
}
.pipe-outflow-inv-counts strong {
  color: var(--text-primary, #222);
  font-weight: 600;
}
.pipe-outflow-inv-remaining {
  color: var(--text-secondary, #777);
  font-size: 11px;
  margin-left: 6px;
}
.pipe-outflow-inv-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pipe-outflow-inv-chip-sold {
  background: rgba(220, 38, 38, 0.14);
  color: #b91c1c;
}
.pipe-outflow-inv-chip-low {
  background: rgba(217, 119, 6, 0.16);
  color: #b45309;
}
.pipe-outflow-inv-bar {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.pipe-outflow-inv-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent, #6b8e60);
  border-radius: 3px;
  transition: width 160ms ease-out;
}
.pipe-outflow-inv-row.is-sold-out .pipe-outflow-inv-bar-fill {
  background: #b91c1c;
}
.pipe-outflow-inv-row.is-low .pipe-outflow-inv-bar-fill {
  background: #d97706;
}
.pipe-outflow-inv-deadlines {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, rgba(0, 0, 0, 0.1));
}
.pipe-outflow-inv-deadlines-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.pipe-outflow-inv-deadline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pipe-outflow-inv-deadline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 8px;
  font-size: 12px;
}
.pipe-outflow-inv-deadline-label {
  color: var(--text-primary, #222);
}
.pipe-outflow-inv-deadline-date {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary, #555);
}
.pipe-outflow-inv-empty {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pipe-outflow-inv-empty-text {
  color: var(--text-secondary, #777);
  font-size: 12px;
  font-style: italic;
}

/* ----- Attendee list ----- */
.pipe-outflow-attendee-list {
  display: flex; flex-direction: column; gap: 6px;
}
.pipe-outflow-empty {
  padding: 32px 12px;
  text-align: center;
  color: var(--text-muted, #64748b);
  font-size: 12px;
}

.pipe-outflow-attendee {
  border: 1px solid var(--border-subtle, #eef0f3);
  border-radius: 8px;
  background: var(--surface, #fff);
  overflow: hidden;
}
.pipe-outflow-attendee.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
}
.pipe-outflow-attendee.is-unresolved { background: rgba(245, 158, 11, 0.05); }
.pipe-outflow-attendee.is-blocked {
  background: rgba(239, 68, 68, 0.04);
}
.pipe-outflow-attendee.is-sent {
  opacity: 0.55;
  background: rgba(34, 197, 94, 0.05);
}

.pipe-outflow-attendee-head {
  padding: 8px 10px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}
.pipe-outflow-attendee-head:hover { background: var(--surface-2, #f8fafc); }

.pipe-outflow-attendee-main { min-width: 0; flex: 1 1 auto; }
.pipe-outflow-attendee-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 6px;
}
.pipe-outflow-attendee-title {
  font-size: 11px;
  color: var(--text-secondary, #475569);
  margin-top: 2px;
}
.pipe-outflow-attendee-chips {
  display: flex; gap: 4px; flex-wrap: wrap; flex-shrink: 0;
}

.pipe-outflow-sent-check {
  color: var(--success, #16a34a);
  font-weight: 700;
  font-size: 13px;
}

/* ----- Chips (multi-event, unresolved, attended, etc.) ----- */
.pipe-outflow-chip {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 3px;
  background: var(--border-subtle, #eef0f3);
  color: var(--text-secondary, #475569);
}
.pipe-outflow-chip-multi {
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent);
  cursor: help;
}
.pipe-outflow-chip-warn {
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
}
.pipe-outflow-chip-block {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.22);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pipe-outflow-blocked-note {
  font-size: 11px;
  color: #b91c1c;
  line-height: 1.3;
}
.pipe-outflow-chip-info {
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent);
}
.pipe-outflow-chip-ok {
  background: rgba(34, 197, 94, 0.18);
  color: #15803d;
}
.pipe-outflow-chip-cross {
  background: rgba(217, 70, 239, 0.14);
  color: #a21caf;
}

/* ----- Expanded panel ----- */
.pipe-outflow-attendee-expand {
  padding: 8px 10px 10px 10px;
  border-top: 1px solid var(--border-subtle, #eef0f3);
  background: var(--surface-2, #f8fafc);
  display: flex; flex-direction: column; gap: 8px;
}
.pipe-outflow-mini-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  margin-bottom: 2px;
}

.pipe-outflow-prior-events {
  display: flex; flex-direction: column; gap: 3px;
}
.pipe-outflow-prior-event {
  font-size: 11px;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.pipe-outflow-prior-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-muted, #64748b);
  min-width: 78px;
}
.pipe-outflow-prior-name { color: var(--text-primary); flex: 1 1 auto; min-width: 0; }
.pipe-outflow-prior-tag,
.pipe-outflow-prior-stage {
  display: inline-block;
  padding: 0 6px;
  font-size: 9.5px;
  font-weight: 600;
  border-radius: 3px;
}
.pipe-outflow-prior-tag {
  background: rgba(34, 197, 94, 0.18);
  color: #15803d;
}
.pipe-outflow-prior-stage {
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent);
}

/* ----- Cross-series outreach hooks -----
   The "this attendee also came to NV GTS and we have an open NV GTS opp"
   panel. Sits between Prior instances and Recent comms so the rep sees
   it before deciding what to inject into the email. */
.pipe-outflow-cross-series {
  display: flex; flex-direction: column; gap: 6px;
  padding: 6px 8px;
  background: rgba(217, 70, 239, 0.05);
  border-left: 3px solid rgba(217, 70, 239, 0.45);
  border-radius: 4px;
}
.pipe-outflow-cross-row {
  display: flex; flex-direction: column; gap: 3px;
}
.pipe-outflow-cross-head {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  font-size: 11px;
}
.pipe-outflow-cross-series-name {
  font-weight: 600;
  color: #86198f;
}
.pipe-outflow-cross-opp-meta {
  font-size: 10.5px;
  color: var(--text-secondary, #475569);
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
}
.pipe-outflow-cross-stage,
.pipe-outflow-cross-tier {
  display: inline-block;
  padding: 0 5px;
  font-size: 9.5px;
  font-weight: 600;
  border-radius: 3px;
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent);
}
.pipe-outflow-cross-tier {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}
.pipe-outflow-cross-priors {
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
  font-size: 10.5px;
}
.pipe-outflow-cross-label {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
  margin-right: 4px;
}
.pipe-outflow-cross-prior-chip {
  display: inline-flex; gap: 4px; align-items: center;
  padding: 1px 6px;
  background: var(--surface, #fff);
  border: 1px solid var(--border-subtle, #eef0f3);
  border-radius: 10px;
  font-size: 10px;
  color: var(--text-secondary, #475569);
}
.pipe-outflow-cross-attended {
  font-size: 8.5px;
  padding: 0 4px;
}

/* ----- Recent comms drill ----- */
.pipe-outflow-recent-comms {
  display: flex; flex-direction: column; gap: 3px;
}
.pipe-outflow-recent-row {
  font-size: 11px;
  display: grid;
  grid-template-columns: 70px auto 1fr auto;
  gap: 6px; align-items: center;
}
.pipe-outflow-recent-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-muted, #64748b);
}
.pipe-outflow-recent-type {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(100, 116, 139, 0.12);
  color: var(--text-secondary, #475569);
  white-space: nowrap;
}
.pipe-outflow-recent-type--call {
  background: rgba(34, 197, 94, 0.14);
  color: #166534;
}
.pipe-outflow-recent-type--email_personal,
.pipe-outflow-recent-type--email_inbound {
  background: rgba(99, 102, 241, 0.14);
  color: #4338ca;
}
.pipe-outflow-recent-type--email_bulk {
  background: rgba(168, 85, 247, 0.14);
  color: #7c3aed;
}
.pipe-outflow-recent-type--follow_up {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}
.pipe-outflow-recent-type--contract {
  background: rgba(220, 38, 38, 0.14);
  color: #b91c1c;
}
.pipe-outflow-recent-subject {
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pipe-outflow-recent-recipient {
  font-size: 10px;
  color: var(--text-secondary, #475569);
}
.pipe-outflow-recent-empty {
  padding: 6px 8px;
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted, #64748b);
  background: rgba(100, 116, 139, 0.04);
  border-radius: 4px;
  margin-top: 2px;
}

/* ----- Actions row + alt-contacts list ----- */
.pipe-outflow-attendee-actions {
  display: flex; gap: 6px; padding-top: 4px;
}

.pipe-outflow-alt-list {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: 4px;
  padding: 8px;
  background: rgba(99, 102, 241, 0.04);
  border: 1px dashed rgba(99, 102, 241, 0.3);
  border-radius: 6px;
}
.pipe-outflow-alt-row {
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  background: var(--surface, #fff);
  border: 1px solid var(--border-subtle, #eef0f3);
}
.pipe-outflow-alt-row:hover {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.06);
}
.pipe-outflow-alt-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.pipe-outflow-alt-meta {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--text-secondary, #475569);
}
.pipe-outflow-alt-email {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-muted, #64748b);
}

/* ════════════════════════════════════════════════════════════
   EVENT PLANNER — prerendered, client-aggregated visualizations
   ════════════════════════════════════════════════════════════ */
.ep-controls {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  padding: 14px 16px; margin-bottom: 18px;
  background: var(--surface, #fff);
  border: 1px solid var(--border-subtle, #eef0f3);
  border-radius: 12px;
}
.ep-field { display: flex; flex-direction: column; gap: 4px; }
.ep-field > span {
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-muted, #888);
}
.ep-seg {
  display: inline-flex; border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 8px; overflow: hidden; background: var(--surface, #fff);
}
.ep-seg button {
  border: 0; background: transparent; cursor: pointer;
  padding: 6px 12px; font-size: 12px; font-weight: 600;
  color: var(--text-secondary, #475569); transition: background .15s, color .15s;
}
.ep-seg button:not(:last-child) { border-right: 1px solid var(--border-subtle, #e2e8f0); }
.ep-seg button.active { background: var(--accent, #6b8e60); color: #fff; }

.ep-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.ep-kpi {
  position: relative; padding: 14px 16px; border-radius: 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border-subtle, #eef0f3);
  overflow: hidden;
}
.ep-kpi::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent, #6b8e60);
}
.ep-kpi-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; color: var(--text-muted, #888);
}
.ep-kpi-value { font-size: 24px; font-weight: 800; line-height: 1.1; margin-top: 4px; }
.ep-kpi-sub { font-size: 11px; color: var(--text-muted, #888); margin-top: 2px; }
.ep-kpi.good::before { background: #2e9e5b; }
.ep-kpi.warn::before { background: #d98a1f; }
.ep-kpi.bad::before  { background: #d24a43; }

.ep-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px;
}
.ep-card-title {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 0 12px;
}
.ep-card-title h3 { margin: 0; font-size: 15px; }
.ep-card-title .ep-hint { font-size: 11px; color: var(--text-muted, #888); font-weight: 400; }

/* Horizontal bar rows (audience, themes, tech, mix) */
.ep-bars { display: flex; flex-direction: column; gap: 7px; }
.ep-bar-row { display: grid; grid-template-columns: 130px 1fr 52px; align-items: center; gap: 10px; }
.ep-bar-label {
  font-size: 12px; color: var(--text-primary, #1e293b);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ep-bar-track {
  height: 14px; border-radius: 7px; overflow: hidden;
  background: var(--border-subtle, #eef0f3);
}
.ep-bar-fill {
  height: 100%; border-radius: 7px;
  background: linear-gradient(90deg, var(--accent, #6b8e60), #8fb583);
  transition: width .55s cubic-bezier(.22,.61,.36,1);
  min-width: 2px;
}
.ep-bar-val { font-size: 12px; font-weight: 700; text-align: right; color: var(--text-secondary, #475569); }

/* Performance chart — booked/registration % vs goal line */
.ep-perf { display: flex; flex-direction: column; gap: 9px; }
.ep-perf-row { display: grid; grid-template-columns: 1fr; gap: 3px; }
.ep-perf-head {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--text-secondary, #475569);
}
.ep-perf-head .ep-perf-name {
  font-weight: 600; color: var(--text-primary, #1e293b);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%;
}
.ep-perf-track {
  position: relative; height: 18px; border-radius: 9px;
  background: var(--border-subtle, #eef0f3); overflow: hidden;
}
.ep-perf-fill {
  height: 100%; border-radius: 9px;
  transition: width .55s cubic-bezier(.22,.61,.36,1); min-width: 2px;
}
.ep-perf-fill.met  { background: linear-gradient(90deg, #2e9e5b, #57c285); }
.ep-perf-fill.miss { background: linear-gradient(90deg, #d98a1f, #e8b765); }
.ep-perf-fill.fail { background: linear-gradient(90deg, #d24a43, #e58079); }
/* 100% goal marker — track is scaled so 100% sits at GOAL_POS% of the width */
.ep-perf-goal {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: rgba(15,23,42,.45);
}
.ep-perf-goal::after {
  content: 'goal'; position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%); font-size: 9px; color: var(--text-muted, #888);
}

.ep-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ep-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: rgba(107,142,96,.12); color: var(--accent-dark, #4c6b44);
  border: 1px solid rgba(107,142,96,.25);
}
.ep-chip small { font-weight: 700; opacity: .7; }

.ep-empty {
  font-size: 12px; color: var(--text-muted, #888);
  padding: 8px 0; font-style: italic;
}

/* Planner → Topic whitespace: candidate-market cards + supply-posture badges. */
.ws-cards {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.ws-card { padding: 14px 16px; }
.ws-card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.ws-card-head strong { font-size: 15px; }
.ws-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid transparent; white-space: nowrap;
}
.ws-badge.served { background: rgba(46,158,91,.12); color: #1f7344; border-color: rgba(46,158,91,.3); }
.ws-badge.lapsed { background: rgba(210,74,67,.10); color: #a3352f; border-color: rgba(210,74,67,.28); }
.ws-badge.track  { background: rgba(217,138,31,.12); color: #8a5209; border-color: rgba(217,138,31,.3); }
.ws-badge.none   { background: rgba(120,130,145,.12); color: #56606e; border-color: rgba(120,130,145,.28); }
.ws-note { margin-top: 10px; font-size: 12px; line-height: 1.45; }
.ws-note-label {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted, #98a1ad); margin-bottom: 2px;
}

/* Planner generic card / button / error — used by the brief, intake and
   conflicts sub-views. (These class names were previously relied upon with
   inline styles only; defined here so the surface is consistently styled.) */
.eo-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border-subtle, #eef0f3);
  border-radius: 12px;
}
.eo-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: #fff; background: var(--accent, #6b8e60);
  border: 1px solid var(--accent, #6b8e60); transition: opacity .15s;
}
.eo-btn:hover:not(:disabled) { opacity: .9; }
.eo-btn:disabled { opacity: .5; cursor: default; }
.eo-btn.ghost {
  background: transparent; color: var(--text-secondary, #475569);
  border-color: var(--border-subtle, #e2e8f0);
}
.eo-btn.sm { padding: 4px 9px; font-size: 12px; }
.eo-error { font-size: 13px; }

/* Incoming-event intake form grid */
.ep-intake-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

/* Conflict-severity badge */
.ep-sev {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  background: var(--border-subtle, #eef0f3); color: var(--text-secondary, #475569);
}
.ep-sev.sev-high   { background: rgba(210,74,67,.15);  color: #b53a33; }
.ep-sev.sev-medium { background: rgba(217,138,31,.15); color: #b8730f; }
.ep-sev.sev-low    { background: rgba(107,142,96,.15); color: #4c6b44; }

/* Conflicts month-grid calendar */
.ep-cal {
  border: 1px solid var(--border-subtle, #eef0f3); border-radius: 12px;
  overflow: hidden; background: var(--surface, #fff);
}
.ep-cal-head, .ep-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.ep-cal-dow {
  padding: 8px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--text-muted, #888); text-align: center;
  border-bottom: 1px solid var(--border-subtle, #eef0f3);
}
.ep-cal-cell {
  min-height: 92px; padding: 4px; border-right: 1px solid var(--border-subtle, #f1f3f5);
  border-bottom: 1px solid var(--border-subtle, #f1f3f5); overflow: hidden;
}
.ep-cal-cell.empty { background: rgba(0,0,0,0.015); }
.ep-cal-cell.today { background: rgba(107,142,96,.06); box-shadow: inset 0 0 0 2px rgba(107,142,96,.4); }
.ep-cal-daynum { font-size: 12px; font-weight: 700; color: var(--text-secondary, #475569); margin-bottom: 2px; }
.ep-cal-event {
  font-size: 10.5px; line-height: 1.25; padding: 2px 5px; border-radius: 5px;
  margin-bottom: 2px; cursor: default;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ep-cal-event.manual { background: rgba(210,74,67,.14); color: #a4332c; }
.ep-cal-event.ours   { background: rgba(59,125,68,.14); color: #2f6b3a; }
.ep-cal-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; vertical-align: middle; margin-right: 3px; }
.ep-cal-dot.manual { background: rgba(210,74,67,.55); }
.ep-cal-dot.ours   { background: rgba(59,125,68,.55); }
.ep-fallback {
  font-size: 12px; color: #b8860b; margin: 0 0 10px;
  padding: 6px 10px; border-radius: 8px;
  background: rgba(184,134,11,.08); border: 1px solid rgba(184,134,11,.22);
}
.ep-spon-table { width: 100%; border-collapse: collapse; }
.ep-spon-table td, .ep-spon-table th { padding: 6px 8px; font-size: 12px; text-align: left; }
.ep-spon-table th { color: var(--text-muted, #888); font-weight: 600; border-bottom: 1px solid var(--border-subtle,#eef0f3); }
.ep-spon-rev { position: relative; min-width: 90px; }
.ep-spon-rev-bar {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 60%; border-radius: 4px; background: rgba(107,142,96,.18); z-index: 0;
  transition: width .55s cubic-bezier(.22,.61,.36,1);
}
.ep-spon-rev span { position: relative; z-index: 1; font-weight: 700; }

/* Year-over-year trend column chart */
.ep-legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: middle; }
.ep-trend {
  position: relative; display: flex; align-items: flex-end; gap: 14px;
  height: 180px; margin: 16px 0 26px; padding: 0 4px; overflow-x: auto;
}
.ep-trend-goal {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px dashed rgba(15,23,42,.35); z-index: 2; pointer-events: none;
}
.ep-trend-goal::after {
  content: 'goal'; position: absolute; right: 2px; top: -13px;
  font-size: 9px; color: var(--text-muted, #888);
}
.ep-trend-col {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 100%; min-width: 44px; flex: 1;
}
.ep-trend-bars { display: flex; align-items: flex-end; gap: 4px; height: 100%; width: 100%; justify-content: center; }
.ep-trend-bar {
  position: relative; width: 16px; border-radius: 5px 5px 0 0; min-height: 2px;
  transition: height .55s cubic-bezier(.22,.61,.36,1);
}
.ep-trend-bar.rev { background: linear-gradient(180deg, #57c285, #2e9e5b); }
.ep-trend-bar.reg { background: linear-gradient(180deg, #7aa9f7, #3b82f6); }
.ep-trend-val {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; color: var(--text-secondary, #475569); white-space: nowrap;
}
.ep-trend-year { position: absolute; bottom: -22px; font-size: 11px; font-weight: 600; color: var(--text-muted, #888); }

/* ═══════════════════════════════════════════════════════════
   Registration Journeys tab — matches Event Operations tokens
   ═══════════════════════════════════════════════════════════ */
.rj-wrap {
  padding: 20px 32px 32px;
  max-width: 1480px;
}

.rj-sub {
  color: var(--text-muted);
  font-size: var(--font-2xs);
  display: block;
  margin-top: 2px;
}
.rj-empty {
  color: var(--text-muted);
  font-size: var(--font-sm);
  padding: 14px 4px;
  text-align: center;
}

.rj-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.rj-filterbar label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rj-filterbar select,
.rj-filterbar input[type="text"] {
  font-size: var(--font-sm);
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  min-width: 120px;
}
.rj-filterbar select:focus,
.rj-filterbar input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}
.rj-filterbar .rj-check {
  gap: 6px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-secondary);
}

.rj-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.rj-card h4 {
  margin: 0 0 12px;
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--accent-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.rj-volume-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 4px;
}
.rj-volume-grid .rj-card {
  margin-bottom: 0;
  min-height: 200px;
  max-height: 420px;
  overflow-y: auto;
}

.rj-bar-row {
  display: grid;
  grid-template-columns: minmax(100px, 140px) 1fr 56px;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: var(--font-xs);
}
.rj-bar-label {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rj-bar-track {
  height: 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.rj-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 3px;
  min-width: 2px;
  transition: width 0.3s ease;
}
.rj-bar-count {
  font-size: var(--font-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text-primary);
}

.rj-table td { vertical-align: top; }
.rj-table td.rj-series-cell,
.rj-table th.right {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rj-muted { color: var(--text-muted); font-size: var(--font-sm); }
.rj-evt-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--font-sm);
}

.rj-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  margin: 1px 3px 1px 0;
  line-height: 1.6;
  background: var(--bg-secondary);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.rj-chip-ps { background: rgba(107, 142, 96, 0.12); color: var(--accent); border-color: rgba(107, 142, 96, 0.35); }
.rj-chip-sp { background: rgba(59, 130, 246, 0.1); color: #2563eb; border-color: rgba(59, 130, 246, 0.3); }
.rj-chip-in { background: rgba(245, 158, 11, 0.1); color: #b45309; border-color: rgba(245, 158, 11, 0.3); }
.rj-chip-ret { background: rgba(107, 142, 96, 0.12); color: var(--accent); border-color: rgba(107, 142, 96, 0.35); }
.rj-chip-att { background: rgba(59, 130, 246, 0.1); color: #2563eb; border-color: rgba(59, 130, 246, 0.3); }

.rj-pager {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-top: 12px;
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.eo-btn-sm {
  font-size: var(--font-xs);
  font-weight: 600;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}
.eo-btn-sm:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--text-primary);
  background: var(--bg-card);
}
.eo-btn-sm:disabled { opacity: 0.4; cursor: default; }

.rj-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
}
.rj-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 92vw);
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  z-index: 1001;
  padding: 18px 20px;
  overflow-y: auto;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
}
.rj-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.rj-drawer-title {
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--text-primary);
}

.rj-timeline { position: relative; padding-left: 18px; }
.rj-timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--border);
}
.rj-timeline-item { position: relative; padding: 0 0 16px 4px; }
.rj-timeline-dot {
  position: absolute;
  left: -16px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 2px solid var(--border);
}
.rj-timeline-dot.attended {
  background: var(--accent);
  border-color: var(--accent);
}
.rj-timeline-body { font-size: var(--font-sm); }

.rj-filterbar-toggles {
  gap: 16px;
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.rj-export-btn {
  margin-left: auto;
}

.rj-subtabs {
  margin: 16px 0 12px;
  padding: 0;
}

.rj-subtab-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rj-row-click { cursor: pointer; }
.rj-row-click:hover td { background: rgba(107, 142, 96, 0.06); }

.rj-drawer-wide { width: min(920px, 96vw); }

.rj-event-detail { display: flex; flex-direction: column; gap: 16px; }

.rj-kpi-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}
.rj-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 100px; }
.rj-kpi-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.rj-kpi-val { font-size: 18px; font-weight: 600; color: var(--text-primary); }

.rj-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.rj-series-timeline {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 4px;
}
.rj-series-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
  gap: 4px;
}
.rj-series-point.current .rj-series-bar { background: var(--accent); }
.rj-series-bar-wrap {
  height: 72px;
  width: 36px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.rj-series-bar {
  width: 100%;
  min-height: 4px;
  background: rgba(107, 142, 96, 0.45);
  border-radius: 3px 3px 0 0;
  transition: height 0.2s ease;
}

/* ── Renewal Book · First-Half / Second-Half rep pane ───────────── */
.eo-rp { display: flex; flex-direction: column; gap: 16px; }
.eo-rp-headline {
  font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--text-primary);
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(168,85,247,0.04));
  border-left: 3px solid var(--accent);
  padding: 14px 18px; border-radius: 8px;
}
.eo-rp-explain { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-top: -6px; }
.eo-rp-legend { display: inline-flex; flex-wrap: wrap; gap: 12px; margin-left: 6px; align-items: center; }
.eo-rp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.eo-rp-dot.secured { background: var(--success); }
.eo-rp-dot.inplay { background: var(--info, #38bdf8); }
.eo-rp-dot.notre { background: var(--warning); }
.eo-rp-dot.lapsed { background: var(--error); }

.eo-rp-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.eo-rp-ctl { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.eo-rp-asof { font-size: 11px; color: var(--text-muted); }

.eo-rp-halves { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 820px) { .eo-rp-halves { grid-template-columns: 1fr; } }
.eo-rp-half {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.eo-rp-half-head { display: flex; justify-content: space-between; align-items: flex-start; }
.eo-rp-half-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.eo-rp-half-window { font-size: 11px; color: var(--text-muted); }
.eo-rp-status {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 3px 8px; border-radius: 10px; white-space: nowrap;
}
.eo-rp-status.settled { background: rgba(34,197,94,0.15); color: var(--success); }
.eo-rp-status.in_flight { background: rgba(56,189,248,0.15); color: var(--info, #38bdf8); }
.eo-rp-status.upcoming { background: rgba(234,179,8,0.15); color: var(--warning); }

.eo-rp-ret { display: flex; align-items: baseline; gap: 10px; }
.eo-rp-ret-val { font-size: 34px; font-weight: 800; line-height: 1; }
.eo-rp-ret.good .eo-rp-ret-val { color: var(--success); }
.eo-rp-ret.mid .eo-rp-ret-val { color: var(--warning); }
.eo-rp-ret.bad .eo-rp-ret-val { color: var(--error); }
.eo-rp-ret-lbl { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.eo-rp-ret-sub { display: block; font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--text-secondary, var(--text-muted)); font-weight: 500; }

.eo-rp-meter { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(148,163,184,0.15); }
.eo-rp-seg { height: 100%; transition: width 0.3s ease; }
.eo-rp-seg.secured { background: var(--success); }
.eo-rp-seg.inplay { background: var(--info, #38bdf8); }
.eo-rp-seg.notre { background: var(--warning); }
.eo-rp-seg.lapsed { background: var(--error); }

.eo-rp-money { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.eo-rp-money-cell { display: flex; flex-direction: column; gap: 2px; }
.eo-rp-money-val { font-size: 16px; font-weight: 700; }
.eo-rp-money-val.green { color: var(--success); }
.eo-rp-money-val.cyan { color: var(--info, #38bdf8); }
.eo-rp-money-val.red { color: var(--error); }
.eo-rp-money-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
.eo-rp-wt { text-transform: none; letter-spacing: 0; opacity: 0.75; }

.eo-rp-bands { display: flex; gap: 12px; font-size: 11px; padding-top: 4px; border-top: 1px dashed var(--border); }
.eo-rp-band.grew { color: var(--success); }
.eo-rp-band.flat { color: var(--text-muted); }
.eo-rp-band.shrunk { color: var(--warning); }

.eo-rp-section { display: flex; flex-direction: column; gap: 10px; }
.eo-rp-section-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.eo-rp-section-sub { font-size: 11px; font-weight: 500; color: var(--text-muted); margin-left: 8px; }
.eo-rp-table th, .eo-rp-table td { font-size: 12px; }
.eo-rp-owner-row { cursor: pointer; }
.eo-rp-owner-row:hover { background: rgba(99,102,241,0.06); }
.eo-rp-acct-link { color: var(--accent); text-decoration: none; }
.eo-rp-acct-link:hover { text-decoration: underline; }

.eo-rp-drill-ctl { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.eo-rp-chipset { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.eo-rp-chip {
  font-size: 12px; padding: 5px 12px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
}
.eo-rp-chip.sm { padding: 4px 10px; font-size: 11px; }
.eo-rp-chip:hover { color: var(--text-primary); }
.eo-rp-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.eo-rp-half-pill { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: rgba(148,163,184,0.18); color: var(--text-muted); }
.eo-rp-risk { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px; margin-right: 4px; }
.eo-rp-risk.hi { background: rgba(239,68,68,0.15); color: var(--error); }
.eo-rp-risk.md { background: rgba(234,179,8,0.15); color: var(--warning); }
.eo-rp-risk.lo { background: rgba(34,197,94,0.15); color: var(--success); }
.eo-rp-reason { font-size: 11px; color: var(--text-muted); font-style: italic; }
.eo-rp-events { max-width: 320px; }
.eo-rp-evt {
  display: inline-block; font-size: 10px; padding: 2px 6px; margin: 1px 3px 1px 0;
  border-radius: 4px; background: rgba(148,163,184,0.12); color: var(--text-secondary, var(--text-muted));
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}
.eo-rp-evt.secured { border-left: 2px solid var(--success); }
.eo-rp-evt.in_play { border-left: 2px solid var(--info, #38bdf8); }
.eo-rp-evt.gap { border-left: 2px solid var(--warning); }

/* Intro narrative */
.eo-rp-intro {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px;
}
.eo-rp-intro-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.eo-rp-intro-p { font-size: 13px; line-height: 1.6; color: var(--text-secondary, var(--text-muted)); margin: 0; }
.eo-rp-intro-p strong { color: var(--text-primary); }
.eo-rp-scope-note {
  font-size: 12px; line-height: 1.55; color: var(--text-muted);
  background: rgba(148,163,184,0.08); border-radius: 8px; padding: 10px 12px; margin-top: 2px;
}
.eo-rp-scope-badge {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--accent); background: rgba(99,102,241,0.12); padding: 2px 7px; border-radius: 4px; margin-right: 6px;
}

/* Expansion-level summary strip */
.eo-rp-exp-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
@media (max-width: 900px) { .eo-rp-exp-strip { grid-template-columns: repeat(3, 1fr); } }
.eo-rp-exp-card {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 10px 12px; border-radius: 8px; cursor: pointer; text-align: left;
  background: var(--bg-card); border: 1px solid var(--border); border-left-width: 3px;
  border-left-color: var(--border);
}
.eo-rp-exp-card:hover { border-color: var(--accent); }
.eo-rp-exp-card.active { background: rgba(99,102,241,0.08); border-color: var(--accent); }
.eo-rp-exp-card.expanded { border-left-color: var(--success); }
.eo-rp-exp-card.renewed { border-left-color: #22c55e; }
.eo-rp-exp-card.inplay { border-left-color: var(--info, #38bdf8); }
.eo-rp-exp-card.contracted { border-left-color: var(--warning); }
.eo-rp-exp-card.notre { border-left-color: #f97316; }
.eo-rp-exp-card.lapsed { border-left-color: var(--error); }
.eo-rp-exp-num { font-size: 22px; font-weight: 800; color: var(--text-primary); line-height: 1; }
.eo-rp-exp-lbl { font-size: 11px; font-weight: 600; color: var(--text-secondary, var(--text-muted)); text-transform: uppercase; letter-spacing: 0.4px; }
.eo-rp-exp-rev { font-size: 11px; color: var(--text-muted); }

/* Expansion-level pill (in the ledger) */
.eo-rp-exp-pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 10px; white-space: nowrap; }
.eo-rp-exp-pill.expanded { background: rgba(34,197,94,0.18); color: var(--success); }
.eo-rp-exp-pill.renewed { background: rgba(34,197,94,0.12); color: #16a34a; }
.eo-rp-exp-pill.inplay { background: rgba(56,189,248,0.15); color: var(--info, #38bdf8); }
.eo-rp-exp-pill.contracted { background: rgba(234,179,8,0.15); color: var(--warning); }
.eo-rp-exp-pill.notre { background: rgba(249,115,22,0.15); color: #f97316; }
.eo-rp-exp-pill.lapsed { background: rgba(239,68,68,0.15); color: var(--error); }

/* Per-half status dot in the ledger */
.eo-rp-half-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: rgba(148,163,184,0.25); }
.eo-rp-half-dot.secured { background: var(--success); }
.eo-rp-half-dot.in_play { background: var(--info, #38bdf8); }
.eo-rp-half-dot.not_reengaged { background: #f97316; }
.eo-rp-half-dot.lapsed { background: var(--error); }
.eo-rp-half-dot.none { background: transparent; border: 1px dashed var(--border); }
.eo-rp-table th.center, .eo-rp-table td.center { text-align: center; }

.eo-rp-upside { font-size: 10px; font-weight: 600; color: var(--info, #38bdf8); margin-left: 6px; white-space: nowrap; }


/* === css/pipeline_manager.css === */
/* ═══════════════════════════════════════════════════════════
   Pipeline Manager — pm- prefix
   ═══════════════════════════════════════════════════════════ */

/* ── Header ───────────────────────────────────────────────── */
.pm-header {
  padding: 28px 32px 12px;
}
.pm-title {
  font-size: var(--font-3xl);
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}
.pm-title svg { width: 28px; height: 28px; color: var(--accent); }
.pm-subtitle {
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Tab Bar ──────────────────────────────────────────────── */
.pm-tabs {
  display: flex;
  gap: 2px;
  padding: 0 32px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.pm-tab {
  padding: 10px 18px;
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  transition: var(--transition);
  white-space: nowrap;
}
.pm-tab:hover { color: var(--text-primary); }
.pm-tab.active {
  color: var(--accent);
  border-bottom-color: transparent;
}

/* ── KPI Strip ────────────────────────────────────────────── */
.pm-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px;
  padding: 16px 32px;
}
.pm-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  transition: var(--transition);
  position: relative;
}
.pm-kpi:not(.no-accent)::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--stripe, var(--accent));
  border-radius: var(--radius) var(--radius) 0 0;
  opacity: 0.75;
}
.pm-kpi-strip > .pm-kpi:nth-child(5n+1):not(.no-accent) { --stripe: var(--chart-1); }
.pm-kpi-strip > .pm-kpi:nth-child(5n+2):not(.no-accent) { --stripe: var(--chart-2); }
.pm-kpi-strip > .pm-kpi:nth-child(5n+3):not(.no-accent) { --stripe: var(--chart-3); }
.pm-kpi-strip > .pm-kpi:nth-child(5n+4):not(.no-accent) { --stripe: var(--chart-4); }
.pm-kpi-strip > .pm-kpi:nth-child(5n+5):not(.no-accent) { --stripe: var(--chart-5); }
.pm-kpi:hover { border-color: var(--border-light); transform: translateY(-1px); }
.pm-kpi:not(.no-accent):hover::before { opacity: 1; }
.pm-kpi-label {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.pm-kpi-value {
  font-size: var(--font-2xl);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
.pm-kpi-value.accent { color: var(--accent); }
.pm-kpi-value.green { color: var(--success); }
.pm-kpi-value.yellow { color: var(--warning); }
.pm-kpi-value.red { color: var(--error); }
.pm-kpi-value.purple { color: var(--purple); }
.pm-kpi-value.cyan { color: var(--cyan); }
.pm-kpi-sub {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
}

/* ── Panel Container ──────────────────────────────────────── */
.pm-panel {
  padding: 20px 32px;
  display: none;
}
.pm-panel.active { display: block; }

/* ── Section ──────────────────────────────────────────────── */
.pm-section {
  margin-bottom: 28px;
}
.pm-section-title {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pm-section-title svg { width: 20px; height: 20px; color: var(--accent); }

/* ── Table ────────────────────────────────────────────────── */
.pm-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.pm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
}
.pm-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: var(--font-2xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
  cursor: pointer;
  user-select: none;
}
.pm-table th:hover { color: var(--text-primary); }
.pm-table th .sort-arrow { font-size: 10px; opacity: 0.4; margin-left: 2px; }
.pm-table th .sort-arrow.active { opacity: 1; color: var(--accent); }
.pm-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  white-space: nowrap;
}
.pm-table tr:last-child td { border-bottom: none; }
.pm-table tr:hover td { background: var(--bg-hover); }
.pm-table .mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-xs);
}
.pm-table .right { text-align: right; }

/* ── Funnel ───────────────────────────────────────────────── */
.pm-funnel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.pm-funnel-stage {
  display: grid;
  grid-template-columns: 140px 1fr 100px 80px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.pm-funnel-label {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-primary);
}
.pm-funnel-bar-track {
  height: 24px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.pm-funnel-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
  min-width: 2px;
}
.pm-funnel-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-sm);
  font-weight: 600;
  text-align: right;
}
.pm-funnel-count {
  font-size: var(--font-xs);
  color: var(--text-muted);
  text-align: right;
}

/* ── Cards Grid ───────────────────────────────────────────── */
.pm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.pm-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  transition: var(--transition);
}
.pm-card:hover { border-color: var(--border-light); }
.pm-card-title {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.pm-card-metric {
  font-size: var(--font-xl);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
.pm-card-detail {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.5;
}

/* ── Health Ring ──────────────────────────────────────────── */
.pm-health-ring {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 12px;
}
.pm-health-ring svg { width: 100%; height: 100%; }
.pm-ring-bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 3;
}
.pm-ring-fill {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 1s ease;
}
.pm-ring-fill.healthy { stroke: var(--success); }
.pm-ring-fill.warning { stroke: var(--warning); }
.pm-ring-fill.critical { stroke: var(--error); }
.pm-health-pct {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-2xl);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

/* ── Insight Cards ────────────────────────────────────────── */
.pm-insight {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 12px;
  border-left: 4px solid var(--border);
}
.pm-insight.critical { border-left-color: var(--error); }
.pm-insight.warning { border-left-color: var(--warning); }
.pm-insight.opportunity { border-left-color: var(--success); }
.pm-insight.info { border-left-color: var(--accent); }
.pm-insight-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pm-insight-title {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.pm-insight-badge {
  font-size: var(--font-2xs);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  text-transform: uppercase;
}
.pm-insight-badge.critical { background: rgba(239, 68, 68, 0.15); color: var(--error); }
.pm-insight-badge.warning { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.pm-insight-badge.opportunity { background: rgba(34, 197, 94, 0.15); color: var(--success); }
.pm-insight-badge.info { background: rgba(59, 130, 246, 0.15); color: var(--accent); }
.pm-insight-detail {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 8px;
}
.pm-insight-action {
  font-size: var(--font-2xs);
  color: var(--accent);
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.pm-insight-drill-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-2xs);
  color: var(--text-muted);
  font-weight: 500;
  opacity: 0.7;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.pm-insight-clickable {
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.pm-insight-clickable:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.03));
  transform: translateX(2px);
}
.pm-insight-clickable:hover .pm-insight-drill-hint {
  opacity: 1;
  color: var(--accent);
}
.pm-insight-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-xs);
  color: var(--text-muted);
}

/* ── Badges & Tags ────────────────────────────────────────── */
.pm-badge {
  display: inline-block;
  font-size: var(--font-2xs);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}
.pm-badge.high-risk { background: rgba(239, 68, 68, 0.15); color: var(--error); }
.pm-badge.medium-risk { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.pm-badge.low-risk { background: rgba(34, 197, 94, 0.15); color: var(--success); }
.pm-badge.stale { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.pm-badge.success { background: rgba(34, 197, 94, 0.15); color: var(--success); }
.pm-badge.purple { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.pm-badge.info { background: rgba(59, 130, 246, 0.15); color: var(--info, #3b82f6); }
.pm-badge.cyan { background: rgba(6, 182, 212, 0.15); color: #06b6d4; }
.pm-badge.warning { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.pm-badge.yellow { background: rgba(234, 179, 8, 0.15); color: #eab308; }

.pm-stage-badge {
  display: inline-block;
  font-size: var(--font-2xs);
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  margin-right: 4px;
  margin-bottom: 2px;
}

/* ── Velocity Bar ─────────────────────────────────────────── */
.pm-vel-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.pm-vel-label {
  width: 140px;
  font-size: var(--font-sm);
  color: var(--text-primary);
  text-align: right;
  flex-shrink: 0;
}
.pm-vel-track {
  flex: 1;
  height: 20px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}
.pm-vel-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
  transition: width 0.6s ease;
}
.pm-vel-value {
  width: 60px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-xs);
  color: var(--text-muted);
}

/* ── Filter Bar ───────────────────────────────────────────── */
.pm-filter-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.pm-filter-select {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  cursor: pointer;
}
.pm-filter-select:focus { outline: none; border-color: var(--accent); }
.pm-search {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  width: 240px;
}
.pm-search:focus { outline: none; border-color: var(--accent); }
.pm-search::placeholder { color: var(--text-muted); }

/* ── Loading & Empty ──────────────────────────────────────── */
.pm-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  color: var(--text-muted);
  gap: 16px;
}
.pm-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: var(--font-sm);
}

/* ── Two-col layout ───────────────────────────────────────── */
.pm-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) {
  .pm-two-col { grid-template-columns: 1fr; }
}

/* ── Three-col layout ─────────────────────────────────────── */
.pm-three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
@media (max-width: 1100px) {
  .pm-three-col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .pm-three-col { grid-template-columns: 1fr; }
}

/* ── Progress bar (inline) ────────────────────────────────── */
.pm-progress-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pm-progress-track {
  flex: 1;
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
}
.pm-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}

/* ── Detail Modal/Slide ───────────────────────────────────── */
.pm-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
  display: flex;
  justify-content: flex-end;
}
.pm-detail-panel {
  width: min(600px, 90vw);
  background: var(--bg-primary);
  border-left: 1px solid var(--border);
  padding: 24px;
  overflow-y: auto;
  height: 100vh;
}
.pm-detail-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--font-xl);
  float: right;
}
.pm-detail-close:hover { color: var(--text-primary); }

/* ── Animations ───────────────────────────────────────────── */
@keyframes pm-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.pm-panel.active { animation: pm-fade-in 0.3s ease; }

/* ── Scrollable table container ───────────────────────────── */
.pm-table-scroll {
  max-height: 500px;
  overflow-y: auto;
}

/* ── Quick Refresh button ────────────────────────────────── */
.pm-refresh-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 6px 14px; border-radius: 8px;
  background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.25);
  color: var(--accent-light); cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.pm-refresh-btn:hover:not(:disabled) { background: rgba(59,130,246,.2); border-color: var(--accent); }
@keyframes pm-spin { to { transform: rotate(360deg); } }
.pm-spin { animation: pm-spin .8s linear infinite; }

/* ── Refresh toast ───────────────────────────────────────── */
.pm-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 20px; max-width: 380px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3); font-size: 13px;
}
.pm-toast-title { font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.pm-toast-body { color: var(--text-muted); font-size: 12px; line-height: 1.4; }

/* ── All Deals Table ────────────────────────────────────────── */
.ad-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 0; margin-bottom: 4px;
}
.ad-search {
  flex: 1; min-width: 200px; max-width: 360px;
  padding: 7px 12px; border-radius: var(--radius);
  background: var(--bg-secondary); border: 1px solid var(--border);
  color: var(--text-primary); font-size: 13px;
  transition: border-color .15s;
}
.ad-search:focus { outline: none; border-color: var(--accent); }
.ad-search::placeholder { color: var(--text-muted); }
.ad-count {
  margin-left: auto; font-size: 12px; color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace; white-space: nowrap;
}
.ad-summary-strip {
  display: flex; gap: 24px; flex-wrap: wrap;
  padding: 8px 14px; margin-bottom: 10px; border-radius: var(--radius);
  background: rgba(59,130,246,.06); border: 1px solid rgba(59,130,246,.12);
  font-size: 12px; color: var(--text-secondary);
}
.ad-summary-strip strong { color: var(--text-primary); font-weight: 700; }
.ad-table { font-size: 12px; }
.ad-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.ad-th-sticky { position: sticky; left: 0; z-index: 2; background: var(--bg-card); }
.ad-td-name {
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; color: var(--text-primary);
}
.ad-pagination {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 14px 0; font-size: 13px;
}
.ad-page-btn {
  padding: 5px 14px; border-radius: var(--radius);
  background: var(--bg-secondary); border: 1px solid var(--border);
  color: var(--text-primary); cursor: pointer; font-size: 12px; font-weight: 600;
  transition: all .15s;
}
.ad-page-btn:hover:not(:disabled) { border-color: var(--accent); background: rgba(59,130,246,.1); }
.ad-page-btn:disabled { opacity: .4; cursor: not-allowed; }
.ad-page-info { color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 12px; }


/* === css/event_outflow.css === */
/* ════════════════════════════════════════════════════════════════════
   Event Outflow tab — scoped styles under .eo-event-outflow-*

   Visual language matches the existing pipe-outflow / qp drawer pattern
   (cream surface, deep forest text, sage-green accents) so the tab
   doesn't read as a foreign system. Heavy reuse of CSS vars from
   themes.css — anything unset falls back to the muted slate palette
   that base.html ships.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Empty / not-loaded state ─────────────────────────────────────── */
.eo-event-outflow-empty {
  padding: 28px 32px;
  border: 1px dashed var(--border-subtle, #e5e7eb);
  border-radius: 8px;
  background: var(--surface-2, #f8fafc);
  color: var(--text-secondary, #475569);
  margin: 16px 0;
}
.eo-event-outflow-empty h3 {
  margin: 0 0 8px 0;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
}
.eo-event-outflow-empty code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  background: var(--surface, #fff);
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid var(--border-subtle, #e5e7eb);
}

/* ─── Header strip ─────────────────────────────────────────────────── */
.eo-event-outflow-header {
  margin: 12px 0 16px;
}
.eo-event-outflow-title-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.eo-event-outflow-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.eo-event-outflow-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-secondary, #475569);
}
.eo-event-outflow-header-actions {
  display: flex; gap: 8px;
}

/* ─── Buttons ──────────────────────────────────────────────────────── */
.eo-event-outflow-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle, #e5e7eb);
  background: var(--surface, #fff);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.eo-event-outflow-btn:hover {
  background: var(--surface-2, #f8fafc);
  border-color: var(--accent, #6b8e60);
}
.eo-event-outflow-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.eo-event-outflow-btn-primary {
  background: var(--accent, #6b8e60);
  border-color: var(--accent, #6b8e60);
  color: #fff;
}
.eo-event-outflow-btn-primary:hover {
  background: var(--accent-hover, #5a7d50);
  border-color: var(--accent-hover, #5a7d50);
}

.eo-event-outflow-link {
  background: none; border: none;
  color: var(--accent, #6b8e60);
  cursor: pointer;
  font-size: inherit;
  padding: 0 4px;
  text-decoration: underline;
}

/* ─── Pivot selector ───────────────────────────────────────────────── */
.eo-event-outflow-pivots {
  display: flex; gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle, #e5e7eb);
}
.eo-event-outflow-pivot {
  padding: 8px 14px;
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.eo-event-outflow-pivot:hover {
  color: var(--text-primary);
}
.eo-event-outflow-pivot.is-active {
  color: var(--accent, #6b8e60);
  border-bottom-color: var(--accent, #6b8e60);
}

/* ─── Toolbar ──────────────────────────────────────────────────────── */
.eo-event-outflow-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: flex-end;
  padding: 12px 14px;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 8px;
  margin-bottom: 12px;
}
.eo-event-outflow-filter {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 140px;
}
.eo-event-outflow-filter span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}
.eo-event-outflow-filter select {
  padding: 5px 8px;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 5px;
  background: var(--surface, #fff);
  font-size: 12px;
  color: var(--text-primary);
}
.eo-event-outflow-toolbar-spacer {
  flex: 1 1 auto;
}

/* ─── Apply result banner ──────────────────────────────────────────── */
.eo-event-outflow-result {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--accent, #6b8e60);
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 12px;
}
.eo-event-outflow-result.is-error {
  border-color: var(--danger, #dc2626);
}
.eo-event-outflow-result-dismiss {
  margin-left: auto;
  background: none; border: none;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  font-size: 11px;
  text-decoration: underline;
}

/* ─── Grid ─────────────────────────────────────────────────────────── */
.eo-event-outflow-grid {
  display: flex; flex-direction: column; gap: 12px;
}
.eo-event-outflow-grid.is-loading {
  opacity: 0.6;
}
.eo-event-outflow-grid-loading,
.eo-event-outflow-grid-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-secondary, #475569);
  font-size: 13px;
  background: var(--surface-2, #f8fafc);
  border: 1px dashed var(--border-subtle, #e5e7eb);
  border-radius: 8px;
}

.eo-event-outflow-group {
  background: var(--surface, #fff);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
}
.eo-event-outflow-group-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface-2, #f8fafc);
  border-bottom: 1px solid var(--border-subtle, #e5e7eb);
}
.eo-event-outflow-group-title {
  display: flex; align-items: baseline; gap: 8px;
  font-weight: 700;
  color: var(--text-primary);
  font-size: 13px;
}
.eo-event-outflow-group-count {
  font-size: 10px;
  color: var(--text-muted, #64748b);
  font-weight: 500;
  letter-spacing: .04em;
}
.eo-event-outflow-group-meta {
  display: flex; gap: 6px; align-items: center;
}

.eo-event-outflow-atoms {
  display: flex; flex-direction: column;
}
.eo-event-outflow-atom {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  background: var(--surface, #fff);
  border: none;
  border-top: 1px solid var(--border-subtle, #e5e7eb);
  text-align: left;
  cursor: pointer;
  color: var(--text-primary);
  font-family: inherit;
  width: 100%;
}
.eo-event-outflow-atom:first-child { border-top: none; }
.eo-event-outflow-atom:hover { background: var(--surface-2, #f8fafc); }
.eo-event-outflow-atom.is-selected {
  background: rgba(107, 142, 96, 0.08);
  border-left: 2px solid var(--accent, #6b8e60);
  padding-left: 12px;
}
.eo-event-outflow-atom-row {
  display: flex; gap: 6px; align-items: baseline;
  font-size: 12px;
  flex-wrap: wrap;
}
.eo-event-outflow-atom-account {
  font-weight: 700;
  flex: 1 1 auto;
}
.eo-event-outflow-atom-play {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--accent, #6b8e60);
  font-weight: 600;
}
.eo-event-outflow-atom-row-sub {
  color: var(--text-secondary, #475569);
  font-size: 11px;
}
.eo-event-outflow-atom-row-meta {
  color: var(--text-muted, #64748b);
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
}

/* ─── Play / row-source chips ──────────────────────────────────────── */
.eo-event-outflow-play-chip {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(107, 142, 96, 0.12);
  color: var(--accent, #6b8e60);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}
.eo-event-outflow-row-source-chip {
  display: inline-block;
  padding: 1px 6px;
  background: var(--surface-2, #f8fafc);
  color: var(--text-secondary, #475569);
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ─── Drawer (right slide-in) ──────────────────────────────────────── */
.eo-event-outflow-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 9100;
  display: flex; justify-content: flex-end;
}
.eo-event-outflow-drawer {
  background: var(--surface, #fff);
  width: min(1200px, 96vw);
  height: 100%;
  display: flex; flex-direction: column;
  box-shadow: -16px 0 48px rgba(0,0,0,.25);
}
.eo-event-outflow-drawer-head {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle, #e5e7eb);
  background: var(--surface-2, #f8fafc);
}
.eo-event-outflow-drawer-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent, #6b8e60);
}
.eo-event-outflow-drawer-title {
  margin: 2px 0 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.eo-event-outflow-drawer-sub {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-secondary, #475569);
}
.eo-event-outflow-drawer-close {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-subtle, #e5e7eb);
  background: transparent;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-secondary, #475569);
}
.eo-event-outflow-drawer-close:hover { background: var(--border-subtle, #e5e7eb); }

/* ─── Drawer panes (3-column grid) ─────────────────────────────────── */
.eo-event-outflow-drawer > section + section { border-left: 1px solid var(--border-subtle, #e5e7eb); }
.eo-event-outflow-drawer {
  /* Use a grid for the three panes (flex column wraps them in a single
     scroll axis which makes the actions pane hard to reach) */
}
.eo-event-outflow-drawer-body {
  /* Body fills the remaining space; panes go side-by-side */
}

/* Override: use a flex row for the 3 panes inside the drawer */
.eo-event-outflow-pane {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 18px;
  overflow-y: auto;
  background: var(--surface, #fff);
  border-top: 1px solid var(--border-subtle, #e5e7eb);
}
/* Two-up at wide; stack to rows at narrow */
.eo-event-outflow-drawer {
  display: grid;
  grid-template-rows: auto 1fr;
}
.eo-event-outflow-drawer > section:nth-of-type(1) { grid-column: 1; }
.eo-event-outflow-drawer > section:nth-of-type(2) { grid-column: 2; }
.eo-event-outflow-drawer > section:nth-of-type(3) { grid-column: 3; }
.eo-event-outflow-drawer {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(220px, 0.7fr);
}
@media (max-width: 1100px) {
  .eo-event-outflow-drawer {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
  .eo-event-outflow-drawer > section:nth-of-type(1),
  .eo-event-outflow-drawer > section:nth-of-type(2),
  .eo-event-outflow-drawer > section:nth-of-type(3) {
    grid-column: 1;
  }
}

.eo-event-outflow-pane-h {
  margin: 0 0 12px 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}
.eo-event-outflow-pane-empty {
  padding: 14px;
  background: var(--surface-2, #f8fafc);
  border: 1px dashed var(--border-subtle, #e5e7eb);
  border-radius: 6px;
  color: var(--text-secondary, #475569);
  font-size: 12px;
}
.eo-event-outflow-pane-empty.is-warn {
  border-color: var(--warn, #f59e0b);
  background: rgba(245, 158, 11, 0.08);
  color: var(--text-primary);
}

/* ─── Brief preview chips ──────────────────────────────────────────── */
.eo-event-outflow-brief-section {
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--text-primary);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.eo-event-outflow-brief-section ul {
  flex-basis: 100%;
  margin: 4px 0 0 0;
  padding-left: 18px;
  font-size: 11px;
  color: var(--text-secondary, #475569);
}
.eo-event-outflow-brief-section strong {
  color: var(--text-muted, #64748b);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.eo-event-outflow-brief-objective {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-secondary, #475569);
}
.eo-event-outflow-signal-list li {
  margin-bottom: 4px;
}
.eo-event-outflow-signal-urgency {
  display: inline-block;
  padding: 0 5px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-right: 5px;
  vertical-align: middle;
}
.eo-event-outflow-signal-urgency.is-critical { background: rgba(220, 38, 38, 0.15); color: #b91c1c; }
.eo-event-outflow-signal-urgency.is-high     { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.eo-event-outflow-signal-urgency.is-medium   { background: rgba(59, 130, 246, 0.15); color: #1d4ed8; }
.eo-event-outflow-signal-urgency.is-low      { background: var(--surface-2, #f8fafc); color: var(--text-secondary, #475569); }
.eo-event-outflow-donot-list li {
  margin-bottom: 3px;
  color: #b45309;
}

.eo-event-outflow-alt-chip {
  padding: 2px 8px;
  background: var(--surface, #fff);
  color: var(--accent, #6b8e60);
  border: 1px solid var(--accent, #6b8e60);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}
.eo-event-outflow-alt-chip:hover {
  background: var(--accent, #6b8e60);
  color: #fff;
}
.eo-event-outflow-alt-chip:disabled {
  opacity: 0.5; cursor: not-allowed;
}

/* ─── Compose form ─────────────────────────────────────────────────── */
.eo-event-outflow-field {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 12px;
}
.eo-event-outflow-field span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}
.eo-event-outflow-field input,
.eo-event-outflow-field textarea {
  padding: 8px 10px;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 5px;
  background: var(--surface, #fff);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}
.eo-event-outflow-cite-row {
  margin-top: 8px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 11px;
}
.eo-event-outflow-cite-row strong {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-muted, #64748b); text-transform: uppercase;
}
.eo-event-outflow-cite-chip {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(107, 142, 96, 0.10);
  color: var(--accent, #6b8e60);
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
}

/* ─── Actions pane ─────────────────────────────────────────────────── */
.eo-event-outflow-pane-actions {
  display: flex; flex-direction: column; gap: 8px;
}
.eo-event-outflow-actions-divider {
  height: 1px;
  background: var(--border-subtle, #e5e7eb);
  margin: 6px 0;
}
.eo-event-outflow-actions-meta {
  font-size: 11px;
  color: var(--text-secondary, #475569);
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.6;
}
.eo-event-outflow-actions-meta strong {
  color: var(--text-muted, #64748b);
  margin-right: 4px;
}
.eo-event-outflow-actions-meta code {
  font-size: 10px;
  background: var(--surface-2, #f8fafc);
  padding: 1px 3px;
  border-radius: 2px;
}

/* ─── Deprecation banner (Quarterly) + inline chip (Pipeline Outflow Mode)
   Visible only while ``EVENT_OUTFLOW_CUTOVER_AT_ISO`` is set on the
   server (see context_processor in app.py). Tone is informative-warn,
   not destructive — the legacy tab still works through the cutover.
   ────────────────────────────────────────────────────────────────────── */
.eo-deprecation-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin: 0 0 14px 0;
  background: linear-gradient(
    135deg,
    rgba(249, 168, 37, 0.08) 0%,
    rgba(249, 168, 37, 0.02) 100%
  );
  border: 1px solid rgba(249, 168, 37, 0.35);
  border-left: 3px solid #f9a825;
  border-radius: 6px;
}
.eo-deprecation-banner__icon {
  flex: 0 0 auto;
  color: #b87900;
  display: flex;
  align-items: center;
}
.eo-deprecation-banner__body {
  flex: 1 1 auto;
  min-width: 0;
}
.eo-deprecation-banner__title {
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  font-size: 14px;
  line-height: 1.3;
}
.eo-deprecation-banner__sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary, #475569);
  line-height: 1.45;
}
.eo-deprecation-banner__cta {
  flex: 0 0 auto;
  white-space: nowrap;
}

.eo-deprecation-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  margin-left: 6px;
  border: 1px solid rgba(249, 168, 37, 0.45);
  background: rgba(249, 168, 37, 0.10);
  color: #b87900;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease;
}
.eo-deprecation-chip:hover {
  background: rgba(249, 168, 37, 0.18);
}


/* === css/event_floorplan.css === */
/* ═══════════════════════════════════════════════════════════
   Event Floor Plan & Table Assignment — Isolated Styles
   Delete this file (+ event_floorplan.js + the panel block in
   eo_event_expand_panel.html) to remove the feature.
   ═══════════════════════════════════════════════════════════ */

.fp-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Toolbar ─────────────────────────────────────────────── */
.fp-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--font-2xs);
  color: var(--text-muted);
}
.fp-toolbar .fp-spacer { flex: 1 1 auto; }
.fp-upload-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--font-2xs);
  transition: all 0.15s ease;
}
.fp-upload-label:hover { border-color: var(--accent); color: var(--text-primary); }
.fp-upload-label input[type="file"] { display: none; }

.fp-status { font-family: 'JetBrains Mono', monospace; font-size: var(--font-2xs); }
.fp-status.dirty { color: var(--warning, #f59e0b); }
.fp-status.clean { color: var(--text-muted); }
.fp-error { color: var(--danger, #ef4444); font-size: var(--font-2xs); }

/* ── Body: canvas + assignment sidebar ───────────────────── */
.fp-body {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 12px;
  align-items: start;
}
@media (max-width: 900px) {
  .fp-body { grid-template-columns: 1fr; }
}

/* ── Canvas (map background + units overlay) ─────────────── */
.fp-canvas {
  position: relative;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  line-height: 0;
}
.fp-canvas img.fp-map {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.fp-grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image:
    linear-gradient(to right, rgba(59, 130, 246, 0.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(59, 130, 246, 0.14) 1px, transparent 1px);
  opacity: 0.55;
}

.fp-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  border: 2px dashed var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: var(--font-xs);
  text-align: center;
  padding: 24px;
}

/* ── Unit boxes ──────────────────────────────────────────── */
.fp-unit {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2px;
  font-size: 10px;
  line-height: 1.1;
  font-family: 'JetBrains Mono', monospace;
  color: #0f172a;
  background: rgba(148, 163, 184, 0.55);
  border: 1.5px solid rgba(71, 85, 105, 0.9);
  border-radius: 4px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  overflow: hidden;
  transition: box-shadow 0.12s ease, background 0.12s ease;
}
.fp-unit:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); z-index: 6; }
.fp-unit.dragging { cursor: grabbing; z-index: 100; opacity: 0.9; }
.fp-unit.assigned {
  background: rgba(34, 197, 94, 0.72);
  border-color: rgba(21, 128, 61, 0.95);
  color: #052e16;
}
.fp-unit.selected {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  z-index: 20;
}
/* Network (inferred) conflict = amber advisory; curated (list) = hard red. */
.fp-unit.conflict {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.55);
}
.fp-unit.conflict.assigned {
  background: rgba(245, 158, 11, 0.65);
  color: #422006;
}
.fp-unit.conflict.conflict-curated {
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.6);
}
.fp-unit.conflict.conflict-curated.assigned {
  background: rgba(239, 68, 68, 0.72);
  color: #450a0a;
}
.fp-unit .fp-unit-label {
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Resize mode (double-click): dashed outline + corner grip. Resize can only
   be initiated from this handle, so a plain drag never resizes by accident. */
.fp-unit.resizing {
  outline: 2px dashed var(--accent);
  outline-offset: 1px;
  z-index: 30;
}
.fp-unit .fp-resize-handle {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 45%, var(--accent) 45%);
  border-bottom-right-radius: 3px;
  touch-action: none;
  z-index: 40;
}

/* ── Assignment sidebar ──────────────────────────────────── */
.fp-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--font-2xs);
}
.fp-side-box {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  padding: 10px;
}
.fp-side-title {
  font-size: var(--font-2xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.fp-side-box select {
  width: 100%;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: var(--font-2xs);
}
.fp-side-box select:focus { outline: 1px solid var(--accent); }

.fp-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
}
.fp-pool-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 10px;
}
.fp-pool-empty { color: var(--text-muted); font-size: 10px; }

.fp-pool-chip.fp-assigned {
  text-decoration: line-through;
  text-decoration-color: rgba(34, 197, 94, 0.9);
  opacity: 0.5;
}

/* ── Sponsor tier buckets ────────────────────────────────── */
.fp-tier-groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.fp-tier-group { display: flex; flex-direction: column; gap: 4px; }
.fp-tier-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-light);
  font-weight: 600;
}

/* ── Renumber field ──────────────────────────────────────── */
.fp-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-2xs);
  color: var(--text-muted);
}
.fp-field > span { white-space: nowrap; }
.fp-input {
  flex: 1 1 auto;
  width: 100%;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: var(--font-2xs);
  font-family: 'JetBrains Mono', monospace;
}
.fp-input:focus { outline: 1px solid var(--accent); }

/* ── Assignment selection list ───────────────────────────── */
.fp-assign-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px;
}
.fp-assign-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 3px;
  font-size: var(--font-2xs);
  color: var(--text-secondary);
  cursor: pointer;
}
.fp-assign-row:hover { background: var(--bg-secondary); }
.fp-assign-row.active {
  background: rgba(59, 130, 246, 0.16);
  color: var(--accent-light);
}
.fp-assign-row.conflict { color: #f87171; }
.fp-assign-row.conflict.active { background: rgba(239, 68, 68, 0.18); }
.fp-assign-row.conflict.conflict-network { color: #fbbf24; }
.fp-assign-row.conflict.conflict-network.active { background: rgba(245, 158, 11, 0.16); }
.fp-assign-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-assign-tier {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.fp-assign-warn { color: #ef4444; font-size: 11px; }

.fp-hint {
  margin-top: 8px;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ── Conflict summary ────────────────────────────────────── */
.fp-conflict-box { border-color: rgba(239, 68, 68, 0.5); }
.fp-conflict-title { color: #f87171; }
.fp-conflict-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-secondary);
  padding: 2px 0;
}
.fp-conflict-x { color: #ef4444; }
.fp-conflict-row.fp-conflict-network .fp-conflict-x { color: #f59e0b; }
.fp-conflict-src {
  margin-left: auto;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.fp-conflict-row.fp-conflict-network { color: #fbbf24; }

.fp-counts {
  display: flex;
  gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-2xs);
  color: var(--text-secondary);
}
.fp-counts b { color: var(--text-primary); }

.fp-btn {
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s ease;
}
.fp-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.fp-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.fp-btn.primary {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent-light);
  border-color: rgba(59, 130, 246, 0.4);
}
.fp-btn.danger:hover { border-color: var(--danger, #ef4444); color: var(--danger, #ef4444); }

/* ═══════════════════════════════════════════════════════════
   Shareable seating view (floorplan_share.html) — public page
   chrome + first-come-first-served states. The .fp-* canvas/unit
   styles above are reused; these add page-level pieces.
   ═══════════════════════════════════════════════════════════ */
.fp-share-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.fp-share-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.fp-share-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.fp-share-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.fp-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}
.fp-live-dot.stale { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }

.fp-share-confirmed {
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: var(--text-primary);
  font-size: 14px;
  margin-bottom: 12px;
}

.fp-share-blocked {
  text-align: center;
  max-width: 460px;
  margin: 64px auto;
  color: var(--text-secondary);
}
.fp-share-blocked-icon { font-size: 44px; margin-bottom: 8px; }
.fp-share-blocked h2 { color: var(--text-primary); margin: 0 0 8px; font-size: 22px; }

/* Larger tap targets + extra unit states on the public page */
#fp-share-canvas .fp-unit { cursor: pointer; font-size: 11px; }
.fp-unit.held {
  background: rgba(245, 158, 11, 0.6);
  border-color: rgba(180, 83, 9, 0.9);
  color: #451a03;
}
.fp-unit.mine {
  background: rgba(59, 130, 246, 0.78);
  border-color: rgba(37, 99, 235, 0.95);
  color: #fff;
}
.fp-unit.backup { outline: 2px dashed var(--accent); outline-offset: 1px; }

.fp-backup-warn {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
}
.fp-pick-row { font-size: 12px; color: var(--text-secondary); margin: 4px 0; }
.fp-pick-row.backup { color: var(--accent-light); }
.fp-share-actions { display: flex; gap: 8px; margin-top: 10px; }
.fp-share-actions .fp-btn { font-size: 12px; padding: 6px 14px; }

.fp-legend { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-secondary); }
.fp-legend > div { display: flex; align-items: center; gap: 6px; }
.fp-key { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.fp-key.open { background: rgba(148, 163, 184, 0.55); border: 1.5px solid rgba(71, 85, 105, 0.9); }
.fp-key.committed { background: rgba(34, 197, 94, 0.72); border: 1.5px solid rgba(21, 128, 61, 0.95); }
.fp-key.held { background: rgba(245, 158, 11, 0.6); border: 1.5px solid rgba(180, 83, 9, 0.9); }
.fp-key.mine { background: rgba(59, 130, 246, 0.78); border: 1.5px solid rgba(37, 99, 235, 0.95); }

/* Platform-panel: Lock badge + share-link list */
.fp-locked-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.14);
  color: var(--danger, #ef4444);
  border: 1px solid rgba(239, 68, 68, 0.4);
  font-family: 'JetBrains Mono', monospace;
}
.fp-update-pill {
  background: rgba(245, 158, 11, 0.16) !important;
  color: var(--warning, #f59e0b) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  animation: fp-pulse 2s ease-in-out infinite;
}
@keyframes fp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }
.fp-links { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.fp-link-row { display: flex; align-items: center; gap: 6px; }
.fp-link-label {
  flex: 1 1 auto;
  font-size: 11px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Internal share view: assignment manifest under the map */
.fp-assign-table {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  padding: 12px;
}
.fp-assign-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.fp-assign-grid { width: 100%; border-collapse: collapse; font-size: 12px; }
.fp-assign-grid td { padding: 5px 6px; border-bottom: 1px solid var(--border); }
.fp-ag-table { font-family: 'JetBrains Mono', monospace; color: var(--text-secondary); white-space: nowrap; width: 90px; }
.fp-ag-name { color: var(--text-primary); }
.fp-ag-via {
  text-align: right;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  white-space: nowrap;
}


/* === css/dept_logistics.css === */
/* Logistics tab styling — /dept/events (scoped to #panel-logistics). */

#panel-logistics .lg-subtabs {
  display: flex;
  gap: 6px;
  margin: 14px 0 16px;
  flex-wrap: wrap;
}
#panel-logistics .lg-subtab {
  padding: 7px 14px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  border-radius: 6px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s;
}
#panel-logistics .lg-subtab:hover { color: var(--text-primary); }
#panel-logistics .lg-subtab.active {
  background: var(--accent, #3b82f6);
  border-color: var(--accent, #3b82f6);
  color: #fff;
}

#panel-logistics .lg-onboard {
  padding: 14px;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: 6px;
  line-height: 1.6;
}
#panel-logistics code {
  background: rgba(127, 127, 127, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.82em;
}

#panel-logistics .lg-link-btn {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 0.78rem;
  cursor: pointer;
}
#panel-logistics .lg-link-btn:hover { color: var(--text-primary); }
#panel-logistics .lg-link-btn.danger { color: #f43f5e; }
#panel-logistics .lg-link-btn:disabled { opacity: 0.5; cursor: not-allowed; }
#panel-logistics .lg-var-over { color: #f43f5e; }
#panel-logistics .lg-var-under { color: #10b981; }

#panel-logistics .lg-st-msg {
  font-size: 0.82rem;
  color: var(--accent-light, #60a5fa);
}
#panel-logistics .lg-st-event-list {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
}
#panel-logistics .lg-st-event-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
#panel-logistics .lg-st-event-row:last-child { border-bottom: none; }
#panel-logistics .lg-st-event-name {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.9rem;
}
#panel-logistics .lg-st-event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
#panel-logistics .lg-st-suggest {
  min-width: 240px;
  max-width: 420px;
}
#panel-logistics .lg-st-import .lg-input {
  max-width: 480px;
}
#panel-logistics .lg-fp-picker { margin-bottom: 4px; }
#panel-logistics .lg-fp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

/* Venue library two-pane layout */
#panel-logistics .lg-venue-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
}
@media (max-width: 720px) {
  #panel-logistics .lg-venue-layout { grid-template-columns: 1fr; }
}
#panel-logistics .lg-venue-list {
  max-height: 520px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}
#panel-logistics .lg-venue-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
#panel-logistics .lg-venue-row:hover { background: var(--bg-hover, rgba(127,127,127,0.06)); }
#panel-logistics .lg-venue-row.active {
  background: var(--bg-card-hover);
  box-shadow: inset 3px 0 0 var(--accent);
}
#panel-logistics .lg-venue-name { font-weight: 500; color: var(--text-primary); font-size: 0.86rem; }
#panel-logistics .lg-venue-meta { font-size: 0.74rem; color: var(--text-secondary); display: flex; gap: 6px; }

#panel-logistics .lg-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  background: var(--bg-input, var(--bg-card));
  color: var(--text-primary);
  border-radius: 6px;
  font-size: 0.84rem;
}
#panel-logistics .lg-input:disabled { opacity: 0.7; }
#panel-logistics .lg-venue-title { font-size: 1rem; font-weight: 600; margin-bottom: 10px; }
#panel-logistics .lg-textarea { min-height: 110px; resize: vertical; font-family: inherit; }
#panel-logistics .lg-field-label {
  display: block;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin: 12px 0 5px;
}
#panel-logistics .lg-stats { display: flex; flex-direction: column; gap: 6px; }
#panel-logistics .lg-stat-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: center; }
#panel-logistics .lg-plans { display: flex; flex-direction: column; gap: 6px; }
#panel-logistics .lg-plan-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
#panel-logistics .lg-plan-year { font-weight: 700; color: var(--accent-light, #60a5fa); min-width: 44px; }
#panel-logistics .lg-plan-label { flex: 1; font-size: 0.84rem; color: var(--text-primary); }
#panel-logistics .lg-plan-add { display: grid; grid-template-columns: 90px 1fr auto; gap: 6px; margin-top: 8px; align-items: center; }
#panel-logistics .lg-plan-year-in { text-align: center; }

#panel-logistics .lg-fp-picker { max-width: 420px; margin-bottom: 16px; }

/* Venue rollup: search + state groups */
#panel-logistics .lg-venue-toolbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
#panel-logistics .lg-state-group { border-bottom: 1px solid var(--border); }
#panel-logistics .lg-state-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 12px; background: rgba(127,127,127,0.06);
  position: sticky; top: 0; z-index: 1;
}
#panel-logistics .lg-state-code { font-weight: 700; font-size: 0.78rem; color: var(--text-primary); letter-spacing: 0.03em; }
#panel-logistics .lg-state-meta { font-size: 0.7rem; color: var(--text-secondary); flex: 1; }
#panel-logistics .lg-state-roll { font-size: 0.74rem; color: var(--text-secondary); }
#panel-logistics .mono { font-variant-numeric: tabular-nums; }

/* Venue / series detail header */
#panel-logistics .lg-venue-headline { display: flex; justify-content: space-between; align-items: flex-start; }
#panel-logistics .lg-venue-h1 { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
#panel-logistics .lg-venue-sub { font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; }

/* Concentration chip */
#panel-logistics .lg-conc-chip {
  padding: 1px 7px; border-radius: 10px; font-size: 0.66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
}
#panel-logistics .conc-diffuse  { background: rgba(16,185,129,0.16); color: #10b981; }
#panel-logistics .conc-moderate { background: rgba(245,158,11,0.16); color: #f59e0b; }
#panel-logistics .conc-high     { background: rgba(244,63,94,0.16);  color: #f43f5e; }

/* ── Salesforce facts strip (venue + prep detail) ───────────────── */
#panel-logistics .lg-sf-facts {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  padding: 8px 10px; margin: 8px 0 2px;
  background: rgba(127,127,127,0.05); border: 1px solid var(--border); border-radius: 6px;
  font-size: 0.8rem; color: var(--text-primary);
}
#panel-logistics .lg-sf-fact { display: flex; gap: 6px; align-items: baseline; }
#panel-logistics .lg-sf-label {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-secondary);
}

/* ── Collapsible events table + per-event budget lines ──────────── */
#panel-logistics .lg-events-head { display: flex; align-items: center; }
#panel-logistics .lg-collapse-btn {
  background: none; border: none; cursor: pointer; padding: 4px 0;
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-secondary); display: flex; gap: 6px; align-items: center;
}
#panel-logistics .lg-collapse-btn:hover { color: var(--text-primary); }
#panel-logistics .lg-line-row > td { background: rgba(127,127,127,0.04); padding: 4px 8px 10px; }
#panel-logistics .lg-line-table { width: 100%; font-size: 0.78rem; }
#panel-logistics .lg-line-table th { font-weight: 500; color: var(--text-secondary); }
#panel-logistics .lg-line-notes { color: var(--text-secondary); font-size: 0.74rem; max-width: 240px; }
#panel-logistics tr.lg-over > td { box-shadow: inset 3px 0 0 #f43f5e; }

/* ── Prep list chips + detail ───────────────────────────────────── */
#panel-logistics .lg-prep-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
#panel-logistics .lg-chip {
  padding: 1px 7px; border-radius: 10px; font-size: 0.66rem; font-weight: 600;
  background: rgba(127,127,127,0.14); color: var(--text-secondary);
}
#panel-logistics .lg-chip-warn  { background: rgba(244,63,94,0.16);  color: #f43f5e; }
#panel-logistics .lg-chip-soon  { background: rgba(245,158,11,0.16); color: #f59e0b; }
#panel-logistics .lg-chip-early { background: rgba(168,85,247,0.16); color: #a855f7; }
#panel-logistics .lg-chip-over  { background: rgba(244,63,94,0.16);  color: #f43f5e; }
#panel-logistics .lg-check-inline { display: flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--text-secondary); }
#panel-logistics .lg-link-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#panel-logistics .lg-prior { border: 1px solid var(--border); border-radius: 6px; padding: 10px; }
#panel-logistics .lg-prior-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }

/* ── Prep checklist ─────────────────────────────────────────────── */
#panel-logistics .lg-checklist { display: flex; flex-direction: column; gap: 12px; }
#panel-logistics .lg-check-group-head {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent-light, #60a5fa); margin-bottom: 4px;
}
#panel-logistics .lg-check-item {
  display: grid; grid-template-columns: 1fr 200px; gap: 8px; align-items: center;
  padding: 4px 0; border-bottom: 1px solid var(--border);
}
#panel-logistics .lg-check-main { display: flex; gap: 8px; align-items: flex-start; font-size: 0.82rem; color: var(--text-primary); cursor: pointer; }
#panel-logistics .lg-check-main input { margin-top: 2px; }
#panel-logistics .lg-check-done { color: var(--text-secondary); text-decoration: line-through; }
#panel-logistics .lg-check-note { font-size: 0.78rem; }
@media (max-width: 720px) {
  #panel-logistics .lg-check-item { grid-template-columns: 1fr; }
}

/* ── Venue capacities + team/contacts (prep detail) ─────────────── */
#panel-logistics .lg-cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
#panel-logistics .lg-cap {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px;
  background: rgba(127,127,127,0.04); font-size: 0.84rem; color: var(--text-primary);
}
#panel-logistics .lg-staff { display: flex; flex-direction: column; gap: 5px; }
#panel-logistics .lg-staff-row { display: flex; gap: 10px; align-items: baseline; font-size: 0.84rem; color: var(--text-primary); }
#panel-logistics .lg-staff-row .lg-sf-label { min-width: 150px; }

/* ── Venue map (default view) ────────────────────────────────────── */
#panel-logistics .lg-view-toggle {
  display: inline-flex; border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden; margin-right: auto;
}
#panel-logistics .lg-view-btn {
  padding: 7px 12px; border: none; background: var(--bg-card);
  color: var(--text-secondary); font-size: 0.8rem; cursor: pointer;
  transition: all 0.15s;
}
#panel-logistics .lg-view-btn + .lg-view-btn { border-left: 1px solid var(--border); }
#panel-logistics .lg-view-btn:hover { color: var(--text-primary); }
#panel-logistics .lg-view-btn.active {
  background: var(--accent); color: #fff;
}

#panel-logistics .lg-venue-map-wrap { margin-bottom: 16px; }
#panel-logistics .lg-venue-map {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  padding: 8px;
  min-height: 220px;
}
#panel-logistics .lg-venue-map-canvas { position: relative; min-height: 200px; }
#panel-logistics .lg-map-loading {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 80px 0; color: var(--text-secondary); font-size: 0.85rem;
}
#panel-logistics .lg-map-svg { display: block; width: 100%; height: auto; }
#panel-logistics .lg-map-dot {
  fill-opacity: 0.6; stroke-width: 1; stroke-opacity: 0.9;
  transition: r 0.1s ease, fill-opacity 0.1s ease;
}
#panel-logistics .lg-map-dot:hover { fill-opacity: 0.9; }
#panel-logistics .lg-map-dot.curated { fill-opacity: 0.85; stroke-width: 1.6; }
#panel-logistics .lg-map-err { color: var(--text-secondary); padding: 40px; text-align: center; }

#panel-logistics .lg-map-tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--bg-secondary); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 9px; font-size: 0.76rem; line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
  max-width: 240px; transition: opacity 0.1s;
}

#panel-logistics .lg-map-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
  margin-top: 8px; font-size: 0.72rem; color: var(--text-secondary);
}
#panel-logistics .lg-map-legend-item { display: flex; align-items: center; gap: 6px; }
#panel-logistics .lg-map-dot-key {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); opacity: 0.6; display: inline-block;
}
#panel-logistics .lg-map-dot-key.curated {
  opacity: 0.85; border: 1.6px solid var(--text-primary);
}
#panel-logistics .lg-map-legend-note { font-style: italic; opacity: 0.85; }

/* Map view drops the two-pane grid: detail stacks full-width below the map. */
#panel-logistics .lg-venue-layout--map { grid-template-columns: 1fr; }

/* ── Series Explorer (the series-first hub) ─────────────────── */
#panel-logistics .lg-ex-row { display: flex; gap: 8px; align-items: flex-start; }
#panel-logistics .lg-ex-row-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  flex-shrink: 0;
}
#panel-logistics .lg-ex-spend { font-size: 0.78rem; font-weight: 600; color: var(--text-primary); }
#panel-logistics .lg-ex-icons { display: flex; gap: 4px; align-items: center; font-size: 0.72rem; }
#panel-logistics .lg-ex-dossier { min-width: 0; }

#panel-logistics .lg-ex-next {
  border: 1px solid var(--accent, #3b82f6);
  border-radius: 8px; padding: 12px; margin-top: 12px;
  background: rgba(59,130,246,0.05);
}
#panel-logistics .lg-ex-next-head {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px;
}
#panel-logistics .lg-ex-next-kicker {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-light, #60a5fa);
}
#panel-logistics .lg-ex-next-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin-top: 4px;
}
#panel-logistics .lg-ex-deadlines { display: flex; flex-direction: column; gap: 4px; }
#panel-logistics .lg-ex-deadline {
  display: flex; gap: 8px; align-items: baseline; font-size: 0.8rem; color: var(--text-primary);
}
#panel-logistics .lg-ex-deadline.lg-over { color: #f43f5e; }
#panel-logistics .lg-ex-budget-mini { display: flex; flex-direction: column; gap: 3px; }
#panel-logistics .lg-ex-mini-row {
  display: flex; justify-content: space-between; gap: 10px; font-size: 0.8rem;
  color: var(--text-primary); max-width: 260px;
}
#panel-logistics .lg-ex-cancelled > td { opacity: 0.55; text-decoration: line-through; }
#panel-logistics .lg-ex-contracts { display: flex; flex-direction: column; gap: 8px; }
#panel-logistics .lg-ex-contract-group {
  border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;
}
#panel-logistics .lg-ex-contract-head {
  display: flex; gap: 8px; align-items: baseline; font-size: 0.82rem;
  color: var(--text-primary); font-weight: 500;
}
#panel-logistics .lg-ex-contract-files {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px;
}

/* ── Saved floor plans quick list ───────────────────────────── */
#panel-logistics .lg-fp-saved { margin-bottom: 16px; }
#panel-logistics .lg-fp-saved-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 6px; flex-wrap: wrap;
}
#panel-logistics .lg-fp-saved-list {
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px;
}
#panel-logistics .lg-fp-saved-row {
  display: block; width: 100%; text-align: left; background: none;
  border: none; border-bottom: 1px solid var(--border);
  padding: 7px 10px; cursor: pointer;
}
#panel-logistics .lg-fp-saved-row:last-child { border-bottom: none; }
#panel-logistics .lg-fp-saved-row:hover { background: var(--bg-hover, rgba(127,127,127,0.06)); }
#panel-logistics .lg-fp-saved-row.active {
  background: var(--bg-hover, rgba(127,127,127,0.08));
  box-shadow: inset 3px 0 0 var(--accent, #3b82f6);
}

/* ── Seed Questions ─────────────────────────────────────────────── */
#panel-logistics .sq-check {
  display: inline-block; color: #22c55e; font-weight: 800; margin-right: 5px;
}
#panel-logistics .lg-chip.sq-chip-done { background: rgba(34,197,94,0.16); color: #22c55e; }
#panel-logistics .lg-chip.sq-chip-open { background: rgba(245,158,11,0.16); color: #f59e0b; }
/* Open-anchor sponsorship bench */
#panel-logistics .sq-bench {
  border: 1px solid rgba(245,158,11,0.35); border-radius: 8px; margin-bottom: 12px;
  background: rgba(245,158,11,0.05);
}
#panel-logistics .sq-bench-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer;
}
#panel-logistics .sq-bench-toggle { color: #f59e0b; font-weight: 800; }
#panel-logistics .sq-bench-title { font-weight: 700; color: var(--text-primary); }
#panel-logistics .sq-bench-body {
  padding: 4px 12px 12px 12px; display: flex; flex-direction: column; gap: 12px;
}
#panel-logistics .sq-bench-event-name {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600;
  color: var(--text-primary); margin-bottom: 4px;
}
#panel-logistics .sq-bench-slot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 3px 0 3px 16px;
  font-size: 0.85rem; color: var(--text-secondary);
}
#panel-logistics .sq-bench-slot-title { color: var(--text-primary); }
#panel-logistics .sq-err {
  color: #f43f5e; font-size: 0.8rem; margin: 6px 0;
}
#panel-logistics .sq-blurb { margin-bottom: 12px; max-width: 88ch; }

/* ── Three layers: events › sessions › result ────────────────────── */
#panel-logistics .sq-three {
  display: grid; grid-template-columns: 264px 288px minmax(0, 1fr); gap: 14px;
  align-items: start;
}
#panel-logistics .sq-three--wide { grid-template-columns: 264px minmax(0, 1fr); }
@media (max-width: 1180px) {
  #panel-logistics .sq-three,
  #panel-logistics .sq-three--wide { grid-template-columns: 1fr; }
}
#panel-logistics .sq-col {
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column; min-width: 0;
}
#panel-logistics .sq-col-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle, rgba(148,163,184,0.06));
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted, var(--text-secondary));
}
#panel-logistics .sq-col-search {
  flex: 1; min-width: 0; padding: 4px 8px; font-size: 0.78rem;
  text-transform: none; letter-spacing: normal;
}
#panel-logistics .sq-col-refresh { flex: 0 0 auto; }
#panel-logistics .sq-col-count {
  margin-left: auto; padding: 1px 6px; border-radius: 999px;
  background: rgba(148,163,184,0.18); color: var(--text-secondary);
}
#panel-logistics .sq-col-body { max-height: 620px; overflow-y: auto; }
#panel-logistics .sq-col-hint {
  padding: 16px 12px; font-size: 0.8rem; color: var(--text-secondary);
}
#panel-logistics .sq-row {
  display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
#panel-logistics .sq-row:hover { background: var(--bg-hover, rgba(127,127,127,0.06)); }
#panel-logistics .sq-row.active {
  background: var(--bg-card-hover); box-shadow: inset 3px 0 0 var(--accent, #3b82f6);
}
#panel-logistics .sq-row.sq-row-dim .sq-row-title { opacity: 0.66; }
#panel-logistics .sq-row-main { flex: 1; min-width: 0; }
#panel-logistics .sq-row-title {
  font-size: 0.85rem; font-weight: 500; color: var(--text-primary); line-height: 1.35;
}
#panel-logistics .sq-row-meta {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px;
  font-size: 0.73rem; color: var(--text-secondary);
}
#panel-logistics .sq-row-chips {
  display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px;
  flex: 0 0 auto; max-width: 45%;
}

/* Layer 0 — the selected event and everything that acts on all of it */
#panel-logistics .sq-ctx {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 0 12px; padding: 10px 14px;
  border: 1px solid var(--border); border-left: 3px solid var(--accent, #3b82f6);
  border-radius: 8px; background: var(--bg-subtle, rgba(148,163,184,0.06));
}
#panel-logistics .sq-ctx-id { flex: 1 1 260px; min-width: 0; }
#panel-logistics .sq-ctx-name { font-size: 0.98rem; font-weight: 600; color: var(--text-primary); }
#panel-logistics .sq-ctx-meta { font-size: 0.76rem; color: var(--text-secondary); margin-top: 2px; }
#panel-logistics .sq-ctx-actions {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
#panel-logistics .lg-link-btn.sq-btn-primary {
  padding: 4px 10px; border-radius: 6px;
  background: rgba(59,130,246,0.14); color: #60a5fa; font-weight: 600;
}

/* Result-layer view switch */
#panel-logistics .sq-views { display: inline-flex; gap: 6px; margin: 0 0 12px; }
#panel-logistics .sq-view-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: none; color: var(--text-secondary); cursor: pointer; font-size: 0.8rem;
}
#panel-logistics .sq-view-btn:hover { color: var(--text-primary); }
#panel-logistics .sq-view-btn.active {
  border-color: var(--accent, #3b82f6); color: var(--accent, #3b82f6);
  background: rgba(59,130,246,0.1); font-weight: 600;
}
#panel-logistics .sq-view-n {
  padding: 0 5px; border-radius: 999px; font-size: 0.7rem;
  background: rgba(148,163,184,0.22);
}

/* Layer 3 — the result pane */
#panel-logistics .sq-pane {
  border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px;
  min-width: 0; min-height: 320px;
}
#panel-logistics .sq-pane-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 260px; text-align: center;
  font-size: 0.84rem; color: var(--text-secondary);
}
#panel-logistics .sq-pane-empty--inline { min-height: 90px; }
#panel-logistics .sq-pane-empty-mark {
  font-size: 1.6rem; line-height: 1; opacity: 0.35;
}
#panel-logistics .sq-res-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
#panel-logistics .sq-res-id { flex: 1 1 240px; min-width: 0; }
#panel-logistics .sq-res-title {
  font-size: 0.98rem; font-weight: 600; color: var(--text-primary); line-height: 1.35;
}
#panel-logistics .sq-res-meta { font-size: 0.76rem; color: var(--text-secondary); margin-top: 2px; }
#panel-logistics .sq-res-actions {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
#panel-logistics .sq-sec {
  margin: 16px 0 8px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted, var(--text-secondary));
}
#panel-logistics .sq-note {
  padding: 9px 12px; border-radius: 7px; font-size: 0.81rem; line-height: 1.5;
  background: rgba(148,163,184,0.1); color: var(--text-secondary); max-width: 74ch;
}
#panel-logistics .sq-note-warn {
  background: rgba(245,158,11,0.12); color: #f59e0b;
}
#panel-logistics .sq-session-meta {
  margin-top: 8px; display: flex; flex-direction: column; gap: 4px;
  font-size: 0.82rem; color: var(--text-secondary); line-height: 1.45;
}
#panel-logistics .sq-meta-row {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline;
}
#panel-logistics .sq-meta-label {
  flex: 0 0 auto; min-width: 72px; font-weight: 700;
  color: var(--text-muted, var(--text-secondary)); text-transform: uppercase;
  letter-spacing: 0.03em; font-size: 0.7rem;
}
#panel-logistics .sq-meta-desc {
  margin-top: 2px; color: var(--text-secondary); max-width: 72ch;
}
#panel-logistics .sq-qset {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border);
  font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5;
}
#panel-logistics .sq-poll { margin-bottom: 8px; }
#panel-logistics .sq-disc { margin: 6px 0 8px 18px; display: flex; flex-direction: column; gap: 4px; }
#panel-logistics .sq-wrap { margin-top: 4px; }

/* ── Session Takeaways ──────────────────────────────────────────── */
#panel-logistics .sq-ok { color: #22c55e; font-size: 0.8rem; margin: 6px 0; }
#panel-logistics .lg-chip.sq-chip-live { background: rgba(34,197,94,0.16); color: #22c55e; }
#panel-logistics .lg-chip.sq-chip-off { background: rgba(148,163,184,0.18); color: var(--text-secondary); }
#panel-logistics .lg-chip.sq-chip-scan { background: rgba(59,130,246,0.16); color: #60a5fa; }
#panel-logistics .sq-tk-actions {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
#panel-logistics .sq-tk-upload { cursor: pointer; }
#panel-logistics .lg-link-btn.sq-tk-danger { color: #f43f5e; }
#panel-logistics .sq-tk-link {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 0.8rem; color: var(--text-secondary);
}

/* The code, on the surface — not behind a modal. */
#panel-logistics .sq-qr-inline {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start;
  padding: 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-subtle, rgba(148,163,184,0.06));
}
#panel-logistics .sq-qr-inline-img {
  flex: 0 0 auto; width: 168px; height: 168px; border-radius: 8px;
  background: #fff; padding: 8px; cursor: zoom-in;
}
#panel-logistics .sq-qr-inline-side {
  flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 10px;
}
#panel-logistics .sq-qr-inline-stat {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 0.82rem; color: var(--text-secondary);
}
#panel-logistics .sq-qr-inline-stat strong {
  font-size: 1.5rem; font-weight: 700; color: var(--text-primary); line-height: 1;
}

/* Resource rows: the draft, the registered file, their controls. */
#panel-logistics .sq-file {
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
#panel-logistics .sq-file-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px;
  font-size: 0.82rem; color: var(--text-secondary);
}
#panel-logistics .sq-file-row + .sq-file-row { border-top: 1px solid var(--border); }
#panel-logistics .sq-file-name { font-weight: 600; color: var(--text-primary); word-break: break-all; }
#panel-logistics .sq-file-hint { margin-top: 6px; }

/* QR board — every code for the event, at hand. */
#panel-logistics .sq-board {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 14px;
  margin-top: 12px;
}
#panel-logistics .sq-board-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-subtle, rgba(148,163,184,0.05)); text-align: center;
}
#panel-logistics .sq-board-card.sq-board-off { opacity: 0.55; }
#panel-logistics .sq-board-img {
  width: 100%; max-width: 168px; aspect-ratio: 1; border-radius: 8px;
  background: #fff; padding: 8px; cursor: zoom-in;
}
#panel-logistics .sq-board-title {
  font-size: 0.82rem; font-weight: 600; color: var(--text-primary); line-height: 1.35;
}
#panel-logistics .sq-board-meta { font-size: 0.73rem; color: var(--text-secondary); }
#panel-logistics .sq-board-chips,
#panel-logistics .sq-board-actions {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px;
}

/* Captured roster */
#panel-logistics .sq-domains {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0;
}
#panel-logistics .sq-roster-table {
  width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.82rem;
}
#panel-logistics .sq-roster-table th {
  text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted, var(--text-secondary));
}
#panel-logistics .sq-roster-table td {
  padding: 6px 8px; border-bottom: 1px solid var(--border); color: var(--text-primary);
}
#panel-logistics .sq-roster-table td.lg-venue-meta { color: var(--text-secondary); }

/* Print just the board: a sheet of codes to cut up and tape to lecterns.
   Isolated by visibility + absolute placement rather than by hiding the app
   chrome, because that would depend on the shell's DOM shape (sidebar/main
   wrappers live in base.html and have moved before). Nothing outside
   #sq-qr-board paints; the board itself is lifted to the page origin. */
@media print {
  body.sq-printing-qr * { visibility: hidden !important; }
  body.sq-printing-qr #sq-qr-board,
  body.sq-printing-qr #sq-qr-board * { visibility: visible !important; }
  body.sq-printing-qr .sq-no-print { display: none !important; }
  body.sq-printing-qr #sq-qr-board {
    position: absolute; left: 0; top: 0; width: 100%; margin: 0;
    grid-template-columns: repeat(2, 1fr); gap: 16px;
  }
  body.sq-printing-qr #sq-qr-board .sq-board-card {
    border: 1px solid #cbd5e1; background: #fff; break-inside: avoid;
  }
  body.sq-printing-qr #sq-qr-board .sq-board-card.sq-board-off { opacity: 1; }
  body.sq-printing-qr #sq-qr-board .sq-board-title,
  body.sq-printing-qr #sq-qr-board .sq-board-meta { color: #0f172a; }
  body.sq-printing-qr #sq-qr-board .sq-board-img { max-width: 220px; }
}
#panel-logistics .sq-tk-link code {
  padding: 3px 7px; border-radius: 5px; font-size: 0.78rem;
  background: rgba(148,163,184,0.14); color: var(--text-primary);
  word-break: break-all;
}
#panel-logistics .sq-tk-body {
  margin-top: 10px; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5;
}
#panel-logistics .sq-tk-sub { font-weight: 600; color: var(--text-primary); margin: 8px 0 4px; }
#panel-logistics .sq-tk-list {
  margin: 0 0 6px 18px; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 4px;
}
#panel-logistics .sq-tk-list li::before { content: '\2610'; margin-right: 8px; opacity: 0.75; }
#panel-logistics .sq-tk-list.sq-tk-dots li::before { content: '\2022'; }

/* QR projector overlay — read from the back of a ballroom. */
.sq-qr-overlay {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(8, 12, 20, 0.88);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.sq-qr-card {
  position: relative; background: #fff; border-radius: 16px;
  padding: 28px 36px 24px; text-align: center; max-width: min(92vw, 620px);
}
.sq-qr-close {
  position: absolute; top: 8px; right: 14px; border: 0; background: none;
  font-size: 28px; line-height: 1; color: #64748b; cursor: pointer;
}
.sq-qr-kicker {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #2563eb; margin-bottom: 6px;
}
.sq-qr-title {
  font-size: 1.35rem; font-weight: 700; color: #0f172a;
  line-height: 1.25; margin-bottom: 16px;
}
.sq-qr-img { width: min(64vh, 420px); height: auto; display: block; margin: 0 auto; }
.sq-qr-url {
  margin-top: 14px; font-size: 1.05rem; font-weight: 600;
  color: #0f172a; word-break: break-all;
}
.sq-qr-hint { margin-top: 8px; font-size: 0.75rem; color: #94a3b8; }


/* === css/event_checklists.css === */
/* ═══════════════════════════════════════════════════════════
   Event Checklists — Logistics ▸ Checklists sub-tab
   A friendlier, graphic-forward take on the logistics procedures.
   The to-do list is the hero; prep context is secondary.

   Colors consume the global theme tokens (static/css/themes.css)
   so the panel tracks dark / pastel / midnight / sage / demo.
   Local --ec-* aliases just re-point at those tokens.
   ═══════════════════════════════════════════════════════════ */
[x-cloak] { display: none !important; }

.ec-root {
  --ec-accent: var(--accent);
  --ec-accent-soft: var(--accent-bg-subtle);
  --ec-done: var(--success);
  --ec-track: var(--border);
  --ec-ink: var(--text-primary);
  --ec-muted: var(--text-secondary);
  --ec-line: var(--border);
  --ec-card: var(--bg-card);
  --ec-bg: transparent;
  color: var(--ec-ink);
  background: var(--ec-bg);
  min-height: 100%;
}

/* Embedded inside /dept/events ▸ Logistics — give it a contained card. */
.ec-embedded {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-primary);
}

.ec-muted { color: var(--ec-muted); }
.ec-pad { padding: 16px; }
.ec-dot { color: var(--ec-muted); margin: 0 4px; }

/* ── Layout ──────────────────────────────────────────────── */
.ec-layout { display: grid; grid-template-columns: 340px 1fr; gap: 0; align-items: start; }
@media (max-width: 900px) { .ec-layout { grid-template-columns: 1fr; } }

/* ── Event picker ────────────────────────────────────────── */
.ec-events { border-right: 1px solid var(--ec-line); min-height: 60vh; background: var(--bg-secondary); }
.ec-events-head { padding: 16px; position: sticky; top: 0; background: var(--bg-secondary); z-index: 2; border-bottom: 1px solid var(--ec-line); }
.ec-search input {
  width: 100%; border: 1px solid var(--ec-line); border-radius: 10px;
  padding: 9px 12px; font-size: 14px; background: var(--bg-card); color: var(--text-primary);
}
.ec-search input::placeholder { color: var(--text-muted); }
.ec-filters { display: flex; gap: 8px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.ec-filters select {
  border: 1px solid var(--ec-line); border-radius: 9px; padding: 6px 8px;
  font-size: 12.5px; background: var(--bg-card); color: var(--ec-ink); flex: 1; min-width: 90px;
}
.ec-toggle { font-size: 12.5px; color: var(--ec-muted); display: flex; align-items: center; gap: 5px; white-space: nowrap; }

.ec-events-list { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.ec-event {
  display: flex; gap: 12px; align-items: center; text-align: left;
  padding: 11px 12px; border: 1px solid transparent; border-radius: 12px;
  background: transparent; cursor: pointer; width: 100%; transition: background .12s, border-color .12s;
  color: var(--ec-ink);
}
.ec-event:hover { background: var(--bg-card-hover); border-color: var(--ec-line); }
.ec-event.is-active { background: var(--ec-accent-soft); border-color: var(--accent); }
.ec-event-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ec-event-name { font-weight: 650; font-size: 13.5px; line-height: 1.25; }
.ec-event-meta { font-size: 12px; color: var(--ec-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-event-tags { display: flex; gap: 6px; margin-top: 3px; flex-wrap: wrap; }

/* progress ring (CSS conic donut) */
.ec-ring, .ec-evhead-ring {
  border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; position: relative;
}
.ec-ring { width: 40px; height: 40px; }
.ec-ring::after, .ec-evhead-ring::after {
  content: ''; position: absolute; inset: 4px; background: var(--bg-secondary); border-radius: 50%;
}
.ec-ring-num { position: relative; z-index: 1; font-size: 10.5px; font-weight: 750; color: var(--ec-ink); }
.ec-evhead-ring { width: 88px; height: 88px; flex-direction: column; }
.ec-evhead-ring::after { inset: 8px; background: var(--bg-primary); }
.ec-ring-big { position: relative; z-index: 1; font-size: 20px; font-weight: 780; color: var(--ec-ink); }
.ec-ring-cap { position: relative; z-index: 1; font-size: 10px; color: var(--ec-muted); text-transform: uppercase; letter-spacing: .08em; }

/* tags */
.ec-tag { font-size: 10.5px; font-weight: 650; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.ec-tag-days { background: var(--bg-card-hover); color: var(--ec-muted); }
.ec-tag-days.is-soon { background: var(--warning-bg); color: var(--warning); }
.ec-tag-days.is-past { background: var(--bg-card-hover); color: var(--text-muted); }
.ec-tag-new { background: var(--success-bg); color: var(--success); }
.ec-tag-early { background: var(--warning-bg); color: var(--warning); }

.ec-skel { height: 62px; border-radius: 12px; margin: 4px 8px; background: linear-gradient(90deg, var(--bg-secondary), var(--bg-card-hover), var(--bg-secondary)); background-size: 200% 100%; animation: ec-shimmer 1.2s linear infinite; }
@keyframes ec-shimmer { to { background-position: -200% 0; } }

/* ── Workspace ───────────────────────────────────────────── */
.ec-workspace { padding: 22px 28px 60px; min-width: 0; }

.ec-empty { text-align: center; padding: 80px 20px; color: var(--ec-muted); }
.ec-empty-art { width: 64px; height: 64px; margin: 0 auto 14px; color: var(--ec-accent); background: var(--ec-accent-soft); border-radius: 18px; display: grid; place-items: center; }
.ec-empty-art svg { width: 34px; height: 34px; }
.ec-empty h2 { margin: 0 0 6px; color: var(--ec-ink); }

/* event header */
.ec-evhead { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ec-evhead h2 { margin: 0 0 4px; font-size: 21px; letter-spacing: -.01em; color: var(--ec-ink); }
.ec-evhead-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 13px; color: var(--ec-muted); }

/* first-year banner */
.ec-firstyear {
  display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 4px;
  padding: 12px 16px; border-radius: 12px; background: var(--success-bg); color: var(--success);
  border: 1px solid var(--success); font-size: 13px;
}
.ec-firstyear svg { width: 22px; height: 22px; color: var(--success); flex-shrink: 0; }
.ec-firstyear strong { color: var(--text-primary); }

/* sub-tab strip */
.ec-tabs { display: flex; gap: 10px; margin: 18px 0 20px; flex-wrap: wrap; }
.ec-tab {
  flex: 1 1 180px; min-width: 160px; text-align: left; cursor: pointer;
  border: 1px solid var(--ec-line); border-radius: 14px; background: var(--bg-card);
  padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 8px; position: relative;
  transition: border-color .12s, box-shadow .12s, transform .08s; color: var(--ec-ink);
}
.ec-tab:hover { border-color: var(--border-light); box-shadow: var(--shadow-md); }
.ec-tab.is-active { border-color: var(--ec-accent); box-shadow: var(--shadow-glow); }
.ec-tab-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--ec-accent-soft); color: var(--ec-accent); display: grid; place-items: center; }
.ec-tab.is-done .ec-tab-ico { background: var(--success-bg); color: var(--ec-done); }
.ec-tab-ico svg { width: 19px; height: 19px; }
.ec-tab-label { display: flex; align-items: baseline; justify-content: space-between; font-weight: 680; font-size: 13.5px; }
.ec-tab-prog { font-size: 11.5px; color: var(--ec-muted); font-weight: 600; }
.ec-tab-bar { height: 5px; border-radius: 4px; background: var(--ec-track); overflow: hidden; }
.ec-tab-bar span { display: block; height: 100%; background: var(--ec-accent); border-radius: 4px; transition: width .25s ease; }
.ec-tab.is-done .ec-tab-bar span { background: var(--ec-done); }

/* ══ HERO: the to-do list ══ */
.ec-hero { background: var(--ec-card); border: 1px solid var(--ec-line); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow-md); }
.ec-hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.ec-hero-head h3 { margin: 0 0 3px; font-size: 17px; color: var(--ec-ink); }
.ec-hero-head p { margin: 0; font-size: 12.5px; max-width: 560px; }
.ec-hero-prog { min-width: 150px; text-align: right; }
.ec-hero-count { font-size: 13px; color: var(--ec-muted); }
.ec-hero-count strong { color: var(--ec-ink); font-size: 18px; }
.ec-hero-bar { height: 7px; border-radius: 5px; background: var(--ec-track); overflow: hidden; margin-top: 6px; }
.ec-hero-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); border-radius: 5px; transition: width .3s ease; }

.ec-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.ec-groups.is-timeline { display: block; position: relative; }
.ec-groups.is-timeline::before { content: ''; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: var(--ec-track); }

.ec-group { border: 1px solid var(--ec-line); border-radius: 13px; padding: 12px 14px; background: var(--bg-secondary); }
.ec-group.ec-phase { margin: 0 0 12px 40px; position: relative; background: var(--bg-card); }
.ec-group-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.ec-group-head h4 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ec-ink); }
.ec-group-when { display: inline-block; font-size: 11px; color: var(--ec-accent); font-weight: 650; background: var(--ec-accent-soft); padding: 1px 8px; border-radius: 20px; margin-top: 3px; }
.ec-group-hint { display: block; font-size: 11.5px; color: var(--ec-muted); margin-top: 3px; }
.ec-group-count { margin-left: auto; font-size: 11.5px; color: var(--ec-muted); font-weight: 650; flex-shrink: 0; }
.ec-group-dot { position: absolute; left: -40px; top: 2px; width: 32px; height: 32px; border-radius: 50%; background: var(--ec-accent); color: var(--text-on-accent); display: grid; place-items: center; font-size: 12.5px; font-weight: 750; box-shadow: 0 0 0 4px var(--bg-card); }

.ec-items { list-style: none; margin: 0; padding: 0; }
.ec-item { padding: 5px 0; border-top: 1px dashed var(--border); position: relative; padding-right: 26px; }
.ec-item:first-child { border-top: 0; }
.ec-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.ec-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.ec-box { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--ec-track); flex-shrink: 0; display: grid; place-items: center; margin-top: 1px; transition: background .12s, border-color .12s; }
.ec-box svg { width: 14px; height: 14px; color: var(--text-on-accent); }
.ec-item.is-done .ec-box { background: var(--ec-done); border-color: var(--ec-done); }
.ec-item-label { font-size: 13px; line-height: 1.4; color: var(--ec-ink); }
.ec-item.is-done .ec-item-label { color: var(--ec-muted); text-decoration: line-through; text-decoration-color: var(--text-muted); }
.ec-note-btn { position: absolute; right: 0; margin-top: 2px; opacity: 0; border: 0; background: transparent; color: var(--ec-muted); cursor: pointer; padding: 2px; }
.ec-item:hover .ec-note-btn, .ec-note-btn.has-note { opacity: 1; }
.ec-note-btn.has-note { color: var(--ec-accent); }
.ec-note-btn svg { width: 15px; height: 15px; }
.ec-note { margin: 6px 0 4px 30px; }
.ec-note textarea { width: 100%; border: 1px solid var(--ec-line); border-radius: 8px; padding: 6px 8px; font-size: 12.5px; font-family: inherit; resize: vertical; background: var(--bg-card); color: var(--text-primary); }

/* ── Supporting context (secondary) ──────────────────────── */
.ec-context { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 18px; }
.ec-card { background: var(--bg-card); border: 1px solid var(--ec-line); border-radius: 14px; padding: 14px 16px; }
.ec-card h4 { margin: 0 0 10px; font-size: 13px; display: flex; align-items: center; gap: 8px; color: var(--ec-ink); }
.ec-card h4 svg { width: 17px; height: 17px; color: var(--ec-muted); }

/* deadlines — overdue reads in the simple past + is de-emphasized */
.ec-deadlines { list-style: none; margin: 0; padding: 0; }
.ec-deadline { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--border); font-size: 12.5px; color: var(--ec-ink); }
.ec-deadline:first-child { border-top: 0; }
.ec-dl-label { font-weight: 600; flex: 1; }
.ec-dl-date { color: var(--ec-muted); }
.ec-dl-status { font-size: 11.5px; font-weight: 650; padding: 1px 8px; border-radius: 20px; background: var(--bg-card-hover); color: var(--ec-muted); }
.ec-deadline.is-imminent .ec-dl-status { background: var(--warning-bg); color: var(--warning); }
.ec-deadline.is-overdue { opacity: .6; }
.ec-deadline.is-overdue .ec-dl-label { text-decoration: line-through; text-decoration-color: var(--text-muted); font-weight: 500; }
.ec-deadline.is-overdue .ec-dl-status { background: var(--bg-card-hover); color: var(--text-muted); }

/* budget (collapsed by default) */
.ec-collapse { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: transparent; border: 0; cursor: pointer; padding: 0; font-size: 13px; color: var(--ec-ink); }
.ec-collapse-title { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.ec-collapse-title svg { width: 17px; height: 17px; color: var(--ec-muted); }
.ec-collapse-summary { display: flex; align-items: center; gap: 6px; color: var(--ec-muted); font-size: 12px; }
.ec-caret svg { width: 16px; height: 16px; transition: transform .18s; }
.ec-caret.open svg { transform: rotate(180deg); }
.ec-budget { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12px; color: var(--ec-ink); }
.ec-budget th { text-align: right; color: var(--ec-muted); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--ec-line); }
.ec-budget th:first-child { text-align: left; }
.ec-budget td { text-align: right; padding: 4px 6px; border-bottom: 1px dashed var(--border); }
.ec-budget td:first-child { text-align: left; }
.ec-budget .neg { color: var(--danger); font-weight: 650; }
.ec-budget .pos { color: var(--ec-done); }
.ec-budget tr.is-over td:first-child { font-weight: 650; }

/* prior year */
.ec-prior-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 12.5px; border-top: 1px dashed var(--border); color: var(--ec-ink); }
.ec-prior-row:first-child { border-top: 0; }
.pos { color: var(--ec-done); }
.ec-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ec-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ec-accent); text-decoration: none; padding: 4px 10px; border: 1px solid var(--ec-line); border-radius: 20px; }
.ec-link:hover { background: var(--ec-accent-soft); }
.ec-link svg { width: 14px; height: 14px; }


/* === css/event_product_creation.css === */
/* ═══════════════════════════════════════════════════════════
   Product Creation — /dept/events?tab=product_creation
   CY-1 / CY / CY+1 recode + certification workspace.
   All rules scoped under .pc-root; colors consume the global
   theme tokens (static/css/themes.css).
   ═══════════════════════════════════════════════════════════ */
[x-cloak] { display: none !important; }

.pc-root {
  padding: 20px 32px 48px;
  color: var(--text-primary);
  /* year-column accents */
  --pc-past: var(--text-muted);
  --pc-curr: var(--text-secondary);
  --pc-target: var(--accent);
  --pc-hl: color-mix(in srgb, var(--warning, #d97706) 16%, transparent);
  --pc-cert: var(--success);
}

/* ── sub-tabs (Sales_Category__c) + global active filter ── */
.pc-subtabs {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.pc-subtab-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pc-subtab {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); background: var(--bg-secondary);
  color: var(--text-secondary); border-radius: 999px; padding: 7px 14px;
  font-size: 12.5px; font-weight: 650; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.pc-subtab:hover { color: var(--text-primary); border-color: var(--accent); }
.pc-subtab.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.pc-subtab-count {
  font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.pc-active-seg { flex: none; }

/* ── header ─────────────────────────────────────────────── */
.pc-header {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); margin-bottom: 14px;
}
.pc-cycle { display: flex; align-items: center; gap: 8px; }
.pc-yr-btn {
  border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary);
  border-radius: 8px; width: 28px; height: 28px; font-size: 16px; cursor: pointer; line-height: 1;
}
.pc-yr-btn:hover { color: var(--text-primary); border-color: var(--accent); }
.pc-cycle-years { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.pc-yr.past { color: var(--pc-past); }
.pc-yr.curr { color: var(--pc-curr); }
.pc-yr.target {
  color: var(--pc-target);
  background: var(--accent-bg-subtle); padding: 3px 10px; border-radius: 8px;
}
.pc-yr-sep { color: var(--text-muted); font-weight: 400; }

.pc-progress { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 220px; }
.pc-progress-bar {
  flex: 1; height: 10px; border-radius: 6px; background: var(--border);
  display: flex; overflow: hidden; max-width: 420px;
}
.pc-progress-bar .seg { height: 100%; }
.pc-progress-bar .seg.cert { background: var(--pc-cert); }
.pc-progress-bar .seg.mod { background: var(--warning, #d97706); }
.pc-progress-bar .seg.excl { background: var(--text-muted); opacity: .4; }
.pc-progress-label { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; }

/* ── buttons / chips ────────────────────────────────────── */
.pc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary);
  border-radius: 9px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: border-color .12s, background .12s;
}
.pc-btn svg { width: 14px; height: 14px; }
.pc-btn:hover { border-color: var(--accent); }
.pc-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.pc-btn.success { border-color: var(--pc-cert); color: var(--pc-cert); }
.pc-btn.success:hover { background: color-mix(in srgb, var(--pc-cert) 12%, transparent); }
.pc-btn.subtle { border-color: transparent; background: transparent; color: var(--text-secondary); }
.pc-btn.subtle:hover { color: var(--text-primary); border-color: var(--border); }
.pc-btn.subtle.danger:hover { color: var(--error); border-color: var(--error); }
.pc-btn.active { border-color: var(--accent); background: var(--accent-bg-subtle); }
.pc-btn:disabled { opacity: .5; cursor: not-allowed; }

.pc-error {
  margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; cursor: pointer;
  background: color-mix(in srgb, var(--error) 12%, transparent);
  border: 1px solid var(--error); color: var(--error); font-size: 13px;
}
.pc-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 0; color: var(--text-muted); }
.pc-loading.small { padding: 24px 0; }
.pc-empty { padding: 60px 24px; text-align: center; color: var(--text-secondary); font-size: 14px; }
.pc-empty-title { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }

/* ── layout ─────────────────────────────────────────────── */
.pc-layout { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .pc-layout { grid-template-columns: 1fr; } }

/* ── left rail ──────────────────────────────────────────── */
.pc-rail {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card);
  position: sticky; top: 12px; max-height: calc(100vh - 40px); display: flex; flex-direction: column;
}
.pc-rail-head { padding: 12px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.pc-rail-head input[type="search"] {
  width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px;
  font-size: 13px; background: var(--bg-secondary); color: var(--text-primary);
}
.pc-rail-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pc-rail-hint { font-size: 11px; color: var(--text-muted); line-height: 1.35; }
.pc-toggle { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pc-tree { overflow-y: auto; padding: 8px; }

.pc-caret { display: inline-block; transition: transform .12s; color: var(--text-muted); font-size: 11px; }
.pc-caret.open { transform: rotate(90deg); }

/* group header row = [checkbox] [disclosure toggle button] */
.pc-tt-head, .pc-ss-head { display: flex; align-items: center; gap: 2px; border-radius: 8px; }
.pc-tt-head:hover, .pc-ss-head:hover { background: var(--bg-card-hover); }
.pc-ss-head { padding-left: 14px; }
.pc-tt-head.sel, .pc-ss-head.sel { background: var(--accent-bg-subtle); }
.pc-check { display: inline-flex; align-items: center; padding: 6px 2px 6px 6px; cursor: pointer; }
.pc-check input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }
.pc-tt-toggle, .pc-ss-toggle {
  display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; text-align: left;
  background: transparent; border: none; cursor: pointer; color: var(--text-primary);
  padding: 7px 8px 7px 2px; font-size: 13px;
}
.pc-tt-toggle { font-weight: 750; }
.pc-ss-toggle { font-weight: 600; color: var(--text-secondary); }
.pc-tt-name, .pc-ss-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-count-chip {
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-secondary);
}
.pc-count-chip.done { color: var(--pc-cert); border-color: var(--pc-cert); }

.pc-event {
  display: flex; gap: 9px; align-items: center; width: 100%; text-align: left;
  padding: 7px 8px 7px 22px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; cursor: pointer; color: var(--text-primary);
}
.pc-event:hover { background: var(--bg-card-hover); border-color: var(--border); }
.pc-event.active { background: var(--accent-bg-subtle); border-color: var(--accent); }
.pc-event-check { width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; accent-color: var(--accent); }
.pc-ring { width: 26px; height: 26px; border-radius: 50%; position: relative; flex-shrink: 0; display: grid; place-items: center; }
.pc-ring-hole { position: absolute; inset: 4px; border-radius: 50%; background: var(--bg-card); }
.pc-event.active .pc-ring-hole { background: var(--accent-bg-subtle); }
.pc-event-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pc-event-name { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.pc-event-meta { font-size: 11px; color: var(--text-muted); display: flex; gap: 8px; align-items: center; }
.pc-changed-dot { color: var(--warning, #d97706); font-weight: 700; }

/* ── workspace toolbar (selection summary + expand level) ─ */
.pc-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); margin-bottom: 10px; position: sticky; top: 0; z-index: 4;
}
.pc-toolbar-left { font-size: 13px; color: var(--text-secondary); }
.pc-toolbar-left strong { color: var(--text-primary); font-size: 15px; }
.pc-toolbar-load { margin-left: 8px; font-size: 11.5px; color: var(--text-muted); font-style: italic; }
.pc-toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pc-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.pc-seg button {
  border: none; background: var(--bg-secondary); color: var(--text-secondary);
  padding: 7px 12px; font-size: 12px; font-weight: 650; cursor: pointer;
  border-right: 1px solid var(--border);
}
.pc-seg button:last-child { border-right: none; }
.pc-seg button:hover { color: var(--text-primary); }
.pc-seg button.active { background: var(--accent); color: #fff; }

/* ── event section (one per selected event) ─────────────── */
.pc-section {
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg-primary);
  margin-bottom: 12px; overflow: hidden;
}
.pc-section.open { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.pc-section-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--bg-card); border-bottom: 1px solid transparent;
}
.pc-section.open .pc-section-head { border-bottom-color: var(--border); }
.pc-section-toggle {
  display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; text-align: left;
  background: transparent; border: none; cursor: pointer; color: var(--text-primary); padding: 0;
}
.pc-section-title-wrap { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-section-title { font-size: 15px; font-weight: 750; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-section-sub { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; flex-wrap: wrap; }
.pc-section-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pc-section-body { padding: 4px 12px 12px; }
.pc-section-body .pc-col-heads { background: var(--bg-card); border-radius: 8px; top: 52px; }

/* ── event header / bulk bar ────────────────────────────── */
.pc-ev-head {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); margin-bottom: 10px;
}
.pc-ev-title-wrap { flex: 1; min-width: 260px; }
.pc-ev-title { font-size: 17px; font-weight: 750; }
.pc-ev-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }
.pc-dot { margin: 0 5px; color: var(--text-muted); }
.pc-ev-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.pc-bulk {
  border: 1px dashed var(--accent); border-radius: var(--radius); background: var(--accent-bg-subtle);
  padding: 12px 16px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 9px;
}
.pc-bulk-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-bulk-row > label:first-child { font-size: 11.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); width: 78px; }
.pc-bulk-row select, .pc-bulk-row input[type="number"], .pc-bulk-row input[type="text"] {
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; font-size: 12.5px;
  background: var(--bg-card); color: var(--text-primary);
}
.pc-bulk-num { width: 90px; }
.pc-bulk-bullet { flex: 1; min-width: 220px; }
.pc-bulk-target { font-size: 12.5px; color: var(--text-secondary); }
.pc-bulk-result { font-size: 12.5px; font-weight: 650; color: var(--accent); }

/* ── column headers ─────────────────────────────────────── */
.pc-col-heads {
  display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px 300px; gap: 10px;
  padding: 8px 18px 6px; font-size: 11.5px; font-weight: 750;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
  position: sticky; top: 0; background: var(--bg-primary); z-index: 3;
}
.pc-col.past { color: var(--pc-past); text-align: right; }
.pc-col.curr { color: var(--pc-curr); text-align: right; }
.pc-col.target { color: var(--pc-target); text-align: right; }
.pc-col-tag { font-size: 10px; opacity: .8; text-transform: none; letter-spacing: 0; }

/* ── product line cards ─────────────────────────────────── */
.pc-line {
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card);
  margin-bottom: 8px; overflow: hidden;
}
.pc-line.certified { border-left: 3px solid var(--pc-cert); }
.pc-line.excluded { opacity: .55; }
.pc-line.open { border-color: var(--accent); }

.pc-line-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px 300px;
  gap: 10px; align-items: center; padding: 10px 18px; cursor: pointer;
}
.pc-line-row:hover { background: var(--bg-card-hover); }
.pc-line-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pc-line-name { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-seed-chip {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; white-space: nowrap;
  border: 1px solid var(--border); color: var(--text-secondary); background: var(--bg-secondary);
}
.pc-seed-chip.existing { color: var(--accent); border-color: var(--accent); }
.pc-seed-chip.added { color: var(--success); border-color: var(--success); }
.pc-delta-chip {
  font-size: 10.5px; font-weight: 750; color: var(--warning, #d97706); white-space: nowrap;
  background: var(--pc-hl); border-radius: 20px; padding: 2px 7px;
}
.pc-line-price { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.pc-line-price.past { color: var(--pc-past); }
.pc-line-price.curr { color: var(--pc-curr); }
.pc-line-price.target { color: var(--text-primary); font-weight: 700; }
.pc-line-price.hl { background: var(--pc-hl); border-radius: 6px; padding: 2px 6px; }
.pc-line-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

.pc-status {
  font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 20px; white-space: nowrap;
  background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-secondary);
}
.pc-status.certified { color: var(--pc-cert); border-color: var(--pc-cert); background: color-mix(in srgb, var(--pc-cert) 10%, transparent); }
.pc-status.modified { color: var(--warning, #d97706); border-color: var(--warning, #d97706); }
.pc-status.excluded { text-decoration: line-through; }

.pc-cert-btn {
  border: 1px solid var(--pc-cert); color: var(--pc-cert); background: transparent;
  border-radius: 8px; padding: 4px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.pc-cert-btn:hover { background: color-mix(in srgb, var(--pc-cert) 14%, transparent); }
.pc-cert-btn.undo { border-color: var(--border); color: var(--text-secondary); }

/* ── expanded detail: diff table ────────────────────────── */
.pc-line-detail { border-top: 1px solid var(--border); padding: 14px 18px 12px; }
.pc-diff { width: 100%; border-collapse: collapse; }
.pc-diff td { padding: 5px 8px; font-size: 12.5px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); vertical-align: middle; }
.pc-f-label { color: var(--text-secondary); font-weight: 600; width: 220px; }
.pc-f { text-align: right; font-variant-numeric: tabular-nums; }
.pc-f.past { color: var(--pc-past); width: 130px; }
.pc-f.curr { color: var(--pc-curr); width: 130px; }
.pc-f.target { width: 300px; }
.pc-f.hl { background: var(--pc-hl); }
.pc-in {
  border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px; font-size: 12.5px;
  background: var(--bg-secondary); color: var(--text-primary); width: 100%; text-align: right;
}
.pc-in.num { max-width: 140px; }
.pc-in.text { text-align: left; }
.pc-in:focus { border-color: var(--accent); outline: none; }

/* ── bullets grid ───────────────────────────────────────── */
.pc-bullets-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 14px; margin-top: 14px; }
@media (max-width: 1250px) { .pc-bullets-grid { grid-template-columns: 1fr; } }
.pc-bul-col { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--bg-secondary); min-width: 0; }
.pc-bul-col.target { border-color: var(--accent); }
.pc-bul-head { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 7px; }
.pc-bul-col ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.pc-bul-col li { font-size: 12px; color: var(--text-secondary); line-height: 1.35; }
.pc-bul-col li.added { color: var(--pc-cert); font-weight: 600; }
.pc-bul-removed { margin-top: 8px; }
.pc-bul-removed-head { font-size: 11px; font-weight: 700; color: var(--error); margin-bottom: 4px; }
.pc-bul-strike { font-size: 11.5px; color: var(--text-muted); text-decoration: line-through; line-height: 1.35; padding: 1px 0; }
.pc-bul-strike.clickable { cursor: pointer; }
.pc-bul-strike.clickable:hover { color: var(--text-secondary); }

.pc-bul-edit { display: flex; gap: 6px; align-items: center; margin-bottom: 5px; }
.pc-bul-edit input {
  flex: 1; border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px;
  font-size: 12px; background: var(--bg-card); color: var(--text-primary);
}
.pc-bul-edit.added input { border-color: var(--pc-cert); }
.pc-bul-edit input:focus { border-color: var(--accent); outline: none; }
.pc-bul-x {
  border: none; background: transparent; color: var(--text-muted); font-size: 15px;
  cursor: pointer; padding: 0 5px; border-radius: 6px; line-height: 1;
}
.pc-bul-x:hover { color: var(--error); }
.pc-bul-add input {
  width: 100%; border: 1px dashed var(--border); border-radius: 7px; padding: 6px 9px;
  font-size: 12px; background: transparent; color: var(--text-primary);
}
.pc-bul-add input:focus { border-color: var(--accent); outline: none; }

.pc-line-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pc-foot-meta { font-size: 11px; color: var(--text-muted); }
.pc-foot-spacer { flex: 1; }

/* ── retired ────────────────────────────────────────────── */
.pc-retired { margin-top: 16px; }
.pc-retired-head {
  display: flex; align-items: center; gap: 8px; background: transparent; border: none;
  color: var(--text-muted); font-size: 12.5px; cursor: pointer; padding: 6px 4px;
}
.pc-retired-line {
  display: flex; justify-content: space-between; gap: 10px; padding: 6px 12px;
  font-size: 12.5px; color: var(--text-muted); border-bottom: 1px dashed var(--border);
}

/* ── modals ─────────────────────────────────────────────── */
.pc-modal-backdrop {
  position: fixed; inset: 0; background: rgba(8, 12, 20, .55); z-index: 300;
  display: grid; place-items: center; padding: 24px;
}
.pc-modal {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 22px; width: min(440px, 100%); display: flex; flex-direction: column; gap: 8px;
  max-height: 86vh; overflow-y: auto;
}
.pc-modal.wide { width: min(680px, 100%); }
.pc-modal-title { font-size: 15px; font-weight: 750; margin-bottom: 6px; }
.pc-modal-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); margin-top: 6px; }
.pc-modal input[type="text"], .pc-modal select {
  border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; font-size: 13px;
  background: var(--bg-secondary); color: var(--text-primary); width: 100%;
}
.pc-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

.pc-exp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
@media (max-width: 640px) { .pc-exp-kpis { grid-template-columns: repeat(2, 1fr); } }
.pc-exp-kpi { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--bg-secondary); }
.pc-exp-kpi .v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pc-exp-kpi .l { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.pc-exp-kpi.warn .v { color: var(--warning, #d97706); }
.pc-exp-note { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 10px; }
.pc-exp-note code { font-size: 11px; }
.pc-exp-blocked { margin-bottom: 8px; max-height: 260px; overflow-y: auto; }
.pc-exp-blocked-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: transparent; border: none; border-bottom: 1px dashed var(--border);
  color: var(--text-secondary); font-size: 12px; padding: 5px 2px; cursor: pointer;
}
.pc-exp-blocked-row:hover { color: var(--text-primary); }


/* === css/event_rate_card.css === */
/* ═══════════════════════════════════════════════════════════
   Rate Card — /dept/events?tab=rate_card
   The published sponsorship price list. All rules scoped under
   .rc-root; colors consume the global theme tokens
   (static/css/themes.css).
   ═══════════════════════════════════════════════════════════ */
[x-cloak] { display: none !important; }

.rc-root {
  padding: 20px 32px 64px;
  color: var(--text-primary);
  --rc-member: var(--accent);
  --rc-non-member: var(--text-secondary);
  --rc-changed: var(--warning, #f59e0b);
}

.rc-loading, .rc-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 64px 24px; color: var(--text-secondary); text-align: center;
}
.rc-empty h3 { margin: 0; font-size: 16px; color: var(--text-primary); }
.rc-empty p { margin: 0; font-size: 13px; max-width: 46ch; }
.rc-hint code {
  display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 6px;
  background: var(--bg-secondary); font-size: 11.5px;
}

/* ── header ─────────────────────────────────────────────── */
.rc-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 16px 20px; margin-bottom: 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card);
}
.rc-title { display: flex; align-items: center; gap: 16px; }
.rc-year {
  font-size: 26px; font-weight: 800; letter-spacing: -0.5px;
  color: var(--accent);
}
.rc-year select {
  font: inherit; color: inherit; background: transparent;
  border: 1px solid var(--border); border-radius: 8px; padding: 2px 6px;
}
.rc-title-text h2 { margin: 0; font-size: 17px; font-weight: 700; }
.rc-title-text p { margin: 3px 0 0; font-size: 12px; color: var(--text-secondary); }

.rc-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.rc-seg {
  display: inline-flex; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-secondary); padding: 3px;
}
.rc-seg button {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; color: var(--text-secondary);
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 650;
  cursor: pointer; transition: background .12s, color .12s;
}
.rc-seg button:hover { color: var(--text-primary); }
.rc-seg button.active { background: var(--accent); color: #fff; }
.rc-badge {
  min-width: 18px; padding: 1px 6px; border-radius: 999px;
  background: color-mix(in srgb, currentColor 24%, transparent);
  font-size: 10.5px; font-weight: 750;
}

.rc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--bg-secondary);
  color: var(--text-primary); border-radius: 9px; padding: 7px 12px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: border-color .12s, background .12s, opacity .12s;
}
.rc-btn:hover { border-color: var(--accent); }
.rc-btn svg { width: 15px; height: 15px; }
.rc-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.rc-btn.danger { color: var(--danger, #ef4444); }
.rc-btn:disabled, .rc-btn.disabled {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}
.rc-issues.alert {
  border-color: var(--danger, #ef4444);
  color: var(--danger, #ef4444);
  background: var(--danger-bg-subtle, rgba(239,68,68,.08));
}
.rc-issues-word { color: var(--text-secondary); font-weight: 500; }

/* ── proposed-mode workflow bar ──────────────────────────── */
.rc-workflow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 12px 18px; margin-bottom: 12px;
  border: 1px solid var(--warning, #f59e0b); border-radius: var(--radius);
  background: var(--warning-bg-subtle, rgba(245,158,11,.08));
}
.rc-workflow-text { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rc-workflow-text strong { font-size: 13px; }
.rc-workflow-text span { font-size: 12px; color: var(--text-secondary); }
.rc-orphans {
  padding: 2px 8px; border-radius: 6px;
  background: var(--danger-bg-subtle, rgba(239,68,68,.08));
  color: var(--danger, #ef4444) !important; cursor: help;
}
.rc-workflow-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── quote finder ───────────────────────────────────────── */
.rc-finder {
  display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-card), var(--bg-secondary));
}
.rc-finder-label {
  font-size: 11px; font-weight: 750; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted); padding-bottom: 8px;
}
.rc-finder-fields { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; flex: 1; }
.rc-finder-fields label { display: flex; flex-direction: column; gap: 4px; }
.rc-finder-fields label > span {
  font-size: 10.5px; font-weight: 650; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.rc-finder-fields select, .rc-finder-fields input[type="number"] {
  border: 1px solid var(--border); background: var(--bg-primary);
  color: var(--text-primary); border-radius: 8px; padding: 6px 9px;
  font-size: 12.5px; max-width: 220px;
}
.rc-finder-num input { width: 82px; }
.rc-finder-check {
  flex-direction: row !important; align-items: center; gap: 6px !important;
  padding-bottom: 7px;
}
.rc-finder-check span { text-transform: none !important; font-size: 12.5px !important; color: var(--text-secondary) !important; }

.rc-finder-out {
  min-width: 220px; padding: 8px 16px;
  border-left: 3px solid var(--accent);
}
.rc-finder-out.empty { border-left-color: var(--border); }
.rc-finder-price {
  font-size: 26px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.1;
}
.rc-finder-meta { font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; }
.rc-finder-hint { font-size: 12.5px; color: var(--text-muted); }

/* ── body layout ────────────────────────────────────────── */
.rc-body { display: grid; grid-template-columns: 232px 1fr; gap: 20px; align-items: start; }

.rc-rail {
  position: sticky; top: 12px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card);
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.rc-search { position: relative; display: flex; align-items: center; margin-bottom: 8px; }
.rc-search svg {
  position: absolute; left: 9px; width: 14px; height: 14px; color: var(--text-muted);
  pointer-events: none;
}
.rc-search input {
  width: 100%; border: 1px solid var(--border); background: var(--bg-primary);
  color: var(--text-primary); border-radius: 8px;
  padding: 7px 26px 7px 28px; font-size: 12px;
}
.rc-search input:focus { outline: none; border-color: var(--accent); }
.rc-search button {
  position: absolute; right: 6px; border: 0; background: transparent;
  color: var(--text-muted); font-size: 16px; cursor: pointer; line-height: 1;
}
.rc-search-count { font-size: 11px; color: var(--text-secondary); padding: 0 4px 6px; }

.rc-rail-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 0; background: transparent; color: var(--text-secondary);
  border-radius: 8px; padding: 7px 10px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; text-align: left; transition: background .12s, color .12s;
}
.rc-rail-item:hover { background: var(--bg-secondary); color: var(--text-primary); }
.rc-rail-item.active { background: var(--accent-bg, rgba(59,130,246,.15)); color: var(--accent-light, var(--accent)); }
.rc-rail-item.dim { opacity: .35; }
.rc-rail-count { font-size: 10.5px; font-weight: 700; color: var(--text-muted); }

.rc-rail-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.rc-price-seg { width: 100%; margin-bottom: 8px; }
.rc-price-seg button { flex: 1; justify-content: center; padding: 5px 6px; font-size: 11px; }
.rc-source { font-size: 10.5px; color: var(--text-muted); line-height: 1.5; }
.rc-source code { font-size: 10px; word-break: break-word; }

/* ── program + scope cards ──────────────────────────────── */
.rc-main { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.rc-program-head { margin-bottom: 12px; }
.rc-program-head h3 { margin: 0; font-size: 16px; font-weight: 750; }
.rc-program-head p { margin: 3px 0 0; font-size: 12px; color: var(--text-secondary); }
.rc-banner {
  margin-top: 6px; font-size: 11.5px; font-weight: 650; color: var(--accent);
}

.rc-scope {
  padding: 16px 18px; margin-bottom: 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card);
}
.rc-scope-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.rc-scope-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rc-scope-title h4 { margin: 0; font-size: 14.5px; font-weight: 700; }
.rc-tier {
  padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 750;
  background: var(--accent-bg, rgba(59,130,246,.15)); color: var(--accent-light, var(--accent));
  text-transform: uppercase; letter-spacing: .05em;
}
.rc-flag {
  padding: 2px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700;
  background: var(--warning-bg-subtle, rgba(245,158,11,.08)); color: var(--warning, #f59e0b);
}
.rc-members-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--border); background: var(--bg-secondary);
  color: var(--text-secondary); border-radius: 999px; padding: 4px 11px;
  font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.rc-members-toggle:hover { color: var(--text-primary); border-color: var(--accent); }
.rc-members { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.rc-chip {
  padding: 3px 9px; border-radius: 6px; font-size: 11.5px;
  background: var(--bg-secondary); color: var(--text-secondary);
  border: 1px solid var(--border);
}

/* ── block labels ───────────────────────────────────────── */
.rc-block-label {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 11px; font-weight: 750; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted); margin: 14px 0 6px;
}
.rc-block-sub {
  text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11px;
  color: var(--text-muted); opacity: .85;
}
.rc-repeat {
  padding: 1px 6px; border-radius: 5px; font-size: 10px; font-weight: 700;
  background: var(--bg-secondary); color: var(--text-muted); cursor: help;
  text-transform: none; letter-spacing: 0;
}

/* ── the pivot table ────────────────────────────────────── */
.rc-matrix-wrap, .rc-flat-wrap { overflow-x: auto; }
.rc-matrix, .rc-flat {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 12.5px;
}
.rc-matrix th, .rc-matrix td, .rc-flat th, .rc-flat td {
  padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left;
  vertical-align: middle;
}
.rc-matrix thead th, .rc-flat thead th {
  font-size: 11px; font-weight: 700; color: var(--text-secondary);
  background: var(--bg-secondary); white-space: nowrap;
  border-bottom: 1px solid var(--border-light, var(--border));
}
.rc-matrix thead th:first-child { border-top-left-radius: 8px; }
.rc-matrix thead th:last-child { border-top-right-radius: 8px; }
.rc-matrix tbody tr:last-child th, .rc-matrix tbody tr:last-child td,
.rc-flat tbody tr:last-child th, .rc-flat tbody tr:last-child td { border-bottom: 0; }
.rc-matrix tbody tr:hover td, .rc-flat tbody tr:hover td { background: var(--bg-card-hover, var(--bg-secondary)); }

.rc-band-col {
  font-weight: 650; color: var(--text-primary); white-space: nowrap;
  background: var(--bg-secondary);
}
.rc-matrix td { text-align: right; }
.rc-void { color: var(--text-muted); }
.rc-void::after { content: '—'; color: var(--text-muted); opacity: .5; }

.rc-cell { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.rc-val { display: inline-flex; align-items: center; gap: 4px; }
.rc-val-btn {
  border: 0; background: transparent; padding: 2px 3px; border-radius: 6px;
  font: inherit; color: inherit; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.25;
}
.rc-val-btn.ro { cursor: default; }
.rc-val-btn:not(.ro):hover {
  background: var(--accent-bg-subtle, rgba(59,130,246,.08));
  box-shadow: inset 0 0 0 1px var(--accent);
}
.rc-val.role-member .rc-val-btn { font-weight: 700; color: var(--text-primary); }
.rc-val.role-non_member .rc-val-btn { font-weight: 500; color: var(--rc-non-member); font-size: 11.5px; }
.rc-val.role-single .rc-val-btn { font-weight: 700; }
.rc-val.role-allowance .rc-val-btn { font-weight: 650; }
.rc-val-btn.changed {
  color: var(--rc-changed) !important; font-weight: 750;
  background: var(--warning-bg-subtle, rgba(245,158,11,.08));
}
.rc-was {
  font-size: 9.5px; font-weight: 500; color: var(--text-muted);
  text-decoration: line-through;
}
.rc-revert {
  border: 0; background: transparent; color: var(--text-muted);
  cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px;
}
.rc-revert:hover { color: var(--accent); }
.rc-edit {
  width: 88px; border: 1px solid var(--accent); background: var(--bg-primary);
  color: var(--text-primary); border-radius: 6px; padding: 3px 6px;
  font-size: 12.5px; text-align: right;
}
.rc-edit:focus { outline: none; }

/* ── flat price lists ───────────────────────────────────── */
.rc-flat th:first-child { font-weight: 600; color: var(--text-primary); }
.rc-flat .rc-num { text-align: right; white-space: nowrap; }
.rc-row-note {
  display: block; font-size: 10.5px; font-weight: 400; color: var(--text-muted);
}

/* ── notes / scratch ────────────────────────────────────── */
.rc-notes { margin-top: 14px; display: flex; flex-direction: column; gap: 5px; }
.rc-note {
  font-size: 11.5px; color: var(--text-secondary); line-height: 1.5;
  padding-left: 12px; border-left: 2px solid var(--border);
}
.rc-note.context { color: var(--text-muted); font-style: italic; }
.rc-note.blank { border-left-color: var(--warning, #f59e0b); color: var(--text-muted); }
.rc-scratch {
  margin-top: 10px; font-size: 10.5px; color: var(--text-muted);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.rc-scratch code {
  padding: 1px 6px; border-radius: 5px; background: var(--bg-secondary);
}

/* ── overlays: drawer + modal ───────────────────────────── */
.rc-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0, 0, 0, .55);
  display: flex; align-items: stretch; justify-content: flex-end;
}
.rc-drawer {
  width: min(560px, 100vw); background: var(--bg-card);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; overflow-y: auto;
  padding: 18px 22px 32px;
}
.rc-drawer.wide { width: min(940px, 100vw); }
.rc-drawer header, .rc-modal header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.rc-drawer h3, .rc-modal h3 { margin: 0; font-size: 15px; font-weight: 700; }
.rc-drawer header button, .rc-modal header button {
  border: 0; background: transparent; color: var(--text-muted);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.rc-drawer-intro, .rc-modal-intro {
  font-size: 12px; color: var(--text-secondary); line-height: 1.55;
  margin: 0 0 14px; max-width: 62ch;
}
.rc-drawer-loading { font-size: 12.5px; color: var(--text-secondary); padding: 20px 0; }

.rc-findings { display: flex; flex-direction: column; gap: 8px; }
.rc-finding {
  display: grid; grid-template-columns: 88px 1fr; gap: 4px 12px;
  border: 1px solid var(--border); border-left-width: 3px;
  background: var(--bg-secondary); border-radius: 8px;
  padding: 10px 12px; text-align: left; cursor: pointer;
  transition: border-color .12s;
}
.rc-finding:hover { border-color: var(--accent); }
.rc-finding.error { border-left-color: var(--danger, #ef4444); }
.rc-finding.warn { border-left-color: var(--warning, #f59e0b); }
.rc-finding.info { border-left-color: var(--text-muted); }
.rc-sev {
  grid-row: 1 / span 2; align-self: start;
  font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted);
}
.rc-finding.error .rc-sev { color: var(--danger, #ef4444); }
.rc-finding.warn .rc-sev { color: var(--warning, #f59e0b); }
.rc-finding-where { font-size: 12.5px; color: var(--text-primary); }
.rc-finding-what { font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; }
.rc-findings-clean {
  font-size: 12.5px; color: var(--success); padding: 16px 0; line-height: 1.6;
}

.rc-modal {
  align-self: center; margin: auto;
  width: min(660px, 94vw); max-height: 92vh; overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 22px 16px;
}
.rc-form { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.rc-form label { display: flex; flex-direction: column; gap: 4px; }
.rc-form label > span {
  font-size: 10.5px; font-weight: 650; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.rc-form select, .rc-form input {
  border: 1px solid var(--border); background: var(--bg-primary);
  color: var(--text-primary); border-radius: 8px; padding: 6px 9px; font-size: 12.5px;
  min-width: 130px;
}
.rc-form-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--border);
}
.rc-form-label {
  font-size: 10.5px; font-weight: 650; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em; min-width: 84px;
}
.rc-checks { display: flex; gap: 12px; flex-wrap: wrap; }
.rc-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); }
.rc-form-hint { font-size: 11px; color: var(--text-muted); }
.rc-bulk-result {
  margin: 12px 0; padding: 10px 12px; border-radius: 8px;
  background: var(--accent-bg-subtle, rgba(59,130,246,.08));
  font-size: 12px; color: var(--text-secondary); line-height: 1.55;
}
.rc-modal footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 12px; border-top: 1px solid var(--border);
}

/* ── diff table ─────────────────────────────────────────── */
.rc-diff { width: 100%; border-collapse: collapse; font-size: 12px; }
.rc-diff th, .rc-diff td {
  padding: 7px 9px; border-bottom: 1px solid var(--border); text-align: left;
  vertical-align: top;
}
.rc-diff thead th {
  font-size: 10.5px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .04em;
}
.rc-diff .rc-num { text-align: right; white-space: nowrap; }
.rc-diff .strong { font-weight: 750; }
.rc-diff .up { color: var(--success); }
.rc-diff .down { color: var(--danger, #ef4444); }
.rc-diff-sub { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.rc-diff-pct { display: block; font-size: 10px; color: var(--text-muted); }
.rc-diff-orphans {
  margin-top: 14px; padding: 10px 12px; border-radius: 8px;
  background: var(--danger-bg-subtle, rgba(239,68,68,.08));
  font-size: 11.5px; color: var(--text-secondary); line-height: 1.55;
}

/* ── toast ──────────────────────────────────────────────── */
.rc-toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 950; padding: 10px 18px; border-radius: 10px;
  background: var(--bg-card); border: 1px solid var(--accent);
  color: var(--text-primary); font-size: 12.5px; font-weight: 600;
  box-shadow: var(--shadow, 0 4px 20px rgba(0,0,0,.3));
}
.rc-toast.error { border-color: var(--danger, #ef4444); color: var(--danger, #ef4444); }

/* ── responsive ─────────────────────────────────────────── */
@media (max-width: 1080px) {
  .rc-body { grid-template-columns: 1fr; }
  .rc-rail { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .rc-search { width: 100%; }
  .rc-rail-foot { width: 100%; margin-top: 6px; }
  .rc-price-seg { width: auto; }
}
@media (max-width: 640px) {
  .rc-root { padding: 14px 14px 48px; }
  .rc-finder { flex-direction: column; align-items: stretch; }
  .rc-finder-out { border-left: 0; border-top: 3px solid var(--accent); padding: 10px 0 0; }
}


/* === css/event_segments.css === */
/* Segment Pacing — /dept/events?tab=segments
 *
 * Scoped entirely under .seg-root. Colour is carried by a single --seg-tone
 * custom property per element rather than by per-class colour rules, so the
 * good/warn/bad semantics hold in both themes without a second palette.
 */

.seg-root {
  --seg-good: #16a34a;
  --seg-warn: #d97706;
  --seg-bad: #dc2626;
  --seg-line: var(--border-color, #e2e8f0);
  --seg-muted: var(--text-muted, #64748b);
  padding: 4px 0 32px;
}

.seg-root .tone-good { color: var(--seg-good); font-weight: 600; }
.seg-root .tone-warn { color: var(--seg-warn); font-weight: 600; }
.seg-root .tone-bad  { color: var(--seg-bad);  font-weight: 600; }
.seg-root .seg-muted { color: var(--seg-muted); font-size: 12px; }

/* ── loading / empty ───────────────────────────────────────── */
.seg-loading,
.seg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 64px 16px;
  color: var(--seg-muted);
}
.seg-empty h3 { margin: 0; color: var(--text-color, #0f172a); }

/* ── controls ──────────────────────────────────────────────── */
.seg-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--seg-line);
}
.seg-window,
.seg-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.seg-window { flex-direction: row; align-items: center; gap: 8px; }
.seg-window label,
.seg-filter label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--seg-muted);
}
.seg-controls select {
  padding: 6px 10px;
  border: 1px solid var(--seg-line);
  border-radius: 6px;
  background: var(--bg-card, #fff);
  color: inherit;
  font-size: 13px;
  min-width: 150px;
}
.seg-window-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--seg-muted);
}
.seg-export {
  margin-left: auto;
  padding: 7px 14px;
  border: 1px solid var(--seg-line);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}
.seg-export:hover { background: var(--hover-bg, #f1f5f9); }

/* ── notes ─────────────────────────────────────────────────── */
.seg-note {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.55;
  border-left: 3px solid var(--seg-muted);
  background: color-mix(in srgb, var(--seg-muted) 8%, transparent);
}
.seg-note-warn {
  border-left-color: var(--seg-warn);
  background: color-mix(in srgb, var(--seg-warn) 9%, transparent);
}

/* ── KPI strip ─────────────────────────────────────────────── */
.seg-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 20px 0;
}
.seg-kpi {
  padding: 14px 16px;
  border: 1px solid var(--seg-line);
  border-radius: 10px;
  background: var(--bg-card, #fff);
}
.seg-kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--seg-muted);
}
.seg-kpi-value {
  margin: 6px 0 2px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}
.seg-kpi-sub { font-size: 12px; color: var(--seg-muted); }

/* ── lens switch ───────────────────────────────────────────── */
.seg-lenses {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--seg-line);
}
.seg-lens {
  padding: 9px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--seg-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.seg-lens:hover { color: var(--text-color, #0f172a); }
.seg-lens.active {
  color: var(--accent-color, #2563eb);
  border-bottom-color: var(--accent-color, #2563eb);
}

/* ── table ─────────────────────────────────────────────────── */
/* Bounded with a sticky header: the segment list runs past a screen at a
   4-year lookback, and a header that scrolls away turns a column of numbers
   into an unreadable one.

   border-collapse MUST be separate — with collapse, Chromium fails to paint
   sticky th backgrounds over scrolled rows, so the pacing header (Events /
   Target / Booked / …) floats as bare text over an expanded row's nested
   By-year / Sponsorship-level tables. Same fix as .eo-inv-grid. */
.seg-table-wrap {
  max-height: 62vh;
  overflow: auto;
  border: 1px solid var(--seg-line);
  border-radius: 10px;
  background: var(--bg-card, #fff);
}
.seg-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.seg-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 10px 12px;
  text-align: right;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--seg-muted);
  background: var(--bg-card, #fff);
  background-clip: padding-box;
  box-shadow: inset 0 -1px 0 var(--seg-line);
  cursor: pointer;
  user-select: none;
}
.seg-table thead th.seg-col-name { text-align: left; }
.seg-table td {
  padding: 10px 12px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--seg-line);
}
.seg-table td.seg-col-name { text-align: left; white-space: normal; }

.seg-row { cursor: pointer; }
.seg-row:hover { background: var(--hover-bg, #f8fafc); }

.seg-caret {
  display: inline-block;
  width: 14px;
  color: var(--seg-muted);
  transition: transform .15s ease;
}
.seg-caret.open { transform: rotate(90deg); }
.seg-name { font-weight: 600; }
.seg-prog {
  display: block;
  margin-left: 14px;
  font-size: 11px;
  color: var(--seg-muted);
}
.seg-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--seg-warn);
  background: color-mix(in srgb, var(--seg-warn) 14%, transparent);
}

/* ── expansion ─────────────────────────────────────────────── */
.seg-detail > td {
  padding: 0 12px 18px;
  background: var(--hover-bg, #f8fafc);
}
.seg-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 20px;
  padding-top: 14px;
}
.seg-detail-block h4 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--seg-muted);
}
.seg-subtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.seg-subtable th {
  padding: 6px 8px;
  text-align: right;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--seg-muted);
  border-bottom: 1px solid var(--seg-line);
}
.seg-subtable td {
  padding: 6px 8px;
  text-align: right;
  border-bottom: 1px solid color-mix(in srgb, var(--seg-line) 55%, transparent);
}
.seg-subtable th:first-child,
.seg-subtable td:first-child { text-align: left; }

/* ── fill velocity ─────────────────────────────────────────── */
/* The sparkline is the row's whole argument — a segment that fills late has a
   visibly different shape from one that fills early, before any number is
   read. A borrowed (portfolio) curve is dashed so it never passes for the
   segment's own measured shape. */
.seg-curve-cell { width: 110px; padding: 6px 10px !important; }
.seg-curve {
  display: block;
  width: 100px;
  height: 28px;
  overflow: visible;
}
.seg-curve polyline {
  fill: none;
  stroke: var(--accent-color, #2563eb);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}
.seg-curve.borrowed polyline {
  stroke: var(--seg-muted);
  stroke-dasharray: 3 2;
}
.seg-curve-now {
  stroke: var(--seg-warn);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke;
}

.seg-landing {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--seg-line);
  border-radius: 10px;
  background: var(--bg-card, #fff);
}
.seg-landing-head {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
}
.seg-landing-head h4 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--seg-muted);
}
.seg-landing-head p { margin: 0; max-width: 62ch; line-height: 1.6; }
.seg-landing-stats { display: flex; gap: 22px; }
.seg-landing-stats > div { text-align: right; }
.seg-landing-stat {
  display: block;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.seg-landing-cap {
  display: block;
  font-size: 11px;
  color: var(--seg-muted);
}

.seg-landing-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 18px 0 12px;
  padding-top: 8px;
  overflow-x: auto;
}
.seg-landing-col { flex: 1 1 0; min-width: 64px; text-align: center; }
.seg-landing-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 120px;
}
.seg-landing-bar {
  width: 16px;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  transition: height .18s ease;
}
.seg-landing-bar.plan { background: var(--accent-color, #2563eb); }
.seg-landing-bar.pace {
  background: color-mix(in srgb, var(--seg-good) 45%, transparent);
  border: 1px solid var(--seg-good);
}
.seg-landing-amt {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.seg-landing-month { font-size: 11px; color: var(--seg-muted); }
.seg-landing-events { font-size: 10px; color: var(--seg-muted); }

.seg-detail-wide { grid-column: 1 / -1; }
.seg-detail-wide h4 { margin-top: 16px; }
.seg-detail-wide h4:first-child { margin-top: 0; }

/* ── coverage ──────────────────────────────────────────────── */
.seg-coverage {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--seg-line);
  border-radius: 10px;
  background: var(--bg-card, #fff);
}
.seg-coverage h4 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--seg-muted);
}
.seg-coverage p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.6;
}
.seg-coverage p:last-child { margin-bottom: 0; }
.seg-coverage code {
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
  background: var(--hover-bg, #f1f5f9);
}
.seg-hint { color: var(--seg-muted); font-size: 12px; }

@media (max-width: 720px) {
  .seg-controls { gap: 10px; }
  .seg-export { margin-left: 0; }
  .seg-detail-grid { grid-template-columns: 1fr; }
}


/* === css/event_quota_model.css === */
/* Quota Model tab — /dept/events?tab=quota_model. Everything scoped under
 * .qm-root; theme tokens only (light + dark safe). */

.qm-root { padding: 20px 28px 60px; }

.qm-loading {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 60px 0; color: var(--text-muted);
}

.qm-empty {
  padding: 48px; text-align: center; color: var(--text-muted);
}
.qm-empty h3 { color: var(--text-primary); margin-bottom: 8px; }

/* ── KPI strip ─────────────────────────────────────────── */
.qm-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.qm-kpi {
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: 10px; padding: 12px 14px;
}
.qm-kpi-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); margin-bottom: 4px;
}
.qm-kpi-value { font-size: 22px; font-weight: 700; color: var(--text-primary); }
.qm-kpi-value.pos { color: var(--success, #16a34a); }
.qm-kpi-value.neg { color: var(--error, #dc2626); }
.qm-kpi-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ── Controls ──────────────────────────────────────────── */
.qm-controls {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 10px;
}
.qm-controls select, .qm-search {
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  color: var(--text-primary); border-radius: 8px; padding: 7px 10px;
  font-size: 13px;
}
.qm-search { flex: 1 1 220px; min-width: 180px; }
.qm-export {
  margin-left: auto; font-size: 13px; text-decoration: none;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  color: var(--text-primary); border-radius: 8px; padding: 7px 12px;
}
.qm-export:hover { border-color: var(--accent, #6366f1); }

.qm-note {
  font-size: 12px; color: var(--text-muted); margin-bottom: 12px;
  padding: 8px 12px; background: var(--bg-secondary);
  border: 1px solid var(--border-color); border-radius: 8px;
}

/* ── Roster table ──────────────────────────────────────── */
.qm-table-wrap {
  max-height: 62vh; overflow: auto;
  border: 1px solid var(--border-color); border-radius: 10px;
}
.qm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.qm-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-secondary); color: var(--text-muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 9px 10px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--border-color);
}
.qm-table thead th.qm-left, .qm-table td.qm-left { text-align: left; }
.qm-table tbody td {
  padding: 8px 10px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--border-color); color: var(--text-primary);
}
.qm-table tbody tr { cursor: pointer; }
.qm-table tbody tr:hover { background: color-mix(in srgb, var(--accent, #6366f1) 6%, transparent); }
.qm-table tbody tr.qm-open { background: color-mix(in srgb, var(--accent, #6366f1) 10%, transparent); }
.qm-name { font-weight: 600; }
.qm-meta { font-size: 11px; color: var(--text-muted); }
.qm-rec { font-weight: 700; }
.qm-guard { margin-left: 4px; cursor: help; }
.qm-approved { font-weight: 700; color: var(--success, #16a34a); }
td.pos, .qm-table td.pos { color: var(--success, #16a34a); }
td.neg, .qm-table td.neg { color: var(--error, #dc2626); }

.qm-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--border-color); color: var(--text-primary);
}
.qm-band-high { --qm-tone: #16a34a; }
.qm-band-medium { --qm-tone: #d97706; }
.qm-band-low { --qm-tone: #dc2626; }
.qm-mat-mature { --qm-tone: #16a34a; }
.qm-mat-growth { --qm-tone: #2563eb; }
.qm-mat-new { --qm-tone: #d97706; }
.qm-pill[class*="qm-band-"], .qm-pill[class*="qm-mat-"] {
  color: var(--qm-tone);
  border-color: color-mix(in srgb, var(--qm-tone) 45%, transparent);
  background: color-mix(in srgb, var(--qm-tone) 10%, transparent);
}

/* ── Detail drawer ─────────────────────────────────────── */
.qm-drawer {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0, 0, 0, 0.45);
  display: flex; justify-content: flex-end;
}
.qm-drawer-panel {
  width: min(860px, 94vw); height: 100%; overflow-y: auto;
  background: var(--bg-primary); border-left: 1px solid var(--border-color);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35);
}
.qm-drawer-head {
  position: sticky; top: 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; padding: 18px 22px 12px;
  background: var(--bg-primary); border-bottom: 1px solid var(--border-color);
}
.qm-drawer-head h3 { margin: 0 0 2px; font-size: 17px; color: var(--text-primary); }
.qm-close {
  background: none; border: none; font-size: 24px; line-height: 1;
  color: var(--text-muted); cursor: pointer; padding: 2px 8px;
}
.qm-close:hover { color: var(--text-primary); }
.qm-drawer-body { padding: 16px 22px 48px; display: flex; flex-direction: column; gap: 20px; }

.qm-block h4 {
  margin: 0 0 10px; font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted);
  display: flex; align-items: center; gap: 10px;
}
.qm-tier-year {
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  color: var(--text-primary); border-radius: 6px; padding: 3px 8px; font-size: 12px;
}

.qm-drivers { display: flex; flex-direction: column; gap: 8px; }
.qm-driver {
  display: flex; gap: 14px; align-items: baseline;
  padding: 8px 12px; border: 1px solid var(--border-color);
  border-radius: 8px; background: var(--bg-secondary);
}
.qm-driver-amt {
  min-width: 90px; text-align: right; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.qm-driver-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.qm-driver-total {
  border-color: color-mix(in srgb, var(--accent, #6366f1) 50%, transparent);
  background: color-mix(in srgb, var(--accent, #6366f1) 8%, transparent);
}
.qm-guardrails { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.qm-override { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qm-override input[type="number"] { width: 170px; }
.qm-override input[type="text"] { flex: 1 1 220px; min-width: 180px; }
.qm-override input {
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  color: var(--text-primary); border-radius: 8px; padding: 7px 10px; font-size: 13px;
}
.qm-btn {
  background: var(--accent, #6366f1); color: #fff; border: none;
  border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.qm-btn:disabled { opacity: 0.6; cursor: default; }
.qm-btn-ghost {
  background: transparent; color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.qm-subtable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.qm-subtable th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); text-align: right; padding: 6px 8px;
  border-bottom: 1px solid var(--border-color); white-space: nowrap;
}
.qm-subtable th.qm-left, .qm-subtable td.qm-left { text-align: left; }
.qm-subtable td {
  padding: 6px 8px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--border-color); color: var(--text-primary);
}
.qm-subtable tr.qm-dim td { opacity: 0.6; }

@media (max-width: 760px) {
  .qm-root { padding: 12px; }
  .qm-drawer-panel { width: 100vw; }
}


/* === css/dept_asana.css === */
/* Asana tab — /dept/events?tab=asana */
/* Nested inside #panel-logistics (which owns the 24/32 page padding) since
   the Jul-2026 move into the Logistics sub-tab strip — no extra padding. */
#panel-asana .asana-root {
  padding: 0;
  min-height: 420px;
}

#panel-asana .asana-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

#panel-asana .asana-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#panel-asana .asana-project-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}

#panel-asana .asana-project-meta {
  font-size: 13px;
  color: var(--text-muted, #64748b);
  margin-top: 4px;
}

#panel-asana .asana-btn {
  border: 1px solid var(--border, #d1d5db);
  background: var(--bg-card);
  color: var(--text-primary, #0f172a);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

#panel-asana .asana-btn:hover:not(:disabled) {
  border-color: var(--accent, #2563eb);
  color: var(--accent, #2563eb);
}

#panel-asana .asana-btn.primary {
  background: var(--accent, #2563eb);
  border-color: var(--accent, #2563eb);
  color: #fff;
}

#panel-asana .asana-btn.primary:hover:not(:disabled) {
  filter: brightness(1.05);
  color: #fff;
}

#panel-asana .asana-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#panel-asana .asana-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 8px;
  overflow: hidden;
}

#panel-asana .asana-view-btn {
  border: none;
  background: var(--bg-card);
  color: var(--text-muted, #64748b);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

#panel-asana .asana-view-btn.active {
  background: var(--accent, #2563eb);
  color: #fff;
}

#panel-asana .asana-ext-link {
  font-size: 13px;
  color: var(--accent, #2563eb);
  text-decoration: none;
  white-space: nowrap;
}

#panel-asana .asana-ext-link:hover { text-decoration: underline; }

#panel-asana .asana-status,
#panel-asana .asana-error {
  margin-bottom: 12px;
  font-size: 13px;
}

#panel-asana .asana-error {
  color: var(--error, #dc2626);
  cursor: pointer;
}

#panel-asana .asana-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted, #64748b);
  border: 1px dashed var(--border, #d1d5db);
  border-radius: 12px;
}

#panel-asana .asana-setup-note {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.5;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

#panel-asana .asana-uri {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 8px;
  font-size: 12px;
  word-break: break-all;
  color: var(--text-primary, #0f172a);
}

#panel-asana .asana-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px;
  color: var(--text-muted, #64748b);
}

/* ── Table view ─────────────────────────────────────────────── */
#panel-asana .asana-tbl-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

#panel-asana .asana-input {
  border: 1px solid var(--border, #d1d5db);
  background: var(--bg-card);
  color: var(--text-primary, #0f172a);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  min-width: 200px;
}

#panel-asana .asana-tbl-count {
  font-size: 13px;
  color: var(--text-muted, #64748b);
  margin-left: auto;
}

#panel-asana .asana-tbl-wrap {
  overflow-x: auto;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}

#panel-asana .asana-tbl {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 13px;
}

#panel-asana .asana-tbl thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-secondary);
  color: var(--text-primary, #0f172a);
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--border, #e2e8f0);
  white-space: nowrap;
  vertical-align: bottom;
}

#panel-asana .asana-tbl tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #eef2f7);
  vertical-align: top;
  color: var(--text-primary, #1e293b);
}

#panel-asana .asana-tbl tbody tr:hover td {
  background: var(--bg-card-hover, var(--bg-hover, rgba(127,127,127,0.06)));
}

#panel-asana .asana-tbl tr.done td {
  color: var(--text-muted, #94a3b8);
}

/* Sticky first column (submission name) */
#panel-asana .asana-tbl-sticky {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-card);
  min-width: 220px;
  max-width: 260px;
  border-right: 1px solid var(--border, #e2e8f0);
}

#panel-asana .asana-tbl thead .asana-tbl-sticky {
  z-index: 3;
  background: var(--bg-secondary);
}

#panel-asana .asana-tbl-sticky a {
  color: var(--accent, #2563eb);
  text-decoration: none;
  font-weight: 600;
}

#panel-asana .asana-tbl-sticky a:hover { text-decoration: underline; }

#panel-asana .asana-tbl-sub {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  margin-top: 2px;
}

/* Field cells: wrap long answers (e.g. headcount breakdowns) with a cap */
#panel-asana .asana-tbl-cell {
  max-width: 340px;
  min-width: 140px;
  max-height: 140px;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.4;
}

#panel-asana .asana-tbl-empty {
  text-align: center;
  padding: 24px;
  color: var(--text-muted, #94a3b8);
}

/* ── Board view ─────────────────────────────────────────────── */
#panel-asana .asana-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 12px;
  align-items: flex-start;
}

#panel-asana .asana-column {
  flex: 0 0 300px;
  max-width: 300px;
  background: var(--bg-secondary);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 280px);
}

#panel-asana .asana-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary, #0f172a);
}

#panel-asana .asana-column-count {
  background: var(--bg-card);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

#panel-asana .asana-cards {
  padding: 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#panel-asana .asana-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--bg-card);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
  /* .asana-cards is a flex column with overflow-y:auto — pin height so a busy
     board column scrolls instead of squishing its cards (see .asana-event-card). */
  flex-shrink: 0;
}

#panel-asana .asana-card:hover {
  border-color: var(--accent, #2563eb);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
}

#panel-asana .asana-card.done { opacity: 0.6; }
#panel-asana .asana-card.done .asana-card-title { text-decoration: line-through; }

#panel-asana .asana-card-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 6px;
  color: var(--text-primary, #0f172a);
}

#panel-asana .asana-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted, #64748b);
}

#panel-asana .asana-card-notes {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted, #64748b);
  line-height: 1.4;
  white-space: pre-wrap;
  max-height: 96px;
  overflow: hidden;
}

#panel-asana .asana-card-empty {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  text-align: center;
  padding: 12px 8px;
}

/* ── Session attendance by topic ─────────────────────────────── */
#panel-asana .asana-attend { display: flex; flex-direction: column; gap: 16px; }

#panel-asana .asana-attend-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: var(--bg-card);
}
#panel-asana .asana-attend-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-secondary);
  overflow: hidden;
}
#panel-asana .asana-attend-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 999px;
  transition: width 0.4s ease;
  min-width: 2px;
}
#panel-asana .asana-attend-progress-text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted, #64748b);
}
#panel-asana .asana-attend-progress-text .asana-btn { margin-left: auto; }

#panel-asana .asana-attend-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 12px;
  color: var(--text-muted, #64748b);
}
#panel-asana .asana-attend-summary span {
  background: var(--bg-secondary);
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 600;
}

#panel-asana .asana-attend-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#panel-asana .asana-attend-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#panel-asana button.asana-chip {
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}
#panel-asana button.asana-chip:hover { border-color: var(--accent, #6366f1); }
#panel-asana button.asana-chip.active {
  background: var(--accent, #6366f1);
  color: #fff;
}

#panel-asana .asana-events {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 340px);
  overflow-y: auto;
  padding-right: 2px;
}

#panel-asana .asana-attend-collapse-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
#panel-asana .asana-attend-collapse-hint {
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

#panel-asana .asana-event-card {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  background: var(--bg-card);
  overflow: hidden;
  /* .asana-events is a flex column with a max-height + overflow-y:auto. Without
     this, once the recap count exceeds the container height, flexbox shrinks
     every card to a ~2px sliver instead of scrolling. Keep natural height. */
  flex-shrink: 0;
}

#panel-asana .asana-event-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid transparent;
  background: var(--bg-secondary);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
#panel-asana .asana-event-card.open .asana-event-head {
  border-bottom-color: var(--border, #e2e8f0);
}
#panel-asana .asana-event-head:hover {
  background: var(--bg-card-hover, var(--bg-hover, rgba(127,127,127,0.06)));
}

#panel-asana .asana-event-caret {
  flex-shrink: 0;
  display: inline-block;
  margin-top: 4px;
  color: var(--text-muted, #64748b);
  transition: transform 0.12s ease;
  font-size: 12px;
}
#panel-asana .asana-event-caret.open { transform: rotate(90deg); }

#panel-asana .asana-event-title {
  flex: 1;
  min-width: 0;
}
#panel-asana .asana-event-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}

#panel-asana .asana-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

#panel-asana .asana-event-total {
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}
#panel-asana .asana-event-total strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  line-height: 1;
}
#panel-asana .asana-event-total small {
  font-size: 11px;
  color: var(--text-muted, #64748b);
}

#panel-asana .asana-event-body-tools {
  padding: 8px 16px 0;
  text-align: right;
}

#panel-asana .asana-event-card .asana-attend-tbl { margin: 0; }
#panel-asana .asana-event-card .asana-attend-tbl th,
#panel-asana .asana-event-card .asana-attend-tbl td { padding: 8px 16px; }
#panel-asana .asana-row-muted td { color: var(--text-muted, #94a3b8); }
#panel-asana .asana-event-card .asana-attend-unmatched { padding: 0 16px 14px; }

#panel-asana .asana-attend-h {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
  margin: 0 0 10px;
}

#panel-asana .asana-bars { display: flex; flex-direction: column; gap: 8px; }
#panel-asana .asana-bar-row {
  display: grid;
  grid-template-columns: 160px 1fr 56px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
#panel-asana .asana-bar-label {
  color: var(--text-primary, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#panel-asana .asana-bar-track {
  background: var(--bg-secondary);
  border-radius: 6px;
  height: 16px;
  overflow: hidden;
}
#panel-asana .asana-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 6px;
  min-width: 2px;
}
#panel-asana .asana-bar-val {
  text-align: right;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}

#panel-asana .asana-attend-tbl { margin-top: 0; }
#panel-asana .asana-attend-tbl th:last-child,
#panel-asana .asana-attend-tbl td:last-child { text-align: right; white-space: nowrap; }

#panel-asana .asana-attend-unmatched { margin-top: 14px; }
#panel-asana .asana-chip {
  display: inline-block;
  margin: 4px 6px 0 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-muted, #64748b);
  font-size: 11px;
}
#panel-asana .asana-chip.strong {
  margin: 0;
  background: var(--accent-bg, rgba(59,130,246,0.15));
  color: var(--accent-light, #60a5fa);
  font-weight: 600;
  font-size: 12px;
}

/* ── Mapping-quality audit ───────────────────────────────────── */
#panel-asana .asana-audit {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  background: var(--bg-card);
  padding: 14px 16px;
}
#panel-asana .asana-audit-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted, #64748b);
}
#panel-asana .asana-audit-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
#panel-asana .asana-audit-metric {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 10px 12px;
}
#panel-asana .asana-audit-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  line-height: 1.1;
}
#panel-asana .asana-audit-lbl {
  font-size: 12px;
  color: var(--text-primary, #334155);
  margin-top: 2px;
}
#panel-asana .asana-audit-sub {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  margin-top: 3px;
}
#panel-asana .asana-audit-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
#panel-asana .asana-audit-col {
  min-width: 0;
}
#panel-asana .asana-audit-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border, #eef2f7);
}
#panel-asana .asana-audit-row span,
#panel-asana .asana-audit-row a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary, #475569);
}
#panel-asana .asana-audit-row a { color: var(--accent, #2563eb); text-decoration: none; }
#panel-asana .asana-audit-row a:hover { text-decoration: underline; }
#panel-asana .asana-audit-row strong {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}
#panel-asana .asana-audit-empty {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  padding: 6px 0;
}

@media (max-width: 768px) {
  #panel-asana .asana-root { padding: 16px; }
  #panel-asana .asana-audit-metrics,
  #panel-asana .asana-audit-cols { grid-template-columns: 1fr; }
  #panel-asana .asana-column { flex-basis: 260px; max-width: 260px; }
  #panel-asana .asana-attend-grid { grid-template-columns: 1fr; }
  #panel-asana .asana-bar-row { grid-template-columns: 110px 1fr 48px; }
}


/* === css/session_attendance.css === */
/* Session Attendance — /dept/events?tab=logistics&sub=attendance
   Nested inside #panel-logistics (which owns the 24/32 page padding).
   Deliberately does NOT reuse the .asana-* rules: attendance is a first-tier
   logistics surface whose source happens to be Asana, not a view of the board. */
#panel-attendance .att-root { min-height: 420px; }

#panel-attendance .att-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

#panel-attendance .att-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}

#panel-attendance .att-sub {
  font-size: 13px;
  color: var(--text-muted, #64748b);
  margin-top: 4px;
  max-width: 78ch;
  line-height: 1.5;
}

#panel-attendance .att-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#panel-attendance .att-btn {
  border: 1px solid var(--border, #d1d5db);
  background: var(--bg-card);
  color: var(--text-primary, #0f172a);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
#panel-attendance .att-btn:hover:not(:disabled) {
  border-color: var(--accent, #2563eb);
  color: var(--accent, #2563eb);
}
#panel-attendance .att-btn.primary {
  background: var(--accent, #2563eb);
  border-color: var(--accent, #2563eb);
  color: #fff;
}
#panel-attendance .att-btn.primary:hover:not(:disabled) { filter: brightness(1.05); color: #fff; }
#panel-attendance .att-btn:disabled { opacity: 0.5; cursor: not-allowed; }
#panel-attendance .att-btn.on {
  border-color: var(--accent, #2563eb);
  color: var(--accent, #2563eb);
  background: color-mix(in srgb, var(--accent, #2563eb) 10%, transparent);
}

#panel-attendance .att-input {
  border: 1px solid var(--border, #d1d5db);
  background: var(--bg-card);
  color: var(--text-primary, #0f172a);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  min-width: 170px;
}

#panel-attendance .att-link {
  font-size: 12px;
  color: var(--accent, #2563eb);
  text-decoration: none;
  white-space: nowrap;
}
#panel-attendance .att-link:hover { text-decoration: underline; }

/* ── KPI strip ─────────────────────────────────────────────── */
#panel-attendance .att-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

#panel-attendance .att-kpi {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: var(--bg-card);
  padding: 12px 14px;
}

#panel-attendance .att-kpi-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  line-height: 1.15;
}
#panel-attendance .att-kpi-val.warn { color: var(--warning, #b45309); }

#panel-attendance .att-kpi-lbl {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  margin-top: 3px;
}

/* ── Processing progress ───────────────────────────────────── */
#panel-attendance .att-progress {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: var(--bg-card);
  padding: 12px 14px;
  margin-bottom: 14px;
}

#panel-attendance .att-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-subtle, #e2e8f0);
  overflow: hidden;
}
#panel-attendance .att-progress-fill {
  height: 100%;
  background: var(--accent, #2563eb);
  transition: width 0.3s ease;
}
#panel-attendance .att-progress-text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted, #64748b);
  margin-top: 8px;
  flex-wrap: wrap;
}
#panel-attendance .att-progress-text .att-btn { margin-left: auto; }

/* ── Filters + topic chips ─────────────────────────────────── */
#panel-attendance .att-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

#panel-attendance .att-topics {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

#panel-attendance .att-chip {
  border: 1px solid var(--border, #d1d5db);
  background: var(--bg-card);
  color: var(--text-secondary, #475569);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12px;
  cursor: default;
  white-space: nowrap;
}
#panel-attendance button.att-chip { cursor: pointer; }
#panel-attendance button.att-chip:hover { border-color: var(--accent, #2563eb); }
#panel-attendance button.att-chip.active {
  background: var(--accent, #2563eb);
  border-color: var(--accent, #2563eb);
  color: #fff;
}
#panel-attendance .att-chip.muted {
  color: var(--text-muted, #94a3b8);
  border-style: dashed;
}

/* ── Event accordion ───────────────────────────────────────── */
#panel-attendance .att-events {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#panel-attendance .att-collapse-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted, #64748b);
  margin-bottom: 2px;
}

#panel-attendance .att-event {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: var(--bg-card);
  overflow: hidden;
}
#panel-attendance .att-event.open { border-color: var(--accent, #2563eb); }

#panel-attendance .att-event-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
#panel-attendance .att-event-head:hover { background: var(--bg-hover, rgba(37, 99, 235, 0.04)); }

#panel-attendance .att-caret {
  color: var(--text-muted, #94a3b8);
  transition: transform 0.15s ease;
  flex: 0 0 auto;
}
#panel-attendance .att-caret.open { transform: rotate(90deg); }

#panel-attendance .att-event-title { flex: 1 1 auto; min-width: 0; }

#panel-attendance .att-event-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
}

#panel-attendance .att-event-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted, #64748b);
  margin-top: 3px;
}

#panel-attendance .att-event-total { text-align: right; flex: 0 0 auto; }
#panel-attendance .att-event-total strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}
#panel-attendance .att-event-total small { font-size: 11px; color: var(--text-muted, #94a3b8); }

#panel-attendance .att-event-body { border-top: 1px solid var(--border, #e2e8f0); }

#panel-attendance .att-event-tools {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 16px 0;
}

/* ── Agenda mapping table ──────────────────────────────────── */
#panel-attendance .att-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
#panel-attendance .att-tbl th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
  padding: 10px 16px 6px;
  white-space: nowrap;
}
#panel-attendance .att-tbl td {
  padding: 8px 16px;
  border-top: 1px solid var(--border-subtle, #f1f5f9);
  color: var(--text-primary, #0f172a);
  vertical-align: top;
}
#panel-attendance .att-tbl td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#panel-attendance .att-tbl td.when { white-space: nowrap; color: var(--text-muted, #64748b); font-variant-numeric: tabular-nums; }
#panel-attendance .att-tbl tr.unmapped td { color: var(--text-muted, #94a3b8); }
#panel-attendance .att-tbl-empty {
  padding: 14px 16px;
  color: var(--text-muted, #94a3b8);
  font-size: 13px;
}

/* The verbatim note fragment a session was mapped from — this column IS the
   audit: an operator reads it against the session title to confirm the 1:1. */
#panel-attendance .att-note {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--text-secondary, #475569);
  background: var(--bg-subtle, #f8fafc);
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 6px;
  padding: 1px 6px;
  display: inline-block;
}
#panel-attendance .att-conf {
  font-size: 11px;
  margin-left: 6px;
  color: var(--warning, #b45309);
  white-space: nowrap;
}

#panel-attendance .att-sess-topics {
  font-size: 11.5px;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
}

/* ── Unresolved headcounts ─────────────────────────────────── */
#panel-attendance .att-leftover { padding: 0 16px 14px; }
#panel-attendance .att-leftover-h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
  margin: 12px 0 6px;
}

/* ── Audit ─────────────────────────────────────────────────── */
#panel-attendance .att-audit {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: var(--bg-card);
  padding: 14px 16px;
  margin-bottom: 14px;
}
#panel-attendance .att-audit-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
#panel-attendance .att-audit-val { font-size: 20px; font-weight: 700; color: var(--text-primary, #0f172a); }
#panel-attendance .att-audit-lbl { font-size: 12px; color: var(--text-secondary, #475569); }
#panel-attendance .att-audit-sub { font-size: 11px; color: var(--text-muted, #94a3b8); margin-top: 2px; }
#panel-attendance .att-audit-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
#panel-attendance .att-audit-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}
#panel-attendance .att-audit-empty { font-size: 12px; color: var(--text-muted, #94a3b8); padding: 4px 0; }

/* ── States ────────────────────────────────────────────────── */
#panel-attendance .att-empty {
  border: 1px dashed var(--border, #d1d5db);
  border-radius: 10px;
  padding: 28px 20px;
  text-align: center;
  color: var(--text-muted, #64748b);
  font-size: 13px;
  line-height: 1.6;
}
#panel-attendance .att-error {
  border: 1px solid var(--danger, #dc2626);
  border-radius: 8px;
  background: color-mix(in srgb, var(--danger, #dc2626) 8%, transparent);
  color: var(--danger, #dc2626);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 12px;
  cursor: pointer;
}
#panel-attendance .att-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 30px;
  color: var(--text-muted, #64748b);
  font-size: 13px;
}

@media (max-width: 640px) {
  #panel-attendance .att-tbl th.opt,
  #panel-attendance .att-tbl td.opt { display: none; }
}


/* === css/event_forecast_grid.css === */
/* Event Revenue Forecast grid — shared by two mounts.
 *
 * Rendered by templates/partials/event_forecast_grid.html on BOTH
 * /dept/events?tab=forecast and /dept/revops?tab=forecast&view=events.
 * Scoped to .efc-panel rather than #panel-forecast so the same rules apply
 * wherever it is mounted; the events page keeps that id on the wrapper for
 * its own tab machinery. */

.efc-panel { padding: 8px 12px 16px !important; }

.efc-panel .fc-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.efc-panel .fc-title { font-size: 14px; font-weight: 600; color: var(--text); }
.efc-panel .fc-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

.efc-panel .eo-kpi-strip {
  margin-bottom: 8px !important;
  gap: 6px;
  grid-template-columns: repeat(9, minmax(0, 1fr));
}
.efc-panel .eo-kpi { padding: 8px 10px; }
.efc-panel .eo-kpi-label { font-size: 9px; letter-spacing: .04em; }
.efc-panel .eo-kpi-value { font-size: 15px; }
.efc-panel .eo-kpi-sub { font-size: 10px; }

.efc-panel .fc-table-wrap { overflow-x: auto; margin: 0 -4px; }
.efc-panel table.fc-table {
  width: 100%; border-collapse: collapse; font-size: 11px;
  table-layout: auto;
}
.efc-panel table.fc-table th,
.efc-panel table.fc-table td {
  padding: 3px 5px; white-space: nowrap;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.efc-panel table.fc-table th {
  font-size: 9px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-muted); font-weight: 600; cursor: pointer;
  position: sticky; top: 0; background: var(--bg, #fff); z-index: 1;
}
.efc-panel table.fc-table th.fc-num,
.efc-panel table.fc-table td.fc-num { text-align: right !important; }
.efc-panel table.fc-table th.fc-left,
.efc-panel table.fc-table td.fc-left { text-align: left !important; }
.efc-panel table.fc-table th.fc-center,
.efc-panel table.fc-table td.fc-center { text-align: center !important; }
.efc-panel table.fc-table td.fc-name {
  max-width: 140px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-align: left !important;
}

/* Section separators: Forecast block, then Commit block at far right */
.efc-panel table.fc-table th.fc-sec,
.efc-panel table.fc-table td.fc-sec {
  border-left: 2px solid var(--border-light, var(--border));
  padding-left: 8px;
}
.efc-panel table.fc-table tbody tr.fc-alt td {
  background: color-mix(in srgb, var(--bg-muted, #f3f4f6) 55%, transparent);
}
.efc-panel table.fc-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent, #6366f1) 8%, transparent);
}

.efc-panel .fc-input {
  width: 64px; text-align: right; padding: 1px 3px; font-size: 11px;
  border: 1px solid var(--border); border-radius: 3px; background: var(--bg, #fff);
  color: var(--text); box-sizing: border-box;
}
.efc-panel .fc-input.fc-computed { color: var(--text-muted); font-style: italic; }
.efc-panel .fc-input.fc-override { color: var(--text); font-style: normal; border-color: var(--accent); }

.efc-panel .fc-note {
  width: 80px; padding: 1px 3px; font-size: 11px; text-align: left;
  border: 1px solid var(--border); border-radius: 3px; background: var(--bg, #fff);
  color: var(--text); box-sizing: border-box;
}

.efc-panel .fc-risk {
  font-size: 10px; padding: 1px 5px; border-radius: 3px;
  background: var(--bg-muted, #f3f4f6); white-space: nowrap;
}
.efc-panel .fc-risk.green { color: var(--success); }
.efc-panel .fc-risk.yellow { color: var(--warning); }
.efc-panel .fc-risk.red { color: var(--error); }

.efc-panel .fc-q { font-size: 10px; color: var(--text-muted); font-weight: 600; }
.efc-panel .fc-foot {
  margin-top: 6px; font-size: 10px; color: var(--text-muted); line-height: 1.35;
}

/* ── Week-over-week ──────────────────────────────────────────────────
 * A WoW cell has three states and they must not look alike: a signed
 * movement, a flat week (0), and "we could not know" (—). The muted dash
 * is deliberately the same weight as any other missing value, because a
 * confident-looking zero is the failure mode this column exists to avoid. */
.efc-panel td.fc-wow { font-variant-numeric: tabular-nums; }
.efc-panel td.fc-wow.up { color: var(--success); }
.efc-panel td.fc-wow.down { color: var(--error); }
.efc-panel td.fc-wow.flat,
.efc-panel td.fc-wow.none { color: var(--text-muted); }
.efc-panel th.fc-wow-h { color: var(--text-muted); }

.efc-panel .fc-wow-banner {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 0 0 8px; padding: 6px 9px; border-radius: 5px; font-size: 11px;
  line-height: 1.4;
  border: 1px solid color-mix(in srgb, var(--warning, #d97706) 35%, transparent);
  background: color-mix(in srgb, var(--warning, #d97706) 8%, transparent);
  color: var(--text);
}
.efc-panel .fc-wow-banner.info {
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg-muted, #f3f4f6) 60%, transparent);
  color: var(--text-muted);
}
.efc-panel .fc-wow-banner b { font-weight: 600; }

@media (max-width: 1400px) {
  .efc-panel .eo-kpi-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .efc-panel .eo-kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}