/* ============================================================
   Meridian — Design System
   Tokens → Reset → Layout → Components
   ============================================================ */

:root {
  /* Neutrals (warm zinc) */
  --neutral-50:  #F9F8F6;
  --neutral-100: #F2F1EF;
  --neutral-200: #E6E4E0;
  --neutral-300: #D1CEC9;
  --neutral-400: #A09C95;
  --neutral-500: #706C65;
  --neutral-600: #524F49;
  --neutral-700: #3D3A35;
  --neutral-800: #252320;
  --neutral-900: #16140F;
  --neutral-950: #0D0C09;

  /* Accent — Violet */
  --accent-100: #EDE9FE;
  --accent-500: #7C3AED;
  --accent-600: #6D28D9;
  --accent-700: #5B21B6;

  /* Brand gold — logo mark only */
  --brand-gold: #F59E0B;

  /* Signal — Red */
  --signal-red-bg:     #FEF2F2;
  --signal-red-border: #FECACA;
  --signal-red-text:   #B91C1C;
  --signal-red-dot:    #DC2626;

  /* Signal — Amber */
  --signal-amber-bg:     #FFFBEB;
  --signal-amber-border: #FDE68A;
  --signal-amber-text:   #92400E;
  --signal-amber-dot:    #D97706;

  /* Signal — Green */
  --signal-green-bg:     #F0FDF4;
  --signal-green-border: #BBF7D0;
  --signal-green-text:   #14532D;
  --signal-green-dot:    #16A34A;

  /* Signal — Blue */
  --signal-blue-bg:     #EFF6FF;
  --signal-blue-border: #BFDBFE;
  --signal-blue-text:   #1E40AF;
  --signal-blue-dot:    #2563EB;

  /* Typography */
  --font-ui:   "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-data: "IBM Plex Mono", "Fira Code", monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Motion */
  --transition-fast: 120ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 300ms ease-out;

  /* Spacing (8px grid) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

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

/* ====== RESET ====== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--neutral-50);
  color: var(--neutral-700);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02","cv03","cv04","cv11";
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-2);
  color: var(--neutral-800);
  font-weight: var(--weight-semibold);
}

h1 { font-size: var(--text-xl);  letter-spacing: -0.02em; }
h2 { font-size: var(--text-lg);  letter-spacing: -0.02em; }
h3 { font-size: var(--text-base); color: var(--neutral-700); }

p { margin: 0 0 var(--space-3); color: var(--neutral-600); line-height: 1.55; }

ul, ol { margin: 0; padding-left: 18px; color: var(--neutral-600); }
li { margin-bottom: var(--space-1); font-size: var(--text-sm); line-height: 1.5; }

a { color: var(--accent-600); text-decoration: none; }
a:hover { color: var(--accent-700); }

/* ====== SHELL ====== */
.shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 100vh;
}

/* ====== SIDEBAR ====== */
.side-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: #0F0D0B;
  display: flex;
  flex-direction: column;
  padding: var(--space-4) 0 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}

.side-nav::-webkit-scrollbar { width: 4px; }
.side-nav::-webkit-scrollbar-track { background: transparent; }
.side-nav::-webkit-scrollbar-thumb { background: var(--neutral-800); border-radius: 2px; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-2) var(--space-4) var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: var(--space-3);
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  text-align: left;
}
.brand:hover { opacity: 0.85; }

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--brand-gold) 0%, #D97706 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -0.03em;
  box-shadow: 0 1px 3px rgba(245,158,11,0.4);
}

.brand-text { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.brand-name {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.brand-tagline {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-top: 1px;
  line-height: 1.3;
  white-space: normal;
}

.side-nav nav {
  flex: 1;
  padding: 0 var(--space-2) var(--space-4);
  overflow-y: auto;
}

.nav-section-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--neutral-600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-6) var(--space-2) var(--space-1);
}

.side-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--neutral-400);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  padding: 0 var(--space-2);
  height: 36px;
  border-radius: var(--radius-md);
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: background var(--transition-fast), color var(--transition-fast);
  margin-bottom: 2px;
}

.side-nav a:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.85); }

.side-nav a.active {
  background: rgba(124,58,237,0.15);
  color: #fff;
  border-left-color: var(--accent-500);
  font-weight: var(--weight-medium);
}

.nav-count {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--radius-md);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  font-family: var(--font-data);
  line-height: 1;
}

.nav-count-red   { background: var(--signal-red-dot); color: #fff; }
.nav-count-amber { background: var(--signal-amber-dot); color: #fff; }
.nav-count-blue  { background: var(--signal-blue-dot); color: #fff; }

.side-nav-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--neutral-900);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.model-mode-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal-green-dot);
  flex-shrink: 0;
  animation: pulse-dot 2.4s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.model-mode-label {
  font-size: 12px;
  color: var(--neutral-600);
  font-family: var(--font-data);
}

/* ====== MAIN CONTENT ====== */
.app {
  position: relative;
  min-height: 100vh;
  padding: var(--space-8);
}

.app::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 580px;
  height: 260px;
  background:
    radial-gradient(ellipse 70% 55% at 100% 0%, rgba(124,58,237,0.05) 0%, transparent 100%),
    radial-gradient(ellipse 32% 28% at 87% 22%, rgba(245,158,11,0.03) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.app::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 580px;
  height: 260px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 580 260'%3E%3Cg transform='translate(560,8)' opacity='0.13' stroke='%237C3AED' stroke-width='0.8' fill='none'%3E%3Cline x1='0' y1='-240' x2='0' y2='240'/%3E%3Cline x1='-240' y1='0' x2='240' y2='0'/%3E%3Cline x1='-170' y1='-170' x2='170' y2='170'/%3E%3Cline x1='170' y1='-170' x2='-170' y2='170'/%3E%3Cline x1='-92' y1='-222' x2='92' y2='222'/%3E%3Cline x1='92' y1='-222' x2='-92' y2='222'/%3E%3Cline x1='-222' y1='-92' x2='222' y2='92'/%3E%3Cline x1='222' y1='-92' x2='-222' y2='92'/%3E%3C/g%3E%3Cg transform='translate(450,55)' opacity='0.085' stroke='%237C3AED' stroke-width='0.6' fill='none'%3E%3Cline x1='0' y1='-130' x2='0' y2='130'/%3E%3Cline x1='-130' y1='0' x2='130' y2='0'/%3E%3Cline x1='-92' y1='-92' x2='92' y2='92'/%3E%3Cline x1='92' y1='-92' x2='-92' y2='92'/%3E%3Cline x1='-50' y1='-120' x2='50' y2='120'/%3E%3Cline x1='50' y1='-120' x2='-50' y2='120'/%3E%3Cline x1='-120' y1='-50' x2='120' y2='50'/%3E%3Cline x1='120' y1='-50' x2='-120' y2='50'/%3E%3C/g%3E%3Cg transform='translate(505,78)' opacity='0.095' stroke='%23F59E0B' stroke-width='0.6' fill='none'%3E%3Cline x1='0' y1='-80' x2='0' y2='80'/%3E%3Cline x1='-80' y1='0' x2='80' y2='0'/%3E%3Cline x1='-57' y1='-57' x2='57' y2='57'/%3E%3Cline x1='57' y1='-57' x2='-57' y2='57'/%3E%3C/g%3E%3Cg transform='translate(400,28)' opacity='0.065' stroke='%237C3AED' stroke-width='0.5' fill='none'%3E%3Cline x1='0' y1='-42' x2='0' y2='42'/%3E%3Cline x1='-42' y1='0' x2='42' y2='0'/%3E%3Cline x1='-30' y1='-30' x2='30' y2='30'/%3E%3Cline x1='30' y1='-30' x2='-30' y2='30'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 0;
}

/* ====== PAGE HEADER ====== */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--neutral-200);
  margin-bottom: var(--space-6);
}

.page-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--neutral-900);
  letter-spacing: -0.02em;
  margin: 0;
}

.page-subtitle {
  font-size: var(--text-sm);
  color: var(--neutral-500);
  margin: 3px 0 0;
}

/* ====== SECTION LABELS (kicker) ====== */
.kicker {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-1);
}

/* ====== CARDS / PANELS ====== */
.card, .panel {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

/* ====== KPI STRIP ====== */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  margin-bottom: var(--space-6);
  overflow: hidden;
}

.kpi-cell {
  padding: 12px var(--space-4);
  border-right: 1px solid var(--neutral-200);
}
.kpi-cell:last-child { border-right: none; }

.kpi-value {
  display: block;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  font-family: var(--font-data);
  color: var(--neutral-900);
  line-height: 1.1;
}
.kpi-value.red   { color: var(--signal-red-dot); }
.kpi-value.amber { color: var(--signal-amber-dot); }
.kpi-value.green { color: var(--signal-green-dot); }
.kpi-value.blue  { color: var(--signal-blue-dot); }

.kpi-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 5px;
}

/* ====== BUTTONS ====== */
button, .btn, a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-lg);
  border: none;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
}

