/*
 * A company's revenue by segment, product and region (companies/segments;
 * tasks/growth/milestones/23, D7): a ruled section per breakdown, its table
 * flush under its heading, each figure with its share of revenue (or its
 * margin) beneath it in the muted ink — the share repeats the figure, so it
 * is set smaller and never coloured.
 *
 * The full width of the page, as the statements are, with no card around it:
 * a breakdown of seventeen years wants every column it can get. The
 * sections stand well apart, and a profit table within one stands apart
 * from the revenue table above it.
 */
@layer pages {
  .segments-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
    padding-block: var(--space-md) var(--space-xl);
  }

  .segments-page__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);

    & > .heading:not(:first-child) {
      margin-block-start: var(--space-xl);
    }
  }

  /* A Powerpack offer (companies/segments/_offer) keeps to a reading
     measure on a page that otherwise runs the window's width. */
  .segments-page__offer {
    max-inline-size: 40rem;
    margin-inline: auto;
  }

  /* The offer centred over a mock of the table it keeps back
     (companies/segments/_locked): both in one grid cell, so the block is as
     tall as the taller of the two and the card never spills past a short
     table. The mock fades back so the card is what reads. */
  .segments-lock {
    display: grid;

    & > * {
      grid-area: 1 / 1;
    }
  }

  .segments-lock__mock {
    opacity: 0.45;
    pointer-events: none;
  }

  .segments-lock__offer {
    z-index: 1;
    align-self: center;
    justify-self: center;
    inline-size: min(40rem, 100% - 2 * var(--space-md));
    margin-block: var(--space-xl);
  }

  .segments-page__note {
    max-inline-size: var(--measure);
  }

  .segments-table td {
    vertical-align: top;
  }

  .segments-table__share {
    display: block;
    color: var(--color-ink-muted);
    font-size: var(--text-meta-xs);
    line-height: var(--leading-meta-xs);
  }
}