/* Wider than the shared 860px .inner: three side-by-side charts need more
   room than a normal text column. */
section.alt > .inner {
  max-width: 1320px;
}

.article-header + section.alt {
  padding-top: 1.5rem;
}

.explanation {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.explanation p {
  max-width: 640px;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 1rem;
}

/* The forecast (see spec.md's "The forecast"): its own chapter under the
   interpretation, the chart across the full width. index.ts draws it in CSS
   pixels at whatever size it's given here, so its labels keep their size on
   any screen: as tall as 3/8 of its width, but never so tall it won't fit on
   one screen with its heading, nor so short its scale gets cramped. The
   chart's own styles are shared with own-data, in forecast-chart.css. */
.forecast-chapter {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.forecast-chapter h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* The height cap leaves room for the controls under it too, so the whole
   fan stays in view while playing. */
.forecast-chart {
  height: clamp(260px, 37.5vw, calc(100svh - 12rem));
}

@media (max-width: 1024px) {
  /* Same pinning for the forecast's controls, scoped to the forecast chart
     and its controls: scrolling down the page hands over from the replay
     transport to these, with the interpretation in between pinning
     neither. */
  .playhead-controls {
    max-width: none;
    position: sticky;
    bottom: 0;
    margin: 0;
    padding: 0.75rem max(1rem, (100% - 480px) / 2) calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
    z-index: 50;
  }
}

/* ── Presentation mode (see spec.md's "Presentation mode", ../styles.css) ──
   Two slides (presentation.ts shows only the current one): the charts, then
   the forecast. The three charts stay side by side at every wide width and grow as large
   as the screen allows: a third of the width each, or less when the height
   left over by the headings and replay controls is what runs out first (the
   charts are 4:3). The replay controls keep matching one chart's width. */
@media (min-width: 601px) {
  /* Centered when the charts run out of width before height. */
  body[data-presenting] section.alt > .inner {
    justify-content: center;
  }

  body[data-presenting] .charts-and-transport {
    --present-chart-width: min((100% - 3rem) / 3, (var(--present-height) - 14rem - var(--present-title-height)) * 4 / 3);
  }

  body[data-presenting] .charts-row {
    grid-template-columns: repeat(3, var(--present-chart-width));
    justify-content: center;
    margin-top: 0.5rem;
  }

  body[data-presenting] .chart {
    max-width: none;
  }

  body[data-presenting] .replay-transport {
    position: static;
    width: var(--present-chart-width);
    max-width: none;
    margin: 0 auto;
    padding: 0;
    background: none;
    border-top: none;
  }

  /* The forecast's slide: its heading as a label, then the chart across the
     whole width taking all the height left over, its controls centred under
     it. The chart draws itself at whatever size it ends up. Nothing scrolls
     on a slide, so the controls have nothing to stick to. */
  body[data-presenting] .forecast-chapter {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0.5rem 0 0;
    padding: 0;
    border-top: none;
  }

  body[data-presenting] .forecast-chapter h2 {
    flex-shrink: 0;
  }

  body[data-presenting] .forecast-chart-and-controls {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  body[data-presenting] .forecast-chart {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  body[data-presenting] .playhead-controls {
    flex-shrink: 0;
    position: static;
    width: 100%;
    max-width: 480px;
    margin: 0.75rem auto 0;
    padding: 0;
    background: none;
    border-top: none;
  }
}