/* ============================================================
   THEME ENGINE  — cycle with the Theme button or the "T" key.
   cyber -> crt -> matrix -> cyber.  Choice remembered in browser.
   ============================================================ */
:root{
  --font-display:'Share Tech Mono','JetBrains Mono',Consolas,monospace;
  --font-body:'JetBrains Mono',Consolas,'Courier New',monospace;
  --radius:6px;
}
[data-theme="cyber"]{
  --bg:#0a0e16; --bg2:#0c111c; --panel:#0e1422; --panel2:#070b12;
  --border:#1b2740; --border2:#131b2c; --text:#d6e3f5; --muted:#5d6b85;
  --accent:#22d3ee; --accent2:#f472b6; --accent3:#fbbf24; --good:#34d399; --warm:#f97316; --particle:#7dd3fc;
  --texture:none;
}
[data-theme="crt"]{
  --bg:#050a05; --bg2:#081108; --panel:#081108; --panel2:#0a160a;
  --border:#1f7a1f; --border2:#14401a; --text:#33ff66; --muted:#3a9d52;
  --accent:#7dffa0; --accent2:#9affc0; --accent3:#bdffae; --good:#7dffa0; --warm:#d6ff4a; --particle:#9affc0;
  --texture:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,30,0,0.28) 3px,rgba(0,0,0,0) 4px);
}
[data-theme="matrix"]{
  --bg:#03060a; --bg2:#05140c; --panel:#07140d; --panel2:#05140c;
  --border:#0c7d4d; --border2:#135c3c; --text:#c8ffe0; --muted:#3a8a63;
  --accent:#3dff95; --accent2:#7af0c0; --accent3:#39e08a; --good:#3dff95; --warm:#b6ff3a; --particle:#86ffc4;
  --texture:linear-gradient(rgba(12,125,77,0.10) 1px,transparent 1px),linear-gradient(90deg,rgba(12,125,77,0.10) 1px,transparent 1px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);background:var(--bg);color:var(--text);
  font-size:14px;line-height:1.5;min-height:100vh;
  background-image:var(--texture);background-size:auto,22px 22px,22px 22px;
  -webkit-text-size-adjust:100%;
}

