/*
 * A company's own ten years of one figure (ChartsHelper#history_line_tag,
 * tasks/growth/milestones/17 D8): an ink line the width of its card, a dashed
 * rule at the median, and the latest, median, high and low set under it. The
 * SVG stretches to the card (`preserveAspectRatio="none"`), so the strokes
 * keep their width with `vector-effect` and the labels are HTML, not SVG text
 * the stretch would distort.
 */
@layer components {
  .history-line {
    margin: 0;
  }

  .history-line__chart {
    display: block;
    inline-size: 100%;
    block-size: 96px;
    overflow: visible;
  }

  .history-line__line {
    fill: none;
    stroke: var(--color-ink);
    stroke-width: 1.25;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .history-line__median {
    stroke: var(--color-ink-muted);
    stroke-width: 1;
    stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke;
  }

  .history-line__labels {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-sm);
    margin: var(--space-2xs) 0 0;
    font-family: var(--font-data);
    font-size: var(--text-ui-sm);
    font-variant-numeric: tabular-nums lining-nums;
  }

  .history-line__label {
    display: flex;
    gap: var(--space-2xs);

    & dt {
      color: var(--color-ink-muted);
    }

    & dd {
      margin: 0;
    }
  }
}