/* ================================================================
   ir-city.css — City page redesign (answer → trend → context → comparison)
   Loads after ir-tokens.css + ir-home.css/ir-home-v2.css - consumes both
   token layers (--ink-*/--brand-text from ir-tokens.css, --r/--sh/--bd
   legacy aliases from ir-home.css) rather than redefining either, so this
   stays visually consistent with the existing card/table system it sits
   alongside instead of introducing a second, slightly-different look.
   ================================================================ */

/* ── .ir-live-sec's default top padding is the shared .ir-sec rule's 60px
   (ir-home.css) - fine when the section's first real content is a card
   grid, but on the city/state overview redesigns the first things in the
   section are a collapsed mini-header (0px, see below) and a slim sticky
   jump nav, so that 60px read as a large dead gap between the H1/subtitle
   above and the actual verdict content. Cut to 8px (a ~87% reduction) -
   see the ir-live-sec-tight class added in ir-location.php's PHP, applied
   only to the two overview page types this affects. ── */
.ir-live-sec-tight{padding-top:8px}

/* ── Verdict box: the "answer" - one verdict sentence before any card of
   numbers. Named .ir-verdict rather than .ir-hero deliberately - ir-home.css
   already defines a completely different, unrelated ".ir-hero" (a dark
   gradient banner used elsewhere on the site), and that class winning the
   cascade over this one is exactly the bug this naming avoids. Plain white
   card, same as every other surface on the site - no separate colour
   treatment for this box. ── */
.ir-verdict{
  background:var(--wh);
  border:1px solid var(--bd);
  border-radius:var(--r-l);
  padding:20px 22px;
  margin-bottom:20px;
}
.ir-verdict-text{
  font-size:17px;
  line-height:1.55;
  color:var(--ink);
  font-weight:500;
  margin:0;
}
.ir-verdict-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  margin-top:12px;
  font-size:12.5px;
  color:var(--ink-3);
}
.ir-verdict-meta b{color:var(--ink-2);font-weight:600}

/* ── City-page section cards (Air/Weather/Compare/Mandi/Metals) - plain
   white card, identical surface treatment to .ir-card elsewhere on the
   site (same background/border/radius tokens), just a simpler block-level
   layout since these sections stack full-width rather than sitting in a
   grid. ── */
.ir-city-sec{
  background:var(--wh);
  border:1px solid var(--bd);
  border-radius:var(--r-l);
  padding:20px 22px;
  color:var(--ink);
}

/* ── Sticky mini-header: city + current AQI, shown once the hero scrolls
   past. Hidden by default; JS toggles .on (see ir-city.js). Collapsed via
   height:0/overflow:hidden rather than transform/opacity alone - a
   transform moves the box visually but still reserves its full height in
   the page's normal flow (position:sticky doesn't take an element out of
   flow the way position:fixed/absolute would), which was leaving a blank
   gap the height of this header between the page header and the jump nav
   on EVERY location page, whether or not the mini-header had ever been
   triggered. Respects prefers-reduced-motion via ir-tokens.css's global
   transition-duration override, so no separate rule needed here. ── */
.ir-mini-hdr{
  position:sticky;
  top:0;
  z-index:45;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--wh);
  border-bottom:0 solid var(--bd);
  padding:0 16px;
  height:0;
  overflow:hidden;
  opacity:0;
  transition:height .18s ease,opacity .18s ease,padding .18s ease;
}
.ir-mini-hdr.on{height:48px;padding:10px 16px;opacity:1;border-bottom-width:1px}
.ir-mini-hdr-city{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ir-mini-hdr-aqi{display:flex;align-items:center;gap:6px;flex-shrink:0}

/* ── Sticky jump nav (Air · Weather · Compare · Mandi · Metals) ──
   Sits directly under the mini-header once both are stuck, so it needs its
   own top offset once JS marks the mini-header visible (handled by setting
   --ir-mini-hdr-h via JS to the mini-header's real rendered height). ── */
.ir-jump-nav{
  position:sticky;
  top:0;
  z-index:44;
  display:flex;
  gap:4px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--wh);
  border-bottom:1px solid var(--bd);
  padding:6px 12px;
  scrollbar-width:none;
}
.ir-jump-nav.ir-stuck{top:var(--ir-mini-hdr-h,0px)}
.ir-jump-nav::-webkit-scrollbar{display:none}
.ir-jump-link{
  flex-shrink:0;
  font-size:13px;
  font-weight:600;
  color:var(--ink-3);
  padding:8px 12px;
  border-radius:var(--radius-pill,999px);
  white-space:nowrap;
  min-height:44px;
  display:flex;
  align-items:center;
  text-decoration:none;
}
.ir-jump-link.on{background:var(--brand-tint-100);color:var(--brand-text-on-tint)}
.ir-jump-link:hover{color:var(--brand-text)}

