/* What the charts of the panel share (owner, 2026-11-01: finer than the drawing, in the look of the site; DECISIONS 42): the colours
   of a series, each a soft gradient, and the marks beside a value. Written by hand; checked by design/_tools/check_web_css.py as
   a component's sheet is. They play where the system asks for less motion too: the owner's computer does. */
.series-1 {
  --series-from: var(--chart-series-1-from);
  --series-to: var(--chart-series-1-to);
}

.series-2 {
  --series-from: var(--chart-series-2-from);
  --series-to: var(--chart-series-2-to);
}

.series-3 {
  --series-from: var(--chart-series-3-from);
  --series-to: var(--chart-series-3-to);
}

.series-4 {
  --series-from: var(--chart-series-4-from);
  --series-to: var(--chart-series-4-to);
}

.series-5 {
  --series-from: var(--chart-series-5-from);
  --series-to: var(--chart-series-5-to);
}

.series-6 {
  --series-from: var(--chart-series-6-from);
  --series-to: var(--chart-series-6-to);
}

.series-7 {
  --series-from: var(--chart-series-7-from);
  --series-to: var(--chart-series-7-to);
}

.chart-gradients {
  position: absolute;
  inline-size: 0;
  block-size: 0;
}

.chart-gradients .from {
  stop-color: var(--series-from);
}

.chart-gradients .to {
  stop-color: var(--series-to);
}

.chart-gradients .fade {
  stop-color: var(--series-to);
  stop-opacity: 0.22;
}

.chart-gradients .gone {
  stop-color: var(--series-to);
  stop-opacity: 0;
}

.chart-swatch {
  flex: none;
  inline-size: var(--chart-swatch);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--series-from), var(--series-to));
}