.weather-window-section { margin: 28px 0; }
.weather-window-card {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(270px, .88fr);
  overflow: hidden;
  border: 1px solid var(--line-strong, rgba(163,209,255,.16));
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(16,38,51,.96), rgba(7,22,31,.96));
  box-shadow: 0 18px 50px rgba(0,0,0,.15);
}
.weather-window-scene {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  background: #263a4c;
  isolation: isolate;
}
.weather-window-scene svg { display: block; width: 100%; height: 100%; min-height: 250px; }
.weather-window-scene .ww-sky-top { stop-color: #526f89; }
.weather-window-scene .ww-sky-bottom { stop-color: #e5ae91; }
.weather-window-scene .ww-distant-hill { fill: #526e70; }
.weather-window-scene .ww-sun { fill: #ffe5a7; filter: drop-shadow(0 0 20px rgba(255,225,158,.6)); }
.weather-window-scene .ww-night-light { display: none; fill: #e5edf2; opacity: .92; }
.weather-window-scene .ww-stars { display: none; }
.weather-window-scene .ww-sun-rays { transition: opacity .5s ease; }
.weather-window-scene .ww-house-window { transition: fill .5s ease; }
.weather-window-scene .ww-tree-trunk g { transition: opacity .5s ease; }
.weather-window-scene[data-light="day"] .ww-sky-top { stop-color: #418caf; }
.weather-window-scene[data-light="day"] .ww-sky-bottom { stop-color: #afd9d9; }
.weather-window-scene[data-light="day"] .ww-sun { fill: #fff1b7; }
.weather-window-scene[data-light="day"] .ww-sea-lines { opacity: .52; }
.weather-window-scene[data-light="soft"] .ww-sky-top { stop-color: #647484; }
.weather-window-scene[data-light="soft"] .ww-sky-bottom { stop-color: #a4a9a5; }
.weather-window-scene[data-light="soft"] .ww-sun,
.weather-window-scene[data-light="soft"] .ww-sun-rays { display: none; }
.weather-window-scene[data-light="soft"] .ww-distant-hill { fill: #52635f; }
.weather-window-scene[data-light="soft"] .ww-coastline { opacity: .58; }
.weather-window-scene[data-light="night"] .ww-sky-top { stop-color: #172b46; }
.weather-window-scene[data-light="night"] .ww-sky-bottom { stop-color: #465b70; }
.weather-window-scene[data-light="night"] .ww-sun { display: none; }
.weather-window-scene[data-light="night"] .ww-night-light { display: block; }
.weather-window-scene[data-light="night"] .ww-stars { display: block; }
.weather-window-scene[data-light="night"] .ww-sun-rays { opacity: 0; }
.weather-window-scene[data-light="night"] .ww-house-window { fill: #e9bd73; }
.weather-window-scene[data-light="night"] .ww-sea-lines { opacity: .22; }
/* Wind stays visible as a complete streak; motion follows local wind and gusts. */
.weather-window-scene .ww-wind-lines { opacity: 0; }
.weather-window-scene[data-wind="breezy"] .ww-wind-lines { opacity: .85; }
.weather-window-scene[data-wind="strong"] .ww-wind-lines { opacity: 1; }
.weather-window-scene .ww-wind-lines path { stroke: #edf8ff; stroke-width: 2.5; }
.weather-window-scene:is([data-wind="breezy"],[data-wind="strong"]) .ww-wind-lines path { animation: weather-window-flow var(--ww-wind-duration, 4s) ease-in-out infinite; }
.weather-window-scene .ww-wind-lines path:nth-child(2) { animation-delay: -1.3s; }
.weather-window-scene .ww-wind-lines path:nth-child(3) { animation-delay: -2.6s; }
.weather-window-scene .ww-wind-lines path:nth-child(4) { animation-delay: -.7s; }
.weather-window-scene .ww-wind-lines path:nth-child(5) { animation-delay: -2s; }
.weather-window-scene .ww-tree-trunk { transform-origin: 174px 269px; transition: transform .8s ease-out; }
.weather-window-scene:is([data-wind="breezy"],[data-wind="strong"]) .ww-tree-trunk { animation: weather-window-sway var(--ww-wind-duration, 4s) ease-in-out infinite; }
.weather-window-scene .ww-rain { display: none; }
.weather-window-scene:is([data-rain="measured"],[data-rain="light"],[data-rain="rain"],[data-rain="heavy"],[data-rain="thunderstorm"]) .ww-rain { display: block; animation: weather-window-rain .85s linear infinite; }
.weather-window-scene[data-rain="light"] .ww-rain { opacity: .45; stroke-width: 1.5; animation-duration: 1.4s; }
.weather-window-scene:is([data-rain="heavy"],[data-rain="thunderstorm"]) .ww-rain { stroke-width: 4; animation-duration: .6s; }
.ww-lightning { display: none; }
.weather-window-scene[data-rain="thunderstorm"] .ww-lightning { display: block; }
.weather-window-details { padding: 22px clamp(18px, 3vw, 30px); align-self: center; }
.weather-window-observation { margin: 0; color: var(--text, #eef5fa); font-size: 1rem; line-height: 1.55; }
.weather-window-readings { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; margin: 17px 0 10px; }
.weather-window-readings span { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: start; align-items: start; gap: 5px; padding: 10px; border: 1px solid rgba(163,209,255,.13); border-radius: 12px; color: var(--muted, #a8bfd4); font-size: .72rem; }
.weather-window-readings strong { grid-column: 1; grid-row: 2; color: var(--text, #eef5fa); font-size: .87rem; font-weight: 700; }
.weather-window-readings .weather-term-help { grid-column: 2; grid-row: 2; margin-left: 0; }
.weather-window-note { margin: 0; color: var(--muted, #a8bfd4); font-size: .76rem; line-height: 1.5; }
@keyframes weather-window-flow {
  0% { transform: translateX(0); opacity: .3; }
  40% { opacity: 1; }
  100% { transform: translateX(var(--ww-wind-travel, -28px)); opacity: .3; }
}
@keyframes weather-window-sway {
  0%, 100% { transform: rotate(calc(var(--ww-tree-lean, 0deg) - var(--ww-tree-sway, 1.8deg))); }
  50% { transform: rotate(calc(var(--ww-tree-lean, 0deg) + var(--ww-tree-sway, 1.8deg))); }
}
@keyframes weather-window-rain { to { transform: translateY(13px); opacity: .45; } }
@media (max-width: 1280px) {
  .weather-window-card { grid-template-columns: 1fr; }
  .weather-window-scene { min-height: 210px; }
  .weather-window-scene svg { min-height: 210px; }
  .weather-window-details { padding: 18px; }
}
@media (max-width: 420px) {
  .weather-window-scene, .weather-window-scene svg { min-height: 170px; }
  .weather-window-scene .ww-weather-station { transform: translate(.95px, 9.05px) scale(1.05); }
  .weather-window-readings { gap: 6px; }
  .weather-window-readings span { padding: 8px 7px; font-size: .66rem; }
  .weather-window-readings strong { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .weather-window-scene * { animation: none !important; transition: none !important; }
}


/* Forecast sky is independent of low-angle morning sunlight. */
.weather-window-scene .ww-cloud { opacity: 0; transition: opacity 1s ease; }
.weather-window-scene[data-sky="mostly-clear"] .ww-cloud-1 { opacity: .7; }
.weather-window-scene[data-sky="partly-cloudy"] .ww-cloud-1,
.weather-window-scene[data-sky="partly-cloudy"] .ww-cloud-2,
.weather-window-scene[data-sky="partly-cloudy"] .ww-cloud-3 { opacity: .87; }
.weather-window-scene[data-sky="cloudy"] .ww-cloud { opacity: .9; fill: #c0cbd3; }
.weather-window-scene[data-sky="overcast"] .ww-cloud { opacity: 1; fill: #a1b0bc; }
.weather-window-scene[data-light="day"][data-sky="clear"] .ww-sky-top,
.weather-window-scene[data-light="day"][data-sky="mostly-clear"] .ww-sky-top { stop-color: #2388d0; }
.weather-window-scene[data-light="day"][data-sky="clear"] .ww-sky-bottom,
.weather-window-scene[data-light="day"][data-sky="mostly-clear"] .ww-sky-bottom { stop-color: #b1ddf6; }
.weather-window-scene[data-light="day"][data-sky="cloudy"] .ww-sky-top { stop-color: #71889a; }
.weather-window-scene[data-light="day"][data-sky="cloudy"] .ww-sky-bottom { stop-color: #b8c8d1; }
.weather-window-scene[data-light="day"][data-sky="overcast"] .ww-sky-top { stop-color: #697987; }
.weather-window-scene[data-light="day"][data-sky="overcast"] .ww-sky-bottom { stop-color: #a1afb9; }
.weather-window-scene .ww-sun { opacity: var(--ww-sun-opacity,.65); }
.weather-window-scene[data-sky="cloudy"] .ww-sun,
.weather-window-scene[data-sky="overcast"] .ww-sun,
.weather-window-scene[data-sky="unknown"] .ww-sun,
.weather-window-scene[data-sky="cloudy"] .ww-sun-rays,
.weather-window-scene[data-sky="overcast"] .ww-sun-rays,
.weather-window-scene[data-sky="unknown"] .ww-sun-rays { display: none; }
.weather-window-scene[data-light="twilight"] .ww-sky-top { stop-color:#687c9d; }
.weather-window-scene[data-light="twilight"] .ww-sky-bottom { stop-color:#e7b397; }
.weather-window-scene[data-light="twilight"] .ww-sun,
.weather-window-scene[data-light="twilight"] .ww-sun-rays { display:none; }
.weather-window-scene[data-light="night"] .ww-cloud { fill: #344557; }
.weather-window-scene[data-light="night"][data-sky="overcast"] .ww-stars,
.weather-window-scene[data-light="night"][data-sky="overcast"] .ww-night-light,
.weather-window-scene[data-light="night"][data-sky="cloudy"] .ww-stars { display:none; }
.weather-window-sky-source { color: var(--text,#eef5fa); font-size:.83rem; margin:12px 0 8px; }
.weather-window-admin { margin-top:16px; padding:14px; border:1px solid var(--line); border-radius:12px; }
.weather-window-admin[hidden] { display:none !important; }
.weather-window-admin label { display:block; margin-bottom:8px; }
.weather-window-admin select { max-width:100%; padding:8px; background:#122532; color:#eef5fa; border:1px solid #6a8799; border-radius:6px; }
.weather-window-admin button { margin:8px 0 0; }
.weather-window-admin p { margin-bottom:0; font-size:.78rem; color:var(--muted); }

/* Gentle transitions, with existing reduced-motion preferences respected. */
.weather-window-scene .ww-sky-top,
.weather-window-scene .ww-sky-bottom { transition: stop-color 3s ease; }
.weather-window-scene .ww-cloud { transition: opacity 3s ease, fill 3s ease; }
.weather-window-scene .ww-sun-track { transition: transform 8s linear; }
.weather-window-scene .ww-sun { transition: opacity 3s ease, fill 3s ease; }
.weather-window-scene[data-light="day"][data-sky="cloudy"] .ww-sun,
.weather-window-scene[data-light="day"][data-sky="overcast"] .ww-sun,
.weather-window-scene[data-light="day"][data-sky="unknown"] .ww-sun { display:inline; opacity:0; }
.weather-window-scene[data-light="day"][data-sky="cloudy"] .ww-sun-rays,
.weather-window-scene[data-light="day"][data-sky="overcast"] .ww-sun-rays,
.weather-window-scene[data-light="day"][data-sky="unknown"] .ww-sun-rays { display:inline; opacity:0; }
.weather-window-scene[data-light="day"][data-edge="dawn"][data-sky="clear"] .ww-sky-bottom,
.weather-window-scene[data-light="day"][data-edge="dawn"][data-sky="mostly-clear"] .ww-sky-bottom,
.weather-window-scene[data-light="day"][data-edge="dusk"][data-sky="clear"] .ww-sky-bottom,
.weather-window-scene[data-light="day"][data-edge="dusk"][data-sky="mostly-clear"] .ww-sky-bottom { stop-color:#f0c39e; }
.social-admin-panel { margin:28px 0; padding:22px; border:1px solid var(--line); border-radius:18px; background:var(--panel); }
.social-admin-panel[hidden], .social-admin-panel [hidden] { display:none !important; }
.social-admin-networks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0; }
.social-admin-networks > div { padding:14px; border:1px solid var(--line); border-radius:12px; }
.social-admin-networks p { margin:8px 0; overflow-wrap:anywhere; }
.social-admin-networks [data-state="failed"], .social-admin-networks [data-state="missed"] { border-color:#e8a078; }
.social-admin-notice { padding:14px; border-radius:10px; background:rgba(195,103,40,.18); border:1px solid #e8a078; }
.social-admin-preview { margin-top:16px; }
.social-admin-preview pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; line-height:1.5; padding:14px; background:rgba(0,0,0,.18); border-radius:10px; }
.social-admin-preview img { width:100%; max-width:560px; height:auto; border-radius:12px; }
@media(max-width:600px) { .social-admin-networks { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .weather-window-scene * { transition:none !important; animation:none !important; } }

/* Anchor the flowers to the visible scene instead of the cropped landscape. */
.weather-window-scene svg.ww-flowers { position:absolute; left:12px; bottom:10px; width:clamp(88px, 20%, 124px); height:auto; min-height:0; overflow:visible; pointer-events:none; }
.weather-window-scene .ww-flower { transform:rotate(var(--ww-flower-lean, 0deg)); }
.weather-window-scene:is([data-wind="breezy"],[data-wind="strong"]) .ww-flower { animation:weather-window-flower-sway var(--ww-wind-duration, 4s) ease-in-out infinite; }
.weather-window-scene .ww-flower:nth-child(2) { animation-delay:-.6s; }
.weather-window-scene .ww-flower:nth-child(3) { animation-delay:-1.3s; }
.weather-window-scene .ww-flower:nth-child(4) { animation-delay:-.9s; }
@keyframes weather-window-flower-sway {
  0%, 100% { transform:rotate(calc(var(--ww-flower-lean, 0deg) - var(--ww-flower-sway, 4deg))); }
  50% { transform:rotate(calc(var(--ww-flower-lean, 0deg) + var(--ww-flower-sway, 4deg))); }
}