/*
 * Sparkline — an SVG polyline sized by CSS, not by its viewBox.
 *
 *   <svg class="sparkline sparkline--success" viewBox="0 0 100 32"
 *        preserveAspectRatio="none" role="img" aria-label="Health, 24h">
 *     <polyline class="sparkline__line" points="0,4 10,4 …"/>
 *   </svg>
 *
 * `preserveAspectRatio="none"` + `vector-effect: non-scaling-stroke`
 * let the box stretch to the card while the line stays 2px. The tone
 * modifier sets `color`; the line strokes currentColor.
 */
.sparkline {
    display: block;
    width: 100%;
    height: var(--height-sparkline);
    color: var(--color-primary-hi);
    overflow: visible;
}
.sparkline--sm { height: 24px; }
.sparkline--lg { height: 96px; }
.sparkline__line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.sparkline__area { fill: currentColor; opacity: 0.12; stroke: none; }
.sparkline__dot  { fill: currentColor; stroke: none; }
.sparkline__grid { stroke: var(--color-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sparkline--success { color: var(--color-success); }
.sparkline--warning { color: var(--color-warning); }
.sparkline--danger  { color: var(--color-danger); }
.sparkline--accent  { color: var(--color-accent); }
.sparkline--muted   { color: var(--color-text-dim); }