/* ── Design tokens ── */
:root {
  --bg-0: #03060b;
  --bg-1: #060b13;
  --bg-2: #0a1422;
  --panel: rgba(8, 18, 30, 0.72);
  --panel-solid: #0a141f;
  --bg: #03060b; /* backward compat */

  --cy:  #00e7ff;
  --cy2: #7df9ff;
  --cyd: #0099aa;
  --cy-glow: 0 231 255;
  --amber: #ff9a3d;
  --red:   #ff4d5c;
  --hot:   #ff7050;
  --cold:  #5cb3ff;
  --green: #4cff7d;
  --magenta: #ff5cd0;

  --t-hi:  #e6f6ff;
  --t-md:  #b9d6e6;
  --t-lo:  rgba(207, 233, 245, 0.45);
  --t-dim: rgba(207, 233, 245, 0.28);
  --text:  #e6f6ff; /* backward compat */
  --muted: rgba(207, 233, 245, 0.45); /* backward compat */

  --bevel: 10px;
  --frame-bg: linear-gradient(180deg, rgba(8,18,30,0.85), rgba(3,6,11,0.92));
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg-0);
  color: var(--t-hi);
  font-family: 'Chakra Petch', sans-serif;
  height: 100%;
  overflow: hidden;
  font-feature-settings: "ss01", "tnum";
}

body {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(0,80,120,0.18), transparent 70%),
    radial-gradient(ellipse at 50% 100%, rgba(0,60,90,0.12), transparent 60%),
    var(--bg-0);
  background-image:
    radial-gradient(rgba(0,231,255,0.04) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 40%, rgba(0,80,120,0.18), transparent 70%);
  background-size: 28px 28px, 100% 100%;
}

body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(0deg,
    transparent 0, transparent 2px,
    rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 3px);
  mix-blend-mode: multiply;
}

.hidden { display: none !important; }

/* ── Root layout ── */
#hud-root {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(4px, 0.5vw, 8px);
  gap: clamp(4px, 0.4vh, 6px);
}

#hud-app {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: clamp(4px, 0.4vh, 6px);
}
#hud-app.hidden { display: none !important; }

/* ── Boot states ── */
.boot-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 80vh; gap: 14px; color: var(--cy); text-align: center;
  font-family: 'Chakra Petch', sans-serif; letter-spacing: 0.18em;
  text-transform: uppercase; font-size: 12px;
}
.boot-spinner {
  width: 40px; height: 40px;
  border: 2px solid rgba(0,231,255,0.18);
  border-top-color: var(--cy);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  box-shadow: 0 0 12px rgba(0,231,255,0.3);
}
@keyframes spin { to { transform: rotate(360deg); } }
.boot-icon { font-size: 2.5rem; color: var(--amber); }

/* ── Panel chrome ── */
.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid rgba(var(--cy-glow), 0.28);
  box-shadow: 0 0 24px rgba(var(--cy-glow), 0.07), inset 0 0 0 1px rgba(var(--cy-glow), 0.04);
  backdrop-filter: blur(8px);
  clip-path: polygon(var(--bevel) 0, 100% 0, 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, 0 100%, 0 var(--bevel));
}

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(var(--cy-glow), 0.15);
  position: relative; min-height: 26px; flex-shrink: 0;
}
.panel-head::before {
  content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 2px;
  background: var(--cy); box-shadow: 0 0 6px var(--cy);
}
.panel-title {
  font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 11px;
  color: var(--cy); letter-spacing: 0.2em; text-transform: uppercase;
}
.panel-meta {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Chakra Petch', sans-serif; font-size: 10px; font-weight: 500;
  color: var(--t-lo); letter-spacing: 0.16em; text-transform: uppercase;
}

/* backward compat: old panel-tag is just hidden */
.panel-tag { display: none; }

/* ── Topbar / Header ── */
.hud-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  padding: 0 12px;
  height: 44px;
  background: rgba(8,18,30,0.85);
  border: 1px solid rgba(var(--cy-glow), 0.28);
  box-shadow: 0 0 20px rgba(var(--cy-glow), 0.12);
  clip-path: polygon(var(--bevel) 0, 100% 0, 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, 0 100%, 0 var(--bevel));
}