button:disabled, .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary */
button.primary, .btn-primary, a.button.primary {
  height: 34px;
  padding: 0 16px;
  background: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-600) 100%);
  color: #fff;
  border: none;
  box-shadow: 0 1px 2px rgba(109,40,217,0.3);
  letter-spacing: -0.01em;
}
button.primary:hover:not(:disabled), .btn-primary:hover:not(:disabled), a.button.primary:hover {
  background: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-700) 100%);
  box-shadow: 0 2px 4px rgba(109,40,217,0.35);
}

/* Secondary */
button.secondary, .btn-secondary, a.button.secondary {
  height: 32px;
  padding: 0 14px;
  background: var(--neutral-100);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-200);
}
button.secondary:hover:not(:disabled), .btn-secondary:hover:not(:disabled), a.button.secondary:hover { background: var(--neutral-200); color: var(--neutral-700); }

/* Ghost */
button.ghost, .btn-ghost, a.button.ghost {
  height: 32px;
  padding: 0 12px;
  background: transparent;
  color: var(--neutral-600);
  border: none;
}
button.ghost:hover:not(:disabled), .btn-ghost:hover:not(:disabled), a.button.ghost:hover { background: var(--neutral-100); }

/* Compact */
button.small, .btn-compact, a.button.small {
  height: 28px;
  padding: 0 10px;
  font-size: var(--text-sm);
}

/* ====== BADGES ====== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.3;
}

/* Tone mappings (old names → new colors) */
.badge.risk,   .badge-red    { background: var(--signal-red-bg);   color: var(--signal-red-text);   border-color: var(--signal-red-border); }
.badge.warn,   .badge-amber  { background: var(--signal-amber-bg); color: var(--signal-amber-text); border-color: var(--signal-amber-border); }
.badge.model,  .badge-green  { background: var(--signal-green-bg); color: var(--signal-green-text); border-color: var(--signal-green-border); }
.badge.impact, .badge-blue   { background: var(--signal-blue-bg);  color: var(--signal-blue-text);  border-color: var(--signal-blue-border); }
.badge.neutral, .badge-neutral { background: var(--neutral-100); color: var(--neutral-600); border-color: var(--neutral-200); }

/* ====== SIGNAL DOTS ====== */
.signal-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
}
.signal-dot.red   { background: var(--signal-red-dot); }
.signal-dot.amber { background: var(--signal-amber-dot); }
.signal-dot.green { background: var(--signal-green-dot); }
.signal-dot.blue  { background: var(--signal-blue-dot); }
.signal-dot.grey  { background: var(--neutral-300); }

.dot-label { display: inline-flex; align-items: center; gap: 6px; }

/* ====== DATA TABLES ====== */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.capability-table table { min-width: 1250px; }

thead th {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  height: 36px;
  padding: 0 12px;
  text-align: left;
  border-bottom: 2px solid var(--neutral-200);
  background: var(--neutral-50);
  white-space: nowrap;
}

/* th/td used both with thead/tbody tags and bare */
th {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  height: 36px;
  padding: 0 12px;
  text-align: left;
  border-bottom: 2px solid var(--neutral-200);
  background: var(--neutral-50);
  white-space: nowrap;
  vertical-align: middle;
}

tbody tr {
  border-bottom: 1px solid var(--neutral-200);
  transition: background var(--transition-fast);
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--neutral-100); }

td {
  height: 44px;
  padding: 0 12px;
  font-size: var(--text-sm);
  color: var(--neutral-600);
  border-bottom: 1px solid var(--neutral-200);
  vertical-align: middle;
}

td strong {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--neutral-800);
}

.td-mono {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  color: var(--neutral-700);
}

.td-sub {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  display: block;
  margin-top: 2px;
  font-family: var(--font-data);
}

.muted { color: var(--neutral-500); font-size: var(--text-sm); }

/* ====== FORM INPUTS ====== */
label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--neutral-700);
  display: block;
}

select, input, textarea {
  width: 100%;
  padding: 0 12px;
  height: 36px;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-md);
  background: #fff;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--neutral-800);
  outline: none;
  -webkit-appearance: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

select:focus, input:focus, textarea:focus {
  border-color: var(--accent-600);
  box-shadow: 0 0 0 3px var(--accent-100);
}

textarea {
  height: auto;
  min-height: 150px;
  padding: var(--space-2) 12px;
  resize: vertical;
  line-height: 1.55;
}

textarea.large-textarea, textarea.large { min-height: 280px; }
::placeholder { color: var(--neutral-400); }

/* ====== SECTION HEAD ====== */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.row-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

/* ====== METRICS (3-cell and 6-cell — kept for program detail) ====== */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.metrics.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.metrics div {
  padding: 12px var(--space-4);
  border-right: 1px solid var(--neutral-200);
}
.metrics div:last-child { border-right: none; }

.metrics strong {
  display: block;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  font-family: var(--font-data);
  color: var(--neutral-900);
  line-height: 1.1;
}

.metrics span {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 5px;
}

/* ====== STACK ITEMS ====== */
.stack-list { display: grid; gap: var(--space-2); }

.stack-item {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.stack-item p { margin: 6px 0 0; font-size: var(--text-sm); color: var(--neutral-600); }
.stack-item .muted { display: block; font-size: var(--text-xs); color: var(--neutral-500); font-family: var(--font-data); margin-top: 4px; }

/* ====== GRID LAYOUTS ====== */
.grid.two   { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--space-4); }
.grid.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }

.grid article, .decision-list article {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.signal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.signal-grid article {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.signal-grid article > div { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.signal-grid p { margin: 0; font-size: var(--text-sm); color: var(--neutral-700); }

.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.detail-grid article {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.agent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.agent-grid article {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.agent-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.roadmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.roadmap article {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.roadmap strong {
  display: block;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--neutral-800);
  margin-bottom: var(--space-3);
}

.decision-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

/* ====== DEFINITION LIST ====== */
dl {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 6px var(--space-3);
  margin: var(--space-3) 0;
}

dt {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 2px;
}

dd { margin: 0; font-size: var(--text-sm); color: var(--neutral-700); line-height: 1.5; }

/* ====== INGEST LAYOUT ====== */
.ingest-hint {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}
.ingest-hint-setup {
  background: var(--signal-blue-bg, #eff6ff);
  border: 1px solid var(--signal-blue-border, #bfdbfe);
  color: var(--signal-blue-text, #1e40af);
}
.ingest-hint strong { font-weight: var(--weight-semibold); }
.ingest-hint em { font-style: normal; font-weight: var(--weight-semibold); }

.source-pre {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  color: var(--neutral-600);
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.ingest-shell { max-width: 1100px; }
.ingest-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
  gap: var(--space-6);
  align-items: start;
}

.upload-zone, .paste-zone {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.upload-label {
  min-height: 200px;
  border: 1px dashed var(--neutral-300);
  border-radius: var(--radius-md);
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6);
  text-align: center;
  cursor: pointer;
  font-size: var(--text-base);
  color: var(--neutral-700);
  font-weight: var(--weight-regular);
  text-transform: none;
  letter-spacing: 0;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.upload-label:hover { border-color: var(--accent-500); background: var(--accent-100); }
.upload-label strong { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--neutral-800); }
.upload-label span { font-size: var(--text-sm); color: var(--neutral-500); line-height: 1.5; }

#ingest-file { display: none; }

/* input-card label style override */
.input-card label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.input-card {
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  background: var(--neutral-50);
  padding: var(--space-4);
  margin-top: var(--space-3);
}

/* ====== ASK ROW ====== */
.ask-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: start;
}

/* ====== ANSWER BOX ====== */
.answer-box {
  margin-top: var(--space-4);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  background: var(--neutral-50);
  padding: var(--space-4);
}

.answer-box p {
  font-size: var(--text-base);
  color: var(--neutral-700);
  line-height: 1.6;
  margin-bottom: 0;
}

.answer-box h3 {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: var(--space-3) 0 var(--space-2);
}
.answer-box h3:first-child { margin-top: 0; }

/* ====== SOURCE LIST ====== */
.source-list { display: grid; gap: var(--space-3); }
.source-list article {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

/* ====== PAGER ====== */
.pager {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  font-size: var(--text-sm);
  font-family: var(--font-data);
  color: var(--neutral-500);
}

.pager-summary {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  font-family: var(--font-data);
  margin-top: 6px;
}

/* ====== ERROR + WARN STATES ====== */
.error {
  background: var(--signal-red-bg);
  border: 1px solid var(--signal-red-border);
  color: var(--signal-red-text);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  white-space: pre-wrap;
}

.program-edit-form {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.program-edit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.field-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-1);
}

.warn-text {
  background: var(--signal-amber-bg);
  border: 1px solid var(--signal-amber-border);
  color: var(--signal-amber-text);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin: var(--space-2) 0;
}

/* ====== EMPTY STATE ====== */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-8);
  text-align: center;
  gap: var(--space-2);
}

.empty strong { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--neutral-600); }
.empty span   { font-size: var(--text-sm); color: var(--neutral-400); }

/* ====== MISC PANEL VARIANTS ====== */
.action-panel { border-color: var(--neutral-200); background: #fff; }
.cfo-panel    { border-color: var(--signal-amber-border); background: #fff; }

/* ====== LOADING SKELETON ====== */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.skeleton {
  background: var(--neutral-200);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* ====== UTILITY ====== */
.big  { font-size: var(--text-md); line-height: 1.55; color: var(--neutral-700); }
.hint { font-size: var(--text-xs); color: var(--neutral-400); margin: 0; }
.analysis-form { max-width: 900px; }
.run-preview { margin: var(--space-2) 0 0; color: var(--neutral-500); font-size: var(--text-xs); line-height: 1.4; }
.signal-section { margin-top: var(--space-4); }

/* ====== FIRST-USE ONBOARDING ====== */
.onboard-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 72vh;
  padding: var(--space-16) 0 var(--space-12);
}

.onboard-hero {
  text-align: center;
  margin-bottom: var(--space-12);
}

.onboard-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-500);
  margin-bottom: var(--space-3);
}

.onboard-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-3);
  line-height: 1.1;
}

.onboard-sub {
  font-size: var(--text-md);
  color: var(--neutral-500);
  margin: 0;
  max-width: 480px;
}

.onboard-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  width: 100%;
  max-width: 840px;
}

.onboard-step {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.onboard-step-active {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 1px var(--accent-500), 0 8px 32px rgba(99,102,241,0.09);
}

.onboard-step-dim { opacity: 0.52; }
.onboard-step-done { opacity: 0.7; border-color: var(--signal-green-border); background: var(--signal-green-bg); }
.onboard-step-done .onboard-step-num { color: var(--signal-green-dot); }

.onboard-step-num {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--neutral-400);
  letter-spacing: 0.08em;
}

.onboard-step-active .onboard-step-num { color: var(--accent-500); }

.onboard-step-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--neutral-900);
  margin: 0;
}

