/* ============================================================
   K5NWZ MAP KIT  v2  - shared dark-console map chrome
   Matched to the RF Path & Repeater Site Planner (v53, Nov 11).
   One look for every map. Each page enables only the network
   layers it needs; the chrome stays identical.
   ============================================================ */

:root{
  /* console palette (verbatim from the planner) */
  --bg:#1a222a; --deep:#141b21; --card:#37444d; --inset:#2f3b43;
  --track:#2a363e; --line:#4b5a63; --line2:#3a4750;
  --ink:#f2f7f4; --body:#dbe6ea; --muted:#aab9c1; --mut:#aab9c1;
  --green:#2ec27e; --greenT:#4be08f; --teal:#3fd0c9;
  --blue:#4a9fe0; --amber:#f0b429; --red:#ff7b7b; --purple:#b07cff;
  /* per-network colors (single source of truth) */
  --net-mc:#b07cff; --net-mt:#2ec27e; --net-aprs:#f0b429; --net-pk:#4a9fe0;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:grid;grid-template-rows:54px 1fr;background:var(--bg);color:var(--body);
  font:13px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden}
body.k5m-embed{grid-template-rows:1fr}
body.k5m-embed > header{display:none}

/* ---------- header / branding (K5NWZ.com prominent) ---------- */
header{display:flex;align-items:center;gap:12px;padding:0 12px;border-bottom:1px solid var(--line);
  background:var(--deep);min-width:0}
.brand{text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap;color:var(--ink)}
.brand .bk{font:800 21px var(--mono);letter-spacing:.04em;color:var(--ink);line-height:1}
.brand .bk b{color:var(--teal);font-weight:800}
.brand .bt{font:700 11.5px var(--mono);letter-spacing:.1em;color:var(--body);
  border-left:2px solid var(--teal);padding-left:10px;line-height:1.2}
