/* ==========================================================================
   Phase 8: Live AQI page (live-aqi.php) and AQI calculator (aqi-calculator.php)
   Loaded after inner.css. Ordinary responsive CSS, no .tpl zoom.
   ========================================================================== */
.aqi-swatch { display: inline-block; flex: none; width: 14px; height: 14px; margin-right: 8px; border-radius: 4px; vertical-align: -2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }

/* ---------- Live AQI: banner ---------- */
.aqi-banner { background: linear-gradient(135deg, #00474d, #006970); color: #fff; padding: 44px 0 40px; }
.aqi-banner-body { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.aqi-banner h1 { position: relative; margin: 0 0 18px; padding-bottom: 14px; font-family: var(--font-heading); font-size: clamp(32px, 5vw, 52px); font-weight: 500; color: #fff; }
.aqi-banner h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 84px; height: 7px; background: var(--gradient-strip); }
.aqi-banner p { max-width: 640px; margin: 0; font-size: 18px; line-height: 1.55; }
.aqi-banner-link { flex: none; padding: 12px 22px; border: 1px solid #fff; border-radius: 8px; font-size: 17px; font-weight: 600; color: #fff; }
.aqi-banner-link:hover { background: rgba(255, 255, 255, .14); }

/* ---------- Live AQI: controls, map, legend ---------- */
.aqi-stage { padding: 28px 0 56px; scroll-margin-top: 90px; }
.aqi-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
.aqi-field { display: flex; flex-direction: column; gap: 6px; min-width: 190px; }
.aqi-field-grow { flex: 1 1 240px; }
.aqi-field-btn { min-width: 0; }
.aqi-field label { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-dark); }
.aqi-field select, .aqi-field input { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; font-size: 16px; color: var(--ink); }
.aqi-field select:focus-visible, .aqi-field input:focus-visible, .calc-input input:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
.aqi-locate { min-height: 46px; padding-top: 10px; padding-bottom: 10px; }
.aqi-status { min-height: 1.5em; margin: 0 0 12px; font-size: 15px; }

.aqi-map-box { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #e8f1f2; }
.aqi-map { width: 100%; height: clamp(440px, 70vh, 740px); }
.aqi-noscript { margin: 0; padding: 40px 24px; text-align: center; }

.aqi-pin { background: none; border: 0; }
.aqi-pin-inner { position: absolute; left: 0; top: 0; display: block; width: 0; height: 0; }
.aqi-pin-chip { position: absolute; left: 0; top: 0; min-width: 34px; padding: 3px 8px; border: 2px solid #fff; border-radius: 999px; box-shadow: 0 2px 6px rgba(0, 20, 24, .4); font-size: 13px; font-weight: 700; line-height: 1.25; text-align: center; white-space: nowrap; transform: translate(-50%, -50%); }
.aqi-compact .aqi-pin-chip { min-width: 26px; padding: 1px 5px; border-width: 1.5px; font-size: 11px; }
.aqi-pin-name { position: absolute; left: 0; top: 16px; display: none; font-size: 12px; font-weight: 700; color: #0f2a2d; white-space: nowrap; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; transform: translateX(-50%); }
.aqi-names .aqi-pin-name { display: block; }
.leaflet-marker-icon.aqi-pin:focus { outline: none; }
.leaflet-marker-icon.aqi-pin:focus-visible .aqi-pin-chip { outline: 3px solid #0f2a2d; outline-offset: 2px; }

.aqi-pop { min-width: 190px; font-family: var(--font-body); color: var(--ink); }
.aqi-pop-city { margin: 0; font-family: var(--font-heading); font-size: 18px; }
.aqi-pop-place { margin: 2px 0 10px; font-size: 13px; color: var(--ink-70); }
.aqi-pop-big { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.aqi-pop-chip { padding: 4px 12px; border-radius: 999px; font-size: 18px; font-weight: 700; }
.aqi-pop-level { font-size: 14px; font-weight: 600; }
.aqi-pop-list { margin: 0 0 8px; padding: 0; list-style: none; font-size: 14px; line-height: 1.6; }
.aqi-pop-src { margin: 0; font-size: 12px; color: var(--ink-70); }

.aqi-legend { margin-top: 18px; }
.aqi-legend-title { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--brand-dark); }
.aqi-legend-list { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.aqi-legend-list li { display: flex; align-items: center; }
.aqi-note { max-width: 900px; margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-70); }
.aqi-note a, .calc-note a, .calc-explain a { font-weight: 700; color: var(--brand); text-decoration: underline; }

.aqi-table-box { margin-top: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.aqi-table-box summary { padding: 16px 22px; font-weight: 700; cursor: pointer; color: var(--brand-dark); }
.aqi-table-box summary:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.aqi-table-scroll, .calc-table-scroll { max-width: 100%; overflow-x: auto; }
.aqi-table, .calc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.aqi-table caption, .calc-table caption { padding: 4px 22px 12px; text-align: left; font-size: 14px; color: var(--ink-70); }
.aqi-table th, .aqi-table td, .calc-table th, .calc-table td { padding: 10px 22px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.aqi-table thead th, .calc-table thead th { background: #f1f8f8; font-size: 13px; letter-spacing: .03em; color: var(--brand-dark); }
.aqi-table tbody th, .calc-table tbody th { font-weight: 600; }
.aqi-num, .calc-num { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Calculator ---------- */
.calc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.calc-form, .calc-result { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.calc-result { scroll-margin-top: 100px; }
.calc-result:focus { outline: none; }
.calc-h { margin: 0 0 10px; font-family: var(--font-heading); font-size: clamp(22px, 3vw, 28px); color: var(--ink); }
.calc-h3 { margin: 30px 0 12px; font-family: var(--font-heading); font-size: 20px; color: var(--ink); }
.calc-intro { margin: 0 0 20px; font-size: 15px; line-height: 1.6; }
.calc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.calc-field label { display: block; margin-bottom: 6px; font-weight: 700; color: var(--ink); }
.calc-req, .calc-opt { font-size: 12px; font-weight: 600; color: var(--ink-70); }
.calc-input { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.calc-input:focus-within { outline: 3px solid var(--brand); outline-offset: 1px; }
.calc-input input { flex: 1; min-width: 0; min-height: 46px; padding: 10px 12px; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); }
.calc-input input:focus-visible { outline: none; }
.calc-unit { padding: 0 12px; font-size: 13px; color: var(--ink-70); white-space: nowrap; }
.calc-hint { margin: 6px 0 0; font-size: 13px; color: var(--ink-70); }
.calc-actions { margin-top: 24px; }

.calc-empty { padding: 28px 8px; text-align: center; }
.calc-empty-title { margin: 0 0 8px; font-family: var(--font-heading); font-size: 20px; }
.calc-card { padding: 24px; border-radius: var(--radius); background: var(--band); color: var(--band-text); text-align: center; }
.calc-card-label { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.calc-score { margin: 4px 0 0; font-family: var(--font-heading); font-size: clamp(56px, 9vw, 84px); font-weight: 700; line-height: 1.05; }
.calc-cat { margin: 0; font-size: 22px; font-weight: 700; }
.calc-facts { margin: 20px 0 0; }
.calc-facts div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.calc-facts dt { margin-bottom: 2px; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--brand-dark); }
.calc-facts dd { margin: 0; line-height: 1.55; }
.calc-note { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-70); }
.calc-warn { padding: 10px 14px; border-radius: 8px; background: #fff6e0; color: #6b4a00; }
.calc-result .calc-table-scroll { margin-top: 18px; }
.calc-result .calc-table th, .calc-result .calc-table td { padding: 9px 10px; }
.calc-result .calc-table caption { padding-left: 0; }
.calc-table tr.is-worst th, .calc-table tr.is-worst td { background: #f4fafa; }
.calc-errors { padding: 18px 20px; border: 1px solid #e3a7a1; border-radius: var(--radius); background: #fdf1f0; color: #7a1f17; }
.calc-errors-title { margin: 0 0 8px; font-weight: 700; }
.calc-errors ul { margin: 0; padding-left: 20px; line-height: 1.6; }

.calc-explain { padding-top: 0; }
.calc-explain-body { max-width: 980px; }
.calc-explain-body p { line-height: 1.7; }
.calc-formula { padding: 14px 18px; border-left: 4px solid var(--brand); border-radius: 0 8px 8px 0; background: #f1f8f8; font-weight: 600; }
.calc-cats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.calc-cats li { display: flex; align-items: center; gap: 6px; }
.calc-explain .calc-table-scroll { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.calc-bp th, .calc-bp td { padding: 9px 12px; font-size: 14px; white-space: nowrap; }
.calc-bp-unit { font-weight: 400; text-transform: none; letter-spacing: 0; }

@media (max-width: 900px) {
  .calc-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .aqi-banner { padding: 32px 0 30px; }
  .aqi-banner-body { flex-direction: column; align-items: flex-start; gap: 20px; }
  .aqi-banner p { font-size: 16px; }
  .aqi-field { min-width: 100%; }
  .aqi-field-btn, .aqi-locate { width: 100%; }
  .aqi-map { height: 62vh; min-height: 380px; }
  .calc-form, .calc-result { padding: 20px 16px; }
  .calc-fields { grid-template-columns: minmax(0, 1fr); }
  .aqi-table th, .aqi-table td { padding: 9px 12px; }
}

/* Phase 11: the Leaflet credit links must be recognisable as links without relying on colour (WCAG 1.4.1) */
.leaflet-control-attribution a { text-decoration: underline; }