.onboard-step-desc {
  font-size: var(--text-sm);
  color: var(--neutral-500);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.onboard-step-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.onboard-step-actions button { width: 100%; justify-content: center; }

.onboard-link {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--neutral-600);
  text-decoration: none;
  padding: 6px 0;
  cursor: pointer;
}

.onboard-link:hover { color: var(--accent-600); }

.onboard-link.secondary-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  background: var(--neutral-100);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: background var(--transition-fast);
}

.onboard-link.secondary-link:hover { background: var(--neutral-200); color: var(--neutral-700); }

.first-use-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 60vh;
  max-width: 480px;
  gap: var(--space-4);
}

.first-use-page-num {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--accent-500);
  letter-spacing: 0.08em;
}

.first-use-page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--neutral-900);
  letter-spacing: -0.02em;
  margin: 0;
}

.first-use-page-body {
  font-size: var(--text-md);
  color: var(--neutral-500);
  line-height: 1.6;
  margin: 0;
}

.onboard-step-foot {
  font-size: var(--text-xs);
  font-family: var(--font-data);
  color: var(--neutral-400);
  letter-spacing: 0.01em;
  margin-top: var(--space-1);
}

/* ====== CAPABILITY HEALTH HEAT MAP ====== */
.cap-card {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-left: 3px solid var(--neutral-300);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  line-height: normal;
  font-family: var(--font-ui);
  height: auto;
  white-space: normal;
  word-break: break-word;
}

.cap-card.health-red    { background: var(--signal-red-bg);   border-color: var(--signal-red-border);   border-left-color: var(--signal-red-dot); }
.cap-card.health-amber  { background: var(--signal-amber-bg); border-color: var(--signal-amber-border); border-left-color: var(--signal-amber-dot); }
.cap-card.health-green  { background: var(--signal-green-bg); border-color: var(--signal-green-border); border-left-color: var(--signal-green-dot); }
.cap-card.health-uncovered { background: var(--neutral-50); border-color: var(--neutral-200); border-left-color: var(--neutral-300); }

.cap-card.health-red:hover   { background: #FEE2E2; }
.cap-card.health-amber:hover { background: #FEF3C7; }
.cap-card.health-green:hover { background: #DCFCE7; }
.cap-card.health-uncovered:hover { background: var(--neutral-100); }
.cap-card:not([class*="health-"]):hover { background: var(--neutral-50); }

.cap-card.cap-card-active { background: var(--accent-100) !important; border-color: var(--accent-500) !important; border-left-color: var(--accent-600) !important; }

.cap-filter-bar {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.feed-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--neutral-200);
  background: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--neutral-600);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-ui);
}
.feed-filter-btn:hover { border-color: var(--neutral-400); color: var(--neutral-800); }
.feed-filter-btn.active { background: var(--neutral-900); border-color: var(--neutral-900); color: #fff; }

/* ── Hamburger button (hidden on desktop) ── */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Nav topbar (brand + hamburger row on mobile) ── */
.nav-topbar {
  display: contents; /* invisible wrapper on desktop */
}

/* ====== RESPONSIVE ====== */
@media (max-width: 1024px) {
  .shell { grid-template-columns: 1fr; }

  /* Nav becomes a sticky top bar */
  .side-nav {
    position: sticky;
    top: 0;
    z-index: 200;
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    overflow: visible;
  }

  /* Topbar row: brand left, hamburger right */
  .nav-topbar {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .hamburger-btn { display: flex; align-items: center; }

  .brand {
    padding: 0;
    border-bottom: none;
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
  }

  /* Nav links hidden by default on mobile */
  .nav-links {
    display: none;
    flex-direction: column;
    padding: var(--space-2) var(--space-3) var(--space-4);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    gap: 2px;
  }

  /* Show nav links when menu is open */
  .mobile-menu-open .nav-links {
    display: flex;
  }

  .nav-section-label {
    margin-top: var(--space-3);
    padding-left: var(--space-3);
  }

  .side-nav a {
    border-left: none;
    border-radius: var(--radius-sm);
    border-bottom: none;
    padding: var(--space-2) var(--space-3);
    margin: 0;
    height: auto;
  }
  .side-nav a.active {
    background: rgba(255,255,255,0.08);
    border-left: 3px solid var(--accent-500);
    border-bottom: none;
  }

  .side-nav-footer { display: none; }

  .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ingest-grid,
  .grid.two, .grid.three,
  .agent-grid, .roadmap,
  .signal-grid, .detail-grid, .decision-list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .app { padding: var(--space-4); }
  .page-header { flex-direction: column; gap: var(--space-3); }
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-cell { border-right: none; border-bottom: 1px solid var(--neutral-200); }
  .section-head { display: block; }
  .pager { justify-content: space-between; }
}

/* ====== HORIZON (2-Week Projection) ====== */
.horizon-strip {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 2px;
  background: var(--neutral-200);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: 2px;
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.horizon-day {
  background: #fff;
  border-radius: 2px;
  padding: var(--space-2) var(--space-1);
  text-align: center;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.horizon-day.today { background: var(--accent-100); }

.horizon-day-label {
  font-size: 9px;
  font-weight: var(--weight-semibold);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
  line-height: 1;
}

.horizon-day-num {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--neutral-800);
  font-family: var(--font-data);
  margin-bottom: var(--space-1);
  line-height: 1;
}

.horizon-day.today .horizon-day-num { color: var(--accent-600); }

.horizon-day-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
  margin-top: auto;
}

.horizon-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.horizon-dot.red   { background: var(--signal-red-dot); }
.horizon-dot.amber { background: var(--signal-amber-dot); }
.horizon-dot.blue  { background: var(--signal-blue-dot); }
.horizon-dot.grey  { background: var(--neutral-400); }

.horizon-slider-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.horizon-slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--neutral-200);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.horizon-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-600);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--accent-500);
}
.horizon-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-600);
  cursor: pointer;
  border: 2px solid #fff;
}

.horizon-day-group-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--neutral-200);
}
.horizon-day-group-label.overdue { color: var(--signal-red-text); }

@media (max-width: 640px) {
  .horizon-day-label { font-size: 8px; }
  .horizon-day-num   { font-size: var(--text-xs); }
  .horizon-day       { min-height: 60px; padding: var(--space-1); }
}

/* ============================================================
   The Compass — Components
   ============================================================ */

/* ── Onboarding ────────────────────────────────────────────── */

.compass-onboarding-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: var(--space-6);
  align-items: start;
}

.compass-form-panel h3,
.compass-agent-panel h3 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--neutral-800);
  margin: 0 0 var(--space-4);
}

.field-group {
  margin-bottom: var(--space-4);
}

.field-group label.field-label { display: block; margin-bottom: var(--space-1); }

.field-optional {
  font-weight: var(--weight-normal);
  color: var(--neutral-400);
  font-size: var(--text-xs);
}

.compass-agent-panel {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  min-height: 320px;
}

