/* ═══════════════════════════════════════════════════════════════════════
   Lazarus Tracker — Visual System
   Dense + elegant ops UI. Inter type, deep navy on cool white.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Colors — navy gradient with cool greys */
  --navy-900: #0f1d3a;
  --navy-800: #1a2b50;
  --navy-700: #243964;
  --navy-600: #2f4f8a;
  --navy-500: #3f6bb8;
  --accent: #4f8df7;
  --accent-hover: #2670e8;

  --ink-900: #0a0f1c;
  --ink-700: #1f2937;
  --ink-500: #4b5563;
  --ink-400: #6b7280;
  --ink-300: #9ca3af;
  --ink-200: #d1d5db;
  --ink-100: #e5e7eb;
  --ink-50: #f3f4f6;

  --bg: #f8fafc;
  --bg-alt: #f1f5f9;
  --surface: #ffffff;
  --surface-hover: #f8fafc;

  /* Functional colors */
  --green: #16a34a;
  --green-light: #dcfce7;
  --green-bg: #f0fdf4;
  --red: #dc2626;
  --red-light: #fee2e2;
  --red-bg: #fef2f2;
  --amber: #f59e0b;
  --amber-light: #fef3c7;
  --amber-bg: #fffbeb;
  --purple: #8b5cf6;
  --purple-light: #ede9fe;
  --purple-bg: #faf5ff;

  /* Track colors */
  --t-codebase: #3b82f6;
  --t-codebase-bg: #eff6ff;
  --t-legacy: #f59e0b;
  --t-legacy-bg: #fffbeb;
  --t-questionnaire: #ea580c;
  --t-questionnaire-bg: #fff7ed;
  --t-bd: #be185d;
  --t-bd-bg: #fdf2f8;
  --t-referral: #8b5cf6;
  --t-referral-bg: #faf5ff;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
  --shadow-drawer: -20px 0 60px -10px rgb(0 0 0 / 0.30);

  /* Type scale */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', 'Monaco', monospace;

  /* Animation */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink-900);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--accent-hover); }

/* ═══════════════════════════════════════════════════════════════════════
   Topbar — navy gradient, generous height, prominent tabs
   ═══════════════════════════════════════════════════════════════════════ */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 60%, var(--navy-700) 100%);
  box-shadow: var(--shadow-md);
  padding: 0;
}
.topbar-inner {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 32px;
  padding: 14px 28px;
  max-width: 1800px; margin: 0 auto;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  font-size: 28px; line-height: 1; color: var(--accent);
  filter: drop-shadow(0 0 12px rgba(79, 141, 247, 0.45));
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-title { font-weight: 700; color: #fff; font-size: 17px; letter-spacing: -0.01em; }
.brand-sub { color: rgba(255,255,255,0.55); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; }

/* Tab nav — large, prominent, satisfying */
.tab-nav {
  display: inline-flex; align-self: center; justify-self: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 4px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.30);
}
.tab-btn {
  background: transparent; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  font: inherit; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.65);
  border-radius: 7px;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.tab-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.tab-btn:active { transform: scale(0.97); }
.tab-btn.active {
  background: linear-gradient(180deg, var(--accent) 0%, #3b78d8 100%);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.18);
  font-weight: 600;
}
.tab-icon { font-size: 15px; line-height: 1; }
.tab-text { letter-spacing: -0.01em; }

/* Topbar actions */
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.badge-count {
  background: rgba(79, 141, 247, 0.22); color: rgba(255,255,255,0.95);
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid rgba(79, 141, 247, 0.35);
}
.refreshed-text { color: rgba(255,255,255,0.55); font-size: 11px; }

.icon-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; cursor: pointer; font-size: 15px;
  transition: all var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.20); transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(180deg, var(--accent) 0%, #3b78d8 100%);
  color: #fff; border: none; font: inherit; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 7px; cursor: pointer;
  font-size: 13px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.20);
  transition: all var(--dur-fast) var(--ease);
}
.btn-primary:hover { background: linear-gradient(180deg, #5e9bff 0%, #4683e8 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79, 141, 247, 0.35); }
.btn-primary:active { transform: translateY(0); }
.refresh-icon { display: inline-block; transition: transform 0.4s var(--ease-out); }
.btn-primary:hover .refresh-icon { transform: rotate(180deg); }

.btn-ghost {
  background: transparent; border: 1px solid var(--ink-200);
  color: var(--ink-500); font: inherit; font-size: 12px;
  padding: 6px 12px; border-radius: 6px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.btn-ghost:hover { background: var(--ink-50); border-color: var(--ink-300); color: var(--ink-700); }

/* ═══════════════════════════════════════════════════════════════════════
   Tab panes
   ═══════════════════════════════════════════════════════════════════════ */
.tab-pane { animation: fadeIn var(--dur-slow) var(--ease-out); }
.tab-pane.hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   Filter bar
   ═══════════════════════════════════════════════════════════════════════ */
.filterbar {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end;
  background: var(--surface); padding: 14px 28px;
  border-bottom: 1px solid var(--ink-100);
  position: sticky; top: 60px; z-index: 50;
}
.filter-group { display: flex; flex-direction: column; gap: 5px; }
.filter-grow { flex: 1; min-width: 250px; }
.filter-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-400); font-weight: 600;
}

.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--ink-200); background: var(--surface); color: var(--ink-700);
  padding: 5px 12px; border-radius: 999px;
  font: inherit; font-size: 12px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.chip:hover { background: var(--ink-50); border-color: var(--ink-300); transform: translateY(-1px); }
