/*
 * Charts (plan package H-8): the chart host charts.js draws, its legend swatches, its keyboard
 * and pointer tooltip, and its table of the same values, for a screen reader only.
 *
 * Tokens only (narbis-tokens.css, through styles.css): no raw colour, and no text under 12 px.
 * The SVG itself is drawn at the host's pixel width with its own 12 px text, so nothing here
 * scales it; width: 100% only matters while printing, when the page is narrower than it was.
 */

.chart { position: relative; }
.chart > svg { display: block; width: 100%; height: auto; }
.chart:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: var(--shape-extra-small); }

.chart-empty .muted { padding: 22px 0; font-size: 12.5px; }

.chart-legend { margin-top: var(--space-2); }
.chart-legend .chart-swatch-step { height: 0; border-radius: 0; border-top: 2px dashed; background: none; }
.chart-legend .chart-swatch-hatch {
  width: 14px;
  height: 10px;
  border-radius: 2px;
  background: repeating-linear-gradient(45deg, var(--artifact) 0 2px, transparent 2px 5px);
}

.chart-tip {
  position: absolute;
  z-index: 2;
  max-width: min(280px, 70%);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-small);
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
  color: var(--on-surface);
  font-size: var(--type-label-medium-size);
  line-height: var(--type-label-medium-line);
  pointer-events: none;
}
.chart-tip[hidden] { display: none; }
.chart-tip > div + div { color: var(--on-surface-variant); }
.chart-tip .chart-tip-x { font-weight: 500; }

/* Read, never seen: the live region, and the chart's values as a table (WCAG 1.1.1). */
.chart-live,
.chart-table {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Pre/post small multiples: one frame per measure, each on its own domain (K-6 G-4). */
.prepost { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.prepost .frame + .frame { margin-top: 0; }

/* A tooltip left open is not part of the printed page. */
@media print { .chart-tip, .chart-live { display: none; } }

/* A markers-only series (the rejected beats on a training's tachogram, H-6): a hollow point,
   as drawn. */
.chart-legend .chart-swatch-marker { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid; background: none; }