.compass-agent-panel-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--neutral-200);
}

.compass-agent-panel-header h3 { margin: 0; }

.pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-500);
  animation: pulse-anim 1s ease-in-out infinite;
}
@keyframes pulse-anim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}

.agent-log {
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.agent-log-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.agent-dot {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: var(--weight-semibold);
  margin-top: 1px;
}
.agent-dot-working { background: var(--neutral-200); color: var(--neutral-600); }
.agent-dot-find    { background: var(--signal-blue-bg); color: var(--signal-blue-text); }
.agent-dot-done    { background: var(--signal-green-bg); color: var(--signal-green-text); }
.agent-dot-error   { background: var(--signal-red-bg); color: var(--signal-red-text); }

.agent-log-name {
  font-weight: var(--weight-semibold);
  color: var(--neutral-800);
  margin-right: var(--space-1);
}

.agent-log-msg { color: var(--neutral-600); }
.agent-log-complete .agent-log-msg { color: var(--signal-green-text); }
.agent-log-error    .agent-log-msg { color: var(--signal-red-text); }
.agent-log-finding  .agent-log-msg { color: var(--signal-blue-text); }

.compass-ready-banner {
  padding: var(--space-3) var(--space-4);
  background: var(--signal-green-bg);
  border: 1px solid var(--signal-green-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--signal-green-text);
  margin-bottom: var(--space-5);
}

/* ── Onboarding tabs ───────────────────────────────────────── */
.onboarding-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--neutral-200);
  margin-bottom: var(--space-5);
}
.onboarding-tab {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--neutral-500);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.onboarding-tab:hover { color: var(--neutral-700); }
.onboarding-tab.active {
  color: var(--accent-600);
  border-bottom-color: var(--accent-500);
}

/* ── Upload drop zone ──────────────────────────────────────── */
.upload-drop-zone {
  border: 2px dashed var(--neutral-300);
  border-radius: var(--radius-md);
  background: var(--neutral-50);
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}
.upload-drop-zone:hover,
.upload-drop-zone.drag-over {
  border-color: var(--accent-400);
  background: rgba(124,58,237,0.04);
}
.upload-drop-zone.uploading {
  border-color: var(--accent-300);
  background: rgba(124,58,237,0.03);
  cursor: default;
}
.upload-drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  text-align: center;
}
.upload-drop-icon {
  font-size: 28px;
  color: var(--neutral-400);
  line-height: 1;
}
.upload-drop-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--neutral-600);
}
.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent-500);
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.upload-error {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--signal-red-text);
}

.spinner-inline {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── BCM Map ──────────────────────────────────────────────── */

.bcm-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--neutral-200);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.filter-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: var(--space-1);
}

.filter-btn {
  padding: 3px 10px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--neutral-600);
  background: transparent;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.1s;
}
.filter-btn:hover  { border-color: var(--accent-500); color: var(--accent-600); }
.filter-btn.active { background: var(--accent-600); color: #fff; border-color: var(--accent-600); }

.bcm-section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--neutral-200);
}
.bcm-section-label-foundational { color: var(--signal-blue-text); }

.bcm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.bcm-domain {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.bcm-domain-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: #fff;
  border-bottom: 1px solid var(--neutral-200);
  font-size: var(--text-sm);
}

.bcm-domain-type-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bcm-domain-type-dot.bcm-domain-type-business      { background: var(--accent-500); }
.bcm-domain-type-dot.bcm-domain-type-foundational  { background: var(--signal-blue-dot); }

.bcm-caps-list {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bcm-cap {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  cursor: pointer;
  transition: border-color 0.1s;
}
.bcm-cap:hover           { border-color: var(--accent-500); }
.bcm-cap-selected        { border-color: var(--accent-600); box-shadow: 0 0 0 2px rgba(99,102,241,0.12); }
.bcm-cap-class-transformation   { border-left: 3px solid var(--accent-500); }
.bcm-cap-class-growth           { border-left: 3px solid var(--signal-green-dot); }
.bcm-cap-class-margin-protection { border-left: 3px solid var(--neutral-300); }

.bcm-cap-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.bcm-cap-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--neutral-800);
  line-height: 1.3;
}

/* Maturity bar */
.maturity-bar-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.maturity-bar-track {
  flex: 1;
  height: 6px;
  background: var(--neutral-100);
  border-radius: 3px;
  position: relative;
  overflow: visible;
}

.maturity-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.maturity-bar.maturity-high { background: var(--signal-green-dot); }
.maturity-bar.maturity-mid  { background: var(--signal-amber-dot); }
.maturity-bar.maturity-low  { background: var(--signal-red-dot); }
.maturity-bar.maturity-unset {
  width: 100%;
  background: repeating-linear-gradient(90deg, var(--neutral-200) 0, var(--neutral-200) 4px, transparent 4px, transparent 8px);
}

.maturity-target-marker {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 10px;
  background: var(--neutral-400);
  border-radius: 1px;
  transform: translateX(-50%);
}

.maturity-label {
  font-size: var(--text-xs);
  font-family: var(--font-data);
  color: var(--neutral-500);
  min-width: 24px;
  text-align: right;
}

.bcm-cap-detail {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--neutral-100);
}

.bcm-maturity-editor {
  margin-top: var(--space-2);
}

input[type="range"].maturity-range {
  accent-color: var(--accent-600);
  height: 4px;
}

.maturity-range-val {
  font-size: var(--text-xs);
  font-family: var(--font-data);
  color: var(--neutral-600);
  min-width: 24px;
  text-align: right;
}

@media (max-width: 900px) {
  .compass-onboarding-grid { grid-template-columns: 1fr; }
  .bcm-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .bcm-grid { grid-template-columns: 1fr; }
}

/* ── Org ownership ───────────────────────────────────────── */

.org-ownership-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.org-person-card {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.org-person-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.org-person-initials {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent-100);
  color: var(--accent-700);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.org-person-name  { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--neutral-800); }
.org-person-title { font-size: var(--text-xs); }

.org-cap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.org-cap-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: var(--weight-medium);
  border: 1px solid;
}
.org-cap-tag-business     { background: var(--accent-100); color: var(--accent-700); border-color: #c7d2fe; }
.org-cap-tag-foundational { background: var(--signal-blue-bg); color: var(--signal-blue-text); border-color: var(--signal-blue-border); }
.org-cap-tag-more         { background: var(--neutral-100); color: var(--neutral-500); border-color: var(--neutral-200); }

/* ── Mandate board ───────────────────────────────────────── */

.mandate-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.mandate-card {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.mandate-card-head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.mandate-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--neutral-800);
  margin: var(--space-2) 0 0;
  width: 100%;
  line-height: 1.35;
}

.mandate-caps {
  margin-top: var(--space-2);
}
.mandate-caps-label {
  display: block;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--neutral-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

/* ── Portfolio table ─────────────────────────────────────── */

.row-orphaned td { opacity: 0.65; }

/* ── BCM view toggle ─────────────────────────────────────── */
.view-toggle {
  display: flex;
  background: var(--neutral-100);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}
.view-toggle-btn {
  padding: 4px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border: none;
  background: none;
  border-radius: calc(var(--radius-sm) - 1px);
  cursor: pointer;
  color: var(--neutral-500);
  transition: color 0.12s;
}
.view-toggle-btn:hover { color: var(--neutral-700); }
.view-toggle-btn.active {
  background: #fff;
  color: var(--neutral-800);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ── Domain cards grid ───────────────────────────────────── */
.domain-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.domain-card {
  background: #fff;
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.domain-card:hover {
  border-color: var(--accent-300);
  box-shadow: 0 2px 10px rgba(124,58,237,0.08);
  transform: translateY(-1px);
}
.domain-card-selected {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12), 0 4px 16px rgba(124,58,237,0.1);
}
.domain-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.domain-card-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--neutral-800);
  line-height: 1.3;
  flex: 1;
}
.domain-card-meta {
  display: flex;
  gap: var(--space-3);
  font-size: 11px;
  color: var(--neutral-500);
  margin-top: var(--space-2);
}
.domain-card-pills {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.domain-pill {
  font-size: 10px;
  font-weight: var(--weight-medium);
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.01em;
}
.pill-transformation {
  background: rgba(124,58,237,0.08);
  color: var(--accent-600);
}
.pill-risk {
  background: var(--signal-red-bg);
  color: var(--signal-red-text);
}

/* ── Heat strip ──────────────────────────────────────────── */
.heat-strip {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--neutral-200);
}
.heat-seg { height: 100%; }