.chip:active { transform: translateY(0); }
.chip.active {
  background: var(--navy-900); color: #fff; border-color: var(--navy-900);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(15, 29, 58, 0.25);
}

.search, .select {
  border: 1px solid var(--ink-200); background: var(--surface);
  padding: 7px 12px; border-radius: 7px; font: inherit; font-size: 13px;
  min-width: 220px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.search:focus, .select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 141, 247, 0.18);
}
.select { min-width: 170px; cursor: pointer; }
.search { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════
   Content + status banner
   ═══════════════════════════════════════════════════════════════════════ */
.content { padding: 18px 28px 60px; }
.status-banner {
  padding: 10px 16px; border-radius: 8px; margin-bottom: 14px;
  display: none; font-size: 13px;
}
.status-banner.show { display: block; animation: slideDown var(--dur) var(--ease-out); }
.status-banner.error { background: var(--red-bg); border: 1px solid var(--red-light); color: var(--red); }
.status-banner.info { background: #eef6ff; border: 1px solid #c6dbff; color: #1e40af; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.banner-info {
  margin: 12px 28px 0;
  padding: 11px 16px; border-radius: 8px;
  background: var(--amber-bg); border-left: 3px solid var(--amber); color: #92400e;
  font-size: 12px;
}
.banner-info strong { color: #78350f; }

/* ═══════════════════════════════════════════════════════════════════════
   Stats bar (Leads tab)
   ═══════════════════════════════════════════════════════════════════════ */
.stats-bar {
  display: flex; gap: 8px; padding: 14px 28px;
  background: var(--surface); border-bottom: 1px solid var(--ink-100);
  overflow-x: auto;
}
.stat-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 14px; border-radius: 8px;
  background: var(--bg-alt); border: 1px solid var(--ink-100);
  min-width: 100px;
  transition: all var(--dur-fast) var(--ease);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-card .stat-label { font-size: 10px; color: var(--ink-400); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.stat-card .stat-value { font-size: 18px; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }

.stat-card.t-Codebase, .stat-card.t-Codebase-Modern { background: var(--t-codebase-bg); border-color: rgba(59, 130, 246, 0.25); }
.stat-card.t-Codebase-Legacy { background: var(--t-legacy-bg); border-color: rgba(245, 158, 11, 0.25); }
.stat-card.t-Legacy-Questionnaire { background: var(--t-questionnaire-bg); border-color: rgba(234, 88, 12, 0.25); }
.stat-card.t-Business-Data { background: var(--t-bd-bg); border-color: rgba(190, 24, 93, 0.25); }
.stat-card.t-Referral { background: var(--t-referral-bg); border-color: rgba(139, 92, 246, 0.25); }

/* ═══════════════════════════════════════════════════════════════════════
   Tables
   ═══════════════════════════════════════════════════════════════════════ */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--ink-100); border-radius: 10px;
  overflow: auto; box-shadow: var(--shadow-sm);
}
table { width: 100%; border-collapse: collapse; }
thead th {
  background: var(--navy-900); color: rgba(255,255,255,0.95); text-align: left;
  padding: 10px 14px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  position: sticky; top: 0; z-index: 5;
  white-space: nowrap; font-weight: 600;
  border-bottom: 1px solid var(--navy-700);
}

.density-compact tbody td { padding: 7px 14px; font-size: 12.5px; line-height: 1.35; }
.density-comfortable tbody td { padding: 12px 14px; font-size: 13px; line-height: 1.5; }
tbody td { border-bottom: 1px solid var(--ink-100); vertical-align: middle; }
tbody tr {
  transition: background var(--dur-fast) var(--ease);
  cursor: pointer;
}
tbody tr:hover {
  background: var(--bg-alt);
  box-shadow: inset 3px 0 0 var(--accent);
}
tbody tr.placeholder { color: var(--ink-300); text-align: center; cursor: default; }
tbody tr.placeholder td { padding: 60px 16px; font-size: 14px; }
tbody tr.placeholder:hover { background: var(--surface); box-shadow: none; }

/* Row tints by track */
tbody tr.r-Codebase, tbody tr.r-Codebase-Modern { background: rgba(239, 246, 255, 0.45); }
tbody tr.r-Codebase-Legacy { background: rgba(255, 251, 235, 0.55); }
tbody tr.r-Legacy-Questionnaire { background: rgba(255, 247, 237, 0.55); }
tbody tr.r-Business-Data { background: rgba(253, 242, 248, 0.55); }
tbody tr.r-Referral { background: rgba(250, 245, 255, 0.55); }
tbody tr.fresh-24h { position: relative; }
tbody tr.fresh-24h::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), #2670e8);
}
tbody tr.stale-30d { opacity: 0.7; }

