/**
 * @file map-air-quality.css
 * @purpose Air quality index card, numeric US AQI legend and location forecast popups.
 * @dependencies map.html, map-mode-legends.css, shared layer-choice styles.
 * @public .layer-swatch-airquality, .air-quality-legend and .air-quality-popup.
 * @sideEffects Scoped presentation only; hidden panels retain native hidden behavior.
 */
/* Tool selector and forecast typography. */
.layer-swatch-airquality { background: linear-gradient(135deg, #00e400, #ffff00, #ff7e00, #ff0000, #8f3f97, #7e0023); }
.air-quality-legend strong, .air-quality-legend small, .air-quality-legend output { display: block; }
.air-quality-legend small, .air-quality-legend output { margin-top: .4rem; font-size: .75rem; color: #d4dce1; }
.air-quality-legend img { width: 100%; height: auto; background: white; margin-top: .5rem; border-radius: 2px; }
.air-quality-legend img[hidden] { display: none; }

/* Reading emphasis complements the shared map legend panel. */
#air-quality-readings { color: #fff; line-height: 1.6; font-weight: 600; }

/* Numeric positions match the 0–500 raster scale, including the wider upper bands. */
.air-quality-ticks { position: relative; height: 1.1rem; font-size: .65rem; color: white; }
.air-quality-ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.air-quality-ticks span:nth-child(1) { left: 0; transform: none; }
.air-quality-ticks span:nth-child(2) { left: 10%; }
.air-quality-ticks span:nth-child(3) { left: 20%; }
.air-quality-ticks span:nth-child(4) { left: 30%; }
.air-quality-ticks span:nth-child(5) { left: 40%; }
.air-quality-ticks span:nth-child(6) { left: 60%; }
.air-quality-ticks span:nth-child(7) { right: 0; transform: none; }

/* Location readings keep the AQI category and model uncertainty beside the point. */
.air-quality-popup .maplibregl-popup-content {
  padding: 1rem 1.6rem 1rem 1rem;
  color: #17252e;
  font-family: inherit;
  line-height: 1.55;
}
.air-quality-point { white-space: pre-line; font-size: .85rem; }
.air-quality-popup .maplibregl-popup-close-button { font-size: 1.25rem; }