/* ---------- TOP BAR / NAV ---------- */
.topbar{
  position:sticky;top:0;z-index:50;background:var(--bg2);
  border-bottom:1px solid var(--border);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 16px;
}
.brand{font-family:var(--font-display);font-size:18px;letter-spacing:3px;color:var(--accent);white-space:nowrap}
.brand .sep{color:var(--accent2)} .brand .wx{color:var(--text)}
.clock{font-size:13px;color:var(--muted)} .clock b{color:var(--text);font-weight:500}
.nav{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.nav a,.nav button{
  font-family:var(--font-body);font-size:12px;letter-spacing:1px;text-decoration:none;cursor:pointer;
  color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:4px;padding:4px 11px;transition:.15s;
}
.nav a:hover,.nav button:hover{color:var(--text);border-color:var(--accent)}
.nav a.active{color:var(--bg2);background:var(--accent);border-color:var(--accent);font-weight:700}
.nav .help-btn{color:var(--accent);border-color:var(--accent);font-weight:700;min-width:30px;text-align:center}
.countdown{font-size:12px;color:var(--muted);border:1px dashed var(--border2);border-radius:4px;padding:4px 10px;white-space:nowrap}
.countdown b{color:var(--accent);transition:color .3s}
.countdown b.warn{color:var(--accent3)}
.countdown b.crit{animation:cdblink .8s linear infinite}
@keyframes cdblink{0%,49.9%{color:var(--accent3)}50%,100%{color:#fff}}
.themebtn{font-family:var(--font-body);font-size:12px;letter-spacing:1px;cursor:pointer;color:var(--accent);background:transparent;border:1px solid var(--accent);border-radius:4px;padding:4px 11px;transition:.15s}
.themebtn:hover{background:var(--accent);color:var(--bg2)}

/* ---------- LAYOUT ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:18px}
.grid{display:grid;gap:14px}
.cols-2{grid-template-columns:1fr 1fr}
@media(max-width:860px){.cols-2{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.panel .head{display:flex;align-items:center;justify-content:space-between;background:var(--panel2);border-bottom:1px solid var(--border);padding:8px 14px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.panel .head .tag{color:var(--accent)}
.panel .body{padding:14px}
.eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:22px 4px 10px}

/* ---------- HERO ---------- */
.hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.hero .temp{font-family:var(--font-display);font-size:64px;line-height:.95;color:var(--accent)}
.hero .temp small{font-size:22px;color:var(--muted)}
.hero .meta{text-align:right;min-width:180px}
.hero .meta .cond{font-size:18px;color:var(--text);margin-bottom:6px}
.hero .meta .lbl{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.hero .meta .feels{font-size:20px;color:var(--accent3)}
.hero .meta .desc{font-size:12px;color:var(--muted);margin-top:6px;max-width:260px;margin-left:auto}

/* ---------- TILES + TREND ARROWS ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:980px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px}
.tile .k{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted)}
.tile .v{font-family:var(--font-display);font-size:26px;color:var(--text);margin-top:2px;line-height:1.1}
.tile .v u{font-size:13px;color:var(--muted);text-decoration:none}
.tile .v.acc{color:var(--accent)}
.tile .sub{font-size:11px;color:var(--muted);margin-top:3px;min-height:14px}
.trend{font-size:11px;white-space:nowrap;font-family:var(--font-body)}
.trend.up{color:var(--accent3)} .trend.down{color:var(--accent2)} .trend.flat{color:var(--muted)}

/* ---------- DATA TABLES ---------- */
.dl{width:100%;border-collapse:collapse;font-size:13px}
.dl td{padding:7px 0;border-bottom:1px solid var(--border2)}
.dl tr:last-child td{border-bottom:none}
.dl td:first-child{color:var(--muted)}
.dl td:last-child{text-align:right;color:var(--text)}
.dl td .t{color:var(--muted);font-size:11px;margin-left:6px}
.dl tr td{transition:background .15s ease,box-shadow .15s ease}
.dl tr:hover td{background:var(--panel2)}
.dl tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--accent)}

/* ---------- SKYCAM ---------- */
.skycam-img{display:block;width:100%;height:auto;border-radius:4px;border:1px solid var(--border)}
.skycam-note{font-size:11px;color:var(--muted);text-align:center;margin-top:7px;letter-spacing:.5px}
.skycam-note b{color:var(--accent)}

/* ---------- COMPASS ---------- */
.compass{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.dial{position:relative;width:96px;height:96px;border:1px solid var(--border);border-radius:50%;flex:none;background:var(--panel2)}
.dial span{position:absolute;font-size:10px;color:var(--muted)}
.dial .n{top:4px;left:50%;transform:translateX(-50%)} .dial .s{bottom:4px;left:50%;transform:translateX(-50%)}
.dial .e{right:5px;top:50%;transform:translateY(-50%)} .dial .w{left:5px;top:50%;transform:translateY(-50%)}
.needle{position:absolute;left:50%;top:50%;width:2px;height:40px;background:var(--accent2);transform-origin:bottom center;transform:translate(-50%,-100%) rotate(0deg)}
.dial .hub{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%)}

/* ---------- SVG CHART HOSTS ---------- */
.chart{width:100%;height:auto;display:block}
.chartcap{font-size:11px;color:var(--muted);text-align:center;margin-top:6px}
.legend{display:flex;gap:14px;justify-content:center;font-size:11px;color:var(--muted);margin-top:8px;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* ---------- MOON ---------- */
.moonwrap{display:flex;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.moonwrap .info .nm{font-size:15px;color:var(--accent)}
.moonwrap .info .sm{font-size:12px;color:var(--muted)}

/* ---------- FORECAST STRIP ---------- */
.fc{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:560px){.fc{grid-template-columns:repeat(2,1fr)}}
.fc .day{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:12px;text-align:center}
.fc .day .dn{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--accent)}
.fc .day img{width:46px;height:46px;object-fit:contain;margin:8px auto;display:block}
.fc .day .cap{font-size:11px;color:var(--muted);line-height:1.35;min-height:30px}

/* ---------- WD GRAPH EMBEDS ---------- */

/* ---------- AMBIENT DOTS + SCROLL MOTION ---------- */
#bgdots{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.wrap,footer{position:relative;z-index:1}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--border);margin-top:8px;padding:18px;font-size:12px;color:var(--muted);text-align:center;line-height:1.7}
footer a{color:var(--accent);text-decoration:none} footer a:hover{text-decoration:underline}
.sysline{font-size:11px;color:var(--muted);opacity:.7;margin-top:6px;font-family:var(--font-display);letter-spacing:1px}

/* ---------- HELP MODAL ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;z-index:100;padding:18px}
.modal-overlay.open{display:flex}
.modal{background:var(--panel);border:1px solid var(--accent);border-radius:var(--radius);max-width:420px;width:100%;max-height:90vh;overflow:auto}
.modal .head{display:flex;align-items:center;justify-content:space-between;background:var(--panel2);border-bottom:1px solid var(--border);padding:12px 16px}
.modal .head h2{margin:0;font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);font-weight:500}
.modal .x{cursor:pointer;background:transparent;border:none;color:var(--muted);font-size:20px;line-height:1}
.modal .body{padding:16px}
.kbd{display:inline-block;min-width:24px;text-align:center;border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;padding:2px 7px;font-family:var(--font-display);color:var(--accent3);background:var(--panel2);margin-right:10px}
.modal .row{display:flex;align-items:center;padding:8px 0;border-bottom:1px solid var(--border2);font-size:13px}
.modal .row:last-child{border-bottom:none}

/* ---------- KIOSK MODE (F key / fullscreen) ---------- */
body.kiosk .nav,body.kiosk .countdown,body.kiosk .themebtn{display:none}
body.kiosk .topbar{justify-content:space-between}

@media(max-width:680px){
  .wrap{padding:12px}
  .hero .temp{font-size:48px}
  .hero .meta{text-align:left;min-width:0} .hero .meta .desc{margin-left:0}
  .brand{font-size:16px;letter-spacing:2px}
  .topbar{padding:9px 12px;gap:8px 10px}
  .nav{width:100%;margin-left:0;flex-wrap:wrap}
  .countdown,.themebtn{font-size:11px;padding:3px 8px}
}

/* ---------- NAV DROPDOWN (History) — digital cascade ---------- */
.nav-dd{position:relative}
.nav-dd-btn{font-family:var(--font-body);font-size:12px;letter-spacing:1px;cursor:pointer;color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:4px;padding:4px 11px;transition:.15s}
.nav-dd-btn:hover{color:var(--text);border-color:var(--accent)}
.nav-dd-btn .caret{display:inline-block;transition:transform .22s ease;margin-left:3px}
.nav-dd:hover .nav-dd-btn .caret,.nav-dd.open .nav-dd-btn .caret{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;right:0;top:calc(100% + 7px);min-width:170px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:6px;z-index:60;
  opacity:0;transform:translateY(-6px);transform-origin:top center;pointer-events:none;transition:opacity .14s ease,transform .14s ease;box-shadow:0 10px 26px rgba(0,0,0,.5)}
/* invisible bridge fills the gap so the menu stays open while the cursor travels to it */
.nav-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px}
.nav-dd:hover .nav-dd-menu,.nav-dd.open .nav-dd-menu{opacity:1;transform:translateY(0);pointer-events:auto}
/* items: each wipes + drops down in sequence */
.nav-dd-menu a{display:block;font-size:12px;letter-spacing:1px;text-decoration:none;color:var(--muted);padding:8px 10px;border-radius:4px;opacity:0;transition:color .12s,background .12s}
.nav-dd:hover .nav-dd-menu a,.nav-dd.open .nav-dd-menu a{animation:ddcascade .32s both cubic-bezier(.2,.8,.3,1.15)}
.nav-dd:hover .nav-dd-menu a:nth-child(1),.nav-dd.open .nav-dd-menu a:nth-child(1){animation-delay:.04s}
.nav-dd:hover .nav-dd-menu a:nth-child(2),.nav-dd.open .nav-dd-menu a:nth-child(2){animation-delay:.10s}
.nav-dd:hover .nav-dd-menu a:nth-child(3),.nav-dd.open .nav-dd-menu a:nth-child(3){animation-delay:.16s}
.nav-dd:hover .nav-dd-menu a:nth-child(4),.nav-dd.open .nav-dd-menu a:nth-child(4){animation-delay:.22s}
.nav-dd:hover .nav-dd-menu a:nth-child(5),.nav-dd.open .nav-dd-menu a:nth-child(5){animation-delay:.28s}
.nav-dd:hover .nav-dd-menu a:nth-child(6),.nav-dd.open .nav-dd-menu a:nth-child(6){animation-delay:.34s}
.nav-dd-menu a:hover{color:var(--text);background:var(--panel)}
.nav-dd-menu a.active{border:1px solid var(--accent);padding:7px 9px}
@keyframes ddcascade{0%{opacity:0;transform:translateY(-12px);clip-path:inset(0 0 100% 0)}60%{opacity:1}100%{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}}
@media(max-width:680px){.nav-dd-menu{left:0;right:auto}}
@media(prefers-reduced-motion:reduce){
  .nav-dd-menu a{opacity:1;animation:none}
  .nav-dd-menu{transition:opacity .15s ease}
}

/* ---------- DEDICATED SKYCAM PAGE ---------- */
.skycam-frame{max-width:1040px;margin:0 auto;background:var(--panel);border:1px solid var(--accent);border-radius:10px;padding:12px;box-shadow:0 0 0 1px var(--border),0 0 34px -10px var(--accent)}
.skycam-frame > a{display:block}
.skycam-frame img{display:block;width:100%;height:auto;border-radius:6px;border:1px solid var(--border)}
.sky-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:12px 4px 8px}
.sky-count-line{font-size:13px;color:var(--muted);letter-spacing:.5px;display:flex;align-items:baseline;gap:8px}
.sky-count{font-family:var(--font-display);font-size:15px;line-height:1;color:var(--accent);transition:color .3s}
.sky-count.warn{color:var(--accent3)}
.sky-count.crit{animation:cdblink .8s linear infinite}
.sky-bar-track{height:8px;background:var(--panel2);border:1px solid var(--border);border-radius:5px;overflow:visible;margin:0 6px;position:relative}
.sky-bar{height:100%;width:100%;background:var(--accent);border-radius:5px;transition:width 1s linear,background .3s;position:relative}
.sky-bar.warn,.sky-bar.crit{background:var(--accent3)}
/* burning fuse tip at the leading edge */
.sky-bar::after{content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 9px 2px rgba(255,255,255,.9),0 0 4px #fff;pointer-events:none}
.sky-btns{display:flex;gap:10px;flex-wrap:wrap}
/* scale toggle sizes */
.skycam-frame.sz-small{max-width:660px}
.skycam-frame.sz-large{max-width:none;width:72vw;margin-left:calc(50% - 36vw)}
/* skycam overlay-time notice badge */
.notice{display:flex;align-items:center;gap:10px;margin-top:18px;padding:10px 14px;border:1px solid var(--warm);border-radius:6px;background:var(--panel);color:var(--text);font-size:12px;letter-spacing:.3px;line-height:1.45}
.notice .dot{width:9px;height:9px;border-radius:50%;background:var(--warm);box-shadow:0 0 9px var(--warm);flex:none;animation:noticePulse 2s ease-in-out infinite}
@keyframes noticePulse{0%,100%{opacity:1}50%{opacity:.35}}
.btn-4k{display:inline-block;font-family:var(--font-body);font-size:13px;letter-spacing:1px;text-decoration:none;color:var(--accent);background:transparent;border:1px solid var(--accent);border-radius:5px;padding:9px 16px;transition:.15s;cursor:pointer;white-space:nowrap}
.btn-4k:hover{background:var(--accent);color:var(--bg2)}