/* v1.5 · a quiet glass home with weather and the map in one place. */
:root{
  --page:#c8dce6;--card:rgba(247,252,255,.66);--card-2:rgba(246,252,255,.42);
  --ink:#102c40;--muted:#425e70;--line:rgba(68,105,126,.17);--field:rgba(237,249,255,.56);
  --chip:rgba(231,246,252,.64);--accent:#1765ad;--accent-soft:rgba(172,216,244,.42);
  --shadow:0 16px 42px rgba(34,75,100,.09),inset 0 1px 0 rgba(255,255,255,.85);
}
:root.scene-dark{
  --page:#152d42;--card:rgba(23,43,62,.76);--card-2:rgba(46,73,96,.34);
  --ink:#eff8ff;--muted:#bad0df;--line:rgba(178,211,231,.2);--field:rgba(49,79,102,.6);
  --chip:rgba(55,86,108,.58);--accent:#9ed7ff;--accent-soft:rgba(68,123,165,.38);
}
body{background:var(--page);isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 10% 15%,rgba(175,224,246,.62),transparent 55%),linear-gradient(135deg,rgba(222,240,247,.84),rgba(207,226,232,.68) 60%,rgba(219,232,229,.84))}
.scene-dark body::before{background:radial-gradient(ellipse at 15% 10%,rgba(47,100,138,.32),transparent 60%),linear-gradient(140deg,rgba(13,30,48,.88),rgba(16,42,60,.78))}
.page-atmosphere{position:fixed;inset:-40px;z-index:-2;pointer-events:none;background-size:cover;background-position:center;filter:blur(30px) saturate(.65);opacity:.7}
.card,.more-weather,.atmosphere-control{background:var(--card);border-color:rgba(255,255,255,.64);box-shadow:var(--shadow);backdrop-filter:blur(22px) saturate(120%);-webkit-backdrop-filter:blur(22px) saturate(120%)}
.scene-dark .card,.scene-dark .more-weather,.scene-dark .atmosphere-control{border-color:var(--line)}
.topbar{max-width:1280px;padding-block:20px 8px}
.page-shell{max-width:1280px;padding-top:8px}
.language-select,.location-button{background:var(--card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.view-tabs{background:rgba(230,245,253,.36);border:1px solid rgba(255,255,255,.4);margin-bottom:20px}
.view-tabs a.selected{background:var(--card);box-shadow:none}
.home-screen{gap:20px}
.current-overview{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start;min-width:0}
.weather-card.hero,.hero .weather-card-content{min-height:445px}
.weather-card.hero{box-shadow:0 18px 45px rgba(24,55,72,.2);border:1px solid rgba(255,255,255,.65);border-radius:28px}
.hero .weather-card-content{padding:22px 24px}
.hero .temperature-block{margin:20px 0 8px;padding:0;gap:26px;justify-content:space-between}
.hero .temperature{font-size:112px;letter-spacing:-5px;line-height:1}
.hero .weather-symbol{width:92px;height:92px}
.hero .condition{font-size:22px;margin:0 0 6px}
.hero .rain-outlook{padding-top:12px;gap:10px}
.hero .rain-outlook strong{font-size:14px;line-height:1.7;font-weight:600}
.hero .rain-outlook small{display:none}
.hero .rain-outlook>span .icon{width:24px;height:24px}
.hero .sun-times{font-size:12px;gap:16px;margin-top:12px;flex-wrap:wrap}
.hero .high-low{font-size:15px;margin-bottom:12px}
.hero-foot{gap:4px 12px;margin-top:10px}
.hero .data-status{font-size:12px}
.hero .source-line{font-size:11px}
.source-line a{padding:4px 0}
.local-time-row{display:flex;align-items:center;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;margin-top:14px;color:rgba(255,255,255,.91)}
.hero .date-line{font-size:12px;margin:0;color:inherit}
.clock-line{display:flex;gap:6px;align-items:center;font-size:11px}
.clock-line bdi{font:700 17px var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:.3px}
.current-metrics{border-radius:28px;overflow:hidden;min-width:0}
.current-metrics .panel-heading{padding:20px 20px 4px;flex-wrap:wrap;gap:4px}
.current-metrics .panel-heading h2{font-size:16px}
.reading-time{font-size:11px;color:var(--muted)}
.current-metrics .metric-grid{padding:0 20px 8px;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.current-metrics .metric-grid>div{padding:14px 0;grid-template-columns:22px minmax(0,1fr);column-gap:8px;min-height:110px;background:transparent}
.current-metrics .metric-grid>div:nth-child(odd){padding-inline-end:14px}
.current-metrics .metric-grid>div:nth-child(even){padding-inline-start:14px}
.current-metrics .metric-grid>div:nth-last-child(-n+2){border-bottom:0}
.current-metrics .metric-grid>div>span:not([data-icon]){font-size:13px}
.current-metrics .metric-grid strong{font-size:27px;font-weight:650;line-height:1.35;margin-top:3px;overflow-wrap:anywhere}
.current-metrics .metric-grid strong small{font-size:11px;margin:0}
.current-metrics .metric-grid>div>small{font-size:11px;line-height:1.8;margin-top:2px;min-height:18px}
.current-metrics .metric-grid .icon{width:19px;height:19px}
.current-metrics .metric-grid .air-metric strong{font-family:var(--font-ui);font-size:19px;letter-spacing:0;line-height:1.55;color:var(--ink)}
#air-level::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:6px;vertical-align:middle;background:#7c94a3}
#air-level[data-level="1"]::before{background:#1c8f5d}
#air-level[data-level="2"]::before{background:#ac8215}
#air-level[data-level="3"]::before{background:#d46b22}
#air-level[data-level="4"]::before{background:#c9433c}
#air-level[data-level="5"]::before{background:#9d4689}
#air-level[data-level="6"]::before{background:#8c2440}
.air-disclosure{border-top:1px solid var(--line);font-size:13px}
.air-disclosure>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:8px 20px;cursor:pointer;color:var(--muted)}
.air-disclosure>summary::-webkit-details-marker{display:none}
.air-disclosure>summary .icon{width:15px;height:15px}
.air-disclosure[open]>summary .icon{transform:rotate(180deg)}
.air-readings{padding:8px 20px 12px;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.air-scale{grid-column:1/-1}
.air-note{font-size:12px;margin:0 20px 16px}
.air-source{font-size:11px}
.air-reading strong{font-size:23px}
.panel-heading{padding:20px 22px 12px}
.panel-heading h2{font-size:18px}
.hourly-strip{padding-bottom:16px;gap:6px}
.hour-cell{background:rgba(233,246,252,.36);flex-basis:82px;border-color:rgba(255,255,255,.38);gap:4px;border-radius:18px}
.scene-dark .hour-cell{background:rgba(50,78,100,.27);border-color:var(--line)}
.hour-cell.selected{background:var(--accent-soft);border-color:var(--accent)}
.hour-cell>small.dry{visibility:visible;opacity:.65}
.home-lower{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;align-items:stretch}
.map-panel{min-width:0;align-self:start;scroll-margin-top:16px}
.map-panel .panel-heading{padding-bottom:4px}
.map-basemap-status{font-size:12px;padding:0 20px 12px}
.map-layers{margin:0 18px 12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;overflow:visible}
.map-layers button{min-width:0;min-height:44px;padding:8px 6px;font-size:13px;justify-content:center;gap:5px;background:rgba(235,247,253,.5);border-color:var(--line)}
.scene-dark .map-layers button{background:var(--field)}
.map-layers button.selected{background:var(--accent);color:var(--on-accent)}
.map-layers button .icon{width:17px;height:17px}
.map-extra-controls{padding:0 20px 10px;min-height:0}
#satellite-controls{display:flex;gap:7px;align-items:center;font-size:11px;line-height:1.7;min-height:36px}
#satellite-status{flex:1}
#satellite-controls .icon-button{min-width:38px;width:38px;height:38px}
.cloud-status-dot{width:6px;height:6px;background:#258a80;border-radius:50%;flex-shrink:0}
.source-error .cloud-status-dot{background:#b25d35}
.map-wrap{height:400px;min-height:0;margin:0 12px;border-radius:18px}
.town-label{font-size:12px!important;font-weight:700!important;color:#17354c!important;background:rgba(244,251,255,.92)!important;border:1px solid rgba(255,255,255,.8)!important;border-radius:7px!important;padding:2px 6px!important;box-shadow:0 1px 5px #1235!important}
.town-marker .town-point{background:#367cb2;border:2px solid #fff}
.map-wrap .leaflet-control-attribution{font-size:9px;max-width:85%;background:rgba(255,255,255,.84);color:#243f51}
.maptiler-brand img{width:80px;height:auto}
.map-weather-label{font-size:11px;max-width:72%}
.map-locate{bottom:38px;inset-inline-end:10px;min-width:40px;width:40px;height:40px}
.layer-info{margin:12px 18px 16px;gap:8px}
.layer-info h3{font-size:13px}
.layer-info p{font-size:12px;line-height:1.8}
.layer-info>span .icon{width:17px}
.layer-events:empty{display:none}
.map-timeline{padding:12px 18px 0}
.map-timeline>div:first-child{font-size:12px}
.timeline-labels{font-size:11px}
.daily-list{padding:0 18px 8px}
.daily-row{grid-template-columns:86px 36px minmax(0,1fr) 76px;gap:10px;padding:13px 0;font-size:14px;min-height:74px}
.day-name{font-size:14px}
.day-name small{font-size:10px;color:var(--muted);font-weight:500;margin-top:2px}
.day-visual{width:36px;height:36px;background:none;border-radius:0}
.day-visual::after{display:none}
.day-visual svg{width:34px;height:34px;filter:none}
.day-cond{font-size:12px;line-height:1.6;font-weight:600}
.day-cond small{display:flex;flex-wrap:wrap;gap:3px;font-size:10px;color:var(--muted);margin-top:2px}
.day-cond small .icon{width:11px;height:11px;color:var(--accent)}
.daily-row .day-temp{font-size:16px;gap:7px}
.day-temp b::before,.day-temp span::before{display:none}
.week-limited{padding:0 20px 12px;color:#8a5326}
.more-weather>summary{min-height:54px;font-size:14px}
.footer{border-top:1px solid var(--line);margin-top:28px}
.footer p{font-size:11px}.footer-links button,.footer-links a{font-size:12px}
.atmosphere-control{padding:10px 14px}.atmosphere-control small{font-size:11px}
.dialog{background:rgba(234,247,252,.96);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}
.scene-dark .dialog{background:rgba(21,42,61,.97)}
@media(max-width:1050px){
  .current-overview{grid-template-columns:1fr 1fr;gap:16px}
  .home-lower{grid-template-columns:1fr 1fr;gap:16px}
  .daily-row{grid-template-columns:74px 32px minmax(0,1fr) 64px;gap:7px}
  .daily-row .day-temp{font-size:15px;gap:5px}
}
@media(max-width:760px){
  .topbar{padding:16px 16px 8px;gap:8px}.brand{gap:8px}.brand small{font-size:10px}.brand strong{font-size:18px}
  .brand img{width:34px;height:34px}.language-select{padding-inline:11px;background:rgba(247,252,255,.55)}
  .page-shell{padding:4px 12px calc(92px + env(safe-area-inset-bottom,0px))}
  .home-screen{gap:14px}.current-overview{grid-template-columns:minmax(0,1fr);gap:12px}
  .weather-card.hero,.hero .weather-card-content{min-height:0}
  .hero .weather-card-content{padding:16px 18px}
  .weather-card.hero,.current-metrics{border-radius:24px}
  .hero .temperature-block{margin:20px 0 4px}
  .hero .temperature{font-size:94px;line-height:.95;letter-spacing:-4px}
  .hero .weather-symbol{width:78px;height:78px;margin:0 8px}
  .hero .condition{font-size:19px}.hero .high-low{font-size:14px;margin-bottom:10px}
  .place-button{min-height:44px;font-size:18px;padding:6px 12px;max-width:65%}
  .hero .icon-button{width:42px;height:42px;min-width:42px}
  .local-time-row{margin-top:12px;gap:4px 12px}.hero .date-line{font-size:11px}
  .clock-line{font-size:10px}.clock-line bdi{font-size:16px}
  .hero .rain-outlook strong{font-size:13px;line-height:1.7}.hero .rain-outlook{padding-top:10px}
  .hero .sun-times{font-size:11px;gap:12px;margin-top:10px}.hero .sun-times .icon{width:16px;height:16px}
  .hero-foot{margin-top:8px}.hero .data-status{font-size:10px}.hero .source-line{font-size:10px}
  .current-metrics .panel-heading{padding:16px 16px 0}.current-metrics .panel-heading h2{font-size:15px}
  .reading-time{font-size:10px}
  .current-metrics .metric-grid{padding:0 16px 4px}
  .current-metrics .metric-grid>div{min-height:99px;padding-top:11px;padding-bottom:11px}
  .current-metrics .metric-grid>div:nth-child(odd){padding-inline-end:12px}
  .current-metrics .metric-grid>div:nth-child(even){padding-inline-start:12px}
  .current-metrics .metric-grid strong{font-size:25px}
  .current-metrics .metric-grid>div>small{font-size:10px}
  .current-metrics .metric-grid .air-metric strong{font-size:16px}
  .air-disclosure>summary{padding:6px 16px;font-size:12px;min-height:44px}
  .home-lower{display:flex;flex-direction:column;gap:14px;min-width:0}.home-lower>section{width:100%}
  .panel-heading{padding:16px 16px 10px}.panel-heading h2{font-size:16px}.panel-heading .subtle{font-size:11px}
  .hourly-strip{padding-inline:12px}.hour-cell{flex-basis:72px;padding:11px 4px 8px;border-radius:16px}.hour-cell>strong{font-size:19px}.hour-cell svg{width:34px;height:34px}.hour-cell>time{font-size:11px}
  .forecast-scroll-actions .icon-button{width:38px;min-width:38px;height:38px}
  .map-wrap{height:330px;min-height:0;margin-inline:10px}
  .map-layers{margin:0 12px 10px;gap:4px}.map-layers button{font-size:12px;padding:6px 3px;gap:4px}.map-layers button .icon{width:15px;height:15px}
  .map-basemap-status{padding:0 16px 10px;font-size:11px}.map-extra-controls{padding:0 14px 8px}
  #satellite-controls{font-size:10px}.layer-info{margin:10px 14px 14px}.layer-info h3{font-size:12px}.layer-info p{font-size:11px}
  .daily-list{padding:0 16px 8px}.daily-row{grid-template-columns:82px 32px minmax(0,1fr) 70px;gap:8px;min-height:72px;padding:12px 0}.day-name{font-size:13px}.day-cond{font-size:11px}.day-temp{font-size:16px!important}.day-visual{width:32px;height:32px}.day-visual svg{width:30px;height:30px}
  .mobile-bottom-nav{inset:auto 10px calc(8px + env(safe-area-inset-bottom,0px));border:1px solid rgba(255,255,255,.65);border-radius:23px;padding:6px 8px;background:rgba(232,245,252,.83);backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%);box-shadow:0 10px 32px rgba(34,74,97,.19)}
  .scene-dark .mobile-bottom-nav{background:rgba(21,43,63,.9);border-color:var(--line)}
  .mobile-bottom-nav>a{font-size:11px;min-height:50px;gap:1px}.mobile-bottom-nav [data-icon]{padding:5px 22px}.mobile-bottom-nav .icon{width:21px;height:21px}
  .footer{margin-top:20px}.footer-links{gap:4px 14px}.sources-panel{font-size:12px}
}
@media(max-width:360px){
  .brand small{max-width:153px;white-space:normal;line-height:1.6}.brand strong{font-size:16px}.brand img{width:30px;height:30px}
  .language-select{padding:0 8px}.language-select select{max-width:72px;font-size:12px}.language-select .icon{display:none}
  .hero .weather-card-content{padding:14px}.place-button{font-size:16px;padding-inline:10px;max-width:62%}.hero-tools{gap:4px}.hero .icon-button{min-width:38px;width:38px;height:42px}
  .current-metrics .metric-grid>div>span:not([data-icon]){font-size:12px}.current-metrics .metric-grid strong{font-size:23px}.current-metrics .metric-grid .air-metric strong{font-size:15px}
  .daily-row{grid-template-columns:72px 28px minmax(0,1fr) 60px;gap:6px}.day-name{font-size:12px}.day-name small{font-size:9px}.day-temp{font-size:14px!important}.day-cond{font-size:10px}.day-cond small{font-size:9px}
  .map-layers button{font-size:11px}.map-layers button .icon{width:14px;height:14px}.map-wrap{height:310px}
}
@supports not (backdrop-filter:blur(1px)){.card,.more-weather,.dialog{background:#e7f1f6}.scene-dark .card,.scene-dark .more-weather,.scene-dark .dialog{background:#18334a}}
@media(prefers-reduced-motion:reduce){.page-atmosphere{transition:none}html{scroll-behavior:auto}}

/* Keep the embedded map before the week at every breakpoint. */
.home-lower .map-panel{order:0}.home-lower .days-panel{order:1}
.hero .icon-button,.forecast-scroll-actions .icon-button,#satellite-controls .icon-button{min-width:44px;width:44px;height:44px}
.hero #condition{font-size:21px}