/* Air desk. The AQI scale, the arc, the region list.

   The band colours are EPA's, because people recognise them and because a
   site that repaints an official scale in its own palette is editing the
   source. What is tuned is everything around them: on a #0e0d0b page, six
   saturated bands at full strength is a rainbow that shouts, so the band you
   are actually in carries full colour and the rest sit back at low opacity.
   The scale still reads left to right in EPA's order, and the one band that
   matters is the one that is lit. */

/* The air accent (--sec-air) lives with the other section colors in
   css/app.css; feature.css wires it to --page-accent. */

:root {
  --aqi-1: #00e400;  /* Good */
  --aqi-2: #ffff00;  /* Moderate */
  --aqi-3: #ff7e00;  /* Unhealthy for Sensitive Groups */
  --aqi-4: #ff0000;  /* Unhealthy */
  --aqi-5: #8f3f97;  /* Very Unhealthy */
  --aqi-6: #7e0023;  /* Hazardous */
}

/* Text sitting on an EPA colour. Yellow and green need dark ink; the rest
   need light. Stated per band rather than computed, because getting this
   wrong makes a category unreadable at the exact moment it matters. */
.on-aqi-1, .on-aqi-2, .on-aqi-3 { color: #14130f; }
.on-aqi-4, .on-aqi-5, .on-aqi-6 { color: #fff; }

/* ——— layout ———

   A card grid, not two columns. Two columns put the reading, the trend, the
   sky and a camera in one stack and the region list in the other, so at 1440
   the left ran 1,175px and the right stopped at 689 — nearly five hundred
   pixels of dead black beside the page. Four cards on a named grid balance
   instead, and the same four stack on a phone without a second set of rules. */

/* Full width with the site's gutters, because .wrap carries no max-width and
   a centred 1500px grid under a full-width header reads as a mistake at 1900.
   Wide screens get a third column instead of empty margins; the measure is
   held inside the cards, where it belongs, not by starving the layout. */
.air-work {
  display: grid;
  gap: 0.9rem;
  padding: 0 var(--gutter) 2rem;
  align-items: start;
  grid-template-areas: "now" "arc" "sky" "region";
}
@media (min-width: 900px) {
  .air-work {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "now    now"
      "arc    sky"
      "region region";
  }
}
@media (min-width: 1280px) {
  /* Wide: the reading leads, the region stands beside it full height, and the
     trend and the sky sit under the reading rather than below the fold. */
  .air-work {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr);
    grid-template-areas:
      "now now region"
      "arc sky region";
  }
}
.air-now    { grid-area: now; }
.air-arc    { grid-area: arc; }
.air-sky    { grid-area: sky; }
.air-region { grid-area: region; }

.air-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.05rem 1.15rem 1.2rem;
}
.air-card h2 { font-size: 0.95rem; margin: 0 0 0.15rem; }
.air-card > .count { margin: 0 0 0.8rem; }

/* ——— the reading ——— */

.air-now {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.2rem 1.15rem;
  align-items: center;
}
.air-figure { display: flex; align-items: baseline; gap: 0.4rem; }
.air-head { align-self: center; }
.air-aqi {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 11vw, 4.6rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
}
.air-aqi[data-level="1"] { color: var(--aqi-1); }
.air-aqi[data-level="2"] { color: var(--aqi-2); }
.air-aqi[data-level="3"] { color: var(--aqi-3); }
.air-aqi[data-level="4"] { color: var(--aqi-4); }
.air-aqi[data-level="5"] { color: var(--aqi-5); }
.air-aqi[data-level="6"] { color: var(--aqi-6); }
.air-aqi-unit { font-size: 0.72rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.1em; }
.air-cat { font-size: 1.35rem; font-weight: 700; line-height: 1.15; margin: 0; }
/* The hour and the agency. Never optional: an AQI with no hour on it is a
   number pretending to be current. */
.air-when { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--muted); line-height: 1.45; }
.air-when b { color: var(--paper); font-weight: 600; }
.air-guide {
  grid-column: 1 / -1;
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--paper);
  max-width: 60ch;
}
.air-action {
  grid-column: 1 / -1;
  margin: 0.7rem 0 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--amber-dim);
  border-radius: var(--radius);
  background: rgba(227, 160, 8, 0.08);
  font-size: 0.85rem;
}
.air-who { grid-column: 1 / -1; margin-top: 1.1rem; }

/* ——— the scale ———

   Segments and a marker, in CSS. This was an SVG with viewBox="0 0 100 15"
   and width:100%, which is fine at 390px and catastrophic at 1900: the height
   scales with the width, so the bar rendered 285px tall with 190px lettering
   sitting across the rest of the page. Nothing about a labelled bar needs
   vector scaling — text should be text, at a real font size, at every width. */

.air-scale { grid-column: 1 / -1; margin-top: 1.15rem; max-width: 680px; }
.scale-bar {
  position: relative;
  display: flex;
  gap: 3px;
  margin-top: 1.1rem;
}
.scale-seg {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 12px;
  border-radius: 3px;
  opacity: 0.22;
}
.scale-seg[data-level="1"] { background: var(--aqi-1); }
.scale-seg[data-level="2"] { background: var(--aqi-2); }
.scale-seg[data-level="3"] { background: var(--aqi-3); }
.scale-seg[data-level="4"] { background: var(--aqi-4); }
.scale-seg[data-level="5"] { background: var(--aqi-5); }
.scale-seg[data-level="6"] { background: var(--aqi-6); }
.scale-seg.is-on { opacity: 1; }
/* Only the band you are in is named. Six labels under a 358px bar is four
   ellipses and no information. */
