/* ══════════════════════════════════════════════════════════════════
   FireClouds Console — SKYWATCH PROTOCOL
   An emergency screen has one job: say what state we are in, loudly,
   before the reader has finished looking. Each level carries its own
   colour set through CSS variables (--lc line, --lbg wash, --lbd
   border, --ldeep text), so one markup shape covers all four levels
   and nothing is hard-coded per state.
   ══════════════════════════════════════════════════════════════════ */

/* ── who may deploy ────────────────────────────────────────────── */
.bsky-auth{display:flex;align-items:flex-start;gap:11px;padding:11px 14px;border-radius:6px;margin-bottom:14px;
  background:#FFF7E6;border:1px solid #F5CD47;color:#533F04;font-size:13px;line-height:1.5}
.bsky-auth.ok{background:#E7F7EC;border-color:#7EE2B8;color:#164B35}
.bsky-auth svg{width:20px;height:20px;flex:none;margin-top:1px}
.bsky-auth-sub{font-size:11.5px;opacity:.8;margin-top:3px}
.bsky-auth-sub code{background:rgba(255,255,255,.7);border-radius:3px;padding:1px 5px;font-family:var(--mono);font-size:11px}

/* ── the status banner ─────────────────────────────────────────── */
.bsky-banner{display:flex;align-items:stretch;gap:16px;padding:18px 20px;border-radius:8px;margin-bottom:16px;
  background:var(--lbg);border:1px solid var(--lbd);border-left:6px solid var(--lc);
  box-shadow:0 2px 8px rgba(9,30,66,.09)}
.bsky-banner.lv-red{box-shadow:0 3px 16px rgba(202,53,33,.22)}
.bsky-banner-ic{width:58px;height:58px;border-radius:50%;background:var(--lc);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(9,30,66,.2)}
.bsky-banner.lv-red .bsky-banner-ic{animation:bskyPulseIc 1.9s ease-in-out infinite}
@keyframes bskyPulseIc{0%,100%{box-shadow:0 3px 10px rgba(202,53,33,.35)}50%{box-shadow:0 3px 22px rgba(202,53,33,.75)}}
.bsky-banner-body{flex:1;min-width:0}
.bsky-cur{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:20px;font-weight:800;
  letter-spacing:-.3px;color:var(--ldeep)}
.bsky-tag{background:var(--lc);color:#fff;font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  padding:3px 9px;border-radius:4px}
.bsky-livedot{font-size:10px;font-weight:800;letter-spacing:.7px;color:var(--lc);
  border:1px solid var(--lc);border-radius:4px;padding:2px 7px;animation:bskyBlink 1.6s ease-in-out infinite}
@keyframes bskyBlink{0%,100%{opacity:1}50%{opacity:.35}}
.bsky-cur-sub{font-size:13.5px;color:var(--ldeep);opacity:.82;margin-top:5px;line-height:1.5;max-width:70ch}
.bsky-note{margin-top:9px;background:rgba(255,255,255,.75);border:1px solid var(--lbd);border-radius:5px;
  padding:7px 10px;font-size:12.5px;color:var(--ldeep);font-weight:600}
.bsky-since{margin-top:8px;font-size:11.5px;color:var(--ldeep);opacity:.62}

/* countdown */
.bsky-timer{flex:none;width:196px;border-left:1px solid var(--lbd);padding-left:16px;
  display:flex;flex-direction:column;justify-content:center;gap:4px}
.bsky-timer-l{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--ldeep);opacity:.66}
.bsky-timer-v{font-size:25px;font-weight:800;letter-spacing:-.7px;color:var(--lc);font-variant-numeric:tabular-nums}
.bsky-timer-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.75);overflow:hidden;margin-top:3px}
.bsky-timer-bar i{display:block;height:100%;background:var(--lc);border-radius:3px;transition:width 1s linear}
.bsky-timer-s{font-size:10.5px;color:var(--ldeep);opacity:.62;line-height:1.4}
.bsky-timer.off{color:var(--n300);border-left-color:var(--n30)}
.bsky-timer.off .bsky-timer-l{color:var(--n300);opacity:1}
.bsky-timer.off .bsky-timer-s{color:var(--n200);opacity:1}