/* Brand */
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--cy); text-shadow: 0 0 8px rgba(var(--cy-glow), 0.5);
  flex-shrink: 0;
}
.brand-mark {
  width: 20px; height: 20px;
  border: 1.5px solid var(--cy);
  position: relative; transform: rotate(45deg); flex-shrink: 0;
  box-shadow: 0 0 10px rgba(var(--cy-glow), 0.5), inset 0 0 6px rgba(var(--cy-glow), 0.3);
}
.brand-mark::before, .brand-mark::after {
  content: ''; position: absolute; background: var(--cy);
}
.brand-mark::before { top: 50%; left: -4px; right: -4px; height: 1px; transform: translateY(-50%); }
.brand-mark::after  { left: 50%; top: -4px; bottom: -4px; width: 1px; transform: translateX(-50%); }
.brand-name {
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: 0.18em; white-space: nowrap;
}
.brand-sub { color: var(--t-lo); font-size: 9px; letter-spacing: 0.24em; font-weight: 500; }

/* Search box */
.hud-search {
  display: flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 10px;
  background: rgba(var(--cy-glow), 0.06);
  border: 1px solid rgba(var(--cy-glow), 0.25);
  position: relative;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.hud-search::before { content: '▸'; color: var(--cy); font-size: 12px; flex-shrink: 0; }
.hud-search input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--cy2); font-family: 'Chakra Petch', sans-serif; font-size: 12px;
  font-weight: 500; letter-spacing: 0.06em; min-width: 0;
}
.hotkey {
  font-family: 'Chakra Petch', sans-serif; font-size: 9px; font-weight: 600;
  color: var(--t-lo); border: 1px solid rgba(var(--cy-glow), 0.3); padding: 2px 5px;
  letter-spacing: 0.06em; flex-shrink: 0;
}
.search-dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(3,6,11,0.97);
  border: 1px solid rgba(var(--cy-glow), 0.4); border-top: 0;
  z-index: 1000; max-height: 280px; overflow-y: auto;
  box-shadow: 0 8px 20px rgba(0,0,0,0.6), 0 0 16px rgba(var(--cy-glow), 0.2);
}
.search-result {
  padding: 8px 12px; cursor: pointer;
  font-family: 'Chakra Petch', sans-serif; font-size: 12px;
  color: var(--t-hi); border-bottom: 1px solid rgba(var(--cy-glow), 0.1);
  transition: background 0.12s;
}
.search-result:hover { background: rgba(var(--cy-glow), 0.1); color: var(--cy); }

