/*
 * A trend of a few lines over the periods a statement shows
 * (TrendChartHelper#trend_chart_tag): the margins under the
 * income statement's bridge, cash against debt under the balance sheet.
 * SVG drawn on the server, scaled with its box, so its text scales too; the
 * same figures are a table for screen readers. Colours are classes, because
 * an SVG attribute cannot read a custom property and a CSS rule can.
 */
@layer components {
  .trend-chart {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
  }

  .trend-chart__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-lg);
  }

  .trend-chart__keys {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-md);
    color: var(--color-ink-muted);
    font-size: var(--text-meta);
  }

  .trend-chart__key::before {
    content: "";
    display: inline-block;
    inline-size: 1rem;
    margin-inline-end: var(--space-2xs);
    vertical-align: middle;
    border-block-start: 2px solid var(--key);
  }

  .trend-chart__key--dashed::before {
    border-block-start-style: dashed;
  }

  .trend-chart__key--bar::before {
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border: 0;
    background: var(--key);
  }

  .trend-chart__key--accent { --key: var(--color-accent); }
  .trend-chart__key--soft { --key: var(--color-ramp-gain-2); }
  .trend-chart__key--neutral { --key: var(--color-median); }
  .trend-chart__key--debt { --key: var(--color-bar-loss); }

  .trend-chart__plot {
    display: block;
    inline-size: 100%;
    block-size: auto;
    overflow: visible;
  }

  .trend-chart__grid {
    stroke: var(--color-axis);
    stroke-width: 1;
  }

  .trend-chart__grid--zero {
    stroke: var(--color-ink-muted);
  }

  .trend-chart__axis {
    fill: var(--color-ink-muted);
    font-family: var(--font-data);
    font-size: 12px;
    font-variant-numeric: tabular-nums lining-nums;
  }

  .trend-chart__value {
    fill: var(--color-ink);
    font-family: var(--font-data);
    font-size: 12px;
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums lining-nums;
  }

  .trend-chart__line {
    fill: none;
    stroke-width: 2.25;
    stroke-linejoin: round;
    stroke-linecap: round;
  }

  .trend-chart__line--dashed {
    stroke-dasharray: 5 4;
  }

  .trend-chart__end {
    stroke: none;
  }

  .trend-chart__line--accent { stroke: var(--color-accent); fill: var(--color-accent); }
  .trend-chart__line--soft { stroke: var(--color-ramp-gain-2); fill: var(--color-ramp-gain-2); }
  .trend-chart__line--neutral { stroke: var(--color-median); fill: var(--color-median); }
  .trend-chart__line--debt { stroke: var(--color-bar-loss); fill: var(--color-bar-loss); }

  .trend-chart__bar {
    stroke: none;
  }

  .trend-chart__bar--accent { fill: var(--color-ramp-gain-2); }
  .trend-chart__bar--soft { fill: var(--color-ramp-gain-1); }
  .trend-chart__bar--neutral { fill: var(--color-mask); }
  .trend-chart__bar--debt { fill: var(--color-loss-tint); }

  /* The newest bar, darker. */
  .trend-chart__bar--latest.trend-chart__bar--accent { fill: var(--color-accent); }
  .trend-chart__bar--latest.trend-chart__bar--soft { fill: var(--color-ramp-gain-2); }
  .trend-chart__bar--latest.trend-chart__bar--neutral { fill: var(--color-volume); }
  .trend-chart__bar--latest.trend-chart__bar--debt { fill: var(--color-bar-loss); }

  /* A polyline takes the line's colour as its stroke only. */
  .trend-chart__line.trend-chart__line--accent,
  .trend-chart__line.trend-chart__line--soft,
  .trend-chart__line.trend-chart__line--neutral,
  .trend-chart__line.trend-chart__line--debt {
    fill: none;
  }
}