/* Air quality explorer.  Layers on styles.css -- every colour here comes from
   that file's custom properties, so light/dark and any future recolour of
   --accent carry through with no edit. AQI category colours are the one
   exception: they are EPA's, fixed by regulation, and must not be themed. */

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:.6rem 1rem;border-radius:0 0 var(--r-sm) 0;z-index:100}
.skip:focus{left:0}

/* ---------------------------------------------------------------- hero ---- */
.aq-hero{padding:calc(var(--nav-h,64px) + 3.2rem) 0 2rem;background:var(--bg-alt);
  border-bottom:1px solid var(--line)}
.aq-hero h1{font-family:var(--serif);font-size:clamp(1.9rem,4.4vw,3rem);
  line-height:1.08;margin:.35rem 0 .7rem;letter-spacing:-.02em}
.aq-lede{max-width:60ch;color:var(--ink-2);font-size:1.03rem;line-height:1.65}
.aq-cycle{margin-top:1rem;font-family:var(--mono);font-size:.8rem;
  color:var(--ink-3);letter-spacing:.01em}

/* -------------------------------------------------------------- picker ---- */
.aq-picker{display:grid;gap:1rem;margin-bottom:1.6rem}
.aq-search{position:relative;max-width:34rem}
.aq-search label{display:block;font-size:.78rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);
  margin-bottom:.4rem}
.aq-search input{width:100%;padding:.8rem 1rem;font:inherit;font-size:1rem;
  color:var(--ink);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--shadow)}
.aq-search input:focus{outline:2px solid var(--accent);outline-offset:1px;
  border-color:var(--accent)}
.aq-results{position:absolute;z-index:20;top:100%;left:0;right:0;margin:.35rem 0 0;
  padding:.3rem;list-style:none;max-height:19rem;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--shadow-lg)}
.aq-results li{padding:.5rem .7rem;border-radius:var(--r-sm);cursor:pointer;
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.aq-results li[aria-selected="true"],.aq-results li:hover{background:var(--accent-soft)}
.aq-results .r-name{font-weight:600}
.aq-results .r-meta{font-size:.76rem;color:var(--ink-3);white-space:nowrap}
.aq-results .r-aqi{font-family:var(--mono);font-size:.78rem;padding:.1rem .4rem;
  border-radius:4px;font-weight:600}
.aq-quick{display:flex;flex-wrap:wrap;gap:.4rem}

/* ------------------------------------------------------------ headline ---- */
.aq-empty{padding:2.5rem 0;color:var(--ink-3)}
.aq-headline{display:grid;grid-template-columns:auto 1fr;gap:1.2rem 1.5rem;
  align-items:center;padding:1.3rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.aq-badge{width:112px;height:112px;border-radius:var(--r);display:flex;
  flex-direction:column;align-items:center;justify-content:center;
  /* EPA category colour, set inline by air.js */
  background:var(--line);transition:background .25s}
.aq-badge-num{font-family:var(--serif);font-size:2.6rem;font-weight:700;
  line-height:1;font-variant-numeric:tabular-nums}
.aq-badge-cat{font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;margin-top:.25rem;text-align:center;padding:0 .3rem}
.aq-headline-txt h2{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2rem);
  margin:0;letter-spacing:-.01em}
.aq-sub{margin:.2rem 0 0;color:var(--ink-3);font-size:.85rem}
.aq-driver{margin:.5rem 0 0;font-size:.9rem;color:var(--ink-2)}
.aq-driver strong{color:var(--ink)}
.aq-daily{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:.6rem}
.aq-day{padding:.65rem .8rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg-alt)}
.aq-day .d-date{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);font-weight:600}
.aq-day .d-val{display:flex;align-items:baseline;gap:.45rem;margin-top:.25rem}
.aq-day .d-aqi{font-family:var(--serif);font-size:1.5rem;font-weight:700;
  font-variant-numeric:tabular-nums}
.aq-day .d-cat{font-size:.72rem;font-weight:600;padding:.1rem .4rem;border-radius:4px}
.aq-day .d-meta{font-size:.72rem;color:var(--ink-3);margin-top:.2rem}
.aq-day.is-partial{border-style:dashed}

/* ------------------------------------------------------------ hour pick --- */
.aq-hourpick{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  margin:1.3rem 0 .4rem}
.aq-hourpick label{font-size:.78rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-3)}
.aq-hourpick input[type=range]{flex:1 1 16rem;accent-color:var(--accent)}
.aq-hourpick output{font-family:var(--mono);font-size:.85rem;color:var(--ink);
  min-width:15rem}

/* --------------------------------------------------------------- cards ---- */
.aq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  gap:1rem;margin-top:1rem}
.aq-card{margin:0;padding:1.1rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.aq-card-wide{grid-column:1/-1}
.aq-card figcaption h3{font-family:var(--serif);font-size:1.08rem;margin:0 0 .2rem}
.aq-card figcaption p{margin:0 0 .8rem;font-size:.82rem;color:var(--ink-3);
  line-height:1.5}
.aq-unit{font-family:var(--mono);font-size:.78rem}
.aq-chart{width:100%}
.aq-chart svg{display:block;width:100%;height:auto;overflow:visible}
.aq-chart .grid-line{stroke:var(--line);stroke-width:1}
.aq-chart .axis-txt{fill:var(--ink-3);font-size:9px;font-family:var(--sans)}
.aq-chart .series{fill:none;stroke:var(--accent);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round}
.aq-chart .series-fill{fill:var(--accent);opacity:.10}
.aq-chart .cursor-line{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.aq-chart .cursor-dot{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.aq-chart .hit{fill:transparent;cursor:pointer}
.aq-chart .band{opacity:.13}
.aq-chart .peak-txt{fill:var(--ink-2);font-size:9px;font-weight:600;
  font-family:var(--sans)}

/* -------------------------------------------------------------- tables ---- */
.aq-table-wrap{overflow-x:auto}
.aq-table{width:100%;border-collapse:collapse;font-size:.86rem}
.aq-table th,.aq-table td{text-align:left;padding:.45rem .6rem;
  border-bottom:1px solid var(--line);white-space:nowrap}
.aq-table th{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);font-weight:600}
.aq-table td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;
  text-align:right}
.aq-table tbody tr:hover{background:var(--bg-alt)}
.aq-table .is-driver{font-weight:700}
.aq-table .sub-pill{font-family:var(--mono);font-size:.78rem;font-weight:600;
  padding:.08rem .4rem;border-radius:4px}
.aq-details{margin-top:1.2rem;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface)}
.aq-details summary{padding:.75rem 1rem;cursor:pointer;font-weight:600;
  font-size:.9rem}
