/* Charts (chart.js): show_chart's bar, line and pie. The eight series colors
 * are the dataviz reference palette in its fixed order, its own steps for
 * dark (validated on --sv-surface-raised: light #fafafa, dark #242424; the
 * three light slots under 3:1 are why every chart has a Table view). Marks
 * carry the color; every word stays in ink. */

.ui-visual {
  --viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #1baf7a; --viz-4: #eda100;
  --viz-5: #e87ba4; --viz-6: #008300; --viz-7: #6250d6; --viz-8: #e34948;
}
:root.theme-dark .ui-visual {
  --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500;
  --viz-5: #d55181; --viz-6: #008300; --viz-7: #9085e9; --viz-8: #e66767;
}

.ui-chart-stage { position: relative; min-width: 0; outline: none; border-radius: var(--sv-radius); }
.ui-chart-stage:focus-visible { box-shadow: 0 0 0 2px var(--sv-ink-tertiary); }
.ui-chart-svg { display: block; overflow: visible; font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-chart-svg text { fill: var(--sv-ink-tertiary); }
.ui-chart-grid line { stroke: var(--sv-hairline); stroke-width: 1; shape-rendering: crispEdges; }
.ui-chart-grid line.base { stroke: var(--sv-hairline-strong); }
.ui-chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ui-chart-wash { opacity: 0.1; }
.ui-chart-dot { stroke: var(--sv-surface-raised); stroke-width: 2; transition: r 120ms ease; }
.ui-chart-dot.on { r: 5.5; }
.ui-chart-focus { fill: color-mix(in srgb, var(--sv-ink) 6%, transparent); stroke: none; }
line.ui-chart-focus { stroke: var(--sv-hairline-strong); stroke-width: 1; }
.ui-chart-marks { animation: ui-chart-in 320ms ease-out both; }
@keyframes ui-chart-in { from { opacity: 0; } }

/* pie: a donut, its slices listed beside it (under it on a narrow column) */
.ui-chart-stage[data-kind="pie"] { display: flex; flex-direction: column; align-items: center; gap: var(--sv-space-3); }
.ui-chart-stage[data-kind="pie"][data-side="true"] { flex-direction: row; align-items: center; gap: var(--sv-space-5); }
.ui-chart-slice, .ui-chart-ring { stroke: var(--sv-surface-raised); transition: opacity 120ms ease; }
.ui-chart-slice { stroke-width: 2; }
.ui-chart-ring { fill: none; }
.ui-chart-stage.reading .ui-chart-slice:not(.on), .ui-chart-stage.reading .ui-pie-list li:not(.on) { opacity: 0.35; }
.ui-chart-total { fill: var(--sv-ink) !important; font-size: 18px; font-weight: 600; }
.ui-chart-total-label { font-size: 12px; }
.ui-pie-list { display: grid; gap: var(--sv-space-1); margin: 0; padding: 0; list-style: none; min-width: 0; flex: 1; width: 100%; max-width: 22rem; transition: opacity 120ms ease; }
.ui-pie-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sv-space-2); transition: opacity 120ms ease; }
.ui-pie-name { overflow-wrap: anywhere; }
.ui-pie-value { color: var(--sv-ink-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* legend and tooltip keys: a swatch for bars and slices, a short stroke for lines */
.ui-legend { display: flex; flex-wrap: wrap; gap: var(--sv-space-1) var(--sv-space-3); margin: 0; padding: 0; list-style: none; color: var(--sv-ink-secondary); font-size: var(--ui-meta); }
.ui-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ui-key { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.ui-key.line { height: 2px; width: 14px; border-radius: 1px; }

.ui-chart-tip {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 2px;
  min-width: 8rem;
  max-width: 16rem;
  padding: var(--sv-space-2) var(--sv-space-3);
  background: var(--sv-surface);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  box-shadow: var(--pop-shadow);
  font-size: var(--ui-meta);
  pointer-events: none;
}
.ui-tip-head { color: var(--sv-ink-secondary); overflow-wrap: anywhere; }
.ui-tip-row { display: flex; align-items: center; gap: 6px; }
.ui-tip-row strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-tip-key { flex: none; width: 10px; height: 2px; border-radius: 1px; }
.ui-tip-name { color: var(--sv-ink-tertiary); overflow-wrap: anywhere; }

.ui-chart-table .table-wrap { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .ui-chart-marks { animation: none; }
  .ui-chart-dot, .ui-chart-slice, .ui-pie-list li { transition: none; }
}