/* Layout: a monochrome instrument frame around a grey architectural model. Readouts
   across the top, the season as the base, one panel on the right. The interface is
   greyscale on purpose: colour is reserved for the smoke and for the AQI scale. */
:root {
  --ink: #101112;
  --glass: rgba(18, 19, 21, 0.82);
  --glass-2: rgba(36, 38, 41, 0.92);
  --line: rgba(255, 255, 255, 0.13);
  --fg: #f1f1ef;
  --muted: #a3a6aa;
  --faint: #6e7175;
  --accent: #f1f1ef;
  --accent-dim: rgba(255, 255, 255, 0.12);
  --good: #7fd99a;
  --bad: #ff8a7a;
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --font-data: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --font-hi: 'Tiro Devanagari Hindi', 'Nirmala UI', 'Mangal', serif;
  --hud-h: 86px;
  --tl-h: 176px;
  --right-w: 344px;
  --r: 10px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--ink);
  color: var(--fg);
  font: 13px/1.45 var(--font-body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
body.tab-city .street-only, body.tab-street .city-only { display: none !important; }

#app { position: fixed; inset: 0; }
#stage { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
#stage canvas { display: block; }
/* annotation text in the 3D view: dark over the pale daytime model, light at night */
#stage { --lab: #f4f4f2; --halo: rgba(0, 0, 0, 0.85); --pill: rgba(20, 21, 23, 0.72); --pill-line: rgba(255, 255, 255, 0.18); --sub: rgba(244, 244, 242, 0.7); }
#stage.day { --lab: #17181a; --halo: rgba(255, 255, 255, 0.9); --pill: rgba(255, 255, 255, 0.82); --pill-line: rgba(0, 0, 0, 0.16); --sub: rgba(23, 24, 26, 0.68); }

/* ---------- Top HUD ---------- */
.hud-top {
  position: absolute; left: 0; right: 0; top: 0;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  display: grid; grid-template-columns: auto auto auto 1fr auto; gap: 18px; align-items: center;
  background: linear-gradient(to bottom, rgba(16, 17, 18, 0.94), rgba(16, 17, 18, 0.8) 72%, rgba(16, 17, 18, 0));
  pointer-events: none;
}
.hud-top > * { pointer-events: auto; }
.brand h1 { font: 700 22px/1 var(--font-display); letter-spacing: -0.01em; margin: 0; }
.brand .hi { margin: 4px 0 0; font: 15px/1.1 var(--font-hi); color: var(--fg); }
.brand .hi span { font: 12px var(--font-body); color: var(--muted); letter-spacing: 0.02em; }

.tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; padding: 3px; background: rgba(255, 255, 255, 0.04); }
.tabs button { border: 0; background: none; padding: 7px 13px; border-radius: 6px; color: var(--muted); font: 600 12.5px var(--font-body); white-space: nowrap; }
.tabs button.on { background: var(--fg); color: #131416; }

.clock { min-width: 104px; padding-left: 16px; border-left: 1px solid var(--line); }
.clock-date { font: 600 20px/1 var(--font-display); }
.clock-time { font: 600 22px/1.1 var(--font-data); color: var(--fg); font-variant-numeric: tabular-nums; }
.clock-phase { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

.met { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; min-width: 0; }
.met-item { display: flex; align-items: center; gap: 8px; }
.met-item .k { display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.met-item .v { display: block; font: 600 14px/1.2 var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vi-bar { position: relative; width: 110px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); margin-top: 4px; overflow: hidden; }
.vi-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--fg); border-radius: 3px; }
.vi-bar b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--muted); left: 60%; }
.met-flags { display: flex; gap: 6px; flex-wrap: wrap; }
.flag { font-size: 11px; padding: 3px 8px; border-radius: 99px; background: var(--glass-2); border: 1px solid var(--line); white-space: nowrap; }
.flag.warn { border-color: rgba(255, 255, 255, 0.4); }

