/* WeatherLabs Design System — shared across all pages.
   Light theme is the default (:root); dark theme activates via
   html[data-theme="dark"], toggled by the nav button (persisted in
   localStorage `wl_theme`, applied pre-paint by the inline head snippet). */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
/* light (default) */
--bg:#f7f7f4;--bg2:#ffffff;--bg3:#efefec;--bg4:#e6e6e2;
--text:#1d1d22;--text2:#585862;--text3:#92929c;
--accent:#1f6fc4;--accent2:#1857a0;--accent-dim:rgba(31,111,196,.08);
--green:#1d9e4f;--green-dim:rgba(29,158,79,.08);
--amber:#a96f12;--red:#c93a3a;
--line:rgba(20,20,30,.08);--line2:rgba(20,20,30,.12);--line3:rgba(20,20,30,.18);
--glass:rgba(255,255,255,.86);--glass2:rgba(255,255,255,.95);
--nav-bg:rgba(247,247,244,.85);
--on-accent:#ffffff;--accent-hover:#3a86d6;
--syn-str:#2e7d4f;--syn-num:#b45309;--syn-bool:#7c3aed;
--serif:'Cormorant Garamond',Georgia,serif;
--mono:'JetBrains Mono',monospace;
--sans:'DM Sans',system-ui,sans-serif;
--max:1200px;
}
html[data-theme="dark"]{
--bg:#0a0a0c;--bg2:#111114;--bg3:#18181c;--bg4:#1e1e24;
--text:#e8e6e1;--text2:#9a9892;--text3:#5a5955;
--accent:#4a9eed;--accent2:#2d7fd4;--accent-dim:rgba(74,158,237,.08);
--green:#4ecb71;--green-dim:rgba(78,203,113,.08);
--amber:#e8a838;--red:#e85454;
--line:rgba(255,255,255,.05);--line2:rgba(255,255,255,.08);--line3:rgba(255,255,255,.13);
--glass:rgba(10,10,12,.82);--glass2:rgba(12,12,15,.94);
--nav-bg:rgba(10,10,12,.85);
--on-accent:#06121f;--accent-hover:#62b0ff;
--syn-str:#7ec699;--syn-num:#d19a66;--syn-bool:#c678dd;
}
html{scroll-behavior:smooth;background:var(--bg);color:var(--text);font-family:var(--sans)}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:var(--on-accent)}
a{color:var(--accent);text-decoration:none;transition:opacity .2s}
a:hover{opacity:.7}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.25rem 2.5rem;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(20px);background:var(--nav-bg);border-bottom:1px solid var(--line)}
.nav-logo{font-family:var(--serif);font-size:1.25rem;font-weight:400;letter-spacing:.12em;color:var(--text);text-transform:uppercase}
.nav-logo span{color:var(--accent);font-weight:500}
.nav-links{display:flex;gap:2rem;font-size:.8rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--text2)}
.nav-links a{color:var(--text2);transition:color .3s}
.nav-links a:hover,.nav-links a.active{color:var(--text);opacity:1}
.nav-right{display:flex;align-items:center;gap:.8rem}
.nav-cta{padding:.55rem 1.4rem;border:1px solid rgba(74,158,237,.35);border-radius:2px;color:var(--accent);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;transition:all .3s}
.nav-cta:hover{background:var(--accent);color:var(--on-accent);opacity:1}
.theme-toggle{width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--text2);cursor:pointer;font-size:.95rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:all .25s;flex:none}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}

/* PAGE LAYOUT */
section{padding:8rem 2.5rem}
.section-inner{max-width:var(--max);margin:0 auto}
.section-label{font-size:.65rem;letter-spacing:.35em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:1rem}
.section-title{font-family:var(--serif);font-size:clamp(2rem,4vw,3.2rem);font-weight:300;line-height:1.25;margin-bottom:1.5rem;max-width:700px}
.section-desc{font-size:.95rem;color:var(--text2);line-height:1.8;max-width:550px;font-weight:300}
.page-header{padding:8rem 2.5rem 4rem;border-bottom:1px solid var(--line)}

/* REVEAL */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.15s}.reveal-delay-2{transition-delay:.3s}.reveal-delay-3{transition-delay:.45s}.reveal-delay-4{transition-delay:.6s}

/* CODE BLOCKS */
pre.code-block{background:var(--bg2);border:1px solid var(--line);border-radius:3px;padding:1.25rem 1.5rem;font-family:var(--mono);font-size:.72rem;color:var(--text2);line-height:1.85;overflow-x:auto;white-space:pre;margin:1rem 0}
pre.code-block .kw{color:var(--accent)}
pre.code-block .str{color:var(--syn-str)}
pre.code-block .num{color:var(--syn-num)}
pre.code-block .cm{color:var(--text3)}

