/* eFind Weather v2 - app styles
   Tokens follow eFind Maps v2 / News v2. Dark mode: data-theme="dark" or the OS setting. */

/* ---------- tokens ---------- */
:root{
  --brand:#1877f2; --brand-ink:#fff; --brand-soft:#e7f0fe;
  --good:#1e8e3e; --warn:#e37400; --bad:#d93025;
  --bg:#f6f7f9; --surface:#fff; --surface-2:#f1f3f4; --hover:#f1f3f4;
  --text:#202124; --muted:#5f6368; --faint:#9aa0a6; --border:#dadce0;
  --shadow:0 1px 2px rgba(60,64,67,.2),0 1px 3px 1px rgba(60,64,67,.1);
  --shadow-lg:0 4px 8px 3px rgba(60,64,67,.15),0 1px 3px rgba(60,64,67,.3);
  --radius:16px; --pill:24px;
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --top-h:64px;
  --hero-a:#4facfe; --hero-b:#1877f2; --hero-ink:#fff;
  --rain:#3b82f6; --temp-line:#f59e0b;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand:#8ab4f8; --brand-ink:#0b1b33; --brand-soft:#1d2d45;
    --good:#5bb974; --warn:#fbbc04; --bad:#f28b82;
    --bg:#1a1c1f; --surface:#25272b; --surface-2:#2f3136; --hover:#35373c;
    --text:#e8eaed; --muted:#bdc1c6; --faint:#80868b; --border:#3c4043;
    --shadow:0 1px 3px rgba(0,0,0,.6); --shadow-lg:0 6px 16px 4px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --brand:#8ab4f8; --brand-ink:#0b1b33; --brand-soft:#1d2d45;
  --good:#5bb974; --warn:#fbbc04; --bad:#f28b82;
  --bg:#1a1c1f; --surface:#25272b; --surface-2:#2f3136; --hover:#35373c;
  --text:#e8eaed; --muted:#bdc1c6; --faint:#80868b; --border:#3c4043;
  --shadow:0 1px 3px rgba(0,0,0,.6); --shadow-lg:0 6px 16px 4px rgba(0,0,0,.45);
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 var(--font);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:var(--brand)}
h1,h2,h3{margin:0;font-weight:600}
h2{font-size:17px}
img{display:block}
[hidden]{display:none!important}
svg{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg .fill{fill:currentColor;stroke:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--muted);flex:none}
.icon-btn:hover{background:var(--hover)}
.icon-btn.accent{color:var(--brand)}
.pill{display:inline-flex;align-items:center;gap:2px;height:34px;padding:0 12px;border:1px solid var(--border);border-radius:var(--pill);color:var(--muted);font-weight:500;font-size:14px}
.pill:hover{background:var(--hover)}
.pill .u-sep{color:var(--faint)}
html[data-units="f"] .pill .u-f,html[data-units="c"] .pill .u-c{color:var(--brand);font-weight:700}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--border)}
.top-in{max-width:1180px;margin:0 auto;height:var(--top-h);display:flex;align-items:center;gap:16px;padding:0 16px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text);font-size:21px;white-space:nowrap;flex:none}
.brand b{color:var(--brand);font-weight:600}
.brand img{width:28px;height:28px}
.search{position:relative;flex:1 1 0;min-width:0;max-width:560px;display:flex;align-items:center;height:44px;background:var(--surface-2);border-radius:22px;padding:0 4px 0 12px}
.search:focus-within{background:var(--surface);box-shadow:var(--shadow)}
.search-ic{color:var(--muted);width:22px;height:22px}
.search input{flex:1;min-width:0;height:44px;border:0;background:none;padding:0 8px;font-size:16px;outline:none;-webkit-appearance:none;appearance:none}
.search input::-webkit-search-cancel-button{display:none}
.suggest{position:absolute;left:0;right:0;top:50px;margin:0;padding:6px 0;list-style:none;background:var(--surface);border-radius:12px;box-shadow:var(--shadow-lg);border:1px solid var(--border);max-height:60vh;overflow:auto;z-index:45}
.suggest li{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer}
.suggest li svg{width:20px;height:20px;color:var(--muted)}
.suggest li[aria-selected="true"],.suggest li:hover{background:var(--hover)}
.suggest li .sub{color:var(--muted);font-size:13px;margin-left:auto;white-space:nowrap}
.suggest .hd{padding:6px 14px 2px;font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.top-actions{display:flex;align-items:center;gap:4px;margin-left:auto;flex:none}
.apps{position:relative}
.menu{position:absolute;right:0;top:46px;min-width:200px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;z-index:45}
.menu-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;color:var(--text);text-decoration:none;font-weight:500}
.menu-item:hover{background:var(--hover)}
.menu-item svg{width:20px;height:20px;color:var(--muted)}
#theme_btn svg{display:none}
html:not([data-theme]) #theme_btn .ic-auto,html[data-theme="light"] #theme_btn .ic-light,html[data-theme="dark"] #theme_btn .ic-dark{display:block}

