/* ============================================================
   infographic.css · styles for the compact-infographic kit (infographic.js).
   Token-driven only: cyan = rule-based, gold = model-judged, warn = held, the
   dim ink for context. The same drawing repaints in light + dark because every
   color resolves a theme var. WCAG-AA on the ground in both themes. Overflow-
   safe at 1280px and 375px: every SVG is width auto / max-width 100%, every
   figure sets min-width 0, no fixed pixel width pushes the page wider.
   ============================================================ */

/* the figure frame: a titled, captioned block the SVG sits inside */
.viz-fig {
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
.viz-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 12px;
  min-width: 0;
}
.viz-kicker {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent);
}
.viz-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.3;
}
.viz-caption {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
  min-width: 0;
}

/* every figure SVG scales to its box, never forces overflow */
.viz-svg { display: block; max-width: 100%; height: auto; }

/* ---- the shared color classes the JS hangs on SVG + DOM elements ---- */
.viz-c-accent { color: var(--accent); }
.viz-c-gold { color: var(--gold); }
.viz-c-warn { color: var(--warn); }
.viz-c-ok { color: var(--ok); }
.viz-c-dim { color: var(--text-dimmer); }

/* ---- legend (shared by donut / map) ---- */
.viz-legend {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.viz-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
  min-width: 0;
}
.viz-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: currentColor;
  flex: 0 0 auto;
}
.viz-legend-label { min-width: 0; overflow-wrap: anywhere; }
.viz-legend-val {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  padding-left: 10px;
}

/* ============================================================
   DONUT
   ============================================================ */
.viz-donut-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-width: 0;
}
.viz-donut-svg { flex: 0 0 auto; }
.viz-donut-side { min-width: 0; }
.viz-donut-track { stroke: var(--border); }
.viz-donut-seg { stroke: currentColor; }
.viz-donut-center-val {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  fill: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.viz-donut-center-lab {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  fill: var(--text-dimmer);
}
@media (max-width: 420px) {
  .viz-donut-body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .viz-donut-side { width: 100%; }
}

/* ============================================================
   RATIO BARS
   ============================================================ */
.viz-bars-list { display: grid; gap: 12px; min-width: 0; }
.viz-bar-row { min-width: 0; }
.viz-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  min-width: 0;
}
.viz-bar-label { font-size: 13px; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.viz-bar-val {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.viz-bar-track {
  height: 9px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.viz-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: currentColor;
  min-width: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  .viz-bar-fill { transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
}

/* ============================================================
   TRENDLINE
   ============================================================ */
.viz-trend-svg { width: 100%; }
.viz-trend-area { fill: currentColor; opacity: 0.12; stroke: none; }
.viz-trend-line { stroke: currentColor; }
.viz-trend-dot { fill: currentColor; }
.viz-trend-last {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--text-dim);
}

/* ============================================================
   MINI-MAP
   ============================================================ */
.viz-map-svg { width: 100%; }
.viz-map-boundary {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  opacity: 0.7;
}
.viz-map-boundary-lab {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  fill: var(--text-dimmer);
}
.viz-map-link { stroke: var(--accent); opacity: 0.55; }
.viz-map-node { fill: var(--accent); }
.viz-map-node-lab { font-family: var(--mono); font-size: 9px; fill: var(--text-dim); }
.viz-map-gate { fill: none; stroke: var(--gold); stroke-width: 2; }
.viz-map-gate-lab {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  fill: var(--gold-deep);
}
.viz-map .viz-legend { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; }
.viz-map .viz-legend-item { font-size: 12px; }
.viz-map .viz-legend-val { margin-left: 0; padding-left: 0; }

/* ============================================================
   STEP RAIL
   ============================================================ */
.viz-rail-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}
.viz-rail-step {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border-top: 2px solid var(--accent);
  min-width: 0;
}
.viz-rail-step.viz-c-gold { border-top-color: var(--gold); }
.viz-rail-step.viz-c-warn { border-top-color: var(--warn); }
.viz-rail-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-pale);
  border: 1px solid var(--border-accent);
  flex: 0 0 auto;
}
.viz-rail-step.viz-c-gold .viz-rail-num {
  color: var(--gold-deep);
  background: var(--gold-pale);
  border-color: var(--gold-soft);
}
.viz-rail-label { font-size: 12.5px; line-height: 1.4; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .viz-rail-track { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   A two-up text-and-visual pairing helper. A text-heavy panel wraps its copy
   on one side and a figure on the other so the surface reads as picture plus
   sentence. Collapses to a single column on phones. Overflow-safe.
   ============================================================ */
.viz-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 22px;
  align-items: center;
  min-width: 0;
}
.viz-pair > * { min-width: 0; }
.viz-pair.is-visual-lead { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
.viz-panel {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
@media (max-width: 760px) {
  .viz-pair,
  .viz-pair.is-visual-lead { grid-template-columns: minmax(0, 1fr); }
}