/* Chart color roles, one set per app theme (see tokens.css). The Anthropic set was
   validated against this app's card surfaces via the dataviz skill's palette validator
   (light on #FFFFFF, dark on #2A2622) — the Geek/Mario sets are chosen for legibility on
   their much darker/brighter surfaces but not independently re-run through the validator
   script. Categorical hues are used in a fixed order only; never cycled/reassigned by
   filter state. */

/* ===== Geek / Terminal (default) — bright hues legible on a near-black surface ===== */
.viz-root {
  --viz-surface: var(--color-surface);
  --viz-text-primary: var(--color-text);
  --viz-text-secondary: var(--color-text-muted);
  --viz-muted: #4a9e5e;
  --viz-grid: var(--color-border);
  --viz-baseline: var(--color-border);
  --viz-series-1: #33ff66; /* green — matches the theme accent */
  --viz-series-2: #33ccff; /* cyan */
  --viz-series-3: #ffcc00; /* amber */
  --viz-series-4: #ff66cc; /* magenta */
  --viz-series-5: #ff8833; /* orange */
  --viz-series-6: #e6e6e6; /* light gray */
}

/* ===== Mario — bright saturated hues on a white card surface ===== */
[data-app-theme="mario"] .viz-root {
  --viz-muted: #4A4A6A;
  --viz-series-1: #E52521; /* Mario red */
  --viz-series-2: #00A2E8; /* sky blue */
  --viz-series-3: #43B047; /* Luigi green */
  --viz-series-4: #FBD000; /* coin yellow */
  --viz-series-5: #8B5CF6; /* purple */
  --viz-series-6: #FF8C00; /* orange */
}

/* ===== Anthropic — the originally-validated set ===== */
[data-app-theme="anthropic"] .viz-root {
  --viz-muted: #898781;
  --viz-series-1: #C15F3C; /* rust — brand, primary series */
  --viz-series-2: #2a78d6; /* blue */
  --viz-series-3: #1baf7a; /* aqua */
  --viz-series-4: #eda100; /* yellow */
  --viz-series-5: #4a3aa7; /* violet */
  --viz-series-6: #eb6834; /* orange */
}
@media (prefers-color-scheme: dark) {
  [data-app-theme="anthropic"] .viz-root {
    --viz-series-2: #3987e5;
    --viz-series-3: #199e70;
    --viz-series-4: #c98500;
    --viz-series-5: #9085e9;
    --viz-series-6: #d95926;
  }
}
[data-app-theme="anthropic"][data-theme="dark"] .viz-root {
  --viz-series-2: #3987e5;
  --viz-series-3: #199e70;
  --viz-series-4: #c98500;
  --viz-series-5: #9085e9;
  --viz-series-6: #d95926;
}

.viz-chart { width: 100%; }
.viz-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.viz-grid-line { stroke: var(--viz-grid); stroke-width: 1; }
.viz-grid-line-v { stroke-dasharray: 2 3; opacity: 0.6; }
.viz-baseline { stroke: var(--viz-baseline); stroke-width: 1; }
.viz-axis-label { fill: var(--viz-muted); font-size: 10px; font-family: var(--font-body); }
.viz-line { fill: none; stroke-width: 2; }
.viz-dot { stroke: var(--viz-surface); stroke-width: 2; }
.viz-bar { rx: 3; }
.viz-bar-label { fill: var(--viz-text-secondary); font-size: 11px; font-family: var(--font-body); }
.viz-value-label { fill: var(--viz-text-primary); font-size: 11px; font-weight: 600; font-family: var(--font-body); }

.viz-donut { width: 140px; }
.viz-donut svg { width: 100%; height: auto; display: block; }
.viz-donut-track { stroke: var(--viz-grid); }
.viz-donut-title { fill: var(--viz-text-secondary); font-size: 11px; font-family: var(--font-body); }
.viz-donut-pct { fill: var(--viz-text-primary); font-size: 20px; font-weight: 700; font-family: var(--font-body); }
.viz-donut-sublabel { fill: var(--viz-text-secondary); font-size: 10px; font-family: var(--font-body); }
.viz-donut-grid { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.viz-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.viz-legend-item { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--color-text-muted); }
.viz-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

.viz-tooltip {
  position: fixed;
  pointer-events: none;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--fs-xs);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  z-index: 200;
  opacity: 0;
  transition: opacity .1s ease;
  white-space: nowrap;
}
.viz-tooltip.visible { opacity: 1; }

.viz-empty { color: var(--color-text-muted); font-size: var(--fs-sm); padding: var(--space-6); text-align: center; }