/* ── Stat card grid: 4 cards, each with value + delta + sparkline + context ── */
.ir-stat-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-bottom:22px;
}
@media(min-width:640px){.ir-stat-grid{grid-template-columns:repeat(4,1fr)}}

.ir-stat-card{
  background:var(--wh);
  border:1px solid var(--bd);
  border-radius:var(--r);
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:44px;
}
.ir-stat-lbl{font-size:12px;font-weight:600;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.ir-stat-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ir-stat-val{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--fs-data-lg,24px);
  font-weight:700;
  color:var(--ink);
  line-height:1.1;
}
/* Delta: arrow glyph + text colour together (never colour alone) - the
   glyph itself (▲/▼) already carries the direction for anyone who can't
   distinguish the colour, same principle as the AQI band-word requirement. */
.ir-stat-delta{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600;white-space:nowrap}
.ir-stat-delta.up{color:var(--price-up)}
.ir-stat-delta.down{color:var(--price-down)}
.ir-stat-delta.flat{color:var(--price-flat)}
.ir-stat-spark{align-self:flex-start;margin:2px 0}
.ir-stat-ctx{font-size:12px;color:var(--ink-3);line-height:1.45}

/* ── Rank/percentile chip - the shareable "cleaner than 81%" framing ── */
.ir-rank-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  font-weight:600;
  color:var(--brand-text-on-tint);
  background:var(--brand-tint-100);
  border-radius:var(--radius-pill,999px);
  padding:4px 10px;
  margin-top:2px;
}

/* ── Freshness stamp ── */
.ir-freshness{font-size:12.5px;color:var(--ink-3);margin-bottom:18px}
.ir-freshness b{color:var(--ink-2);font-weight:600}

/* ── AQI-poor-or-worse promotion: the whole section gets a visible band
   accent when promoted to the top (see Part D's promotion logic) - a
   fourth signal beyond "it's just first in DOM order", for anyone
   scanning quickly. Uses the AQI severity colour as a left border only
   (never as a text/background fill on a data value, per the brand-vs-AQI
   colour rule), same restraint .ir-aqi-action already uses. ── */
.ir-sec-promoted{border-left:4px solid var(--aqi-poor);padding-left:14px}
.ir-sec-promoted.ir-sev-very-poor,.ir-sec-promoted.ir-sev-severe{border-left-color:var(--aqi-severe)}

/* ── 7-day AQI bar chart, coloured by CPCB band (reuses .ir-aqi-* band
   classes from ir-home.css - same six colours/text-pairings everywhere). ── */
.ir-aqi-bars{display:flex;align-items:flex-end;gap:6px;height:88px;margin:14px 0 4px}
.ir-aqi-bar-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:1;height:100%;gap:4px}
.ir-aqi-bar{width:100%;max-width:34px;border-radius:4px 4px 0 0;min-height:4px}
.ir-aqi-bar-lbl{font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.ir-aqi-bar-val{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;font-weight:600;color:var(--ink-2)}

/* ── Pollutant breakdown: proportional bars, dominant pollutant named ── */
.ir-pollutant-list{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.ir-pollutant-row{display:grid;grid-template-columns:64px 1fr 48px;align-items:center;gap:10px;font-size:12.5px}
.ir-pollutant-name{font-weight:600;color:var(--ink-2)}
.ir-pollutant-name.dominant{color:var(--ink)}
.ir-pollutant-track{background:var(--surface-2);border-radius:var(--radius-pill,999px);height:10px;overflow:hidden}
.ir-pollutant-fill{height:100%;border-radius:var(--radius-pill,999px)}
.ir-pollutant-val{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--ink-3)}
.ir-pollutant-dominant-note{font-size:12.5px;color:var(--ink-2);background:var(--surface-2);border-radius:var(--radius-s,8px);padding:8px 10px;margin-top:4px}

/* ── Hourly weather strip - horizontal scroll, current hour marked ── */
.ir-hourly-strip{
  display:flex;
  gap:4px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  padding:4px 2px 10px;
  margin:10px 0;
}
.ir-hourly-cell{
  scroll-snap-align:start;
  flex-shrink:0;
  width:56px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:10px 4px;
  border-radius:var(--r-s,8px);
  color:var(--ink-2);
}
.ir-hourly-cell.now{background:var(--brand-tint-50);color:var(--ink)}
.ir-hourly-time{font-size:11px;font-weight:600}
.ir-hourly-cell.now .ir-hourly-time{color:var(--brand-text-on-tint)}
.ir-hourly-icon{width:28px;height:28px}
.ir-hourly-temp{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:700}
.ir-hourly-rain{font-size:10.5px;color:var(--ink-3)}
.ir-best-window{font-size:13px;color:var(--ink-2);background:var(--surface-2);border-radius:var(--r-s,8px);padding:9px 12px;margin-top:6px;line-height:1.5}

/* ── Nearby cities → comparison table (Part G) ── */
.ir-compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--bd);border-radius:var(--r)}
.ir-compare{width:100%;border-collapse:collapse;font-size:13.5px}
.ir-compare th{text-align:left;padding:11px 14px;background:var(--bg);color:var(--ink-3);font-weight:600;font-size:12px;border-bottom:1px solid var(--bd);white-space:nowrap}
.ir-compare td{padding:12px 14px;color:var(--ink-2);white-space:nowrap}
.ir-compare tbody tr:nth-child(even){background:var(--bg)}
.ir-compare tbody tr.self{background:var(--brand-tint-50)}
.ir-compare-city{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--ink)}
.ir-compare-city a{color:inherit;text-decoration:none}
.ir-compare-city a:hover{text-decoration:underline}
.ir-compare-self-tag{font-size:10.5px;font-weight:700;color:var(--brand-text-on-tint);background:var(--brand-tint-100);border-radius:4px;padding:2px 6px}
.ir-compare td .ir-figure,.ir-compare td.ir-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ── Honest empty states (Part H) - a real reason + two real next steps,
   never a bare "check back shortly". Reuses .ir-empty's existing look
   (defined in ir-home.css) with an added actions row. ── */