/* Type pill */
.type-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  white-space: nowrap; letter-spacing: 0.01em;
  text-transform: none;
}
.type-Codebase, .type-Codebase-Modern { background: var(--t-codebase-bg); color: var(--t-codebase); border: 1px solid rgba(59, 130, 246, 0.25); }
.type-Codebase-Legacy { background: var(--t-legacy-bg); color: var(--t-legacy); border: 1px solid rgba(245, 158, 11, 0.30); }
.type-Legacy-Questionnaire { background: var(--t-questionnaire-bg); color: var(--t-questionnaire); border: 1px solid rgba(234, 88, 12, 0.30); }
.type-Business-Data { background: var(--t-bd-bg); color: var(--t-bd); border: 1px solid rgba(190, 24, 93, 0.30); }
.type-Referral { background: var(--t-referral-bg); color: var(--t-referral); border: 1px solid rgba(139, 92, 246, 0.30); }
.type-Unknown { background: var(--ink-50); color: var(--ink-500); border: 1px solid var(--ink-200); }

/* Columns sized */
.col-type { width: 140px; }
.col-founder { width: 210px; }
.col-company { width: 180px; }
.col-industry { width: 130px; }
.col-fte { width: 70px; text-align: right; }
.col-payout { width: 110px; }
.col-repos { width: 65px; text-align: right; }
.col-prs { width: 65px; text-align: right; }
.col-connectors { width: 220px; }
.col-signals { width: 160px; }
.col-inbound { width: 145px; white-space: nowrap; }
.col-actions { width: 80px; text-align: center; }

.cell-name { font-weight: 600; color: var(--ink-900); }
.cell-email { font-size: 11px; color: var(--ink-400); margin-top: 1px; }
.cell-na { color: var(--ink-300); }

.badge {
  display: inline-block; padding: 1.5px 7px; border-radius: 6px;
  font-size: 10px; font-weight: 600; margin-right: 4px; margin-bottom: 2px;
}
.b-bd { background: var(--t-bd-bg); color: var(--t-bd); }
.b-code { background: var(--t-codebase-bg); color: var(--t-codebase); }
.b-artifact { background: var(--green-light); color: var(--green); }
.b-stale { background: var(--red-light); color: var(--red); }
.b-fresh { background: #dbeafe; color: #1d4ed8; }
.b-missing { background: var(--ink-50); color: var(--ink-500); }
.connectors-list { font-size: 11px; line-height: 1.45; color: var(--ink-700); }
.inbound-date { font-variant-numeric: tabular-nums; color: var(--ink-700); font-size: 11.5px; }
.inbound-rel { font-size: 10px; color: var(--ink-400); margin-top: 1px; }

.actions-cell { display: flex; gap: 3px; justify-content: center; }
.actions-cell a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 5px;
  color: var(--ink-500); font-size: 13px;
  transition: all var(--dur-fast) var(--ease);
}
.actions-cell a:hover { background: var(--ink-50); color: var(--accent); transform: scale(1.1); }

