/*
 * chart.css — SVG line chart + sparkline styles.
 *
 * The line, dots, and area fill all use `currentColor`; renderLineChart sets
 * the <svg> `color` from opts.color, so one value drives the whole mark.
 * Axis labels and the empty-state message use the muted text token instead.
 */

.chart {
  position: relative;
  width: 100%;
}

.chart__svg {
  display: block;
  width: 100%;
}

.chart__grid-line {
  stroke: var(--border);
  stroke-width: 1;
}

.chart__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart__dot {
  fill: currentColor;
}

.chart__target-line {
  stroke: var(--danger);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

.chart__target-label {
  font-size: 0.6875rem;
  fill: var(--danger);
  font-weight: 600;
}

.chart__area {
  fill: currentColor;
  opacity: 0.12;
}

.chart__label {
  font-size: 0.6875rem;
  fill: var(--text-muted);
}

.chart__empty {
  font-size: 0.875rem;
  fill: var(--text-muted);
}

/* Sparkline: thinner line (dots/grid/labels are omitted in JS). */
.chart--sparkline .chart__line {
  stroke-width: 1.5;
}