/* WEATHER V3 2026-09-28 · space-age rebuild of /weather, matches Crew Weather v3.
   Layer over weather-styles.css. Every ID and hook the app uses is untouched; this file only restyles.
   Design input: ChatGPT (Space → Ground → Decision architecture, one map frame, one chart shell),
   Gemini (orbital hero artwork). Tokens: AGI-LOGS/THEME-V3.md */

:root{
  --bg:#08090b;--bg2:#0b0c0f;--bg3:#101216;
  --surface:#101216;--raised:#171a20;--hair:rgba(255,255,255,.12);--hair2:rgba(255,255,255,.14);
  --card:rgba(255,255,255,.055);--border:rgba(255,255,255,.12);--radius:16px;
  --text:#f4f3ef;--text1:#f4f3ef;--text2:#d3d6db;--text3:#9aa1ab;--text4:#9aa0ac;
  --gold:#d4a853;--gold-soft:#e5c77b;--gold-bg:rgba(212,168,83,.1);--gold-border:rgba(212,168,83,.3);
  --ice:#a9c8d8;--snow:#cfe2ec;
  --go:#34d399;--caution:#fbbf24;--nogo:#f87171;
  --green:#34d399;--yellow:#fbbf24;--red:#f87171;--cyan:#a9c8d8;
  --display:'Inter',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --accent:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
html{background:var(--bg);overflow-x:hidden}
body{background:var(--bg)!important;font-family:var(--body);color:var(--text);overflow-x:clip}
::selection{background:rgba(212,168,83,.35);color:#fff}

/* ───────── HERO ───────── */
.wx3-hero{position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--hair)}
.wx3-hero .hero-bg img{object-position:62% 45%;filter:saturate(.9) contrast(1.05)}
.wx3-hero .hero-overlay{background:
  radial-gradient(120% 90% at 78% 30%,rgba(8,9,11,.25) 0%,rgba(8,9,11,.7) 55%,var(--bg) 100%),
  linear-gradient(90deg,rgba(8,9,11,.92) 0%,rgba(8,9,11,.55) 48%,rgba(8,9,11,.35) 100%),
  linear-gradient(180deg,rgba(8,9,11,0) 60%,var(--bg) 100%)!important}
.wx3-grid{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(212,168,83,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(212,168,83,.05) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(80% 70% at 70% 40%,#000 0%,transparent 80%);mask-image:radial-gradient(80% 70% at 70% 40%,#000 0%,transparent 80%)}
.wx3-in{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:30px 28px 44px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:40px;align-items:start}
.wx3-head{min-width:0;display:flex;flex-direction:column;gap:14px;padding-top:4px}

/* location search, at the very top */
.wx3-head .controls{max-width:none!important;margin:0 0 6px!important;padding:0!important;width:100%}
.wx3-head .loc-bar{display:flex;gap:8px;align-items:stretch}
.wx3-head .search-wrap{flex:1;min-width:0}
.wx3-head .search-in{height:52px!important;border-radius:14px!important;background:rgba(8,9,11,.66)!important;border:1px solid var(--hair2)!important;color:#fff!important;font:600 16px/1 var(--body)!important;padding-left:16px!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.wx3-head .search-in:focus{border-color:var(--gold)!important;box-shadow:0 0 0 3px rgba(212,168,83,.18)!important;outline:0}
.wx3-head .map-btn,.wx3-head .go-btn{height:52px!important;border-radius:14px!important}
.wx3-head .map-btn{width:52px;background:rgba(8,9,11,.66)!important;border:1px solid var(--hair2)!important;color:var(--text2)!important}
.wx3-head .go-btn{padding:0 22px!important;background:linear-gradient(135deg,var(--gold-soft),var(--gold) 55%,#b8922f)!important;color:#0b0c0e!important;font:700 14px/1 var(--display)!important;letter-spacing:.08em!important;border:0!important}
.wx3-head .favorites-row:empty{display:none}

.wx3-kicker{display:inline-flex;align-self:flex-start;align-items:center;gap:10px;padding:7px 14px 7px 12px;border-radius:999px;border:1px solid var(--hair2);background:rgba(8,9,11,.5);font:500 11.5px/1 var(--mono);letter-spacing:.08em;color:var(--text2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.wx3-kicker i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.wx3-kicker b{font-weight:500;color:var(--text3)}
.wx3-head .hero-label{margin:6px 0 0!important;font:600 12px/1.3 var(--mono)!important;letter-spacing:.2em!important;color:var(--gold)!important;text-align:left!important;text-shadow:none!important}
.wx3-place{font:600 clamp(40px,5.4vw,76px)/.98 var(--display);letter-spacing:-.035em;color:#fff;text-wrap:balance}
.wx3-place .it{font-family:var(--body);font-style:normal;font-weight:inherit;letter-spacing:-.01em;color:var(--gold-soft)}
.wx3-lede{margin:4px 0 0;max-width:520px;font:400 16px/1.6 var(--body);color:var(--text2)}
.wx3-lede b{font-weight:600;color:#fff}

/* the call card */
.wx3-call{--lvc:var(--text3);position:relative;max-width:none!important;margin:0!important;padding:22px 22px 18px!important;text-align:left!important;border-radius:26px;
  background:linear-gradient(180deg,rgba(23,26,32,.9),rgba(10,11,14,.94));border:1px solid var(--hair2);
  box-shadow:0 50px 120px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.12);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);min-width:0}
.wx3-call::before{content:'';position:absolute;left:24px;right:24px;top:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--lvc),transparent);opacity:.9}
.wx3-call[data-lv=go]{--lvc:var(--go)}.wx3-call[data-lv=caution]{--lvc:var(--caution)}.wx3-call[data-lv=nogo]{--lvc:var(--nogo)}
.wx3-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.wx3-eyebrow{display:inline-flex;align-items:center;gap:9px;font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text2)}
.wx3-live{width:8px;height:8px;border-radius:50%;background:var(--lvc);box-shadow:0 0 0 0 var(--lvc);animation:wx3pulse 2.4s infinite}
@keyframes wx3pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--lvc) 60%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.wx3-call .fi-timestamp{margin:0!important;font:500 11px/1 var(--mono)!important;color:var(--text3)!important;text-align:right}
.wx3-main{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;margin:18px 0 14px}
.wx3-word{font:700 clamp(58px,7vw,92px)/.9 var(--display);letter-spacing:-.045em;color:var(--lvc);text-shadow:0 0 44px color-mix(in srgb,var(--lvc) 35%,transparent);min-height:.9em}
.wx3-call[data-lv=load] .wx3-word{width:180px;height:72px;border-radius:14px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04));background-size:200% 100%;animation:wx3shim 1.4s infinite}
@keyframes wx3shim{to{background-position:-200% 0}}
.wx3-call .hero-sub{margin:10px 0 0!important;font:500 15px/1.35 var(--body)!important;color:var(--text2)!important;text-align:left!important}
.wx3-call .hero-title{display:none!important}
.wx3-call .ring{width:76px!important;height:76px!important;margin:0!important;border-width:2px!important;animation:none!important;box-shadow:0 0 0 6px rgba(255,255,255,.02),0 0 30px -6px var(--rc,transparent)!important}
.wx3-call .ring .ri{font-size:30px!important}
#liveBadge{margin:6px 0 0!important}
.wx3-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:0 0 14px}
.wx3-seg span{height:32px;display:grid;place-items:center;border-radius:9px;font:700 10.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:rgba(244,243,239,.62);background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);transition:all .4s var(--ease)}
.wx3-seg span.on[data-k=go]{color:#03140c;background:var(--go);border-color:var(--go);box-shadow:0 0 26px -6px var(--go)}
.wx3-seg span.on[data-k=caution]{color:#1a1203;background:var(--caution);border-color:var(--caution);box-shadow:0 0 26px -6px var(--caution)}
.wx3-seg span.on[data-k=nogo]{color:#fff;background:#dc4b4b;border-color:var(--nogo);box-shadow:0 0 26px -6px var(--nogo)}
.wx3-call .hero-eta:empty{display:none}
.wx3-call .hero-eta{margin:0 0 12px!important;text-align:left!important}
.wx3-intel{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid var(--hair);margin-bottom:12px}
.wx3-intel .forecast-label{margin:0 0 6px!important;font:600 10.5px/1 var(--mono)!important;letter-spacing:.18em!important;color:var(--gold)!important;text-align:left!important}
.wx3-intel .forecast-writeup{margin:0!important;padding:0!important;background:none!important;border:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;font:400 15px/1.55 var(--body)!important;font-style:normal!important;color:var(--text)!important;text-align:left!important;max-width:none!important}
.wx3-intel .field-intel-blog-link{margin-top:8px!important;text-align:left!important}
.wx3-intel .field-intel-blog-link a{font:600 12px/1 var(--mono)!important;letter-spacing:.04em;color:var(--gold-soft)!important;text-decoration:none}
.wx3-call .strip{display:grid!important;grid-template-columns:auto repeat(4,minmax(0,1fr));gap:0!important;margin:0 0 12px!important;padding:12px 6px!important;border-radius:16px!important;background:rgba(0,0,0,.25)!important;border:1px solid var(--hair)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;max-width:none!important}
.wx3-call .strip-sep{display:none!important}
.wx3-call .strip-temp{padding:0 12px 0 8px;border-right:1px solid var(--hair);display:flex;align-items:baseline;gap:4px}
.wx3-call .strip-val{font:600 34px/1 var(--display)!important;letter-spacing:-.03em;color:#fff!important}
.wx3-call .strip-icon{font-size:20px!important}
.wx3-call .strip-unit{font:500 12px/1 var(--mono)!important;color:var(--text3)!important}
.wx3-call .strip-stat{padding:0 10px;border-left:1px solid var(--hair);min-width:0}
.wx3-call .strip-stat:nth-of-type(2){border-left:0}
.wx3-call .strip-stat-lbl{font:600 11.5px/1 var(--mono)!important;letter-spacing:.09em!important;color:var(--text3)!important;margin-bottom:6px!important}
.wx3-call .strip-stat-val{font:600 14px/1.15 var(--mono)!important;color:#fff!important;white-space:normal!important;overflow-wrap:anywhere}
.wx3-call #workWindow,.wx3-call [data-roads-intel]{max-width:none!important;margin:0 0 10px!important;border-radius:14px!important;background:rgba(0,0,0,.22)!important;border:1px solid var(--hair)!important}
.wx3-badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wx3-badges>*{margin:0!important}
.wx3-call .acc-badge,.wx3-call .agi-badge{font:500 11px/1.3 var(--mono)!important;color:var(--text3)!important;text-align:left!important}
.wx3-call .acc-badge:empty,.wx3-call .agi-badge:empty{display:none}

/* ───────── SPACE → GROUND rail ───────── */
.wx3-s2g{max-width:1240px;margin:0 auto;padding:22px 28px 6px}
.wx3-s2g-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.wx3-s2g-h h2{margin:0;font:600 13px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text2)}
.wx3-s2g-h h2 em{font-style:normal;color:var(--gold)}
.wx3-s2g-h p{margin:0;font:400 13px/1.4 var(--body);color:var(--text3)}
.wx3-s2g ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;position:relative;border:1px solid var(--hair);border-radius:20px;background:linear-gradient(180deg,rgba(23,26,32,.7),rgba(12,13,16,.8));overflow:hidden}
.wx3-s2g li{min-width:0;border-left:1px solid var(--hair)}
.wx3-s2g li:first-child{border-left:0}
.wx3-s2g a{display:flex;flex-direction:column;gap:7px;height:100%;padding:14px 14px 13px;color:inherit;text-decoration:none;position:relative;transition:background .3s var(--ease)}
.wx3-s2g a:hover{background:rgba(212,168,83,.06)}
.wx3-s2g a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.wx3-s2g .alt{font:500 10px/1 var(--mono);letter-spacing:.12em;color:var(--text4)}
.wx3-s2g .lay{display:flex;align-items:center;gap:8px;font:600 15px/1.1 var(--display);letter-spacing:-.01em;color:#fff}
.wx3-s2g .lay svg{width:18px;height:18px;flex:0 0 auto;color:var(--gold)}
.wx3-s2g .src{font:500 11px/1.35 var(--mono);color:var(--text3)}
.wx3-s2g .val{font:600 11.5px/1.3 var(--mono);color:var(--ice);min-height:1.3em}
.wx3-s2g li:last-child .lay svg{color:var(--go)}
.wx3-s2g a::after{content:'';position:absolute;right:-5px;top:50%;width:9px;height:9px;margin-top:-5px;border-top:1px solid var(--hair2);border-right:1px solid var(--hair2);transform:rotate(45deg);background:#0e1013;z-index:1}
.wx3-s2g li:last-child a::after{display:none}

/* ───────── TABS ───────── */
#tabBar.tab-bar{max-width:1240px!important;margin:18px auto 22px!important;padding:8px 28px!important;gap:6px!important;background:rgba(8,9,11,.94)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:0!important;border-radius:0 0 18px 18px;justify-content:flex-start}
#tabBar .tab-btn{padding:0 16px!important;height:40px;border-radius:999px!important;border:1px solid var(--hair)!important;background:rgba(255,255,255,.025)!important;color:var(--text3)!important;font:600 12px/1 var(--body)!important;letter-spacing:.06em!important;text-transform:uppercase;transition:all .25s var(--ease)!important;white-space:nowrap}
#tabBar .tab-btn:hover:not(.active){color:#fff!important;border-color:var(--hair2)!important}
#tabBar .tab-btn.active{color:#0b0c0e!important;background:linear-gradient(135deg,var(--gold-soft),var(--gold))!important;border-color:transparent!important;box-shadow:0 8px 24px -10px rgba(212,168,83,.7)}
.tab-panel{max-width:1000px!important;padding:0 24px 28px!important}

/* ───────── SECTIONS, CARDS ───────── */
.section-title{font:600 12px/1.2 var(--mono)!important;letter-spacing:.18em!important;color:var(--gold)!important}
.tab-panel>.section-title,.tab-panel>div>.section-title:first-child{margin:28px 0 12px!important;padding-bottom:10px;border-bottom:1px solid var(--hair)}
.chart-wrap .section-title,.storm-card .section-title,.intel-card .section-title,.noaa-card .section-title{margin:0 0 6px!important;padding:0!important;border:0!important;font-size:11px!important;color:var(--text2)!important;text-shadow:none!important}
.chart-wrap::after{display:none!important}
.section-title .st-icon{filter:grayscale(.2)}
.storm-card,.intel-card,.noaa-card,.chart-wrap,.narrative,.safety-section,.legend-section,.ski-card{background:linear-gradient(180deg,rgba(23,26,32,.75),rgba(14,15,19,.85))!important;border:1px solid var(--hair)!important;border-radius:20px!important;box-shadow:none!important}
.storm-card-title,.intel-card-title,.noaa-card-title,.safety-section-title{font:600 12px/1.2 var(--mono)!important;letter-spacing:.14em!important;color:var(--text2)!important}
.chart-sub{font:500 11px/1.4 var(--mono)!important;color:var(--text3)!important}
.narrative{font:400 15px/1.6 var(--body)!important;color:var(--text)!important}
.param-btn,.model-btn,.map-toggle,.sat-toggle,.frame-btn{border-radius:999px!important;border:1px solid var(--hair)!important;background:rgba(255,255,255,.055)!important;color:var(--text3)!important;font:600 11px/1 var(--body)!important;letter-spacing:.06em!important}
.param-btn.active,.model-btn.active,.map-toggle.active,.sat-toggle.active,.frame-btn.active{background:rgba(212,168,83,.14)!important;color:var(--gold-soft)!important;border-color:rgba(212,168,83,.45)!important}
.deep-link,.wf-cta{border-radius:12px!important;border:1px solid var(--gold-border)!important;background:rgba(212,168,83,.06)!important;color:var(--gold-soft)!important;font:600 12px/1 var(--mono)!important}
.collapse-header{border-radius:16px!important}

/* hourly strip */
#hourlyScroll{gap:8px!important;scrollbar-width:none}
.hourly-card,.hr-card{border-radius:16px!important;border:1px solid var(--hair)!important;background:linear-gradient(180deg,rgba(23,26,32,.8),rgba(14,15,19,.9))!important}
.hourly-card.now,.hr-card.now{border-color:rgba(212,168,83,.55)!important;box-shadow:inset 0 0 0 1px rgba(212,168,83,.2)}

/* ───────── 16-DAY OUTLOOK · vertical range bars, same language as Crew Weather ───────── */
#forecastCards{display:flex;flex-direction:column;gap:0!important;border:1px solid var(--hair);border-radius:24px;background:linear-gradient(180deg,rgba(23,26,32,.9),rgba(10,11,14,.94));padding:6px 10px}
#forecastCards .fc-card-wrap{border-bottom:1px solid rgba(255,255,255,.12);margin:0!important}
#forecastCards .fc-card-wrap:last-child{border-bottom:0}
#forecastCards .fc-card{display:grid!important;grid-template-columns:18px 92px 30px 40px minmax(60px,1fr) 40px minmax(0,150px) 16px;align-items:center;gap:10px;min-height:54px;padding:6px 6px!important;background:transparent!important;border:0!important;border-radius:12px!important;cursor:pointer;overflow:visible!important}
#forecastCards .fc-card:hover{background:rgba(255,255,255,.055)!important}
#forecastCards .fc-card::before{display:none}
#forecastCards .fc-card.fc-nogo{background:rgba(248,113,113,.05)!important}
#forecastCards .fc-card-body,#forecastCards .fc-card-top,#forecastCards .fc-card-mid,#forecastCards .fc-hilo{display:contents!important}
#forecastCards .agi-conf-pip{order:0;position:absolute;opacity:0;pointer-events:none}
#forecastCards .fc-status-dot{order:1;font-size:13px;text-align:center}
#forecastCards .fc-day{order:2;font:600 14px/1.1 var(--display)!important;letter-spacing:-.01em!important;text-transform:none!important;color:#fff!important}
#forecastCards .fc-day.today{color:var(--gold-soft)!important}
#forecastCards .fc-date{display:block;margin:3px 0 0!important;font:500 10.5px/1 var(--mono)!important;color:var(--text3);opacity:1!important}
#forecastCards .fc-icon{order:3;font-size:20px;text-align:center}
/* HILO-FLIP 2026-10-03: high on the left, tonight's low on the right; bar mirrored so the warm end sits by the high */
#forecastCards .fc-hi{order:4;font:500 14px/1 var(--mono)!important;text-align:right;color:#fff!important}
#forecastCards .fc-bar{order:5;transform:scaleX(-1);position:relative!important;inset:auto!important;height:6px!important;border-radius:6px;background:rgba(255,255,255,.12)!important;margin:0!important;width:auto!important}
#forecastCards .fc-bar-fill{position:absolute;top:0;bottom:0;height:auto!important;border-radius:6px;background:linear-gradient(90deg,var(--ice),var(--gold) 70%,var(--gold-soft))!important;box-shadow:0 0 12px rgba(212,168,83,.4)}
#forecastCards .fc-lo{order:6;font:500 14px/1 var(--mono)!important;text-align:left;color:var(--ice)!important}
#forecastCards .fc-card-stats{order:7;display:flex!important;justify-content:flex-end;align-items:center;gap:5px;font:500 11.5px/1.2 var(--mono);color:var(--text3);min-width:0;overflow:hidden;white-space:nowrap}
#forecastCards .fc-stat{font:500 11.5px/1.2 var(--mono)!important;text-overflow:ellipsis;overflow:hidden}
#forecastCards .fc-expand-chev{order:8;position:static!important;font-size:9px;color:var(--text4);transition:transform .3s var(--ease)}
#forecastCards .fc-badge-wrap{order:9;grid-column:2/-1;margin:-4px 0 4px!important;justify-content:flex-start}
#forecastCards .fc-badge-wrap:empty,#forecastCards .fc-badge-wrap:not(:has(.fc-tag)){display:none!important}
#forecastCards .fc-tags{flex-wrap:wrap!important}
#forecastCards .fc-detail{padding:0 10px}
#fcSummary{font:500 12px/1.4 var(--mono)!important;color:var(--text3)!important}

/* ───────── MAPS · one frame for every map ───────── */
.leaflet-container,.radar-wrap,#windyMapWrap,#noaaRadarLoop,.map-container{border-radius:20px!important;overflow:hidden;border:1px solid var(--hair2)!important;background:#0c0e11!important;box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.radar-wrap .leaflet-container,#windyMapWrap .leaflet-container{border:0!important;box-shadow:none;border-radius:0!important}
.leaflet-bar a,.leaflet-control-zoom a{background:rgba(12,14,17,.82)!important;color:var(--text)!important;border-color:var(--hair)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.leaflet-bar{border:1px solid var(--hair2)!important;border-radius:12px!important;overflow:hidden;box-shadow:none!important}
.leaflet-control-attribution{background:rgba(8,9,11,.94)!important;color:var(--text4)!important;font:500 9.5px/1.4 var(--mono)!important;border-radius:8px 0 0 0}
.leaflet-control-attribution a{color:var(--text3)!important}
.leaflet-tooltip,.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:rgba(14,16,20,.94)!important;color:var(--text)!important;border:1px solid var(--hair2)!important;box-shadow:0 20px 40px -20px #000!important;font-family:var(--body)}
.leaflet-popup-content-wrapper{border-radius:14px!important}
iframe{border-radius:inherit}
.noaa-grid img,.noaa-card img{border-radius:12px;border:1px solid var(--hair)}

/* ───────── CHART SHELL ───────── */
.chart-wrap{padding:16px 16px 12px!important}
.chart-wrap canvas{max-width:100%}
.chart-grid{gap:14px!important}

/* ───────── ALERTS, FOOTER ───────── */
#alertBanners{max-width:1240px;margin:0 auto;padding:0 28px}
.safety-banner{border-radius:18px!important}

/* ───────── MOBILE FIT ───────── */
input,select,textarea{font-size:16px}
@media(max-width:1000px){
  .wx3-in{grid-template-columns:minmax(0,1fr);gap:18px;padding:18px 16px 28px}
  .wx3-lede{display:none}
  .wx3-s2g ol{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wx3-s2g li:nth-child(4){border-left:0}
  .wx3-s2g li:nth-child(n+4){border-top:1px solid var(--hair)}
  .wx3-s2g a::after{display:none}
}
@media(max-width:640px){
  .wx3-place{font-size:clamp(34px,10vw,46px)}
  .wx3-head{gap:10px}
  .wx3-kicker{font-size:10.5px;padding:6px 12px 6px 10px}
  .wx3-kicker b{display:none}
  .wx3-call{padding:18px 16px 14px!important;border-radius:22px}
  .wx3-word{font-size:64px}
  .wx3-call .ring{width:60px!important;height:60px!important}
  .wx3-call .ring .ri{font-size:24px!important}
  .wx3-call .strip{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px!important;padding:12px 4px!important}
  .wx3-call .strip-temp{grid-column:1/-1;border-right:0;padding-bottom:10px;border-bottom:1px solid var(--hair);justify-content:flex-start}
  .wx3-call .strip-stat{border-left:0;padding:0 10px}
  .wx3-s2g{padding:14px 16px 0}
  .wx3-s2g ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wx3-s2g li:nth-child(odd){border-left:0}
  .wx3-s2g li:nth-child(4){border-left:1px solid var(--hair)}
  .wx3-s2g li:nth-child(n+3){border-top:1px solid var(--hair)}
  .wx3-s2g a{padding:12px}
  .wx3-s2g .src{display:none}
  #tabBar.tab-bar{padding:6px 16px!important;margin:12px 0 16px!important;overflow-x:auto;scrollbar-width:none}
  #tabBar .tab-btn{height:38px;padding:0 14px!important;font-size:11.5px!important}
  .tab-panel{padding:0 14px 24px!important}
  #forecastCards{padding:4px 6px;border-radius:20px}
  #forecastCards .fc-card{grid-template-columns:14px 60px 24px 32px minmax(36px,1fr) 32px 44px 12px;gap:7px;padding:6px 2px!important}
  #forecastCards .fc-day{font-size:13px!important}
  #forecastCards .fc-card-stats .fc-stat:first-child,#forecastCards .fc-card-stats .fc-stat-sep{display:none!important}
  #forecastCards .fc-card-stats .fc-precip-amt{display:none!important}
}
/* iOS app (WKWebView): never size a track to its widest child */
.wx3-in>*,.wx3-head>*,.wx3-call>*,.tab-panel>*{min-width:0;max-width:100%}

/* One map language: bright satellite bases are dimmed and cooled so every map reads as the same dark instrument.
   Only the first (base) tile layer is touched; radar, AQI, fire and label overlays keep full strength. */
#satLeafletMap .leaflet-tile-pane>.leaflet-layer:first-child,
#aqiLeafletMap .leaflet-tile-pane>.leaflet-layer:first-child,
#futureRadarMap .leaflet-tile-pane>.leaflet-layer:first-child,
#wildfirePerimeterMap .leaflet-tile-pane>.leaflet-layer:first-child{filter:brightness(.6) contrast(1.12) saturate(.7) hue-rotate(-6deg)}
#satLeafletMap,#aqiLeafletMap,#futureRadarMap,#wildfirePerimeterMap,#stormTrackerMap,#pwsMap{box-shadow:0 30px 70px -40px rgba(0,0,0,.9),inset 0 0 0 1px rgba(212,168,83,.08)}
@media(max-width:640px){#satLeafletMap,#aqiLeafletMap,#futureRadarMap,#wildfirePerimeterMap,#stormTrackerMap,#pwsMap{border-radius:16px!important}}

/* ORBIT-HERO 2026-09-28: Gemini orbital artwork is the hero; the old control-room layer stays in the DOM, hidden */
.wx3-hero #bgArt{display:none!important}
.wx3-hero #bgSummer{opacity:1!important}
.wx3-hero #bgSummer picture,.wx3-hero #bgSummer img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
@media(max-width:640px){.wx3-hero #bgSummer img{object-position:50% 20%}}

/* KERR NOWCAST hand-off card (Maps tab) */
.knc-jump{display:grid;gap:6px;padding:20px 22px;border-radius:20px;text-decoration:none;color:inherit;border:1px solid rgba(212,168,83,.35);background:radial-gradient(120% 140% at 100% 0%,rgba(212,168,83,.14),transparent 55%),linear-gradient(180deg,rgba(23,26,32,.9),rgba(12,13,16,.95));transition:border-color .25s,transform .25s}
.knc-jump:hover{border-color:rgba(212,168,83,.7);transform:translateY(-1px)}
.knc-jump .kj-eb{font:600 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.knc-jump .kj-t{font:600 20px/1.2 var(--display);letter-spacing:-.02em;color:#fff}
.knc-jump .kj-t b{color:var(--gold-soft);font-weight:600}
.knc-jump .kj-s{font:400 13.5px/1.5 var(--body);color:var(--text3);max-width:620px}
.knc-jump .kj-go{font:600 12px/1 var(--mono);color:var(--gold-soft);margin-top:4px}
#tab-storms>.knc{margin-top:8px}

/* SPACE → GROUND in the background (2026-09-28 20:50): a slim, quiet strip near the page foot */
.wx3-s2g-bg{max-width:1000px;margin:36px auto 0;padding:0 24px;opacity:.78;transition:opacity .25s}
.wx3-s2g-bg:hover,.wx3-s2g-bg:focus-within{opacity:1}
.wx3-s2g-bg .wx3-s2g-h{margin-bottom:8px}
.wx3-s2g-bg .wx3-s2g-h h2{font-size:10.5px;letter-spacing:.2em;color:var(--text3)}
.wx3-s2g-bg .wx3-s2g-h p{font-size:11.5px;color:var(--text4)}
.wx3-s2g-bg ol{display:flex!important;flex-wrap:nowrap;gap:6px;border:0!important;background:none!important;border-radius:0!important;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.wx3-s2g-bg ol::-webkit-scrollbar{display:none}
.wx3-s2g-bg li{border:0!important;flex:0 0 auto}
.wx3-s2g-bg a{flex-direction:row!important;align-items:center;gap:0!important;height:auto!important;padding:7px 12px!important;border-radius:999px;border:1px solid var(--hair);background:rgba(255,255,255,.025)}
.wx3-s2g-bg a:hover{background:rgba(212,168,83,.08);border-color:rgba(212,168,83,.35)}
.wx3-s2g-bg a::after,.wx3-s2g-bg .alt,.wx3-s2g-bg .src,.wx3-s2g-bg .val{display:none!important}
.wx3-s2g-bg .lay{font:600 12px/1 var(--body)!important;color:var(--text2)!important;gap:7px!important}
.wx3-s2g-bg .lay svg{width:14px!important;height:14px!important}
@media(max-width:640px){.wx3-s2g-bg{padding:0 14px;margin-top:24px}.wx3-s2g-bg .wx3-s2g-h p{display:none}}

/* WHY-LINE 2026-10-07: the reason behind the call, and wind as mph + gusts on the hero strip */
.wx3-why{margin:-4px 0 14px;font:500 15px/1.45 var(--body);color:var(--text2);text-align:left}
.wx3-why[hidden]{display:none}
.wx3-why b{display:inline-block;margin-right:10px;font:600 12px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--lvc,var(--gold-soft));vertical-align:1px}
.wx3-call .strip-stat-val small{font:500 11.5px/1 var(--mono);color:var(--text3)}
.wx3-call .strip-stat-val .sw-g{display:block;margin-top:4px;font:500 12px/1.1 var(--mono);color:var(--text2)}

/* ───────── DESKTOP FILL 2026-10-10 (Errol: "on desktop there's a lot of empty blank space"; iPhone looks good, so phones
   and tablets are untouched). From 1200 px wide: the place name and search sit side by side on one line, the weather
   call card runs the full width with Field Intel beside the call instead of under it, and the Forecast tab widens to
   1240 px with the 16-day outlook on the left and today's write-ups on the right (the forecast desk drop-down opens by default there). ───────── */
@media(min-width:1200px){
  .wx3-in{grid-template-columns:minmax(0,1fr);gap:22px;padding-top:26px;padding-bottom:36px}
  .wx3-head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px;padding-top:0}
  .wx3-head .wx3-place{order:1;flex:1 1 auto;min-width:0}
  .wx3-head .controls{order:2;flex:0 0 540px;width:540px;margin:0!important}
  .wx3-call{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);column-gap:26px;align-items:start}
  .wx3-call>*{grid-column:1;min-width:0}
  .wx3-call>.wx3-top{grid-column:1/-1}
  .wx3-call>.wx3-intel{grid-column:2;grid-row:2/span 12;margin-bottom:0;align-self:stretch}

  .tab-panel{max-width:1240px!important}
  #tab-forecast.active{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:28px;align-items:start}
  #tab-forecast>*{grid-column:1/-1}
  #tab-forecast>.hourly-section{grid-row:1}
  #tab-forecast>#todayNarrative+div+.section-title{grid-column:1;grid-row:2}
  #tab-forecast>#fcSummary{grid-column:1;grid-row:3}
  #tab-forecast>#forecastCards{grid-column:1;grid-row:4/span 6;align-self:start}
  #tab-forecast #forecastCards .fc-card{grid-template-columns:18px 84px 28px 40px minmax(40px,1fr) 40px auto 16px!important;gap:8px}   /* the narrower column must not push wind and rain past the card edge */   /* not sticky: the list is taller than a laptop screen, so pinning it froze its bottom rows out of reach (fixed 2026-10-10) */
  #tab-forecast>#trackedSystemsSection{grid-column:2;grid-row:2}
  #tab-forecast>#todayNarrative{grid-column:2;grid-row:3}
  #tab-forecast>#todayNarrative+div{grid-column:2;grid-row:4}
  #tab-forecast>#forecasterNote{grid-column:2;grid-row:5}
  #tab-forecast>#localStationsPanel{grid-column:2;grid-row:6}
  #tab-forecast>.wx-static{grid-column:2;grid-row:7;margin-top:0!important}
  #tab-forecast>#weatherGearSection{grid-row:15}   /* bottom of the tab (2026-10-10) */
  #tab-forecast>div:has(#kerrNowcast){grid-row:11}
  #tab-forecast>.ext-outlook-section{grid-row:12}
  #tab-forecast>.save-trigger{grid-row:13}
  #tab-forecast>.save-detail{grid-row:14}
}