/* ═══════════════════════════════════════════════════════════════════════
   Control surface
   ═══════════════════════════════════════════════════════════════════════ */
.ctl-funnel { width: 130px; }
.ctl-auto { width: 130px; }
.ctl-manual { width: 145px; }
.ctl-reason { width: 160px; }
.ctl-final { width: 150px; }
.ctl-preview { width: 220px; }
.ctl-notes { width: 200px; }

.funnel-pill {
  display: inline-block; padding: 3px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.f-intake { background: var(--ink-50); color: var(--ink-500); border-color: var(--ink-100); }
.f-awaiting_verdict { background: var(--amber-bg); color: #92400e; border-color: rgba(245, 158, 11, 0.25); }
.f-decision_pending { background: #fff7ed; color: #c2410c; border-color: rgba(234, 88, 12, 0.25); }
.f-outcome_set { background: var(--green-bg); color: var(--green); border-color: rgba(22, 163, 74, 0.25); }
.f-closed { background: var(--ink-50); color: var(--ink-700); border-color: var(--ink-200); }

.ctl-select, .ctl-text {
  border: 1px solid var(--ink-200); background: var(--surface); padding: 5px 9px;
  border-radius: 6px; font: inherit; font-size: 12px; width: 100%;
  transition: all var(--dur-fast) var(--ease);
  color: var(--ink-700);
}
.ctl-select { cursor: pointer; }
.ctl-select:hover, .ctl-text:hover { border-color: var(--accent); }
.ctl-select:focus, .ctl-text:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 141, 247, 0.15); }
.ctl-select.dirty { background: var(--amber-bg); border-color: var(--amber); font-weight: 600; color: #78350f; }

.email-preview {
  font-size: 10.5px; line-height: 1.35;
  padding: 6px 10px; background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  border-left: 3px solid var(--accent); border-radius: 4px;
  color: #1e3a8a;
}
.email-preview.muted { background: var(--ink-50); border-left-color: var(--ink-200); color: var(--ink-400); font-style: italic; }
.email-preview .template-name { font-weight: 700; margin-bottom: 1px; }

.auto-badge {
  display: inline-block; padding: 3px 10px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em;
}
.av-pending { background: var(--ink-50); color: var(--ink-500); }
.av-accept, .av-qualifying { background: var(--green-light); color: var(--green); }
.av-reject, .av-likely_reject { background: var(--red-light); color: var(--red); }
.av-on_hold, .av-borderline { background: var(--amber-light); color: #92400e; }
.av-unknown { background: var(--ink-50); color: var(--ink-300); font-style: italic; font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════════
   Overview / Metrics page
   ═══════════════════════════════════════════════════════════════════════ */
.metrics-content { padding: 22px 28px 60px; max-width: 1800px; margin: 0 auto; }

.page-intro { margin-bottom: 20px; }
.page-title { font-size: 22px; font-weight: 700; margin: 0; color: var(--ink-900); letter-spacing: -0.02em; }
.page-sub { font-size: 13px; color: var(--ink-500); margin: 4px 0 0; }

/* KPIs */
.kpi-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 24px; }
.kpi-card {
  background: var(--surface); border: 1px solid var(--ink-100); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-fast) var(--ease);
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), #2670e8);
}
.kpi-card.k-bd::before { background: linear-gradient(90deg, var(--t-bd), #831843); }
.kpi-card.k-codebase::before { background: linear-gradient(90deg, var(--t-codebase), var(--navy-700)); }
.kpi-card.k-warm::before { background: linear-gradient(90deg, var(--amber), #d97706); }
.kpi-card.k-stale::before { background: linear-gradient(90deg, var(--red), #991b1b); }
.kpi-card.k-closed::before { background: linear-gradient(90deg, var(--green), #15803d); }
.kpi-label { font-size: 10px; text-transform: uppercase; color: var(--ink-400); letter-spacing: 0.08em; font-weight: 600; }
.kpi-value { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-900); letter-spacing: -0.02em; }
.kpi-sub { font-size: 11px; color: var(--ink-400); margin-top: 1px; }

/* Section heads */
.metrics-section { margin-bottom: 30px; }
.metrics-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; margin: 0 0 14px; color: var(--ink-900);
  padding-bottom: 8px; border-bottom: 1px solid var(--ink-100);
  font-weight: 600; letter-spacing: -0.01em;
}
.metrics-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.d-bd { background: var(--t-bd); }
.d-codebase { background: var(--t-codebase); }
.d-engage { background: var(--amber); }

.metrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.metric-card {
  background: var(--surface); border: 1px solid var(--ink-100); border-radius: 10px;
  padding: 14px 16px; min-height: 220px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-fast) var(--ease);
}
.metric-card:hover { box-shadow: var(--shadow); }
.metric-card-wide { grid-column: span 2; }
.metric-card-title {
  font-size: 11px; text-transform: uppercase; color: var(--ink-500);
  letter-spacing: 0.08em; margin: 0 0 12px; font-weight: 600;
}

/* Bar charts */
.chart { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; }
.chart-row {
  display: grid; grid-template-columns: 120px 1fr 50px;
  align-items: center; gap: 10px;
  transition: background var(--dur-fast) var(--ease);
  padding: 1px 0;
}
.chart-row:hover { background: var(--bg-alt); border-radius: 4px; }
.chart-label { color: var(--ink-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-bar { height: 16px; border-radius: 4px; position: relative; transition: filter var(--dur-fast) var(--ease); }
.chart-row:hover .chart-bar { filter: brightness(1.05); }
.chart-bar.bd { background: linear-gradient(90deg, #fce7f3, var(--t-bd)); }
.chart-bar.code { background: linear-gradient(90deg, #dbeafe, var(--t-codebase)); }
.chart-bar.warm { background: linear-gradient(90deg, #fef3c7, var(--amber)); }
.chart-bar.green { background: linear-gradient(90deg, #d1fae5, var(--green)); }
.chart-bar.red { background: linear-gradient(90deg, #fee2e2, var(--red)); }
.chart-bar.grey { background: linear-gradient(90deg, var(--ink-100), var(--ink-300)); }
.chart-count { text-align: right; color: var(--ink-900); font-variant-numeric: tabular-nums; font-weight: 600; }
.chart-empty { color: var(--ink-300); font-style: italic; padding: 24px 0; text-align: center; }

.list-block { font-size: 12px; max-height: 260px; overflow-y: auto; }
.list-row {
  display: grid; grid-template-columns: 1fr 1fr 80px;
  padding: 7px 0; border-bottom: 1px solid var(--ink-100); gap: 8px;
  font-size: 11.5px;
  transition: background var(--dur-fast) var(--ease);
}
.list-row:hover { background: var(--bg-alt); }
.list-row .lr-name { font-weight: 600; color: var(--ink-900); }
.list-row .lr-company { color: var(--ink-500); }
.list-row .lr-meta { color: var(--ink-400); text-align: right; }

/* ═══════════════════════════════════════════════════════════════════════
   Drawer — decision-relevant summary, not raw JSON
   ═══════════════════════════════════════════════════════════════════════ */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 29, 58, 0.45);
  backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.drawer-overlay.show { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0;
  width: min(640px, 96vw); height: 100vh;
  background: var(--surface);
  z-index: 210;
  box-shadow: var(--shadow-drawer);
  display: flex; flex-direction: column;
  transform: translateX(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.drawer.show { transform: none; }
.drawer.hidden { transform: translateX(110%); }
.drawer-overlay.hidden { display: block; opacity: 0; pointer-events: none; }

.drawer-header {
  padding: 18px 22px;
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
  color: #fff;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
}
.drawer-header-text { flex: 1; }
.drawer-type {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  background: rgba(255,255,255,0.10); color: #fff;
  margin-bottom: 8px;
}
.drawer-header h2 { margin: 0 0 4px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.drawer-sub { color: rgba(255,255,255,0.65); font-size: 12.5px; }
.close-btn { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.15); width: 32px; height: 32px; font-size: 22px; }
.close-btn:hover { background: rgba(255,255,255,0.18); }

.drawer-body { padding: 22px; overflow-y: auto; flex: 1; font-size: 13px; line-height: 1.5; }

/* Drawer content blocks */
.drawer-section { margin-bottom: 24px; }
.drawer-section:last-child { margin-bottom: 0; }
.drawer-section-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--ink-400); font-weight: 700; margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.drawer-section-title::after { content: ''; flex: 1; height: 1px; background: var(--ink-100); }

.fitness-card {
  padding: 16px 18px; border-radius: 10px;
  border: 1px solid var(--ink-100);
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--surface) 100%);
}
.fitness-card.qualifying, .fitness-card.accept { border-color: var(--green); background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%); }
.fitness-card.borderline, .fitness-card.on_hold { border-color: var(--amber); background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%); }
.fitness-card.likely_reject, .fitness-card.reject { border-color: var(--red); background: linear-gradient(180deg, #fef2f2 0%, #ffffff 100%); }
.fitness-verdict { display: flex; align-items: center; gap: 10px; }
.fitness-icon { font-size: 22px; line-height: 1; }
.fitness-label { font-size: 17px; font-weight: 700; color: var(--ink-900); }
.fitness-reason { margin-top: 10px; color: var(--ink-700); font-size: 12.5px; line-height: 1.55; }

.fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fact {
  padding: 10px 12px; border-radius: 8px;
  background: var(--bg-alt); border: 1px solid var(--ink-100);
  display: flex; flex-direction: column; gap: 2px;
}
.fact-label { font-size: 10px; color: var(--ink-400); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.fact-value { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.fact-value.muted { color: var(--ink-300); font-weight: 500; }
.fact-link { font-size: 12px; word-break: break-all; }

.repo-list, .connectors-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.repo-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 12px; background: var(--bg-alt); border: 1px solid var(--ink-100); border-radius: 6px;
  font-size: 12px;
}
.repo-row.passing { background: var(--green-bg); border-color: rgba(22, 163, 74, 0.20); }
.repo-row.holding { background: var(--amber-bg); border-color: rgba(245, 158, 11, 0.25); }
.repo-row.rejected { background: var(--red-bg); border-color: rgba(220, 38, 38, 0.20); }
.repo-name { font-family: var(--font-mono); font-size: 11px; color: var(--ink-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repo-meta { font-size: 10.5px; color: var(--ink-500); }
.repo-status {
  font-size: 10px; padding: 2px 7px; border-radius: 999px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.repo-status.passing { background: var(--green); color: #fff; }
.repo-status.holding { background: var(--amber); color: #fff; }
.repo-status.rejected { background: var(--red); color: #fff; }

.connector-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; background: var(--bg-alt); border: 1px solid var(--ink-100);
  border-radius: 999px; font-size: 11.5px; color: var(--ink-700);
}
.connector-pill .ck { font-weight: 600; color: var(--ink-900); }
.connector-list { display: flex; flex-wrap: wrap; gap: 6px; }

.drawer-actions {
  display: flex; gap: 8px; padding: 14px 22px;
  background: var(--bg-alt); border-top: 1px solid var(--ink-100);
}
.drawer-actions .btn-ghost, .drawer-actions .btn-primary { flex: 1; justify-content: center; padding: 9px 14px; }

.signal-list { display: flex; flex-wrap: wrap; gap: 5px; }
.signal-pill {
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.signal-good { background: var(--green-light); color: var(--green); }
.signal-warn { background: var(--amber-light); color: #92400e; }
.signal-neutral { background: var(--ink-50); color: var(--ink-500); }
.signal-info { background: #dbeafe; color: #1d4ed8; }

.timeline {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; color: var(--ink-700);
}
.timeline-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--ink-100); }
.timeline-row:last-child { border-bottom: none; }
.timeline-k { color: var(--ink-400); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.timeline-v { color: var(--ink-900); }
.timeline-v.na { color: var(--ink-300); font-style: italic; font-weight: 500; }

/* Tooltips */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--navy-900); color: #fff;
  padding: 6px 10px; border-radius: 6px;
  font-size: 11px; white-space: nowrap; z-index: 999;
  box-shadow: var(--shadow-md);
  animation: fadeIn 100ms var(--ease-out);
  pointer-events: none;
}
[data-tooltip]:hover::before {
  content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--navy-900); z-index: 999;
  pointer-events: none;
}

/* Scrollbar polish */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 5px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

/* Hide on small screens — operator surface only */
@media (max-width: 1100px) {
  .kpi-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .topbar-inner { grid-template-columns: 1fr; gap: 14px; }
  .tab-nav { justify-self: stretch; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}