/* =============================================================================
   airshed.css — the Airshed desk's own sheet                          (labs 557)
   -----------------------------------------------------------------------------
   Everything this page adds to the house sheet (site.css, sun/'s copy, byte for
   byte) lives here under one prefix, aq-. It is written in the house tokens
   only (--ink, --ink-77, --ink-55, --paper, --tint, --line, --accent, --unsure,
   --taken), which dark.css redefines under html[data-dark], so ONE sheet serves
   both editions and there is no second file and no html[data-dark] rule here
   but two (the swatch rim and the alert ground).

   THE SIX COLOURS ARE NOT THE HOUSE'S. They are EPA's standard AQI colour
   formulas (Technical Assistance Document for the Reporting of Daily Air
   Quality, May 2026, Table 2), which AirNow's Data Exchange Guidelines ask
   every display of its data to use:
       Green 0,228,0 · Yellow 255,255,0 · Orange 255,126,0 · Red 255,0,0 ·
       Purple 143,63,151 · Maroon 126,0,35
   They are the same in both editions, and they are only ever a SWATCH with a
   rim: no text is set on them (yellow on white is 1.07:1), and no swatch
   stands alone — its category is always written beside it, with its level out
   of six in words and as pips.
   ========================================================================== */

.aq-c1 { --aq-c: rgb(0, 228, 0); }
.aq-c2 { --aq-c: rgb(255, 255, 0); }
.aq-c3 { --aq-c: rgb(255, 126, 0); }
.aq-c4 { --aq-c: rgb(255, 0, 0); }
.aq-c5 { --aq-c: rgb(143, 63, 151); }
.aq-c6 { --aq-c: rgb(126, 0, 35); }
.aq-c0 { --aq-c: transparent; }

.aq-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.aq-stat { margin: 0 0 0 auto; font-size: .78rem; letter-spacing: .02em; color: var(--ink-55); text-align: right; }
.aq-stat.is-bad { color: var(--taken); font-weight: 600; }
.aq-stat.is-old { color: var(--unsure); font-weight: 600; }

/* ---------------------------------------------------------------- the form */
.aq-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem; }
.aq-fld { flex: 0 1 11rem; min-width: 8.5rem; }
.aq-fld .lbl { margin-bottom: .45rem; }
.aq-zip { width: 100%; min-height: 46px; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 10px;
    background: var(--paper); color: var(--ink); font: inherit; font-size: 1.15rem; font-weight: 600;
    letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.aq-zip::placeholder { color: var(--ink-55); font-weight: 400; opacity: .7; }
.aq-zip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.aq-zip[aria-invalid="true"] { border-color: var(--taken); }
.aq-form .btn { min-height: 46px; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; white-space: nowrap; }
.aq-form .btn[disabled] { opacity: .55; cursor: progress; }
.aq-note { margin: 0; max-width: 62ch; }
.aq-note.is-bad { color: var(--taken); font-weight: 600; }

.aq-wait { margin: 0; color: var(--ink-55); font-size: .92rem; max-width: 62ch; }
.aq-fc, .aq-mon, .aq-model { display: grid; gap: 1rem; }

/* -------------------------------------------------------------- the alerts */
.aq-alerts { display: grid; gap: .6rem; }
.aq-alerts:empty { display: none; }
.aq-alert { margin: 0; padding: .75rem .95rem; border: 1px solid var(--line); border-left: 4px solid var(--unsure);
    border-radius: 10px; background: var(--tint); color: var(--ink-77); font-size: .9rem; line-height: 1.5; }
.aq-alert b { color: var(--ink); }
.aq-alert--bad { border-left-color: var(--taken); }
.aq-alert .btn { margin-left: .6rem; min-height: 44px; }

/* -------------------------------------------------------------- the reading */
.aq-out { display: grid; gap: 1.15rem; }
.aq-place { margin: 0; font-size: 1.12rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.aq-place span { display: block; margin-top: .2rem; font-size: .84rem; font-weight: 400; letter-spacing: 0; color: var(--ink-55); }

.aq-read { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem 1.6rem; align-items: center;
    padding: 1.15rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.aq-num { margin: 0; display: grid; justify-items: center; gap: .15rem; min-width: 6.2rem; padding: .2rem .4rem .5rem;
    border-bottom: 10px solid var(--aq-c, transparent); box-shadow: 0 1px 0 var(--ink-55); }
.aq-num b { font-size: clamp(3.2rem, 9vw, 4.8rem); font-weight: 600; letter-spacing: -.05em; line-height: .95;
    color: var(--ink); font-variant-numeric: tabular-nums; }
.aq-num span { font-size: .625rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-55); }
.aq-num--none b { font-size: 2.2rem; color: var(--ink-55); }
.aq-sum { display: grid; gap: .5rem; min-width: 0; }
.aq-cat { margin: 0; font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); }
.aq-line { margin: 0; font-size: .95rem; color: var(--ink-77); line-height: 1.5; }
.aq-line b { color: var(--ink); font-weight: 600; }
.aq-when { margin: 0; font-size: .84rem; color: var(--ink-55); line-height: 1.5; }
/* a neighbouring area's reading, said beside the number: a tag (words, not colour) and the distance */
.aq-nbr { margin: 0; font-size: .9rem; color: var(--ink-77); line-height: 1.5; }
.aq-nbr .aq-tag, .aq-line .aq-tag { margin-right: .3rem; }
.aq-line .aq-chip { vertical-align: middle; }

/* a swatch with its words: never the swatch alone */
.aq-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; text-align: left; vertical-align: middle; }
.aq-sw { flex: none; display: inline-block; width: 1.05rem; height: 1.05rem; border-radius: 4px; background: var(--aq-c, transparent);
    border: 1px solid var(--ink-55); }