/* Right side of header */
.tb-right {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.tb-divider { width: 1px; height: 60%; background: rgba(var(--cy-glow), 0.25); }

/* LEDs */
.led {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Chakra Petch', sans-serif; font-size: 10px; font-weight: 600;
  color: var(--t-md); letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
}
.led::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 6px var(--green);
  animation: pulse-led 2.2s ease-in-out infinite; flex-shrink: 0;
}
.led.amber::before { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.led.dim::before   { background: var(--cyd); box-shadow: 0 0 6px var(--cyd); }
@keyframes pulse-led { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* Clock */
.tb-clock {
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: clamp(16px, 1.6vw, 22px); color: var(--cy2); letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(125,249,255,0.4);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tb-date {
  font-family: 'Chakra Petch', sans-serif; font-weight: 500;
  color: var(--t-md); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
}
/* backward compat IDs */
#cc-clock { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: clamp(16px,1.6vw,22px); color: var(--cy2); }
#cc-date  { font-family: 'Chakra Petch', sans-serif; font-weight: 500; font-size: 9px; color: var(--t-md); letter-spacing: 0.18em; text-transform: uppercase; }

/* Buttons */
.hud-btn {
  font-family: 'Chakra Petch', sans-serif; font-size: 11px; font-weight: 700;
  background: rgba(var(--cy-glow), 0.08); border: 1px solid rgba(var(--cy-glow), 0.35); color: var(--cy);
  padding: 5px 12px; cursor: pointer; letter-spacing: 0.08em; white-space: nowrap;
}
.hud-btn:hover { background: rgba(var(--cy-glow), 0.18); box-shadow: 0 0 12px rgba(var(--cy-glow), 0.3); }

/* ── Main 3-col grid ── */
.hud-main {
  display: grid;
  grid-template-columns: clamp(260px, 22%, 320px) 1fr clamp(260px, 26%, 360px);
  gap: clamp(4px, 0.5vw, 8px);
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.hud-main > * { min-width: 0; min-height: 0; }

/* ── LEFT COLUMN ── */
.cc-panel {
  display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto; scrollbar-width: none; min-height: 0;
}
.cc-panel::-webkit-scrollbar { display: none; }

/* Location strip */
.loc {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 4px; flex-shrink: 0;
}
.loc-name { display: flex; flex-direction: column; }
.loc-city {
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: clamp(16px, 1.8vw, 22px); color: var(--cy);
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px rgba(var(--cy-glow), 0.4); line-height: 1;
}
.loc-region {
  font-family: 'Chakra Petch', sans-serif; font-weight: 500;
  font-size: 9px; letter-spacing: 0.18em; color: var(--t-lo);
  margin-top: 4px; text-transform: uppercase;
}
.loc-flag {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid rgba(var(--cy-glow), 0.4);
  color: var(--cy); font-family: 'Chakra Petch', sans-serif;
  font-weight: 700; font-size: 10px; letter-spacing: 0.06em;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  background: rgba(var(--cy-glow), 0.05);
}

/* Instrument panel (dial container) */
.panel.instrument { flex-shrink: 0; }

/* Dial */
.instrument-body {
  position: relative;
  height: clamp(220px, 24vh, 290px);
  display: grid; place-items: center;
  overflow: hidden;
}
.dial {
  position: relative;
  width: clamp(200px, 21vh, 270px);
  height: clamp(200px, 21vh, 270px);
}
.dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Ring animations */
.dial-rotate-slow { animation: rot 90s linear infinite; transform-origin: center; transform-box: fill-box; }
.dial-rotate-med  { animation: rot 36s linear infinite; transform-origin: center; transform-box: fill-box; }
.dial-rotate-rev  { animation: rot 60s linear infinite reverse; transform-origin: center; transform-box: fill-box; }
@keyframes rot { to { transform: rotate(360deg); } }

/* Dial center readout */
.dial-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; z-index: 2;
}
.dial-temp {
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: clamp(48px, 6vh, 78px); line-height: 1; color: var(--cy);
  text-shadow: 0 0 18px rgba(var(--cy-glow), 0.7), 0 0 40px rgba(var(--cy-glow), 0.3);
  letter-spacing: -0.04em; position: relative;
}
.dial-temp .deg {
  position: absolute; right: -18px; top: 4px;
  font-size: clamp(14px, 1.8vh, 22px); color: var(--cy2); font-weight: 500;
}
.dial-feels {
  margin-top: 4px;
  font-family: 'Chakra Petch', sans-serif; font-size: 11px; font-weight: 500;
  color: var(--t-md); letter-spacing: 0.14em; text-transform: uppercase;
}
.dial-feels b { color: var(--cy); font-weight: 700; }
.dial-cond {
  margin-top: 5px;
  font-family: 'Chakra Petch', sans-serif; font-weight: 600;
  font-size: 11px; color: var(--t-hi); letter-spacing: 0.18em; text-transform: uppercase;
}

/* Dial corner labels */
.dial-label {
  position: absolute;
  font-family: 'Chakra Petch', sans-serif; font-size: 9px; font-weight: 600;
  color: var(--cy); letter-spacing: 0.16em; text-transform: uppercase;
  pointer-events: none;
}
.dial-label.tl { top: 6px; left: 6px; }
.dial-label.tr { top: 6px; right: 6px; text-align: right; }
.dial-label.bl { bottom: 6px; left: 6px; }
.dial-label.br { bottom: 6px; right: 6px; text-align: right; }
.dial-label .v {
  color: var(--cy2); font-size: 11px; display: block;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  letter-spacing: 0.04em; margin-top: 2px; text-transform: none;
}
.dial-label .v.amber { color: var(--amber); }
.dial-label .v.green { color: var(--green); }

/* Hi/lo band */
.hilo-band {
  margin: 0 12px 10px;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 10px; flex-shrink: 0;
}
.hilo-band .lo, .hilo-band .hi {
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: clamp(13px, 1.4vh, 16px); line-height: 1;
}
.hilo-band .lo { color: var(--cold); text-shadow: 0 0 8px rgba(92,179,255,0.4); }
.hilo-band .hi { color: var(--hot);  text-shadow: 0 0 8px rgba(255,112,80,0.4); }
.hilo-band .lo small, .hilo-band .hi small {
  display: block; font-size: 8px; color: var(--t-lo); letter-spacing: 0.12em;
  margin-top: 2px; text-transform: uppercase;
}
.hilo-track {
  position: relative; height: 5px;
  background: rgba(var(--cy-glow), 0.08);
  border: 1px solid rgba(var(--cy-glow), 0.18);
}
.hilo-track::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--cold), var(--cy), var(--amber), var(--hot));
  opacity: 0.6;
}
.hilo-marker {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 9px; height: 9px; background: var(--cy);
  border: 1.5px solid var(--bg-0); border-radius: 50%;
  box-shadow: 0 0 8px var(--cy); z-index: 1;
}

