/* ============================================================
   theme.css · v1.4 "Sky window"
   Loads after style.css and insights.css and overrides them.
   One photographic hero that is the sky right now; everything
   below it is quiet, large-type, high-contrast cards.
   Palette switches to night when the scene is dark.
   ============================================================ */
:root{
  --page:#eef2f6;--card:#ffffff;--card-2:#f5f7fa;--ink:#0f1b2d;--muted:#5a6a7e;--line:#e2e8ef;--field:#f2f5f9;--chip:#e7edf4;
  --accent:#1c64d9;--on-accent:#ffffff;--accent-soft:#e6effd;--warm:#d97b15;--cool:#2b8ed9;--good:#1f9d55;--warn:#d9822b;--bad:#d14343;
  --glass-hi:var(--card);--glass-lo:var(--card);--glass-brd:var(--line);--mapbg:#dfe7ee;
  --radius:24px;--radius-lg:30px;--shadow:0 10px 30px rgba(15,27,45,.06),0 1px 2px rgba(15,27,45,.05);
  --font-ui:NotoArabic,Manrope,system-ui,sans-serif;--font-num:Manrope,NotoArabic,sans-serif;
  color-scheme:light;
}
:root.scene-dark{
  --page:#0b1424;--card:#132038;--card-2:#182a46;--ink:#edf2f9;--muted:#9fb0c6;--line:#243655;--field:#182a46;--chip:#1e3354;
  --accent:#8db8ff;--on-accent:#0b1424;--accent-soft:#1d3660;--warm:#f0a24a;--cool:#6cb6f2;--mapbg:#17293f;
  --shadow:0 10px 30px rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.3);
  color-scheme:dark;
}
html{scroll-padding-top:16px}
body{background:var(--page);color:var(--ink);font-family:var(--font-ui);font-size:17px;line-height:1.7;transition:background .5s,color .5s}
html[lang=en] body{font-family:Manrope,NotoArabic,system-ui,sans-serif}
.sky,#sky-canvas,body::after{display:none}
h1,h2,h3{font-weight:800}
.subtle{font-size:14px;color:var(--muted)}
.icon{stroke-width:1.8}
.card,.glass{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:none;-webkit-backdrop-filter:none}
.icon-button{width:46px;min-width:46px;height:46px;border-radius:50%;border:1px solid transparent;color:var(--ink)}
.icon-button:hover{background:var(--chip);border-color:var(--line)}
.text-button{font-size:15px;min-height:44px;color:var(--accent)}
.small-button{min-height:44px;padding:8px 16px;border-radius:999px;background:var(--field);border:1px solid var(--line);font-size:15px;font-weight:600;color:var(--ink);margin:0}
.primary-button{background:var(--accent);color:var(--on-accent);min-height:54px;border-radius:16px;padding:12px 22px;font-size:17px;font-weight:700;box-shadow:none}
.primary-button:hover{filter:brightness(1.06)}
.eyebrow{font-size:13px;color:var(--muted);font-weight:700;letter-spacing:0;text-transform:none;margin-bottom:6px}

