/* Forecast screen: seven days across the top, then the next sixteen hours and
   the AI "Plan ahead" card. Loaded after cloud-web.css and cloud-mobile.css,
   whose older .day rules it replaces. Only opacity and transform animate. */
.forecast-screen .forecast-week{display:flex;flex-direction:column;gap:clamp(8px,1.6vh,16px);overflow:hidden}
.forecast-screen .forecast-week>.section-title{flex:0 0 auto;margin:0}
.forecast-screen .forecast-week .forecast{flex:0 0 auto;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin:0;gap:0}
.forecast-screen .forecast-week .day{width:auto;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;padding:.6vh .4vw 1vh;border-right:1px solid #d7bcc1}
.forecast-screen .forecast-week .day:last-child{border-right:0}
.forecast-screen .forecast-week .day:before{display:none}
.forecast-screen .forecast-week .day-name{font:clamp(11px,2.1vh,17px) Georgia,serif;text-transform:uppercase;letter-spacing:.14em;color:#4f5f49}
/* Flip card: moon face in front, weather face behind. Turning the inner card
   is one transform per day, staggered by transitionDelay set in app.js. */
.forecast-screen .forecast-week .day-flip{width:100%;margin:.8vh 0 .2vh;-webkit-perspective:600px;perspective:600px}
.forecast-screen .forecast-week .flip-inner{display:grid;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:transform 1.4s cubic-bezier(.4,0,.2,1)}
.forecast-screen .forecast-week.show-weather .flip-inner{transform:rotateY(180deg)}
.forecast-screen .forecast-week .flip-face{grid-area:1/1;display:flex;flex-direction:column;align-items:center;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.forecast-screen .forecast-week .flip-weather{transform:rotateY(180deg)}
.forecast-screen .forecast-week .day .moon-icon{width:clamp(30px,6vh,52px);height:clamp(30px,6vh,52px);margin:clamp(2px,.4vh,4px) auto clamp(2px,.4vh,4px)}
.forecast-screen .forecast-week .forecast-wx{display:block;width:clamp(42px,8.5vh,72px);height:clamp(34px,6.8vh,58px);margin:0 auto .4vh}
.forecast-screen .forecast-week .day-moon,.forecast-screen .forecast-week .day-condition{font:italic clamp(10px,1.75vh,14px) Georgia,serif;min-height:2.4em;line-height:1.2;margin:0 .3vw}
.forecast-screen .forecast-week .day-moon{color:#876573}
.forecast-screen .forecast-week .day-condition{color:#6f6553}
/* Only the face on view animates. */
.forecast-screen .forecast-week.show-weather .day .moon-icon,.forecast-screen .forecast-week.show-weather .day-moon{animation-play-state:paused}
.forecast-screen.active .forecast-week.show-weather .day .weather-clear .wx-rays,.forecast-screen.active .forecast-week.show-weather .day .weather-partly .wx-rays{transform-origin:42px 36px;animation:wx-sun-spin 9s linear infinite}
.forecast-screen.active .forecast-week.show-weather .day .weather-partly .wx-cloud-front,.forecast-screen.active .forecast-week.show-weather .day .weather-overcast .wx-cloud-front{animation:wx-cloud-drift 5.5s ease-in-out infinite}
.forecast-screen.active .forecast-week.show-weather .day .weather-overcast .wx-cloud-back,.forecast-screen.active .forecast-week.show-weather .day .weather-storm .wx-cloud-back{animation:wx-cloud-back-drift 7s ease-in-out infinite}
.forecast-screen.active .forecast-week.show-weather .day .wx-drop{animation:wx-rain-fall 1.15s linear infinite}.forecast-screen.active .forecast-week.show-weather .day .wx-drop-two{animation-delay:-.38s}.forecast-screen.active .forecast-week.show-weather .day .wx-drop-three{animation-delay:-.76s}
.forecast-screen.active .forecast-week.show-weather .day .wx-flake{animation:wx-snow-fall 2.4s ease-in-out infinite}.forecast-screen.active .forecast-week.show-weather .day .wx-flake-two{animation-delay:-.8s}.forecast-screen.active .forecast-week.show-weather .day .wx-flake-three{animation-delay:-1.6s}
.forecast-screen.active .forecast-week.show-weather .day .weather-storm .wx-storm{animation:wx-lightning 3.6s step-end infinite}
.forecast-screen.active .forecast-week.show-weather .day .weather-fog .wx-fog{animation:wx-fog-drift 6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.forecast-screen .forecast-week .flip-inner{transition:none}.forecast-screen .forecast-week .day *{animation:none!important}}
.forecast-screen .forecast-week .day-temp{margin-top:.6vh;font-size:clamp(18px,4.2vh,34px);white-space:nowrap}
.forecast-screen .forecast-week .day-high{color:#2f4532}
.forecast-screen .forecast-week .day-low{color:#8a7d6a;font-size:.72em;margin-left:.35em}
.forecast-screen .forecast-week .day-rain,.forecast-screen .forecast-week .day-wind{font:clamp(10px,1.7vh,14px) Georgia,serif;margin-top:.5vh;color:#886572}
.forecast-screen .forecast-week .day-wind{color:#6c6a5c}
.forecast-screen .forecast-week .day-flags{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;margin-top:.8vh;min-height:2.6vh}
.forecast-screen .forecast-week .day-flag{font:bold clamp(8px,1.35vh,11px) Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;padding:.25vh .5em;border-radius:2px;background:#e8dcc6;color:#5a4a30}
.forecast-screen .forecast-week .flag-hard-freeze,.forecast-screen .forecast-week .flag-freeze,.forecast-screen .forecast-week .flag-ice{background:#2f4f6a;color:#f2f6f8}
.forecast-screen .forecast-week .flag-frost,.forecast-screen .forecast-week .flag-snow{background:#d8e6ee;color:#2f4f6a}
.forecast-screen .forecast-week .flag-heat{background:#b4552f;color:#fff6ec}
.forecast-screen .forecast-week .flag-storms,.forecast-screen .forecast-week .flag-wind{background:#5c4a6a;color:#f6f0fa}
.forecast-screen .forecast-week .flag-rain{background:#cfe0e3;color:#2c5560}

/* Still weather drawings: the home screen's art without its motion. */
.forecast-wx svg{display:block;width:100%;height:100%;overflow:visible}
.forecast-wx .wx-sun,.forecast-wx .wx-cloud,.forecast-wx .wx-rain,.forecast-wx .wx-snow,.forecast-wx .wx-storm,.forecast-wx .wx-fog{opacity:0}
.forecast-wx .wx-rays path{fill:none;stroke:#d9a659;stroke-width:4;stroke-linecap:round}.forecast-wx .wx-sun-disc{fill:#e7b979;stroke:#d9a659;stroke-width:2}
.forecast-wx .wx-drop,.forecast-wx .wx-flake,.forecast-wx .wx-fog path{fill:none;stroke-width:4;stroke-linecap:round}.forecast-wx .wx-flake{stroke-width:2}.forecast-wx .wx-storm path{fill:#e0b75a;stroke:#b98d2f;stroke-width:1}
.forecast-wx.forecast-night svg{width:62%;height:78%;margin:0 auto}.forecast-wx.forecast-night .moon-icon{margin:0;display:block}
.forecast-wx .wx-cloud path{fill:#f3ece4;stroke:#a99394}.forecast-wx .wx-cloud-back path{fill:#c9d3cb;stroke:#a7b0a8}
.forecast-wx .wx-drop{stroke:#6f9aa6}.forecast-wx .wx-flake{stroke:#7d9aab}.forecast-wx .wx-fog path{stroke:#a6aea7}
.forecast-wx.weather-clear .wx-sun{opacity:1;transform:translate(18px,10px) scale(1.12)}
.forecast-wx.weather-partly .wx-sun{opacity:1;transform:translate(2px,-2px) scale(.88)}.forecast-wx.weather-partly .wx-cloud-front{opacity:1;transform:translate(9px,3px) scale(.9)}
.forecast-wx.weather-overcast .wx-cloud-back,.forecast-wx.weather-overcast .wx-cloud-front{opacity:1}.forecast-wx.weather-overcast .wx-cloud-back{transform:translate(-8px,-8px) scale(.92)}
.forecast-wx.weather-drizzle .wx-cloud-front,.forecast-wx.weather-drizzle .wx-rain,.forecast-wx.weather-rain .wx-cloud-front,.forecast-wx.weather-rain .wx-rain{opacity:1}
.forecast-wx.weather-snow .wx-cloud-front,.forecast-wx.weather-snow .wx-snow{opacity:1}
.forecast-wx.weather-storm .wx-cloud-back,.forecast-wx.weather-storm .wx-cloud-front,.forecast-wx.weather-storm .wx-rain,.forecast-wx.weather-storm .wx-storm{opacity:1}.forecast-wx.weather-storm .wx-cloud-back{transform:translate(-8px,-7px) scale(.94)}
.forecast-wx.weather-fog .wx-cloud-back,.forecast-wx.weather-fog .wx-fog{opacity:1}.forecast-wx.weather-fog .wx-cloud-back{transform:translate(3px,-12px) scale(.84)}

/* Lower row: hours on the left, the advice card on the right. */
.forecast-screen .forecast-lower{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(10px,1.6vw,22px)}
.forecast-screen .forecast-lower.no-advice{grid-template-columns:minmax(0,1fr)}
.forecast-screen .forecast-lower>section{min-height:0;overflow:hidden;box-sizing:border-box;padding:clamp(8px,1.6vh,14px) clamp(10px,1.2vw,18px)}
.forecast-screen .forecast-lower>section[hidden]{display:none}
.forecast-screen .forecast-label{font:clamp(9px,1.5vh,12px) Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#86636d;margin-bottom:clamp(6px,1.2vh,10px)}
.forecast-screen .forecast-hours{background:rgba(255,252,244,.55);border:1px solid #d7bcc1}
.forecast-screen .hour-strip{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));text-align:center}
.forecast-screen .hour{min-width:0;border-right:1px solid #e3d3d3}.forecast-screen .hour:last-child{border-right:0}
.forecast-screen .hour-time{font:clamp(9px,1.6vh,13px) Georgia,serif;color:#6f6553;white-space:nowrap}
.forecast-screen .hour .forecast-wx{display:block;width:clamp(26px,5vh,44px);height:clamp(21px,4vh,35px);margin:.6vh auto .3vh}
.forecast-screen .hour-temp{font-size:clamp(14px,2.8vh,22px);color:#2f4532}
.forecast-screen .hour-rain{font:clamp(9px,1.5vh,12px) Georgia,serif;color:#886572;min-height:1.3em;margin-top:.3vh}
.forecast-screen .forecast-advice{background:rgba(47,69,51,.95);color:#f3ead7;border:1px solid #a7b094}
.forecast-screen .forecast-advice .forecast-label{color:#e6cbd0}
.forecast-screen #forecast-advice-headline{margin:0 0 clamp(6px,1.2vh,10px);font:italic clamp(14px,2.6vh,21px)/1.3 Georgia,serif;color:#fff8ea}
.forecast-screen #forecast-advice-items{list-style:none;margin:0;padding:0}
.forecast-screen #forecast-advice-items li{font:clamp(11px,1.95vh,16px)/1.4 Georgia,serif;padding:clamp(3px,.7vh,6px) 0;border-top:1px solid rgba(230,203,208,.25)}
.forecast-screen .advice-topic{display:inline-block;min-width:5.6em;margin-right:.8em;font:bold clamp(8px,1.4vh,11px) Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#e6c5cd}
.forecast-screen .forecast-week #forecast-moon-note{flex:0 0 auto;margin:0;padding-top:clamp(4px,1vh,8px);font-size:clamp(9px,1.5vh,12px)}

/* Phone: the week as a list of rows, then hours you can swipe, then advice. */
@media(max-width:700px){
  .forecast-screen .forecast-week{gap:12px;overflow:hidden;height:auto}
  .forecast-screen .forecast-week .forecast{grid-template-columns:1fr;gap:0}
  .forecast-screen .forecast-week .day{display:grid;grid-template-columns:52px minmax(0,1fr) auto;grid-template-areas:"name flip temp" "name meta temp" "flags flags flags";align-items:center;text-align:left;column-gap:8px;min-height:0;height:auto;padding:7px 2px;border:0;border-bottom:1px solid #e3d3d3;background:none}
  .forecast-screen .forecast-week .day-name{grid-area:name;font-size:12px}
  .forecast-screen .forecast-week .day-flip{grid-area:flip;margin:0}
  /* Stacked rows tip over top to bottom instead of turning sideways. */
  .forecast-screen .forecast-week.show-weather .flip-inner{transform:rotateX(-180deg)}
  .forecast-screen .forecast-week .flip-weather{transform:rotateX(180deg)}
  .forecast-screen .forecast-week .flip-face{flex-direction:row;justify-content:flex-start;gap:8px}
  .forecast-screen .forecast-week .forecast-wx{width:40px;height:32px;margin:0}
  .forecast-screen .forecast-week .day .moon-icon{width:28px;height:28px;margin:2px 6px}
  .forecast-screen .forecast-week .day-moon,.forecast-screen .forecast-week .day-condition{min-height:0;font-size:13px;margin:0}
  .forecast-screen .forecast-week .day-rain{grid-area:meta;margin:0;font-size:12px}
  .forecast-screen .forecast-week .day-wind{display:none}
  .forecast-screen .forecast-week .day-temp{grid-area:temp;margin:0;font-size:22px}
  .forecast-screen .forecast-week .day-flags{grid-area:flags;justify-content:flex-start;min-height:0;margin:0}
  .forecast-screen .forecast-week .day-flags:not(:empty){margin-top:4px}
  .forecast-screen .forecast-week .day-flag{font-size:9px;padding:2px 6px}
  .forecast-screen .forecast-lower,.forecast-screen .forecast-lower.no-advice{grid-template-columns:minmax(0,1fr)}
  .forecast-screen .forecast-lower>.forecast-hours{overflow-x:auto}
  .forecast-screen .hour-strip{grid-template-columns:repeat(8,64px)}
  .forecast-screen .forecast-label{font-size:10px}
  .forecast-screen #forecast-advice-headline{font-size:17px}
  .forecast-screen #forecast-advice-items li{font-size:14px}
  .forecast-screen .advice-topic{display:block;font-size:9px;margin-bottom:2px}
}