/*
 * A company's metric page (companies/metrics/show; tasks/growth/milestones/10,
 * M10e): the company chrome, then a column of the opening paragraph, the
 * chart, the annual and quarterly tables side by side from 1024px, the own-
 * history track, the peers and the definition. Tables are `.data-table` in
 * `.table-scroll` and scroll in their own box on a phone.
 */
@layer pages {
  .metric-page {
    --metric-chart-height: 300px;

    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .metric-page__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);

    & > .heading {
      margin-block-end: 0;
    }
  }

  .metric-page__chart {
    block-size: var(--metric-chart-height);
  }

  .metric-page__tables {
    display: grid;
    gap: var(--space-lg);
    align-items: start;

    @media (width >= 1024px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* A company's name after its ticker in a comparison, quieter and cut
     short rather than wrapping the row. */
  .metric-page__name {
    color: var(--color-ink-muted);
    font-weight: var(--weight-regular);
  }

  /* A peer's comparison with the company, after its name. */
  .metric-page__compare {
    margin-inline-start: var(--space-2xs);
    font-size: var(--text-ui-sm);
    font-weight: var(--weight-regular);
  }
}