/* The look of every ArkSignal map page: the full-window map, the left tools panel with folding sections, the list, the details card, the legend. The live (aircraft) map
   and the Weather Map both use it with the same markup and element names, so a new map (repeaters, mesh nodes, radiosondes...) gets the same layout by using them too. */
#lv{position:relative;isolation:isolate;z-index:0;height:calc(100vh - 148px - var(--sub,0px));height:calc(100dvh - 148px - var(--sub,0px));min-height:520px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--map-bg)}
#lvmap{position:absolute;inset:0}
.leaflet-container{background:var(--map-bg);font:inherit}
.leaflet-tile-pane{filter:var(--map-filter)}
.lv-panel{position:absolute;z-index:500;background:var(--card-bg);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#lv-left{position:absolute;z-index:500;top:12px;left:12px;bottom:12px;width:min(340px,calc(100% - 24px));display:flex;flex-direction:column;gap:10px;pointer-events:none}
#lv-left>.lv-panel{position:relative;pointer-events:auto}
#lv-tools{flex:0 0 auto;padding:12px;max-height:100%;overflow:auto}
#lv-tools input[type=text],#lv-tools input[type=number],#lv-tools select{width:100%;padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--input-bg);color:var(--text);font:inherit}
.lv-row{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.lv-row label{margin:0;color:var(--text);font-size:.85rem;display:flex;gap:6px;align-items:center;cursor:pointer}
.lv-row input[type=number]{width:96px!important}
#lv-hist{margin-top:8px;border:1px solid var(--line);border-radius:10px;background:var(--input-bg-soft);padding:6px 8px}
#lv-hist h6{margin:0 0 4px;color:var(--dim);font:600 .66rem Inter,sans-serif;text-transform:uppercase;letter-spacing:.1em}
#lv-hist a{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:4px 2px;color:var(--text);text-decoration:none;font-size:.8rem;border-top:1px solid var(--line)}
#lv-hist a:first-of-type{border-top:0}
#lv-hist a:hover{color:var(--acc)}
#lv-hist .m{color:var(--dim);font-size:.72rem}
.lv-sub{color:var(--dim);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;margin:12px 0 2px;font-weight:600}
#lv-list{top:12px;right:12px;bottom:12px;width:auto;min-width:300px;max-width:min(680px,55%);display:flex;flex-direction:column;overflow:hidden}
#lv-list header{padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
#lv-list header .btn.small{margin:0}
#lv-cols{display:none;grid-template-columns:1fr 1fr;gap:2px 10px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--input-bg)}
#lv-cols label{margin:0;display:flex;gap:6px;align-items:center;font-size:.82rem;color:var(--text);cursor:pointer;padding:2px 0}
#lv-rows{overflow:auto;flex:1}
#lv-tbl{width:100%;border-collapse:collapse;font:500 .78rem 'JetBrains Mono',monospace}
#lv-tbl th{position:sticky;top:0;background:var(--pop-bg);color:var(--dim);font:600 .68rem Inter,sans-serif;text-transform:uppercase;letter-spacing:.06em;padding:6px 8px;text-align:right;cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--line)}
#lv-tbl th:first-child,#lv-tbl td:first-child{text-align:left}
#lv-tbl td{padding:5px 8px;text-align:right;white-space:nowrap;border-bottom:1px solid rgba(120,160,210,.08)}
#lv-tbl tr.it{cursor:pointer}
#lv-tbl tr.it:hover td,#lv-tbl tr.sel td{background:rgba(62,230,168,.08)}
#lv-tbl td:first-child{font-weight:600}
#lv-tbl .lv-logo{--mk:20px;margin-right:4px}
#lv-card{flex:0 1 auto;min-height:0;overflow:auto;padding:14px;display:none}
#lv-card h3{margin:0;font:700 1.3rem 'JetBrains Mono',monospace}
#lv-card .sec{margin:12px -14px 4px;padding:3px 14px;background:rgba(62,230,168,.1);color:var(--acc);font:600 .7rem Inter,sans-serif;text-transform:uppercase;letter-spacing:.12em}
#lv-card .k{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:10px 0;font-size:.85rem}
#lv-card .k div:nth-child(odd){color:var(--dim)}
#c-extra .photo{margin-top:10px}
#c-extra .photo img{width:100%;border-radius:10px;display:block}
#c-extra .photo small{color:var(--dim);font-size:.7rem}
#c-extra .photo a{color:var(--acc2)}
.rt{display:flex;align-items:center;gap:10px;margin-top:10px;font:700 1.15rem 'JetBrains Mono',monospace}
.rt .arrow{color:var(--acc);flex:1;text-align:center;font-size:.9rem}
.rt small{display:block;font:500 .7rem Inter,sans-serif;color:var(--dim)}
.btn.neutral{border-color:var(--line);color:var(--dim);background:transparent}
#lv-card a,#lv-card button{font-size:.8rem}
.ac{position:relative;transition:transform .8s linear;filter:drop-shadow(0 0 2px rgba(0,0,0,.9))}
.ac svg{width:100%;height:100%;display:block}
.ac.sel{filter:drop-shadow(0 0 6px #fff)}
/* aircraft that match one of the signed-in visitor's alert rules: a gold ring */
.ac.watch:not(.sel)::before{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:2px solid #ffd54a;box-shadow:0 0 8px #ffd54a;animation:lvbeacon 2.6s ease-out infinite;pointer-events:none}
@media (prefers-reduced-motion:reduce){.ac.watch:not(.sel)::before{animation:none;opacity:.8}}
#lv-tbl tr.it.w td:first-child{box-shadow:inset 3px 0 #ffd54a}
#c-watch{margin-top:8px;padding:6px 10px;border-radius:10px;border:1px solid #ffd54a;background:rgba(255,213,74,.1);font-size:.8rem;display:none}
#c-watch a{color:#ffd54a}
.wxcat{display:inline-block;padding:0 7px;border-radius:999px;color:#04130d;font:700 .72rem Inter,sans-serif;margin-right:4px}
.mtr{font:500 .72rem 'JetBrains Mono',monospace;color:var(--dim);margin-top:4px;word-break:break-word}
/* the selected aircraft's beacon: a ring that pulses outward (a still ring when the device asks for less motion) */
.ac.sel::before{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2px solid var(--acc);box-shadow:0 0 10px var(--acc);animation:lvbeacon 1.8s ease-out infinite;pointer-events:none}
@keyframes lvbeacon{0%{transform:scale(.4);opacity:.95}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.ac.sel::before{animation:none;opacity:.7}}
#lv .leaflet-tooltip{--mk:calc(26px * var(--ls,1))}
.lv-arrow{margin-left:3px;color:var(--acc)}
#l-fields{display:none;grid-template-columns:1fr 1fr;gap:2px 10px;margin-top:6px}
#l-fields label{margin:0;display:flex;gap:6px;align-items:center;font-size:.82rem;color:var(--text);cursor:pointer}
.prog{height:6px;border-radius:3px;background:var(--line);margin-top:8px;overflow:hidden}
.prog i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.progtxt{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;color:var(--dim);font-size:.74rem;margin-top:4px}
#lvmap.dim .leaflet-tile-pane{filter:brightness(.55) saturate(.85)}
#lv-keys{position:fixed;inset:0;z-index:6000;align-items:center;justify-content:center;background:rgba(2,8,14,.62);padding:16px}
#lv-keys .keybox{position:relative;pointer-events:auto;max-width:460px;width:100%;max-height:90vh;overflow:auto;padding:16px 18px;background:var(--panel,#0e1824);border:1px solid var(--line);border-radius:14px}
#lv-keys header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
#lv-card .chart{margin:10px 0 0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:.74rem;color:var(--dim)}
#lv-card .chart svg{display:block;width:100%;height:64px;margin-top:4px}
#lv-card .how{margin:10px 0 0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:.8rem;line-height:1.4}
#lv-card .how b{display:block;font:600 .7rem Inter,sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--acc);margin-bottom:3px}
#lv-card .how.mlat{border-color:var(--acc2)}
#lv-card .how.mlat b{color:var(--acc2)}
#lv-card details.csec{margin:8px -14px 0}
#lv-card details.csec>summary{list-style:none;cursor:pointer;display:flex;gap:8px;align-items:center;padding:5px 14px;background:rgba(62,230,168,.1);color:var(--acc);font:600 .7rem Inter,sans-serif;text-transform:uppercase;letter-spacing:.12em}
#lv-card details.csec>summary::-webkit-details-marker{display:none}
#lv-card details.csec>summary::after{content:"▸";margin-left:auto;color:var(--dim)}
#lv-card details.csec[open]>summary::after{content:"▾"}
#lv-card details.csec>.k{margin:8px 14px 4px}
#lv-toolsbody details.fsec{margin:8px -12px 0}
#lv-toolsbody details.fsec>summary{list-style:none;cursor:pointer;display:flex;gap:8px;align-items:center;padding:5px 12px;background:rgba(62,230,168,.1);color:var(--acc);font:600 .7rem Inter,sans-serif;text-transform:uppercase;letter-spacing:.12em}
#lv-toolsbody details.fsec>summary::-webkit-details-marker{display:none}
#lv-toolsbody details.fsec>summary::after{content:"\25b8";margin-left:auto;color:var(--dim)}
#lv-toolsbody details.fsec[open]>summary::after{content:"\25be"}
#lv-toolsbody details.fsec>.fbody{margin:8px 12px 4px}
#lv-toolsbody details.fsec .ic{width:1.1em;text-align:center}
#lv-toolsbody .fbadge{margin-left:6px;padding:0 7px;border-radius:999px;background:var(--acc2);color:#04121c;font:600 .66rem Inter,sans-serif;letter-spacing:0;text-transform:none}
#lv-toolsbody .fbadge:empty{display:none}
#lv-places{margin-top:8px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
#lv-places a{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;font-size:.85rem;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
#lv-places a:last-child{border-bottom:0}
#lv-places a:hover{background:rgba(79,179,255,.14)}
#lv-places a span{color:var(--dim);font-size:.75rem}
#lv-legend{display:none;flex:0 1 auto;min-height:0;overflow:auto;padding:12px}
#lv-legbtn[aria-expanded=true]{border-color:var(--acc);color:var(--acc)}
.lv-head{display:flex;flex-wrap:wrap;gap:8px}
.lv-head input[type=text]{flex:1 1 100%}
.lv-head .btn{flex:1 1 0;margin:0!important;white-space:nowrap}
@media (max-width:700px){ #lv-legend{max-height:62%} }
#lv-legbody{padding:0}
#lv-legbody h6{margin:10px 0 4px;color:var(--dim);font:600 .66rem Inter,sans-serif;text-transform:uppercase;letter-spacing:.1em}
#lv-legbody h6:first-child{margin-top:2px}
#lv-legbody .lg{display:flex;gap:8px;align-items:center;font-size:.8rem;margin:3px 0}
#lv-legbody .hico{flex:none}
.wxp{display:inline-block;font:700 .74rem/1 'JetBrains Mono',monospace;padding:3px 6px;border-radius:9px;border:1px solid rgba(0,0,0,.4);white-space:nowrap;color:#071018;box-shadow:0 1px 4px rgba(0,0,0,.5)}.wxp.off{opacity:.55}
#lv-legbody .sw{flex:none;width:14px;height:14px;border-radius:50%;border:2px solid;box-sizing:border-box}
#lv-legbody .sw.sq{border-radius:3px}
#lv-legbody .ln{flex:none;width:18px;height:0;border-top:2px solid}
.hico{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.45),0 1px 4px rgba(0,0,0,.5);font:800 11px/1 Inter,sans-serif;color:#111;position:relative;box-sizing:border-box}
.hico.t1{background:#ff3b3b;color:#fff}.hico.t2{background:#ff8c42;color:#111}.hico.t3{background:#f5c542;color:#111}.hico.t4{background:#c9d66b;color:#111}.hico.t5{background:#9fc5a0;color:#111}
.hico.ed{background:#fff;color:#d23a3a;font-size:17px;font-weight:900}.hico.noed{background:#cfd6df;color:#6b7686;font-size:17px;font-weight:900}
.hico.approx{opacity:.6;border-style:dashed}
.hico.heli::after{content:"H";position:absolute;right:-7px;top:-7px;width:13px;height:13px;border-radius:50%;background:#2a7fd4;color:#fff;border:1px solid #fff;font:800 8px/11px Inter,sans-serif;text-align:center}
#lv-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
#lv-chips:empty{display:none}
#lv-chips .chip{display:inline-flex;gap:5px;align-items:center;padding:2px 4px 2px 9px;border-radius:999px;border:1px solid var(--acc2);color:var(--text);background:rgba(79,179,255,.12);font:500 .74rem Inter,sans-serif;cursor:pointer}
#lv-chips .chip b{font-weight:700;color:var(--acc2);padding:0 4px}
#lv-chips .chip:hover{background:rgba(79,179,255,.25)}
#lv-chips .chipall{border-color:var(--line);background:none;color:var(--dim);padding:2px 9px}
#lv-toolsbody .fbody>.lv-sub:first-child{margin-top:0}
#lv-card .csec .ic{width:1.1em;text-align:center}

.lv-label{border:0;font:700 calc(.86rem * var(--ls,1)) Inter,sans-serif;box-shadow:none;padding:calc(4px * var(--ls,1)) calc(9px * var(--ls,1));line-height:1.3;border-radius:9px;white-space:nowrap}
#lv.lb-dark .lv-label{background:rgba(10,18,32,.9);color:#fff}
#lv.lb-light .lv-label{background:rgba(255,255,255,.95);color:#10203a}
#lv.lb-yellow .lv-label{background:#ffd54a;color:#14110a}
#lv.lb-none .lv-label{background:transparent;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000,0 0 5px #000}
.lv-label small{font-weight:600;opacity:.8;font-size:.82em}
.lv-label:before{display:none}
.lv-tip{background:var(--card-bg);border:1px solid var(--line);color:var(--text);font:600 .78rem 'JetBrains Mono',monospace;box-shadow:none;padding:3px 7px}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--pop-bg);color:var(--text);border:1px solid var(--line)}
.leaflet-popup-content{font-size:.85rem;line-height:1.5}
.leaflet-control-zoom a{background:var(--pop-bg)!important;color:var(--text)!important;border-color:var(--line)!important}
.leaflet-control-attribution{background:var(--card-bg)!important;color:var(--dim)!important}
.leaflet-control-attribution a{color:var(--acc2)!important}
#lv-feeders .items{max-height:140px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:4px 10px;background:var(--input-bg-soft)}
#lv-feeders label{display:flex;gap:8px;align-items:center;margin:3px 0;font-size:.84rem;color:var(--text);cursor:pointer}
#lv-feeders .note{color:var(--dim);font-size:.75rem;margin-top:4px}
#lv-layers details{margin:6px 0;border:1px solid var(--line);border-radius:10px;background:var(--input-bg-soft)}
#lv-layers summary{cursor:pointer;list-style:none;padding:7px 10px;font:600 .8rem Inter,sans-serif;color:var(--text);display:flex;gap:8px;align-items:center}
#lv-layers summary::-webkit-details-marker{display:none}
#lv-layers summary::before{content:"▸";color:var(--dim)}
#lv-layers details[open]>summary::before{content:"▾"}
#lv-layers .items{padding:2px 10px 8px}
#lv-layers label{display:flex;gap:8px;align-items:center;margin:3px 0;font-size:.85rem;color:var(--text);cursor:pointer}
#lv-layers label .z{color:var(--dim);font-size:.7rem}
#lv-layers h5{margin:8px 0 2px;color:var(--dim);font:600 .66rem Inter,sans-serif;text-transform:uppercase;letter-spacing:.1em}
#lv-hide{position:absolute;z-index:501;top:12px;right:12px;display:none;padding:6px 10px;border-radius:9px;border:1px solid var(--line);background:var(--card-bg);color:var(--text);cursor:pointer;font:inherit;font-size:.8rem}
/* Weather panel: a tile per layer with a live preview, a switch and an opacity slider */
#lv-wx{display:none;flex:0 1 auto;min-height:0;overflow:auto;padding:12px}
#lv-altbar{display:flex;align-items:center;gap:10px;margin:6px 2px 0;min-height:24px;font:600 .68rem Inter,sans-serif;color:var(--dim)}
#lv-altbar .alt-wrap{flex:1;position:relative;height:22px}
#lv-altbar .alt-bar{position:absolute;left:0;right:0;top:0;height:8px;border-radius:4px}
#lv-altbar .alt-ticks{position:absolute;left:0;right:0;top:10px;height:12px}
#lv-altbar .alt-ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap;font-weight:500}
#lv-altbar .alt-ticks span:first-child{transform:none}
#lv-fold{display:none;align-self:center;position:relative;z-index:3;margin-top:-21px;min-width:46px;height:22px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card-bg);color:var(--dim);font:600 .7rem Inter,sans-serif;line-height:20px;cursor:pointer;pointer-events:auto;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#lv-fold:hover,#lv-fold:focus-visible{color:var(--acc);border-color:var(--acc)}
@media(max-width:700px){ #lv-fold{height:28px;min-width:60px;line-height:26px;margin-top:-24px}}
#lv-wx h4{margin:12px 0 6px;color:var(--dim);font:600 .68rem Inter,sans-serif;text-transform:uppercase;letter-spacing:.12em}
#lv-wx h4:first-of-type{margin-top:0}
.wx-tile{display:grid;grid-template-columns:96px 1fr auto;gap:4px 10px;align-items:center;padding:8px;margin-bottom:8px;border:1px solid var(--line);border-radius:12px;background:var(--input-bg-soft)}
.wx-tile.on{border-color:var(--acc)}
.wx-thumb{width:96px;height:64px;border-radius:8px;overflow:hidden;background:var(--map-bg);grid-row:span 2;pointer-events:none}
.wx-thumb .leaflet-tile-pane{filter:var(--map-filter)}
.wx-info b{display:block;font-size:.88rem}
.wx-info span{display:block;color:var(--dim);font-size:.74rem;line-height:1.3}
.wx-sw{position:relative;display:inline-block;width:40px;height:22px;margin:0}
.wx-sw input{opacity:0;width:100%;height:100%;position:absolute;margin:0;cursor:pointer;z-index:1}
.wx-sw i{position:absolute;inset:0;border-radius:11px;background:var(--line);transition:background .15s}
.wx-sw i::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--text);transition:transform .15s}
.wx-sw input:checked+i{background:var(--acc)}
.wx-sw input:checked+i::after{transform:translateX(18px);background:#04130d}
.wx-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.wx-chk{margin:0;display:flex;gap:8px;align-items:center;color:var(--text);font-size:.85rem;cursor:pointer}
.wx-upd{color:var(--acc)!important;font-size:.7rem!important}
.wx-ctl{grid-column:2 / 4;display:none;gap:8px;align-items:center;flex-wrap:wrap}
.wx-tile.on .wx-ctl{display:flex}
.wx-ctl input[type=range]{flex:1;min-width:80px;accent-color:var(--acc)}
.wx-ctl .btn.small{margin:0}
.wx-time{color:var(--dim);font-size:.74rem}
.wx-wind{width:34px;height:34px;overflow:visible}
@media(max-width:700px){ #lv-wx{max-height:62%} }
@media(max-width:900px){ #lv-list{display:none} }
/* Phones: search bar on top, filters fold away, the aircraft card and the list are bottom sheets */
@media(max-width:700px){
  #lv{height:calc(100vh - 106px - var(--sub,0px));height:calc(100dvh - 106px - var(--sub,0px));min-height:380px;border-radius:12px}
  #lv-left{top:8px;left:8px;right:8px;bottom:8px;width:auto}
  #lv-tools{padding:8px;max-height:70%}
  #lv-toolsbody details.fsec{margin:8px -8px 0}
  #lv-toolsbody details.fsec>summary{padding:5px 8px}
  #lv-toolsbody details.fsec>.fbody{margin:8px 8px 4px}
  #lv-tools input[type=text],#lv-tools input[type=number],#lv-tools select{font-size:16px;min-height:40px}
  #lv-card{margin-top:auto;max-height:52%;padding:12px;border-radius:16px 16px 12px 12px}
  #lv-card::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--line);margin:-4px auto 8px}
  #lv-card .btn.small{padding:9px 12px;min-height:38px}
  #lv-list{display:flex;left:8px;right:8px;top:auto;bottom:8px;max-width:none;min-width:0;height:48%;border-radius:16px 16px 12px 12px}
  #lv-hide{top:auto;bottom:12px;right:12px;padding:10px 16px;font-size:.9rem;border-radius:999px}
  #lv.has-card #lv-hide{display:none!important}
  #lv-list header .btn.small{padding:8px 12px}
  #lv-tbl td,#lv-tbl th{padding:8px 8px}
  .leaflet-control-zoom{display:none}
  .lv-row label{padding:4px 0}
}
.legend{display:flex;height:8px;border-radius:4px;margin-top:6px;background:linear-gradient(90deg,#f5a623,#e8d51d,#44d062,#2ec4c9,#3b6df0,#8a3ffc,#e83e8c)}
.legend-l{display:flex;justify-content:space-between;color:var(--dim);font-size:.68rem}
/* the Weather Stations tile of the Weather panel holds many options, so its controls get the whole width under the header row */
#wx-stations .wx-thumb{grid-row:auto;height:64px}
#wx-stations .wx-ctl{grid-column:1 / -1;display:none;margin-top:4px}
#wx-stations.on .wx-ctl{display:block}
#wx-stations .wx-ctl select{max-width:100%}
#wx-stations .wxfields label{min-width:0}