/* ── DESIGN TOKENS ──────────────────────────────────────────────── */
:root, [data-theme='light'] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;

  --color-bg: #0d0f12;
  --color-surface: #131619;
  --color-surface-2: #181c20;
  --color-surface-offset: #1c2026;
  --color-border: #272d35;
  --color-divider: #1f252d;

  --color-text: #e2e6ea;
  --color-text-muted: #7a8390;
  --color-text-faint: #444c56;

  --color-primary: #4f98a3;
  --color-primary-hover: #3d8290;
  --color-primary-highlight: #1a2f33;

  --color-success: #6daa45;
  --color-success-highlight: #1e2e18;
  --color-warning: #d19900;
  --color-warning-highlight: #2e2500;
  --color-error: #dd6974;
  --color-error-highlight: #2e1518;
  --color-purple: #a86fdf;

  --color-critical: #dd6974;
  --color-high: #fdab43;
  --color-medium: #4f98a3;
  --color-low: #6daa45;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: 'Cabinet Grotesk', 'Helvetica Neue', sans-serif;
  --font-body: 'Satoshi', 'Inter', sans-serif;
}

[data-theme='light'] {
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-surface-2: #f9fafb;
  --color-surface-offset: #f0f2f5;
  --color-border: #dde1e7;
  --color-divider: #e8ebf0;
  --color-text: #111827;
  --color-text-muted: #6b7280;
  --color-text-faint: #c9cdd4;
  --color-primary: #01696f;
  --color-primary-hover: #014f54;
  --color-primary-highlight: #e0f2f3;
  --color-error: #c0324a;
  --color-error-highlight: #fde8ec;
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
}

/* ── RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
canvas { max-width: 100%; }

/* ── HEADER ────────────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(12px);
}
.header-inner {
  max-width: 1280px; margin: 0 auto;
  padding: var(--space-3) var(--space-8);
  display: flex; align-items: center; gap: var(--space-8);
}
.logo { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.logo-text {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.nav { display: flex; gap: var(--space-1); flex: 1; }
.nav-tab {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  transition: all var(--transition);
  white-space: nowrap;
}
.nav-tab:hover { color: var(--color-text); background: var(--color-surface-offset); }
.nav-tab.active { color: var(--color-primary); background: var(--color-primary-highlight); }
.theme-toggle {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: all var(--transition);
  flex-shrink: 0;
}
.theme-toggle:hover { color: var(--color-text); background: var(--color-surface-offset); }

/* ── PAGES ─────────────────────────────────────────────────────── */
.page { display: none; max-width: 1280px; margin: 0 auto; padding: var(--space-8); }
.page.active { display: block; }

.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.page-eyebrow {
  font-size: var(--text-xs); font-weight: 500;
  color: var(--color-primary); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: var(--space-1);
}
.page-title {
  font-family: var(--font-display);
  font-size: var(--text-xl); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.1;
}
.data-freshness {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--color-text-muted);
}
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-highlight);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── KPI ROW ───────────────────────────────────────────────────── */
.kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4); margin-bottom: var(--space-6);
}
.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.kpi-label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; }
.kpi-value {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800; letter-spacing: -0.04em;
  line-height: 1; color: var(--color-text);
  font-variant-numeric: tabular-nums lining-nums;
}
.kpi-unit { font-size: 1.2rem; font-weight: 500; color: var(--color-text-muted); }
.kpi-delta { font-size: var(--text-xs); font-weight: 500; }
.kpi-delta.positive { color: var(--color-success); }
.kpi-delta.negative { color: var(--color-error); }
.kpi-delta.neutral { color: var(--color-text-muted); }

/* ── CHARTS LAYOUT ─────────────────────────────────────────────── */
.charts-row {
  display: grid; grid-template-columns: 1fr 340px;
  gap: var(--space-4); margin-bottom: var(--space-4);
}
.chart-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.chart-card.wide { /* uses the wider column */ }
.chart-card.full { grid-column: 1 / -1; margin-bottom: var(--space-4); }
.chart-header { margin-bottom: var(--space-5); }
.chart-title {
  font-family: var(--font-display);
  font-size: var(--text-base); font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: var(--space-1);
}
.chart-subtitle { font-size: var(--text-xs); color: var(--color-text-muted); }
.chart-wrap { position: relative; }
.chart-controls { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }

/* ── CHIPS ─────────────────────────────────────────────────────── */
.chip {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 500;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: all var(--transition);
}
.chip:hover { color: var(--color-text); border-color: var(--color-text-faint); }
.chip.active { background: var(--color-primary-highlight); color: var(--color-primary); border-color: var(--color-primary); }

/* ── LEGEND ────────────────────────────────────────────────────── */
.legend { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.legend-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── SKILL TABLE ───────────────────────────────────────────────── */
.skill-table { display: flex; flex-direction: column; gap: var(--space-3); }
.skill-row {
  display: grid; grid-template-columns: 140px 1fr 40px;
  align-items: center; gap: var(--space-3);
}
.skill-name { font-size: var(--text-xs); font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill-bar-wrap { height: 6px; background: var(--color-surface-offset); border-radius: var(--radius-full); overflow: hidden; }
.skill-bar { height: 100%; border-radius: var(--radius-full); transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.skill-bar.critical { background: var(--color-critical); }
.skill-bar.high { background: var(--color-high); }
.skill-bar.medium { background: var(--color-medium); }
.skill-bar.low { background: var(--color-low); }
.skill-risk-pct { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); font-variant-numeric: tabular-nums; text-align: right; }

/* ── RISK BANDS ────────────────────────────────────────────────── */
.risk-bands { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-2); }
.risk-band-header { display: flex; justify-content: space-between; margin-bottom: var(--space-1); }
.risk-label { font-size: var(--text-xs); font-weight: 600; }
.risk-pct { font-size: var(--text-xs); color: var(--color-text-muted); }
.risk-bar-wrap { height: 6px; background: var(--color-surface-offset); border-radius: var(--radius-full); overflow: hidden; margin-bottom: var(--space-1); }
.risk-bar { height: 100%; border-radius: var(--radius-full); transition: width 0.6s cubic-bezier(0.16,1,0.3,1); }
.risk-count { font-size: var(--text-xs); color: var(--color-text-muted); }
.risk-band.critical .risk-bar { background: var(--color-critical); }
.risk-band.critical .risk-label { color: var(--color-critical); }
.risk-band.high .risk-bar { background: var(--color-high); }
.risk-band.high .risk-label { color: var(--color-high); }
.risk-band.medium .risk-bar { background: var(--color-medium); }
.risk-band.medium .risk-label { color: var(--color-medium); }
.risk-band.low .risk-bar { background: var(--color-low); }
.risk-band.low .risk-label { color: var(--color-low); }

/* ── LOOKUP ────────────────────────────────────────────────────── */
.lookup-wrap { display: flex; flex-direction: column; gap: var(--space-6); }
.lookup-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 700px;
}
.lookup-label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-3); }
.lookup-input-row { display: flex; gap: var(--space-3); }
.lookup-select {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  outline: none;
  transition: border-color var(--transition);
}
.lookup-select:focus { border-color: var(--color-primary); }
.lookup-btn {
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 600;
  transition: all var(--transition);
  white-space: nowrap;
}
.lookup-btn:hover { background: var(--color-primary-hover); }

/* ── RESULT ────────────────────────────────────────────────────── */
.lookup-result {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}
.lookup-result.hidden { display: none; }
.result-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.result-role {
  font-family: var(--font-display);
  font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.03em;
}
.result-meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }
.risk-gauge-wrap { flex-shrink: 0; }
.gauge-svg { width: 160px; height: auto; }
.gauge-value {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800;
  fill: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.gauge-label {
  font-size: 7px; font-weight: 600;
  fill: var(--color-text-muted);
  letter-spacing: 0.08em;
}
.result-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-6); }
.result-card-title {
  font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-muted); margin-bottom: var(--space-4);
}

/* ── MODEL LIST ────────────────────────────────────────────────── */
.model-list { display: flex; flex-direction: column; gap: var(--space-3); }
.model-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
}
.model-tier-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 2px var(--space-2);
  border-radius: var(--radius-full);
}
.model-tier-badge.frontier { background: var(--color-error-highlight); color: var(--color-error); }
.model-tier-badge.strong { background: color-mix(in oklab, var(--color-warning) 15%, transparent); color: var(--color-warning); }
.model-name { font-size: var(--text-xs); font-weight: 600; color: var(--color-text); }
.model-coverage { font-size: var(--text-xs); color: var(--color-text-muted); margin-left: auto; font-variant-numeric: tabular-nums; }