/* ── level cards ───────────────────────────────────────────────── */
.bsky-deploy{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:12px}
.bsky-card{position:relative;display:flex;flex-direction:column;gap:5px;text-align:left;cursor:pointer;
  padding:13px 14px 14px;border-radius:7px;background:var(--lbg);border:1.5px solid var(--lbd);
  color:var(--ldeep);font:inherit;transition:transform .1s ease,box-shadow .12s ease,border-color .12s}
.bsky-card:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 18px rgba(9,30,66,.16);border-color:var(--lc)}
.bsky-card:disabled{cursor:not-allowed;opacity:.55}
.bsky-card.on{border-color:var(--lc);border-width:2px;box-shadow:0 0 0 3px color-mix(in srgb,var(--lc) 18%,transparent),0 4px 14px rgba(9,30,66,.14)}
.bsky-card-top{display:flex;align-items:center;gap:7px}
.bsky-card-top .bsky-ic{color:var(--lc);flex:none}
.bsky-card-l{font-size:16px;font-weight:800;letter-spacing:-.2px;color:var(--ldeep)}
.bsky-card-live{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.6px;color:var(--lc)}
.bsky-card-tag{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--lc)}
.bsky-card-dur{font-size:11px;color:var(--ldeep);opacity:.65;line-height:1.4}
.bsky-card-go{margin-top:6px;align-self:flex-start;background:var(--lc);color:#fff;font-size:11.5px;font-weight:700;
  padding:4px 12px;border-radius:5px}
.bsky-card:disabled .bsky-card-go{background:var(--n40)}