/* ── Common modal ────────────────────────────────────────── */
.app-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,8,6,0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: backdrop-in 0.18s ease-out;
}
.app-modal {
  background: #fff;
  border-radius: 12px;
  width: 640px;
  max-width: 100%;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.26), 0 4px 16px rgba(0,0,0,0.1);
  animation: modal-in 0.2s cubic-bezier(0.22,1,0.36,1);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.app-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--neutral-200);
  flex-shrink: 0;
}
.app-modal-title {
  font-size: 16px;
  font-weight: var(--weight-semibold);
  color: var(--neutral-900);
  margin: 0 0 3px;
}
.app-modal-sub {
  font-size: var(--text-xs);
  color: var(--neutral-500);
}
.app-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px 24px;
}
.app-modal-body::-webkit-scrollbar { width: 4px; }
.app-modal-body::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 2px; }
.app-modal-foot {
  padding: 14px 28px 18px;
  border-top: 1px solid var(--neutral-200);
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  flex-shrink: 0;
}

/* ── Common right drawer ─────────────────────────────────── */
.app-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,8,6,0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 400;
  display: flex;
  justify-content: flex-end;
  animation: backdrop-in 0.2s ease-out;
}
.app-drawer {
  width: 480px;
  max-width: 94vw;
  height: 100%;
  background: #fff;
  border-left: 1px solid var(--neutral-200);
  box-shadow: -16px 0 56px rgba(0,0,0,0.16), -2px 0 8px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  animation: drawer-in 0.22s cubic-bezier(0.22,1,0.36,1);
  position: relative;
  z-index: 401;
}
.app-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 28px 28px 22px;
  border-bottom: 1px solid var(--neutral-200);
  background: #fff;
  flex-shrink: 0;
}
.app-drawer-title {
  font-size: 17px;
  font-weight: var(--weight-semibold);
  color: var(--neutral-900);
  margin: 0 0 3px;
}
.app-drawer-sub {
  font-size: var(--text-xs);
  color: var(--neutral-500);
}
.app-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 20px;
  background: #f9f8f6;
}
.app-drawer-body::-webkit-scrollbar { width: 4px; }
.app-drawer-body::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 2px; }
.app-drawer-foot {
  padding: 16px 28px 20px;
  border-top: 1px solid var(--neutral-200);
  display: flex;
  gap: var(--space-2);
  background: #fff;
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .app-drawer { width: 100%; max-width: 100%; }
  .app-drawer-head, .app-drawer-foot { padding-left: 20px; padding-right: 20px; }
  .app-drawer-body { padding: 16px 20px 20px; }
}

/* ── Suggestion cards (mandate modal) ────────────────────── */
.suggest-card {
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.suggest-card-head {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.suggest-card-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--neutral-900);
  margin: 4px 0 4px;
  line-height: 1.35;
}
.suggest-card-rationale {
  font-size: var(--text-xs);
  color: var(--neutral-600);
  margin: 0 0 10px;
  line-height: 1.5;
}
.suggest-card-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.suggest-card-cap {
  font-size: 10px;
  background: var(--neutral-100);
  color: var(--neutral-600);
  border-radius: 4px;
  padding: 2px 7px;
}
.suggest-card-foot {
  display: flex;
  justify-content: flex-end;
}
.suggest-loading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  color: var(--neutral-500);
  font-size: var(--text-sm);
}

/* ── Mandate form drawer ─────────────────────────────────── */
.mandate-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.cap-search-list {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  background: #fff;
  margin-top: var(--space-2);
}
.cap-search-list::-webkit-scrollbar { width: 4px; }
.cap-search-list::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 2px; }
.cap-check-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  border-bottom: 1px solid var(--neutral-100);
  cursor: pointer;
  font-size: var(--text-xs);
}
.cap-check-item:last-child { border-bottom: none; }
.cap-check-item:hover { background: var(--neutral-50); }
.cap-check-item.cap-selected { background: var(--accent-100); }
.cap-check-item input[type="checkbox"] { flex-shrink: 0; width: 14px; height: 14px; margin: 0; -webkit-appearance: checkbox; appearance: checkbox; accent-color: var(--accent-500); cursor: pointer; }
.cap-check-domain {
  color: var(--neutral-400);
  font-size: 10px;
  margin-left: auto;
  flex-shrink: 0;
}
.mandate-check-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: var(--space-1);
}
.mandate-check-list-compact { max-height: 160px; }
.mandate-check-list::-webkit-scrollbar { width: 4px; }
.mandate-check-list::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 2px; }
.mandate-check-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-xs);
  transition: background 0.1s;
}
.mandate-check-item:hover { background: var(--neutral-50); }
.mandate-check-item.mandate-check-selected { background: var(--accent-50, #f0f4ff); }
.mandate-check-item input[type="checkbox"] {
  flex-shrink: 0;
  width: 14px; height: 14px;
  margin: 0;
  -webkit-appearance: checkbox;
  appearance: checkbox;
  accent-color: var(--accent-500);
  cursor: pointer;
  border-radius: 3px;
}
.mandate-check-title {
  flex: 1;
  color: var(--neutral-800);
  line-height: 1.3;
}

.mandate-card-delete {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--neutral-400);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.1s;
}
.mandate-card-delete:hover { color: var(--signal-red-text); }

/* ── BCM domain drawer ───────────────────────────────────── */
.bcm-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,8,6,0.52);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 200;
  display: flex;
  justify-content: flex-end;
  animation: backdrop-in 0.2s ease-out;
}
@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.bcm-drawer {
  width: 560px;
  max-width: 92vw;
  height: 100%;
  background: #ffffff;
  border-left: 1px solid var(--neutral-200);
  box-shadow: -16px 0 56px rgba(0,0,0,0.18), -2px 0 8px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  animation: drawer-in 0.22s cubic-bezier(0.22,1,0.36,1);
  position: relative;
  z-index: 201;
}
@keyframes drawer-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.bcm-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 28px 32px 24px;
  border-bottom: 1px solid var(--neutral-200);
  background: #ffffff;
  flex-shrink: 0;
}
.bcm-drawer-head-title {
  font-size: 18px;
  font-weight: var(--weight-semibold);
  color: var(--neutral-900);
  margin: 0 0 4px;
  line-height: 1.25;
}
.bcm-drawer-head-sub {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.bcm-drawer-close-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--neutral-200);
  background: transparent;
  color: var(--neutral-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: background 0.1s, color 0.1s;
}
.bcm-drawer-close-btn:hover { background: var(--neutral-100); color: var(--neutral-800); }
.bcm-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 40px;
  background: #f9f8f6;
}
.bcm-drawer-body::-webkit-scrollbar { width: 4px; }
.bcm-drawer-body::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 2px; }

/* ── Capability cards inside drawer ──────────────────────── */
.bcm-drawer .bcm-cap {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-top: 3px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 12px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.bcm-drawer .bcm-cap-class-transformation  { border-top-color: var(--accent-500); }
.bcm-drawer .bcm-cap-class-growth          { border-top-color: var(--signal-green-dot); }
.bcm-drawer .bcm-cap-class-margin-protection { border-top-color: var(--neutral-400); }
.bcm-drawer .bcm-cap:hover {
  border-color: var(--accent-300);
  border-top-color: var(--accent-400);
  box-shadow: 0 2px 8px rgba(124,58,237,0.08);
}
.bcm-drawer .bcm-cap.bcm-cap-selected {
  border-color: var(--accent-400);
  border-top-color: var(--accent-500);
  box-shadow: 0 2px 12px rgba(124,58,237,0.12);
}
.bcm-drawer .bcm-cap-detail {
  margin-top: 16px;
  padding-top: 16px;
  background: transparent;
  border-top: 1px solid var(--neutral-100);
}
.bcm-drawer .bcm-cap-head {
  margin-bottom: var(--space-2);
}
.bcm-drawer .bcm-cap-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--neutral-800);
}
.bcm-drawer .maturity-bar-wrap {
  margin-top: var(--space-2);
}
.domain-drawer-stats {
  display: flex;
  gap: var(--space-5);
  font-size: 11px;
  color: var(--neutral-500);
  margin-top: var(--space-3);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--neutral-200);
}

