/* ───────────────────────────────────────────────────────────────────────────
   HELIX research-artifact theme — shared light WBD look & feel.

   Every standalone artifact under /static/artifacts/<slug>/ includes this so the
   in-app research gallery (iframe previews on each stop's /research page) looks
   like the rest of lab.wbd-rd.nl: white surfaces, WBD palette, Inter/JetBrains.
   Charts render through Chart.js (see helix-charts.js); 3D-only views may keep
   Plotly but reuse these surfaces/tokens.
   Self-contained — no @import, no webfont fetch (graceful system fallback).
─────────────────────────────────────────────────────────────────────────── */
:root {
  --wbd-deep: #0a3d80;
  --wbd-blue: #0d4f9e;
  --wbd-cyan: #1fa0db;
  --wbd-lime: #bed137;

  --bg: #ffffff;       /* page */
  --bg-2: #f7f9fb;     /* cards / raised */
  --bg-3: #eef2f6;     /* insets / tracks */
  --border: #e3e8ee;   /* hairline */

  --ink: #0f1d2e;
  --ink-dim: #54657a;
  --ink-faint: #93a3b4;

  --accent: var(--wbd-cyan);
  --accent-2: var(--wbd-blue);

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(15, 29, 46, 0.04), 0 2px 8px rgba(15, 29, 46, 0.04);
}

* { box-sizing: border-box; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  margin: 0 auto;
  padding: 24px 20px 40px;
  max-width: 1100px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 22px; font-weight: 750; letter-spacing: -0.02em; margin: 0 0 4px; }
h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--ink); }
.sub { color: var(--ink-dim); font-size: 13.5px; margin: 0 0 20px; max-width: 80ch; }

/* KPI strip */
.cards { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.kpi {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; flex: 1; min-width: 130px;
}
.kpi .v { font-size: 22px; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi .l { font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }

/* content card */
.card {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; margin-top: 16px; box-shadow: var(--shadow);
}

/* chart canvas wrapper — give Chart.js a sized, responsive box */
.chart-wrap { position: relative; width: 100%; height: 430px; }
.chart-wrap.tall { height: 520px; }
.chart-wrap.short { height: 320px; }
.chart-wrap canvas { background: #fff; border: 1px solid var(--border); border-radius: 8px; }
/* A Plotly plot fills its wrapper. Without this the plot div has no height of
   its own, Plotly falls back to its default 450px and the chart overlaps the
   figure caption below it. */
.chart-wrap > .js-plotly-plot, .chart-wrap > div { width: 100%; height: 100%; }
/* Plotly 3D fallback container (3D-only views) */
.plot3d { width: 100%; height: 480px; }

/* tables */
.tabwrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; margin-top: 6px; }
th, td { padding: 6px 9px; text-align: right; border-bottom: 1px solid var(--border); }
th { color: var(--ink-dim); font-weight: 600; font-size: 12px; }
td:first-child, th:first-child { text-align: left; }
td.num { font-variant-numeric: tabular-nums; }

/* toggles / segmented control */
.tog { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-left: auto; }
.tog button { background: #fff; color: var(--ink-dim); border: 0; padding: 6px 13px; font: inherit; font-size: 12px; cursor: pointer; }
.tog button.on { background: var(--accent); color: #fff; }

.row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }

.mut { color: var(--ink-dim); font-size: 12.5px; }
b { color: var(--ink); }
code { font-family: var(--mono); background: var(--bg-3); padding: 1px 5px; border-radius: 4px; color: var(--accent-2); font-size: 0.92em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.legend, #leg { color: var(--ink-dim); font-size: 12px; }