/* Form & Momentum — one chart, team-mates separated by line style. */

/* `max-width` and `overflow: clip` are the belt to autosize's braces. A chart
   that mis-measures itself should degrade to a clipped chart, never to a page
   that scrolls sideways. */
.mo-plot {
  width: 100%;
  max-width: 100%;
  min-height: 26rem;
  overflow-x: clip;
}

.mo-legend {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  color: var(--ink-1);
}

.mo-legend li { display: flex; align-items: center; gap: var(--space-2); }

/* The swatch repeats the line style, so the legend explains the pairing
   rather than relying on the reader inferring it from the chart. */
.mo-swatch {
  width: var(--space-6);
  height: 0;
  border-top: var(--space-1) solid var(--c);
}

.mo-swatch[data-style="dash"] { border-top-style: dashed; }