/* ── BCM full table ──────────────────────────────────────── */
.bcm-full-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.bcm-full-table thead th {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--neutral-200);
  white-space: nowrap;
  background: var(--neutral-50);
  text-align: left;
}
.bcm-th-sort {
  cursor: pointer;
  user-select: none;
}
.bcm-th-sort:hover { color: var(--neutral-700); }
.bcm-th-sort.sort-active { color: var(--accent-600); }
.sort-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
}
.bcm-table-row {
  border-bottom: 1px solid var(--neutral-100);
  cursor: pointer;
  transition: background 0.1s;
}
.bcm-table-row:hover { background: var(--neutral-50); }
.bcm-table-row td {
  padding: var(--space-2) var(--space-3);
  vertical-align: middle;
}
.bcm-row-selected {
  background: rgba(124,58,237,0.04) !important;
}
.bcm-row-selected td { border-bottom: none; }
.bcm-detail-row td {
  background: rgba(124,58,237,0.02);
  border-bottom: 2px solid var(--accent-100, var(--neutral-200));
}
.bcm-td-domain {
  font-size: 11px;
  color: var(--neutral-500);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bcm-td-owner {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .domain-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .bcm-drawer { width: 480px; }
  .bcm-drawer-head { padding: 24px 24px 20px; }
  .bcm-drawer-body { padding: 20px 24px 36px; }
}
@media (max-width: 700px) {
  .domain-cards-grid { grid-template-columns: 1fr; }
  .bcm-drawer { width: 100%; max-width: 100%; }
  .bcm-drawer-head { padding: 20px 20px 16px; }
  .bcm-drawer-body { padding: 16px 20px 32px; }
}

/* ── Transformation Timeline ─────────────────────────────── */
.tl-company-badge {
  font-size: var(--text-xs);
  background: var(--accent-100);
  color: var(--accent-600);
  border-radius: var(--radius-md);
  padding: 4px 10px;
  font-weight: var(--weight-semibold);
  align-self: flex-start;
}
.tl-slider-section {
  margin: var(--space-5) 0 var(--space-4);
}
.tl-waypoints {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  padding: 0 8px;
}
.tl-waypoint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s;
}
.tl-waypoint:hover { opacity: 0.75; }
.tl-waypoint-active { opacity: 1; }
.tl-waypoint-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--neutral-300);
  border: 2px solid var(--neutral-300);
  transition: background 0.2s, border-color 0.2s;
}
.tl-waypoint-active .tl-waypoint-dot {
  background: var(--accent-500);
  border-color: var(--accent-500);
}
.tl-waypoint-label {
  font-size: 10px;
  color: var(--neutral-500);
  white-space: nowrap;
  font-family: var(--font-data);
}
.tl-waypoint-active .tl-waypoint-label { color: var(--accent-600); font-weight: var(--weight-semibold); }
.tl-slider-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.tl-slider-edge {
  font-size: 10px;
  color: var(--neutral-400);
  font-family: var(--font-data);
  white-space: nowrap;
}
.tl-summary-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
.tl-summary-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.tl-summary-date {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--neutral-800);
}
.tl-summary-stats {
  display: flex;
  gap: var(--space-5);
  flex-shrink: 0;
}
.tl-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.tl-stat-val {
  font-size: 18px;
  font-weight: var(--weight-semibold);
  font-family: var(--font-data);
  color: var(--neutral-800);
  line-height: 1;
  transition: color 0.3s;
}
.tl-stat-label {
  font-size: 10px;
  color: var(--neutral-500);
  text-align: center;
}
.tl-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-5);
  align-items: start;
}
.tl-mandate-section {
  margin-bottom: var(--space-5);
}
.tl-mandate-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.tl-mandate-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.3s;
}
.tl-mandate-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--neutral-800);
  flex: 1;
}
.tl-caps-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tl-cap-row {
  display: grid;
  grid-template-columns: 200px 1fr 120px;
  align-items: center;
  gap: var(--space-3);
}
.tl-cap-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tl-cap-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--neutral-800);
}
.tl-cap-domain {
  font-size: 10px;
  color: var(--neutral-400);
}
.tl-unowned-badge {
  font-size: 10px;
  background: var(--signal-amber-bg);
  color: var(--signal-amber-text);
  border-radius: 3px;
  padding: 1px 5px;
  width: fit-content;
}
.tl-bar-track {
  height: 8px;
  background: var(--neutral-200);
  border-radius: 4px;
  overflow: hidden;
}
.tl-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s ease;
}
.tl-bar-fill.maturity-high  { background: var(--signal-green-dot); }
.tl-bar-fill.maturity-mid   { background: var(--signal-amber-dot); }
.tl-bar-fill.maturity-low   { background: var(--signal-red-dot); }
.tl-bar-fill.maturity-unset { background: var(--neutral-300); }
.tl-bar-label {
  font-size: 10px;
  color: var(--neutral-500);
  font-family: var(--font-data);
  white-space: nowrap;
  transition: color 0.3s;
}
.tl-programs-col {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  position: sticky;
  top: var(--space-4);
}
.tl-programs-head {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--neutral-600);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--neutral-100);
}
.tl-program-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--neutral-100);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.tl-program-item:last-child { border-bottom: none; }
.tl-prog-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tl-prog-dot-active   { background: var(--signal-green-dot); }
.tl-prog-dot-planning { background: var(--neutral-400); }
.tl-prog-dot-at-risk  { background: var(--signal-red-dot); }
.tl-prog-dot-complete { background: var(--signal-green-dot); opacity: 0.5; }
.tl-prog-name {
  font-size: var(--text-xs);
  color: var(--neutral-700);
  flex: 1;
  line-height: 1.35;
}
@media (max-width: 900px) {
  .tl-body { grid-template-columns: 1fr; }
  .tl-cap-row { grid-template-columns: 160px 1fr 100px; }
  .tl-programs-col { position: static; }
}
@media (max-width: 600px) {
  .tl-cap-row { grid-template-columns: 1fr; gap: var(--space-1); }
  .tl-summary-bar { flex-direction: column; }
  .tl-summary-stats { justify-content: flex-start; }
}

/* ── Insight boxes ───────────────────────────────────────── */

.insight-section {
  margin-bottom: var(--space-6);
}

.insight-section-head {
  margin-bottom: var(--space-3);
}

.insight-section-head h3 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--neutral-800);
  margin: 0 0 var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.insight-section-icon {
  font-size: 10px;
  color: var(--neutral-400);
}
.insight-icon-blocker  { color: var(--signal-red-text); }
.insight-icon-gap      { color: var(--signal-amber-text); }
.insight-icon-maturity { color: var(--signal-amber-text); }
.insight-icon-sequence { color: var(--signal-amber-text); }

.insight-section-head p { font-size: var(--text-sm); color: var(--neutral-500); margin: 0; }

.insight-count {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--neutral-100);
  color: var(--neutral-600);
}
.insight-count-red   { background: var(--signal-red-bg); color: var(--signal-red-text); }
.insight-count-amber { background: var(--signal-amber-bg); color: var(--signal-amber-text); }

.insight-box {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--neutral-200);
  background: var(--neutral-50);
  margin-bottom: var(--space-2);
}
.insight-box-red     { background: var(--signal-red-bg);   border-color: var(--signal-red-border);   }
.insight-box-warn    { background: var(--signal-amber-bg); border-color: var(--signal-amber-border); }
.insight-box-neutral { background: var(--neutral-50); }
.insight-box-green   { background: var(--signal-green-bg); border-color: var(--signal-green-border); }

.insight-box-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.insight-meta {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  margin-top: var(--space-1);
}

.maturity-mini {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 1px 5px;
  border-radius: 3px;
}
.maturity-mini.maturity-high { background: var(--signal-green-bg); color: var(--signal-green-text); }
.maturity-mini.maturity-mid  { background: var(--signal-amber-bg); color: var(--signal-amber-text); }
.maturity-mini.maturity-low  { background: var(--signal-red-bg);   color: var(--signal-red-text);   }

/* ── Investment drift bars ───────────────────────────────── */

.investment-drift-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
}

.drift-bar-row {
  display: grid;
  grid-template-columns: 160px 1fr 80px;
  align-items: center;
  gap: var(--space-3);
}

.drift-bar-label {
  font-size: var(--text-sm);
  color: var(--neutral-700);
}

.drift-bar-track {
  height: 8px;
  background: var(--neutral-200);
  border-radius: 4px;
  overflow: hidden;
}

.drift-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
  min-width: 2px;
}

.drift-bar-pct {
  font-size: var(--text-xs);
  font-family: var(--font-data);
  color: var(--neutral-700);
  text-align: right;
}

/* ── Compass Command Center ──────────────────────────────── */

.compass-hero {
  max-width: 560px;
  margin: 80px auto;
  text-align: center;
}
.compass-hero-icon   { font-size: 48px; color: var(--accent-500); margin-bottom: var(--space-4); }
.compass-hero-title  { font-size: 32px; font-weight: var(--weight-semibold); color: var(--neutral-900); margin: 0 0 var(--space-2); letter-spacing: -0.02em; }
.compass-hero-sub    { font-size: var(--text-sm); color: var(--neutral-500); margin: 0 0 var(--space-4); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--weight-semibold); }
.compass-hero-desc   { font-size: var(--text-base); color: var(--neutral-600); line-height: 1.6; margin: 0; }

/* Point. Build. Prove. */
.pbp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--neutral-200);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-5);
}
.pbp-block {
  background: #fff;
  padding: var(--space-5);
  text-align: center;
}
.pbp-label {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--neutral-400);
  margin-bottom: var(--space-2);
}
.pbp-point .pbp-label,
.pbp-build .pbp-label,
.pbp-prove .pbp-label { color: var(--neutral-500); }
.pbp-stat {
  font-size: 40px;
  font-weight: var(--weight-semibold);
  font-family: var(--font-data);
  color: var(--neutral-900);
  line-height: 1;
  margin-bottom: var(--space-1);
  letter-spacing: -0.03em;
}
.pbp-desc { font-size: var(--text-sm); color: var(--neutral-600); margin-bottom: var(--space-1); }
.pbp-sub  { font-size: var(--text-xs); color: var(--neutral-400); }