/* backward-compat aliases */
.hilo-track { } /* already defined above */
#cc-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 9px; height: 9px; background: var(--cy); border: 1.5px solid var(--bg-0); border-radius: 50%; box-shadow: 0 0 8px var(--cy); z-index: 1; }

/* Vitals grid */
.vitals {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
}
.vital {
  position: relative; padding: 7px 10px 8px;
  border-right: 1px solid rgba(var(--cy-glow), 0.12);
  border-top: 1px solid rgba(var(--cy-glow), 0.12);
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.vital:nth-child(3n) { border-right: 0; }
.vital-label {
  font-family: 'Chakra Petch', sans-serif; font-size: 8px; font-weight: 500;
  color: var(--t-lo); letter-spacing: 0.16em; text-transform: uppercase;
  display: flex; align-items: center; gap: 4px;
}
.vital-label .dot { width: 4px; height: 4px; background: var(--cy); flex-shrink: 0; }
.vital-val { display: flex; align-items: baseline; gap: 3px; }
.vital-val .v {
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: clamp(14px, 1.5vh, 19px); color: var(--t-hi); line-height: 1;
  letter-spacing: -0.01em;
}
.vital-val .u {
  font-family: 'Chakra Petch', sans-serif; font-size: 9px; font-weight: 500;
  color: var(--t-lo); letter-spacing: 0.04em;
}
.vital-meter { height: 3px; background: rgba(var(--cy-glow), 0.1); }
.vital-meter .f {
  height: 100%; background: var(--cy); box-shadow: 0 0 6px var(--cy); transition: width 0.5s;
}
.vital.warn .vital-meter .f { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.vital.warn .vital-val .v { color: var(--amber); }
.vital.crit .vital-val .v { color: var(--red); }

/* Summary blurb (kept for backward compat) */
.cc-summary {
  margin: 4px 10px; padding: 6px 8px;
  background: rgba(var(--cy-glow), 0.04);
  border-left: 2px solid var(--cy);
  font-size: 11px; line-height: 1.4; color: var(--t-md);
  flex-shrink: 0;
}
.cc-summary::before {
  content: 'SUMMARY'; display: block;
  font-size: 8px; font-weight: 700;
  color: var(--cy); letter-spacing: 0.18em; margin-bottom: 3px;
}

/* ── CENTER COLUMN: Map ── */
.map-panel {
  position: relative; padding: 0; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #061826 0%, #03080f 70%);
}
.map-panel #radar-map { position: absolute; inset: 0; }

/* Map overlays */
.hud-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 401; }
.hud-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(var(--cy-glow), 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--cy-glow), 0.12) 1px, transparent 1px);
  background-size: 80px 80px;
}
.hud-corner { position: absolute; width: 26px; height: 26px; border-color: var(--cy); border-style: solid; }
.hud-corner.tl { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.hud-corner.tr { top: 8px; right: 8px; border-width: 2px 2px 0 0; }
.hud-corner.bl { bottom: 8px; left: 8px; border-width: 0 0 2px 2px; }
.hud-corner.br { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }

/* coord readout */
.hud-coord {
  position: absolute; bottom: 14px; left: 14px;
  font-family: 'Chakra Petch', sans-serif; font-size: 10px; font-weight: 500;
  color: var(--cy); letter-spacing: 0.1em;
  z-index: 410; padding: 6px 10px;
  background: rgba(3,6,11,0.85);
  border: 1px solid rgba(var(--cy-glow), 0.3);
  border-left: 2px solid var(--cy);
  backdrop-filter: blur(6px);
}

/* scale bar */
.hud-scale {
  position: absolute; bottom: 14px; right: 14px;
  font-family: 'Chakra Petch', sans-serif; font-size: 10px; font-weight: 600;
  color: var(--cy); letter-spacing: 0.1em;
  z-index: 410; padding: 6px 10px;
  background: rgba(3,6,11,0.85);
  border: 1px solid rgba(var(--cy-glow), 0.3);
  backdrop-filter: blur(6px);
}
.hud-scale::before {
  content: ''; display: block; height: 2px; width: 60px;
  background: var(--cy); margin-bottom: 3px;
}

/* Layer pills (on map) */
.map-head {
  position: absolute; top: 10px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center;
  z-index: 410; pointer-events: auto;
}
.layer-pills {
  display: flex; gap: 2px;
  padding: 4px;
  background: rgba(3,6,11,0.82);
  border: 1px solid rgba(var(--cy-glow), 0.3);
  backdrop-filter: blur(6px);
}
.layer-pill {
  font-family: 'Chakra Petch', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; padding: 4px 10px;
  color: var(--t-lo); border: 1px solid transparent;
  background: transparent; cursor: pointer;
  text-transform: uppercase; transition: all 0.15s;
}
.layer-pill:hover { color: var(--cy); }
.layer-pill.on {
  color: var(--cy); background: rgba(var(--cy-glow), 0.18);
  border-color: var(--cy); box-shadow: 0 0 8px rgba(var(--cy-glow), 0.3);
}
.layer-pill .dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyd); margin-right: 4px; vertical-align: middle;
}
.layer-pill.on .dot { background: var(--cy); box-shadow: 0 0 5px var(--cy); }