.aq-details summary:focus-visible{outline:2px solid var(--accent)}
.aq-details .aq-table-wrap{max-height:26rem;overflow-y:auto;padding:0 1rem 1rem}

/* ----------------------------------------------------------------- map ---- */
.aq-maptools{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;
  margin-bottom:1rem}
.chip-row{display:flex;gap:.35rem;flex-wrap:wrap}
.aq-checkbox{font-size:.86rem;color:var(--ink-2);display:flex;align-items:center;
  gap:.4rem;cursor:pointer}
.aq-mapwrap{position:relative;max-width:640px;margin:0 auto;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);padding:.6rem}
.aq-mapwrap canvas{display:block;width:100%;height:auto;
  /* One canvas pixel is one 12 km grid cell.  Do not smooth it -- a blurred
     map implies detail the model does not have. */
  image-rendering:pixelated;border-radius:var(--r-sm);cursor:crosshair}
.aq-mapwrap svg{position:absolute;top:.6rem;left:.6rem;
  width:calc(100% - 1.2rem);height:calc(100% - 1.2rem);pointer-events:none}
.aq-mapwrap .outline{fill:none;stroke:var(--ink);stroke-width:.35;opacity:.55}
.aq-mapwrap .city-dot{fill:var(--ink);opacity:.35}
.aq-mapwrap .city-sel{fill:none;stroke:var(--accent-2);stroke-width:1.1}
.aq-maphint{margin:.5rem 0 0;font-size:.76rem;color:var(--ink-3);text-align:center}
.aq-legend{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;
  margin-top:1rem;font-size:.74rem}
.aq-legend span{padding:.2rem .55rem;border-radius:4px;font-weight:600}

/* --------------------------------------------------------------- about ---- */
.aq-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  gap:1.6rem 2.4rem}
.aq-about h3{font-family:var(--serif);font-size:1.1rem;margin:1.3rem 0 .4rem}
.aq-about h3:first-child{margin-top:0}
.aq-about p{color:var(--ink-2);line-height:1.68;font-size:.94rem}
.aq-warn{color:var(--accent-2)}
.aq-caveats{padding-left:1.1rem;color:var(--ink-2);line-height:1.6;font-size:.92rem}
.aq-caveats li{margin-bottom:.5rem}
.aq-official{padding:.9rem 1rem;background:var(--accent-soft);
  border-left:3px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:.9rem}
.aq-stamp{margin-top:1.8rem;font-family:var(--mono);font-size:.74rem;
  color:var(--ink-3)}

@media (max-width:620px){
  .aq-headline{grid-template-columns:1fr;text-align:left}
  .aq-badge{width:100%;height:auto;padding:1rem;flex-direction:row;gap:.8rem;
    justify-content:flex-start}
  .aq-badge-cat{margin-top:0}
  .aq-hourpick output{min-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .aq-badge{transition:none}
}

/* ------------------------------------------------- weather additions ----- */
/* Compact "right now" strip under the city name: temperature, humidity,
   solar. Reads as data, not as decoration, so no card chrome. */
.aq-now{list-style:none;display:flex;flex-wrap:wrap;gap:.15rem 1.4rem;
  margin:.7rem 0 0;padding:0}
.aq-now li{display:flex;flex-direction:column;gap:.05rem}
.aq-now .n-lab{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);font-weight:600}
.aq-now .n-val{font-family:var(--mono);font-size:1.05rem;color:var(--ink);
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.2rem}
.aq-now .n-val i{font-style:normal;font-size:.72rem;color:var(--ink-3)}

.aq-metgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1rem 1.3rem}
.aq-metgrid h4{margin:0 0 .35rem;font-family:var(--sans);font-size:.82rem;
  font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3)}
.aq-metgrid h4 .aq-unit{text-transform:none;letter-spacing:0;color:var(--ink-3)}

/* ------------------------------------------------ units + precipitation -- */
.aq-units{display:flex;gap:.25rem;margin-right:.4rem}
.aq-units .chip-btn{min-width:2.6rem}
.aq-fineprint{margin:.9rem 0 0;font-size:.78rem;color:var(--ink-3);
  line-height:1.5;max-width:78ch}

.aq-pickhint{margin:.35rem 0 0}

/* ---------------------------------------------------- now / staleness ---- */
#nowBtn[disabled]{opacity:.45;cursor:not-allowed}
#nowBtn.is-now{background:var(--accent);color:#fff;border-color:var(--accent)}
/* A forecast whose window has passed must say so before anything else. */
.aq-stale{margin:.6rem 0 0;padding:.6rem .85rem;font-size:.86rem;
  background:var(--accent-soft);border-left:3px solid var(--accent-2);
  border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--ink-2)}
.aq-stale strong{color:var(--ink)}