/* ── TIER CARDS ────────────────────────────────────────────────── */
.tier-cards { display: flex; flex-direction: column; gap: var(--space-4); }
.tier-card {
  padding: var(--space-4);
  background: var(--color-surface-offset);
  border-radius: var(--radius-lg);
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2) var(--space-3);
  align-items: start;
}
.tier-label {
  font-size: var(--text-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px var(--space-2); border-radius: var(--radius-full);
}
.tier-card.frontier .tier-label { background: var(--color-error-highlight); color: var(--color-error); }
.tier-card.strong .tier-label { background: color-mix(in oklab, var(--color-warning) 15%, transparent); color: var(--color-warning); }
.tier-card.efficient .tier-label { background: var(--color-primary-highlight); color: var(--color-primary); }
.tier-models { grid-column: 1 / 3; font-size: var(--text-xs); color: var(--color-text-muted); }
.tier-score {
  font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: 800;
  letter-spacing: -0.03em; grid-row: 1;
  font-variant-numeric: tabular-nums;
}
.tier-note { font-size: 10px; color: var(--color-text-faint); grid-column: 1 / -1; }

/* ── HEATMAP ───────────────────────────────────────────────────── */
.heatmap-wrap { overflow-x: auto; }
.heatmap-table { border-collapse: collapse; width: 100%; min-width: 800px; }
.heatmap-table th {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3); text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.heatmap-table td {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  border-bottom: 1px solid var(--color-divider);
}
.heatmap-table tr:last-child td { border-bottom: none; }
.hmap-cell {
  width: 36px; height: 20px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── HEATMAP CELLS (DOM-generated) ─────────────────────────────── */
.heatmap-cell {
  width: 48px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  border-radius: 3px;
  padding: var(--space-2) var(--space-1);
}
.heatmap-model-col {
  width: 180px;
  white-space: nowrap;
}
.heatmap-skill-col {
  font-size: 10px;
  text-align: center;
  white-space: nowrap;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.heatmap-model-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  padding-right: var(--space-4);
}
.heatmap-tier-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: var(--radius-full);
  margin-left: var(--space-2);
  vertical-align: middle;
}
.heatmap-tier-badge.frontier { background: var(--color-error-highlight); color: var(--color-error); }
.heatmap-tier-badge.strong { background: color-mix(in oklab, var(--color-warning) 18%, transparent); color: var(--color-warning); }
.heatmap-tier-badge.efficient { background: var(--color-primary-highlight); color: var(--color-primary); }
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
.heatmap-legend-label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; }
.heatmap-legend-item {
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
}

/* ── MODEL THREATS (lookup result) ─────────────────────────────── */
.model-threat-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.model-threat-item svg {
  color: var(--color-warning);
  flex-shrink: 0;
}

/* ── SURFACE OFFSET FALLBACK ────────────────────────────────────── */
:root {
  --color-surface-offset: #1c2026;
}
[data-theme='light'] {
  --color-surface-offset: #f0f2f5;
}

/* ── RADAR HINT ────────────────────────────────────────────────── */
.radar-hint {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-2);
  transition: color 0.3s ease;
}

/* ══════════════════════════════════════════════════════════════════
   ROLE LOOKUP — SKILL TABS
   ══════════════════════════════════════════════════════════════════ */

.result-section-title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
}
.result-section-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5) 0;
}
.result-summary {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  line-height: 1.6;
  max-width: 600px;
}
.skill-tabs-section {
  margin-top: var(--space-8);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-7);
}
.skill-tabs-header {
  margin-bottom: var(--space-5);
}

/* Tab nav row */
.skill-tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.skill-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: transparent;
  cursor: pointer;
  font-family: 'Satoshi', sans-serif;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: all 0.15s ease;
  white-space: nowrap;
}
.skill-tab-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-text);
}
.skill-tab-btn.active {
  background: var(--color-primary-highlight);
  border-color: var(--color-primary);
  color: var(--color-text);
}
.skill-tab-name { font-weight: 600; }
.skill-tab-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
}