/* CARDS */
.card{background:var(--bg2);border:1px solid var(--line);border-radius:3px;padding:2rem;transition:border-color .3s}
.card:hover{border-color:rgba(74,158,237,.3)}

/* FOOTER */
footer{background:var(--bg);border-top:1px solid var(--line);padding:5rem 2.5rem 3rem}
.footer-inner{max-width:var(--max);margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:4rem;margin-bottom:4rem}
.footer-brand{font-family:var(--serif);font-size:1.1rem;letter-spacing:.1em;margin-bottom:1rem}
.footer-brand-desc{font-size:.8rem;color:var(--text2);line-height:1.7;max-width:280px;font-weight:300}
.footer-col h5{font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;color:var(--text2);margin-bottom:1.2rem;font-weight:500}
.footer-col a{display:block;font-size:.8rem;color:var(--text3);margin-bottom:.6rem;font-weight:300;transition:color .3s}
.footer-col a:hover{color:var(--text);opacity:1}
.footer-bottom{padding-top:2rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:.7rem;color:var(--text3);font-weight:300}

/* ============================================================
   SHARED UI COMPONENTS (buttons, fields, panels, badges, code)
   used by the Explorer + Playground + landing.
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.4rem;border-radius:3px;font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;font-weight:500;cursor:pointer;border:1px solid var(--line3);background:transparent;color:var(--text);transition:all .25s;text-transform:none}
.btn:hover{border-color:rgba(74,158,237,.5);opacity:1}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.btn-sm{padding:.4rem .8rem;font-size:.72rem}
.btn:disabled{opacity:.4;cursor:not-allowed}

.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.field label{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text3);font-weight:500}
select,input[type=text],input[type=number],textarea{width:100%;background:var(--bg);border:1px solid var(--line2);border-radius:3px;color:var(--text);font-family:var(--mono);font-size:.8rem;padding:.6rem .7rem;transition:border-color .25s}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--accent)}
input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}

.pill{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;padding:.28rem .6rem;border-radius:99px;background:var(--accent-dim);color:var(--accent);border:1px solid rgba(74,158,237,.25)}
.pill.green{background:var(--green-dim);color:var(--green);border-color:rgba(29,158,79,.3)}
.pill.amber{background:rgba(190,140,40,.1);color:var(--amber);border-color:rgba(190,140,40,.3)}
.pill.red{background:rgba(220,70,70,.1);color:var(--red);border-color:rgba(220,70,70,.3)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block}
.dot.live{animation:pulse 2s ease-in-out infinite}
.dot.amber{background:var(--amber)}.dot.red{background:var(--red)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}

.panel{background:var(--bg2);border:1px solid var(--line);border-radius:4px}
.panel-head{padding:.9rem 1.1rem;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.panel-head h3{font-family:var(--serif);font-size:1.05rem;font-weight:400}
.panel-body{padding:1.1rem}

.kv{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;border-bottom:1px solid var(--line);font-size:.78rem}
.kv:last-child{border:none}
.kv .k{color:var(--text2)}
.kv .v{color:var(--text);font-family:var(--mono);font-weight:500;text-align:right}

.api-banner{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.7rem 1rem;border-radius:4px;font-size:.78rem;background:rgba(190,140,40,.08);border:1px solid rgba(190,140,40,.25);color:var(--text2)}
.api-banner.ok{background:var(--green-dim);border-color:rgba(29,158,79,.25)}
.api-banner.err{background:rgba(220,70,70,.08);border-color:rgba(220,70,70,.3)}
.api-banner input{flex:1;min-width:200px}

.json{background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:1rem 1.1rem;font-family:var(--mono);font-size:.72rem;line-height:1.7;color:var(--text2);overflow:auto;white-space:pre;max-height:420px}
.json .jk{color:var(--accent)}
.json .js{color:var(--syn-str)}
.json .jn{color:var(--syn-num)}
.json .jb{color:var(--syn-bool)}

.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line2);margin-bottom:1rem;flex-wrap:wrap}
.tab{padding:.5rem .9rem;font-size:.72rem;letter-spacing:.04em;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;font-family:var(--mono)}
.tab:hover{color:var(--text2)}
.tab.active{color:var(--text);border-bottom-color:var(--accent)}

.legend-bar{height:12px;border-radius:3px;border:1px solid var(--line2)}
.legend-ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.62rem;color:var(--text3);margin-top:.3rem}

/* ============================================================
   EXPLORER
   ============================================================ */