/* --- Header --------------------------------------------------- */
.topbar{max-width:1200px;margin:0 auto;padding:18px 24px 4px;background:none;border:0;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{gap:12px}
.brand img{filter:none;border-radius:12px}
.brand strong{font-size:20px;font-weight:800;line-height:1.3}
.brand small{font-size:12px;color:var(--muted);margin-top:2px}
.header-actions{gap:8px}
.location-button{border:1px solid var(--line);background:var(--card);border-radius:999px;min-height:46px;padding:8px 16px;font-size:15px;font-weight:700;box-shadow:none;color:var(--ink)}
.location-button .icon{width:18px;height:18px;color:var(--accent)}
.location-button .icon:last-child{width:14px;color:var(--muted)}
.language-select{border:1px solid var(--line);background:var(--card);border-radius:999px;height:46px;padding:0 14px;gap:8px}
.language-select .icon{width:18px;height:18px;color:var(--muted)}
.language-select select{font-size:15px;font-weight:600;max-width:110px;color:var(--ink);height:44px;padding:0 2px}
.preview-banner{background:#fff3d6;color:#6e4e12;font-size:13px;padding:8px 16px;justify-content:center}
.status-banner{font-size:15px}

/* --- Shell & tabs ------------------------------------------------ */
.page-shell{max-width:1200px;padding:10px 24px 56px}
.view-tabs{display:flex;gap:6px;margin:6px 0 18px;padding:5px;background:var(--chip);border:0;border-radius:999px;width:max-content;max-width:100%}
.view-tabs a{display:flex;align-items:center;gap:8px;min-height:46px;padding:10px 20px;border-radius:999px;font-size:15px;font-weight:600;color:var(--muted);text-decoration:none;position:static}
.view-tabs a .icon{width:20px;height:20px}
.view-tabs a.selected{background:var(--card);color:var(--ink);box-shadow:var(--shadow);font-weight:800}
.view-tabs a.selected:after{display:none}
.priority-banner{border-radius:20px;font-size:15px;padding:16px 20px}
.priority-banner small{font-size:13px}
.home-screen{display:grid;gap:18px}

/* --- The sky window ------------------------------------------------ */
.weather-card.hero{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-lg);min-height:480px;color:#fff;background:linear-gradient(160deg,#24415f,#0f1b2d);border:0;box-shadow:0 24px 60px rgba(10,20,40,.22)}
.weather-scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.scene-photo{position:absolute;inset:-4%;background-size:cover;background-position:center;opacity:0;transform:scale(1);transition:opacity 1.2s ease,transform 22s linear}
.scene-photo.visible{opacity:1;transform:scale(1.07)}
.scene-photo.tinted{filter:brightness(.5) saturate(.7)}
.scene-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(7,14,28,.82) 0%,rgba(7,14,28,.46) 42%,rgba(7,14,28,.14) 100%),linear-gradient(to left,rgba(7,14,28,.34),transparent 55%)}
html[dir=ltr] .scene-shade{background:linear-gradient(to top,rgba(7,14,28,.82) 0%,rgba(7,14,28,.46) 42%,rgba(7,14,28,.14) 100%),linear-gradient(to right,rgba(7,14,28,.34),transparent 55%)}
.weather-scene canvas{position:absolute;inset:0;width:100%;height:100%;opacity:1;z-index:2}
.weather-scene .cloud{display:none;z-index:1;background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.55),rgba(255,255,255,.02) 68%);filter:blur(18px)}
.weather-scene .cloud-a{width:560px;height:200px;top:-40px;left:-180px;animation:cloud-drift 40s ease-in-out infinite alternate}
.weather-scene .cloud-b{width:420px;height:160px;top:40px;right:-160px;animation:cloud-drift 52s ease-in-out infinite alternate-reverse}
[data-weather-scene*="cloud"] .weather-scene .cloud,[data-weather-scene^="partly"] .weather-scene .cloud,[data-weather-scene="fog"] .weather-scene .cloud{display:block;opacity:.55}
[data-weather-scene*="night"] .weather-scene .cloud{opacity:.22}
.motion-off .weather-scene .cloud{animation:none}
.motion-off .weather-scene canvas{opacity:0}
.hero .weather-card-content{position:relative;z-index:3;display:flex;flex-direction:column;min-height:480px;max-width:none;padding:24px 28px 22px}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.place-button{display:inline-flex;align-items:center;gap:8px;min-height:50px;max-width:72%;padding:8px 18px 8px 14px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;font-size:20px;font-weight:800;text-align:start}
.place-button #place-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.place-button .icon{width:21px;height:21px}
.place-button .icon:last-child{width:16px;opacity:.85}
.hero-tools{display:flex;gap:6px;flex-shrink:0}
.hero .icon-button{width:46px;min-width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero .icon-button:hover{background:rgba(255,255,255,.26)}
.hero .saved-icon{background:rgba(255,255,255,.92)!important;color:var(--accent)}
.scene-dark .hero .saved-icon{color:#1c64d9}
.hero .date-line{margin:14px 0 0;font-size:14px;color:rgba(255,255,255,.84)}
.hero .temperature-block{display:flex;align-items:center;justify-content:flex-start;gap:34px;margin:auto 0 0;min-height:0;padding-top:20px}
.hero .temperature{font-family:var(--font-num);font-weight:300;font-size:clamp(104px,15vw,156px);letter-spacing:-6px;line-height:.95;text-shadow:0 6px 30px rgba(0,0,0,.4);direction:ltr;display:flex;align-items:flex-start}
.hero .degree{font-size:.42em;line-height:1.55;letter-spacing:0;margin-inline-start:2px;font-weight:300}
.hero .weather-symbol{width:118px;height:118px;margin:0}
.hero .weather-symbol svg{width:100%;height:100%;filter:drop-shadow(0 10px 22px rgba(0,0,0,.4))}
.hero .condition{font-size:25px;font-weight:700;margin:0 0 6px;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero .high-low{display:flex;gap:18px;justify-content:flex-start;font-size:16px;color:rgba(255,255,255,.92);margin:0 0 14px;font-variant-numeric:tabular-nums;max-width:none}
.hero .rain-outlook{display:flex;gap:12px;align-items:center;border-top:1px solid rgba(255,255,255,.22);padding:14px 0 0;margin:0;max-width:none;position:static}
.hero .rain-outlook>span .icon{width:30px;height:30px;color:#fff}
.hero .rain-outlook strong{font-size:17px;font-weight:700;display:block;line-height:1.5}
.hero .rain-outlook small{display:block;font-size:13px;color:rgba(255,255,255,.72);margin-top:2px}
.hero .sun-times{display:flex;gap:22px;margin:14px 0 0;font-size:14px;color:rgba(255,255,255,.86)}
.hero .sun-times span{display:inline-flex;gap:6px;align-items:center}
.hero .sun-times b{font-family:var(--font-num);font-weight:600;direction:ltr}
.hero .sun-times .icon{width:18px;height:18px}
.hero-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.hero .data-status{font-size:13px;color:rgba(255,255,255,.78);margin:0;max-width:none}
.hero .data-status .status-dot{background:#5fd08a}
.hero .data-status.stale{color:#ffd591}.hero .data-status.stale .status-dot{background:#ffc45c}
.hero .data-status.error{color:#ffb4a8}.hero .data-status.error .status-dot{background:#ff8a7a}
.source-line{font-size:12px;color:rgba(255,255,255,.62);margin:0}
.source-line a{color:inherit;display:inline-block;padding:8px 0}
.hero .small-button{align-self:flex-start;margin-top:12px;background:rgba(255,255,255,.9);color:#0f1b2d;border:0}
.loading .hero .temperature-block{opacity:.6}

/* --- Panels ------------------------------------------------------- */
.panel-heading{padding:20px 22px 10px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.panel-heading h2{font-size:18px;font-weight:800}
.panel-heading .subtle,.panel-heading>div>span{font-size:13px;color:var(--muted);margin-top:2px}
.panel-heading>span[data-icon] .icon{color:var(--muted)}
.forecast-panel{margin:0;overflow:hidden}
.forecast-scroll-actions .icon-button{width:42px;min-width:42px;height:42px;border:1px solid var(--line)}
.hourly-strip{display:flex;gap:8px;overflow-x:auto;padding:4px 18px 20px;margin:0;scroll-snap-type:x proximity;scrollbar-width:none}
.hourly-strip::-webkit-scrollbar{display:none}
.hour-cell{flex:0 0 88px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px 12px;border-radius:20px;background:var(--card-2);border:1px solid transparent;color:var(--ink);min-height:0;min-width:0;scroll-snap-align:start;box-shadow:none}
.hour-cell.selected{background:var(--accent-soft);border-color:var(--accent)}
.hour-cell>time{font:600 13px var(--font-num);color:var(--muted);direction:ltr}
.hour-cell svg,.hour-cell>svg{width:40px;height:40px}
.hour-cell>strong{font:700 21px var(--font-num)}
.hour-cell>small{font:600 12px var(--font-num);color:var(--cool);min-height:18px;display:inline-flex;gap:3px;align-items:center}
.hour-cell>small .icon{width:12px;height:12px}
.hour-cell>small.dry{visibility:hidden}
.hour-cell .rain-bar,.hour-cell>small:last-child{display:none}
.home-lower{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}
.detail-stack{display:grid;gap:18px;min-width:0}

/* Days ahead */
.daily-list{padding:4px 22px 14px}
.daily-row{display:grid;grid-template-columns:96px 54px minmax(0,1fr) 120px 104px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;min-height:0}
.daily-row:last-child{border-bottom:0}
.day-name{font-weight:700}
.day-visual{position:relative;width:54px;height:54px;border-radius:16px;background:var(--chip) center/cover no-repeat;overflow:hidden;display:grid;place-items:center;flex-shrink:0}
.day-visual::after{content:"";position:absolute;inset:0;background:rgba(10,20,36,.3)}
.day-visual svg{position:relative;z-index:1;width:38px;height:38px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.day-cond{font-weight:600;min-width:0;line-height:1.4}
.day-cond small{display:inline-flex;align-items:center;gap:4px;font:600 13px var(--font-num);color:var(--cool);margin-top:4px}
.day-cond small .icon{width:13px;height:13px}
.daily-row .range{display:block;height:6px;border-radius:6px;background:var(--field);position:relative;direction:ltr;overflow:hidden}
.daily-row .range>span{position:absolute;top:0;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--cool),var(--warm))}
.daily-row .day-temp{font:700 17px var(--font-num);direction:ltr;text-align:end;white-space:nowrap;display:flex;gap:10px;justify-content:flex-end;align-items:baseline}
.day-temp b{font-weight:700;color:var(--ink)}
.day-temp b::before{content:"↑";font-size:.8em;margin-inline-end:1px;color:var(--warm)}
.day-temp span{color:var(--muted);font-weight:500;margin:0}
.day-temp span::before{content:"↓";font-size:.8em;margin-inline-end:1px;color:var(--cool)}

/* Details grid */
.details-panel{padding:0 0 8px}
.metric-grid{display:grid;grid-template-columns:1fr 1fr;padding:0 22px 8px}
.metric-grid>.extra-weather{display:contents}
.metric-grid>div,.metric-grid>.extra-weather>div{display:grid;grid-template-columns:26px 1fr;column-gap:8px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);min-width:0}
.metric-grid>div:nth-child(odd),.metric-grid>.extra-weather>div:nth-child(odd){padding-inline-end:14px;border-inline-end:1px solid var(--line)}
.metric-grid>div:nth-child(even),.metric-grid>.extra-weather>div:nth-child(even){padding-inline-start:14px}
.metric-grid>.extra-weather>div{border-bottom:0}
.metric-grid>div>span:not([data-icon]):not(.icon-slot),.metric-grid>.extra-weather>div>span:not([data-icon]):not(.icon-slot){font-size:14px;color:var(--muted);line-height:1.4}
.metric-grid .icon{width:21px;height:21px;color:var(--accent)}
.metric-grid strong{grid-column:1/-1;font:600 28px var(--font-num);margin-top:4px;font-variant-numeric:tabular-nums;line-height:1.2}
.metric-grid strong small{font-size:13px;display:inline;font-weight:500;color:var(--muted);margin-inline-start:3px}
.metric-grid>div>small,.metric-grid>.extra-weather>div>small{grid-column:1/-1;font-size:13px;color:var(--muted);margin-top:4px;min-height:1.2em}

/* Air quality */
.air-panel{padding-bottom:6px}
.air-readings{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:6px 22px 14px}
.air-readings>p{font-size:14px;color:var(--muted)}
.air-verdict{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:var(--card-2);font-size:17px;font-weight:700;line-height:1.4}
.air-verdict i{width:14px;height:14px;border-radius:50%;background:var(--good);flex-shrink:0;box-shadow:0 0 0 5px rgba(31,157,85,.18)}
.air-verdict.level-2 i{background:#d7a31a;box-shadow:0 0 0 5px rgba(215,163,26,.2)}
.air-verdict.level-3 i{background:var(--warn);box-shadow:0 0 0 5px rgba(217,130,43,.2)}
.air-verdict.level-4 i{background:var(--bad);box-shadow:0 0 0 5px rgba(209,67,67,.2)}
.air-verdict small{display:block;font:500 13px var(--font-num);color:var(--muted);margin-top:2px}
.air-reading small{font:600 13px var(--font-num);color:var(--muted)}
.air-reading strong{display:block;font:600 26px var(--font-num);margin-top:2px}
.air-reading>span{font:12px var(--font-num);color:var(--muted)}
.air-source{grid-column:1/-1;font-size:12px;color:var(--muted)}
.air-note{margin:0 22px 18px;font-size:13px;line-height:1.7}

/* Collapsible extras */
.more-weather{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.more-weather>summary{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 22px;font-size:16px;font-weight:700;cursor:pointer;list-style:none}
.more-weather>summary::-webkit-details-marker{display:none}
.more-weather>summary .icon{width:22px;height:22px;color:var(--accent)}
.more-weather>summary .chev{margin-inline-start:auto;transition:transform .2s}
.more-weather>summary .chev .icon{color:var(--muted);width:20px;height:20px}
.more-weather[open]>summary{border-bottom:1px solid var(--line)}
.more-weather[open]>summary .chev{transform:rotate(180deg)}
.more-weather>section{border:0;margin:0;padding:18px 22px 22px;background:none;box-shadow:none;border-radius:0}
.more-weather>section .panel-heading{display:none}
.rain-period{font-size:18px}
.rain-accumulations small{font-size:13px}
.rain-accumulations strong{font-size:24px}
.rain-accumulations strong small{font-size:12px}
.rain-column time{font-size:12px}
.rain-column-value{font-size:12px}
.compare-panel .panel-heading{display:flex}
.more-weather>.compare-panel .panel-heading{display:flex;padding:0 0 12px}
.model-table{font-size:14px}
.telegram-promo{width:100%;padding:20px 24px;border:1px solid var(--line);background:var(--card);border-radius:var(--radius);display:flex;align-items:center;gap:16px;text-align:start;color:var(--ink);box-shadow:var(--shadow)}
.telegram-promo strong{font-size:17px;display:block}
.telegram-promo small{font-size:13px;color:var(--muted);margin-top:2px}
.telegram-icon{display:grid;place-content:center;flex-shrink:0;background:var(--accent-soft);color:var(--accent);width:52px;height:52px;border-radius:50%;font-size:28px;transform:rotate(-28deg)}
.promo-arrow{margin-inline-start:auto;font-size:24px;color:var(--muted)}
html[dir=ltr] .promo-arrow{transform:scaleX(-1)}

/* --- Map ---------------------------------------------------------- */
.map-panel{padding:0;overflow:hidden;margin:0}
.map-basemap-status{font-size:13px;color:var(--muted);padding:0 22px 12px}
.map-layers{display:flex;gap:8px;margin:0 22px 14px;overflow-x:auto;padding:2px;scrollbar-width:none}
.map-layers::-webkit-scrollbar{display:none}
.map-layers button{min-height:46px;padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;background:var(--field);border:1px solid var(--line);color:var(--ink);box-shadow:none!important}
.map-layers button .icon{width:18px;height:18px}
.map-layers button.selected{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.map-extra-controls{padding:0 22px 12px}
.map-extra-controls label,.map-extra-controls>p{font-size:13px}
.map-wrap{height:540px;margin:0 16px;border-radius:20px;border:1px solid var(--line);background:var(--mapbg)}
.map-timeline{padding:16px 22px 6px;margin:0}
.map-timeline>div:first-child{font-size:14px;gap:10px}
.timeline-play{min-width:46px;min-height:46px;border-radius:14px;background:var(--chip);border:1px solid var(--line);color:var(--ink)}
.forecast-pill{font-size:12px;padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.timeline-labels{font-size:12px}
.layer-info{margin:12px 22px 18px}
.layer-info h3{font-size:15px}
.layer-info p{font-size:13px;color:var(--muted)}
.layer-info .icon-button{width:40px;min-width:40px;height:40px}
.layer-events{margin:0 22px 20px;font-size:14px;max-height:260px}
.layer-state strong{font-size:14px}
.layer-state p{font-size:13px}
.event-row small,.event-row a{font-size:12px}
.map-locate{width:46px;height:46px;border-radius:14px;bottom:44px}
.map-legend{font-size:11px;bottom:40px}
.leaflet-control-attribution{font-size:10px!important}
.scene-dark .leaflet-tile-pane{filter:saturate(.3) brightness(.78) contrast(1.05)}
.regional-value{font-size:12px}

/* --- Alerts -------------------------------------------------------- */
.alerts-panel{padding:0 0 10px;margin:0}
.alerts-panel .panel-heading{padding:22px 22px 8px;align-items:flex-start}
.alert-toolbar{padding:0 22px;gap:10px}
.alert-filters{gap:6px}
.alert-filters button{min-height:44px;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;background:var(--field);border:1px solid var(--line);color:var(--ink)}
.alert-filters button.selected{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.source-note{padding:10px 22px;font-size:13px}
.alert-cards{padding:0 22px;gap:12px}
.alert-item{border-radius:18px;background:var(--card-2);border:1px solid var(--line);border-inline-start-width:4px;padding:18px}
.alert-item h3{font-size:17px}
.alert-item p{font-size:15px}
.alert-item small,.alert-item>a,.alert-kicker,.alert-kicker .severity{font-size:13px}
.all-clear{grid-column:1/-1;display:grid;grid-template-columns:54px 1fr;gap:2px 14px;align-items:center;padding:20px;border-radius:20px;background:#eaf7ef;color:#14532d;border:1px solid #bfe5cc}
.all-clear .icon-slot{grid-row:1/3;width:54px;height:54px;border-radius:50%;background:#1f9d55;color:#fff;display:grid;place-items:center}
.all-clear .icon-slot .icon{width:28px;height:28px;stroke-width:2.4}
.all-clear strong{font-size:18px}
.all-clear small{font-size:13px;color:#2f6b45;line-height:1.6}
.scene-dark .all-clear{background:#12301f;color:#c8f0d6;border-color:#1f4a31}
.scene-dark .all-clear small{color:#8fcaa4}
#quake-context{padding:4px 22px 12px;font-size:13px}
.notice-card{margin:12px 22px 14px;display:flex;gap:14px;padding:18px;border-radius:20px;background:var(--card-2);border:1px solid var(--line);box-shadow:none}
.notice-symbol{width:46px;height:46px;border-radius:14px;background:var(--chip);color:var(--accent);border:0;display:grid;place-items:center;flex-shrink:0}
.notice-card h3{font-size:16px;margin-bottom:4px}
.notice-card p{font-size:14px;color:var(--muted)}
.notice-card .text-button{font-size:14px;min-height:40px}
.sources-panel{margin-top:18px;padding:14px 22px;border:0;background:none;box-shadow:none}
.sources-panel summary{font-size:14px;color:var(--muted);font-weight:600;min-height:44px;cursor:pointer}
.source-health-row{font-size:14px}
.source-health-row small,.source-state{font-size:12px}

/* --- Footer ---------------------------------------------------------- */
.footer{display:grid;grid-template-columns:1fr auto;gap:16px 24px;align-items:center;padding:28px 4px 8px;border-top:1px solid var(--line);margin-top:18px;color:var(--muted)}
.footer strong{font-size:15px;color:var(--ink)}
.footer p{font-size:13px;margin-top:4px}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:flex-end}
.footer-links button,.footer-links a{font-size:14px;min-height:40px;color:var(--muted);text-decoration:none;padding:6px 0}
.atmosphere-control{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:0;padding:14px 16px;border:1px solid var(--line);border-top:1px solid var(--line);border-radius:18px;background:var(--card)}
.atmosphere-control>span .icon{color:var(--accent)}
.atmosphere-control strong{font-size:14px;color:var(--ink)}
.atmosphere-control small{font-size:12px;color:var(--muted)}
.switch{width:54px;height:32px;border-radius:30px;background:var(--accent);border:2px solid var(--accent);flex-shrink:0}
.switch span{top:3px;right:3px;width:22px;height:22px;background:var(--on-accent)}
.switch[aria-checked=false]{background:var(--field);border-color:var(--line)}
.switch[aria-checked=false] span{background:var(--muted);transform:translateX(-22px)}
html[dir=ltr] .switch span{right:auto;left:3px}
html[dir=ltr] .switch[aria-checked=false] span{transform:translateX(22px)}

/* --- Dialogs ---------------------------------------------------------- */
.dialog{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:28px;box-shadow:0 30px 90px rgba(5,12,25,.45);padding:28px;width:min(620px,calc(100vw - 24px));max-height:90dvh;backdrop-filter:none;-webkit-backdrop-filter:none}
.dialog::backdrop{background:rgba(5,12,25,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dialog h2{font-size:24px;font-weight:800;line-height:1.5;margin-bottom:8px;padding-inline-end:44px}
.dialog>p{font-size:15px;color:var(--muted);line-height:1.8;max-width:none}
.dialog-close{top:16px;inset-inline-end:16px;border:1px solid var(--line);background:var(--card)}
.place-dialog{text-align:start}
.onboarding-art{display:none}
.dialog-languages{display:flex;gap:6px;margin:16px 0;background:var(--field);border:1px solid var(--line);border-radius:999px;padding:5px;width:max-content;max-width:100%}
.dialog-languages button{min-height:42px;padding:6px 18px;border-radius:999px;font-size:15px;font-weight:600;color:var(--muted)}
.dialog-languages button.selected{background:var(--card);color:var(--ink);box-shadow:var(--shadow);font-weight:800}
.gps-button{width:100%}
#dialog-saved{margin-top:18px}
#dialog-saved:empty{display:none}
.saved-chips{display:flex;flex-wrap:wrap;gap:8px}
.saved-chips button{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:8px 16px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:15px;font-weight:700;border:1px solid transparent}
.saved-chips .icon{width:18px;height:18px}
.province-filters{display:flex;gap:8px;overflow:auto;margin-top:18px;padding-bottom:4px;scrollbar-width:none}
.province-filters button{white-space:nowrap;min-height:44px;padding:8px 16px;border-radius:999px;background:var(--field);border:1px solid var(--line);font-size:15px;font-weight:600;color:var(--ink)}
.province-filters button.selected{background:var(--ink);color:var(--page);border-color:var(--ink)}
.search-field{border:1px solid var(--line);background:var(--field);border-radius:16px;padding:0 14px;margin:14px 0 12px;color:var(--muted)}
.search-field input{height:52px;font-size:16px;color:var(--ink)}
.town-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:min(320px,38dvh)}
.town-list button{min-height:50px;font-size:15px;font-weight:600;border-radius:14px;background:var(--field);border:1px solid var(--line);padding:8px 10px;color:var(--ink)}
.town-list button.selected{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.town-list p{font-size:14px}
.continue-button{display:none}
.content-dialog h2{font-size:22px}
#content-body p{font-size:15px}
#content-body ul{font-size:14px}
.visual-dialog{width:min(720px,calc(100vw - 24px))}
.visual-stage{height:300px;border-radius:20px;border:1px solid var(--line)}
.scene-options{gap:8px;margin-top:14px}
.scene-options button{min-height:46px;border-radius:999px;font-size:14px;font-weight:600;background:var(--field);border:1px solid var(--line);color:var(--ink);flex:1 1 28%}
.scene-options button.selected{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.push-dialog{max-width:640px}
.push-intro,.push-status,.push-settings-form label,.push-settings-form .subtle{font-size:14px}
.push-settings-form input:not([type=checkbox]),.push-settings-form select{font-size:15px}
.telegram-dialog{text-align:start}
.toast{font-size:14px;padding:14px 22px;border-radius:16px;bottom:28px}
.skip-link{font-size:15px}
.empty-inline{font-size:14px;padding:20px 22px}

/* --- Mobile ----------------------------------------------------------- */
.mobile-bottom-nav{display:none}
@media(max-width:1000px){
  .home-lower{grid-template-columns:1fr 1fr}
  .daily-row{grid-template-columns:84px 50px minmax(0,1fr) 100px}
  .daily-row .range{display:none}
  .map-wrap{height:500px}
}
@media(max-width:760px){
  body{font-size:16px;padding-bottom:0}
  .topbar{padding:14px 16px 2px}
  .brand img{width:36px;height:36px}
  .brand strong{font-size:18px}
  .brand small{font-size:12px}
  .header-actions .location-button{display:none}
  .language-select{height:44px;padding:0 12px}
  .language-select select{font-size:14px;max-width:96px}
  .page-shell{padding:6px 14px calc(100px + env(safe-area-inset-bottom,0px))}
  .view-tabs{display:none}
  .priority-banner{margin-bottom:14px;padding:14px 16px;font-size:14px}
  .home-screen{gap:14px}
  .weather-card.hero{min-height:560px;border-radius:28px}
  .hero .weather-card-content{min-height:560px;padding:18px 18px 18px}
  .place-button{font-size:18px;min-height:48px;padding:6px 16px 6px 12px;max-width:70%}
  .hero .icon-button{width:44px;min-width:44px;height:44px}
  .hero .date-line{font-size:13px;margin-top:12px}
  .hero .temperature-block{justify-content:space-between;gap:12px}
  .hero .temperature{font-size:clamp(96px,27vw,124px);letter-spacing:-5px}
  .hero .weather-symbol{width:96px;height:96px;margin-inline-end:4px}
  .hero .condition{font-size:23px}
  .hero .high-low{font-size:15px;gap:14px;margin-bottom:12px}
  .hero .rain-outlook strong{font-size:16px}
  .hero .sun-times{font-size:13px;gap:16px}
  .hero-foot{margin-top:14px}
  .panel-heading{padding:18px 18px 8px}
  .panel-heading h2{font-size:17px}
  .hourly-strip{padding:4px 14px 18px;gap:7px}
  .hour-cell{flex-basis:80px;padding:12px 4px 10px}
  .hour-cell>strong{font-size:20px}
  .home-lower{display:flex;flex-direction:column;gap:14px}
  .home-lower>section,.detail-stack{width:100%}
  .daily-list{padding:2px 16px 12px}
  .daily-row{grid-template-columns:76px 48px minmax(0,1fr) 96px;gap:10px;font-size:15px;min-height:66px}
  .day-visual{width:48px;height:48px;border-radius:14px}
  .day-visual svg{width:34px;height:34px}
  .daily-row .day-temp{font-size:16px;gap:8px}
  .metric-grid{padding:0 18px 6px}
  .metric-grid strong{font-size:26px}
  .air-readings{padding:4px 18px 12px;gap:10px}
  .air-verdict{font-size:16px;padding:12px 14px}
  .air-note{margin:0 18px 16px}
  .more-weather>summary{padding:12px 18px;font-size:15px;min-height:60px}
  .more-weather>section{padding:16px 18px 20px}
  .map-wrap{height:60dvh;min-height:380px;margin:0 12px;border-radius:18px}
  .map-layers{margin:0 14px 12px}
  .map-basemap-status,.map-extra-controls{padding-inline:18px}
  .map-timeline{padding:14px 18px 4px}
  .layer-info{margin:12px 18px 16px}
  .layer-events{margin-inline:18px}
  .map-legend{display:none}
  .alerts-panel .panel-heading{padding:20px 18px 8px}
  .alert-toolbar,.source-note,.alert-cards,#quake-context{padding-inline:18px}
  .alert-toolbar{gap:4px}
  .alert-filters{width:100%;overflow:auto;flex-wrap:nowrap}
  .alert-filters button{white-space:nowrap;font-size:13px;padding:8px 14px}
  .alert-item{padding:16px}
  .notice-card{margin:12px 14px}
  .footer{grid-template-columns:1fr;padding:22px 4px 8px;gap:14px}
  .footer-links{justify-content:flex-start;gap:4px 16px}
  .mobile-bottom-nav{display:flex;position:fixed;inset:auto 0 0 0;z-index:1100;max-width:none;margin:0;border-radius:0;background:var(--card);border:0;border-top:1px solid var(--line);padding:8px 10px calc(10px + env(safe-area-inset-bottom,0px));justify-content:space-around;gap:6px;box-shadow:0 -6px 24px rgba(15,27,45,.08);backdrop-filter:none;-webkit-backdrop-filter:none}
  .mobile-bottom-nav>a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;min-width:0;color:var(--muted);font-size:13px;font-weight:600;text-decoration:none;padding:4px 0}
  .mobile-bottom-nav [data-icon]{padding:6px 22px;border-radius:999px}
  .mobile-bottom-nav .selected{color:var(--accent);font-weight:800}
  .mobile-bottom-nav .selected [data-icon]{background:var(--accent-soft)}
  .mobile-bottom-nav .icon{width:24px;height:24px}
  .toast{bottom:calc(100px + env(safe-area-inset-bottom,0px));font-size:14px}
  .dialog{padding:24px 18px;border-radius:26px;max-height:92dvh;width:calc(100vw - 20px)}
  .dialog h2{font-size:22px}
  .dialog-close{top:12px;inset-inline-end:12px}
  .dialog-languages{width:100%;justify-content:space-between}
  .dialog-languages button{flex:1;padding:6px 8px}
  .town-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:min(300px,40dvh)}
  .visual-stage{height:240px}
  .preview-banner{font-size:12px;padding:6px 12px}
}
@media(max-width:380px){
  .topbar{padding-inline:12px}
  .page-shell{padding-inline:10px}
  .brand strong{font-size:16px}
  .language-select select{max-width:80px;font-size:13px}
  .hero .weather-card-content{padding:16px 14px}
  .place-button{font-size:16px;max-width:66%}
  .hero .temperature{font-size:92px}
  .hero .weather-symbol{width:84px;height:84px}
  .daily-row{grid-template-columns:70px 44px minmax(0,1fr) 88px;gap:8px;font-size:14px}
  .metric-grid strong{font-size:23px}
  .hour-cell{flex-basis:74px}
}
@media(prefers-reduced-motion:reduce){
  .scene-photo{transition:opacity .3s;transform:none}
  .scene-photo.visible{transform:none}
  .weather-scene .cloud{animation:none}
}
@media print{
  .mobile-bottom-nav,.view-tabs,.hero-tools,.footer-links,.atmosphere-control{display:none!important}
}