/* Black pixel-stepped pins; white supplied skull; tip stays on the area anchor. */
#lead-beacons{position:absolute;inset:0;z-index:3;pointer-events:none}
.lead-beacon{position:absolute;left:0;top:0;width:44px;height:44px;margin-top:-13px;padding:0;border:0;background:none;pointer-events:auto;cursor:pointer;display:grid;place-items:center}
.beacon-frame{display:block;position:relative;width:24px;height:26px}
.lead-beacon .beacon-frame{pointer-events:none}
.beacon-frame svg{display:block;width:24px;height:26px;shape-rendering:crispEdges}
.beacon-face{fill:#000}
.beacon-frame img{position:absolute;left:4px;top:2px;width:16px;height:16px;image-rendering:pixelated;pointer-events:none}

#property-beacons{position:absolute;inset:0;z-index:3;pointer-events:none}
.property-beacon{position:absolute;left:0;top:0;width:44px;height:44px;margin-top:-13px;padding:0;border:0;background:none;pointer-events:auto;cursor:pointer;display:grid;place-items:center}
.property-beacon:focus-visible{outline:2px dashed var(--paper);outline-offset:2px}
.property-area-context{fill:#d8ca96;stroke:#8d7959;stroke-width:2;vector-effect:non-scaling-stroke}
.lead-beacon:focus-visible{outline:2px dashed var(--paper);outline-offset:-5px}

.map-area[data-motion=moving] #lead-beacons{visibility:hidden}
.map-area[data-level=property] #lead-beacons{display:none}
#map-tip{white-space:normal;text-align:center;max-width:72%}
.map-navigation .beacon-state-outline{fill:none;stroke:var(--red);stroke-width:2.4;vector-effect:non-scaling-stroke;pointer-events:none}