/* ============================================================================
   GAUNTLET — shared dashboard styles (BattleGround dark)
   Built on tokens.css. Layout, nav, cards, tables, charts, verdicts, severity.
   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-ui);
  min-height: 100vh;
  padding-bottom: var(--space-10);
}

/* ---- Top bar ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-height); padding: 0 var(--space-6);
  border-bottom: 1px solid var(--surface-border);
  background: var(--surface-glass);
  backdrop-filter: blur(30px) saturate(200%);
  position: sticky; top: 0; z-index: 50;
}
.brand { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.02em; }
.brand .accent { color: var(--brand-500); }

/* ---- Nav ---- */
nav { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
nav a {
  color: var(--text-secondary); text-decoration: none; font-size: 0.86rem;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  transition: color var(--motion-fast), background var(--motion-fast);
  white-space: nowrap;
}
nav a.active { color: var(--brand-500); font-weight: 600; }
nav a:hover { color: var(--text-primary); background: var(--surface-3); }

main { max-width: var(--content-max); margin: 0 auto; padding: var(--space-8) var(--space-6); }
h1 { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: var(--space-2); }
.subtitle { color: var(--text-secondary); margin-bottom: var(--space-8); }
h2 { font-family: var(--font-display); font-size: 1.15rem; margin: var(--space-6) 0 var(--space-4); color: var(--text-primary); }

/* ---- Cards & sections ---- */
.panel {
  background: var(--surface-1); border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg); padding: var(--space-5);
  margin-bottom: var(--space-6);
}

/* ---- KPI grid ---- */
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-5); margin-bottom: var(--space-8);
}
.kpi {
  background: linear-gradient(160deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--surface-border); border-radius: var(--radius-lg);
  padding: var(--space-5); transition: transform var(--motion-base), box-shadow var(--motion-base);
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.kpi .kpi-label { font-size: 0.75rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-2); }
.kpi .kpi-value { font-family: var(--font-display); font-size: 1.8rem; }
.kpi .kpi-delta { font-size: 0.85rem; margin-top: var(--space-1); color: var(--text-secondary); }

/* ---- Controls ---- */
.controls { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field label { font-size: 0.78rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
select, input {
  background: var(--surface-3); color: var(--text-primary);
  border: 1px solid var(--surface-border); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); font-family: var(--font-ui); font-size: 0.9rem;
}
button {
  background: var(--surface-3); color: var(--text-primary);
  border: 1px solid var(--surface-border); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4); font-family: var(--font-ui); font-size: 0.9rem;
  cursor: pointer; font-weight: 600; transition: transform var(--motion-fast), background var(--motion-fast);
}
button:hover { transform: translateY(-1px); }
.btn-brand { background: var(--brand-500); color: var(--text-inverse); border: none; }
.btn-brand:hover { background: var(--brand-600); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--surface-3); }

/* ---- Tables ---- */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--surface-border); }
td { padding: var(--space-3); border-bottom: 1px solid var(--surface-border); font-size: 0.88rem; color: var(--text-secondary); }
tr:hover td { background: var(--surface-2); }
.mono { font-family: var(--font-mono); font-size: 0.78rem; }
.run-link { color: var(--accent-450); text-decoration: none; font-family: var(--font-mono); font-size: 0.8rem; }
.run-link:hover { text-decoration: underline; }
.surv-pct { font-family: var(--font-display); color: var(--chart-3); }