/* note row */
.bsky-noterow{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.bsky-noterow input{flex:1;min-width:220px;height:36px;border:1px solid var(--n30);border-radius:5px;
  padding:0 12px;font:inherit;font-size:13px;background:var(--n0);color:var(--n800)}
.bsky-noterow input:focus{outline:none;border-color:var(--b400);box-shadow:0 0 0 1px var(--b400) inset}
.bsky-noterow .btn{height:36px;line-height:34px}

/* ── shared gadget spacing ─────────────────────────────────────── */
.bsky-gad{margin-top:16px}
.bsky-lz{display:inline-flex;align-items:center;gap:5px;background:var(--lbg);color:var(--ldeep);
  border:1px solid var(--lbd);border-radius:4px;padding:3px 9px;font-size:11.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.4px}
.bsky-lz .bsky-ic{color:var(--lc)}

/* ── SOP steps ─────────────────────────────────────────────────── */
.bsky-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.bsky-step{display:flex;gap:10px;padding:12px 13px;border-radius:6px;background:var(--n0);
  border:1px solid var(--n30);border-top:3px solid var(--sc)}
.bsky-step-n{width:24px;height:24px;border-radius:50%;background:var(--sc);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.bsky-step-h{font-size:12px;font-weight:800;letter-spacing:.7px;color:var(--sc);margin-bottom:3px}
.bsky-step-b{font-size:12px;line-height:1.5;color:var(--n400)}
.bsky-rule{margin-top:12px;padding:11px 14px;border-radius:6px;background:#FFEBE6;border:1px solid #FF9C8F;
  color:#601E16;font-size:13px;font-weight:600;line-height:1.5}

/* ── history ───────────────────────────────────────────────────── */
.bsky-hist{display:flex;flex-direction:column}
.bsky-hrow{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--n20);font-size:12.5px}
.bsky-hrow:last-child{border-bottom:none}
.bsky-hic{width:26px;height:26px;border-radius:50%;background:var(--lbg);color:var(--lc);flex:none;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--lc)}
.bsky-hl{font-weight:800;color:var(--ldeep);min-width:58px}
.bsky-hm{flex:1;min-width:0;color:var(--n400);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bsky-ht{color:var(--n200);font-size:11.5px;white-space:nowrap}

/* ── rider kit ─────────────────────────────────────────────────── */
.bsky-kit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bsky-kit{border:1px solid var(--n30);border-top:3px solid var(--kc);border-radius:6px;padding:12px 14px;background:var(--n0)}
.bsky-kit-h{font-size:12px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--kc);margin-bottom:7px}
.bsky-kit ul{margin:0;padding-left:16px}
.bsky-kit li{font-size:12.5px;line-height:1.6;color:var(--n800);margin-bottom:4px}
.bsky-kit li span{color:var(--n300)}

/* ── playbook ──────────────────────────────────────────────────── */
.bsky-play-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bsky-play{border:1px solid var(--n30);border-left:4px solid var(--pc);border-radius:6px;padding:12px 14px;background:var(--n0)}
.bsky-play-h{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;color:var(--pc);margin-bottom:6px}
.bsky-play-lv{font-size:10px;font-weight:800;letter-spacing:.6px;background:var(--pc);color:#fff;padding:2px 7px;border-radius:3px}
.bsky-play ul{margin:0;padding-left:16px}
.bsky-play li{font-size:12.5px;line-height:1.6;color:var(--n400);margin-bottom:4px}

/* ── prep checklist ────────────────────────────────────────────── */
.bsky-check{margin:0;padding-left:18px}
.bsky-check li{font-size:12.5px;line-height:1.7;color:var(--n400);margin-bottom:4px}

/* ── confirm dialog extras ─────────────────────────────────────── */
.bsky-cf-note{margin-top:10px;font-size:12.5px;color:var(--n400);background:var(--n10);border-radius:5px;padding:8px 11px;line-height:1.5}
.bsky-cf-warn{margin-top:10px;font-size:12.5px;font-weight:700;color:#601E16;background:#FFEBE6;
  border:1px solid #FF9C8F;border-radius:5px;padding:8px 11px;line-height:1.5}

/* ── responsive ────────────────────────────────────────────────── */
@media(max-width:1100px){
  .bsky-deploy{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bsky-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bsky-kit-grid{grid-template-columns:1fr}
  .bsky-play-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .bsky-banner{flex-direction:column;gap:12px;padding:14px}
  .bsky-banner-ic{width:46px;height:46px}
  .bsky-cur{font-size:17px}
  .bsky-timer{width:100%;border-left:none;border-top:1px solid var(--lbd);padding-left:0;padding-top:11px}
  .bsky-deploy{grid-template-columns:1fr}
  .bsky-steps{grid-template-columns:1fr}
  .bsky-hrow{flex-wrap:wrap}
  .bsky-ht{width:100%;padding-left:36px}
}

/* ── partial authority (can deploy Green/Amber, not Red) ───────── */
.bsky-auth.part{background:var(--b50);border-color:#B3D4FF;color:#09326C}
.bsky-auth-red{font-weight:700;color:#AE2E24}
.bsky-auth.part .bsky-auth-red{color:#AE2E24}

/* ── rain-surge strip inside the banner ────────────────────────── */
.bsky-surge{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;padding:7px 11px;
  border-radius:5px;background:rgba(255,255,255,.72);border:1px dashed var(--lbd);font-size:12px;color:var(--ldeep)}
.bsky-surge.on{border-style:solid;background:rgba(255,255,255,.9)}
.bsky-surge-ic{font-size:14px;line-height:1}
.bsky-surge-t{flex:1;min-width:150px;line-height:1.4}
.bsky-surge-p{font-size:11px;font-weight:800;letter-spacing:.3px;padding:2px 8px;border-radius:11px;white-space:nowrap}
.bsky-surge-p.y{background:#0C66E4;color:#fff}
.bsky-surge-p.n{background:var(--n20);color:var(--n300)}
.bsky-surge-l{font-size:11px;font-weight:700;white-space:nowrap}

/* ── locked level cards ────────────────────────────────────────── */
.bsky-card.locked{background:var(--n10);border-color:var(--n30);opacity:1}
.bsky-card.locked .bsky-card-l,.bsky-card.locked .bsky-card-tag,.bsky-card.locked .bsky-ic{color:var(--n300)}
.bsky-card.locked .bsky-card-dur,.bsky-card.locked .bsky-card-x{color:var(--n200)}
.bsky-card.locked .bsky-card-go{background:var(--n20);color:var(--n300);font-weight:700}
.bsky-card-lock{margin-left:auto;font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  background:var(--lc);color:#fff;padding:2px 7px;border-radius:3px}
.bsky-card.locked .bsky-card-lock{background:var(--n40)}
.bsky-card-x{font-size:11px;font-weight:700;color:var(--lc);line-height:1.4}
.bsky-noterow input:disabled{background:var(--n10);color:var(--n200)}

/* ── confirm dialog: surge callout ─────────────────────────────── */
.bsky-cf-surge{margin-top:10px;font-size:12.5px;color:#09326C;background:var(--b50);
  border:1px solid #B3D4FF;border-radius:5px;padding:8px 11px;line-height:1.5}

/* ══════════════════════════════════════════════════════════════════
   LIVE WEATHER PANEL  (js/pages/weather.js)
   ══════════════════════════════════════════════════════════════════ */
.wx-card{background:var(--n0);border:1px solid var(--n40);border-radius:8px;padding:15px 17px;margin-bottom:16px;
  box-shadow:0 1px 3px rgba(9,30,66,.08)}
.wx-card.wx-load{display:flex;align-items:center;gap:10px;color:var(--n300);font-size:13px}
.wx-card.wx-err{background:#FFF7E6;border-color:#F5CD47;color:#533F04}
.wx-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.wx-title{font-size:15px;font-weight:700;color:var(--n900);letter-spacing:-.2px}
.wx-title span{color:var(--n200);font-weight:500}
.wx-head .btn{margin-left:auto}

/* current conditions */
.wx-now{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:13px;border-bottom:1px solid var(--n20)}
.wx-now-ic{font-size:40px;line-height:1;flex:none}
.wx-now-t{min-width:150px}
.wx-now-temp{font-size:30px;font-weight:800;letter-spacing:-1px;color:var(--n900);display:flex;align-items:baseline;gap:9px}
.wx-now-lbl{font-size:14px;font-weight:600;color:var(--n400);letter-spacing:0}
.wx-now-sub{font-size:11.5px;color:var(--n300);margin-top:2px}
.wx-metrics{display:flex;gap:9px;margin-left:auto;flex-wrap:wrap}
.wx-metric{background:var(--n10);border:1px solid var(--n20);border-radius:6px;padding:7px 12px;min-width:96px}
.wx-metric-l{font-size:9.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--n300)}
.wx-metric-v{font-size:16px;font-weight:700;color:var(--n900);margin-top:2px}
.wx-metric-s{font-size:10.5px;color:var(--n200);margin-top:1px}

/* the advisory */
.wx-advice{display:flex;align-items:center;gap:11px;margin:13px 0;padding:11px 13px;border-radius:6px;
  border:1px solid var(--n30);background:var(--n10)}
.wx-advice-ic{font-size:20px;line-height:1;flex:none}
.wx-advice-t{flex:1;min-width:0;font-size:13.5px;color:var(--n800)}
.wx-advice-w{font-size:11.5px;color:var(--n300);margin-top:2px;line-height:1.45}
.wx-advice .btn{flex:none}
.wx-advice.lv-green{background:#E7F7EC;border-color:#7EE2B8;color:#164B35}
.wx-advice.lv-amber{background:#FFF7E6;border-color:#F5CD47;color:#533F04}
.wx-advice.lv-red{background:#FFEBE6;border-color:#FF9C8F;color:#601E16}
.wx-advice.lv-red .wx-advice-w,.wx-advice.lv-amber .wx-advice-w,.wx-advice.lv-green .wx-advice-w{color:inherit;opacity:.78}
.wx-advice.lv-calm{background:#E7F7EC;border-color:#ABF5D1;color:#164B35}

/* section labels */
.wx-sec{font-size:10.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--n300);
  margin:14px 0 7px}
.wx-sec span{font-weight:600;letter-spacing:0;text-transform:none;color:var(--n200)}

/* hourly */
.wx-hours{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px}
.wx-h{text-align:center;min-width:0;cursor:default;border-radius:5px;padding:3px 1px}
.wx-h:hover{background:var(--n10)}
.wx-h-mm{font-size:9.5px;font-weight:800;color:var(--b500);height:12px}
.wx-h-bar{height:52px;display:flex;align-items:flex-end;justify-content:center}
.wx-h-bar i{display:block;width:60%;border-radius:3px 3px 0 0;background:var(--n30);min-height:2px}
.wx-h-bar i.g{background:#4C9AFF}.wx-h-bar i.a{background:#E2B203}.wx-h-bar i.r{background:#CA3521}
.wx-h-ic{font-size:13px;margin-top:3px}
.wx-h-t{font-size:9.5px;color:var(--n300);margin-top:1px;white-space:nowrap}

/* daily */
.wx-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.wx-d{text-align:center;border:1px solid var(--n30);border-radius:6px;padding:8px 4px;background:var(--n0)}
.wx-d.today{border-color:var(--b400);background:var(--b50)}
.wx-d-n{font-size:10.5px;font-weight:700;color:var(--n400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-d-ic{font-size:19px;margin:3px 0}
.wx-d-mm{font-size:11px;font-weight:800;color:var(--n300)}
.wx-d-mm.g{color:#0C66E4}.wx-d-mm.a{color:#B7791F}.wx-d-mm.r{color:#CA3521}
.wx-d-t{font-size:11.5px;font-weight:700;color:var(--n800);margin-top:2px}
.wx-d-t span{font-weight:500;color:var(--n200)}

/* map */
.wx-map-wrap{margin-top:14px}
.wx-map{height:300px;border-radius:7px;border:1px solid var(--n30);background:var(--n10);z-index:1}
.wx-map-note{font-size:11.5px;color:var(--n300);margin-top:7px;line-height:1.5}
.wx-map-note code{background:var(--n10);border:1px solid var(--n30);border-radius:3px;padding:1px 5px;
  font-family:var(--mono);font-size:10.5px}
.wx-riders{margin-top:4px;font-size:11.5px;color:var(--n400)}
.wx-dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:-1px;margin-right:2px}
/* Leaflet sits under the console's modals and menus */
.leaflet-pane,.leaflet-top,.leaflet-bottom{z-index:2}

@media(max-width:900px){
  .wx-metrics{margin-left:0;width:100%}
  .wx-hours{grid-template-columns:repeat(6,minmax(0,1fr))}
  .wx-days{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wx-map{height:230px}
  .wx-now-temp{font-size:26px}
}

/* ══════════════════════════════════════════════════════════════════
   ANIMATED WEATHER ICONS
   Drawn as inline SVG so they can actually move. Colour comes from
   here, not from the markup, so the icons follow the panel's palette.
   Motion is confined to .wx-ic-anim — the 12-hour strip renders the
   same icons static, because at 18px the movement is invisible and
   twelve animating SVGs is a pointless drain.
   ══════════════════════════════════════════════════════════════════ */
.wx-ic{display:block;overflow:visible}
.wx-ic line,.wx-ic circle,.wx-ic path{vector-effect:non-scaling-stroke}

/* sun */
.wx-ic .wx-disc{fill:#FFAB00;stroke:none}
.wx-ic .wx-rays line{stroke:#FFAB00;stroke-width:2.4;stroke-linecap:round}
.wx-ic-anim .wx-rays{transform-origin:center;animation:wxSpin 18s linear infinite}
.wx-ic-anim .wx-disc{transform-origin:center;animation:wxGlow 3.2s ease-in-out infinite}
.wx-fair .wx-disc,.wx-partly .wx-disc{r:7}

/* cloud */
.wx-ic .wx-cloud{fill:#B3C1D4;stroke:none}
.wx-ic .wx-cloud-back{fill:#D3DBE6}
.wx-cloudy .wx-cloud{fill:#9FB0C6}
.wx-ic-anim .wx-cloud{animation:wxDrift 6.5s ease-in-out infinite}
.wx-ic-anim .wx-cloud-back{animation:wxDrift 8.5s ease-in-out infinite reverse}
.wx-rain .wx-cloud,.wx-heavyrain .wx-cloud,.wx-thunder .wx-cloud{fill:#8496AE}

/* rain */
.wx-ic .wx-drops line{stroke:#4C9AFF;stroke-width:2.6;stroke-linecap:round}
.wx-heavyrain .wx-drops line{stroke:#0C66E4;stroke-width:3}
.wx-ic-anim .wx-drops line{animation:wxFall 1.05s linear infinite;opacity:0}
.wx-ic-anim .wx-drops line:nth-child(2){animation-delay:.21s}
.wx-ic-anim .wx-drops line:nth-child(3){animation-delay:.42s}
.wx-ic-anim .wx-drops line:nth-child(4){animation-delay:.63s}
.wx-ic-anim .wx-drops line:nth-child(5){animation-delay:.84s}
.wx-heavyrain.wx-ic-anim .wx-drops line{animation-duration:.72s}
.wx-lightrain.wx-ic-anim .wx-drops line{animation-duration:1.5s}

/* thunder */
.wx-ic .wx-bolt{fill:#FFAB00;stroke:none}
.wx-ic-anim .wx-bolt{animation:wxFlash 2.6s steps(1) infinite}

/* fog */
.wx-ic .wx-fog line{stroke:#B3C1D4;stroke-width:2.6;stroke-linecap:round}
.wx-ic-anim .wx-fog line{animation:wxFogSlide 4.2s ease-in-out infinite}
.wx-ic-anim .wx-fog line:nth-child(2){animation-delay:.6s}
.wx-ic-anim .wx-fog line:nth-child(3){animation-delay:1.2s}

/* snow / sleet */
.wx-ic .wx-flakes circle{fill:#CCE0FF}
.wx-ic-anim .wx-flakes circle{animation:wxFall 2.4s linear infinite;opacity:0}
.wx-ic-anim .wx-flakes circle:nth-child(2){animation-delay:.8s}
.wx-ic-anim .wx-flakes circle:nth-child(3){animation-delay:1.6s}

@keyframes wxSpin{to{transform:rotate(360deg)}}
@keyframes wxGlow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.07);opacity:.9}}
@keyframes wxDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(2.2px)}}
@keyframes wxFall{0%{transform:translateY(-6px);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(9px);opacity:0}}
@keyframes wxFlash{0%,88%,100%{opacity:.25}90%{opacity:1}93%{opacity:.3}95%{opacity:1}}
@keyframes wxFogSlide{0%,100%{transform:translateX(-2.5px);opacity:.55}50%{transform:translateX(2.5px);opacity:1}}

/* ── live affordances ──────────────────────────────────────────── */
.wx-live{width:8px;height:8px;border-radius:50%;background:var(--g400);display:inline-block;
  margin-right:7px;vertical-align:1px;position:relative;flex:none}
.wx-live::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--g400);
  animation:wxPing 2.2s cubic-bezier(0,0,.2,1) infinite}
@keyframes wxPing{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(2.8);opacity:0}}
.wx-title{display:flex;align-items:center}

.wx-now-ic{flex:none;display:flex;align-items:center;justify-content:center;width:66px;height:66px}
.wx-h-ic{display:flex;justify-content:center;margin-top:3px;opacity:.9}
.wx-h-ic .wx-ic{width:18px;height:18px}
.wx-d-ic{display:flex;justify-content:center;margin:3px 0}

/* current hour in the 12-hour strip */
.wx-h.now{background:var(--b50);box-shadow:inset 0 0 0 1px var(--b75)}
.wx-h.now .wx-h-t{color:var(--b500);font-weight:800}

/* faint rain streaks behind the current-conditions block while it rains */
.wx-now{position:relative;overflow:hidden;border-radius:6px}
.wx-now.is-raining::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;
  background-image:repeating-linear-gradient(74deg,#0C66E4 0 1px,transparent 1px 9px);
  background-size:auto 22px;animation:wxStreak 1.1s linear infinite}
@keyframes wxStreak{from{background-position:0 0}to{background-position:-7px 22px}}

/* refresh button spins while it works */
#wxRefresh.spinning{opacity:.75}
#wxRefresh.spinning::before{content:"";display:inline-block;width:11px;height:11px;margin-right:5px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  vertical-align:-1px;animation:wxSpin .7s linear infinite}

/* Motion is decoration here — turn all of it off when asked. */
@media (prefers-reduced-motion: reduce){
  .wx-ic-anim .wx-rays,.wx-ic-anim .wx-disc,.wx-ic-anim .wx-cloud,.wx-ic-anim .wx-cloud-back,
  .wx-ic-anim .wx-drops line,.wx-ic-anim .wx-bolt,.wx-ic-anim .wx-fog line,.wx-ic-anim .wx-flakes circle,
  .wx-live::after,.wx-now.is-raining::before,#wxRefresh.spinning::before{animation:none}
  .wx-ic-anim .wx-drops line,.wx-ic-anim .wx-flakes circle{opacity:1}
}

/* ── rain overlay controls on the map ──────────────────────────── */
.wx-rain-toggle{background:var(--n0);border:1px solid var(--n40);border-radius:5px;padding:5px 9px;
  font:inherit;font-size:11.5px;font-weight:700;color:var(--n300);cursor:pointer;box-shadow:0 1px 3px rgba(9,30,66,.2)}
.wx-rain-toggle:hover{border-color:var(--b400);color:var(--b500)}
.wx-rain-toggle.on{background:var(--b400);border-color:var(--b400);color:#fff}
.wx-legend{background:rgba(255,255,255,.94);border:1px solid var(--n30);border-radius:5px;padding:4px 7px;
  display:flex;align-items:center;gap:3px;box-shadow:0 1px 3px rgba(9,30,66,.2)}
.wx-legend i{width:15px;height:9px;display:block;border-radius:1px}
.wx-legend-t{font-size:10px;font-weight:800;color:var(--n400);margin-right:3px}
.wx-legend-l{font-size:9.5px;color:var(--n300);margin-left:4px;white-space:nowrap}
.wx-rain-tiles{mix-blend-mode:multiply}

/* ── the quiet control ─────────────────────────────────────────────
   Deliberately anonymous: a small dot in the map corner, no caption,
   no tooltip naming what it does. It only renders for the CEO, and
   opening it still costs a T-PIN. */
.wx-quiet{width:26px;height:26px;border-radius:50%;border:1px solid var(--n40);background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  box-shadow:0 1px 3px rgba(9,30,66,.22);transition:border-color .12s,background .12s}
.wx-quiet:hover{border-color:var(--n200);background:#fff}
.wx-quiet-dot{width:7px;height:7px;border-radius:50%;background:var(--n40);transition:background .12s}
.wx-quiet:hover .wx-quiet-dot{background:var(--n200)}
.wx-quiet.on{border-color:var(--b400);background:var(--b50)}
.wx-quiet.on .wx-quiet-dot{background:var(--b400);box-shadow:0 0 0 3px rgba(12,102,228,.2)}

/* a live rider gently pulses; a stale one deliberately does not */
.wx-rider-live{animation:wxRiderPulse 2.4s ease-in-out infinite}
@keyframes wxRiderPulse{0%,100%{opacity:1}50%{opacity:.62}}

/* ── map polish ────────────────────────────────────────────────── */
.wx-map{box-shadow:inset 0 0 0 1px rgba(9,30,66,.05)}
.wx-map .leaflet-control-zoom a{border-radius:4px;color:var(--n400);border-color:var(--n30);font-weight:600}
.wx-map .leaflet-control-zoom a:hover{color:var(--b500);background:var(--b50)}
.wx-map .leaflet-tooltip{border-radius:5px;border:1px solid var(--n30);box-shadow:0 3px 10px rgba(9,30,66,.18);
  font-size:11.5px;color:var(--n800);padding:5px 8px}
.wx-map .leaflet-tooltip b{color:var(--n900)}
.wx-shop-pin{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:var(--b400);color:#fff;font-size:13px;border:2.5px solid #fff;box-shadow:0 2px 7px rgba(9,30,66,.34)}

@media (prefers-reduced-motion: reduce){ .wx-rider-live{animation:none} }

/* ── base-layer switcher ───────────────────────────────────────── */
.wx-bases{display:flex;background:rgba(255,255,255,.94);border:1px solid var(--n40);border-radius:6px;
  overflow:hidden;box-shadow:0 1px 4px rgba(9,30,66,.22)}
.wx-base{border:none;background:transparent;padding:0 10px;height:28px;font:inherit;font-size:11.5px;
  font-weight:700;color:var(--n300);cursor:pointer;border-right:1px solid var(--n30)}
.wx-base:last-child{border-right:none}
.wx-base:hover{background:var(--n10);color:var(--n800)}
.wx-base.on{background:var(--b400);color:#fff}

/* Attribution: required by every tile source and by MET, so it cannot be
   removed — but it belongs in the map corner as small grey text, not as a
   line of its own under the card. */
.wx-map .leaflet-control-attribution{background:rgba(255,255,255,.78);font-size:9.5px;color:var(--n200);
  padding:1px 6px;border-radius:4px 0 0 0}
.wx-map .leaflet-control-attribution a{color:var(--n300)}
.wx-map .leaflet-control-scale-line{font-size:9.5px;color:var(--n400);border-color:var(--n40);
  background:rgba(255,255,255,.78)}

/* satellite is dark — lift the controls so they stay legible on it */
.wx-map .leaflet-control-zoom a,.wx-bases,.wx-quiet,.wx-rain-toggle,.wx-legend{backdrop-filter:blur(2px)}

/* Base switcher sits above the zoom buttons, with a little air between them
   so the two groups read as separate controls rather than one column. */
.wx-map .leaflet-top.leaflet-left .wx-bases{margin-bottom:8px}
.wx-map .leaflet-control-zoom{border:1px solid var(--n40);border-radius:6px;overflow:hidden;
  box-shadow:0 1px 4px rgba(9,30,66,.22)}
.wx-map .leaflet-control-zoom a{width:28px;height:28px;line-height:28px;border:none;
  border-bottom:1px solid var(--n30);background:rgba(255,255,255,.94)}
.wx-map .leaflet-control-zoom a:last-child{border-bottom:none}