/* «Города» (the analysis page; «Воздух в городе» until 2026-09-30) — city-locked hourly air view (redesign Phase 3 shell).
   Desktop: fixed left control rail (the selected object's detail opens IN the rail) · dominant map · full-width timeline.
   Mobile:  stacked rows (controls above the map, timeline below), detail as a bottom sheet.
   One DOM — CSS relocates the same containers per breakpoint. CSP style-src 'self': colours ride
   classes/SVG attributes; the only style mutation is the legend gradient via CSSOM. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1d2b3a; }
body { display: flex; flex-direction: column; overflow-x: hidden; }

.c-header { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: #fff; border-bottom: 1px solid #e3e9f0; z-index: 900; }
.c-brand { font-weight: 700; font-size: 16px; color: #1d2b3a; text-decoration: none; white-space: nowrap; }
.c-brand span { color: #0d7470; }
.c-title { font-size: 12.5px; color: #46586a; background: #e7f3f1; padding: 3px 10px; border-radius: 10px; white-space: nowrap; }
.c-city { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #46586a; }
.c-city select { padding: 6px 8px; font-size: 13px; border: 1px solid #c3ccd6; border-radius: 6px; background: #fff; color: #1d2b3a; cursor: pointer; }
.c-spacer { flex: 1; }
.c-adv { font-size: 12.5px; color: #0d7470; text-decoration: none; white-space: nowrap; }
.c-adv:hover { text-decoration: underline; }
.c-lang { display: flex; gap: 2px; }
.c-lang button { font-size: 12px; padding: 4px 8px; border: 1px solid #d3dbe4; background: #fff; border-radius: 4px; cursor: pointer; color: #46586a; }
.c-lang button[aria-pressed="true"] { background: #e7f3f1; color: #0a5a57; border-color: #b5d9d4; }

/* ---- application shell ---- */
.c-shell { flex: 1; min-height: 0; display: grid; grid-template-columns: clamp(360px, 28vw, 460px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.c-left { grid-column: 1; grid-row: 1; overflow-y: auto; background: #fbfcfe; border-right: 1px solid #e3e9f0; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.c-map-wrap { grid-column: 2; grid-row: 1; position: relative; min-height: 0; }
#map { position: absolute; inset: 0; background: #eef2f5; }
.c-detail { background: #fff; border: 1px solid #e3e9f0; border-radius: 10px; padding: 10px 14px 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.c-detail[hidden] { display: none; }
.c-sliderbar { grid-column: 1 / -1; grid-row: 2; background: #fff; border-top: 1px solid #e3e9f0; padding: 8px 14px; }

/* Top-right of the map: the layers button (Leaflet's own layers icon, owner 2026-09-30 «as map layers»)
   with the zoom under it, at every width */
.leaflet-top.leaflet-right { top: 62px; }

/* shared chip */
.c-chip { font-size: 13px; padding: 6px 11px; border: 1px solid #c3ccd6; background: #fff; border-radius: 16px; cursor: pointer; color: #46586a; line-height: 1.1; }
.c-chip[aria-pressed="true"] { background: #0d7470; color: #fff; border-color: #0d7470; }
.c-chip[disabled], .c-chip[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.c-scenario-badge.c-toast { top: auto; bottom: 20px; background: #0d7470; }

/* pollutant chips — a wrapping group in the rail (desktop), a scroll row on mobile */
.c-polbar { display: flex; flex-wrap: wrap; gap: 5px; }

/* «Сейчас» card — first thing in the rail */
.c-now { background: #fff; border: 1px solid #e3e9f0; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); padding: 10px 12px; }
.c-now[hidden] { display: none; }
.c-now-head { font-size: 12px; font-weight: 700; color: #46586a; }
.c-now-val { font-size: 26px; font-weight: 800; color: #1d2b3a; line-height: 1.15; margin: 2px 0; }
.c-now-val span { font-size: 12px; font-weight: 600; color: #5a6875; }
.c-now-sub { font-size: 11.5px; color: #5a6875; }
.c-now-lvl { font-size: 13px; font-weight: 700; color: #1d2b3a; display: flex; align-items: center; gap: 6px; margin: 1px 0 2px; flex-wrap: wrap; }
.c-now-lvl svg { flex: none; }
.c-lvl-tag { font-size: 10px; font-weight: 400; color: #8896a5; }
.c-now-vs { font-size: 12px; color: #46586a; margin: 1px 0 3px; min-height: 1em; font-variant-numeric: tabular-nums; }

/* ── Phase 7 polish: muted basemap, cascade, onboarding, my-point ─────────────────────────── */
/* The basemap steps back so the air layer is the only loud element (plan gate Q5 default). */
.leaflet-tile-pane { filter: saturate(0.72) contrast(0.97); }
@media (prefers-reduced-motion: no-preference) {
  .c-left > * { animation: c-rise .26s ease both; }
  .c-left > *:nth-child(2) { animation-delay: .06s; }
  .c-left > *:nth-child(3) { animation-delay: .12s; }
  .c-left > *:nth-child(4) { animation-delay: .18s; }
  .c-left > *:nth-child(5) { animation-delay: .24s; }
  @keyframes c-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
.c-onboard { position: fixed; inset: 0; z-index: 1400; background: rgba(20,30,42,0.45); display: flex; align-items: center; justify-content: center; padding: 20px; }
.c-onb-card { background: #fff; border-radius: 14px; padding: 20px 22px; max-width: 380px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
.c-onb-card ul { margin: 0 0 14px; padding-left: 20px; font-size: 14px; color: #1d2b3a; }
.c-onb-card li { margin: 8px 0; }
.c-cta-btn { font-size: 14px; font-weight: 600; padding: 8px 16px; background: #0d7470; color: #fff; border: none; border-radius: 8px; cursor: pointer; }
.c-cta-btn:hover { background: #0a5a57; }
.c-my-set { font-weight: 700; color: #0a5a57; }
.c-my-chip { border-color: #0a5a57; }

/* Episode log (Phase 6) */
.c-episodes { background: #fff; border: 1px solid #e3e9f0; border-radius: 10px; padding: 8px 10px; }
.c-episodes[hidden] { display: none; }
.c-ep-head { width: 100%; text-align: left; font-size: 12px; font-weight: 700; color: #46586a; background: none; border: none; cursor: pointer; padding: 2px 0; }
.c-ep-row { display: block; width: 100%; text-align: left; font-size: 11.5px; color: #1d2b3a; background: none; border: none; border-top: 1px solid #f0f3f7; padding: 5px 0; cursor: pointer; font-variant-numeric: tabular-nums; }
.c-ep-row:hover { color: #0a5a57; }
.c-ep-static { cursor: default; color: #5a6875; }
.c-ep-static:hover { color: #5a6875; }

/* ── «Сутки города» (plan Phase 5): fullscreen loop — same frames, chrome hidden ─────────── */
body.c-filming .c-header, body.c-filming .c-left, body.c-filming .c-detail,
body.c-filming .c-sliderbar, body.c-filming .c-legend, body.c-filming .c-mapbtn,
body.c-filming .c-pop { display: none !important; }
body.c-filming .c-shell { grid-template-columns: 1fr; grid-template-rows: 1fr; }
body.c-filming .c-map-wrap { grid-column: 1; grid-row: 1; }
body.c-film-anim #map { transition: filter 1s ease; }
body.c-film-night #map { filter: brightness(0.72) saturate(0.9); }
.c-film-bar { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 1300;
  display: flex; align-items: baseline; gap: 14px; background: rgba(20,30,42,0.82); color: #fff;
  border-radius: 14px; padding: 10px 18px; box-shadow: 0 4px 18px rgba(0,0,0,0.3); max-width: 94vw; flex-wrap: wrap; }
.c-film-clock { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.c-film-city { font-size: 15px; font-weight: 600; }
.c-film-note { font-size: 11px; color: #b9c6d4; }
.c-film-exit { border: none; background: none; color: #d7e0e9; font-size: 18px; cursor: pointer; padding: 0 2px; }
.c-film-exit:hover { color: #fff; }

/* Day rhythm (Phase 4) */
.c-dayr { margin-top: 8px; }
.c-dayr[hidden] { display: none; }
.c-dayr-head { font-size: 11px; font-weight: 700; color: #46586a; margin-bottom: 2px; }

/* ── Place chips (plan Phase 3): named places valued by the map's own estimate ───────────── */
.c-places { margin: 8px 0 2px; }
.c-places[hidden] { display: none; }
.c-places-row { display: flex; flex-wrap: wrap; gap: 6px; }
.c-place-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #1d2b3a;
  background: #fff; border: 1px solid #d3dbe4; border-radius: 14px; padding: 4px 10px; cursor: pointer; }
.c-place-chip:hover { border-color: #9fb6cc; background: #f4f8fc; }
.c-place-chip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.c-places-note { margin-top: 4px; }

/* ── The hub: /cities as a national dashboard (plan Phase 2) ─────────────────────────────── */
.c-hub { position: fixed; inset: 0; z-index: 1200; background: #f4f7fa; overflow-y: auto; }
.c-hub[hidden] { display: none; }
.c-hub-inner { max-width: 880px; margin: 0 auto; padding: 34px 20px 60px; }
.c-hub h1 { margin: 0 0 6px; font-size: 26px; color: #1d2b3a; }
.c-hub-sub { margin: 0 0 22px; font-size: 14px; color: #5a6875; max-width: 62ch; }
.c-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.c-hub-card { display: block; background: #fff; border: 1px solid #e3e9f0; border-radius: 12px;
  padding: 16px 18px; text-decoration: none; color: #1d2b3a; transition: box-shadow .15s, transform .15s; }
.c-hub-card:hover { box-shadow: 0 4px 14px rgba(29,43,58,.10); transform: translateY(-1px); }
.c-hub-name { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.c-hub-val { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; min-height: 30px; }
.c-hub-aqi { display: inline-block; min-width: 52px; padding: 4px 9px; border-radius: 9px; text-align: center; } /* band colour from .c-aqi-<id> */
.c-hub-band { font-size: 15px; font-weight: 700; color: #1d2b3a; vertical-align: 4px; margin-left: 4px; }
.c-hub-meta { margin-top: 7px; font-size: 12px; color: #5a6875; line-height: 1.4; }
.c-hub-line { display: block; } /* D-B3: whose the all-sensors number is, then each network's own number — one per line */
.c-hub-note { margin-top: 20px; font-size: 12px; color: #7a8794; max-width: 70ch; }
@media (prefers-reduced-motion: reduce) { .c-hub-card { transition: none; } }
.c-now-trend { margin-top: 7px; font-size: 12px; padding: 4px 10px; border: 1px solid #c3ccd6; background: #fff; border-radius: 12px; cursor: pointer; color: #0d7470; }
.c-now-trend:hover { background: #f3f6fa; }
.c-trend-svg { display: block; margin-top: 6px; background: #f7f9fb; border-radius: 4px; max-width: 100%; }
.c-now-range { font-size: 10.5px; color: #5a6875; margin-top: 3px; }

/* layers — a permanent panel in the rail (desktop) and a popover behind the map button (mobile) */
.c-pop h3 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #5a6875; font-weight: 700; }
.c-mapbtn { position: absolute; top: 12px; right: 12px; z-index: 821; width: 44px; height: 44px; border: 1px solid #d3dbe4; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.16); cursor: pointer; font-size: 19px; line-height: 1; color: #46586a; display: flex; align-items: center; justify-content: center; background-image: url(/vendor/leaflet/images/layers.png); background-repeat: no-repeat; background-position: center; background-size: 26px 26px; }
@media (min-resolution: 2dppx) { .c-mapbtn { background-image: url(/vendor/leaflet/images/layers-2x.png); } }
.c-mapbtn[aria-expanded="true"] { background-color: #e7f3f1; border-color: #b5d9d4; color: #0a5a57; }
.c-pop { position: absolute; top: 62px; right: 12px; z-index: 821; width: 264px; max-width: 74vw; max-height: calc(100% - 80px); overflow-y: auto; background: #fff; border: 1px solid #e3e9f0; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.18); padding: 12px 13px; font-size: 13px; }
.c-pop[hidden] { display: none; }
.c-toggle { display: flex; align-items: center; gap: 9px; padding: 6px 0; cursor: pointer; }
.c-licon { flex: none; vertical-align: middle; }
.c-method-line { margin: 0 0 8px; font-size: 12px; color: #46586a; line-height: 1.4; }
.c-layer-sub { margin: -3px 0 4px 40px; font-size: 11px; color: #8896a5; line-height: 1.35; }
.c-toggle input { margin: 0; width: 17px; height: 17px; }
.c-expert { border-top: 1px solid #eef2f6; padding-top: 8px; margin-top: 4px; }
.c-expert summary { cursor: pointer; font-size: 12.5px; color: #46586a; list-style: none; padding: 3px 0; }
.c-expert summary::-webkit-details-marker { display: none; }
.c-expert summary::before { content: "▸ "; color: #8896a5; }
.c-expert[open] summary::before { content: "▾ "; }
.c-scenario-note { font-size: 11px; color: #5a6875; margin: 6px 0; line-height: 1.4; }
.c-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.c-mt6 { margin-top: 6px; }
.c-scen-speed { width: 56px; }

/* station list (viewport list — the keyboard path through a dense city) */
.c-stlist details { background: #fff; border: 1px solid #e3e9f0; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; }
.c-stlist summary { cursor: pointer; color: #46586a; font-weight: 600; list-style: none; }
.c-stlist summary::-webkit-details-marker { display: none; }
.c-stlist summary::before { content: "▸ "; color: #8896a5; }
.c-stlist details[open] summary::before { content: "▾ "; }
.c-stlist ul { list-style: none; margin: 8px 0 0; padding: 0; max-height: 300px; overflow-y: auto; }
.c-stlist li { margin: 0; }
.c-stlist button { width: 100%; display: flex; justify-content: space-between; gap: 8px; padding: 5px 6px; border: 0; background: none; cursor: pointer; font-size: 12.5px; color: #1d2b3a; border-radius: 5px; text-align: left; }
.c-stlist button:hover, .c-stlist button:focus { background: #e7f3f1; }
.c-stlist button[aria-current="true"] { background: #e2eefc; font-weight: 700; }
.c-stlist .v { color: #46586a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-stlist .silent { color: #8896a5; }

/* detail panel content */
.c-det-close { float: right; border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: #8896a5; }
.c-det-close:hover { color: #46586a; }
.c-det-back { display: inline-block; margin: 0 0 8px; padding: 5px 10px; font-size: 12.5px; font-weight: 600; color: #0a5a57; background: #e7f3f1; border: 1px solid #b5d9d4; border-radius: 14px; cursor: pointer; }
.c-det-back:hover { background: #e2edf9; }
/* desktop: the detail REPLACES the tab body in the rail; the tabs stay as the way back */
@media (min-width: 1000px) {
  body.c-det-open #c-tab-body, body.c-det-open #place-chips { display: none !important; }
}
.c-det-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #5a6875; font-weight: 700; }
.c-det-name { font-size: 15.5px; font-weight: 700; margin: 2px 0 8px; }
.c-det-val { font-size: 30px; font-weight: 800; line-height: 1.1; }
.c-det-val span { font-size: 13px; font-weight: 600; color: #5a6875; }
.c-det-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid #f0f3f7; font-size: 12.5px; }
.c-det-row span { color: #5a6875; }
.c-det-row b { font-weight: 600; text-align: right; }
.c-det-note { font-size: 11.5px; color: #5a6875; line-height: 1.5; margin-top: 8px; }
.c-det-hist { margin-top: 10px; }
.c-det-hist svg { display: block; background: #f7f9fb; border-radius: 4px; max-width: 100%; }
.c-authority { display: inline-block; font-size: 10.5px; padding: 1px 7px; border-radius: 9px; background: #e7f3f1; color: #0a5a57; }

/* slider bar internals */
.c-slider-row { display: flex; align-items: center; gap: 8px; }
.c-btn { border: 1px solid #c3ccd6; background: #fff; border-radius: 7px; height: 38px; min-width: 38px; cursor: pointer; font-size: 15px; color: #1d2b3a; padding: 0 8px; }
.c-btn:hover { background: #f3f6fa; }
.c-strip { flex: 1 1 0; min-width: 0; display: flex; gap: 1px; height: 28px; align-items: stretch; cursor: grab; touch-action: none; padding: 2px 0; }
.c-strip:active { cursor: grabbing; }
.c-tick { flex: 1 1 auto; min-width: 0; border-radius: 1px; pointer-events: none; }
.c-tick.absent { background: #e6eaef; }
.c-tick.thin { background: #cfe0b8; }
.c-tick.full { background: #6ea04a; }
/* the HANDLE: the current hour reads as a grabbable marker, not a thin outline */
.c-tick.here { outline: 2px solid #0a5a57; outline-offset: 0; background: #0d7470; transform: scaleY(1.35); border-radius: 2px; box-shadow: 0 0 0 2px rgba(255,255,255,0.9); }
.c-tick.night { filter: brightness(0.72) saturate(0.85); }
.c-tick.night.here { filter: none; }
.c-dates { display: flex; gap: 1px; margin-top: 1px; height: 12px; overflow: hidden; }
.c-date { flex: 1 1 auto; min-width: 0; font-size: 9.5px; color: #5f6d7a; white-space: nowrap; overflow: visible; }
.c-speed { font-variant-numeric: tabular-nums; min-width: 44px; }
.c-cov-row { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.c-cov-row .c-cov { margin-top: 0; }
.c-covsp { flex: 1; }
.c-winlab { font-size: 11px; color: #5a6875; }
.c-winbtn { font-size: 11.5px; padding: 3px 9px; }
.c-slot { font-size: 12.5px; color: #1d2b3a; white-space: nowrap; min-width: 122px; text-align: right; }
.c-slot .meta { color: #5f6d7a; font-size: 11px; }
.c-cov { font-size: 11px; color: #5a6875; margin-top: 5px; }
.c-wind { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: #1d2b3a; font-weight: 600; }
.c-wind[hidden] { display: none; }
.c-wind-svg { flex: 0 0 auto; }
.c-wind-txt { white-space: nowrap; }
.c-wind-tag { color: #5a6875; font-weight: 500; }
/* audit A-01 (Batch 8 Part A): a wind that did not load — said on the wind line, wrapping, beside its «Повторить» */
.c-wind-txt.c-wind-fail { white-space: normal; color: #7a3b00; }
/* W-3 A (owner 2026-10-02 «Do both»): the measured line leads; where the model is weak here its note sits under its line, and at the
   live hour (a measurement stated) the model's line and particles are drawn secondary — faded, never hidden */
.c-wind { flex-wrap: wrap; }
.c-wind-note { flex-basis: 100%; white-space: normal; font-weight: 500; color: #7a3b00; }
.c-wind.c-wind-2nd .c-wind-svg, .c-wind.c-wind-2nd .c-wind-txt { opacity: 0.55; }
.atl-wind-canvas.atl-wind-2nd { opacity: 0.35; }
.c-weak-note { color: #7a3b00; }

/* legend — floats bottom-right of the MAP */
.c-legend { position: absolute; right: 12px; bottom: 12px; z-index: 810; background: rgba(255,255,255,0.97); border: 1px solid #e3e9f0; border-radius: 8px; padding: 9px 11px; font-size: 11.5px; color: #46586a; max-width: 250px; max-height: 56vh; overflow-y: auto; }
.c-legend[hidden] { display: none; }
.c-legend-t { font-weight: 600; color: #1d2b3a; margin-bottom: 5px; font-size: 12px; }
.c-legend-bar { height: 9px; border-radius: 3px; margin: 3px 0; border: 1px solid #d3dbe4; }
.c-legend-scale { display: flex; justify-content: space-between; font-size: 10.5px; color: #5a6875; }
.c-why { margin-top: 5px; line-height: 1.4; color: #5a6875; }
.c-legend-more { margin-top: 6px; }
.c-legend-more summary { cursor: pointer; font-size: 11px; color: #0d7470; list-style: none; }
.c-legend-more summary::-webkit-details-marker { display: none; }
/* a disclosure, not an info link — ⓘ now uniquely means «о веществе» (the .c-polinfo page link) */
.c-legend-more summary::before { content: "▸ "; }
.c-legend-more[open] summary::before { content: "▾ "; }

/* ⓘ → the substance's public reference page (/pollutants/<code>/) */
.c-polinfo { text-decoration: none; color: #0d7470; font-size: 12px; padding: 0 2px; }
.c-polinfo:hover, .c-polinfo:focus { color: #0a4f4c; text-decoration: underline; }
.c-legend-t .c-polinfo { float: right; margin-left: 6px; }

/* scenario badge over the map */
.c-scenario-badge { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 830; background: #8a2f1d; color: #fff; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 6px; letter-spacing: .02em; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }

.c-dot-note { font-size: 11px; color: #5a6875; }
/* sensor markers are SVG; hover quick-value uses Leaflet's tooltip with our class */
.c-sensor { background: transparent; border: 0; }
.c-sensor-sel svg { outline: 3px solid #0a5a57; outline-offset: 1px; border-radius: 10px; }
.c-tip { font-size: 12px; font-weight: 700; }

/* ---- mobile: stacked composition (spec §4.2) ---- */
@media (max-width: 999px) {
  .c-header { gap: 8px; padding: 6px 10px; flex-wrap: wrap; }
  .c-title { display: none; }
  .c-adv { display: none; }
  .c-city select { max-width: 44vw; overflow: hidden; text-overflow: ellipsis; }
  .c-shell { display: flex; flex-direction: column; }
  .c-left { border-right: 0; border-bottom: 1px solid #e3e9f0; padding: 8px 10px; gap: 8px; overflow: visible; }
  .c-polbar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 2px; }
  .c-polbar .c-chip { flex: 0 0 auto; padding: 7px 12px; }
  .c-stlist { display: none; }
  .c-map-wrap { flex: 1; min-height: 52dvh; position: relative; }
  .c-sliderbar { border-top: 1px solid #e3e9f0; padding: 8px 10px; }
  .c-slider-row { flex-wrap: wrap; }
  .c-slot { flex-basis: 100%; min-width: 0; text-align: left; }
  .c-strip { gap: 0; min-width: 0; }
  .c-dates { display: none; }
  .c-wind { flex-wrap: wrap; }
  .c-legend { right: 8px; bottom: 8px; max-width: 60vw; max-height: 34vh; }
  .c-scenario-badge { top: 58px; }
  /* detail = bottom sheet */
  .c-detail { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 62dvh; overflow-y: auto; z-index: 950; border: 0; border-top: 1px solid #d3dbe4; border-radius: 14px 14px 0 0; padding: 12px 16px; box-shadow: 0 -6px 24px rgba(0,0,0,0.22); }
}

/* ══ v3 (owner go-ahead 2026-09-26): the rail answers questions — tabs, cards, evidence badges ══ */
.c-off { display: none !important; }
.c-tabs { display: flex; flex-wrap: wrap; gap: 2px; background: #eef2f6; border-radius: 10px; padding: 3px; }
.c-tab { flex: 1 1 auto; min-width: max-content; font-size: 12.5px; font-weight: 600; padding: 7px 8px; border: 0; background: none; border-radius: 8px; color: #46586a; cursor: pointer; white-space: nowrap; }
.c-tab:hover { color: #1d2b3a; }
.c-tab[aria-selected="true"] { background: #fff; color: #0a5a57; box-shadow: 0 1px 3px rgba(29,43,58,.14); }
.c-tab-body { display: flex; flex-direction: column; gap: 10px; }
.c-card { background: #fff; border: 1px solid #e3e9f0; border-radius: 10px; padding: 10px 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.c-card-t { margin: 0 0 7px; font-size: 12px; font-weight: 700; color: #46586a; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.c-card-t2 { margin: 9px 0 3px; font-size: 11px; font-weight: 700; color: #5a6875; text-transform: uppercase; letter-spacing: .03em; }
.c-card-ref { border-left: 3px solid #8a2f1d; }
.c-right { margin-left: auto; }
.c-link { border: 0; background: none; color: #0d7470; cursor: pointer; padding: 0; font-size: inherit; text-decoration: underline; }
.c-fresh { font-size: 11px; color: #5a6875; margin: 1px 0 6px; }
.c-mapat { font-size: 11.5px; background: #fff7e6; border: 1px solid #f0d9a8; color: #6b4e14; border-radius: 6px; padding: 4px 8px; margin-bottom: 6px; }
/* evidence-class badges: every number names what kind of knowledge it is */
.c-ev { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; padding: 1px 5px; border-radius: 4px; border: 1px solid; line-height: 1.35; vertical-align: middle; white-space: nowrap; }
.c-ev-measured { color: #1d4f85; border-color: #9fbfe0; background: #eef5fc; }
.c-ev-open_sensor { color: #8a5a14; border-color: #e3c38e; background: #fdf6e8; }
/* D-B3 (owner 2026-10-01): the city number of all sensors together — the brand teal, neither network's colour */
.c-ev-all_sensors { color: #0a4f4c; border-color: #b5d9d4; background: #e7f3f1; }
.c-ev-interpolated { color: #4a5a6a; border-color: #c3ccd6; background: #f3f5f8; }
.c-ev-modelled { color: #5a3f8c; border-color: #cbbde6; background: #f6f2fc; }
.c-ev-satellite_column { color: #245f5f; border-color: #a9d3d3; background: #eef8f8; }
.c-ev-inventory { color: #5c4a30; border-color: #d6c7ad; background: #faf6ef; }
.c-ev-thermal { color: #8a2f1d; border-color: #e6b3a6; background: #fcf1ee; }
.c-ev-derived { color: #1d2b3a; border-color: #aab6c3; background: #fff; }
/* strata: official and community never share a number */
.c-st { border-top: 1px solid #eef2f6; padding: 7px 0 4px; }
.c-st:first-of-type { border-top: 0; }
.c-st-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1000px) {
  .c-st-grid { grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .c-st-grid .c-st { border-top: 0; padding-top: 4px; }
  .c-st-grid .c-st + .c-st { border-left: 1px solid #eef2f6; padding-left: 12px; }
}
.c-st-head { font-size: 11.5px; font-weight: 700; color: #46586a; display: flex; align-items: center; gap: 6px; }
.c-st-row { margin: 1px 0; }
.c-st-val { font-size: 24px; font-weight: 800; color: #1d2b3a; font-variant-numeric: tabular-nums; }
.c-unit { font-size: 11.5px; color: #5a6875; font-weight: 600; }
.c-st-none { font-size: 12px; color: #8896a5; }
.c-vs-up { color: #9a4516; } .c-vs-down { color: #2c6a45; }
.c-ref { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.c-ref li { padding: 3px 0; border-bottom: 1px solid #f3f5f8; }
.c-x { font-weight: 700; color: #8a2f1d; }
.c-dom { font-size: 12px; font-weight: 600; color: #1d2b3a; margin-bottom: 6px; }
.c-tbl { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.c-tbl th { text-align: left; font-size: 10.5px; color: #5a6875; font-weight: 600; padding: 3px 4px; border-bottom: 1px solid #e3e9f0; }
.c-tbl td { padding: 4px; border-bottom: 1px solid #f3f5f8; }
.c-tbl tr[data-var] { cursor: pointer; }
.c-tbl tr[data-var]:hover td { background: #f4f8fc; }
.c-tbl tr.c-cur td { background: #eaf2fb; font-weight: 700; }
.c-cond { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; flex-wrap: wrap; }
.c-cond-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #8896a5; }
.c-cond-stagnant .c-cond-dot { background: #8a2f1d; } .c-cond-weak .c-cond-dot { background: #e39a55; }
.c-cond-moderate .c-cond-dot { background: #9dbcd8; } .c-cond-good .c-cond-dot { background: #2f6fb2; }
.c-seg { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.c-dl { text-decoration: none; }
.c-chart { display: block; max-width: 100%; background: #f9fbfc; border-radius: 4px; }
.c-mini-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 10.5px; color: #5a6875; margin-top: 4px; }
.c-lg-bar { display: inline-block; width: 10px; height: 8px; background: #2f6fb2; }
.c-lg-line { display: inline-block; width: 14px; height: 0; border-top: 2px solid #1d3a6b; }
.c-lg-dash { display: inline-block; width: 14px; height: 0; border-top: 2px dashed #c07a2c; }
.c-sw { display: inline-block; width: 11px; height: 11px; border-radius: 2px; }
.c-sw0 { background: #dfeaf3; } .c-sw1 { background: #f2d49a; } .c-sw2 { background: #e39a55; } .c-sw3 { background: #b4531f; }
.c-swx { background: #fff; border: 1px dashed #8896a5; }
.c-sw-ep { background: #f6e2cf; }
.c-v-stagnant { background: #8a2f1d; } .c-v-weak { background: #e39a55; } .c-v-moderate { background: #9dbcd8; } .c-v-good { background: #2f6fb2; }
.c-cal { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.c-cal-mt { font-size: 10.5px; color: #5a6875; font-weight: 700; margin-bottom: 2px; }
.c-cal-d { cursor: pointer; }
.c-cal-d:hover rect { stroke: #1d3a6b; stroke-width: 1.5; }
.c-ep-when { font-size: 12px; color: #46586a; }
.c-ep-type { font-size: 14px; font-weight: 800; color: #1d2b3a; }
.c-chks { list-style: none; margin: 6px 0; padding: 0; font-size: 12px; }
.c-chks li { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid #f3f5f8; }
.c-chk-m { width: 14px; font-weight: 800; }
.c-chk-supports .c-chk-m { color: #2c6a45; } .c-chk-contradicts .c-chk-m { color: #8a2f1d; } .c-chk-unknown .c-chk-m { color: #8896a5; }
.c-chk-d { color: #46586a; font-variant-numeric: tabular-nums; }
.c-chk-s { margin-left: auto; font-size: 10.5px; color: #8896a5; }
.c-tbl-src td:nth-child(2) { text-align: right; width: 34px; }
.c-cov-not_inventoried, .c-cov-none_mapped { color: #8a2f1d; font-weight: 600; }
.c-cov-partial { color: #8a5a14; } .c-cov-satellite_detected { color: #245f5f; }
.c-src-list { margin-top: 6px; font-size: 12px; }
.c-src-list summary { cursor: pointer; color: #0d7470; }
.c-src-list ul { margin: 6px 0 0; padding-left: 16px; max-height: 260px; overflow-y: auto; }
.c-src-list li { margin: 4px 0; }
.c-gaps { margin: 0; padding-left: 16px; font-size: 12px; }
.c-gaps li { margin: 5px 0; }
.c-classes { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.c-classes li { padding: 3px 0; }
.c-ofc { font-style: normal; font-size: 9px; color: #1d4f85; }
.c-est { font-style: normal; font-size: 9px; color: #5a6875; }
.c-adv-link { display: block; margin-top: 8px; font-size: 12px; color: #0d7470; text-decoration: none; }
.c-adv-link:hover { text-decoration: underline; }

/* ══ v3 timeline: the city's hourly chart IS the scrubber ═══════════════════════════════════ */
.c-tl-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.c-tl-top .c-slot { text-align: left; min-width: 150px; font-weight: 700; }
.c-tl-ctrls { display: flex; gap: 4px; }
.c-tl-ctrls .c-btn { height: 32px; min-width: 32px; font-size: 13px; }
.c-play { min-width: 40px; font-weight: 700; }
.c-tl { position: relative; height: 64px; margin-top: 6px; cursor: crosshair; touch-action: none; border: 1px solid #e3e9f0; border-radius: 6px; background: #fff; overflow: visible; }
.c-tl:focus { outline: 2px solid #9fbfe0; outline-offset: 1px; }
.c-tl-chart { position: absolute; inset: 0; pointer-events: none; }
.c-tl-svg { display: block; width: 100%; height: 100%; }
.c-tl-max { position: absolute; left: 4px; top: 2px; font-size: 9.5px; color: #5a6875; background: rgba(255,255,255,.8); padding: 0 3px; border-radius: 3px; }
.c-tl-cursor { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 2px solid #0a5a57; pointer-events: none; }
.c-tl-bubble { position: absolute; top: -20px; left: 4px; white-space: nowrap; font-size: 11px; font-weight: 700; color: #fff; background: #0a5a57; border-radius: 5px; padding: 1px 6px; font-variant-numeric: tabular-nums; }
.c-tl-bubble-left { left: auto; right: 4px; }
.c-dates { position: relative; height: 13px; margin-top: 1px; }
.c-dates .c-date { position: absolute; top: 0; transform: translateX(-50%); font-size: 9.5px; color: #5f6d7a; white-space: nowrap; }
.c-sliderbar .c-cov-row { margin-top: 3px; }
.c-sliderbar .c-wind { margin-top: 0; }

@media (max-width: 999px) {
  .c-left { max-height: 48dvh; overflow-y: auto; }
  .c-tab { font-size: 12px; padding: 7px 2px; }
  .c-tl { height: 56px; }
  .c-tl-top .c-slot { min-width: 0; flex-basis: 100%; }
  .c-winlab { display: none; }
  .c-dates { display: block; }
}
/* batch 2: rose + network swatches */
.c-rose { display: block; margin: 0 auto 4px; }
.c-sw-o { background: #1d4f85; } .c-sw-c { background: #e3c38e; }
/* batch 2: EDGAR sector bars */
.c-sec { margin: 4px 0 6px; }
.c-sec-power { background: #1d3a6b; } .c-sec-industry { background: #6b4fa0; } .c-sec-buildings { background: #b4531f; }
.c-sec-road { background: #c07a2c; } .c-sec-other_transport { background: #e3c38e; } .c-sec-waste { background: #8896a5; } .c-sec-agriculture { background: #6ea04a; }
.c-cov-edgar_estimate_only { color: #5c4a30; }
/* City profile (?profile=1, usefulness §22): every section in one printable column, no map */
body.c-profile .c-map-wrap, body.c-profile .c-sliderbar, body.c-profile .c-detail, body.c-profile #c-tabs,
body.c-profile #place-chips, body.c-profile #station-list, body.c-profile .c-adv { display: none !important; }
body.c-profile { overflow: auto; height: auto; }
body.c-profile .c-shell { display: block; }
body.c-profile .c-left { max-width: 960px; margin: 0 auto; border: 0; overflow: visible; background: #fff; }
.c-prof-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.c-prof-head h1 { font-size: 20px; margin: 10px 0 2px; }
.c-prof-sec h2 { font-size: 16px; margin: 18px 0 8px; padding-bottom: 4px; border-bottom: 2px solid #e3e9f0; }
.c-prof-sec > div { display: flex; flex-direction: column; gap: 10px; }
@media print {
  body.c-profile .c-header, body.c-profile #pol-bar, .c-prof-bar, .c-link, .c-chip, .c-dl, button { display: none !important; }
  .c-card { break-inside: avoid; box-shadow: none; }
  .c-prof-sec { break-before: page; }
  .c-prof-sec:first-of-type { break-before: auto; }
}
/* Enlarged charts (owner 2026-09-27): every small chart opens one big interactive view */
.c-zoom { float: right; margin-left: auto; border: 1px solid #d3dbe4; background: #fff; border-radius: 6px; font-size: 13px; line-height: 1; padding: 3px 6px; cursor: pointer; color: #46586a; }
.c-zoom:hover { background: #e7f3f1; color: #0a5a57; border-color: #b5d9d4; }
.c-zoom-row { display: flex; justify-content: flex-end; margin: 4px 0 2px; }
.c-zoomable { cursor: zoom-in; border-radius: 6px; }
.c-zoomable:hover { box-shadow: 0 0 0 2px #dbe7f4; }
.c-zoomable:focus-visible { outline: 2px solid #0d7470; outline-offset: 2px; }
.c-zm { position: fixed; inset: 0; z-index: 3000; background: rgba(20, 30, 42, 0.55); display: flex; align-items: center; justify-content: center; padding: 2vh 2vw; }
.c-zm[hidden] { display: none; }
body.c-zm-open { overflow: hidden; }
.c-zm-card { background: #fff; border-radius: 12px; width: min(1100px, 96vw); max-height: 94vh; overflow: auto; padding: 14px 18px 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); }
.c-zm-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.c-zm-head h2 { font-size: 17px; margin: 0; }
.c-zm-x { margin-left: auto; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: #5a6875; padding: 0 4px; }
.c-zm-x:hover { color: #1d2b3a; }
.c-zm-ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.c-zm-ctl .c-chip svg { vertical-align: -1px; }
.c-zm-chip[aria-pressed="false"] { opacity: .5; text-decoration: line-through; }
.c-zm-sep { width: 1px; align-self: stretch; background: #e3e9f0; margin: 0 4px; }
.c-zm-tb { margin-left: auto; }
.c-zm-read { min-height: 22px; font-size: 13.5px; color: #1d2b3a; margin: 2px 0 4px; font-variant-numeric: tabular-nums; }
.c-zm-svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.c-zm-html svg { width: 100%; height: auto; }
.c-zm-html .c-rose { max-width: 540px; margin: 0 auto; }
.c-zm-html .c-cal { display: flex; flex-wrap: wrap; gap: 18px; }
.c-zm-html .c-cal-m { flex: 1 1 300px; }
.c-zm-tbl { max-height: 64vh; overflow: auto; }
.c-zm-sum { font-size: 12.5px; color: #46586a; margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1.5; }
@media (max-width: 699px) {
  .c-zm { padding: 0; }
  .c-zm-card { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; padding: 12px; }
}
@media print { .c-zoom, .c-zoom-row { display: none !important; } .c-zoomable { box-shadow: none; } }
/* timeline hover bubble (owner 2026-09-27): the date and values under the pointer, before a click */
.c-tl-hover { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 1px dashed #46586a; pointer-events: none; z-index: 1200; }
.c-tl-hover[hidden] { display: none; }
.c-tl-hbub { position: absolute; bottom: calc(100% + 6px); left: 6px; white-space: nowrap; font-size: 12px; line-height: 1.4; color: #1d2b3a; background: #fff; border: 1px solid #c3ccd6; border-radius: 6px; padding: 4px 8px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18); font-variant-numeric: tabular-nums; }
.c-tl-hbub-left { left: auto; right: 6px; }
.c-tl-hhint { color: #5a6875; font-size: 11px; }
/* «Воздух у моего дома» — the point card, P1 (owner 2026-09-27) */
.c-locbtn { position: absolute; top: 12px; left: 12px; z-index: 821; width: 40px; height: 40px; border: 1px solid #d3dbe4; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.16); cursor: pointer; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.c-locbtn:hover { background: #e7f3f1; border-color: #b5d9d4; }
.c-map-hint { position: absolute; top: 14px; left: 62px; z-index: 820; max-width: min(420px, calc(100% - 140px)); background: rgba(255,255,255,0.95); border: 1px solid #d3dbe4; border-radius: 8px; padding: 6px 10px; font-size: 12.5px; color: #1d2b3a; box-shadow: 0 2px 8px rgba(0,0,0,0.12); pointer-events: none; }
.c-map-hint[hidden] { display: none; }
body.c-filming .c-locbtn, body.c-filming .c-map-hint, body.c-profile .c-locbtn, body.c-profile .c-map-hint { display: none !important; }
.c-pt-pin { background: none; border: 0; }
.c-pt-cell { font-size: 12px; color: #5a6875; margin: 2px 0 6px; }
.c-pt-sec { margin-top: 10px; }
.c-pt-st { margin: 4px 0 6px; }
.c-pt-roses { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.c-pt-rose { margin: 0; text-align: center; }
.c-pt-rose figcaption { font-size: 11.5px; color: #46586a; font-weight: 600; }
.c-zm-html .c-pt-rose { flex: 1 1 260px; }
.c-pt-obj { display: flex; align-items: flex-start; gap: 7px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid #f0f3f7; padding: 6px 2px; font-size: 12.5px; color: #1d2b3a; cursor: pointer; }
.c-pt-obj:hover { background: #f4f8fc; }
.c-pt-obj svg { flex: none; margin-top: 2px; }
@media (max-width: 999px) { .c-map-hint { top: 62px; left: 12px; max-width: calc(100% - 24px); } }
/* P2: the place's history, the comparison, the report (owner 2026-09-27) */
.c-pt-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 4px; }
.c-pt-advice { margin-top: 8px; font-style: italic; }
.c-cmp td:first-child { color: #46586a; width: 40%; }
.c-cmp td:nth-child(2), .c-cmp td:nth-child(3) { font-weight: 600; }
.c-cmp th:nth-child(2) { color: #1d3a6b; } .c-cmp th:nth-child(3) { color: #8a2f1d; }
/* P3: the AI explanation (owner 2026-09-27) */
.c-pt-aibtn { border-color: #cbbde6; color: #5a3f8c; }
.c-pt-ai { border-left: 3px solid #6b4fa0; margin-top: 8px; }
.c-pt-ai p { margin: 5px 0; font-size: 13px; line-height: 1.5; }
.c-pt-ai-h { font-weight: 700; }
.c-pt-ai-msg { margin-top: 6px; }
@media print { .c-pt-aibtn { display: none !important; } }
/* owner test 2026-09-27: «Коротко о месте» on top of the point card */
.c-pt-sum { border-left: 3px solid #0d7470; margin: 4px 0 8px; }
.c-pt-sum ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.c-pt-sum li { margin: 2px 0; }
/* owner phone test 2026-09-27: the rail (pollutants + tabs) was squeezed to a sliver — the page was
   taller than the screen and flex shrank the rail first. On phones the page SCROLLS: the rail keeps
   its height, the map has its own fixed height, nothing shrinks. */
@media (max-width: 999px) {
  html, body { height: auto; min-height: 100%; }
  .c-shell { flex: none; }
  .c-left, .c-sliderbar { flex: none; }
  .c-map-wrap { flex: none; height: 58dvh; min-height: 320px; }
  body.c-filming, body.c-filming .c-shell { height: 100dvh; }
  body.c-filming .c-map-wrap { height: 100dvh; }
}
/* «Хуже/лучше обычного» (owner 2026-09-27): diverging swatches, CSS classes only (CSP) */
.c-anom-sw { display: inline-block; width: 11px; height: 11px; border-radius: 2px; vertical-align: -1px; margin: 0 3px 0 6px; border: 1px solid rgba(29,43,58,0.35); }
.c-anom-much_lower { background: #2166ac; } .c-anom-lower { background: #67a9cf; } .c-anom-usual { background: #ececec; }
.c-anom-higher { background: #f4a582; } .c-anom-much_higher { background: #d6604d; } .c-anom-extreme { background: #b2182b; }
.c-anom-ico { display: inline-block; width: 15px; text-align: center; font-weight: 800; color: #b2182b; }
/* «Откуда пришёл воздух» (owner 2026-09-27) */
.c-traj-ico { display: inline-block; width: 15px; text-align: center; font-weight: 800; color: #6b4fa0; }
.c-traj-seg { margin-bottom: 6px; }
/* AQI (owner 2026-09-27, D-A1..D-A3): the US EPA standard colours (TAD Table 2), text chosen for contrast */
.c-aqi-top { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; }
.c-aqi-n { font-size: 34px; font-weight: 800; line-height: 1; min-width: 64px; text-align: center; padding: 6px 8px; border-radius: 10px; }
.c-aqi-band { font-size: 14px; font-weight: 700; color: #1d2b3a; }
.c-aqi-strip { display: grid; grid-template-columns: repeat(24, 1fr); gap: 1px; margin: 8px 0 2px; }
.c-aqi-c { height: 12px; border-radius: 2px; background: #e6eaef; }
/* AQI bands in EcoEsep's display palette (owner 2026-09-29; same bands and order as US EPA, softer — server/services/aqi.js DISPLAY) */
.c-aqi-good { background: #4CBF6B; color: #0e3a1a; }
.c-aqi-moderate { background: #F2CF3C; color: #3f3300; }
.c-aqi-usg { background: #F4973B; color: #3b1e05; }
.c-aqi-unhealthy { background: #D2453B; color: #fff; }
.c-aqi-very_unhealthy { background: #8A5BB0; color: #fff; }
.c-aqi-hazardous { background: #7D2A45; color: #fff; }
.c-aqi-line { margin-top: 4px; font-size: 12px; color: #33475b; }
/* owner 2026-09-29: resident-first AQI card — advice, warnings and exclusions up front; the rest behind «Подробнее» */
.c-aqi-advice { font-size: 13.5px; font-weight: 700; color: #1d2b3a; }
.c-aqi-warn { color: #7a3b00; background: #fff4e5; border-radius: 8px; padding: 5px 8px; }
.c-aqi-quar, .c-aqi-excl { margin-top: 6px; }
.c-aqi-more { margin-top: 10px; border-top: 1px solid #e3e9f0; padding-top: 6px; }
.c-aqi-more > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: #0a5a57; padding: 4px 0; }
.c-aqi-fc { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.c-aqi-fcd { font-size: 11px; padding: 2px 6px; border-radius: 6px; }
.c-chip-aqi { font-weight: 800; }
.c-aqi-subs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.c-aqi-sub { font-size: 11px; font-weight: 700; border: 1px solid rgba(29,43,58,0.25); border-radius: 6px; padding: 2px 6px; cursor: pointer; }
.c-aqi-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 3px 0 6px; vertical-align: -1px; }
.c-aqi-days { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; margin: 4px 0; }
.c-aqi-day { font-size: 10px; text-align: center; padding: 3px 0; border-radius: 3px; }
.c-aqi-day-none { background: #e6eaef; color: #5a6875; }
.c-aqi-strip-fc { grid-template-columns: repeat(auto-fill, minmax(8px, 1fr)); }
/* AQI legend, compact (owner mobile screenshot 2026-09-27: the legend covered half the map) */
.c-aqi-lgrow { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; color: #33475b; margin: 2px 0 4px; }
.c-aqi-lg { display: inline-flex; align-items: center; }
.c-aqi-lg .c-aqi-sw { margin: 0 3px 0 0; }
@media (max-width: 999px) {
  /* the rail scrolls on its own on a phone: keep the AQI / pollutant switch within reach */
  .c-polbar { position: sticky; top: -8px; z-index: 6; background: #fff; margin-top: -8px; padding-top: 8px; }
  .c-legend { max-width: min(260px, calc(100% - 80px)); max-height: 40vh; padding: 7px 9px; }
}
/* the app-view link — phones only (owner 2026-09-27, D-M5) */
/* «Простой вид — Воздух» at every width (owner 2026-09-30 Air / Cities split); on a phone the bar below
   the header carries it until closed */
.c-applink { display: inline-block; font-size: 12px; color: #0a4f4c; text-decoration: none; border: 1px solid #b5d9d4; background: #e7f3f1; border-radius: 8px; padding: 4px 8px; white-space: nowrap; }
.c-applink:hover { background: #d7ece8; }
.c-phonebar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 7px 40px 7px 12px; position: relative; background: #e7f3f1; border-bottom: 1px solid #b5d9d4; color: #0a4f4c; font-size: 13px; line-height: 1.35; }
.c-phonebar[hidden] { display: none; }
.c-phonebar a { color: #0a4f4c; font-weight: 700; }
.c-phonebar-x { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: transparent; color: #0a4f4c; font-size: 20px; line-height: 1; cursor: pointer; }
@media (max-width: 699px) { body.c-bar-on .c-applink { display: none; } }
body.c-filming .c-phonebar, body.c-profile .c-phonebar, body.c-profile .c-applink { display: none !important; }

/* S-06 (review 2026-09-30): the data-quality notes fold into one line */
.c-aqi-qc { margin-top: 6px; }
.c-aqi-qc > summary { font-size: 12.5px; color: #46586a; cursor: pointer; list-style: none; }
.c-aqi-qc > summary::-webkit-details-marker { display: none; }
.c-aqi-qc > summary::after { content: " ›"; }
.c-aqi-qc[open] > summary::after { content: " ⌄"; }

/* DEC-AIR-1 (2026-09-30): no particle value → no number, grey */
.c-aqi-none { background: #e6eaef; color: #5a6875; }

/* DEC-AIR-4 (2026-09-30): the field's network */
.c-layer-net { font-size: 12.5px; color: #46586a; margin: 2px 0 8px 22px; line-height: 1.8; }
.c-net { white-space: nowrap; margin-right: 8px; cursor: pointer; }

/* U-05 (2026-09-30): one «Вещество: AQI ▾» select instead of nine chips */
.c-polsel { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #46586a; }
.c-polsel select { font: inherit; font-size: 14px; font-weight: 600; color: #1d2b3a; padding: 6px 28px 6px 10px; border: 1px solid #c3ccd6; border-radius: 8px; background-color: #fff; cursor: pointer; }

/* FUT-134 step 1 (2026-09-30): the private-housing layer's legend */
.c-legend-house { margin-top: 8px; padding-top: 6px; border-top: 1px solid #e3e9f0; }
.c-house-sw { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; font-size: 11px; }
.c-house-ico { font-weight: 700; color: #475569; } /* retest 2026-10-01 (H-N2): the slate of the house classes, never an AQI colour */
.c-ev-context { color: #6b4a22; border-color: #e2c9a3; background: #fbf5ec; }

/* UX-01 (audit 2026-09-30): zoom is no longer locked, so a phone must not zoom into a form control on focus —
   iOS does that below 16 px */
@media (max-width: 699px) { input, select, textarea { font-size: 16px !important; } }