/* V4.16a · The forecast artwork and the current conditions form one composition. */
#mainContent .weatherPage{--sky-1:#e7e5d5;--sky-2:#d8dbcf;--sky-card:#f9f7efdc;--sky-ink:#314439;--sky-line:#ffffffb5}
#mainContent .weatherPage[data-season="spring"]{--sky-1:#e8eddd;--sky-2:#d7e3d2}
#mainContent .weatherPage[data-season="summer"]{--sky-1:#e9ead2;--sky-2:#d9dfc4}
#mainContent .weatherPage[data-season="autumn"]{--sky-1:#ede5d5;--sky-2:#e0d6c5}
#mainContent .weatherPage[data-season="winter"]{--sky-1:#e7ecec;--sky-2:#d8e0e6}
#mainContent .weatherPage[data-time="night"]{--sky-1:#d7dfe5;--sky-2:#c8d4dd;--sky-card:#f3f4f2e9;--sky-ink:#304351}
#mainContent .weatherPage .weatherDialogHeader{padding:22px 30px 18px;border:1px solid var(--line);border-bottom:0;border-radius:23px 23px 0 0;background:linear-gradient(105deg,var(--sky-1),var(--sky-2));box-sizing:border-box}
#mainContent .weatherPage .weatherDialogHeader h1{margin-top:3px}
#mainContent .weatherPage #weatherContent{border-radius:0 0 23px 23px;border-top:0;padding-bottom:25px;box-shadow:0 14px 34px #282e2311}
#mainContent .weatherPage .weatherSky{min-height:400px;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;padding:32px clamp(22px,4vw,50px);isolation:isolate;overflow:hidden;background:linear-gradient(110deg,var(--sky-1),var(--sky-2));color:var(--sky-ink)}
#mainContent .weatherPage .weatherSky:before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 83% 46%,#fff8 0%,transparent 58%);pointer-events:none}
#mainContent .weatherPage[data-season] .weatherSky .weatherMoodImage{inset:0;background-color:transparent;background-size:contain;background-position:right center;mask-image:linear-gradient(90deg,transparent 44%,#000 68%);-webkit-mask-image:linear-gradient(90deg,transparent 44%,#000 68%)}
#mainContent .weatherPage .weatherSky:after,#mainContent .weatherPage[data-time="night"] .weatherSky:after{background:linear-gradient(90deg,var(--sky-1) 0%,var(--sky-1) 42%,transparent 83%)}
#mainContent .weatherPage .weatherSnapshot{position:relative;z-index:2;box-sizing:border-box;width:min(435px,46%);min-height:306px;display:flex;flex-direction:column;justify-content:center;padding:24px 29px;background:var(--sky-card);border:1px solid var(--sky-line);border-radius:20px;box-shadow:0 18px 48px #1a29391c;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--sky-ink)}
#mainContent .weatherPage .weatherSnapshotDate{margin:0 0 20px;font:500 .9rem/1.35 var(--font-body);letter-spacing:.015em;color:var(--sky-ink);opacity:.82}
#mainContent .weatherPage .weatherPlace{margin:0 0 6px;font:600 1.1rem/1.3 var(--font-body);overflow-wrap:anywhere}
#mainContent .weatherPage .weatherNow{display:flex;align-items:center;gap:17px;margin:0}
#mainContent .weatherPage .weatherNowIcon{display:grid;place-items:center;flex:0 0 84px;width:84px;height:84px;border-radius:50%;background:#fffcf1c9;box-shadow:inset 0 0 0 1px #fff9}
#mainContent .weatherPage .weatherNowIcon .weatherIcon{width:64px;height:64px;display:block;filter:drop-shadow(0 2px 5px #172d2830)}
#mainContent .weatherPage .weatherNow h3{display:flex;align-items:flex-start;gap:2px;margin:0;font:400 clamp(4rem,6vw,5.3rem)/1 var(--font-heading);letter-spacing:-.055em;white-space:nowrap}
#mainContent .weatherPage .weatherNow h3 small{margin-top:11px;font:500 1.4rem/1 var(--font-body);letter-spacing:0}
#mainContent .weatherPage .weatherCondition{margin:9px 0 0 101px;font:500 1.1rem/1.35 var(--font-body)}
#mainContent .weatherPage .seasonCaption{position:absolute;right:24px;bottom:22px;padding:8px 14px;background:#fff8efd9;border:1px solid #fffd;border-radius:30px;box-shadow:0 3px 12px #1a28301a;color:#364b40;font:italic 1rem/1.2 var(--font-heading,Georgia,serif)}
#mainContent .weatherPage .weatherBelowHero{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:21px 28px 19px}
#mainContent .weatherPage .weatherUpdated{margin:0;padding:0;line-height:1.5;color:var(--muted)}
#mainContent .weatherPage .weatherTabs{display:inline-flex;gap:4px;flex:none;padding:4px;margin:0;border:1px solid var(--line);border-radius:30px;background:var(--soft)}
#mainContent .weatherPage .weatherTabs button{border:0;min-width:99px;border-radius:24px;padding:10px 17px;background:transparent;color:var(--ink)}
#mainContent .weatherPage .weatherTabs button[aria-pressed="true"]{background:var(--forest);color:var(--paper);box-shadow:0 3px 10px #26352321}
#mainContent .weatherPage .todayMetrics{gap:12px;margin:0 28px}
#mainContent .weatherPage .todayMetrics>div{padding:18px 20px;background:var(--soft);border:1px solid var(--line);border-radius:15px;font-size:.8rem}
#mainContent .weatherPage .todayMetrics strong{font-size:1.65rem;margin-top:5px}
#mainContent .weatherPage .hourlyForecast{margin:22px 28px 12px;gap:9px}
#mainContent .weatherPage .hourlyForecast>div{padding:15px 4px;border:1px solid var(--line);background:var(--panel)}
#mainContent .weatherPage .weeklyForecast{margin:0 28px}
#mainContent .weatherPage .weatherHint{margin-left:28px}
#mainContent .weatherPage .locationSettings{margin-top:19px;padding:23px 28px 28px;border-radius:19px;background:var(--panel);box-shadow:0 8px 24px #2830280b}
#mainContent .weatherPage .weatherSettingsHeading{margin-bottom:19px}
#mainContent .weatherPage .weatherSettingsHeading h2{font:400 1.45rem/1.25 var(--font-heading);margin:4px 0 0}
#mainContent .weatherPage .weatherLocationActions{gap:10px}
#mainContent .weatherPage .weatherLocationActions .btn{padding:11px 16px}
[data-theme="natural"] #mainContent .weatherPage .weatherDialogHeader,[data-theme="natural"] #mainContent .weatherPage #weatherContent,[data-theme="natural"] #mainContent .weatherPage .weatherSnapshot,[data-theme="natural"] #mainContent .weatherPage .locationSettings,[data-theme="natural"] #mainContent .weatherPage .todayMetrics>div{border-radius:5px}
[data-theme="earth"] #mainContent .weatherPage .weatherSnapshot{border-radius:15px;background:#f5eee2e8}
[data-theme="earth"] #mainContent .weatherPage .weatherDialogHeader{background:linear-gradient(105deg,#e8dcc8,#d5ccb8)}
[data-theme="meadow"] #mainContent .weatherPage .weatherDialogHeader{background:linear-gradient(105deg,#faf3e8,#eee8f0);border-color:#dfcfe0;border-radius:28px 28px 0 0}
[data-theme="meadow"] #mainContent .weatherPage #weatherContent{border-color:#dfcfe0;border-radius:0 0 28px 28px}
[data-theme="meadow"] #mainContent .weatherPage .weatherSnapshot{border-radius:21px 21px 21px 8px;border-color:#e5d8df}
[data-theme="meadow"] #mainContent .weatherPage .weatherSettingsHeading h2{font:400 1.55rem/1.2 var(--font-heading)}
@media(max-width:800px){#mainContent .weatherPage .weatherSky{min-height:355px;padding:20px}#mainContent .weatherPage .weatherSnapshot{width:min(405px,54%);min-height:290px;padding:20px}#mainContent .weatherPage .weatherNowIcon{flex-basis:66px;width:66px;height:66px}#mainContent .weatherPage .weatherNowIcon .weatherIcon{width:53px;height:53px}#mainContent .weatherPage .weatherCondition{margin-left:83px}#mainContent .weatherPage .weatherNow h3{font-size:3.9rem}}
@media(max-width:600px){
 #mainContent .weatherPage .weatherDialogHeader{padding:16px 18px 14px}
 #mainContent .weatherPage .weatherSky{display:block;min-height:0;padding:200px 16px 18px;background:linear-gradient(180deg,var(--sky-2),var(--sky-1))}
 #mainContent .weatherPage[data-season] .weatherSky .weatherMoodImage{inset:0 0 auto;height:252px;background-size:contain;background-position:center top;mask-image:linear-gradient(to bottom,#000 0%,#000 70%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 70%,transparent 100%)}
 #mainContent .weatherPage .weatherSky:after,#mainContent .weatherPage[data-time="night"] .weatherSky:after{background:linear-gradient(180deg,transparent 0%,transparent 39%,var(--sky-1) 72%)}
 #mainContent .weatherPage .weatherSnapshot{width:100%;min-height:0;padding:20px 22px;border-radius:18px}
 #mainContent .weatherPage .weatherSnapshotDate{margin-bottom:11px;font-size:.85rem}
 #mainContent .weatherPage .weatherNow h3{font-size:3.7rem}
 #mainContent .weatherPage .weatherCondition{margin-top:5px}
 #mainContent .weatherPage .seasonCaption{top:14px;right:13px;bottom:auto;font-size:.8rem;padding:5px 10px}
 #mainContent .weatherPage .weatherBelowHero{flex-direction:column-reverse;align-items:stretch;gap:11px;padding:17px 16px}
 #mainContent .weatherPage .weatherTabs{align-self:flex-start}
 #mainContent .weatherPage .todayMetrics{margin:0 16px;gap:7px}
 #mainContent .weatherPage .todayMetrics>div{padding:12px 10px;font-size:.72rem}
 #mainContent .weatherPage .todayMetrics strong{font-size:1.12rem}
 #mainContent .weatherPage .hourlyForecast{margin:16px 16px 10px;overflow-x:auto;grid-template-columns:repeat(8,minmax(78px,1fr))}
 #mainContent .weatherPage .weeklyForecast{margin:0 16px}
 #mainContent .weatherPage .weatherHint{margin-left:16px}
 #mainContent .weatherPage .locationSettings{padding:19px 16px}
}