/* LAYOUT */
#lay{display:flex;height:calc(100vh - 44px);overflow:hidden}
#mapWrap{flex:1;position:relative;overflow:hidden}
#map{width:100%;height:100%}
#mapDim{position:absolute;inset:0;background:#000;pointer-events:none;z-index:1;opacity:0;transition:opacity .2s}

/* Hover tooltip on segments / shapes */
#segTip{position:absolute;background:rgba(13,15,17,.95);border:1px solid var(--bg);border-radius:6px;padding:5px 10px;font-size:11px;color:var(--text);pointer-events:none;z-index:50;display:none;white-space:nowrap;box-shadow:0 4px 18px rgba(0,0,0,.6);transform:translate(-50%,calc(-100% - 26px))} /* V1.16.0 — sits 26px clear of the pointer (was 10px) */
/* V1.16.0 — fast custom tooltip for the group panel (replaces slow native title=) */
#panelTip{position:fixed;background:rgba(13,15,17,.97);border:1px solid var(--bord);border-radius:5px;padding:4px 8px;font-size:10px;color:var(--text);pointer-events:none;z-index:10006;display:none;max-width:240px;box-shadow:0 6px 20px rgba(0,0,0,.55)}
/* V11.3 — Google Maps makes clickable markers keyboard-focusable; Chrome then paints a
   blue focus rectangle on whichever marker (fixture, mid-segment handle…) last received
   focus — it showed up "randomly" on mode switches and handle clicks. This is a fully
   mouse-driven canvas, so suppress the ring inside the map only. */
#map .gm-style [tabindex]:focus,#map .gm-style button:focus,#map .gm-style img:focus,#map .gm-style div:focus{outline:none !important}
#segTip b{color:var(--gold);font-family:var(--font);font-weight:600}
#segTip .tlbl{color:var(--sub);font-size:10px;margin-right:6px}

#hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:rgba(13,15,17,.92);border:1px solid var(--bg);border-radius:20px;padding:5px 16px;font-size:11px;color:var(--sub);pointer-events:none;white-space:nowrap;z-index:10;display:none}
#hint b{color:var(--gold);font-weight:500}

#multiBar{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:var(--surf);border:1px solid var(--bg);border-radius:20px;padding:5px 16px;display:none;align-items:center;gap:12px;z-index:10;font-size:11px;color:var(--sub)}
#multiBar.show{display:flex}
#multiBar .mlink{color:var(--gold);cursor:pointer;font-size:11px}
#multiBar .mlink:hover{text-decoration:underline}
#multiBar .mlink.danger{color:var(--red)}
#multiBar .mclose{color:var(--sub);cursor:pointer}

#mapControls{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:6px;z-index:10}
.mc-card{background:rgba(20,24,28,.88);border:1px solid var(--b1);border-radius:var(--rs);padding:8px 10px;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--sub)}
.mc-card label{white-space:nowrap}
.mc-card input[type=range]{width:90px;accent-color:var(--gold)}