/*
 * The revenue flow chart (companies/segments/_flow; tasks/growth/milestones/23,
 * §6a), on the Overview and atop /segments: a heading, the breakdown's
 * buttons and the period list (hidden until the `flow-chart` controller
 * connects), the chart at a fixed height so the page does not jump when it
 * draws, holding the table of the same figures that stands in for it
 * without JavaScript. A component, not a page's, because two pages draw it.
 *
 * Taller on a phone: the sankey's columns sit closer, and the labels need
 * the height to stay apart.
 */
@layer components {
  .flow-chart {
    --flow-chart-height: 32rem;

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

    @media (width >= 768px) {
      --flow-chart-height: 28rem;
    }
  }

  .flow-chart__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-lg);
  }

  .flow-chart__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-lg);
  }

  .flow-chart__period {
    inline-size: auto;
  }

  .flow-chart__chart {
    min-block-size: var(--flow-chart-height);

    & > .data-table {
      max-inline-size: var(--measure);
    }
  }
}