/*
 * uPlot, routed through the design tokens.
 *
 * Beside `UplotChart.tsx` and imported by it, so every chart is styled wherever
 * it is drawn. These rules used to live in the dashboard's own CSS chunk, which
 * left a chart on Health or Home unstyled until a dashboard had been visited in
 * that session.
 *
 * Its own legend is the hover readout as well — the value each line carried at
 * the cursor — so it is styled as chart furniture rather than replaced.
 */

.u-legend {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 0.25rem;
}

/* Series labels default to the message name, which has no spaces to break at
   — and a table cannot lay out below its min-content width. */
.u-legend th {
  overflow-wrap: anywhere;
}

.u-legend .u-marker {
  width: 0.5rem;
  height: 0.5rem;
  border-width: 2px;
  border-radius: 9999px;
}

.u-legend .u-value {
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}

.u-legend .u-series.u-off {
  opacity: 0.4;
}

.u-cursor-x,
.u-cursor-y {
  border-color: color-mix(in srgb, var(--muted-foreground) 55%, transparent);
}

.u-select {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}