/* The weather (js/weather.js): out of sight along the middle third of the left edge until wanted ("callable
   on approach", 2026-10-19; only the middle, not the corners, William 2026-10-20). The forecast card's look
   came over from Meridian's weather panel. */
#wx-edge {
  position: fixed; left: max(0px, env(safe-area-inset-left)); top: 33.333%; bottom: 33.333%; z-index: 22;
  width: 12px; touch-action: none; cursor: pointer;
}
/* the tab: hidden until the pointer comes near the edge, or keyboard focus lands on it */
#wx-edge .wx-tab {
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 42px; padding: 7px 4px;
  border-radius: 0 12px 12px 0; border: 1px solid var(--line); border-left: 0;
  background: var(--glass-strong); backdrop-filter: blur(12px); font-size: 12px; color: var(--muted);
  position: absolute; left: 0; top: clamp(36px, var(--wx-y, 50%), calc(100% - 36px));
  transform: translate(-105%, -50%); opacity: 0; transition: transform var(--mo-base) var(--mo-ease), opacity var(--mo-base);
  pointer-events: none;
}
/* it slides out beside the pointer as the pointer comes near the middle of the left edge */
#wx-edge.near .wx-tab, #wx-edge:hover .wx-tab, #wx-edge:focus-visible .wx-tab { transform: translate(0, -50%); opacity: 1; }
#wx-edge .wx-tab img { width: 28px; height: 28px; }
#wx-edge .wx-tab b { color: #FF7A66; font-size: 13px; }
#wx-edge .wx-tab b.cold { color: #5AB0FF; }
#wx-edge.away { pointer-events: none; }
body.in-earth #wx-edge { display: none; }

