/* Zenith LOS Scout. Default look "Signal Beacon"; [data-theme="night"] is "Night Ops" (red light for night vision). */
:root{
  /* Signal Beacon */
  --bg:#050C14; --panel:#0F1B26; --panel2:#132230; --field:#08121C; --line:#1F3444; --line2:#2A4558;
  --text:#E6F7FB; --text2:#C3DCE4; --muted:#8AA6B2; --dim:#5F7D8A;
  --accent:#22D3EE; --accent-ink:#03202A; --accent-soft:rgba(34,211,238,.14); --head:#7DE8F7;
  --ok:#10D9A8; --ok-soft:rgba(16,217,168,.16); --warn:#FBBF24; --warn-soft:rgba(251,191,36,.15); --bad:#FF4D5E; --bad-soft:rgba(255,77,94,.16);
  --a:#22D3EE; --b:#E6F7FB; --pin-ink:#050C14; --pin-ring:#050C14;
  --bar:rgba(5,12,20,.93); --fab:rgba(15,27,38,.94); --btn:#16293A; --shadow:rgba(0,0,0,.55); --glow:rgba(34,211,238,.35);
  --caveat-bg:#1C1708; --caveat-line:#4A3A10; --caveat-text:#F6D98A;
  /* profile chart */
  --c-grid:#183040; --c-tick:#7C98A4; --c-terr1:#1D4257; --c-terr2:#0A1823; --c-terr-line:#3E7D96;
  --c-fz:#10D9A8; --c-fz-fill:rgba(16,217,168,.16); --c-f60:rgba(16,217,168,.55); --c-line:#22D3EE; --c-cursor:rgba(230,247,251,.7); --c-dot-ring:#E6F7FB;
  --top:calc(60px + env(safe-area-inset-top)); --peek:150px;
  color-scheme: dark;
}
[data-theme="night"]{
  /* Night Ops: red / amber on black, nothing blue or white */
  --bg:#110808; --panel:#170A0A; --panel2:#1E0C0C; --field:#0C0505; --line:#3A1111; --line2:#5A1A1B;
  --text:#E3A39C; --text2:#D08A83; --muted:#A4625C; --dim:#7A3F3B;
  --accent:#ED2A2E; --accent-ink:#110808; --accent-soft:rgba(237,42,46,.14); --head:#F99F38;
  --ok:#F99F38; --ok-soft:rgba(249,159,56,.14); --warn:#FF6B3D; --warn-soft:rgba(255,107,61,.14); --bad:#ED2A2E; --bad-soft:rgba(237,42,46,.18);
  --a:#ED2A2E; --b:#F99F38; --pin-ink:#110808; --pin-ring:#110808;
  --bar:rgba(17,8,8,.95); --fab:rgba(23,10,10,.95); --btn:#2A0E0F; --shadow:rgba(0,0,0,.7); --glow:rgba(237,42,46,.35);
  --caveat-bg:#1E0D07; --caveat-line:#4D2410; --caveat-text:#F99F38;
  --c-grid:#2E0E0E; --c-tick:#A4625C; --c-terr1:#7A1416; --c-terr2:#220909; --c-terr-line:#B0282B;
  --c-fz:#F99F38; --c-fz-fill:rgba(249,159,56,.13); --c-f60:rgba(249,159,56,.5); --c-line:#ED2A2E; --c-cursor:rgba(227,163,156,.7); --c-dot-ring:#110808;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:16px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%;overflow:hidden}
button,select,input{font:inherit;color:inherit}
a{color:var(--accent)}
::selection{background:var(--accent);color:var(--accent-ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ic{width:20px;height:20px;flex:none;display:inline-block;vertical-align:-4px}

.topbar{position:fixed;z-index:1000;top:0;left:0;right:0;padding:calc(8px + env(safe-area-inset-top)) 10px 8px;
  display:flex;gap:10px;align-items:center;background:var(--bar);border-bottom:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:8px;white-space:nowrap}
.logo{width:32px;height:32px;border-radius:8px;flex:none;box-shadow:0 0 0 1px var(--line2),0 0 14px var(--glow)}
.logo-r{display:none}
[data-theme="night"] .logo-n{display:none} [data-theme="night"] .logo-r{display:block}
.wm{font-weight:800;font-size:16px;letter-spacing:-.01em;color:var(--text);max-width:9.6em;overflow:hidden;text-overflow:ellipsis}
.wm em{font-style:normal;color:var(--accent);text-shadow:0 0 12px var(--glow)}
[data-theme="night"] .wm{text-transform:uppercase;letter-spacing:.02em;font-size:14px;max-width:11.5em;color:var(--accent)}
[data-theme="night"] .wm em{color:var(--head);text-shadow:none}
.search{flex:1;display:flex;min-width:0;background:var(--field);border:1px solid var(--line2);border-radius:12px;overflow:hidden}
.search:focus-within{border-color:var(--accent)}
.search input{flex:1;min-width:0;border:0;background:transparent;padding:10px 10px;font-size:16px;height:44px;outline:0}
.search input::placeholder{color:var(--dim)}
.search button{border:0;background:transparent;width:44px;height:44px;display:grid;place-items:center;color:var(--accent);cursor:pointer}
.results{position:absolute;top:100%;left:8px;right:8px;background:var(--panel);border:1px solid var(--line2);border-radius:12px;margin-top:4px;max-height:50vh;overflow:auto;box-shadow:0 10px 30px var(--shadow)}
.results button{display:block;width:100%;text-align:left;padding:12px 14px;border:0;border-bottom:1px solid var(--line);background:transparent;font-size:15px;min-height:48px}
.results button:last-child{border-bottom:0}

#map{position:fixed;top:var(--top);left:0;right:0;bottom:0;background:var(--bg)}
.leaflet-container{font:inherit;background:var(--bg)}
.leaflet-control-attribution{font-size:10px;background:var(--bar)!important;color:var(--muted)}
.leaflet-control-attribution a{color:var(--text2)}
.leaflet-top{top:4px}
.leaflet-bar{border:1px solid var(--line2)!important;box-shadow:0 4px 14px var(--shadow)!important}
.leaflet-bar a,.leaflet-bar a:hover{background:var(--fab);color:var(--accent);border-color:var(--line)}
/* Night: dim and redden the map so it never blasts white at night */
[data-theme="night"] .leaflet-tile-pane{filter:invert(1) grayscale(1) brightness(.62) contrast(1.35) sepia(1) saturate(6) hue-rotate(-42deg) brightness(.78)}
[data-theme="night"] #map[data-layer="satellite"] .leaflet-tile-pane{filter:grayscale(1) brightness(.5) contrast(1.15) sepia(1) saturate(5) hue-rotate(-42deg) brightness(.85)}

.mapctl{position:fixed;z-index:900;top:calc(var(--top) + 8px);right:8px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.fab{min-height:44px;padding:0 14px;border-radius:22px;border:1px solid var(--line2);background:var(--fab);color:var(--text);font-weight:600;font-size:15px;box-shadow:0 4px 14px var(--shadow);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.fab .ic{color:var(--accent);width:18px;height:18px}
select.fab{appearance:none;-webkit-appearance:none;padding:0 32px 0 14px;
  background:var(--fab) no-repeat right 12px center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}

.pin{width:34px;height:34px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:grid;place-items:center;border:3px solid var(--pin-ring);box-shadow:0 0 0 2px currentColor,0 0 16px var(--glow),0 4px 10px rgba(0,0,0,.6)}
.pin b{transform:rotate(45deg);font-size:16px;font-weight:900;color:var(--pin-ink)}
.pin.a{background:var(--a);color:var(--a)} .pin.b{background:var(--b);color:var(--b)}
.obst{width:18px;height:18px;border-radius:50%;background:var(--bad);border:3px solid var(--pin-ring);box-shadow:0 0 0 2px var(--bad),0 0 0 7px var(--bad-soft)}
.cursor-dot{width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--pin-ring);box-shadow:0 0 0 2px var(--accent)}

.sheet{position:fixed;z-index:950;left:0;right:0;bottom:0;background:var(--panel);border-top:1px solid var(--line2);border-radius:18px 18px 0 0;
  box-shadow:0 -10px 30px var(--shadow);display:flex;flex-direction:column;transition:height .25s ease;max-width:720px;margin:0 auto}
.sheet[data-state="peek"]{height:var(--peek)}
.sheet[data-state="half"]{height:52%}
.sheet[data-state="full"]{height:calc(100% - var(--top) - 6px)}
.handle{flex:none;height:28px;border:0;background:transparent;display:grid;place-items:center;width:100%;cursor:pointer}
.handle span{width:44px;height:5px;border-radius:3px;background:var(--line2)}
.sheet-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 12px calc(16px + env(safe-area-inset-bottom));overscroll-behavior:contain}

.hint{padding:6px 4px 10px;color:var(--muted);font-size:15px}
.hint b{color:var(--accent)}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px;margin:0 0 10px}
.card h2{font-size:13px;margin:0 0 10px;color:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:.08em;display:flex;justify-content:space-between;align-items:center;gap:8px}
.card h2 .ht{display:flex;align-items:center;gap:8px}
.card h2 .ic{width:18px;height:18px;color:var(--accent)}
.card h2 .small{text-transform:none;letter-spacing:0;font-weight:500}
.small{font-size:13px;color:var(--muted);font-weight:400}
b.a{color:var(--a)} b.b{color:var(--b)}

.result .status{font-size:20px;font-weight:800;line-height:1.25;display:flex;gap:10px;align-items:flex-start}
.result .status .si{flex:none;width:26px;height:26px;margin-top:-1px}
.result.clear .status{color:var(--ok)} .result.fresnel .status{color:var(--warn)} .result.blocked .status{color:var(--bad)} .result.loading .status{color:var(--text2)}
.result .status .st{color:var(--text)}
.result.clear{border-color:var(--ok);background:linear-gradient(180deg,var(--ok-soft),transparent 75%),var(--panel2)}
.result.fresnel{border-color:var(--warn);background:linear-gradient(180deg,var(--warn-soft),transparent 75%),var(--panel2)}
.result.blocked{border-color:var(--bad);background:linear-gradient(180deg,var(--bad-soft),transparent 75%),var(--panel2)}
.result.loading{opacity:.85}
.result.loading .si{animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.result .detail{color:var(--text2);margin:6px 0 10px;font-size:15px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.stat{background:var(--field);border:1px solid var(--line);border-radius:10px;padding:6px 9px}
.stat .k{font-size:12px;color:var(--muted)}
.stat .v{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}

table.need{width:100%;border-collapse:collapse;font-size:15px}
table.need th{white-space:nowrap;font-size:12px;color:var(--muted);text-align:right;font-weight:600;padding:2px 4px 6px}
table.need th:first-child{text-align:left}
table.need td{padding:8px 4px;border-top:1px solid var(--line);text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
table.need td:first-child{text-align:left;font-weight:500;color:var(--text2)}
table.need td.ok{color:var(--ok)}

.profile{width:100%;height:250px;touch-action:none;user-select:none;-webkit-user-select:none}
.profile svg{display:block;width:100%;height:100%}
.readout{font-size:13px;color:var(--muted);min-height:1.4em;margin-top:4px;font-variant-numeric:tabular-nums}
.legend{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--muted);margin-top:6px;align-items:center}
.lg{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:2px;vertical-align:middle}
.lg.terrain{background:linear-gradient(var(--c-terr1),var(--c-terr2));border-top:2px solid var(--c-terr-line)} .lg.line{background:var(--c-line);height:3px} .lg.fz{background:var(--c-fz-fill);border:1px dashed var(--c-fz)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2 label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.grid2 label>span{display:block}
.grid2 label.full{grid-column:1/-1}
.grid2 select,.grid2 input{height:46px;border-radius:10px;border:1px solid var(--line2);background:var(--field);padding:0 10px;font-size:16px;color:var(--text);width:100%;outline:0}
.grid2 select:focus,.grid2 input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.grid2 input::placeholder{color:var(--dim)}
.grid2 select{appearance:none;-webkit-appearance:none;padding-right:30px;
  background:var(--field) no-repeat right 10px center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
[data-theme="night"] .grid2 select,[data-theme="night"] select.fab{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ED2A2E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
select option{background:var(--panel);color:var(--text)}
.row{display:flex;gap:8px;margin-top:10px}
.row .btn{flex:1}
.btn{min-height:48px;border-radius:12px;border:1px solid var(--line2);background:var(--btn);color:var(--text);font-weight:700;font-size:16px;padding:0 12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn .ic{width:18px;height:18px;color:var(--accent)}
.btn.ghost{background:transparent}
.btn.primary{width:100%;margin-top:10px;background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:800;box-shadow:0 0 18px var(--glow)}
.btn:active{transform:scale(.98)}
.recent{list-style:none;margin:0;padding:0}
.recent li button{width:100%;text-align:left;border:0;border-top:1px solid var(--line);background:transparent;padding:10px 2px;min-height:52px;font-size:15px;cursor:pointer}
.recent li:first-child button{border-top:0}
.recent .sub{display:block;font-size:12px;color:var(--muted);padding-left:18px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:1px;background:var(--muted)}
.dot.clear{background:var(--ok);box-shadow:0 0 8px var(--ok)} .dot.fresnel{background:var(--warn)} .dot.blocked{background:var(--bad)}
.caveat{font-size:13px;color:var(--caveat-text);background:var(--caveat-bg);border:1px solid var(--caveat-line);border-radius:12px;padding:10px 12px;margin:0 0 10px}
.credits{font-size:11px;color:var(--dim);margin:0 0 6px}
.credits a{color:var(--muted)}
.toast{position:fixed;z-index:2000;left:50%;transform:translateX(-50%);top:calc(var(--top) + 12px);background:var(--panel2);color:var(--text);border:1px solid var(--accent);padding:10px 16px;border-radius:12px;font-size:15px;box-shadow:0 6px 20px var(--shadow);max-width:90vw}
@media (min-width:900px){ .sheet{left:12px;right:auto;width:420px;bottom:12px;border-radius:18px;border:1px solid var(--line2)} .sheet[data-state="full"]{height:calc(100% - var(--top) - 24px)} }
@media (max-width:360px){ .wm{display:none} }