.aq-chip__t { font-weight: 600; color: var(--ink); }
.aq-lv { flex-basis: 100%; font-size: .72rem; font-weight: 400; letter-spacing: .02em; color: var(--ink-55); }
.aq-pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.aq-pips i { display: block; width: 14px; height: 8px; border-radius: 2px; border: 1px solid var(--ink-55); background: transparent; }
.aq-pips i.is-on { background: var(--ink); border-color: var(--ink); }
.aq-level { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin: 0; font-size: .8rem; color: var(--ink-55); }

/* EPA's words */
.aq-words { margin: 0; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); display: grid; gap: .7rem; }
.aq-words h3 { margin: 0; font-size: .625rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-55); }
.aq-words p { margin: 0; color: var(--ink-77); line-height: 1.55; max-width: 70ch; }
.aq-words p.aq-say-big { font-size: 1.08rem; color: var(--ink); }
.aq-words p b { color: var(--ink); font-weight: 600; }
.aq-words .aq-foot { font-size: .8rem; color: var(--ink-55); }

/* a small table that turns into rows of cards on a phone */
.aq-tbl-wrap { border: 1px solid var(--line); border-radius: 14px; background: var(--paper); overflow: hidden; }
.aq-tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.aq-tbl caption { text-align: left; padding: .8rem 1rem .2rem; font-size: .625rem; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--ink-55); }
.aq-tbl th, .aq-tbl td { padding: .7rem 1rem; text-align: left; vertical-align: top; border-top: 1px solid var(--line); color: var(--ink-77); }
.aq-tbl thead th { border-top: 0; font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-55); white-space: nowrap; }
.aq-tbl tbody th { font-weight: 600; color: var(--ink); }
.aq-tbl td.aq-n, .aq-tbl th.aq-n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.aq-tbl .aq-sub { display: block; font-size: .78rem; font-weight: 400; color: var(--ink-55); margin-top: .15rem; }
.aq-tbl .aq-val { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.aq-vals { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.aq-vals li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
.aq-tag { display: inline-block; padding: .08rem .45rem; border: 1px solid var(--line); border-radius: 999px; font-size: .68rem; font-weight: 600;
    letter-spacing: .04em; color: var(--ink-55); white-space: nowrap; }
.aq-tag--far { border-color: var(--unsure); color: var(--unsure); }

.aq-srcline { margin: 0; font-size: .8rem; color: var(--ink-55); line-height: 1.55; max-width: 78ch; }
.aq-srcline b { color: var(--ink-77); font-weight: 600; }

/* ------------------------------------------------------------- the forecast */
.aq-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .9rem; }
.aq-day { margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); display: grid; gap: .6rem; align-content: start; }
.aq-day h3 { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.aq-day h3 span { display: block; margin-top: .15rem; font-size: .78rem; font-weight: 400; letter-spacing: 0; color: var(--ink-55); }
.aq-day__n { margin: 0; display: flex; align-items: baseline; gap: .6rem; }
.aq-day__n b { font-size: 2.2rem; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
    padding-bottom: .25rem; border-bottom: 6px solid var(--aq-c, transparent); }
.aq-day__n span { font-size: .8rem; color: var(--ink-55); }
.aq-day p { margin: 0; font-size: .88rem; color: var(--ink-77); line-height: 1.5; }
.aq-day .aq-action { font-weight: 600; color: var(--taken); }
.aq-disc { border-top: 1px solid var(--line); padding-top: .2rem; }
.aq-disc summary { cursor: pointer; padding: .7rem 0; min-height: 44px; display: flex; align-items: center; font-size: .84rem; font-weight: 600; color: var(--ink); }
.aq-disc summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.aq-disc p { white-space: pre-line; font-size: .88rem; color: var(--ink-77); line-height: 1.55; max-width: 78ch; }

/* --------------------------------------------------------------- the model */
.aq-mbadge { display: inline-block; padding: .2rem .6rem; border: 1px solid var(--ink); border-radius: 6px; font-size: .68rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.aq-mhead { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0; }
.aq-mhead p { margin: 0; font-size: .95rem; color: var(--ink-77); }
.aq-mhead p b { color: var(--ink); }
.aq-strip { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.aq-strip .aq-bar { fill: var(--aq-c); stroke: var(--ink-55); stroke-width: .5; }
.aq-strip .aq-grid { stroke: var(--line); stroke-width: 1; }
.aq-strip .aq-now { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 3; }
.aq-strip text { fill: var(--ink-55); font-size: 10px; font-family: inherit; }

/* --------------------------------------------------------------- the scale */
.aq-scale-wrap { margin-top: 1.6rem; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); overflow: hidden; }
.aq-scale { width: 100%; border-collapse: collapse; font-size: .92rem; }
.aq-scale th, .aq-scale td { padding: .8rem 1rem; text-align: left; vertical-align: top; border-top: 1px solid var(--line); color: var(--ink-77); line-height: 1.5; }
.aq-scale thead th { border-top: 0; font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-55); }
.aq-scale tbody th { min-width: 13rem; font-weight: 400; }
.aq-rng { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

.aq-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2.4rem; margin-top: 1.8rem; }
.aq-cols p { margin: 0 0 1.1rem; color: var(--ink-77); line-height: 1.6; max-width: 62ch; }
.aq-cols a, .aq-src a, .aq-srcline a, .aq-words a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.aq-h3 { margin: 0 0 .5rem; font-size: 1.12rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.aq-sens { margin: 0; }
.aq-sens dt { margin: .8rem 0 .2rem; font-weight: 600; color: var(--ink); }
.aq-sens dd { margin: 0; color: var(--ink-77); line-height: 1.55; max-width: 62ch; }
.aq-src { margin: 1.2rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.aq-src dl { margin: 0; display: grid; gap: .2rem; }
.aq-src dt { margin-top: .9rem; font-weight: 600; color: var(--ink); }
.aq-src dd { margin: 0; color: var(--ink-77); line-height: 1.55; max-width: 86ch; font-size: .92rem; }
.aq-src code { font-size: .86em; }

html[data-dark] .aq-sw, html[data-dark] .aq-pips i { border-color: rgba(255, 255, 255, .55); }
html[data-dark] .aq-pips i.is-on { border-color: var(--ink); }

/* ------------------------------------------------------------------ phones */
@media (max-width: 720px) {
    .aq-cols { grid-template-columns: minmax(0, 1fr); }
    .aq-stat { flex-basis: 100%; margin-left: 0; text-align: left; }
    .aq-read { grid-template-columns: minmax(0, 1fr); justify-items: start; }
    .aq-num { justify-items: start; }
    .aq-fld { flex: 1 1 100%; }
    .aq-form .btn { flex: 1 1 9.5rem; justify-content: center; }
    .aq-scale tbody th { min-width: 0; }
    .aq-scale thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .aq-scale tr { display: block; padding: .85rem 1rem; border-top: 1px solid var(--line); }
    .aq-scale tbody tr:first-child { border-top: 0; }
    .aq-scale th, .aq-scale td { display: block; padding: .15rem 0; border: 0; }
    /* the monitors and the pollutants: each row a card, each cell named by its column */
    .aq-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .aq-tbl tr { display: block; padding: .8rem 1rem; border-top: 1px solid var(--line); }
    .aq-tbl tbody tr:first-child { border-top: 0; }
    .aq-tbl th, .aq-tbl td { display: block; padding: .2rem 0; border: 0; }
    .aq-tbl td[data-l]::before { content: attr(data-l); display: block; font-size: .6rem; font-weight: 700; letter-spacing: .16em;
        text-transform: uppercase; color: var(--ink-55); margin: .35rem 0 .1rem; }
    .aq-tbl td.aq-n { white-space: normal; }
}
@media (max-width: 480px) { .aq-form .btn { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .aq-form .btn { transition: none; } }