:root{
  --bg:#f4f6f9; --panel:#fff; --ink:#14202e; --dim:#566273; --faint:#8a94a3;
  --line:#dde3ea; --line2:#eef2f6;
  --pln:#0070C0; --navy:#1F4E79; --deep:#002060; --sky:#00B0F0; --amber:#FFC000; --ice:#DCEAF7; --cream:#FFEFBD;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;overflow:hidden;
  font:13px/1.45 Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
b{font-weight:700}

/* header */
#top{display:flex;align-items:center;gap:20px;padding:0 16px;height:60px;flex:none;z-index:900;
  background:linear-gradient(90deg,#006FBD,var(--deep));color:#fff}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.mark{background:#fff;color:var(--pln);font-weight:800;font-size:11px;letter-spacing:.06em;padding:5px 7px;border-radius:4px}
#top h1{margin:0;font-size:15px;font-weight:700;white-space:nowrap}
#top h1 .reg{font-weight:400;opacity:.8}
.sub{font-size:11px;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpis{margin-left:auto;display:flex;gap:22px}
.kpi{display:flex;flex-direction:column;align-items:flex-end}
.kpi .v{font-size:19px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .v small{font-size:11px;font-weight:400;opacity:.85;margin-left:2px}
.kpi .l{font-size:10px;text-transform:uppercase;letter-spacing:.06em;opacity:.78}

main{flex:1;display:flex;min-height:0}
#map{flex:1;min-width:0;background:#dfe6ee}

/* left panel */
#panel{width:292px;flex:none;background:var(--panel);border-right:1px solid var(--line);overflow-y:auto}
.grp{border-bottom:1px solid var(--line2);padding:13px 14px}
.grp h2{margin:0 0 8px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--navy)}
.collapsible{cursor:pointer;display:flex;align-items:center;gap:6px;user-select:none}
.collapsible::before{content:"▸";font-size:9px;transition:transform .12s}
.collapsible.on::before{transform:rotate(90deg)}
.collapsible:not(.on)+.body{display:none}
.chk{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:3px 0;cursor:pointer}
.chk input{margin:0;accent-color:var(--pln)}
.sel{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin-top:9px}
select{font:inherit;font-size:12.5px;padding:5px 7px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);width:100%;margin-top:4px;text-transform:none;letter-spacing:0}
.slider{display:block;font-size:12px;color:var(--dim);margin-top:10px}
.slider b{float:right;color:var(--ink);font-variant-numeric:tabular-nums}
.slider input{width:100%;accent-color:var(--pln);margin:5px 0 0}
.hint{margin:0 0 6px;font-size:11.5px;color:var(--dim)}
.tip{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--line2);color:var(--dim);font-size:10px;cursor:help}
.segs{margin-top:8px;border-top:1px dashed var(--line);padding-top:6px}
.segs .chk .sw{width:10px;height:10px;border-radius:50%;flex:none}
.cnt{margin-left:auto;font:11px var(--mono);color:var(--faint)}
.ghost{border:1px solid var(--line);background:#fff;border-radius:5px;padding:6px 11px;font:inherit;font-size:12px;color:var(--dim);cursor:pointer}
.ghost:hover{background:var(--ice);color:var(--navy);border-color:#b9d3ec}
.ghost.small{padding:3px 9px;font-size:11.5px;margin-top:10px}
.legend{margin-top:11px}
.ramp{height:9px;border-radius:5px;background:linear-gradient(90deg,#1F4E7933,#00B0F0,#FFC000,#FF7F0E,#D9382C)}
.rampLab{display:flex;justify-content:space-between;font-size:10.5px;color:var(--faint);margin-top:3px}
.foot{font-size:10.5px;color:#9a3b12;padding:10px 14px;margin:0;line-height:1.45}

/* right panel */
#side{width:390px;flex:none;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.tabs{display:flex;gap:2px;padding:8px 10px;border-bottom:1px solid var(--line)}
.tab{border:0;background:none;padding:6px 12px;border-radius:6px;font:inherit;font-size:12.5px;color:var(--dim);cursor:pointer}
.tab:hover{background:var(--line2)}
.tab.on{background:var(--ice);color:var(--pln);font-weight:700}
.pane{display:none;flex:1;overflow-y:auto;min-height:0}
.pane.on{display:block}
.paneHead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line2);font-size:11.5px;color:var(--dim);position:sticky;top:0;background:#fff;z-index:2}
.paneHead .ghost.small{margin:0}
.paneHead select{margin:0;width:auto}
#siteList{list-style:none;margin:0;padding:0}
#siteList li{display:grid;grid-template-columns:26px 1fr auto;gap:2px 8px;padding:8px 12px;border-bottom:1px solid var(--line2);cursor:pointer}
#siteList li:hover{background:#f6f9fd}
.rk{font:11px var(--mono);color:var(--faint);padding-top:2px}
.nm{font-weight:700;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nm.unnamed{font-weight:400;color:var(--dim);font-style:italic}
.meta{grid-column:2/4;font-size:11px;color:var(--dim);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sc{font:700 12px var(--mono);color:var(--navy);text-align:right}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;padding:1px 6px;border-radius:9px;background:var(--line2);color:var(--ink);white-space:nowrap}
.chip i{width:7px;height:7px;border-radius:50%;display:inline-block}
.chip.pub{background:var(--ice);color:var(--navy);font-weight:700}
.chip.ml{background:var(--cream);color:#7a5a00}
.chip.mv{background:#fde7e4;color:#9a2a1e}
table{width:100%;border-collapse:collapse;font-size:11.5px}
th{position:sticky;top:45px;background:#fff;text-align:right;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);padding:6px 6px;border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
td{padding:6px 6px;border-bottom:1px solid var(--line2);text-align:right;font-variant-numeric:tabular-nums}
tbody tr{cursor:pointer}
tbody tr:hover{background:#f6f9fd}
td .bar{height:4px;background:var(--amber);border-radius:2px;margin-top:3px}
td small{color:var(--faint)}
#method{padding:12px 14px;font-size:12px;color:var(--ink)}
#method h3{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--navy);margin:16px 0 6px}
#method h3:first-child{margin-top:0}
#method p,#method li{color:var(--dim);margin:0 0 6px}
#method ul{padding-left:18px;margin:0 0 6px}
#method .stat{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:11.5px;background:var(--bg);padding:8px 10px;border-radius:6px}
#method .stat b{font-variant-numeric:tabular-nums;text-align:right}
#method .caveat{background:#fff6e0;border-left:3px solid var(--amber);padding:7px 9px;border-radius:0 4px 4px 0;color:#5a4300}

/* popups */
.leaflet-popup-content{margin:12px 14px;font:12px/1.45 Arial,sans-serif;min-width:290px}
.pp h4{margin:0 0 3px;font-size:14px;color:var(--deep)}
.pp .chips{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.pp dl{display:grid;grid-template-columns:auto 1fr;gap:1px 12px;margin:0 0 6px}
.pp dt{color:var(--faint)}
.pp dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.pp .sec{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--navy);font-weight:700;margin:8px 0 3px;border-top:1px solid var(--line2);padding-top:6px}
.pp .ev{font-size:11px;color:var(--dim);max-height:64px;overflow:auto}
.pp a{color:var(--pln)}
.zhint{margin-left:auto;font:10.5px var(--mono);color:var(--faint)}
.roofLegend{display:flex;flex-direction:column;gap:3px;margin:6px 0 2px 21px;font-size:11px;color:var(--dim)}
.roofLegend span{display:flex;align-items:center;gap:7px}
.roofLegend i{display:inline-block;width:18px;height:10px;flex:none}
.lg-roof{border:2px solid #FF7F0E;background:#FF7F0E1a}
.lg-use{border:1.6px dashed #FFC000}
.lg-mod{background:repeating-linear-gradient(90deg,#0B2A5B 0 5px,#9ED8FF 5px 6px);border:1px solid #9ED8FF}
.roofLab{pointer-events:none}
.roofLab .rl{position:absolute;transform:translate(-50%,-50%);background:rgba(0,32,96,.82);color:#fff;border-radius:4px;
  padding:2px 6px;font:700 11px/1.25 Arial,sans-serif;white-space:nowrap;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.roofLab .rl span{display:block;font-weight:400;font-size:10px;opacity:.85}
.kecLab{font:600 10.5px Arial,sans-serif;color:var(--navy);text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;white-space:nowrap;pointer-events:none}
.sat .kecLab{color:#fff;text-shadow:0 0 3px #000,0 0 3px #000}

@media (max-width:900px){
  body{overflow:auto}
  main{flex-direction:column}
  #panel,#side{width:auto;border:0}
  #map{height:65vh;flex:none}
  .kpis{display:none}
  .sub{display:none}
}

/* hover tooltip with roof snapshot */
.leaflet-tooltip.siteTip{padding:0;border:0;border-radius:8px;overflow:hidden;box-shadow:0 6px 22px rgba(0,20,60,.35);
  width:280px;white-space:normal;font:12px/1.4 Arial,sans-serif;color:var(--ink)}
.leaflet-tooltip.siteTip::before{display:none}
.snap{position:relative;background:#1b2530;overflow:hidden}
.snap img{display:block;object-fit:cover}
.snap svg{position:absolute;inset:0}
.snapScale{position:absolute;right:5px;bottom:4px;font:10px Arial,sans-serif;color:#fff;text-shadow:0 0 3px #000}
.tipBody{padding:8px 10px 9px}
.tipName{font-weight:700;font-size:13px;color:var(--deep);margin-bottom:4px}
.tipBody .chips{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:7px}
.tipStats{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;font-size:11.5px;color:var(--dim)}
.tipStats b{color:var(--ink);font-size:13px;font-variant-numeric:tabular-nums}
.tipWhere{margin-top:6px;font-size:11px;color:var(--dim)}
.tipHint{margin-top:4px;font-size:10.5px;color:var(--pln)}
.pp .snap{border-radius:6px;margin:0 0 8px}

/* heatmap stays translucent so the imagery underneath reads */
.leaflet-heatmap-layer{opacity:.72}

/* only the shared roof canvas takes the pointer; module, selection and heat layers are click-through */
.leaflet-mod-pane canvas,.leaflet-sel-pane canvas,.leaflet-use-pane canvas,.leaflet-heatmap-layer,.leaflet-overlay-pane canvas{pointer-events:none}

.lg-pub{border:1.4px dashed #9aa3b1}
.lg-jtm{height:0!important;border-top:2.5px solid #E0218A;margin-top:4px}
.chip.rt{background:#eef2f6}.chip.rt-tile{background:#fde3d3;color:#8a3a12}.chip.rt-metal{background:#e3e8ee;color:#3a4756}
.chip.rt-flat{background:#e7f3e5;color:#2d6a2a}.chip.rt-none{background:#f6d6d6;color:#8a1f1f}
svg.lc{display:block;margin-top:4px;font:9.5px Arial,sans-serif;fill:#6b7684}
svg.lc .unit{font-size:9px}
.lcKey{font-size:10.5px;color:var(--dim);display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:2px}
.lcKey i{display:inline-block;width:12px;height:8px;border-radius:2px}
.k-load{background:#1F4E79;height:3px!important}.k-pv{background:#FFC000}.k-ex{background:#D9382C}
.lcLab{font-size:10.5px;color:var(--faint);margin-top:1px}
.chartWait{font-size:11px;color:var(--faint);padding:8px 0}

.lcTitle{font-size:10.5px;color:var(--navy);font-weight:700;margin-top:8px;display:flex;justify-content:space-between;gap:6px}
.lcTitle span{font-weight:400;color:var(--faint);white-space:nowrap}