/* ==========================================================================
   COMPONENTS · SPARKLINE — hairline single-ink "fever charts" drawn as small
   multiples across categories, so a profile shows a row of tiny figures at a
   glance. The line is one ink; the terminal dot and the mono value carry the
   band as the redundant cue. SVG only, no raster. Each carries data-band.
   ========================================================================== */

.op-sparklines {
  display: grid;
  gap: var(--space-md) var(--space-lg);
}

.op-sparkline {
  display: grid;
  gap: var(--space-3xs);
  margin: 0;
}

.op-sparkline__chart {
  inline-size: 100%;
  block-size: 2rem;
  overflow: visible;
}
.op-sparkline__chart polyline,
.op-sparkline__chart path {
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* a faint baseline rule under the chart */
.op-sparkline__chart .op-sparkline__base {
  stroke: var(--rule);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.op-sparkline__dot {
  fill: var(--bk-ink, var(--text));
  stroke: var(--surface-raised);
  stroke-width: 1.5;
}

.op-sparkline__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs);
}
.op-sparkline__label {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.op-sparkline__value {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--bk-ink, var(--text));
}