/* ---------- layout ---------- */
.wrap{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:16px 16px 24px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.col-main,.col-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.two{display:flex;flex-wrap:wrap;gap:16px}
.two>.card{flex:1 1 280px;min-width:0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.notice{background:var(--brand-soft);color:var(--text);border-radius:12px;padding:10px 14px;margin-bottom:16px;font-size:14px}
.notice.bad{background:#fde8e6;color:#8a1c12}
:root[data-theme="dark"] .notice.bad{background:#4a1f1b;color:#f6c9c4}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .notice.bad{background:#4a1f1b;color:#f6c9c4}}
.updated{color:var(--faint);font-size:12px;text-align:center;margin:16px 0 0}
.ad{min-height:0;margin:0}
.ad ins{border-radius:var(--radius);overflow:hidden}

/* ---------- alerts ---------- */
.alerts{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.alert{border-radius:12px;padding:12px 14px;background:#fff4e5;border:1px solid #f6cf8a;color:#5f3b00}
.alert.sev-extreme,.alert.sev-severe{background:#fde8e6;border-color:#f3a79f;color:#7a140c}
:root[data-theme="dark"] .alert{background:#3b2d12;border-color:#6d5218;color:#ffe0a3}
:root[data-theme="dark"] .alert.sev-extreme,:root[data-theme="dark"] .alert.sev-severe{background:#4a1f1b;border-color:#8a3a33;color:#ffd0cb}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .alert{background:#3b2d12;border-color:#6d5218;color:#ffe0a3}
  :root:not([data-theme="light"]) .alert.sev-extreme,:root:not([data-theme="light"]) .alert.sev-severe{background:#4a1f1b;border-color:#8a3a33;color:#ffd0cb}
}
.alert summary{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600;list-style:none}
.alert summary::-webkit-details-marker{display:none}
.alert summary svg{width:22px;height:22px}
.alert summary .when{margin-left:auto;font-weight:400;font-size:13px;opacity:.85;white-space:nowrap}
.alert .body{margin-top:10px;font-size:14px;white-space:pre-wrap;line-height:1.5}
.alert .src{margin-top:6px;font-size:12px;opacity:.8}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;color:var(--hero-ink);border:0;background:linear-gradient(135deg,var(--hero-a),var(--hero-b));padding:18px 22px 16px}
.hero::after{content:"";position:absolute;inset:auto -20% -60% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.22),rgba(255,255,255,0));pointer-events:none}
.hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hero-place h1{font-size:24px;font-weight:600;letter-spacing:-.2px}
.hero-when{opacity:.9;font-size:14px;margin-top:2px}
.hero-tools{display:flex;gap:2px}
.hero-tools .icon-btn{color:var(--hero-ink);opacity:.9}
.hero-tools .icon-btn:hover{background:rgba(255,255,255,.18)}
.hero-tools .icon-btn[aria-pressed="true"] svg{fill:currentColor}
.hero-main{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:8px 18px;margin-top:8px;position:relative;z-index:1}
.hero-temp{font-size:84px;font-weight:600;line-height:1;letter-spacing:-3px}
.hero-icon{width:128px;height:128px}
.hero-cond{min-width:0}
.hero-desc{font-size:20px;font-weight:600;line-height:1.2}
.hero-hilo{margin-top:4px;font-size:15px;opacity:.95}
.hero-feels{font-size:14px;opacity:.9}
.hero-strip{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.3);position:relative;z-index:1;font-size:13px}
.hero-strip div{display:flex;align-items:center;gap:6px;opacity:.95}
.hero-strip svg{width:18px;height:18px;stroke-width:2}
.hero-strip b{font-weight:600}
.sky-clear-day{--hero-a:#56ccf2;--hero-b:#2f80ed}
.sky-clear-night{--hero-a:#243b55;--hero-b:#141e30}
.sky-clouds-day{--hero-a:#8fa6c0;--hero-b:#5c7a9c}
.sky-clouds-night{--hero-a:#3a4a5e;--hero-b:#1f2a38}
.sky-partly-day{--hero-a:#6fb1fc;--hero-b:#4364f7}
.sky-partly-night{--hero-a:#34476b;--hero-b:#1c2541}
.sky-rain{--hero-a:#5b7fa6;--hero-b:#2c3e5f}
.sky-storm{--hero-a:#4b5a7a;--hero-b:#1b2033}
.sky-snow{--hero-a:#a7c4e0;--hero-b:#6c8fb8}
.sky-fog{--hero-a:#9aa7b4;--hero-b:#6b7784}
.sky-hot{--hero-a:#ff9966;--hero-b:#ff5e62}

/* ---------- nowcast ---------- */
.nowcast{display:flex;align-items:flex-end;gap:2px;height:70px;margin-top:6px}
.nowcast i{flex:1;min-width:0;background:var(--rain);border-radius:2px 2px 0 0;opacity:.85;min-height:2px}
.nowcast-axis{display:flex;justify-content:space-between;color:var(--faint);font-size:12px;margin-top:4px}
.nowcast-sub{color:var(--muted);font-size:14px}

/* ---------- hourly ---------- */
.seg{display:inline-flex;background:var(--surface-2);border-radius:20px;padding:3px}
.seg-btn{padding:5px 12px;border-radius:17px;font-size:13px;font-weight:500;color:var(--muted)}
.seg-btn.is-on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.hourly-scroll{overflow-x:auto;overflow-y:hidden;margin:0 -18px;padding:0 18px 6px;scrollbar-width:thin;scrollbar-color:var(--border) transparent;-webkit-overflow-scrolling:touch}
.hourly{position:relative;display:flex;width:max-content}
.hour{width:70px;flex:none;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:94px;font-size:13px}
.hour.is-day-start{border-left:1px dashed var(--border)}
.hour .h-t{color:var(--muted);font-weight:500;white-space:nowrap}
.hour .h-t b{color:var(--text)}
.hour img{width:40px;height:40px;margin:2px 0}
.hour .h-pop{color:var(--rain);font-weight:600;font-size:12px;display:flex;align-items:center;gap:2px;min-height:16px}
.hour .h-pop svg{width:12px;height:12px;stroke-width:2.2}
.hour .h-wind{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:3px;min-height:16px}
.hour .h-wind svg{width:12px;height:12px}
.hourly-svg{position:absolute;left:0;top:0;width:100%;height:94px;overflow:visible}
.hourly-svg .line{fill:none;stroke:var(--temp-line);stroke-width:2.5;stroke-linejoin:round}
.hourly-svg .area{fill:var(--temp-line);opacity:.12}
.hourly-svg .pt{fill:var(--surface);stroke:var(--temp-line);stroke-width:2}
.hourly-svg .lbl{fill:var(--text);font:600 13px var(--font);text-anchor:middle;stroke:none}
.hourly-svg .bar{fill:var(--rain);opacity:.8}
.hourly-svg .bar-lbl{fill:var(--muted);font:500 12px var(--font);text-anchor:middle;stroke:none}
.hourly-svg .wbar{fill:var(--brand);opacity:.65}

/* ---------- daily ---------- */
.daily{display:flex;flex-direction:column}
.day{border-top:1px solid var(--border)}
.day:first-child{border-top:0}
.day-row{display:grid;grid-template-columns:72px 40px 48px minmax(0,1fr) 20px;align-items:center;gap:10px;width:100%;padding:10px 0;text-align:left;color:var(--text)}
.day-row:hover{background:var(--hover);margin:0 -10px;padding-left:10px;padding-right:10px;width:calc(100% + 20px);border-radius:10px}
.day-row .d-name{font-weight:600}
.day-row .d-name small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.day-row img{width:40px;height:40px}
.day-row .d-pop{color:var(--rain);font-size:13px;font-weight:600;text-align:center}
.day-row .d-pop.none{color:transparent}
.range{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;gap:8px}
.range .lo{color:var(--muted);text-align:right}
.range .hi{font-weight:600}
.range .track{position:relative;height:6px;border-radius:3px;background:var(--surface-2)}
.range .fill{position:absolute;top:0;bottom:0;border-radius:3px}
.day-row .chev{color:var(--faint);transition:transform .2s}
.day.is-open .chev{transform:rotate(180deg)}
.day-detail{display:none;padding:0 0 14px 82px;color:var(--muted);font-size:14px}
.day.is-open .day-detail{display:block}
.day-detail p{margin:0 0 10px;color:var(--text)}
.day-detail .mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px 16px}
.day-detail .mini span{display:block;font-size:12px;color:var(--faint)}
.day-detail .mini b{font-weight:600;color:var(--text)}
.day-parts{display:flex;gap:14px;margin:0 0 12px;flex-wrap:wrap}
.day-parts div{text-align:center;font-size:12px;color:var(--faint)}
.day-parts b{display:block;font-size:15px;color:var(--text)}

/* ---------- details tiles ---------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{background:var(--surface-2);border-radius:12px;padding:12px 12px 10px;min-height:96px;display:flex;flex-direction:column}
.tile .t-h{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.03em}
.tile .t-h svg{width:16px;height:16px}
.tile .t-v{font-size:22px;font-weight:600;margin-top:6px;line-height:1.1}
.tile .t-v small{font-size:13px;font-weight:500;color:var(--muted);margin-left:2px}
.tile .t-s{margin-top:auto;padding-top:6px;color:var(--muted);font-size:12px}
.tile .bar{height:6px;border-radius:3px;background:linear-gradient(90deg,#1e8e3e,#f9ab00 40%,#d93025 70%,#a142f4);position:relative;margin-top:8px}
.tile .bar i{position:absolute;top:-3px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--text);transform:translateX(-50%)}
.compass{position:relative;width:64px;height:64px;margin:4px auto 0}
.compass svg{width:64px;height:64px}
.compass .c-ring{stroke:var(--border)}
.compass .c-arrow{fill:var(--brand);stroke:none}
.compass .c-lbl{fill:var(--faint);font:500 9px var(--font);text-anchor:middle;stroke:none}
.tile.wind .t-v{text-align:center}
.tile.wind .t-s{text-align:center}

/* ---------- sun & moon ---------- */
.sun-arc{position:relative;width:100%;max-width:300px;margin:0 auto}
.sun-arc svg{width:100%;height:auto}
.sun-arc .arc-bg{stroke:var(--border);stroke-width:2;stroke-dasharray:4 5;fill:none}
.sun-arc .arc-on{stroke:#f59e0b;stroke-width:3;fill:none}
.sun-arc .horizon{stroke:var(--border);stroke-width:1.5}
.sun-arc .sun{fill:#f59e0b;stroke:#fff;stroke-width:2}
.sun-arc .moon{fill:#cbd5e1;stroke:none}
.sun-times{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-top:-6px}
.sun-times b{display:block;color:var(--text);font-size:15px}
.sun-times .r{text-align:right}
.moon-row{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.moon-row img{width:48px;height:48px}
.moon-row b{display:block}
.moon-row span{color:var(--muted);font-size:13px}

/* ---------- air quality ---------- */
.aqi{display:flex;align-items:center;gap:14px}
.aqi-badge{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:24px;color:#fff;flex:none}
.aqi-1{background:#1e8e3e}.aqi-2{background:#7cb342}.aqi-3{background:#f9ab00;color:#202124}.aqi-4{background:#e8710a}.aqi-5{background:#d93025}
.aqi b{font-size:17px;display:block}
.aqi span{color:var(--muted);font-size:13px}
.pollutants{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.pollutants div{background:var(--surface-2);border-radius:10px;padding:8px 10px;font-size:12px;color:var(--muted)}
.pollutants b{display:block;font-size:15px;color:var(--text);font-weight:600}

/* ---------- radar ---------- */
.radar{padding-bottom:12px}
.radar-ctl{display:flex;align-items:center;gap:6px}
.radar-time{font-size:13px;color:var(--muted);min-width:70px}
#radar_play svg{display:none}
#radar_play[aria-pressed="false"] .ic-play,#radar_play[aria-pressed="true"] .ic-pause{display:block}
.radar-map{height:320px;border-radius:12px;overflow:hidden;background:var(--surface-2);position:relative;isolation:isolate}
.radar-map .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:14px}
.radar-legend{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.rl{width:14px;height:8px;border-radius:2px;display:inline-block;margin-left:8px}
.rl1{background:#7fd0ff}.rl2{background:#1f78d1}.rl3{background:#c21f5b}
.rl:first-child{margin-left:0}
.radar-src{margin-left:auto;color:var(--faint)}
.leaflet-container{font:12px var(--font)!important;background:var(--surface-2)!important}
.leaflet-control-attribution{font-size:10px!important;background:rgba(255,255,255,.75)!important}
:root[data-theme="dark"] .leaflet-control-attribution{background:rgba(37,39,43,.8)!important;color:var(--muted)!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .leaflet-control-attribution{background:rgba(37,39,43,.8)!important;color:var(--muted)!important}}
.leaflet-control-attribution a{color:var(--brand)!important}
.leaflet-bar a{background:var(--surface)!important;color:var(--text)!important;border-bottom-color:var(--border)!important}
.radar-dot{width:14px;height:14px;border-radius:50%;background:var(--brand);border:3px solid #fff;box-shadow:0 0 0 2px rgba(24,119,242,.4)}
.leaflet-pane.pane-invert{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6)}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:13px}
.ftr-in{max-width:1180px;margin:0 auto;padding:22px 16px 18px}
.ftr-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ftr-cols h3{font-size:13px;color:var(--text);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em}
.ftr-cols a{display:block;color:var(--muted);text-decoration:none;padding:3px 0}
.ftr-cols a:hover{color:var(--brand);text-decoration:underline}
.social{display:flex;gap:12px}
.social img{border-radius:6px}
.ftr-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;padding-top:12px;border-top:1px solid var(--border);font-size:12px;color:var(--faint)}
.ftr-bottom img{display:inline;vertical-align:-1px}
.ftr-credits a{color:var(--muted)}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .cols{grid-template-columns:1fr}
  /* one column: flatten both columns so the cards can be re-ordered (details right after the forecast) */
  .col-main,.col-side{display:contents}
  .cols>*>*{order:5;min-width:0}
  #hero{order:1}#nowcast{order:2}.col-main>.ad{order:3}#hourly{order:4}#daily{order:5}#details{order:6}#extras{order:7}#radar{order:8}.ad2{order:9}
  .ftr-cols{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  :root{--top-h:56px;--radius:14px}
  .top-in{gap:8px;padding:0 10px}
  .brand span{display:none}
  .search{height:40px;border-radius:20px}
  .search input{height:40px;font-size:16px}
  .suggest{top:46px}
  .pill{height:32px;padding:0 10px;font-size:13px}
  .wrap{padding:12px 12px 20px}
  .card{padding:14px 14px}
  .hourly-scroll{margin:0 -14px;padding:0 14px 6px}
  .hero{padding:16px 16px 14px}
  .hero-place h1{font-size:20px}
  .hero-main{grid-template-columns:auto 1fr;gap:6px 12px}
  .hero-icon{width:96px;height:96px;grid-column:2;grid-row:1;justify-self:end}
  .hero-cond{grid-column:1 / -1}
  .hero-temp{font-size:72px}
  .hero-desc{font-size:18px}
  .day-row{grid-template-columns:64px 36px 40px minmax(0,1fr) 18px;gap:6px}
  .range{grid-template-columns:32px 1fr 32px;gap:6px}
  .day-detail{padding-left:0}
  .tiles{gap:8px}
  .tile .t-v{font-size:20px}
  .pollutants{grid-template-columns:repeat(3,1fr)}
  .radar-map{height:260px}
  .ftr-cols{grid-template-columns:1fr 1fr;gap:12px}
}
@media (max-width:359px){
  .tiles{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}
@media print{
  .top,.ad,.radar,.ftr,.hero-tools{display:none!important}
  .card{break-inside:avoid;border-color:#999}
}