/* Compass (on map) */
.compass {
  position: absolute; top: 54px; right: 14px;
  width: 76px; height: 76px;
  border: 1px solid rgba(var(--cy-glow), 0.4);
  border-radius: 50%;
  background: rgba(3,6,11,0.82);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  font-family: 'Chakra Petch', sans-serif; font-size: 9px; font-weight: 600;
  color: var(--cy); z-index: 410; letter-spacing: 0.1em;
}
.compass::before, .compass::after {
  content: ''; position: absolute; border: 1px dashed rgba(var(--cy-glow), 0.2); border-radius: 50%;
}
.compass::before { inset: 6px; }
.compass::after  { inset: 14px; }
.compass .n, .compass .e, .compass .s, .compass .w { position: absolute; }
.compass .n { top: 4px; left: 50%; transform: translateX(-50%); }
.compass .s { bottom: 4px; left: 50%; transform: translateX(-50%); color: var(--t-lo); }
.compass .e { right: 6px; top: 50%; transform: translateY(-50%); color: var(--t-lo); }
.compass .w { left: 6px;  top: 50%; transform: translateY(-50%); color: var(--t-lo); }
.compass .needle {
  position: absolute; top: 8px; left: 50%;
  width: 1px; height: 24px; background: var(--amber);
  transform-origin: bottom center;
  transform: translateX(-50%);
  box-shadow: 0 0 4px var(--amber);
}
.compass .deg { font-size: 9px; color: var(--cy2); font-weight: 700; }

/* Reticle */
.reticle {
  position: absolute; top: 50%; left: 50%;
  width: clamp(100px, 18vh, 180px); height: clamp(100px, 18vh, 180px);
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 4;
}
.reticle svg { width: 100%; height: 100%; }

/* Leaflet customization */
.base-tile-layer .leaflet-tile { filter: hue-rotate(170deg) saturate(1.4) brightness(0.85) contrast(1.05); }
.sat-tiles { }
.radar-tiles { mix-blend-mode: screen; filter: brightness(1.2) saturate(1.4); }
.night-tiles { }
.labels-tiles { filter: hue-rotate(170deg) brightness(1.6) contrast(0.9) saturate(0.5); opacity: 0.5; mix-blend-mode: screen; }
.leaflet-tile { opacity: 1 !important; }
.leaflet-container { background: var(--bg-0); font-family: 'Chakra Petch', sans-serif; }
.leaflet-control-zoom a, .leaflet-control-custom a {
  background: rgba(3,6,11,0.9) !important; color: var(--cy) !important;
  border: 1px solid rgba(var(--cy-glow), 0.4) !important; border-radius: 0 !important;
  font-family: 'Chakra Petch', sans-serif !important;
  width: 32px !important; height: 32px !important; line-height: 30px !important;
  box-shadow: 0 0 10px rgba(var(--cy-glow), 0.2);
}
.leaflet-control-zoom a:hover, .leaflet-control-custom a:hover {
  background: rgba(var(--cy-glow), 0.15) !important; box-shadow: 0 0 14px rgba(var(--cy-glow), 0.4) !important;
}
.leaflet-bottom.leaflet-right { margin-bottom: 16px; margin-right: 16px; }
.leaflet-control-attribution {
  background: rgba(3,6,11,0.7) !important; color: var(--t-lo) !important;
  font-family: 'Chakra Petch', sans-serif !important; font-size: 9px !important;
  padding: 2px 6px !important;
}
.leaflet-control-attribution a { color: var(--cy) !important; }
.leaflet-popup-content-wrapper {
  background: rgba(3,6,11,0.95) !important; color: var(--t-hi) !important;
  border: 1px solid rgba(var(--cy-glow), 0.4) !important; border-radius: 0 !important;
  box-shadow: 0 0 16px rgba(var(--cy-glow), 0.3) !important;
  font-family: 'Chakra Petch', sans-serif !important;
}
.leaflet-popup-tip { background: rgba(3,6,11,0.95) !important; }
.leaflet-popup-content { font-size: 11px !important; margin: 8px 10px !important; }
.leaflet-popup-content strong { color: var(--cy); }
.leaflet-popup-close-button { color: var(--cy) !important; }

