/* Season trend — named series over a season, as lines or steps.
 * ---------------------------------------------------------------------- */

@layer components {
  /* A key under the drawing, so the wrapper is a column and the drawing takes
     what the key leaves, the way the bar chart already does. */
  .season-trend {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    inline-size: 100%;
  }

  .season-trend__svg {
    inline-size: 100%;
    block-size: auto;
  }

  .season-trend__grid line {
    stroke: var(--color-ink-lightest);
    stroke-width: 1;
  }

  .season-trend__axes line {
    stroke: var(--color-ink-lighter);
    stroke-width: 1;
  }

  .season-trend__axes text {
    fill: var(--color-ink-medium);
    font-family: var(--font-mono);
  }

  .season-trend__series path {
    fill: none;
    stroke: var(--series-color);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
  }

  .season-trend__end {
    fill: var(--series-color);
  }
}