/* Line charts (js/ui/components/line-chart.js): thin 2px line, 8px points with a surface ring, recessive grid. */
.chart { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.chart__svg { width: 100%; height: auto; display: block; touch-action: pan-y; overflow: visible; }

.chart__grid { stroke: var(--line); stroke-width: 1; }
.chart__tick,
.chart__axis,
.chart__reference-label { font-family: var(--font-number); font-size: 11px; fill: var(--muted); }
.chart__reference { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }

.chart__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart__point { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.chart__value { font-family: var(--font-number); font-size: 12px; font-weight: 600; fill: var(--ink); }

.chart__crosshair { stroke: var(--muted); stroke-width: 1; visibility: hidden; }
.chart__active { fill: var(--surface); stroke: var(--accent); stroke-width: 3; visibility: hidden; }
.chart--active .chart__crosshair,
.chart--active .chart__active { visibility: visible; }

.chart__readout { font-size: .8rem; color: var(--muted); min-height: 1.3em; }