/* ---- Verdict badges ---- */
.verdict-badge {
  display: inline-block; padding: 3px 9px; border-radius: var(--radius-full);
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.verdict-badge.survived { background: var(--verdict-survived-bg); color: var(--verdict-survived); }
.verdict-badge.failed { background: var(--verdict-failed-bg); color: var(--verdict-failed); }
.verdict-badge.degraded { background: var(--verdict-degraded-bg); color: var(--verdict-degraded); }
.verdict-badge.blocked { background: var(--verdict-blocked-bg); color: var(--verdict-blocked); }
.verdict-badge.unknown { background: var(--verdict-unknown-bg); color: var(--verdict-unknown); }

/* ---- Severity meter ---- */
.sev { display: inline-flex; align-items: center; gap: var(--space-1); }
.sev-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); }
.sev-dot.lit {}
.sev-dot.sev-1 { background: var(--sev-1); }
.sev-dot.sev-2 { background: var(--sev-2); }
.sev-dot.sev-3 { background: var(--sev-3); }
.sev-dot.sev-4 { background: var(--sev-4); }
.sev-dot.sev-5 { background: var(--sev-5); }
.sev-label { font-size: 0.7rem; color: var(--text-tertiary); margin-left: var(--space-1); }
.sev-none { color: var(--text-tertiary); }

/* ---- Sparkline ---- */
.sparkline { display: inline-block; }

/* ---- Survival card ---- */
.survival-card {
  background: var(--surface-2); border: 1px solid var(--surface-border);
  border-radius: var(--radius-md); padding: var(--space-4);
}
.survival-card .sc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.survival-card .sc-agent { font-weight: 600; font-size: 0.9rem; }
.survival-card .sc-value { font-family: var(--font-display); font-size: 1.5rem; color: var(--chart-3); }
.survival-card .sc-ci { font-size: 0.78rem; color: var(--text-tertiary); margin-top: var(--space-1); }
.survival-card .sc-meter { height: 6px; background: var(--surface-3); border-radius: var(--radius-full); margin-top: var(--space-3); overflow: hidden; }
.survival-card .sc-fill { height: 100%; background: linear-gradient(90deg, var(--chart-3), var(--chart-2)); }

/* ---- Heatmap ---- */
.heatmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: var(--space-1); }
.heat-cell {
  aspect-ratio: 1; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--surface-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; color: var(--text-tertiary); position: relative;
  overflow: hidden;
}
.heat-cell.has-value { border-color: var(--chart-2); color: var(--accent-100); }
.heat-cell.has-value::after { content: ""; position: absolute; inset: 0; background: var(--chart-2); opacity: 0.12; }

/* ---- list rows ---- */
.stack { display: flex; flex-direction: column; gap: var(--space-3); }

/* ---- Failure rows ---- */
.failure-row {
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--surface-2); border: 1px solid var(--surface-border);
  border-radius: var(--radius-md); padding: var(--space-4);
}
.failure-row .f-class { display: flex; align-items: center; gap: var(--space-3); }
.failure-row .f-name { font-weight: 600; }
.f-summary { font-size: 0.85rem; color: var(--text-secondary); }
.f-detail { font-size: 0.76rem; color: var(--text-tertiary); }
.f-verdict { margin-left: auto; }
.failures-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }

/* ---- Evidence chain ---- */
.evidence-chain .chain-block {
  background: var(--surface-1); border: 1px solid var(--surface-border);
  border-left: 4px solid var(--accent-450); border-radius: var(--radius-md);
  padding: var(--space-4); margin-bottom: var(--space-3);
}
.chain-block.cb-tampered-wrap { border-left-color: var(--verdict-failed); }
.cb-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.cb-seq { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-tertiary); }
.cb-kind { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); background: var(--surface-3); color: var(--accent-100); }
.cb-tampered { color: var(--verdict-failed); font-weight: 700; font-size: 0.8rem; }
.cb-payload { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; }