.explorer-shell{position:fixed;inset:0;top:0;display:grid;grid-template-columns:330px 1fr;background:var(--bg)}
.explorer-side{border-right:1px solid var(--line);background:var(--bg2);overflow-y:auto;padding:5.5rem 1.25rem 2rem;display:flex;flex-direction:column;gap:.4rem}
.explorer-side h2{font-family:var(--serif);font-size:1.3rem;font-weight:400;margin-bottom:.2rem}
.explorer-side .sub{font-size:.74rem;color:var(--text3);margin-bottom:1.2rem;line-height:1.6}
.explorer-map{position:relative}
#deck-canvas{position:absolute;inset:0}
.source-banner{position:absolute;top:5.2rem;left:50%;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;padding:.55rem 1.1rem;border-radius:99px;backdrop-filter:blur(12px);background:rgba(190,140,40,.14);border:1px solid rgba(190,140,40,.4);color:var(--amber);white-space:nowrap;max-width:calc(100vw - 380px);overflow:hidden;text-overflow:ellipsis}
.source-banner.live{background:var(--green-dim);border-color:rgba(29,158,79,.4);color:var(--green)}
.source-banner.err{background:rgba(220,70,70,.12);border-color:rgba(220,70,70,.4);color:var(--red)}
.map-hud{position:absolute;top:5.2rem;right:1rem;z-index:5;display:flex;flex-direction:column;gap:.6rem;align-items:flex-end;pointer-events:none}
.hud-card{pointer-events:auto;background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--line2);border-radius:4px;padding:.7rem .9rem;font-size:.72rem;min-width:170px}
.hud-card .hud-title{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text3);margin-bottom:.5rem}
.legend-card{position:absolute;left:1rem;bottom:1.1rem;z-index:5;background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--line2);border-radius:4px;padding:.8rem .9rem;width:280px}
.timebar{position:absolute;left:50%;transform:translateX(-50%);bottom:1.1rem;z-index:5;background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--line2);border-radius:6px;padding:.7rem 1rem;display:flex;align-items:center;gap:.9rem;width:min(60vw,640px)}
.timebar .play{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(74,158,237,.4);color:var(--accent);background:var(--accent-dim);cursor:pointer}
.timebar .play:hover{background:var(--accent);color:var(--on-accent)}
.timebar .tlabel{font-family:var(--mono);font-size:.72rem;white-space:nowrap;min-width:150px}
.point-panel{position:absolute;top:5.2rem;left:1rem;z-index:6;width:340px;max-width:calc(100vw - 2rem);background:var(--glass2);backdrop-filter:blur(14px);border:1px solid var(--line2);border-radius:6px;overflow:hidden;display:none}
.point-panel.show{display:block}
.point-panel .pp-head{padding:.8rem 1rem;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.point-panel .pp-close{cursor:pointer;color:var(--text3);font-size:1rem;line-height:1}
.point-panel .pp-body{padding:.9rem 1rem}
.spark{width:100%;height:120px;display:block}
.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:8;pointer-events:none}
.loading-overlay .spin{width:34px;height:34px;border:3px solid rgba(74,158,237,.2);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;opacity:0;transition:opacity .2s}
.loading-overlay.on .spin{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.peril-blurb{font-size:.72rem;color:var(--text3);line-height:1.6;margin:.2rem 0 1rem}
/* mode bar — point / path / box / region */
.mode-bar{position:absolute;top:8.4rem;left:50%;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:.35rem;padding:.35rem .45rem;border-radius:99px;background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--line2);max-width:calc(100vw - 380px);flex-wrap:wrap;justify-content:center}
.mode-bar button{border:1px solid transparent;background:transparent;color:var(--text2);font-family:var(--sans);font-size:.72rem;letter-spacing:.04em;padding:.35rem .8rem;border-radius:99px;cursor:pointer;transition:all .2s}
.mode-bar button:hover{color:var(--text)}
.mode-bar button.active{background:var(--accent);color:var(--on-accent)}
.mode-bar .mode-hint{font-family:var(--mono);font-size:.62rem;color:var(--text3);padding:0 .5rem;white-space:nowrap}
.mode-bar .mode-clear{border:1px solid var(--line3);color:var(--text2)}
/* sidebar "your query" box */
.query-box{border:1px solid var(--line2);border-radius:4px;background:var(--bg);overflow:hidden}
.query-url{font-family:var(--mono);font-size:.66rem;line-height:1.7;color:var(--text2);padding:.7rem .8rem;word-break:break-all;max-height:120px;overflow-y:auto}
.query-url .qm{color:var(--accent);font-weight:500;margin-right:.4rem}
.query-url .qk{color:var(--accent)}
.query-actions{display:flex;gap:.4rem;padding:.5rem .6rem;border-top:1px solid var(--line)}
.adv-details{margin:.4rem 0 1rem}
.adv-details summary{cursor:pointer;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text3);list-style:none;display:flex;align-items:center;gap:.4rem}
.adv-details summary::-webkit-details-marker{display:none}
.adv-details summary::before{content:'▸';color:var(--accent);font-size:.7rem;transition:transform .2s}
.adv-details[open] summary::before{transform:rotate(90deg)}
/* journey rows in the query panel */
.jr{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding:.45rem 0;border-bottom:1px solid var(--line)}
.jr:last-child{border:none}
.jr .jr-i{font-family:var(--mono);font-size:.66rem;color:var(--text3)}
.jr .jr-v{font-family:var(--mono);font-size:.72rem;color:var(--text);text-align:right;white-space:nowrap}
.jr svg{width:100%;height:56px;display:block}

