/*
 * The business profile's two charts (ProfileChartsHelper,
 * tasks/growth/milestones/19-tasks T10): the cost waterfall, a row a step from
 * revenue to operating income, and five years of revenue as columns, the
 * guided year lighter. Each bar is an SVG rect that stretches with its track
 * (`preserveAspectRatio="none"`); the labels and figures are HTML beside it,
 * so the type never stretches with it.
 *
 *   .profile-chart__rows      the waterfall: label, track, figure
 *   .profile-chart__columns   the revenue columns; `--columns` from the markup
 */
@layer components {
  .profile-chart {
    margin-block: var(--space-md) var(--space-lg);
    font-family: var(--font-ui);
    font-size: var(--text-ui);
  }

  .profile-chart__caption {
    margin-block-end: var(--space-xs);
    color: var(--color-ink-muted);
  }

  .profile-chart__rows {
    display: grid;
    gap: var(--space-2xs);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .profile-chart__row {
    display: grid;
    grid-template-columns: minmax(8rem, 2fr) 3fr minmax(5rem, auto);
    gap: var(--space-xs);
    align-items: center;
    margin: 0;
  }

  .profile-chart__track {
    display: block;
    inline-size: 100%;
    block-size: 0.875rem;
  }

  .profile-chart__bar {
    fill: var(--color-ink);
  }

  .profile-chart__bar--total {
    fill: var(--color-ink);
  }

  .profile-chart__bar--cost {
    fill: var(--color-ink-muted);
  }

  .profile-chart__bar--guidance {
    fill: var(--color-forecast);
  }

  .profile-chart__value {
    text-align: end;
  }

  .profile-chart__columns {
    display: grid;
    grid-template-columns: repeat(var(--columns, 6), minmax(0, 1fr));
    gap: var(--space-xs);
    align-items: end;
    list-style: none;
    padding: 0;
    margin: 0;

    & .profile-chart__track {
      block-size: 8rem;
    }

    & .profile-chart__value,
    & .profile-chart__label {
      text-align: center;
    }
  }

  .profile-chart__column {
    display: grid;
    gap: var(--space-2xs);
    margin: 0;
  }

  .profile-chart__label {
    color: var(--color-ink-muted);
  }
}