/* Charts module. Marks use the --chart-* data-viz palette defined in design/tokens.css;
 * everything else uses the other design tokens. No colour is defined here. */

.chart { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.chart-title { font-weight: 600; color: var(--text); }
.chart-plot { position: relative; min-width: 0; }
.chart-plot--square { max-width: 280px; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-ui); }

.chart-tick, .chart-end-label, .chart-center-label { fill: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart-value { fill: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart-center-value { fill: var(--text); font-size: 22px; font-weight: 600; }
.chart-grid { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart-baseline { stroke: var(--chart-axis); stroke-width: 1; shape-rendering: crispEdges; }
.chart-crosshair { stroke: var(--chart-axis); stroke-width: 1; pointer-events: none; }

.chart-line { fill: none; stroke: var(--series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { fill: var(--series); fill-opacity: 0.1; stroke: none; }
.chart-dot { fill: var(--series); stroke: var(--surface); stroke-width: 2; }
.chart-mark { transition: opacity var(--dur-fast) var(--ease-out); }

/* Hit areas are bigger than the marks and invisible until focused. */
.chart-hitbox { fill: transparent; }
.chart-hit { cursor: default; outline: none; }
.chart-hit:hover .chart-mark, .chart-mark.chart-hit:hover { opacity: 0.8; }
.chart-hit:focus-visible .chart-hitbox, .chart-hitbox.chart-hit:focus-visible { fill: var(--accent-soft); stroke: var(--focus); stroke-width: 2; }
.chart-mark.chart-hit:focus-visible { stroke: var(--focus); stroke-width: 3; }

.chart-tooltip {
  position: absolute; z-index: 1; pointer-events: none; min-width: 120px; max-width: 260px;
  transform: translate(12px, -50%);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); font-size: var(--fs-sm);
}
.chart-tooltip[data-side="left"] { transform: translate(calc(-100% - 12px), -50%); }
.chart-tooltip-title { color: var(--text-muted); margin-bottom: var(--space-1); }
.chart-tooltip-row { display: flex; align-items: center; gap: var(--space-2); font-variant-numeric: tabular-nums; }

.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--text-muted); }
.chart-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.chart-key { display: inline-block; flex: none; background: var(--key, var(--series)); }
.chart-key--rect { width: 10px; height: 10px; border-radius: 2px; }
.chart-key--line { width: 14px; height: 2px; border-radius: 1px; }

.chart-table summary { cursor: pointer; font-size: var(--fs-sm); color: var(--text-muted); width: fit-content; }
.chart-table[open] summary { margin-bottom: var(--space-2); }

.chart-empty {
  display: grid; place-items: center; min-height: 160px; padding: var(--space-4);
  border-radius: var(--radius); background: var(--bg-sunken); color: var(--text-muted); font-size: var(--fs-sm);
}

.chart-progress { display: flex; gap: 2px; height: 12px; border-radius: var(--radius-pill); overflow: hidden; background: var(--bg-sunken); }
.chart-progress-seg { background: var(--series); min-width: 2px; }
.chart-progress-rest { background: var(--bg-sunken); }

.chart-spark { display: inline-block; vertical-align: middle; width: 120px; height: auto; overflow: visible; }

@media (forced-colors: active) {
  .chart-line { stroke: CanvasText; }
  .chart-key, .chart-progress-seg { forced-color-adjust: none; }
}