.brand:hover .bk{color:#fff}
.hint{font:11px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp{flex:1}
.btn{background:var(--inset);border:1px solid var(--line);color:var(--body);font:600 11px var(--mono);
  letter-spacing:.06em;padding:6px 9px;border-radius:4px;cursor:pointer;white-space:nowrap}
.btn:hover,.btn:focus-visible{border-color:var(--teal);color:var(--ink);outline:none}
.btn.on{border-color:var(--teal);color:var(--teal)}
#status{font:11px var(--mono);color:var(--muted);white-space:nowrap}

/* ---------- map + chips ---------- */
main.k5m-main{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:0}
main.k5m-main.nopanel{grid-template-columns:minmax(0,1fr)}
#mapwrap{position:relative;min-height:0}
.k5m-map{position:absolute;inset:0;background:#0f1418}
.leaflet-container{background:#0f1418;font:12px var(--mono)}
.leaflet-control-attribution{background:rgba(20,27,33,.8)!important;color:var(--muted)!important;font:10px var(--mono)}
.leaflet-control-attribution a{color:var(--blue)!important}
.leaflet-bar a{background:var(--inset)!important;color:var(--ink)!important;border-color:var(--line)!important}
.leaflet-bar a:hover{background:var(--card)!important}
.leaflet-relief-pane{mix-blend-mode:overlay}

#chips{position:absolute;top:10px;left:54px;right:10px;z-index:900;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
.chip{pointer-events:auto;background:rgba(20,27,33,.93);border:1px solid var(--line);color:var(--muted);
  font:700 10.5px var(--mono);letter-spacing:.08em;padding:6px 10px;border-radius:4px;cursor:pointer;
  display:flex;align-items:center;gap:6px}
.chip i{width:9px;height:9px;border-radius:50%;display:inline-block;opacity:.3}
.chip.on{color:var(--ink);border-color:var(--c)}
.chip.on i{opacity:1}
.chip b{font-weight:400;color:var(--muted)}
.chip:hover{border-color:var(--teal)}

/* ---------- hover bubble (k5tt) + floating help (#tip) ---------- */
.k5tt{background:var(--card)!important;color:var(--body)!important;border:0!important;
  border-top:3px solid var(--pc,#4b5a63)!important;border-radius:6px!important;padding:9px 11px!important;
  white-space:normal!important;width:280px;font:12px/1.45 system-ui,sans-serif!important;
  box-shadow:0 6px 20px rgba(0,0,0,.65)!important}
.k5tt.leaflet-tooltip-top:before{border-top-color:var(--card)!important}
.k5tt.leaflet-tooltip-bottom:before{border-bottom-color:var(--card)!important}
.k5tt .net{font:700 10.5px var(--mono);letter-spacing:.08em;color:var(--pc,#aab9c1);display:flex;align-items:center;gap:6px}
.k5tt .nm{display:block;font:700 14px var(--mono);color:var(--ink);margin:3px 0 2px}
.k5tt .sub{color:var(--muted);font:11px var(--mono)}
.k5tt .kvx{display:grid;grid-template-columns:auto 1fr;gap:1px 8px;font:11px var(--mono);margin:6px 0}
.k5tt .kvx span:nth-child(odd){color:var(--muted)}
.k5tt .kvx span:nth-child(even){color:var(--ink);overflow-wrap:anywhere;text-align:right}
.k5tt .how{margin-top:7px;padding-top:6px;border-top:1px solid #4b5a63;font:12px/1.4 system-ui,sans-serif;color:var(--body)}
.k5tt b{font-weight:700}
.gly{display:inline-flex;vertical-align:-2px}
#tip{position:fixed;z-index:3000;max-width:290px;background:#2c3942;border:1px solid var(--teal);
  color:#e7eef1;font:12px/1.5 system-ui,sans-serif;padding:8px 10px;border-radius:5px;display:none;
  pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.55)}

/* ---------- two bottom-right keys: node types + line key ---------- */
#nlg{position:absolute;right:8px;bottom:24px;z-index:500;background:rgba(14,20,25,.9);border:1px solid var(--line);
  border-radius:4px;padding:5px 8px;font:600 10px var(--mono);letter-spacing:.05em;color:var(--body);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#nlg span{display:inline-flex;align-items:center;gap:5px;cursor:help}
#llg{position:absolute;right:8px;bottom:58px;z-index:500;background:rgba(14,20,25,.9);border:1px solid var(--line);
  border-radius:4px;padding:6px 9px;font:600 10px var(--mono);letter-spacing:.05em;color:var(--body);
  display:none;flex-direction:column;gap:4px}
#llg.on{display:flex}
#llg span{display:flex;align-items:center;gap:7px;cursor:help}
#llg .t{font-weight:800;color:var(--muted);letter-spacing:.1em;margin-bottom:1px}
#llg .ln{width:20px;height:0;border-top:2px solid;flex:none}
#wm{position:absolute;left:10px;bottom:22px;z-index:800;background:rgba(20,27,33,.9);border:1px solid #4b5a63;
  border-left:3px solid var(--teal);border-radius:4px;padding:3px 9px;font:700 11px var(--mono);
  letter-spacing:.06em;color:#f2f7f4;text-decoration:none}
#wm b{color:var(--teal)}
#wm:hover{border-color:var(--teal)}

/* ---------- side panel: plain card + station list ---------- */
aside.k5m-aside{overflow:auto;border-left:1px solid var(--line);padding:12px;display:flex;
  flex-direction:column;gap:12px;min-height:0;background:var(--bg)}
.card{background:var(--card);border-radius:6px;padding:12px}
.card h3{margin:0 0 10px;font:700 11px var(--mono);letter-spacing:.12em;color:var(--muted)}
#plain{border-top:3px solid var(--teal)}
#plain .big{font:800 20px/1.15 var(--mono);letter-spacing:.02em;color:var(--ink)}
#plain .big.yes{color:var(--green)} #plain .big.maybe{color:var(--amber)} #plain .big.no{color:var(--red)}
#plain ul{margin:8px 0 0;padding-left:16px;font-size:12.5px;color:var(--body)}
#plain li{margin:3px 0}
.stk{display:grid;grid-template-columns:16px 1fr auto;gap:8px;align-items:center;padding:6px 7px;border-radius:4px;
  cursor:pointer;font:12px var(--mono);border:1px solid transparent}
.stk:hover{border-color:var(--teal);background:var(--inset)}
.stk .gly{width:13px}
.stk b{color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stk span{font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--muted)}

@media (max-width:900px){
  #chips{left:50px}
  body{overflow:auto;height:auto;display:block}
  header{flex-wrap:wrap;height:auto;padding:8px 12px;gap:8px}
  .hint{display:none}
  main.k5m-main{display:block}
  #mapwrap{position:relative;height:60vh}
  aside.k5m-aside{border-left:0;overflow:visible}
}