/* Mile-zoom control */
.mile-zoom {
  display: flex; flex-direction: column;
  background: rgba(3,6,11,0.9) !important;
  border: 1px solid rgba(var(--cy-glow), 0.4) !important;
  border-radius: 0 !important; overflow: hidden;
}
.mile-zoom a {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: rgba(3,6,11,0.9) !important; color: var(--cy) !important;
  border: 0 !important; border-bottom: 1px solid rgba(var(--cy-glow), 0.2) !important;
  border-radius: 0 !important; font-size: 18px; cursor: pointer; text-decoration: none;
}
.mile-zoom a:hover { background: rgba(var(--cy-glow), 0.15) !important; }
.mile-zoom-label { padding: 4px 0; text-align: center; font-family: 'Chakra Petch', sans-serif; font-size: 9px; color: var(--cy); letter-spacing: 0.08em; border-bottom: 1px solid rgba(var(--cy-glow), 0.2); white-space: nowrap; }
.mile-zoom-recenter { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: rgba(3,6,11,0.9) !important; color: var(--cy) !important; border: 0 !important; border-radius: 0 !important; font-size: 16px; cursor: pointer; text-decoration: none; }
.mile-zoom-recenter:hover { background: rgba(var(--cy-glow), 0.15) !important; }

/* ── RIGHT COLUMN ── */
.right-col {
  display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto; scrollbar-width: none; min-height: 0;
}
.right-col::-webkit-scrollbar { display: none; }

/* 7-day forecast */
.fc-list { flex: 1; display: flex; flex-direction: column; }
.fc-row {
  display: grid;
  grid-template-columns: 52px 26px 62px 1fr 28px;
  align-items: center; gap: 6px;
  padding: 5px 12px;
  border-bottom: 1px dotted rgba(var(--cy-glow), 0.1);
  font-size: 11px; position: relative;
}
.fc-row:last-child { border-bottom: 0; }
.fc-row.today { background: rgba(var(--cy-glow), 0.06); }
.fc-row.today::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--cy); box-shadow: 0 0 6px var(--cy);
}
.fc-day {
  font-family: 'Chakra Petch', sans-serif; font-size: 11px; font-weight: 700;
  color: var(--cy); letter-spacing: 0.08em;
}
.fc-day small { display: block; color: var(--t-lo); font-size: 9px; font-weight: 500; letter-spacing: 0.04em; margin-top: 1px; }
.fc-icon { width: 22px; height: 22px; display: grid; place-items: center; color: var(--cy2); font-size: 16px; }
.fc-cond {
  font-family: 'Chakra Petch', sans-serif; font-size: 9px; font-weight: 600;
  color: var(--t-md); letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fc-bar {
  position: relative; height: 4px;
  background: rgba(var(--cy-glow), 0.08);
}
.fc-bar .span {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(to right, var(--cold), var(--cy), var(--amber), var(--hot));
  opacity: 0.7;
}
.fc-bar .lo, .fc-bar .hi {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  font-family: 'Chakra Petch', sans-serif; font-size: 10px; font-weight: 700;
  background: rgba(3,6,11,0.9); padding: 1px 3px; white-space: nowrap;
}
.fc-bar .lo { color: var(--cold); }
.fc-bar .hi { color: var(--hot); }
.fc-pop {
  font-family: 'Chakra Petch', sans-serif; font-size: 10px; font-weight: 600;
  color: var(--cy2); text-align: right; letter-spacing: 0.02em;
}
.fc-pop.dim { color: var(--t-dim); }

/* Alerts */
.alert {
  padding: 8px 12px;
  background: rgba(255, 77, 92, 0.06);
  border-top: 1px solid rgba(255, 77, 92, 0.2);
  border-left: 3px solid var(--red);
  font-size: 11px;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 10px; align-items: center;
}
.alert + .alert { border-top: 1px solid rgba(255, 77, 92, 0.15); }
.alert.amber { background: rgba(255, 154, 61, 0.06); border-left-color: var(--amber); }
.alert .a-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: rgba(255, 77, 92, 0.12);
  border: 1px solid var(--red); color: var(--red);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  font-size: 11px; font-weight: 900; padding-top: 6px;
}
.alert.amber .a-icon { background: rgba(255,154,61,0.12); border-color: var(--amber); color: var(--amber); }
.alert .a-body { line-height: 1.3; min-width: 0; }
.alert .a-title {
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: 11px; color: var(--red); letter-spacing: 0.1em; text-transform: uppercase;
}
.alert.amber .a-title { color: var(--amber); }
.alert .a-sub {
  font-family: 'Chakra Petch', sans-serif; font-size: 10px; font-weight: 500;
  color: var(--t-md); letter-spacing: 0.03em; margin-top: 2px;
}
.alert .a-time {
  font-family: 'Chakra Petch', sans-serif; font-size: 9px; font-weight: 600;
  color: var(--t-lo); letter-spacing: 0.12em; text-align: right;
  white-space: nowrap; text-transform: uppercase;
}
.alert .a-time b { display: block; color: var(--cy); font-size: 11px; font-weight: 700; }
/* No-alerts message */
.no-alerts-msg { padding: 10px 14px; font-size: 11px; color: var(--t-lo); font-family: 'Chakra Petch', sans-serif; }