.scale-name {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--paper);
  white-space: nowrap;
  opacity: 0;
}
.scale-seg.is-on .scale-name { opacity: 1; }
.scale-mark {
  position: absolute;
  top: -7px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  background: var(--paper);
  border-radius: 1px;
}
.scale-mark::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--paper);
}
.air-scale-note {
  margin-top: 1.5rem;
  font-size: 0.72rem;
  color: var(--faint);
}

/* ——— the arc ——— */




.air-arc svg { display: block; width: 100%; max-width: 480px; height: auto; overflow: visible; }
/* Measured and predicted must not look alike. Solid dot, solid line for what
   a monitor read; hollow dot, dashed line for what an agency expects. */
.arc-line-obs { stroke: var(--paper); stroke-width: 2; fill: none; }
.arc-line-fc { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 4 4; fill: none; }
.arc-dot-fc { fill: var(--bg); stroke-width: 2; }
.arc-label { font-size: 11px; fill: var(--muted); font-family: var(--font-ui); }
.arc-rule { stroke: var(--line); stroke-width: 1; opacity: 0.45; }
.arc-band { font-size: 10px; fill: var(--faint); font-family: var(--font-ui); }
.arc-value { font-size: 12px; fill: var(--paper); font-family: var(--font-clock); font-weight: 500; }

/* ——— haze: the other half of the answer ——— */



.air-sky-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; align-items: baseline; }
.air-sky-fig { font-family: var(--font-clock); font-size: 1.35rem; color: var(--paper); }
.air-sky-fig small { font-size: 0.7rem; color: var(--faint); margin-left: 0.2rem; }
.air-sky-lab { font-size: 0.72rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; display: block; }
/* Said once, quietly, and only where two sources are on screen together. */
.air-sky-note { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--muted); max-width: 62ch; }

.air-cam { margin-top: 0.8rem; }
.air-cam img {
  display: block;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.air-cam figcaption { margin-top: 0.3rem; font-size: 0.75rem; color: var(--muted); }

/* ——— the place dock ——— */

/* Each chip carries its own reading, so scanning the dock is scanning the
   region. Fixed basis or a long strip becomes slivers instead of scrolling —
   this has broken twice elsewhere on the site. */
.air-places { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; padding: 0.5rem 0; }
.air-places::-webkit-scrollbar { display: none; }
.air-places button {
  flex: 0 0 8.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-height: var(--target);
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
}
.air-places button[aria-current="true"] { border-color: var(--amber); color: var(--paper); background: var(--surface-2); }
.air-places .p-name { font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.air-places .p-aqi { font-family: var(--font-clock); font-size: 0.95rem; font-weight: 500; }
.air-places .p-aqi[data-level="1"] { color: var(--aqi-1); }
.air-places .p-aqi[data-level="2"] { color: var(--aqi-2); }
.air-places .p-aqi[data-level="3"] { color: var(--aqi-3); }
.air-places .p-aqi[data-level="4"] { color: var(--aqi-4); }
.air-places .p-aqi[data-level="5"] { color: var(--aqi-5); }
.air-places .p-aqi[data-level="6"] { color: var(--aqi-6); }

/* ——— the region list ——— */



.air-list { display: grid; gap: 0.4rem; margin-top: 0.8rem; }
/* On a phone the list simply runs; there is nothing beside it to unbalance.
   On a grid it must not drive the row heights — 48 areas is 3,400px, and
   because this card spans both rows it stretched row one and pushed the
   trend and the sky down below three thousand pixels of list. It scrolls in
   place instead, and says how many it holds. */
@media (min-width: 900px) {
  .air-region { position: sticky; top: 0.5rem; }
  .air-list {
    max-height: min(58vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.35rem;
  }
  .air-list::-webkit-scrollbar { width: 8px; }
  .air-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
  .air-list::-webkit-scrollbar-track { background: transparent; }
}
.air-row {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  gap: 0.8rem;
  align-items: center;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--paper);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.air-row:hover { border-color: var(--amber); }
.air-row[data-level="1"] { border-left-color: var(--aqi-1); }
.air-row[data-level="2"] { border-left-color: var(--aqi-2); }
.air-row[data-level="3"] { border-left-color: var(--aqi-3); }
.air-row[data-level="4"] { border-left-color: var(--aqi-4); }
.air-row[data-level="5"] { border-left-color: var(--aqi-5); }
.air-row[data-level="6"] { border-left-color: var(--aqi-6); }
.air-row .r-aqi { font-family: var(--font-clock); font-size: 1.15rem; text-align: right; }
.air-row .r-name { display: block; font-size: 0.9rem; font-weight: 600; line-height: 1.25; }
.air-row .r-cat { display: block; font-size: 0.75rem; color: var(--muted); }
.air-row .r-trend { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.air-row.is-forecast .r-aqi { color: var(--faint); font-size: 0.85rem; }

.air-more {
  width: 100%;
  margin-top: 0.6rem;
  min-height: var(--target);
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.air-more:hover { border-color: var(--amber); }

.air-discussion {
  margin-top: 1.1rem;
  padding: 0.8rem 0.9rem;
  border-left: 3px solid var(--line);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.air-discussion p { margin: 0; font-size: 0.86rem; line-height: 1.55; max-width: 68ch; }
.air-discussion cite { display: block; margin-top: 0.4rem; font-size: 0.74rem; color: var(--faint); font-style: normal; }

.air-stale {
  margin: 0 var(--gutter) 1rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--amber-dim);
  border-radius: var(--radius);
  font-size: 0.85rem;
}



@media (max-width: 420px) {
  .air-places button { flex-basis: 7.5rem; }
  .air-now { gap: 0.3rem 0.9rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .air-row, .air-places button { transition: border-color 120ms ease; }
}