/* Keep wide-screen controls on the same centered 1380px content column. */
@media (min-width: 1500px) {
  body > .site-header,
  #main[data-scv-view] > .masthead {
    padding-inline: calc((100% - 1380px) / 2);
  }

  #main[data-scv-view="history"] > :is(.history-view-modes, .history-link-notice),
  #history-comparison-view > .history-comparison-state {
    max-width: 1380px;
    margin-inline: auto;
  }

  #main[data-scv-view="live"] > :is(.live-disclaimer, .live-map-section, .live-records) {
    max-width: 1380px;
    margin-inline: auto;
  }

  /* Preserve the Methods reading column after its outer container stops growing. */
  #main > .methods-layout {
    padding-inline: 60px;
  }
}

/* Give secondary controls the same comfortable tap area on phones and tablets. */
@media (max-width: 1024px), (pointer: coarse) {
  /* ArcGIS controls contain 32px buttons inside their shadow roots. */
  #main :is(arcgis-zoom, arcgis-compass) {
    zoom: 1.375;
  }

  #main button,
  #main select,
  #main input[type="range"],
  #main .wind-toggle,
  #main .uncertainty-difference-control {
    min-height: 44px;
  }

  #main :is(.scv-map-options, .record-detail, .wind-records) > summary,
  #main .methods-nav a,
  html body.coast-page #main :is(.coast-trip-options, .coast-sources, .coast-airport-details) > summary,
  html body.coast-page #main .coast-buoy-card details > summary {
    min-height: 44px;
    padding-block: 13px;
  }
}

@media (max-width: 680px) {
  /* Two readable measurements per row instead of four competing for phone width. */
  html body.coast-page #main .coast-buoy-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
  }

  #main :is(input[type="search"], input[type="text"], select) {
    font-size: 16px;
  }
}

/* Cap the coastal gutter with its container, rather than the growing viewport.
   The extra specificity also keeps this stable when route CSS loads later. */
@media (min-width: 681px) {
  html body.coast-page #main {
    max-width: 1500px;
    padding-inline: min(4vw, 60px);
  }
}