/* Loadout */
.loadout-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.loadout-list { list-style: none; padding: 0; overflow-y: auto; }
.loadout-list li {
  display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px dotted rgba(var(--cy-glow), 0.1);
  font-size: 11px; color: var(--t-hi);
}
.loadout-list li:last-child { border-bottom: 0; }
.loadout-icon {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 1px solid rgba(var(--cy-glow), 0.35);
  color: var(--cy); font-family: 'Chakra Petch', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  background: rgba(var(--cy-glow), 0.05);
}
.loadout-name { font-weight: 500; font-family: 'Chakra Petch', sans-serif; letter-spacing: 0.02em; }
.loadout-conf {
  font-family: 'Chakra Petch', sans-serif; font-size: 9px; font-weight: 500;
  color: var(--t-lo); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.loadout-conf b { color: var(--green); font-weight: 700; }

/* ── BOTTOM STRIP ── */
.hud-bottom {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(4px, 0.5vw, 8px);
  flex-shrink: 0;
  height: clamp(160px, 19vh, 210px);
}

/* Hourly bar chart */
.hourly-panel { display: flex; flex-direction: column; overflow: hidden; }
.hourly {
  display: flex; align-items: flex-end;
  flex: 1; padding: 10px 10px 4px;
  gap: 3px; position: relative; overflow: hidden;
}
.hourly .h {
  position: relative; flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  height: 100%;
}
.hourly .bar-stack {
  width: 100%; flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative;
}
.hourly .bar {
  width: 100%;
  background: linear-gradient(to top, rgba(var(--cy-glow), 0.7), rgba(var(--cy-glow), 0.15));
  border-top: 1.5px solid var(--cy);
  box-shadow: 0 0 6px rgba(var(--cy-glow), 0.25);
}
.hourly .bar.warm { background: linear-gradient(to top, rgba(255,154,61,0.6), rgba(255,154,61,0.1)); border-top-color: var(--amber); box-shadow: 0 0 6px rgba(255,154,61,0.3); }
.hourly .bar.cool { background: linear-gradient(to top, rgba(92,179,255,0.55), rgba(92,179,255,0.1)); border-top-color: var(--cold); }
.hourly .bar.rain {
  position: absolute; bottom: 0; width: 60%; left: 20%;
  background: repeating-linear-gradient(45deg, rgba(125,249,255,0.7) 0 2px, transparent 2px 4px);
  border-top: 1px solid var(--cy2); pointer-events: none;
}
.hourly .h-time {
  font-family: 'Chakra Petch', sans-serif; font-size: 8px; font-weight: 600;
  color: var(--t-lo); letter-spacing: 0.04em; white-space: nowrap;
}
.hourly .h.now .h-time { color: var(--amber); font-weight: 700; }
.hourly .h-temp {
  position: absolute; top: -2px; transform: translateY(-100%);
  font-family: 'Chakra Petch', sans-serif; font-size: 9px; font-weight: 700;
  color: var(--t-hi); letter-spacing: 0;
  pointer-events: none;
  text-shadow: 0 0 6px rgba(0,0,0,0.8);
}
.hourly .h.warm-text .h-temp { color: var(--amber); }
.hourly .h.cool-text .h-temp { color: var(--cold); }
.hourly .now-line {
  position: absolute; top: 10px; bottom: 18px;
  width: 1px; background: var(--amber);
  box-shadow: 0 0 6px var(--amber); pointer-events: none;
}

/* Timeline panel */
.timeline-panel { display: flex; flex-direction: column; overflow: hidden; }
.tl-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(var(--cy-glow), 0.1);
  font-family: 'Chakra Petch', sans-serif; font-size: 10px; font-weight: 600;
  color: var(--t-md); letter-spacing: 0.14em; text-transform: uppercase;
  flex-shrink: 0;
}
.tl-play {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: rgba(var(--cy-glow), 0.12);
  border: 1px solid var(--cy);
  color: var(--cy); font-size: 11px; cursor: pointer;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  flex-shrink: 0;
}
.tl-speed { display: flex; gap: 3px; }
.tl-spd-btn {
  font-family: 'Chakra Petch', sans-serif; font-size: 9px; font-weight: 700;
  padding: 3px 6px; cursor: pointer; letter-spacing: 0.04em;
  background: rgba(var(--cy-glow), 0.05); border: 1px solid rgba(var(--cy-glow), 0.25);
  color: var(--t-lo);
}
.tl-spd-btn.active { background: rgba(var(--cy-glow), 0.18); border-color: var(--cy); color: var(--cy); }
.tl-spd-btn:hover  { background: rgba(var(--cy-glow), 0.12); color: var(--cy); }
.tl-frame { font-family: 'Chakra Petch', sans-serif; font-size: 11px; color: var(--cy); letter-spacing: 0.06em; }
.tl-frame .tl-mode {
  color: var(--cy); margin-left: 10px;
  font-size: 10px; letter-spacing: 0.1em; padding: 2px 7px;
  border: 1px solid rgba(var(--cy-glow), 0.4);
}