/* Tab panel */
.skill-tab-panel {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  animation: fadeUp 0.25s ease;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* STP = Skill Tab Panel internal layout */
.stp-wrap {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-8);
}
@media (max-width: 900px) {
  .stp-wrap { grid-template-columns: 1fr; }
}

.stp-risk-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  margin-bottom: var(--space-4);
}
.stp-risk-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
}
.stp-risk-value {
  font-size: var(--text-xl);
  font-weight: 800;
  font-family: 'Cabinet Grotesk', sans-serif;
}

.stp-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0 0 var(--space-6) 0;
}

.stp-insight-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (max-width: 700px) {
  .stp-insight-row { grid-template-columns: 1fr; }
}

.stp-insight {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.stp-insight--risk { border-left: 3px solid var(--color-warning); }
.stp-insight--safe { border-left: 3px solid var(--color-success); }
.stp-insight-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.stp-insight--risk .stp-insight-label { color: var(--color-warning); }
.stp-insight--safe .stp-insight-label { color: var(--color-success); }
.stp-insight-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Sub-skills */
.stp-subskills { }
.stp-subskill-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-4) 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stp-subskill-row {
  display: grid;
  grid-template-columns: 200px 1fr 40px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
}
.stp-subskill-row:last-child { border-bottom: none; }
.stp-subskill-name { font-size: var(--text-xs); color: var(--color-text-muted); }
.stp-subskill-bar-wrap {
  height: 6px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.stp-subskill-bar {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.5s cubic-bezier(0.16,1,0.3,1);
}
.stp-subskill-pct {
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Model threats panel (right column) */
.stp-models { }
.stp-models-title {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
}
.stp-models-sub {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin: 0 0 var(--space-5) 0;
  line-height: 1.5;
}
.stp-model-card {
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.stp-model-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.stp-model-rank { font-size: 15px; }
.stp-model-name {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}
.stp-model-pct {
  font-size: var(--text-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-family: 'Cabinet Grotesk', sans-serif;
}
.stp-model-bar-wrap {
  height: 4px;
  background: var(--color-surface-raised);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.stp-model-bar {
  height: 100%;
  border-radius: var(--radius-full);
}
.stp-model-strength {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}
.stp-model-strength strong { color: var(--color-text); }

/* ══════════════════════════════════════════════════════════════════
   DISPLACEMENT RISK — SKILL BREAKDOWN CARDS
   ══════════════════════════════════════════════════════════════════ */

.skill-breakdown-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.breakdown-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.breakdown-card:hover { border-color: var(--color-primary); }
.breakdown-card[data-expanded='true'] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary-highlight);
}

.breakdown-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  background: var(--color-surface-raised);
  user-select: none;
}
.breakdown-card-header:hover { background: var(--color-surface-offset); }
.breakdown-card-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.breakdown-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.breakdown-skill-name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  display: block;
}
.breakdown-cat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  font-weight: 600;
}
.breakdown-card-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.breakdown-mini-bar-wrap {
  width: 120px;
  height: 6px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.breakdown-mini-bar {
  height: 100%;
  border-radius: var(--radius-full);
}
.breakdown-risk-pct {
  font-size: var(--text-sm);
  font-weight: 800;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}
.breakdown-chevron {
  color: var(--color-text-faint);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

/* Expanded body */
.breakdown-body {
  padding: var(--space-7) var(--space-7);
  border-top: 1px solid var(--color-border);
  animation: fadeUp 0.2s ease;
  background: var(--color-surface);
}
.breakdown-body.hidden { display: none; }

.breakdown-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0 0 var(--space-5) 0;
}

.breakdown-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
@media (max-width: 700px) {
  .breakdown-two-col { grid-template-columns: 1fr; }
}

.breakdown-col-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 var(--space-2) 0;
}
.danger-label { color: var(--color-warning); }
.safe-label   { color: var(--color-success); }
.breakdown-col-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* Sub-skill bars inside breakdown */
.breakdown-subskills { }
.breakdown-subskill-heading {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text);
  margin: 0 0 var(--space-3) 0;
}
.breakdown-subskill-row {
  display: grid;
  grid-template-columns: 260px 1fr 44px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
}
.breakdown-subskill-row:last-child { border-bottom: none; }
.breakdown-subskill-name {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.breakdown-subskill-bar-wrap {
  height: 6px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.breakdown-subskill-bar {
  height: 100%;
  border-radius: var(--radius-full);
}
.breakdown-subskill-pct {
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Risk Band Skill Panel ───────────────────────────────── */
.risk-band-panel {
  margin-bottom: var(--space-4);
}
.risk-band-panel:empty { display: none; }
.risk-band-panel:not(:empty) {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-7);
  animation: fadeUp 0.2s ease;
}

.risk-panel-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.risk-panel-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  font-family: 'Cabinet Grotesk', sans-serif;
}
.risk-panel-count {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex: 1;
}
.risk-panel-close {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-size: 14px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.risk-panel-close:hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
}
.risk-panel-empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-4);
}
.risk-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.risk-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1.5px solid;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  background: transparent;
  white-space: nowrap;
  opacity: 0;
  animation: pillIn 0.25s ease forwards;
}
.risk-pill strong {
  font-weight: 800;
  font-family: 'Cabinet Grotesk', sans-serif;
}
@keyframes pillIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.risk-pill:nth-child(1)  { animation-delay: 0.00s; }
.risk-pill:nth-child(2)  { animation-delay: 0.03s; }
.risk-pill:nth-child(3)  { animation-delay: 0.06s; }
.risk-pill:nth-child(4)  { animation-delay: 0.09s; }
.risk-pill:nth-child(5)  { animation-delay: 0.12s; }
.risk-pill:nth-child(6)  { animation-delay: 0.15s; }
.risk-pill:nth-child(7)  { animation-delay: 0.18s; }
.risk-pill:nth-child(8)  { animation-delay: 0.21s; }
.risk-pill:nth-child(9)  { animation-delay: 0.24s; }
.risk-pill:nth-child(10) { animation-delay: 0.27s; }

