/* Media-query layer for the firecalc dashboard (DESIGN.md issue 14, criterion A3).
 *
 * styles.css holds everything that is the same at every width, and it already ships
 * the phone layout: main.layout is display:block, so the input panel, the readouts,
 * the chart and the tables stack in source order on a narrow screen. This file only
 * adds what changes with viewport width. index.html links it straight after
 * styles.css. It declares no colours, no borders and no typography of its own, so
 * there is nothing here that can drift away from the base sheet.
 *
 * Breakpoints, all min-width except the last:
 *   600px   two readouts per row, capped field width
 *   880px   input panel and results panel side by side, the one layout collapse
 *   1120px  three readouts per row, wider input column
 *   <460px  the chart keeps a legible width and scrolls inside its own box
 *
 * The rule that keeps the page body from ever scrolling sideways is minmax(0, 1fr)
 * on the results column at 880px. A grid column is min-width:auto by default, which
 * resolves to the widest thing inside it; the scenario and year tables set
 * white-space:nowrap, so an auto column would grow to the full table width and push
 * the page past the viewport. Pinning the minimum to 0 makes the column take the
 * space that is left over and hands the overflow to .table-scroll, which is the box
 * that scrolls (A3).
 */

/* --- 600px and up ---------------------------------------------------------- */

@media (min-width: 37.5rem) {
  body {
    padding-inline: 1.5rem;
  }

  h1 {
    font-size: 2rem;
  }

  .readouts,
  .assumptions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Once the panels are wider than a phone, a full-bleed box for six digits reads
     as a mistake. Cap the control and let the label and hint above it keep their
     own measure. */
  .field input,
  .field select {
    max-width: 24rem;
  }

  .hint {
    max-width: 62ch;
  }
}

/* --- 880px and up: the layout collapse ------------------------------------- */

@media (min-width: 55rem) {
  .layout {
    display: grid;
    grid-template-columns: minmax(19rem, 24rem) minmax(0, 1fr);
    gap: var(--gap);
    align-items: start;
  }

  /* The grid gap does the spacing between panels now. */
  .panel {
    margin-bottom: 0;
  }

  /* The input column is about 24rem here, narrower than the panel was at tablet
     width, so the cap from the previous breakpoint has nothing left to do. */
  .field input,
  .field select {
    max-width: none;
  }
}

/* --- 1120px and up --------------------------------------------------------- */

@media (min-width: 70rem) {
  .layout {
    grid-template-columns: minmax(21rem, 26rem) minmax(0, 1fr);
    gap: var(--gap-lg);
  }

  .readouts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- below 460px ----------------------------------------------------------- */

@media (max-width: 28.6875rem) {
  /* The chart's viewBox is 720 by 380 user units, so inside a 300px panel its 12px
     axis labels land at about 5px. Give the drawing a floor and let it scroll in
     its mount, the way the tables scroll in theirs, instead of shrinking it into an
     unreadable strip. #chart-mount is the div index.html provides around it. */
  #chart-mount {
    overflow-x: auto;
  }

  .chart {
    min-width: 26rem;
  }

  /* Six columns of nowrap figures at 360px: tighter cells put more of the table in
     view before the wrapper has to scroll. */
  .data-table th,
  .data-table td {
    padding: 0.35rem 0.5rem;
  }

  .data-table caption {
    padding: 0.5rem 0.55rem;
  }
}