/* Unified timeline graph */
.tl-graph {
  position: relative; flex: 1; padding: 10px 12px 6px;
  display: flex; flex-direction: column; min-height: 0;
}
.tl-svg { width: 100%; flex: 1; display: block; min-height: 0; }
.tl-track {
  position: relative; height: 20px; margin-top: 4px; flex-shrink: 0;
  background: rgba(var(--cy-glow), 0.04);
  border: 1px solid rgba(var(--cy-glow), 0.18);
  cursor: ew-resize; touch-action: none;
}
.tl-ticks { position: absolute; inset: 0; pointer-events: none; }
.tl-tick {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  font-family: 'Chakra Petch', sans-serif; font-size: 9px;
  color: rgba(var(--cy-glow), 0.6); letter-spacing: 0.04em; white-space: nowrap;
}
.tl-tick.now { color: var(--amber); font-weight: 700; }

/* Scrub lines */
.tl-scrub-line {
  position: absolute; top: 0; bottom: 0;
  width: 2px; background: var(--cy);
  box-shadow: 0 0 10px var(--cy), 0 0 4px var(--cy2);
  pointer-events: none; z-index: 18; transform: translateX(-1px);
}
.tl-scrub-line::before {
  content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; background: var(--cy); border-radius: 50%; box-shadow: 0 0 10px var(--cy);
}
.tl-now-line-full, .tl-now-line {
  position: absolute; top: 0; bottom: 0;
  width: 2px; background: var(--amber);
  box-shadow: 0 0 6px var(--amber);
  pointer-events: none; z-index: 17; transform: translateX(-1px); opacity: 0.85;
}
.tl-now-line { height: 20px; bottom: auto; }

/* Scrub tooltip */
.chart-scrub-val {
  position: absolute;
  font-family: 'Chakra Petch', sans-serif; font-size: 9px; font-weight: 700;
  pointer-events: none; z-index: 25;
  background: rgba(3,6,11,0.85); padding: 1px 3px;
  white-space: nowrap; letter-spacing: 0.04em; line-height: 1.2;
}

/* tl-content wrapper (backward compat) */
.tl-content { position: relative; }

/* backward-compat charts-strip (kept but inside tl-graph now) */
.charts-strip { display: none; }

/* ── MOBILE ── */
@media (max-width: 800px) {
  #hud-root { height: auto; overflow: visible; padding: 6px; }
  html, body { height: auto; overflow: auto; }
  #hud-app { gap: 8px; }
  .hud-main {
    grid-template-columns: 1fr;
    flex: none;
  }
  .cc-panel, .right-col { overflow-y: visible; }
  .map-panel { aspect-ratio: 4/3; height: auto; min-height: 280px; }
  .hud-bottom { height: auto; grid-template-columns: 1fr; }
  .hourly-panel { height: 160px; }
  .timeline-panel { height: 160px; }
}