/* ── Model Impact Panel ───────────────────────────── */
.model-impact-panel {
  margin-top: var(--space-4);
}
.model-impact-panel:empty { display: none; }
.model-impact-panel:not(:empty) {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-7);
  animation: fadeUp 0.2s ease;
}

.mip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
  flex-wrap: wrap;
}
.mip-title-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.mip-model-name {
  font-size: var(--text-md);
  font-weight: 800;
  font-family: 'Cabinet Grotesk', sans-serif;
  color: var(--color-text);
}
.mip-tier-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 3px 10px;
  border: 1.5px solid;
  border-radius: var(--radius-full);
}

/* Two-column body */
.mip-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}
@media (max-width: 768px) {
  .mip-body { grid-template-columns: 1fr; }
}
.mip-col { min-width: 0; }

.mip-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text);
  margin: 0 0 var(--space-1) 0;
}
.mip-section-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4) 0;
  line-height: 1.5;
}
.mip-empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Skill proficiency rows */
.mip-skill-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mip-skill-row {
  display: grid;
  grid-template-columns: 180px 1fr 36px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background 0.12s ease;
}
.mip-skill-row:hover { background: var(--color-surface-offset); }
.mip-skill-name {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}
.mip-risk-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border: 1px solid;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}
.mip-bar-wrap {
  height: 6px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.mip-bar {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
}
.mip-score {
  font-size: var(--text-xs);
  font-weight: 800;
  font-family: 'Cabinet Grotesk', sans-serif;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Role threat cards */
.mip-role-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mip-role-card {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mip-role-card:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-offset);
}
.mip-role-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mip-role-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}
.mip-role-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.mip-role-risk {
  font-size: var(--text-sm);
  font-weight: 800;
  font-family: 'Cabinet Grotesk', sans-serif;
  white-space: nowrap;
}
.mip-role-arrow {
  color: var(--color-text-faint);
  font-size: 14px;
}

/* Active selected row in skill panel */
.mip-row-active {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
  border-left: 2px solid var(--color-primary);
}
.mip-row-num {
  color: var(--color-text-faint);
  min-width: 22px;
  display: inline-block;
}
.mip-model-select-row { cursor: pointer; }