/* Readiness strip */
.compass-readiness-strip {
  display: flex;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-5);
}
.readiness-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: #fff;
  border-right: 1px solid var(--neutral-200);
  cursor: pointer;
  transition: background 0.1s;
  font-size: var(--text-sm);
}
.readiness-step:last-child { border-right: none; }
.readiness-step:hover { background: var(--neutral-50); }
.readiness-step.done  { background: var(--signal-green-bg); }

.readiness-check {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--neutral-300);
}
.readiness-step.done .readiness-check { color: var(--signal-green-text); }

.readiness-label {
  font-weight: var(--weight-semibold);
  color: var(--neutral-700);
}
.readiness-detail { font-size: var(--text-xs); }
.readiness-action { font-size: var(--text-xs); color: var(--accent-600); font-weight: var(--weight-medium); }

/* Command grid */
.compass-command-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.compass-command-card {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.compass-command-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.compass-command-card-head h3 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--neutral-800);
  margin: 0;
  flex: 1;
}

.compass-card-icon { font-size: 10px; }

.command-item {
  padding: var(--space-2) var(--space-3);
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}
.command-item-red  { border-left: 3px solid var(--signal-red-dot); }
.command-item-warn { border-left: 3px solid var(--signal-amber-dot); }

.command-item-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--neutral-800);
  margin-bottom: var(--space-1);
}

.command-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--space-1);
}

.command-item-decision {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--neutral-700);
  line-height: 1.4;
}
.command-item-decision-label {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--signal-amber-text);
  margin-right: 4px;
}
.command-item-resolve {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--neutral-500);
  line-height: 1.4;
}
.command-item-resolve-label {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--signal-green-dot);
  margin-right: 4px;
}
.command-item-cta {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--accent-600);
  text-decoration: none;
  cursor: pointer;
}
.command-item-cta:hover { text-decoration: underline; }

/* ── BCM Analysis Report ─────────────────────────────────────────────── */
.bcma-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-10) var(--space-4);
  gap: var(--space-4);
}
.bcma-loading-icon {
  font-size: 48px;
  color: var(--accent-400);
  animation: pulse-anim 1.6s ease-in-out infinite;
}
.bcma-loading-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--neutral-700);
}
.bcma-log { width: 100%; max-width: 480px; }

/* Hero */
.bcma-hero {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--neutral-100);
  margin-bottom: var(--space-5);
}
.bcma-score-ring {
  flex-shrink: 0;
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 6px solid var(--score-color, var(--neutral-300));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--score-color, var(--neutral-300)) 15%, transparent);
}
.bcma-score-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.bcma-score-num {
  font-size: 28px;
  font-weight: var(--weight-bold);
  color: var(--neutral-900);
  line-height: 1;
}
.bcma-score-label {
  font-size: 9px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--neutral-500);
}
.bcma-headline {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--neutral-700);
  line-height: 1.6;
}

/* Coverage grid */
.bcma-coverage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
@media (max-width: 900px) { .bcma-coverage-grid { grid-template-columns: 1fr 1fr; } }
.bcma-coverage-card {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-150);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.bcma-coverage-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}
.bcma-bar-wrap { display: flex; align-items: center; gap: var(--space-2); }
.bcma-bar-track {
  flex: 1;
  height: 6px;
  background: var(--neutral-200);
  border-radius: 3px;
  overflow: hidden;
}
.bcma-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.bcma-bar-label { font-size: var(--text-xs); color: var(--neutral-700); white-space: nowrap; }

/* Body grid */
.bcma-body-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.bcma-section-wide { grid-column: 1 / -1; }
.bcma-section {
  background: #fff;
  border: 1px solid var(--neutral-150);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.bcma-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.bcma-section-head h3 { margin: 0; font-size: var(--text-base); }
.bcma-section-icon { font-size: 14px; }

/* Risks */
.bcma-risk-card {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--neutral-200);
  background: var(--neutral-50);
  margin-bottom: var(--space-2);
}
.bcma-risk-card:last-child { margin-bottom: 0; }
.bcma-risk-critical { border-left-color: var(--signal-red-dot); background: color-mix(in srgb, var(--signal-red-dot) 5%, #fff); }
.bcma-risk-high     { border-left-color: var(--signal-amber-dot); background: color-mix(in srgb, var(--signal-amber-dot) 5%, #fff); }
.bcma-risk-medium   { border-left-color: var(--neutral-300); }
.bcma-risk-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.bcma-risk-detail { font-size: var(--text-xs); color: var(--neutral-600); margin: 0; line-height: 1.5; }

/* Recommendations */
.bcma-rec-card {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--neutral-100);
}
.bcma-rec-card:last-child { border-bottom: none; }
.bcma-rec-priority {
  flex-shrink: 0;
  width: 24px; height: 24px;
  background: var(--accent-500);
  color: #fff;
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.bcma-rec-body { flex: 1; }
.bcma-rec-action { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--neutral-900); margin-bottom: 2px; }
.bcma-rec-impact { font-size: var(--text-xs); line-height: 1.5; margin-bottom: var(--space-1); }
.bcma-rec-meta { display: flex; gap: var(--space-1); }

/* Dependencies */
.bcma-dep-list { display: flex; flex-direction: column; gap: var(--space-2); }
.bcma-dep-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr 2fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--neutral-50);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}
.bcma-dep-from { font-weight: var(--weight-medium); color: var(--neutral-800); }
.bcma-dep-to   { color: var(--neutral-700); }
.bcma-dep-note { color: var(--neutral-500); font-size: 11px; }
.bcma-dep-rel  { flex-shrink: 0; }

/* Tables */
.bcma-mandate-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.bcma-mandate-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--neutral-500);
  border-bottom: 1px solid var(--neutral-200);
}
.bcma-mandate-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--neutral-100);
  vertical-align: middle;
}
.bcma-mandate-table tr:last-child td { border-bottom: none; }

/* Unassessed list */
.bcma-unassessed-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 280px;
  overflow-y: auto;
}
.bcma-unassessed-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}
.bcma-unassessed-item:hover { background: var(--neutral-50); }
.bcma-unassessed-name { flex: 1; font-weight: var(--weight-medium); color: var(--neutral-800); }
.bcma-unassessed-domain { font-size: 11px; min-width: 120px; }

.compass-card-link {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--accent-600);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.compass-card-link:hover { text-decoration: underline; }

/* Stat cards */
.compass-stat-card {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  text-align: center;
}
.compass-stat-val   { display: block; font-size: 28px; font-weight: var(--weight-semibold); font-family: var(--font-data); color: var(--neutral-900); line-height: 1.1; }
.compass-stat-label { display: block; font-size: var(--text-xs); color: var(--neutral-500); margin-top: 4px; }

@media (max-width: 900px) {
  .pbp-grid             { grid-template-columns: 1fr; gap: 0; }
  .compass-command-grid { grid-template-columns: 1fr; }
  .compass-readiness-strip { flex-direction: column; }
  .readiness-step       { border-right: none; border-bottom: 1px solid var(--neutral-200); }
}

/* ── Executive Brief ──────────────────────────────────────── */

.brief-prompt-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
}
.brief-prompt-icon { font-size: 24px; color: var(--accent-500); flex-shrink: 0; margin-top: 2px; }
.brief-prompt-banner strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--neutral-900); margin-bottom: var(--space-1); }
.brief-prompt-banner p { font-size: var(--text-sm); color: var(--neutral-500); margin: 0; }
.brief-prompt-banner .primary { flex-shrink: 0; margin-left: auto; }

.brief-generating {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  color: var(--neutral-500);
  font-size: var(--text-sm);
}

/* Signal tone variants */
.exec-brief { border-radius: var(--radius); padding: var(--space-6); margin-bottom: var(--space-5); border: 1.5px solid; }
.exec-brief-red     { background: var(--signal-red-bg);     border-color: var(--signal-red-border); }
.exec-brief-amber   { background: var(--signal-amber-bg);   border-color: var(--signal-amber-border); }
.exec-brief-green   { background: var(--signal-green-bg);   border-color: var(--signal-green-border); }
.exec-brief-neutral { background: var(--neutral-50);        border-color: var(--neutral-200); }

.exec-brief-signal {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}
.exec-brief-red   .exec-brief-signal { color: var(--signal-red-text); }
.exec-brief-amber .exec-brief-signal { color: var(--signal-amber-text); }
.exec-brief-green .exec-brief-signal { color: var(--signal-green-text); }
.exec-brief-neutral .exec-brief-signal { color: var(--neutral-500); }
.signal-icon { font-size: 14px; }

.exec-headline {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--neutral-900);
  line-height: 1.35;
  margin: 0 0 var(--space-3);
}
.exec-situation {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  line-height: 1.6;
  margin: 0 0 var(--space-5);
}

.exec-actions-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-500);
  margin-bottom: var(--space-3);
}
.exec-actions { display: flex; flex-direction: column; gap: var(--space-3); }
.exec-action {
  display: flex;
  gap: var(--space-3);
  background: white;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}
