/* V4.16c · Desktop data occupies the former blurred area; mobile keeps the image-first layout. */
#mainContent .weatherPage{--sky-card:#f9f8f1d4;--sky-ink:#263a39;--sky-line:#ffffff91}
#mainContent .weatherPage[data-time="night"]{--sky-card:#19394ad4;--sky-ink:#f6f8f0;--sky-line:#ffffff3e}
#mainContent .weatherPage .weatherDialogHeader{background:var(--panel);padding:20px 28px 15px}
#mainContent .weatherPage .weatherSky{min-height:465px;display:flex;align-items:center;padding:26px;background:linear-gradient(90deg,var(--sky-1),var(--sky-2));color:var(--sky-ink)}
#mainContent .weatherPage .weatherSky:before{content:"";position:absolute;inset:-25px;z-index:0;pointer-events:none;background-image:var(--weather-scene);background-size:cover;background-position:center;filter:blur(20px);opacity:.82}
#mainContent .weatherPage[data-season] .weatherSky .weatherMoodImage{inset:0 0 0 auto;width:auto;height:100%;aspect-ratio:3/2;z-index:1;background-image:var(--weather-scene);background-color:transparent;background-size:100% 100%;background-position:right center;mask-image:linear-gradient(90deg,transparent,#000 31%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 31%)}
#mainContent .weatherPage[data-time="night"] .weatherSky{background:linear-gradient(90deg,#233d4d,#506673)}
#mainContent .weatherPage .weatherSky:after,#mainContent .weatherPage[data-time="night"] .weatherSky:after{content:none}
#mainContent .weatherPage .weatherSnapshot{position:relative;z-index:2;display:block;width:min(390px,44%);min-height:0;padding:22px 19px;background:color-mix(in srgb,var(--sky-1) 79%,transparent);border:1px solid var(--sky-line);border-radius:20px;box-shadow:0 10px 28px #132d3020;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);color:var(--sky-ink)}
#mainContent .weatherPage[data-time="night"] .weatherSnapshot{background:#19394a8a}
#mainContent .weatherPage .weatherCurrent{min-width:0}
#mainContent .weatherPage .weatherPlace{margin:0;font:650 1.2rem/1.2 var(--font-body);overflow-wrap:anywhere}
#mainContent .weatherPage .weatherSnapshotDate{margin:5px 0 10px;color:inherit;opacity:.82;font:500 .86rem/1.3 var(--font-body)}
#mainContent .weatherPage .weatherNow{display:grid;grid-template-columns:50px auto;grid-template-rows:auto auto;column-gap:9px;align-items:center;justify-content:start}
#mainContent .weatherPage .weatherNowIcon{grid-column:1;grid-row:1/3;flex:none;width:50px;height:50px;border-radius:0;background:none;box-shadow:none}
#mainContent .weatherPage .weatherNowIcon .weatherIcon{width:49px;height:49px}
#mainContent .weatherPage .weatherNow h3,[data-theme="meadow"] #mainContent .weatherPage .weatherNow h3{grid-column:2;grid-row:1;margin:0;font:450 clamp(2.65rem,4vw,3.45rem)/.94 var(--font-heading);letter-spacing:-.045em;white-space:nowrap}
#mainContent .weatherPage .weatherNow h3 small{font:500 1.05rem/1 var(--font-body);vertical-align:top;margin:4px 0 0 2px}
#mainContent .weatherPage .weatherCondition{grid-column:2;grid-row:2;margin:3px 0 0;font:500 .97rem/1.25 var(--font-body)}
#mainContent .weatherPage .weatherEssentials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 12px;margin:21px 0 0;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--sky-ink) 24%,transparent);min-width:0}
#mainContent .weatherPage .weatherEssentials>div{min-width:0;padding:0;border:0}
#mainContent .weatherPage .weatherEssentials dt{font:600 .83rem/1.25 var(--font-body);opacity:.76}
#mainContent .weatherPage .weatherEssentials dd{margin:6px 0 0;font:600 clamp(1rem,1.5vw,1.32rem)/1.15 var(--font-body);white-space:nowrap}
#mainContent .weatherPage .weatherEssentials dd span{opacity:.55}
#mainContent .weatherPage .weatherEssentials dd small{display:block;margin-top:5px;font:500 .75rem/1.2 var(--font-body);opacity:.78}
#mainContent .weatherPage .seasonCaption{z-index:2;right:24px;top:24px;bottom:auto;background:#fff7e9c7;border:1px solid #fff9;color:#314b49;box-shadow:0 3px 16px #1a303323}
#mainContent .weatherPage .hourlyForecast{margin-top:8px}
[data-theme="earth"] #mainContent .weatherPage .weatherSnapshot{background:#f1e7d6cf;border-radius:15px}
[data-theme="natural"] #mainContent .weatherPage .weatherSnapshot{border-radius:6px}
[data-theme="natural"] #mainContent .weatherPage .weatherDialogHeader{border-radius:5px 5px 0 0}
[data-theme="natural"] #mainContent .weatherPage #weatherContent{border-radius:0 0 5px 5px}
[data-theme="meadow"] #mainContent .weatherPage .weatherDialogHeader{background:#faf5ef}
[data-theme="meadow"] #mainContent .weatherPage .weatherSnapshot{border-radius:20px}
@media(max-width:900px){
 #mainContent .weatherPage .weatherSnapshot{width:min(380px,49%);padding:17px}
 #mainContent .weatherPage .weatherEssentials{gap:11px 8px}
}
@media(max-width:600px){
 #mainContent .weatherPage .weatherDialogHeader{padding:16px 18px 12px}
 #mainContent .weatherPage .weatherSky{display:block;min-height:0;padding:210px 12px 15px;background:var(--sky-2)}
 #mainContent .weatherPage[data-time="night"] .weatherSky{background:var(--sky-2)}
 #mainContent .weatherPage .weatherSky:before{background-position:center;opacity:.3}
 #mainContent .weatherPage[data-season] .weatherSky .weatherMoodImage{inset:0 0 auto;width:100%;height:260px;aspect-ratio:auto;background-size:100% auto;background-position:center top;mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%)}
 #mainContent .weatherPage .weatherSnapshot{width:100%;display:block;min-height:0;padding:15px 17px;background:var(--sky-card);box-shadow:0 8px 30px #112a3426;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
 #mainContent .weatherPage[data-time="night"] .weatherSnapshot{background:var(--sky-card)}
 [data-theme="earth"] #mainContent .weatherPage .weatherSnapshot{background:#f1e7d6e8}
 #mainContent .weatherPage .weatherPlace{font-size:1.04rem}
 #mainContent .weatherPage .weatherSnapshotDate{font-size:.81rem;margin:3px 0 8px}
 #mainContent .weatherPage .weatherNow{grid-template-columns:46px auto;column-gap:7px}
 #mainContent .weatherPage .weatherNowIcon,#mainContent .weatherPage .weatherNowIcon .weatherIcon{width:45px;height:45px}
 #mainContent .weatherPage .weatherNow h3,[data-theme="meadow"] #mainContent .weatherPage .weatherNow h3{font-size:2.65rem}
 #mainContent .weatherPage .weatherCondition{font-size:.93rem}
 #mainContent .weatherPage .weatherEssentials{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 6px;margin-top:15px;padding-top:13px;border-top:1px solid color-mix(in srgb,var(--sky-ink) 23%,transparent)}
 #mainContent .weatherPage .weatherEssentials>div{padding:0 2px;border:0}
 #mainContent .weatherPage .weatherEssentials dt{font-size:.78rem}
 #mainContent .weatherPage .weatherEssentials dd{font-size:1.12rem;margin-top:4px}
 #mainContent .weatherPage .seasonCaption{top:12px;right:12px;bottom:auto}
 #mainContent .weatherPage .hourlyForecast{margin-top:6px}
}
@media(max-width:420px){
 #mainContent .weatherPage .weatherSky{padding:185px 10px 11px}
 #mainContent .weatherPage[data-season] .weatherSky .weatherMoodImage{height:230px}
 #mainContent .weatherPage .weatherSnapshot{padding:12px 14px}
 #mainContent .weatherPage .weatherPlace{font-size:.99rem}
 #mainContent .weatherPage .weatherSnapshotDate{font-size:.78rem;margin:3px 0 5px}
 #mainContent .weatherPage .weatherNow{grid-template-columns:39px auto;column-gap:6px}
 #mainContent .weatherPage .weatherNowIcon,#mainContent .weatherPage .weatherNowIcon .weatherIcon{width:39px;height:39px}
 #mainContent .weatherPage .weatherNow h3,[data-theme="meadow"] #mainContent .weatherPage .weatherNow h3{font-size:2.4rem}
 #mainContent .weatherPage .weatherEssentials{gap:8px 6px;margin-top:10px;padding-top:10px}
 #mainContent .weatherPage .weatherEssentials dt{font-size:.76rem}
 #mainContent .weatherPage .weatherEssentials dd{font-size:1rem;margin-top:3px}
 #mainContent .weatherPage .weatherEssentials dd small{font-size:.75rem;margin-top:3px}
}
[data-theme="earth"] #mainContent .weatherPage[data-time="night"] .weatherSnapshot{background:#213e4de5;color:#f6f8f0}