/* ---- Fault timeline ---- */
.fault-timeline { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.fault-step { display: flex; gap: var(--space-4); align-items: baseline; background: var(--surface-2); border: 1px solid var(--surface-border); border-radius: var(--radius-md); padding: var(--space-3); }
.fs-idx { color: var(--text-tertiary); font-family: var(--font-mono); font-size: 0.78rem; }
.fs-name { color: var(--accent-100); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; }
.fs-body { color: var(--text-secondary); font-size: 0.85rem; }

/* ---- Empty state / toast ---- */
.gauntlet-empty { color: var(--text-tertiary); text-align: center; padding: var(--space-8); }
.gauntlet-toast {
  position: fixed; top: var(--space-5); right: var(--space-5); padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md); background: var(--surface-3); border: 1px solid var(--surface-border);
  color: var(--text-primary); box-shadow: var(--shadow-3); z-index: 100; font-size: 0.9rem;
}
.gauntlet-toast.ok { background: var(--verdict-survived-bg); border-color: var(--verdict-survived); }
.gauntlet-toast.error { background: var(--verdict-failed-bg); border-color: var(--verdict-failed); }

/* ---- taxonomy tree (failures page) ---- */
.taxonomy-tree { font-size: 0.85rem; }
.taxonomy-tree .class-node,
.taxonomy-tree .subtype-node {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); margin-bottom: 2px; cursor: pointer;
}
.taxonomy-tree .class-node { color: var(--text-primary); font-weight: 600; }
.taxonomy-tree .class-node:hover, .taxonomy-tree .subtype-node:hover { background: var(--surface-3); }
.taxonomy-tree .subtype-node { color: var(--text-secondary); margin-left: var(--space-5); }
.taxonomy-tree .subtype-node .count { color: var(--chart-2); }

/* ---- statistics charts ---- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.grid-stack { display: flex; flex-direction: column; gap: var(--space-6); }
.bar-chart { display: flex; flex-direction: column; gap: var(--space-2); }
.bar-row { display: flex; align-items: center; gap: var(--space-3); }
.bar-row .bar-label { width: 120px; font-size: 0.8rem; color: var(--text-secondary); text-align: right; }
.bar-track { flex: 1; height: 14px; background: var(--surface-2); border-radius: var(--radius-sm); overflow: hidden; }
.bar-fill { height: 100%; display: block; background: linear-gradient(90deg, var(--chart-1), var(--chart-2)); }
.bar-row .bar-val { width: 56px; font-size: 0.78rem; color: var(--text-tertiary); font-family: var(--font-mono); }

/* ---- line chart (survival trend) ---- */
.line-chart { width: 100%; height: 260px; background: var(--surface-1); border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg); padding: var(--space-4); }

/* ---- radar ---- */
.radar { width: 100%; max-width: 420px; height: 260px; }

/* ---- calculator ---- */
.calc { display: flex; flex-direction: column; gap: var(--space-4); }
.calc-result { font-family: var(--font-display); font-size: 1.4rem; color: var(--chart-3); }

/* ---- corpus opt-in switch ---- */
.switch { display: inline-flex; align-items: center; gap: var(--space-3); }
.switch input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand-500); }

/* ---- agent cards ---- */
.agent-card {
  background: var(--surface-2); border: 1px solid var(--surface-border);
  border-radius: var(--radius-md); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.agent-card .ac-head { display: flex; justify-content: space-between; align-items: center; }
.agent-card .ac-name { font-weight: 600; }
.agent-card .ac-harness { font-size: 0.72rem; color: var(--accent-100); background: var(--surface-3); padding: 2px 8px; border-radius: var(--radius-full); }
.agent-card .ac-desc { font-size: 0.85rem; color: var(--text-secondary); }
.agent-card .ac-meta { font-size: 0.76rem; color: var(--text-tertiary); }
.agent-card .ac-spark { margin-top: var(--space-1); }
.agent-card .ac-latest { font-size: 0.82rem; color: var(--chart-3); }
.agent-run-row { display: flex; align-items: center; gap: var(--space-4); background: var(--surface-2); border: 1px solid var(--surface-border); border-radius: var(--radius-md); padding: var(--space-3); }

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; align-items: flex-start; height: auto; padding: var(--space-4) var(--space-4); gap: var(--space-3); }
  body { padding-bottom: var(--space-6); }
  main { padding: var(--space-5) var(--space-4); }
}