.exec-action-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: var(--accent-500);
  color: white;
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.exec-action-body { flex: 1; min-width: 0; }
.exec-action-text { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--neutral-900); margin-bottom: var(--space-1); }
.exec-action-why  { font-size: var(--text-xs); color: var(--neutral-500); margin: 0 0 var(--space-2); line-height: 1.5; }

/* Detail toggle row */
.detail-toggle-row { margin: var(--space-4) 0 var(--space-2); }
.insight-detail-panel { border-top: 1px solid var(--neutral-200); padding-top: var(--space-5); }

/* Maturity status badges */
.maturity-status-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--weight-medium);
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: var(--space-1);
  vertical-align: middle;
}
.maturity-status-badge.claimed   { background: var(--signal-amber-bg); color: var(--signal-amber-text); border: 1px solid var(--signal-amber-border); }
.maturity-status-badge.evidenced { background: var(--signal-green-bg); color: var(--signal-green-text); border: 1px solid var(--signal-green-border); }

/* Add program form */
.add-program-form {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-6);
  margin-top: var(--space-5);
}
.add-program-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-5);
}
.add-program-fields { display: flex; flex-direction: column; gap: 0; }
.field-row { display: flex; gap: var(--space-3); align-items: flex-end; margin-bottom: var(--space-3); }
.field-row .field-group { margin: 0; }
.input-prefix-wrap { position: relative; }
.input-prefix { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--neutral-500); font-size: var(--text-sm); pointer-events: none; }

/* Inferred capabilities panel */
.infer-panel {
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  background: white;
  min-height: 80px;
  padding: var(--space-3);
}
.infer-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--neutral-500);
  font-size: var(--text-xs);
}
.infer-empty {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--neutral-400);
  font-size: var(--text-xs);
}
.infer-hint-icon { font-size: 16px; }
.infer-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-2); }
.infer-cap-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-100);
  color: var(--accent-700);
  border: 1px solid #c7d2fe;
  border-radius: 20px;
  font-size: var(--text-xs);
  padding: 2px 8px 2px 10px;
  font-weight: var(--weight-medium);
}
.infer-cap-remove {
  background: none;
  border: none;
  color: var(--accent-600);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 0 0 2px;
}
.infer-cap-remove:hover { color: var(--signal-red-text); }
.infer-add-row { margin-top: var(--space-1); }
.infer-add-select { font-size: var(--text-xs); width: 100%; }

.cap-checklist-wrap { display: flex; flex-direction: column; }
.cap-checklist {
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  background: white;
  overflow-y: auto;
  max-height: 260px;
  flex: 1;
}
.cap-checklist-group-label {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-400);
  padding: var(--space-2) var(--space-3) var(--space-1);
  background: var(--neutral-50);
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--neutral-100);
}
.cap-checklist-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px var(--space-3);
  font-size: var(--text-xs);
  cursor: pointer;
  border-bottom: 1px solid var(--neutral-100);
}
.cap-checklist-item:last-child { border-bottom: none; }
.cap-checklist-item:hover { background: var(--neutral-50); }
.cap-checklist-item input[type="checkbox"] { flex-shrink: 0; width: 14px; height: 14px; margin: 0; -webkit-appearance: checkbox; appearance: checkbox; accent-color: var(--accent-500); cursor: pointer; }

/* Inline edit / ghost buttons */
.ghost-btn {
  background: none;
  border: none;
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  color: var(--neutral-500);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.ghost-btn:hover { background: var(--neutral-100); color: var(--neutral-900); }
.inline-edit-form { padding: var(--space-3); background: var(--neutral-50); border-radius: var(--radius-sm); }
.row-editing { background: var(--neutral-50); }

/* Investment badges on command card */
.invest-total-badge {
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--accent-600);
  font-family: var(--font-data);
}
.invest-total-hero {
  font-size: 28px;
  font-weight: var(--weight-semibold);
  font-family: var(--font-data);
  color: var(--neutral-900);
  margin-bottom: var(--space-2);
}
.invest-total-hero span { font-size: var(--text-xs); color: var(--neutral-500); margin-left: var(--space-1); font-weight: normal; font-family: var(--font-body); }

/* Bulk import collapsed section */
.bulk-import-details { border-top: 1px solid var(--neutral-200); }
.bulk-import-summary {
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  color: var(--neutral-500);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.bulk-import-summary:hover { color: var(--neutral-900); }

.font-data { font-family: var(--font-data); }

@media (max-width: 900px) {
  .add-program-grid { grid-template-columns: 1fr; }
}

/* Add member row */
.add-member-row {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-5);
}

/* ── Nav section label ─────────────────────────────────────────────────────── */

.nav-section-label {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--neutral-400);
  padding: var(--space-4) var(--space-3) var(--space-1);
  margin-top: var(--space-2);
  border-top: 1px solid var(--neutral-100);
}

/* ── Signal Capture ────────────────────────────────────────────────────────── */

.signal-capture-panel {}

.signal-input-area {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.signal-input-controls {
  display: flex;
  gap: var(--space-2);
}
.signal-source-select {
  flex-shrink: 0;
}
.signal-title-input {
  flex: 1;
}

.signal-textarea {
  width: 100%;
  min-height: 160px;
  resize: vertical;
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--neutral-900);
  font-family: var(--font-sans);
  line-height: 1.6;
  box-sizing: border-box;
}
.signal-textarea:focus { outline: 2px solid var(--accent-500); border-color: transparent; }
.signal-textarea::placeholder { color: var(--neutral-400); }

.signal-input-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.signal-file-label { cursor: pointer; }

.signal-result {
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--space-5);
}

.signal-result-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--neutral-50);
  border-bottom: 1px solid var(--neutral-200);
}
.signal-result-icon { font-size: 18px; color: var(--accent-500); }
.signal-result-head strong { font-size: var(--text-sm); }

.signal-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.signal-card {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--neutral-100);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.signal-card:last-child { border-bottom: none; }

.signal-card-head { display: flex; gap: var(--space-2); align-items: center; }
.signal-card-text { font-size: var(--text-sm); color: var(--neutral-800); margin: 0; }

.signal-card-entity {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
}
.signal-entity-name { color: var(--neutral-600); font-weight: var(--weight-medium); }
.signal-match-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.signal-match-badge.matched   { background: var(--signal-green-bg); color: var(--signal-green-text); }
.signal-match-badge.unmatched { background: var(--signal-amber-bg); color: var(--signal-amber-text); }

.signal-result-findings {
  padding: var(--space-3) var(--space-5);
  background: var(--neutral-50);
  border-top: 1px solid var(--neutral-200);
}
.signal-findings-label { font-size: var(--text-xs); color: var(--neutral-600); margin: 0; }

.signal-history {
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius);
  overflow: hidden;
}
.signal-history-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neutral-400);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--neutral-100);
  background: var(--neutral-50);
}
.signal-history-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--neutral-100);
  font-size: var(--text-sm);
}
.signal-history-row:last-child { border-bottom: none; }
.signal-history-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.signal-history-title { font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Findings List ─────────────────────────────────────────────────────────── */

.findings-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }

.findings-summary-bar {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--neutral-500);
  flex-wrap: wrap;
}
.findings-summary-bar span::before { content: '·'; margin-right: var(--space-2); color: var(--neutral-300); }
.findings-summary-bar span:first-child::before { display: none; }

.findings-category { display: flex; flex-direction: column; gap: var(--space-2); }
.findings-category-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neutral-400);
  padding: var(--space-2) 0 var(--space-1);
  border-bottom: 1px solid var(--neutral-100);
}

.finding-card {
  background: var(--surface);
  border: 1px solid var(--neutral-200);
  border-left: 4px solid var(--neutral-300);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.finding-card-critical { border-left-color: var(--signal-red-text); }
.finding-card-high     { border-left-color: var(--signal-amber-text); }
.finding-card-medium   { border-left-color: var(--accent-500); }
.finding-card-low      { border-left-color: var(--neutral-300); }

.finding-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.finding-card-title { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.finding-pack-badge { font-size: 10px; opacity: 0.7; }
.finding-status-badge { font-size: 10px; }

.finding-entities { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
.finding-entity-chip {
  font-size: var(--text-xs);
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  color: var(--neutral-700);
}

.finding-context-note { font-size: var(--text-xs); color: var(--neutral-500); margin: 0; }
.finding-suggested { font-size: var(--text-xs); color: var(--neutral-600); margin: 0; }

.finding-card-actions { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-1); }

.finding-assessment {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-1);
}
.finding-assessment-verdict {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}
.finding-assessment-verdict.real         { color: var(--signal-amber-text); }
.finding-assessment-verdict.false-positive { color: var(--signal-green-text); }
.finding-assessment-text { font-size: var(--text-xs); color: var(--neutral-700); margin: 0 0 4px; }

.findings-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  color: var(--neutral-600);
}