:root{
  --ink:#0C1826; --ink2:#132539; --ink3:#1B3149; --line:#294464;
  --text:#EAF2FB; --muted:#93A8C2; --muted2:#63799A;
  --asset:#5468FF;        /* council / public assets */
  --mast:#FF4D5E;         /* phone masts            */
  --gap:#F59E0B;          /* asset in a coverage gap*/
  --cyan:#12B3A8;         /* coverage ring          */
  --cyan-fill:rgba(18,179,168,.12);
  --user:#37D399;         /* your uploaded assets   */
  --proposed:#8B5CF6;     /* proposed/selected sites*/
  --ofcom:#38BDF8;        /* Ofcom coverage overlay */
  --radius:12px;
  --disp:"Space Grotesk",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:var(--body);color:var(--text);background:var(--ink);overflow:hidden}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---------- shell ---------- */
.app{display:grid;grid-template-rows:auto 1fr;height:100dvh}

header{
  background:linear-gradient(180deg,#0C1826, #0A1521);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:12px 18px;z-index:1000;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.glyph{width:34px;height:34px;flex:0 0 auto}
h1{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:.2px;margin:0;line-height:1.1}
.sub{font-size:12px;color:var(--muted);margin-top:2px}
.chips{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.chip{
  display:flex;align-items:baseline;gap:7px;background:var(--ink2);
  border:1px solid var(--line);border-radius:100px;padding:6px 12px;white-space:nowrap;
}
.chip b{font-family:var(--mono);font-size:15px;font-weight:500}
.chip span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.chip.dot::before{content:"";width:8px;height:8px;border-radius:50%;align-self:center;margin-right:-1px}
.chip.asset::before{background:var(--asset)} .chip.mast::before{background:var(--mast)} .chip.gap::before{background:var(--gap)}

/* ---------- body ---------- */
.stage{position:relative;display:grid;grid-template-columns:340px 1fr;min-height:0}
#map{height:100%;width:100%;background:#0A1521;z-index:1}

.panel{
  background:var(--ink);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;z-index:500;
}
.panel .scroll{overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:18px}
.panel::-webkit-scrollbar,.scroll::-webkit-scrollbar{width:8px}
.scroll::-webkit-scrollbar-thumb{background:var(--ink3);border-radius:8px}

.block{background:var(--ink2);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.block h2{font-family:var(--disp);font-size:11px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin:0 0 12px}

/* layer toggles */
.toggle{display:flex;align-items:center;gap:11px;padding:8px 0;cursor:pointer;user-select:none}
.toggle + .toggle{border-top:1px solid rgba(255,255,255,.05)}
.swatch{width:14px;height:14px;border-radius:4px;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.15) inset}
.sw-asset{background:var(--asset)} .sw-mast{background:var(--mast)}
.sw-gap{background:var(--gap)} .sw-cov{background:var(--cyan-fill);box-shadow:0 0 0 1.5px var(--cyan) inset}
.sw-user{background:var(--user)}
.sw-prop{background:rgba(139,92,246,.18);box-shadow:0 0 0 1.5px var(--proposed) inset}
.sw-ofcom{background:rgba(56,189,248,.18);box-shadow:0 0 0 1.5px var(--ofcom) inset}
.toggle .label{flex:1;font-size:13.5px}
.toggle .count{font-family:var(--mono);font-size:12px;color:var(--muted)}
.sw-mono{border-radius:50%}
input[type=checkbox]{accent-color:var(--cyan);width:16px;height:16px;margin:0}

/* slider */
.slider-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.slider-right{display:flex;align-items:center;gap:9px}
.slider-head .val{font-family:var(--mono);color:var(--cyan)}
.reset{
  background:var(--ink3);border:1px solid var(--line);color:var(--muted);
  border-radius:7px;padding:3px 9px;font-size:11px;font-weight:500;line-height:1.4;
}
.reset:hover{border-color:var(--cyan);color:var(--text)}
input[type=range]{width:100%;accent-color:var(--cyan)}
.hint{font-size:11.5px;color:var(--muted2);line-height:1.5;margin-top:10px}
.hint b{font-weight:600}
.toggle.terr{margin-top:10px;border-top:1px solid rgba(255,255,255,.06);padding-top:12px}
.toggle.terr input{accent-color:var(--cyan)}
.beta{font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:var(--cyan);border:1px solid var(--cyan);border-radius:5px;padding:1px 5px;margin-left:6px;vertical-align:middle}
.toggle.terr .count{font-size:11px}

/* proposed-coverage summary */
.propsum{
  background:linear-gradient(180deg,rgba(139,92,246,.16),rgba(139,92,246,.06));
  border:1px solid var(--proposed);border-radius:10px;padding:11px 12px;margin-bottom:10px;
}
.propsum .headline{font-size:13px;line-height:1.5}
.propsum .headline b{font-family:var(--mono);color:#C4B5FD;font-weight:500}
.propsum .bar{height:6px;border-radius:4px;background:var(--ink);overflow:hidden;margin:9px 0}
.propsum .bar > i{display:block;height:100%;background:var(--proposed);border-radius:4px;transition:width .2s}
.propsum .rank{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.propsum .rk{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted)}
.propsum .rk .rnm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.propsum .rk .rct{font-family:var(--mono);color:#C4B5FD}
.propsum .clr{background:transparent;border:0;color:var(--muted);font-size:11px;text-decoration:underline;padding:6px 0 0}
.propsum .clr:hover{color:var(--text)}

/* opportunity list */
.opplist{display:flex;flex-direction:column;gap:6px;margin-top:4px;max-height:360px;overflow-y:auto;padding-right:2px}
.opplist::-webkit-scrollbar{width:7px}
.opplist::-webkit-scrollbar-thumb{background:var(--ink3);border-radius:8px}
.opp{
  display:grid;grid-template-columns:auto 1fr auto;gap:1px 10px;align-items:center;
  text-align:left;width:100%;background:transparent;border:1px solid var(--line);
  border-left:3px solid var(--gap);border-radius:8px;padding:8px 11px 8px 9px;color:var(--text);
  transition:background .12s,border-color .12s;
}
.opp:hover{background:var(--ink3);border-color:var(--cyan)}
.opp.sel{border-color:var(--proposed);border-left-color:var(--proposed);background:rgba(139,92,246,.08)}
.opp .chk{width:16px;height:16px;margin:0;grid-row:1/3;align-self:center;accent-color:var(--proposed);cursor:pointer;flex:0 0 auto}
.opp .main{grid-column:2;grid-row:1/3;min-width:0;background:transparent;border:0;padding:0;text-align:left;color:inherit;display:flex;flex-direction:column;gap:1px}
.opp .nm{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opp .ty{font-size:11px;color:var(--muted);text-transform:capitalize}
.opp .cov{font-size:10.5px;color:#C4B5FD;font-family:var(--mono)}
.opp .d{font-family:var(--mono);font-size:13px;color:var(--gap);grid-column:3;grid-row:1/3;align-self:center;text-align:right;white-space:nowrap}
.opp .d small{display:block;font-size:9px;color:var(--muted2);letter-spacing:.5px}
.empty{font-size:12.5px;color:var(--muted2);line-height:1.6;padding:6px 2px}

/* collapsible "add your own assets" */
.acc{padding:0;overflow:hidden}
.acc > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:14px;user-select:none;
}
.acc > summary::-webkit-details-marker{display:none}
.acc > summary h2{margin:0}
.acc .chev{color:var(--muted);font-size:13px;transition:transform .18s}
.acc[open] .chev{transform:rotate(90deg)}
.acc .acc-body{padding:0 14px 14px}

/* buttons + textarea */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;
  background:var(--ink3);border:1px solid var(--line);color:var(--text);
  border-radius:9px;padding:10px 12px;font-size:13px;font-weight:500;
}
.btn:hover{border-color:var(--cyan)}
.btn.primary{background:var(--cyan);border-color:var(--cyan);color:#05221F;font-weight:600}
.btn.primary:hover{filter:brightness(1.06)}
textarea{
  width:100%;min-height:88px;resize:vertical;background:var(--ink);color:var(--text);
  border:1px solid var(--line);border-radius:8px;padding:9px;font-family:var(--mono);
  font-size:11px;line-height:1.5;margin-bottom:9px;
}
.foot{font-size:11px;color:var(--muted2);line-height:1.6;padding-top:2px}
.foot code{color:var(--muted);font-family:var(--mono)}

/* data sources */
.sources{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}
.sources li{font-size:12px;line-height:1.5;color:var(--muted);padding-left:18px;position:relative}
.sources li b{color:var(--text);font-weight:500}
.sources a{color:var(--cyan);text-decoration:none}
.sources a:hover{text-decoration:underline}
.sources .sdot{position:absolute;left:0;top:5px;width:9px;height:9px;border-radius:50%}
.sources .sdot.asset{background:var(--asset)} .sources .sdot.mast{background:var(--mast)}
.sources .sdot.ofcom{background:var(--ofcom)} .sources .sdot.user{background:var(--user)}

/* status banner */
#banner{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:800;
  max-width:min(560px,90%);background:var(--ink2);border:1px solid var(--line);
  border-radius:10px;padding:11px 14px;display:none;align-items:center;gap:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);font-size:13px;
}
#banner .dotpulse{width:9px;height:9px;border-radius:50%;background:var(--cyan);flex:0 0 auto}
#banner.warn{border-color:#B4541E} #banner.warn .dotpulse{background:var(--gap)}
#banner .bbtn{margin-left:auto;background:var(--ink3);border:1px solid var(--line);color:var(--text);border-radius:7px;padding:6px 11px;font-size:12px}
@media (prefers-reduced-motion:no-preference){
  #banner .dotpulse{animation:pulse 1.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
}

/* legend on map */
.legend{
  background:rgba(12,24,38,.92);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;font-size:12px;line-height:1.9;backdrop-filter:blur(4px);
}
.legend .row{display:flex;align-items:center;gap:9px}
.legend .mk{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.legend .ring{width:14px;height:14px;border-radius:50%;background:var(--cyan-fill);box-shadow:0 0 0 1.5px var(--cyan) inset}
.leaflet-popup-content-wrapper{background:var(--ink2);color:var(--text);border-radius:10px;border:1px solid var(--line)}
.leaflet-popup-tip{background:var(--ink2);border:1px solid var(--line)}
.leaflet-popup-content{margin:12px 14px;font-family:var(--body);font-size:13px;line-height:1.55}
.pop-t{font-family:var(--disp);font-weight:700;font-size:14px;margin-bottom:3px}
.pop-k{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:6px}
.pop-tag{font-size:11.5px;color:var(--muted)}
.pop-flag{margin-top:7px;padding-top:7px;border-top:1px solid var(--line);color:var(--gap);font-weight:500;font-size:12.5px}
.leaflet-container{font-family:var(--body)}
.leaflet-bar a{background:var(--ink2);color:var(--text);border-bottom-color:var(--line)}
.leaflet-bar a:hover{background:var(--ink3)}

/* mobile */
.panel-toggle{display:none}
@media (max-width:760px){
  .stage{grid-template-columns:1fr}
  .panel{
    position:absolute;inset:auto 0 0 0;max-height:64dvh;border-right:0;border-top:1px solid var(--line);
    border-radius:16px 16px 0 0;transform:translateY(calc(100% - 52px));transition:transform .25s ease;
  }
  .panel.open{transform:translateY(0)}
  .panel-toggle{
    display:flex;align-items:center;justify-content:center;gap:9px;height:52px;
    flex:0 0 auto;background:transparent;border:0;color:var(--text);font-family:var(--disp);
    font-weight:500;font-size:13px;letter-spacing:.4px;position:relative;
  }
  .panel-toggle::before{content:"";width:38px;height:4px;border-radius:3px;background:var(--line);position:absolute;top:8px}
  .chips{width:100%;margin-left:0}
  @media (prefers-reduced-motion:reduce){.panel{transition:none}}
}