/* Detail column inside skill panel */
.mip-detail-col {
  border-left: 1px solid var(--color-border);
  padding-left: var(--space-7);
}
.mip-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.mip-detail-section {
  margin-bottom: var(--space-6);
}
.mip-detail-placeholder {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  font-style: italic;
  padding-top: var(--space-4);
}
@media (max-width: 768px) {
  .mip-detail-col {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-6);
  }
}

/* Heatmap clickable affordances */
.heatmap-skill-clickable {
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.heatmap-skill-clickable:hover {
  background: var(--color-surface-offset) !important;
  color: var(--color-primary) !important;
}
.heatmap-model-clickable {
  cursor: pointer;
}
.heatmap-model-clickable:hover span:first-child {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Surface raised fallback */
:root { --color-surface-raised: #16181d; }
[data-theme='light'] { --color-surface-raised: #ffffff; }

/* Primary highlight fallback */
:root { --color-primary-highlight: rgba(79,152,163,0.12); }
[data-theme='light'] { --color-primary-highlight: rgba(79,152,163,0.1); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — comprehensive overrides for ≤ 768px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Header & nav ─────────────────────────────────────────── */
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    width: 100%;
    box-sizing: border-box;
  }
  .nav {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-1);
    gap: var(--space-1);
    flex-wrap: nowrap;
  }
  .nav-tab {
    font-size: 11px;
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .logo-text { font-size: var(--text-sm); }

  /* ── Pages ────────────────────────────────────────────────── */
  .page { padding: var(--space-4); }
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .page-title { font-size: var(--text-lg); }

  /* ── KPI row: 1 col on mobile ─────────────────────────────── */
  .kpi-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  /* ── Charts row: stack vertically (the main 2-col layout) ── */
  .charts-row {
    grid-template-columns: 1fr !important;
  }
  .chart-card { padding: var(--space-4); }
  .chart-card.full { grid-column: 1; }

  /* ── Canvas charts: constrain height ─────────────────────── */
  canvas { max-height: 240px !important; }

  /* ── Lookup input row: stack select + button ─────────────── */
  .lookup-input-row {
    flex-direction: column;
  }
  .lookup-input-row select,
  .lookup-input-row button {
    width: 100%;
  }

  /* ── Result grid (3-col model cards): stack ──────────────── */
  .result-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Skill tab nav: horizontal scroll ───────────────────── */
  .skill-tab-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: var(--space-1);
  }
  .skill-tab {
    flex-shrink: 0;
    font-size: 11px;
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
  }

  /* ── Role lookup detail: stack 2-col layout ─────────────── */
  .stp-wrap {
    grid-template-columns: 1fr !important;
  }
  .risk-gauge-wrap {
    display: flex;
    justify-content: center;
  }

  /* ── Subskill rows: remove fixed 200/260px label col ──────── */
  .stp-subskill-row {
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto;
    row-gap: var(--space-1);
  }
  .stp-subskill-name {
    grid-column: 1 / -1;
  }
  .breakdown-subskill-row {
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto;
    row-gap: var(--space-1);
  }
  .breakdown-subskill-name {
    grid-column: 1 / -1;
  }

  /* ── Accordion / granular breakdown ─────────────────────── */
  .breakdown-two-col {
    grid-template-columns: 1fr !important;
  }
  .stp-insight-row {
    grid-template-columns: 1fr !important;
  }
  .accordion-header {
    font-size: var(--text-sm);
    padding: var(--space-3) var(--space-4);
  }
  .accordion-body { padding: var(--space-4); }

  /* ── Skill breakdown grid ────────────────────────────────── */
  .skill-breakdown-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── AI Models page ──────────────────────────────────────── */
  .model-chips { flex-wrap: wrap; }
  .heatmap-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Filter chips ────────────────────────────────────────── */
  .chart-controls {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: var(--space-1);
  }
  .chip,
  .filter-btn {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ── Very small screens (≤ 400px) ─────────────────────────────── */
@media (max-width: 400px) {
  .page { padding: var(--space-3); }
  .kpi-card { padding: var(--space-3); }
  .chart-card { padding: var(--space-3); }
}