.aqi-card {
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 14px; min-width: 270px; max-width: 330px; backdrop-filter: blur(10px);
}
.aqi-main { display: flex; align-items: stretch; justify-content: space-between; gap: 14px; }
.aqi-row { display: flex; align-items: center; gap: 10px; }
.aqi-num span { font: 700 38px/0.95 var(--font-display); font-variant-numeric: tabular-nums; }
.aqi-num small, .aqi-pm small { display: block; font-size: 11px; line-height: 1.25; color: var(--muted); margin-top: 3px; }
.aqi-pm { border-left: 1px solid var(--line); padding-left: 14px; display: flex; flex-direction: column; justify-content: center; }
.aqi-pm span { font: 700 21px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.aqi-chip { font: 600 12.5px/1.2 var(--font-body); padding: 7px 11px; border-radius: 6px; color: #160f0a; text-align: center; }
.aqi-sub { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.aqi-sub b { color: var(--fg); font-family: var(--font-data); font-weight: 600; }
.grap-chip { background: var(--accent-dim); color: var(--fg); padding: 1px 7px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.35); }

/* ---------- Compass ---------- */
.compass {
  position: absolute; left: 16px; top: calc(var(--hud-h) + 12px); width: 104px; text-align: center;
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 6px 5px; backdrop-filter: blur(10px);
}
.compass svg { width: 88px; height: 88px; display: block; margin: 0 auto; }
.compass .ring { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.2; }
.compass .north { fill: var(--fg); }
.compass text { fill: var(--muted); font: 600 9px var(--font-body); text-anchor: middle; }
.compass text.n { fill: var(--fg); font-size: 12px; }
.compass #compass-wind path { fill: none; stroke: var(--fg); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.compass-cap { font: 600 10.5px var(--font-body); color: var(--fg); white-space: nowrap; }
body.touring .compass { left: 432px; }

/* ---------- Side panel ---------- */
.panel {
  position: absolute; top: calc(var(--hud-h) + 6px); bottom: calc(var(--tl-h) + 60px);
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--r);
  backdrop-filter: blur(12px); overflow-y: auto; padding: 14px; scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.panel.right { right: 14px; width: var(--right-w); transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s; }
body.panel-collapsed .panel.right { transform: translateX(calc(100% + 24px)); opacity: 0; visibility: hidden; pointer-events: none; }
.head-actions { display: flex; gap: 6px; }
.policy-tab {
  position: absolute; right: 14px; top: calc(var(--hud-h) + 6px); z-index: 3;
  background: var(--glass); border: 1px solid rgba(255, 255, 255, 0.35); color: var(--fg); border-radius: 9px;
  padding: 8px 12px; font: 600 12.5px var(--font-body); backdrop-filter: blur(10px);
}
.policy-tab:hover { background: var(--glass-2); }
.policy-tab #policy-tab-delta { font: 600 11.5px var(--font-data); margin-left: 8px; color: var(--good); }
.policy-tab #policy-tab-delta:empty { display: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.panel h2 { font: 700 16px/1.1 var(--font-display); margin: 0; text-wrap: balance; }
.panel h3 { font: 600 11px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 16px 0 8px; }
.panel h4 { font: 600 12.5px/1.2 var(--font-body); margin: 0 0 5px; }
.hint { font-size: 11.5px; color: var(--muted); margin: 4px 0 8px; }
.lede { font-size: 12.5px; color: #d9dadb; margin: 0 0 10px; }

.seg { display: inline-flex; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-radius: 7px; padding: 2px; }
.seg button { border: 0; background: none; padding: 4px 8px; border-radius: 5px; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.seg button.on { background: var(--fg); color: #131416; }
.seg.small button { padding: 3px 7px; font-size: 11px; }

/* ---------- Policies ---------- */
.scenario-summary { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 10px; font-size: 12px; }
.scenario-summary .big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.scenario-summary .big b { font: 700 24px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.scenario-summary .delta { font: 600 13px var(--font-data); }
.delta.down, b.down { color: var(--good); }
.delta.up, b.up { color: var(--bad); }
.delta.flat { color: var(--muted); }
.scenario-summary .row { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); margin-top: 4px; }
.scenario-summary .row b { color: var(--fg); font-family: var(--font-data); font-weight: 600; }
.scenario-summary .row.ref { color: var(--faint); font-size: 10.5px; }

.presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.presets button, .ghost {
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px; font-size: 11.5px; color: var(--fg);
}
.presets button:hover, .ghost:hover { border-color: rgba(255, 255, 255, 0.5); }
.ghost.small { padding: 3px 8px; font-size: 11px; }
.primary { background: var(--fg); color: #131416; border: 0; border-radius: 7px; padding: 6px 12px; font-weight: 600; }

.levels { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.grap-toggle { display: flex; gap: 10px; align-items: flex-start; padding: 9px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.3); background: var(--accent-dim); margin-bottom: 12px; cursor: pointer; }
.grap-toggle small { color: #cfd1d3; font-size: 11px; }
.grap-toggle input { margin-top: 3px; accent-color: #f1f1ef; }

.pgroup { margin-bottom: 12px; }
.pgroup h3 { margin: 0 0 6px; }
.pol { padding: 8px; border-radius: 8px; border: 1px solid transparent; margin-bottom: 4px; }
.pol:hover { background: rgba(255, 255, 255, 0.03); border-color: var(--line); }
.pol.active { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.06); }
.pol-top { display: flex; align-items: center; gap: 8px; }
.pol-top label { flex: 1; font-weight: 600; font-size: 12.5px; cursor: pointer; }
.pol-top input[type=checkbox] { accent-color: #f1f1ef; width: 15px; height: 15px; }
.pol .eff { font: 600 11px var(--font-data); white-space: nowrap; padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); }
.pol .eff.big { color: var(--good); background: rgba(127, 217, 154, 0.1); }
.pol .eff.tiny { color: var(--muted); }
.pol p { margin: 4px 0 0; color: var(--muted); font-size: 11.5px; }
.pol input[type=range] { width: 100%; accent-color: #f1f1ef; margin-top: 6px; }
.pol select { width: 100%; margin-top: 6px; background: var(--glass-2); border: 1px solid var(--line); border-radius: 6px; padding: 4px; }
.pol .range-val { font: 11px var(--font-data); color: var(--fg); }
.pol details { margin-top: 4px; }
.pol summary { font-size: 11px; color: var(--fg); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; list-style: none; }
.pol summary::-webkit-details-marker { display: none; }
.pol .ev { font-size: 11px; color: var(--muted); margin: 6px 0 0; padding-left: 10px; border-left: 2px solid var(--line); }
.pol .ev li { margin-bottom: 4px; }
.panel a { color: var(--fg); }
.pol .why { margin-top: 6px; font-size: 11.5px; color: #d2d4d6; }
.grap-note { font-size: 10.5px; color: var(--fg); margin-top: 3px; }

.conditions { border-top: 1px solid var(--line); padding-top: 10px; }
.conditions summary { font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); cursor: pointer; margin-bottom: 8px; }
.cond-row { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; align-items: center; margin-bottom: 6px; font-size: 12px; }
.cond-row select { background: var(--glass-2); border: 1px solid var(--line); border-radius: 6px; padding: 4px; min-width: 0; }

/* ---------- Street panel ---------- */
.air3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.air3 div { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; min-width: 0; }
.air3 small { display: block; color: var(--muted); font-size: 10.5px; }
.air3 b { display: block; font: 700 21px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.air3 span { display: inline-block; margin-top: 3px; font: 600 9.5px var(--font-body); color: #160f0a; padding: 1px 5px; border-radius: 3px; }
.ctl { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; }
.chk { display: flex; gap: 9px; align-items: flex-start; padding: 5px 0; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.chk input { accent-color: #f1f1ef; width: 15px; height: 15px; margin-top: 1px; flex: none; }
.chk small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
.prow { display: grid; grid-template-columns: 1fr; gap: 3px; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 8px; padding: 7px 8px; }
.prow:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--line); }
.prow.sel { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.06); }
.prow .pn b { font-size: 12.5px; }
.prow .pn small { color: var(--muted); font-size: 11px; margin-left: 6px; }
.prow .bar { position: relative; display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.09); }
.prow .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--fg); border-radius: 4px; }
.prow .bar u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--muted); }
.prow .pv { font: 10.5px var(--font-data); color: var(--muted); }
.pdetail { margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.04); font-size: 12px; }
.pdetail p { margin: 0 0 6px; color: #d9dadb; }
.sym { white-space: nowrap; }
.sym svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; color: #ffb35c; }
.hgroup { margin-bottom: 10px; }
.hgroup ul { margin: 0; padding-left: 16px; color: #d2d4d6; font-size: 12px; }
.hgroup li { margin-bottom: 6px; }

/* ---------- Timeline ---------- */
#timeline {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--tl-h);
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
  background: #101112; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.tl-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.play { width: 34px; height: 28px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.4); background: var(--accent-dim); color: var(--fg); font-size: 12px; }
.tl-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin-left: auto; }
.tl-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.tl-legend .dash { width: 14px; height: 0; border-top: 2px dashed #f1f1ef; border-radius: 0; vertical-align: 3px; }
.tl-canvas-wrap { position: relative; flex: 1; min-height: 0; }
#tl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: ew-resize; touch-action: none; }

/* ---------- Toolbar ---------- */
#toolbar {
  position: absolute; left: var(--free-cx, 50%); transform: translateX(-50%); bottom: calc(var(--tl-h) + 10px);
  display: flex; gap: 6px; align-items: center; padding: 6px; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px);
  max-width: calc(var(--free-w, 100vw) - 24px); width: max-content; flex-wrap: wrap; justify-content: center;
}
#toolbar button { background: none; border: 1px solid transparent; border-radius: 7px; padding: 4px 8px; font-size: 11.5px; color: var(--fg); white-space: nowrap; }
#toolbar button:hover { border-color: var(--line); }
#toolbar button.primary { background: var(--fg); color: #131416; }
#toolbar .tog { color: var(--muted); }
#toolbar .tog.on { background: rgba(255, 255, 255, 0.1); color: var(--fg); }
#toolbar .sep { width: 1px; height: 18px; background: var(--line); }
#toolbar .seg { padding: 1px; }
#toolbar .seg button { color: var(--muted); }
#toolbar .seg button.on { background: var(--fg); color: #131416; }

/* ---------- Labels in 3D ---------- */
.lbl { font: 500 10.5px var(--font-body); color: var(--lab); background: var(--pill); padding: 2px 7px; border-radius: 99px; white-space: nowrap; border: 1px solid var(--pill-line); pointer-events: none; }
.lbl.area, .lbl.terrain { background: none; border: 0; font-style: italic; letter-spacing: 0.04em; text-shadow: 0 0 3px var(--halo), 0 0 6px var(--halo); }
.lbl.terrain { font: italic 600 12px var(--font-body); }
.lbl.source { border-width: 1.5px; }
.lbl.compass { font: 700 15px var(--font-display); background: none; border: 0; text-shadow: 0 0 3px var(--halo), 0 0 6px var(--halo); }
.lbl.compass.edge { font-size: 12px; opacity: 0.7; }
.lbl.region { text-align: left; border-radius: 6px; padding: 3px 8px; line-height: 1.25; transition: opacity 0.3s; }
.lbl.region b { display: block; font-weight: 600; }
.lbl.region span { font: 10px var(--font-data); color: var(--sub); }
.lbl.region.upwind { border-color: var(--lab); border-width: 1.5px; }
.lbl.region.farm.upwind { border-width: 2px; }
.tick-label, .lid-label, .res-label, .gauge-title, .pm-total, .ref-label, .pressure-label {
  color: var(--lab); text-shadow: 0 0 3px var(--halo), 0 0 7px var(--halo); pointer-events: none; white-space: nowrap;
}
.tick-label { font: 10px var(--font-data); }
.lid-label { font: 11px var(--font-body); }
.lid-label b { display: block; font: 600 12px var(--font-data); }
.lid-label span { font-size: 10px; color: var(--sub); }
.res-label { font: italic 10.5px var(--font-body); color: var(--sub); }
.gauge-title { font: 600 11px var(--font-body); text-align: center; padding-bottom: 4px; }
.gauge-title span { display: block; font: 400 10px var(--font-body); color: var(--sub); }
/* Mixing-height gauge: flat, on the left, drawn in the same light ink as the labels */
.lid-gauge {
  position: absolute; z-index: 2; left: 20px; width: 196px; pointer-events: none;
  top: calc(var(--hud-h) + 152px); bottom: calc(var(--tl-h) + 68px);
  display: flex; flex-direction: column; color: var(--lab); text-shadow: 0 0 3px var(--halo), 0 0 7px var(--halo);
}
body.touring .lid-gauge { left: 436px; }
.lg-title { font: 600 11px var(--font-body); padding-bottom: 10px; white-space: nowrap; }
.lg-title span { display: block; font: 400 10px var(--font-body); color: var(--sub); }
.lg-scale { position: relative; flex: 1; min-height: 120px; }
.lg-scale > * { position: absolute; }
.lg-axis { left: 46px; top: 0; bottom: 0; width: 1px; background: var(--lab); opacity: 0.55; }
.lg-ground { left: 26px; bottom: 0; width: 40px; height: 1px; background: var(--lab); opacity: 0.7; }
.lg-tick { left: 40px; width: 13px; height: 1px; background: var(--lab); opacity: 0.6; }
.lg-tick span { position: absolute; right: 19px; top: -7px; font: 10px var(--font-data); white-space: nowrap; }
.lid-gauge.short .lg-tick.minor { display: none; }
.lg-below { left: 37px; bottom: 0; width: 19px; background: color-mix(in srgb, var(--lab) 16%, transparent); }
.lg-resid {
  left: 37px; width: 19px; background: color-mix(in srgb, var(--lab) 7%, transparent);
  border-top: 1px dashed color-mix(in srgb, var(--lab) 50%, transparent);
}
.lg-lid { left: 28px; bottom: -1px; width: 37px; height: 3px; border-radius: 2px; background: var(--lab); box-shadow: 0 0 0 1.5px var(--halo); }
.lid-gauge.inversion .lg-lid { height: 4px; bottom: -2px; }
.lg-lid-label { left: 74px; bottom: 0; font: 11px var(--font-body); white-space: nowrap; }
.lg-lid-label b { display: block; font: 600 12px var(--font-data); }
.lg-lid-label span { font-size: 10px; color: var(--sub); }
.lg-res-label { left: 74px; bottom: 0; font: italic 10.5px var(--font-body); color: var(--sub); white-space: nowrap; }
.lg-chev { left: 46px; bottom: 0; width: 0; height: 0; display: none; }
.lid-gauge.high .lg-chev, .lid-gauge.low .lg-chev { display: block; }
.lg-chev svg { position: absolute; left: -8px; bottom: 0; width: 16px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; filter: drop-shadow(0 0 2px var(--halo)); }
.lid-gauge.high .lg-chev svg { animation: lg-press 2.1s linear infinite; }
.lid-gauge.low .lg-chev svg { animation: lg-lift 2.1s linear infinite; }
.lg-chev svg:nth-child(2) { animation-delay: -0.7s; }
.lg-chev svg:nth-child(3) { animation-delay: -1.4s; }
@keyframes lg-press { from { transform: translateY(-44px); opacity: 0; } 25%, 70% { opacity: 0.85; } to { transform: translateY(-8px); opacity: 0; } }
@keyframes lg-lift { from { transform: translateY(-8px) rotate(180deg); opacity: 0; } 25%, 70% { opacity: 0.85; } to { transform: translateY(-44px) rotate(180deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lg-chev svg { animation: none !important; opacity: 0.8; }
  .lg-chev svg:nth-child(1) { transform: translateY(-36px); }
  .lg-chev svg:nth-child(2) { transform: translateY(-24px); }
  .lg-chev svg:nth-child(3) { transform: translateY(-12px); }
  .lid-gauge.low .lg-chev svg:nth-child(1) { transform: translateY(-12px) rotate(180deg); }
  .lid-gauge.low .lg-chev svg:nth-child(2) { transform: translateY(-24px) rotate(180deg); }
  .lid-gauge.low .lg-chev svg:nth-child(3) { transform: translateY(-36px) rotate(180deg); }
}
.band-label { font: 500 11.5px var(--font-body); color: #f4f4f2; background: rgba(20, 21, 23, 0.82); padding: 2px 8px 2px 6px; border-radius: 4px; white-space: nowrap; pointer-events: auto; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.16); line-height: 1.3; }
.band-label * { pointer-events: none; }
.band-label:hover { border-color: #fff; }
.band-label.off { opacity: 0.6; }
.band-label.off i { background: none !important; outline: 1px solid currentColor; }
.band-label i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.band-label b { font: 600 11.5px var(--font-data); margin-left: 6px; font-variant-numeric: tabular-nums; }
.band-label span { font: 10.5px var(--font-data); color: var(--muted); margin-left: 6px; }
.band-label em { display: block; font: 10px var(--font-body); color: #b9bcc0; margin-left: 15px; }
.pm-total { font: 12px var(--font-body); text-align: center; padding-bottom: 2px; }
.pm-total b { font: 700 19px var(--font-display); font-variant-numeric: tabular-nums; }
.pm-total span { display: block; font-size: 10px; color: var(--sub); letter-spacing: 0.03em; }
.ref-label { font: 600 10px var(--font-body); padding: 0 3px; }
.pressure-label { text-align: center; line-height: 1.2; }
.pressure-label b { display: block; font: 700 44px/0.9 var(--font-display); }
.pressure-label span { display: block; font: 600 11.5px var(--font-body); }
.pressure-label i { display: block; font: italic 10.5px var(--font-body); color: var(--sub); }

/* street scene */
.air-sign { text-align: center; color: var(--lab); background: var(--pill); border: 1px solid var(--pill-line); border-radius: 7px; padding: 4px 9px; white-space: nowrap; pointer-events: none; line-height: 1.2; }
.air-sign span { display: block; font: 600 10.5px var(--font-body); }
.air-sign b { font: 700 19px var(--font-display); font-variant-numeric: tabular-nums; }
.air-sign b i, .pp span i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.air-sign em { display: block; font: 10px var(--font-body); color: var(--sub); font-style: normal; }
.pp { color: var(--lab); background: var(--pill); border: 1px solid var(--pill-line); border-radius: 7px; padding: 3px 7px 4px; white-space: nowrap; cursor: pointer; pointer-events: auto; text-align: center; line-height: 1.25; margin-bottom: 4px; }
.pp * { pointer-events: none; }
.pp.sel { border-color: var(--lab); border-width: 2px; }
.pp b { display: block; font: 600 11px var(--font-body); }
.pp span { display: block; font: 10.5px var(--font-data); }
.pp em { display: flex; gap: 3px; justify-content: center; margin-top: 2px; font-style: normal; }
.pp svg { width: 14px; height: 14px; }
.pp s { color: #e0672a; text-decoration: none; }
.pp u { color: var(--sub); text-decoration: none; }

/* ---------- Policy readout over the map ---------- */
.policy-readout {
  position: absolute; z-index: 3; top: calc(var(--hud-h) + 10px); left: var(--free-cx, 50%); transform: translateX(-50%);
  width: min(410px, calc(var(--free-w, 100vw) - 40px)); padding: 9px 14px;
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: blur(10px);
}
.pr-total { display: flex; align-items: center; gap: 12px; }
.pr-pct { font: 700 28px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.pr-pct.flat { color: var(--muted); }
.pr-sub { font-size: 11px; line-height: 1.35; color: var(--muted); }
.pr-sub b { color: var(--fg); font: 600 11px var(--font-data); }
.pr-flash { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); transition: opacity 0.5s; }
.pr-flash.out { opacity: 0; }
.pr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pr-name { font: 600 13px/1.25 var(--font-body); }
.pr-delta { font: 700 17px var(--font-data); white-space: nowrap; }
.pr-delta.flat { color: var(--muted); }
.pr-when { margin: 5px 0 0; font-size: 12px; line-height: 1.4; color: #d2d4d6; }
.pr-when b { color: var(--fg); }
.pr-why { margin: 4px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.policy-readout.pop { animation: pr-pop 1s ease-out; }
@keyframes pr-pop {
  0% { border-color: rgba(255, 255, 255, 0.8); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); }
  100% { border-color: var(--line); box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .policy-readout.pop { animation: none; } .pr-flash { transition: none; } }

/* ---------- Street: what the air is doing to people right now ---------- */
.health-now {
  position: absolute; left: 16px; top: calc(var(--hud-h) + 12px); width: 252px; z-index: 2;
  max-height: calc(100% - var(--hud-h) - var(--tl-h) - 30px); overflow-y: auto; scrollbar-width: none;
}
.health-now h2 { display: inline-block; margin: 0 0 7px; padding: 5px 10px; font: 600 10.5px var(--font-body); letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg); background: var(--glass); border: 1px solid var(--line); border-radius: 99px; backdrop-filter: blur(10px); }
.hn-card {
  display: grid; grid-template-columns: 42px 1fr; gap: 11px; align-items: center; margin-bottom: 5px; padding: 7px 11px;
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: blur(10px);
}
.hn-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); color: var(--fg); }
.hn-icon svg { width: 27px; height: 27px; }
.hn-card b { display: block; font: 600 14px/1.2 var(--font-body); }
.hn-level { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; font: 600 11px/1 var(--font-data); color: var(--muted); }
.hn-level i { width: 14px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); }
.hn-level i:last-of-type { margin-right: 5px; }
.hn-card p { display: none; margin: 5px 0 0; font-size: 12px; line-height: 1.35; color: #d2d4d6; }
.hn-card small { display: block; margin-top: 3px; font-size: 11px; line-height: 1.25; color: var(--muted); }
.hn-card small u { color: var(--fg); text-decoration: none; font-weight: 600; }
.hn-card.l1 .hn-level i:nth-of-type(1) { background: #e6cf3a; }
.hn-card.l2 .hn-icon { background: rgba(240, 138, 44, 0.2); color: #ffb37a; }
.hn-card.l2 .hn-level { color: #ffb37a; }
.hn-card.l2 .hn-level i:nth-of-type(-n+2) { background: #f08a2c; }
.hn-card.l3 { border-color: rgba(255, 138, 122, 0.55); }
.hn-card.l3 .hn-icon { background: rgba(224, 64, 47, 0.28); color: var(--bad); }
.hn-card.l3 .hn-level { color: var(--bad); }
.hn-card.l3 .hn-level i { background: #e0402f; }
.hn-card.ok .hn-icon { color: var(--good); }
.hn-card.ok p { display: block; }
body.touring .health-now { left: 432px; }
/* short windows: all six cards still have to fit above the timeline */
@media (max-height: 820px) {
  .health-now h2 { margin-bottom: 5px; padding: 4px 9px; }
  .hn-card { grid-template-columns: 36px 1fr; padding: 4px 10px; margin-bottom: 4px; }
  .hn-icon { width: 36px; height: 36px; }
  .hn-icon svg { width: 23px; height: 23px; }
  .hn-card b { font-size: 13.5px; line-height: 1.15; }
  .hn-level, .hn-card small { margin-top: 2px; }
  .hn-card small { line-height: 1.15; }
}
@media (max-height: 740px) { .hn-card small { display: none; } }
/* the one-line explanations need a tall window to fit beside six cards */
@media (min-height: 1000px) and (min-width: 981px) {
  .hn-card { align-items: start; padding: 9px 12px; margin-bottom: 7px; }
  .hn-card p { display: block; }
}

/* ---------- Tour ---------- */
.tour-card {
  position: absolute; left: 16px; top: calc(var(--hud-h) + 14px); width: min(400px, calc(100vw - 32px));
  background: rgba(20, 21, 23, 0.95); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 12px; padding: 16px 18px 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); z-index: 5;
}
.tour-step { font: 600 10.5px var(--font-body); color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.tour-card h3 { font: 700 19px/1.15 var(--font-display); margin: 4px 0 8px; text-wrap: balance; }
.tour-card p { margin: 0 0 8px; color: #dcdddf; font-size: 13px; max-width: 62ch; }
.tour-card .num { font-family: var(--font-data); color: #fff; font-weight: 600; }
.tour-nav { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.tour-nav span { flex: 1; text-align: center; color: var(--muted); font-size: 11px; }
.close { position: absolute; top: 8px; right: 8px; padding: 2px 8px !important; }
.tour-nav .close { position: static; }

/* ---------- Science ---------- */
.science { position: absolute; inset: 0; background: rgba(8, 8, 9, 0.74); z-index: 10; display: flex; justify-content: center; padding: 30px 16px; overflow-y: auto; }
.science-inner { position: relative; width: min(900px, 100%); background: #17181a; border: 1px solid var(--line); border-radius: 14px; padding: 28px 32px; height: max-content; }
.science h2 { font: 700 26px/1.1 var(--font-display); margin: 0 0 6px; }
.science h3 { font: 700 17px/1.2 var(--font-display); margin: 26px 0 8px; color: #fff; }
.science p, .science li { color: #d6d7d9; max-width: 72ch; }
.science .eq { font: 13px/1.7 var(--font-data); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; overflow-x: auto; white-space: pre; color: #f1f1ef; }
.science table { border-collapse: collapse; width: 100%; font-size: 12.5px; margin: 8px 0; }
.science th, .science td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.science td.n { font-family: var(--font-data); white-space: nowrap; font-variant-numeric: tabular-nums; }
.science th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.science .tablewrap { overflow-x: auto; }
.science a { color: #fff; }
.science .refs li { margin-bottom: 6px; font-size: 12.5px; }
.ok { color: var(--good); } .meh { color: #f2c35a; }

.loading { position: absolute; inset: 0; display: grid; place-items: center; font: 600 18px var(--font-display); color: var(--muted); background: var(--ink); z-index: 20; transition: opacity 0.6s; }
.loading.done { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .panel.right { transition: none; }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 1280px) {
  :root { --right-w: 312px; }
  .vi-bar { width: 80px; }
  .hud-top { gap: 12px; }
}
@media (max-width: 980px) {
  :root { --tl-h: 150px; }
  .hud-top { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .tabs { justify-self: start; }
  .clock { grid-column: 2; grid-row: 1; }
  .met { grid-column: 1 / -1; order: 3; }
  .aqi-card { min-width: 0; grid-column: 2; }
  .panel.right { right: 8px; top: calc(var(--hud-h) + 4px); bottom: calc(var(--tl-h) + 56px); z-index: 4; }
  .policy-tab { right: 8px; }
  .compass { width: 84px; left: 8px; }
  body.touring .compass { display: none; }
  .lid-gauge { left: 12px; width: 150px; top: calc(var(--hud-h) + 128px); }
  .lg-lid-label span, .lg-res-label, .lg-title span { display: none; }
  body.touring .lid-gauge { display: none; }
  .compass svg { width: 68px; height: 68px; }
  .health-now, body.touring .health-now { left: 8px; right: 8px; width: auto; z-index: 1; }
  body.touring .health-now { display: none; }
  .health-now h2, .hn-card p, .hn-card small, .hn-card.ok p { display: none; }
  .hn-list { display: flex; flex-wrap: wrap; gap: 6px; }
  .hn-card { grid-template-columns: 26px auto; gap: 7px; align-items: center; margin: 0; padding: 5px 9px 5px 6px; }
  .hn-icon { width: 26px; height: 26px; }
  .hn-icon svg { width: 17px; height: 17px; }
  .hn-card b { font-size: 12px; }
  .hn-level { margin-top: 1px; font-size: 10px; }
  #toolbar { bottom: calc(var(--tl-h) + 6px); max-width: calc(var(--free-w, 100vw) - 16px); }
}
@media (max-width: 640px) {
  #toolbar { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 4px; scrollbar-width: none; width: auto; }
  #toolbar .sep { flex: 0 0 1px; }
  #toolbar .seg { flex: 0 0 auto; }
  .panel.right { left: 8px; width: auto; }
  #toolbar button.cam { display: none; }
  .tl-legend { display: none; }
  .lid-gauge { display: none; }
}

/* ---------- Phones: the model first, only the essentials around it ----------
   body.phone is set by main.js for narrow screens and for short ones (a phone on its side).
   Everything else (the chemistry view, most labels, the science) is left for larger screens. */
body.phone { --tl-h: 104px; }
/* one row: city/street, the time, the AQI */
body.phone .hud-top { grid-template-columns: auto 1fr auto; gap: 8px; padding: calc(7px + env(safe-area-inset-top, 0px)) 10px 7px; }
body.phone .brand, body.phone .met { display: none; }
body.phone .tabs { grid-column: 1; grid-row: 1; padding: 2px; }
body.phone .tabs button { padding: 6px 9px; font-size: 11.5px; }
body.phone .clock { grid-column: 2; grid-row: 1; justify-self: center; min-width: 0; border: 0; padding: 0; text-align: center; }
body.phone .clock-date { font-size: 13px; }
body.phone .clock-time { font-size: 15px; }
body.phone .clock-phase { display: none; }
body.phone .aqi-card { grid-column: 3; grid-row: 1; min-width: 0; max-width: none; padding: 5px 8px; }
body.phone .aqi-pm, body.phone .aqi-sub, body.phone .aqi-num small { display: none; }
body.phone .aqi-row { gap: 7px; }
body.phone .aqi-row::before { content: 'AQI'; font: 600 9.5px var(--font-body); letter-spacing: 0.08em; color: var(--muted); }
body.phone .aqi-num span { font-size: 22px; }
body.phone .aqi-chip { padding: 4px 7px; font-size: 11px; }
/* small compass and policy button under the bar */
body.phone .compass { left: 8px; top: calc(var(--hud-h) + 6px); width: auto; padding: 3px; }
body.phone .compass svg { width: 40px; height: 40px; }
body.phone .compass-cap { display: none; }
body.phone .policy-tab { top: calc(var(--hud-h) + 6px); padding: 6px 10px; font-size: 11.5px; }
/* toolbar: the tour, spin and labels only */
body.phone #toolbar > * { display: none; }
body.phone #toolbar #btn-tour, body.phone #toolbar #tog-spin, body.phone #toolbar #tog-labels { display: inline-block; }
body.phone.tab-street #toolbar, body.phone.touring #toolbar { display: none; }
/* a shorter timeline */
body.phone #timeline { padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)); gap: 4px; }
body.phone .play { height: 26px; }
body.phone #speed-seg button { padding: 3px 6px; font-size: 11px; }
/* the policy explanation drops in at the top, over everything, and goes away; the running
   total lives on the policy button and at the top of the panel */
body.phone .policy-readout { top: calc(var(--hud-h) + 4px); left: 8px; right: 8px; width: auto; transform: none; z-index: 6; padding: 8px 11px; }
body.phone .policy-readout:has(.pr-flash[hidden]), body.phone.touring .policy-readout { display: none; }
body.phone .pr-total, body.phone .pr-why { display: none; }
body.phone .pr-flash { margin: 0; padding: 0; border: 0; }
/* the tour as a sheet along the bottom */
body.phone .tour-card { top: auto; bottom: calc(var(--tl-h) + 8px); left: 8px; right: 8px; width: auto; max-height: 46%; overflow-y: auto; padding: 11px 13px 9px; }
body.phone .tour-card h3 { font-size: 16px; }
body.phone .tour-card p { font-size: 12.5px; }
/* labels in the model: the smoke's layers, the pressure system, and only the sources blowing in */
body.phone .lbl { font-size: 10px; }
body.phone .lbl.landmark, body.phone .lbl.area, body.phone .lbl.terrain, body.phone .lbl.source, body.phone .lbl.compass { display: none; }
body.phone .lbl.region:not(.upwind) { display: none; }
body.phone .lbl.region span { display: none; }
body.phone .pressure-label b { font-size: 28px; }
body.phone .pressure-label i { display: none; }
body.phone .tick-label, body.phone .ref-label { display: none; }
body.phone .band-label { font-size: 10.5px; padding: 1px 6px 1px 5px; }
body.phone .band-label b, body.phone .band-label em { display: none; }
body.phone .pm-total b { font-size: 15px; }
body.phone .pm-total span { display: none; }
/* the street */
body.phone .health-now { top: calc(var(--hud-h) + 42px); }
body.phone .hn-level { display: none; }
body.phone .hn-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
body.phone .hn-card { flex: 0 0 auto; }
body.phone .pp span { display: none; }
body.phone .air-sign em { display: none; }
body.phone .air-sign span { font-size: 9.5px; }
body.phone .air-sign b { font-size: 15px; }
body.phone .pp { padding: 2px 5px 3px; }
body.phone .pp b { font-size: 10px; }
body.phone .pp span { font-size: 9.5px; }
body.phone .pp svg { width: 12px; height: 12px; }
/* the note pointing to a larger screen */
.phone-note {
  position: absolute; z-index: 3; left: 8px; right: 8px; bottom: calc(var(--tl-h) + 52px);
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; font-size: 12px; line-height: 1.35; color: var(--fg);
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: blur(10px);
}
.phone-note button { flex: 0 0 auto; padding: 4px 8px; }