/* The named facilities layer.

   Site-only, which is why it is here rather than in shell/. Everything in shell/ is a copy
   of the tokenmap renderer and gets overwritten wholesale on the next sync; this file and
   sites-layer.js do not exist there and must survive that.

   Two overlays name places on this page and they are not the same thing. shell/sites.js
   names 89 metros where the model holds both an activity figure and a capacity weight, and
   never names a facility. This layer names 13 real facilities, each traceable to something
   its operator published. The evidentiary standards differ, so the two stay apart. */

#sites-layer{position:fixed;inset:0;z-index:2;pointer-events:none;display:none}
#sites-layer.on{display:block}

/* Markers are buttons so the layer works from the keyboard and reads to a screen reader
   without hand-rolled hit-testing against the canvas. */
.site-dot{position:absolute;left:0;top:0;width:13px;height:13px;margin:-7px 0 0 -7px;
  padding:0;border-radius:50%;background:rgba(120,200,215,.16);
  border:1.5px solid rgba(150,225,240,.9);cursor:pointer;pointer-events:auto;
  display:none;transition:background .12s,border-color .12s}
.site-dot.hyper{border-color:rgba(240,196,120,.92);background:rgba(240,180,90,.16)}
.site-dot:hover,.site-dot:focus-visible{background:rgba(255,255,255,.85);
  border-color:#fff;outline:none}

#site-card{position:fixed;z-index:5;display:none;max-width:250px;
  padding:12px 14px;background:rgba(11,13,17,.97);border:1px solid #2a2e35;
  border-radius:6px;pointer-events:auto}
#site-card.on{display:block}
.sc-op{font-size:13px;color:#e6e8ea;font-weight:500}
.sc-site{font-size:12px;color:#c9ccd1;margin-top:1px}
.sc-region{font-size:11px;color:#6a6f78;margin-top:4px}
.sc-cap{font-size:15px;color:#e6e8ea;margin-top:9px;font-variant-numeric:tabular-nums}
/* Deliberately not small print. The basis is what makes the number mean anything. */
.sc-basis{font-size:10.5px;line-height:1.45;color:#8b9099;margin-top:3px}
.sc-src{display:inline-block;font-size:10.5px;color:#6b7079;margin-top:9px;
  text-decoration:none;border-bottom:1px solid #2a2e35}
.sc-src:hover{color:#c9974e;border-bottom-color:#c9974e}

/* The toggle sits in the readout's legend column, built by sites-layer.js so this layer
   stays self-contained. It matches the rows already there rather than inventing a control
   style: the legend is a list of what is on the field, and this is one of those things. */
.lgrow.lyr{cursor:pointer;user-select:none}
.lgrow.lyr input{accent-color:#c9974e;margin:0 6px 0 0;cursor:pointer;vertical-align:-1px}

/* The wall build shows the piece and nothing else. */
.mode-wall #sites-layer,.mode-wall #site-card{display:none}

@media (max-width:760px){
  .site-dot{width:17px;height:17px;margin:-9px 0 0 -9px}
}