/* ============================================================================
   Baseline — Charts
   Companion to assets/js/charts.js. Every chart scales to its container;
   wide ones scroll inside .scroll-x rather than pushing the page sideways.
   ========================================================================== */

.chart { position: relative; width: 100%; }
.ch { display: block; overflow: visible; }

/* SVG text can't inherit from body, so the type scale is restated here. */
.ch__ax {
  font-family: var(--font-mono);
  font-size: 10.5px;
  fill: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ch__lab {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  fill: var(--ink);
}
.ch__lab.is-dim { fill: var(--ink-3); }
.ch__val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  fill: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.ch__val.is-dim { fill: var(--ink-3); font-style: italic; }

/* Height comes from the viewBox aspect ratio (charts.js sets width:100% /
   height:auto), so nothing here should set an explicit height — that was the
   bug that made the ring 344px tall. Only the natural-size charts and the
   min-widths that force horizontal scrolling live here. */
.ch--scatter { max-width: 460px; margin-inline: auto; }
.ch--gantt   { min-width: 720px; }
.ch--spark   { display: inline-block; vertical-align: middle; }

.ch__readout {
  position: absolute;
  top: 0; right: 0;
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity var(--dur-tip) var(--ease-out);
}
.ch__readout.is-on { opacity: 1; }
.ch__readout-date { color: var(--ink-3); }
.ch__readout-bp { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.ch__readout-cat { font-weight: 600; }

.ch__ring-v {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 500;
  fill: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ch__ring-s { font-family: var(--font-sans); font-size: 11.5px; fill: var(--ink-3); }

/* ── Legend ──────────────────────────────────────────────────────────── */
.ch-legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  font-size: var(--fs-xs); color: var(--ink-3);
}
.ch-legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.ch-legend i {
  width: 14px; height: 3px; border-radius: 2px; flex-shrink: 0;
  background: var(--brand);
}
.ch-legend i.dash {
  height: 0; border-top: 2px dashed var(--ink-2); border-radius: 0;
}

/* ── Horizontal bars ─────────────────────────────────────────────────── */
.hbar { display: flex; flex-direction: column; gap: var(--sp-3); }
.hbar__row {
  display: grid;
  grid-template-columns: minmax(88px, 150px) 1fr auto;
  align-items: center;
  gap: var(--sp-3);
}
.hbar__label { font-size: var(--fs-sm); color: var(--ink-2); }
.hbar__track {
  height: 9px; border-radius: var(--r-pill);
  background: var(--surface-3); overflow: hidden;
}
.hbar__fill {
  display: block; height: 100%;
  border-radius: var(--r-pill);
  background: var(--brand);
}
.hbar__value {
  font-size: var(--fs-sm); color: var(--ink);
  min-width: 3.5ch; text-align: right;
}

/* ── Funnel ──────────────────────────────────────────────────────────── */
.funnel { display: flex; flex-direction: column; gap: var(--sp-4); }
.funnel__head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--fs-sm); margin-bottom: var(--sp-2);
}
.funnel__bar {
  height: 26px;
  border-radius: var(--r-xs);
  background: color-mix(in oklab, var(--brand) 62%, var(--surface-3));
  min-width: 3%;
}
.funnel__drop {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--st-stage2);
}

/* ── Stacked bar ─────────────────────────────────────────────────────── */
.stackbar { display: flex; flex-direction: column; gap: var(--sp-3); }
.stackbar__track {
  display: flex; height: 26px;
  border-radius: var(--r-xs); overflow: hidden;
  background: var(--surface-3);
}
.stackbar__seg { display: block; height: 100%; }
.stackbar__key { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--ink-3); }
.stackbar__keyitem { display: inline-flex; align-items: center; gap: var(--sp-2); }
.stackbar__keyitem i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.stackbar__keyitem b { color: var(--ink-2); font-weight: 600; }

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ch__readout { transition: none; }
}