#weather {
  --panel: var(--glass-strong); --paper: var(--text); --text-dim: var(--muted); --text-faint: var(--muted);
  --amber: #FFD27A; --panel-raised: rgba(255,255,255,.08);
  --body: var(--font); --cond: var(--font); --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  position: fixed; left: max(0px, env(safe-area-inset-left)); top: 72px; bottom: calc(var(--dock-h) + 8px); z-index: 35;
  width: min(420px, calc(100% - 24px)); display: flex; flex-direction: column;
  background: var(--panel); backdrop-filter: blur(16px); border: 1px solid var(--line); border-left: none;
  border-radius: 0 16px 16px 0; box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  transform: translateX(-105%); visibility: hidden; color: var(--text);
  transition: transform var(--mo-slow) var(--mo-ease), visibility 0s var(--mo-slow);
}
#weather.open { transform: none; visibility: visible; transition: transform var(--mo-slow) var(--mo-ease); }
#weather .cold{ color:#5AB0FF; }
#weather .wx-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:12px 12px 8px 16px; border-bottom:1px solid var(--line); }
#weather .wx-kicker{ font:700 10.5px var(--cond); letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); }
#weather .wx-place{ font:700 17px var(--cond); color:var(--paper); overflow-wrap:anywhere; }
#weather .wx-close{ width:30px; height:30px; flex:none; border-radius:50%; border:none; background:rgba(255,255,255,0.06); color:var(--text-dim); cursor:pointer; }
#weather, #weather *{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.18) transparent; }
#weather .wx-body{ flex:1; overflow-y:auto; overflow-x:hidden; padding:12px 14px 14px 16px; overscroll-behavior:contain; }
#weather .wx-wait{ padding:30px 0; color:var(--text-dim); text-align:center; }
/* the figure, the readings and the next hours: one card, the sky running down behind the graph */
#weather .wx-scene{ border-radius:14px; overflow:hidden; background:linear-gradient(#3F7FB5 0%, #9CC7E6 50%, #2D4E68 100%); box-shadow:0 6px 20px rgba(0,0,0,0.35); }
#weather .wx-scene.grey{ background:linear-gradient(#56626C 0%, #9AA6AE 50%, #3A444C 100%); }
#weather .wx-scene.night{ background:linear-gradient(#0E1A33 0%, #2B3F66 50%, #101C33 100%); }
#weather .wx-hero{ position:relative; height:206px; }
#weather .wx-scene .wx-graph{ border-radius:0; background:linear-gradient(rgba(6,12,20,0.55), rgba(6,12,20,0.78)); }
#weather .wx-hint{ margin:6px 2px 0; font-size:11px; color:var(--text-faint); }
#weather .wx-hero .wx-fig{ position:absolute; right:2px; top:4px; height:calc(100% - 4px); width:auto; background:none; border-radius:0; overflow:visible; }
#weather .wx-hero.playing .wx-fig{ animation:wxPop .42s ease-out; }
@keyframes wxPop{ 0%{ transform:scale(0.96); opacity:.65; } 100%{ transform:none; opacity:1; } }
#weather .wx-hero .wx-wait{ padding:16px; color:#fff; }
#weather .wx-now{ position:absolute; left:14px; top:10px; right:46%; min-width:0; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.5); }
#weather .wx-when{ font-size:12px; font-weight:600; color:rgba(255,255,255,0.9); }
#weather .wx-when em{ font-style:normal; font-weight:700; color:#FFD27A; }
#weather .wx-big{ display:flex; align-items:center; gap:2px; font:800 40px/1 var(--body); color:#fff; margin-top:2px; }
#weather .wx-big .cold{ color:#CFE7FF; }
#weather .wx-big img{ width:48px; height:48px; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
#weather .wx-say{ font-weight:700; font-size:14px; color:#fff; margin-top:2px; }
#weather .wx-low{ position:absolute; left:0; right:0; bottom:0; padding:26px 12px 9px; background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6)); color:#fff; }
#weather .wx-play{ position:absolute; left:14px; right:46%; top:118px; display:flex; gap:3px; }
#weather .wx-play i{ flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,0.3); }
#weather .wx-play i.on{ background:#FFD27A; }
#weather .wx-facts{ display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; color:rgba(255,255,255,0.92); }
#weather .wx-arrow{ display:inline-block; font-style:normal; }
#weather .wx-rainv{ color:#7FB8FF; }
#weather .wx-wear{ margin-top:6px; font-size:12px; color:var(--amber); }
#weather .wx-label{ margin:16px 0 6px; font:700 11px var(--cond); letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
#weather .wx-label span{ text-transform:none; letter-spacing:0; font:400 11px var(--body); margin-left:6px; }
#weather .wx-graph{ overflow-x:auto; overflow-y:hidden; touch-action:pan-x; border-radius:8px; background:rgba(255,255,255,0.025); cursor:pointer; scrollbar-width:thin; }
#weather .wx-graph svg{ display:block; }
#weather .wx-sel{ fill:rgba(255,210,122,0.2); }
#weather .wx-midnight{ stroke:var(--line); }
#weather .wx-day{ fill:var(--text-dim); font:700 10.5px var(--body); }
#weather .wx-bar{ fill:#3E8EF7; }
#weather .wx-mm{ fill:#7FB8FF; font:600 9.5px var(--body); text-anchor:middle; }
#weather .wx-t{ fill:#FF7A66; font:700 11px var(--body); text-anchor:middle; }
#weather .wx-t.cold{ fill:#5AB0FF; }
#weather .wx-curve{ fill:none; stroke-width:2.5; }
#weather .wx-curve.warm{ stroke:#FF5A4A; }
#weather .wx-curve.cold{ stroke:#4AA3FF; }
#weather .wx-windarrow{ fill:rgba(255,255,255,0.7); }
#weather .wx-ws{ fill:rgba(255,255,255,0.7); font:9.5px var(--body); }
#weather .wx-hr{ fill:rgba(255,255,255,0.6); font:9.5px var(--mono); text-anchor:middle; }
#weather .wx-base{ stroke:var(--line); }
#weather .wx-src a{ color:var(--text-dim); }
#weather .wx-dayrow{ display:grid; grid-template-columns:minmax(0,1fr) 30px 76px 52px; gap:8px; align-items:center; padding:5px 0; border-bottom:1px solid rgba(255,255,255,0.05); font-size:13px; }
#weather .wx-dayrow img{ width:30px; height:30px; }
#weather .wd-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#weather .wd-t{ text-align:right; color:var(--text-dim); } #weather .wd-t b{ color:#FF7A66; } #weather .wd-t b.cold{ color:#5AB0FF; }
#weather .wd-rain{ text-align:right; color:#7FB8FF; font-size:12px; }
/* the figure's little animations */
.wx-fig .wxf-body{ animation:wxBob 3s ease-in-out infinite; }
.wx-fig .wxf-eyes{ transform-box:fill-box; transform-origin:center; animation:wxBlink 4.5s infinite; }
.wx-fig .wxf-rays{ transform-origin:117.5px 24px; animation:wxSpin 20s linear infinite; }
.wx-fig .wxf-drop{ animation:wxFall .9s linear infinite; }
.wx-fig .wxf-flake{ animation:wxSnow 3s linear infinite; }
.wx-fig .wxf-umbrella{ transform-origin:92px 62px; animation:wxSway 2.6s ease-in-out infinite; }
.wx-fig .wxf-gust{ animation:wxGust 1.8s linear infinite; opacity:0; }
.wx-fig .wxf-scarf{ transform-box:fill-box; transform-origin:top; animation:wxFlap 1.3s ease-in-out infinite; }
.wx-fig .windy .wxf-scarf{ animation-duration:.45s; }
.wx-fig .wxf-star{ animation:wxTwinkle 2.4s ease-in-out infinite; } .wx-fig .s2{ animation-delay:.8s; } .wx-fig .s3{ animation-delay:1.6s; }
.wx-fig .wxf-bolt{ animation:wxFlash 3.2s steps(1) infinite; }
.wx-fig .wxf-cloud{ animation:wxDrift 8s ease-in-out infinite; }
@keyframes wxBob{ 50%{ transform:translateY(-2px); } }
@keyframes wxBlink{ 0%, 95%, 100%{ transform:scaleY(1); } 97%{ transform:scaleY(.1); } }
@keyframes wxSpin{ to{ transform:rotate(360deg); } }
@keyframes wxFall{ from{ transform:translateY(-10px); } to{ transform:translateY(172px); } }
@keyframes wxSnow{ 0%{ transform:translate(0, -6px); } 50%{ transform:translate(6px, 82px); } 100%{ transform:translate(-3px, 172px); } }
@keyframes wxSway{ 50%{ transform:rotate(-5deg); } }
@keyframes wxGust{ 0%{ transform:translateX(0); opacity:0; } 20%{ opacity:1; } 100%{ transform:translateX(170px); opacity:0; } }
@keyframes wxFlap{ 50%{ transform:rotate(14deg); } }
@keyframes wxTwinkle{ 50%{ opacity:.25; } }
@keyframes wxFlash{ 0%, 100%{ opacity:0; } 80%{ opacity:1; } 84%{ opacity:0; } 88%{ opacity:1; } 92%{ opacity:0; } }
@keyframes wxDrift{ 50%{ transform:translateX(-5px); } }
@media (prefers-reduced-motion: reduce) { .wx-fig * { animation: none !important; } }
/* the time: a marker that glides, a knob to drag it by (js/weather.js, William 2026-10-17) */
#weather .wx-graph{ position:relative; cursor:ew-resize; }
#weather .wx-graph.dragging{ cursor:grabbing; }
#weather .wx-graph:focus-visible{ outline:2px solid var(--amber); outline-offset:-2px; }
#weather .wx-knob{ position:absolute; bottom:2px; width:30px; height:14px; margin-left:-15px; border-radius:7px; background:var(--amber); box-shadow:0 1px 4px rgba(0,0,0,.4); touch-action:none; cursor:grab; }
#weather .wx-knob::before{ content:""; position:absolute; inset:4px 9px; border-inline:2px solid rgba(0,0,0,.45); }
#weather .wx-knob::after{ content:""; position:absolute; left:-8px; right:-8px; top:-14px; bottom:-8px; }  /* a bigger place to grab */
/* the figure is always up to something: looking about, waving when dry, humming under the umbrella */
.wx-fig .wxf-look{ animation:wxLook 7s ease-in-out infinite; }
.wx-fig.waves .wxf-arm-l{ animation:wxWave 9s ease-in-out infinite; }
.wx-fig .wxf-note{ font:14px sans-serif; opacity:0; animation:wxHum 4s ease-out infinite; }
@keyframes wxLook{ 0%, 38%, 82%, 100%{ transform:none; } 44%, 54%{ transform:translateX(-2px); } 60%, 76%{ transform:translateX(2px); } }
@keyframes wxWave{ 0%, 78%, 100%{ transform:none; } 83%, 89%, 95%{ transform:rotate(150deg); } 86%, 92%{ transform:rotate(125deg); } }
@keyframes wxHum{ 0%, 55%{ opacity:0; transform:none; } 65%{ opacity:.9; } 100%{ opacity:0; transform:translate(-8px, -18px); } }
/* the rain comes: drops on the head, wet strands, a glum moment, then the umbrella goes up and a smile */
.wx-fig .wxf-wethair{ opacity:.95; }
.wx-fig .wxf-was, .wx-fig .wxf-arm-was{ opacity:0; }
.wx-fig.opening .wxf-wethair{ animation:wxWet .5s .35s ease-out both; }
.wx-fig.opening .wxf-was{ animation:wxGlum 2.2s linear both; }
.wx-fig.opening .wxf-smile{ animation:wxSmileIn 2.2s linear both; }
.wx-fig.opening .wxf-arm-was{ animation:wxArmGone 2.2s linear both; }
.wx-fig.opening .wxf-brolly{ transform-origin:92px 70px; animation:wxBrollyUp 2.2s ease-out both; }
.wx-fig.opening .wxf-canopy{ transform-origin:92px 26px; animation:wxCanopyOpen 2.2s ease-out both; }
@keyframes wxWet{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:.95; transform:none; } }
@keyframes wxGlum{ 0%, 70%{ opacity:1; } 76%, 100%{ opacity:0; } }
@keyframes wxSmileIn{ 0%, 72%{ opacity:0; } 80%, 100%{ opacity:1; } }
@keyframes wxArmGone{ 0%, 40%{ opacity:1; } 46%, 100%{ opacity:0; } }
@keyframes wxBrollyUp{ 0%, 40%{ opacity:0; transform:translateY(34px) scale(.6); } 46%{ opacity:1; } 62%, 100%{ opacity:1; transform:none; } }
@keyframes wxCanopyOpen{ 0%, 58%{ transform:scale(.12, .9); } 72%{ transform:scale(1.06, 1); } 80%, 100%{ transform:none; } }
/* the rain stops: the umbrella folds and goes down, the arm comes back, a smile */
.wx-fig .wxf-brolly-off{ opacity:0; }
.wx-fig.closing .wxf-brolly-off{ transform-origin:92px 70px; animation:wxBrollyDown 1.9s ease-in both; }
.wx-fig.closing .wxf-brolly-off .wxf-canopy{ transform-origin:92px 26px; animation:wxCanopyFold 1.9s ease-in both; }
.wx-fig.closing .wxf-arm-r{ animation:wxArmBack 1.9s linear both; }
.wx-fig.closing .wxf-was{ animation:wxGlum 1.9s linear both; }
.wx-fig.closing .wxf-smile{ animation:wxSmileIn 1.9s linear both; }
@keyframes wxBrollyDown{ 0%, 35%{ opacity:1; transform:none; } 60%{ opacity:1; transform:translateY(30px) scale(.6); } 66%, 100%{ opacity:0; transform:translateY(34px) scale(.6); } }
@keyframes wxCanopyFold{ 0%{ transform:none; } 35%, 100%{ transform:scale(.12, .9); } }
@keyframes wxArmBack{ 0%, 62%{ opacity:0; } 68%, 100%{ opacity:1; } }