.ir-empty-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
.ir-empty-actions a{
  font-size:12.5px;
  font-weight:600;
  color:var(--brand-text-on-tint);
  background:var(--brand-tint-100);
  border-radius:var(--radius-s,8px);
  padding:8px 12px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}
.ir-empty-actions a:hover{background:var(--brand-tint-50)}

/* ── AQI alert subscription form (Part E) ── */
.ir-alert-box{
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:var(--r);
  padding:16px 18px;
  margin-top:16px;
}
.ir-alert-ttl{font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:4px}
.ir-alert-sub{font-size:12.5px;color:var(--ink-3);margin-bottom:12px;line-height:1.5}
.ir-alert-form{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.ir-alert-form input[type="email"]{
  flex:1 1 200px;
  min-height:44px;
  padding:0 12px;
  font-size:14px;
  border:1px solid var(--border-strong,var(--bd));
  border-radius:var(--r-s,8px);
  background:var(--surface,#fff);
  color:var(--ink);
}
.ir-alert-form select{
  min-height:44px;
  padding:0 10px;
  font-size:14px;
  border:1px solid var(--border-strong,var(--bd));
  border-radius:var(--r-s,8px);
  background:var(--surface,#fff);
  color:var(--ink);
}
.ir-alert-form button{
  min-height:44px;
  padding:0 18px;
  font-size:14px;
  font-weight:700;
  color:var(--on-brand);
  background:var(--brand);
  border-radius:var(--r-s,8px);
  white-space:nowrap;
}
.ir-alert-form button:hover{background:var(--brand-hover)}
.ir-alert-msg{font-size:12.5px;margin-top:8px;line-height:1.5}
.ir-alert-msg.ok{color:var(--price-down)}
.ir-alert-msg.err{color:var(--price-up)}

/* ── City-specific FAQ accordion (Part J) - stacked .ir-explainer items,
   reusing that class's existing look from ir-home.css rather than a
   parallel style. ── */
.ir-faq-list{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.ir-faq-list .ir-explainer{margin-top:0}

/* ── "Not available for this city" collapsed block (Part D demotion) ── */
.ir-unavailable{
  border:1px dashed var(--bd);
  border-radius:var(--r);
  padding:14px 16px;
  margin-top:18px;
  font-size:13px;
  color:var(--ink-3);
}
.ir-unavailable-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0}
.ir-unavailable-row+.ir-unavailable-row{border-top:1px solid var(--bd)}
.ir-unavailable-row a{font-weight:600}

@media(max-width:639px){
  .ir-verdict,.ir-city-sec{padding:16px 16px}
  .ir-verdict-text{font-size:16px}
  .ir-pollutant-row{grid-template-columns:56px 1fr 40px}
}

/* ================================================================
   STATE PAGE — district table, extremes, nearby states, metals line
   ================================================================ */

/* ── Coverage line under the H1 ── */
.ir-coverage{font-size:13px;color:var(--ink-3);margin-top:4px}
.ir-coverage b{color:var(--ink-2);font-weight:600}

/* ── District filter input + live count ── */
.ir-dist-filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.ir-dist-filter-row input[type="search"]{
  flex:1 1 220px;
  min-height:44px;
  padding:0 14px;
  font-size:14px;
  border:1px solid var(--border-strong,var(--bd));
  border-radius:var(--r-s,8px);
  background:var(--surface,#fff);
  color:var(--ink);
}
.ir-dist-count{font-size:12.5px;color:var(--ink-3);white-space:nowrap}

/* ── Sortable district table - the hero of the page ── */
.ir-dist-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--bd);border-radius:var(--r)}
.ir-dist-table{width:100%;border-collapse:collapse;font-size:13.5px}
.ir-dist-table th{
  text-align:left;
  padding:0;
  background:var(--bg);
  color:var(--ink-3);
  font-weight:600;
  font-size:12px;
  border-bottom:1px solid var(--bd);
  white-space:nowrap;
}
.ir-dist-th-btn{
  display:flex;
  align-items:center;
  gap:5px;
  width:100%;
  min-height:44px;
  padding:0 14px;
  background:none;
  border:0;
  color:inherit;
  font:inherit;
  font-weight:inherit;
  text-align:left;
  cursor:pointer;
}
.ir-dist-th-btn:hover{color:var(--ink-2)}
.ir-dist-th-btn .arrow{font-size:10px;opacity:.35;flex-shrink:0}
.ir-dist-th-btn[aria-sort="ascending"] .arrow,
.ir-dist-th-btn[aria-sort="descending"] .arrow{opacity:1;color:var(--brand-text-on-tint)}
th[aria-sort]:not([aria-sort="none"]){background:var(--brand-tint-50)}
.ir-dist-table td{padding:12px 14px;color:var(--ink-2);white-space:nowrap}
.ir-dist-table tbody tr:nth-child(even){background:var(--bg)}
.ir-dist-table tbody tr.hidden-by-filter{display:none}
.ir-dist-name{display:flex;flex-direction:column;gap:2px}
.ir-dist-name a{font-weight:600;color:var(--ink);text-decoration:none}
.ir-dist-name a:hover{text-decoration:underline}
.ir-dist-fallback-note{font-size:11px;color:var(--ink-3);font-weight:400}
.ir-dist-table td .ir-figure,.ir-dist-table td.ir-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.ir-dist-dash{color:var(--ink-disabled)}
/* Secondary columns hidden below 640px per the design brief - District +
   AQI stay, since those are the two things anyone opens the page for. */
@media(max-width:639px){
  .ir-dist-table .ir-col-secondary{display:none}
}

/* ── Extremes strip (Part D) ── */
.ir-extremes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
@media(min-width:640px){.ir-extremes{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.ir-extremes{grid-template-columns:repeat(6,1fr)}}
.ir-extreme-card{
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:var(--r-s,8px);
  padding:12px 14px;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:44px;
}
.ir-extreme-card:hover{border-color:var(--border-strong,var(--bd))}
.ir-extreme-lbl{font-size:11px;color:var(--ink-3);font-weight:600}
.ir-extreme-district{font-size:13.5px;font-weight:700;color:var(--ink)}
.ir-extreme-val{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--ink-2)}

/* ── Nearby states cards (Part E) ── */
.ir-nearby-states{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
@media(min-width:640px){.ir-nearby-states{grid-template-columns:repeat(4,1fr)}}
.ir-nearby-state-card{
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:var(--r-s,8px);
  padding:12px 14px;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:44px;
}
.ir-nearby-state-card:hover{border-color:var(--border-strong,var(--bd))}
.ir-nearby-state-name{font-size:13.5px;font-weight:700;color:var(--ink)}

/* ── Metals: one line, not a card grid (Part F) ── */
.ir-metals-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  font-size:13.5px;
  color:var(--ink-2);
  padding:14px 16px;
}
.ir-metals-line b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700}
.ir-metals-line .sep{color:var(--ink-disabled)}
.ir-metals-line a.ir-metals-lnk{margin-left:auto;font-weight:600;white-space:nowrap}
.ir-metals-note{font-size:11.5px;color:var(--ink-3);margin-top:6px;line-height:1.5}

/* ── Mandi honesty: silent markets list (Part K) ── */
.ir-silent-markets{
  margin-top:12px;
  padding:10px 12px;
  background:var(--bg);
  border-left:3px solid var(--ink-disabled);
  border-radius:0 var(--r-s,8px) var(--r-s,8px) 0;
  font-size:12.5px;
  color:var(--ink-3);
  line-height:1.6;
}
.ir-silent-markets b{color:var(--ink-2)}

@media(max-width:639px){
  .ir-extremes{grid-template-columns:repeat(2,1fr)}
  .ir-nearby-states{grid-template-columns:repeat(2,1fr)}
  .ir-metals-line a.ir-metals-lnk{margin-left:0;width:100%}
}