/* ============================================================
   PLAYGROUND
   ============================================================ */
.pg-grid{display:grid;grid-template-columns:230px 1fr;gap:1.5rem;align-items:start}
.pg-endpoints{display:flex;flex-direction:column;gap:.3rem;position:sticky;top:6rem}
.pg-group{font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--text3);font-weight:500;margin:.7rem 0 .2rem;padding-left:.2rem}
.pg-group:first-child{margin-top:0}
.pg-ep{text-align:left;padding:.7rem .85rem;border-radius:4px;border:1px solid var(--line);background:var(--bg2);cursor:pointer;transition:all .2s}
.pg-ep:hover{border-color:var(--line3)}
.pg-ep.active{border-color:rgba(74,158,237,.45);background:var(--accent-dim)}
.pg-ep .m{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;color:var(--accent)}
.pg-ep .p{font-family:var(--mono);font-size:.78rem;color:var(--text);margin-top:.15rem}
.pg-ep .d{font-size:.66rem;color:var(--text3);margin-top:.2rem;line-height:1.4}
.pg-params{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.pg-url{font-family:var(--mono);font-size:.72rem;color:var(--text2);background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:.7rem .8rem;word-break:break-all;line-height:1.6}
.pg-url .host{color:var(--text3)}
.pg-url .qk{color:var(--accent)}
.stat-row{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.74rem;color:var(--text2);font-family:var(--mono)}
.stat-row b{color:var(--text);font-weight:500}

/* Site-wide "new site" notice — fixed bottom bar, injected + dismissed by util.js.
   Bottom placement keeps it clear of the fixed top nav and every page's content
   offset; it overlays content harmlessly and is dismissible (remembered). */
.wl-notice{position:fixed;bottom:0;left:0;right:0;z-index:120;display:flex;align-items:center;justify-content:center;gap:.7rem;padding:.7rem 3rem;background:var(--bg2);border-top:1px solid var(--line2);box-shadow:0 -4px 24px rgba(0,0,0,.12);backdrop-filter:blur(20px);font-size:.78rem;line-height:1.5;color:var(--text2)}
.wl-notice .wl-notice-chip{flex:none;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;padding:.15rem .5rem;border-radius:2px;background:rgba(190,140,40,.12);color:var(--amber);border:1px solid rgba(190,140,40,.32)}
.wl-notice b{color:var(--text);font-weight:500}
.wl-notice a{color:var(--accent);text-decoration:none;font-weight:500}
.wl-notice a:hover{text-decoration:underline}
.wl-notice-x{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text3);font-size:1.2rem;line-height:1;cursor:pointer;padding:.1rem .45rem;border-radius:3px;transition:color .2s,background .2s}
.wl-notice-x:hover{color:var(--text);background:var(--bg3)}

@media(max-width:900px){
nav .nav-links{display:none}
.wl-notice{padding:.6rem 2.4rem .6rem 1rem;gap:.5rem;font-size:.72rem;text-align:center;flex-wrap:wrap}
section{padding:5rem 1.5rem}
.page-header{padding:6rem 1.5rem 3rem}
.footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
.explorer-shell{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.explorer-side{max-height:42vh;padding-top:5rem}
.mode-bar{max-width:94vw;top:6.6rem}
.source-banner{max-width:94vw;top:3.4rem}
.pg-grid{grid-template-columns:1fr}
.pg-endpoints{position:static;flex-direction:row;overflow-x:auto}
.pg-params{grid-template-columns:1fr}
.timebar{width:90vw}
}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr}}