/* Today bar + living weather scene (wxscene.js), the one shared copy (2026-11-02): the park app, HQ and the guest app all load it.
   Moved here unchanged from shell.css. */
.dstrip .xwh{flex-wrap:nowrap;margin:0;min-width:0}
.dswx{margin-left:auto;display:flex;align-items:center;flex-wrap:nowrap;flex:none;gap:14px;border:0;background:var(--soft);border-radius:var(--btn-r);min-height:var(--btn-h);padding:4px 14px;font:inherit;color:var(--ink);cursor:pointer}
.dswx .now,.dswx .day{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.dswx .now b{font-size:18px}.dswx .day{color:var(--muted);font-weight:700;font-size:14px}
.dswx .ico{width:20px;height:20px}
/* Today bar: its own background (theme token, same on every page) and one line only; fitDayStrip() trims it.
   Title and weather never shrink, so any squeeze shows up as overflow that fitDayStrip() can measure. */
.dstrip{background:var(--today-bg,var(--sky))}
.dstrip .xwh{flex-wrap:nowrap;margin:0;min-width:0;overflow:hidden}
.dstrip .xwh h3{white-space:nowrap;flex:0 0 auto}
.dstrip .xwh h3 .sm{display:none}.dstrip.short .xwh h3 .lg{display:none}.dstrip.short .xwh h3 .sm{display:inline}
.dstrip .dswx{margin-left:auto;flex:0 0 auto;background:none;padding:0;gap:6px;min-height:0}
.dswx [hidden]{display:none!important}
/* Each forecast day is its own capsule, like the day tiles in the full weather pop-up */
.dstrip .dswx .day{flex-direction:column;justify-content:center;gap:2px;min-width:58px;padding:6px 8px;border-radius:14px;background:var(--card);color:var(--ink);font-size:13px;font-weight:700}
.dstrip .dswx .day .ico{width:20px;height:20px}
.dstrip .dswx .now{padding:0 8px 0 4px}
.dstrip.cmp .dswx .day{min-width:0;width:52px;padding:6px 2px}   /* phones: compact day tiles so all 3 days fit (Design 2026-11-01) */
.dstrip.wrap .xwh{flex-wrap:wrap;row-gap:8px}.dstrip.wrap .dswx{flex:1 1 100%;margin-left:0;justify-content:flex-end}   /* last step: the weather on its own row */
/* Living weather scene (John 2026-11-01, Design option A; wxscene.js). The picture fills the bar behind the row; the title and the
   weather ride on cards, white at 80% with a 1px line ring, flat. The scene's own colors are fixed, like the sales page. */
.dstrip.wxs{position:relative;overflow:hidden;isolation:isolate}
.dstrip .wxhost{position:absolute;inset:0;z-index:0;pointer-events:none}
.dstrip .wxhost .wxscene{position:absolute;top:0;left:50%;transform:translateX(-50%);display:block}   /* drawn at the window's width, centred: a width change never stretches it (paintScene) */
.dstrip.wxs .xwh{position:relative;z-index:1}
.dstrip .dscard{display:inline-flex;align-items:center;gap:inherit;flex:0 0 auto;min-width:0}
.dstrip.wxs .dscard{gap:10px;padding:4px 14px 4px 4px;border-radius:14px;background:color-mix(in srgb,var(--card) 80%,transparent);border:1px solid var(--line)}
.dstrip.wxs .dswx .now{min-height:var(--btn-h);padding:0 12px;border-radius:14px;background:color-mix(in srgb,var(--card) 80%,transparent);border:1px solid var(--line)}
.dstrip.wxs .dswx .day{background:color-mix(in srgb,var(--card) 80%,transparent);border:1px solid var(--line)}
/* Eros only (John 2026-11-02): the weather picture preview, a small gear at the end of the title card; filled while a preview is on. */
.dstrip .wxpv{flex:none;box-sizing:border-box;width:28px;height:28px;min-width:0;min-height:0;margin-left:-2px;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--card) 80%,transparent);color:var(--ink);cursor:pointer}
.dstrip .wxpv .ico{width:14px;height:14px}.dstrip .wxpv.pvon{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* Slow motion only. Lightning: one soft flash every 12 s, thunder a short cloud shake after it. Reduce motion or a hidden tab = a still picture. */
.scn .drift{animation:wxdrift var(--d) linear var(--dl) infinite}
@keyframes wxdrift{from{transform:translateX(var(--a))}to{transform:translateX(var(--b))}}
.scn .fall{animation:wxfall var(--d) linear var(--dl) infinite}
@keyframes wxfall{from{transform:translate(0,var(--a))}to{transform:translate(var(--dx),var(--b))}}
.scn .sway{animation:wxsway var(--d) ease-in-out var(--dl) infinite alternate}
@keyframes wxsway{from{transform:translateX(calc(var(--s) * -1))}to{transform:translateX(var(--s))}}
.scn .bend{transform-box:fill-box;transform-origin:50% 100%;animation:wxbend var(--d) ease-in-out var(--dl) infinite alternate}
@keyframes wxbend{from{transform:rotate(-1deg)}to{transform:rotate(var(--rot))}}
.scn .tw{animation:wxtw var(--d) ease-in-out var(--dl) infinite alternate}
@keyframes wxtw{from{opacity:.25}to{opacity:1}}
.scn .ff{animation:wxff var(--d) ease-in-out var(--dl) infinite}
@keyframes wxff{0%,100%{opacity:0}45%,55%{opacity:.95}}
.scn .flash{animation:wxflash 12s linear var(--dl) infinite;opacity:0}
@keyframes wxflash{0%,90%{opacity:0}90.6%{opacity:.32}91.4%{opacity:.06}92.2%{opacity:.24}94%,100%{opacity:0}}
.scn .bolt{animation:wxbolt 12s linear var(--dl) infinite;opacity:0}
@keyframes wxbolt{0%,90%{opacity:0}90.6%{opacity:.95}91.4%{opacity:.2}92.2%{opacity:.8}94%,100%{opacity:0}}
/* Thunder (John 2026-11-02): a second after each flash the storm clouds shake for a moment, then settle. */
.scn .rumble{animation:wxrumble 12s linear var(--dl) infinite}
@keyframes wxrumble{0%,93%{transform:none}93.8%{transform:translate(2px,-1px)}94.6%{transform:translate(-2px,1px)}95.4%{transform:translate(1.5px,0)}96.2%{transform:translate(-1px,1px)}97%{transform:translate(.5px,0)}98%,100%{transform:none}}
.scn .haze{animation:wxhaze 9s ease-in-out infinite alternate}
@keyframes wxhaze{from{opacity:.15;transform:translateX(-8px)}to{opacity:.4;transform:translateX(8px)}}
.scn .leaf{animation:wxleaf var(--d) linear var(--dl) infinite}
@keyframes wxleaf{0%{transform:translate(var(--a),0) rotate(0)}50%{transform:translate(calc((var(--a) + var(--b)) / 2),var(--dy)) rotate(200deg)}100%{transform:translate(var(--b),calc(var(--dy) * .4)) rotate(400deg)}}
body.still .scn *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.scn *{animation:none!important}.scn .flash,.scn .bolt{opacity:0}}