/* OVERLAYS */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(4px)}
.ov.show{display:flex}
.mbox{background:var(--surf);border:1px solid var(--bg);border-radius:14px;padding:22px;width:430px;max-width:93vw;max-height:90vh;overflow-y:auto}
.mbox h2{font-size:15px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.mbox p{font-size:12px;color:var(--sub);line-height:1.65;margin-bottom:12px}
.mbox a{color:var(--gold)}
.mfi{width:100%;padding:7px 10px;background:var(--panel);border:1px solid var(--b1);border-radius:var(--rs);color:var(--text);font-family:var(--font);font-size:12px;margin-bottom:10px;outline:none}
.mfi:focus{border-color:var(--gold-dim)}
.mbtrow{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.mbt{padding:6px 14px;border-radius:var(--rs);font-size:12px;cursor:pointer;border:1px solid var(--b1);background:transparent;color:var(--sub);font-family:var(--ui);transition:all .12s}
.mbt:hover{border-color:var(--bg);color:var(--text)}
/* V11.1 — standard modal close button (all big overlays close via Esc too) */
.modal-x{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--rs);border:1px solid var(--b1);background:transparent;color:var(--sub);font-size:16px;line-height:1;cursor:pointer;transition:all .12s;flex-shrink:0}
.modal-x:hover{border-color:var(--danger);color:var(--danger);background:rgba(217,83,63,.08)}
.mbt.p{background:var(--gold);color:#0D0F11;border-color:var(--gold);font-weight:700}
.mbt.p:hover{opacity:.88}
.mbt.danger{color:var(--red);border-color:rgba(217,83,63,.3)}
.mbt.danger:hover{background:rgba(217,83,63,.1)}

/* MARKER DIALOG */
#mdlg{position:fixed;background:var(--surf);border:1px solid var(--bg);border-radius:var(--r);padding:13px 14px;width:248px;max-height:calc(100vh - 24px);overflow:auto;z-index:150;box-shadow:0 8px 32px rgba(0,0,0,.65);display:none}
#mdlg h3{font-size:13px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.dl{font-size:9px;color:var(--sub);margin-bottom:4px;font-family:var(--font);letter-spacing:.08em;text-transform:uppercase}
.di{width:100%;padding:6px 8px;background:var(--panel);border:1px solid var(--b1);border-radius:var(--rs);color:var(--text);font-size:12px;outline:none;font-family:var(--ui);margin-bottom:8px}
.di:focus{border-color:var(--gold-dim)}
.igrid{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:8px}
.iopt{width:26px;height:26px;border-radius:var(--rs);border:1px solid var(--b1);background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:all .1s;line-height:1}
.iopt:hover{border-color:var(--bgh)}
.iopt.sel{border-color:var(--gold);background:var(--gold-faint)}
.dcc{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.dc{width:20px;height:20px;min-width:20px;min-height:20px;max-width:20px;max-height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;flex-shrink:0;flex-grow:0;display:inline-block;aspect-ratio:1/1;box-sizing:border-box;padding:0}
.dc:hover{transform:scale(1.2)}
.dc.sel{border-color:#fff}
.dlg-btn{width:100%;padding:5px;border-radius:var(--rs);border:1px solid var(--b1);background:transparent;color:var(--red);border-color:rgba(217,83,63,.3);font-size:11px;cursor:pointer;text-align:center;transition:all .12s;margin-top:4px}
.dlg-btn:hover{background:rgba(217,83,63,.1)}

/* COLOR / ICON POPS / CTX */
#cpop{position:fixed;background:var(--surf);border:1px solid var(--bg);border-radius:var(--r);padding:10px;z-index:9999;display:none;flex-wrap:wrap;gap:6px;width:328px;justify-content:flex-start;box-shadow:0 6px 24px rgba(0,0,0,.55);max-width:calc(100vw - 16px)}
#cpop .cp{width:28px;height:28px;min-width:28px;min-height:28px;max-width:28px;max-height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;flex-shrink:0;flex-grow:0;display:inline-block;aspect-ratio:1/1;box-sizing:border-box;padding:0}
#cpop .cp:hover{transform:scale(1.2)}
#ipop{position:fixed;background:var(--surf);border:1px solid var(--bg);border-radius:var(--r);padding:8px;z-index:400;display:none;flex-wrap:wrap;gap:3px;width:174px;box-shadow:0 6px 24px rgba(0,0,0,.55)}
#ipop .ip{width:26px;height:26px;border-radius:var(--rs);border:1px solid var(--b1);background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:all .1s}
#ipop .ip:hover{border-color:var(--bgh)}
/* V11.1 — legacy .cx context-menu block removed (markup uses .cx-it; canonical rules
   live in the "CONTEXT MENU" section further down). */
.cx-sub .cp{width:22px;height:22px;min-width:22px;min-height:22px;max-width:22px;max-height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;flex-shrink:0;display:inline-block;aspect-ratio:1/1;box-sizing:border-box;padding:0}
.cx-sub .cp:hover{transform:scale(1.2)}
/* V11.3.5 — interactive guided tours */
#tourOv{position:fixed;inset:0;z-index:20000}
#tourHole{position:fixed;border-radius:10px;box-shadow:0 0 0 100000px rgba(6,8,10,.74),0 0 0 2.5px var(--gold),0 6px 28px rgba(0,0,0,.5);transition:left .32s cubic-bezier(.22,.8,.36,1),top .32s cubic-bezier(.22,.8,.36,1),width .32s cubic-bezier(.22,.8,.36,1),height .32s cubic-bezier(.22,.8,.36,1),opacity .25s;pointer-events:none}
#tourCard{position:fixed;width:302px;background:var(--panel);border:1px solid var(--gold-dim);border-radius:13px;padding:14px 16px 12px;box-shadow:0 18px 48px rgba(0,0,0,.65);transition:left .32s cubic-bezier(.22,.8,.36,1),top .32s cubic-bezier(.22,.8,.36,1);color:var(--text)}
#tourKicker{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:5px;padding-right:16px}
#tourTitle{font-size:14px;font-weight:700;margin:0 0 6px;color:var(--text)}
#tourBody{font-size:11.5px;line-height:1.55;color:var(--sub)}
#tourBody b{color:var(--text)}
#tourBody kbd{display:inline-block;background:var(--panel3);border:1px solid var(--b1);border-radius:3px;padding:0 5px;font-size:10px;font-family:var(--font);color:var(--gold)}
#tourFoot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:8px}
.tourBtn{background:var(--panel3);border:1px solid var(--b1);color:var(--text);border-radius:7px;padding:5px 12px;font-size:11px;cursor:pointer;font-weight:600}
.tourBtn:hover{border-color:var(--gold-dim)}
.tourBtn.primary{background:var(--gold);border-color:var(--gold);color:#141414}
.tourBtn[disabled]{opacity:.35;cursor:default}
#tourDots{display:flex;gap:4px}
#tourDots i{width:5px;height:5px;border-radius:50%;background:var(--b1);transition:background .2s,transform .2s}
#tourDots i.on{background:var(--gold);transform:scale(1.3)}
#tourX{position:absolute;top:8px;right:9px;background:none;border:none;color:var(--sub);cursor:pointer;font-size:12px;padding:3px}
#tourX:hover{color:var(--text)}
@media (prefers-reduced-motion:reduce){#tourHole,#tourCard{transition:none}}
/* V1.15 — screenshot cue: the screen edges pulse white once when a capture fires */
#shotFlash{position:absolute;inset:0;pointer-events:none;z-index:100000;opacity:0;box-shadow:inset 0 0 0 3px rgba(255,255,255,.95),inset 0 0 70px rgba(255,255,255,.30)} /* V1.15.1 — absolute inside #mapWrap: the pulse frames the MAP, not the whole page */
#shotFlash.go{animation:shotPulse .5s ease-out}
@keyframes shotPulse{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){#shotFlash.go{animation-duration:.18s}}
#tourBanner{display:flex;align-items:center;gap:12px;background:var(--gold-faint);border:1px solid var(--gold-dim);border-radius:10px;padding:11px 14px;margin:0 0 14px;cursor:pointer;transition:border-color .15s,transform .12s}
#tourBanner:hover{border-color:var(--gold);transform:translateY(-1px)}
#tourBanner .tourPlay{width:28px;height:28px;border-radius:50%;background:var(--gold);color:#141414;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;padding-left:2px}
#tourBanner b{font-size:12.5px;color:var(--text)}
#tourBanner div div{font-size:10.5px;color:var(--sub);margin-top:2px;line-height:1.4}
#helpBox .helpCardHd.tourable{cursor:pointer;transition:color .12s}
#helpBox .helpCardHd.tourable:hover{color:#fff}
#helpBox .tourChip{margin-left:auto;font-size:9px;color:var(--gold);background:var(--gold-faint);border:1px solid var(--gold-dim);padding:2px 8px;border-radius:10px;letter-spacing:.06em;font-weight:600;white-space:nowrap}
/* V11.3 — interactive ctx title affordances */
.cx-title .cx-tdot{cursor:pointer;box-shadow:0 0 0 1.5px rgba(255,255,255,.25)}
.cx-title .cx-tdot:hover{transform:scale(1.25);box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.cx-title .cx-tname{cursor:text;border-radius:3px;padding:0 2px;margin:0 -2px}
.cx-title .cx-tname:hover{background:rgba(255,255,255,.08);text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:2px}
#ctxColorPop .cx-tswatch:hover{transform:scale(1.18)}

/* ── V1.17.0 — Earth 3D (Photorealistic Google Earth) overlay ─────────────── */
/* Globe button carries a small "Earth 3D" label under the icon (clean two-row chip). */
#mapZoom #bEarth{flex-direction:column;height:auto;min-height:40px;gap:1px;padding:5px 0 4px;line-height:1}
#mapZoom #bEarth svg{width:19px;height:19px}
#mapZoom #bEarth .bEarthTxt{font-size:7.5px;font-weight:700;letter-spacing:.02em;line-height:1;font-family:'Roboto',Arial,sans-serif;color:inherit}
#bEarth.pending svg{animation:e3dSpin 1s linear infinite}
@keyframes e3dSpin{to{transform:rotate(360deg)}}
#earth3dWrap{position:absolute;inset:0;z-index:130;display:none;background:#0b0d0f}
#earth3dWrap.show{display:block}
#earth3dWrap gmp-map-3d{width:100%;height:100%;display:block}
#earth3dBar{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:132;display:none;align-items:center;gap:8px;
  background:rgba(13,15,17,.92);border:1px solid var(--bg);border-radius:22px;padding:6px 10px 6px 14px;
  box-shadow:0 6px 24px rgba(0,0,0,.55);font-family:var(--ui,inherit)}
#earth3dBar.show{display:flex}
#earth3dBar .e3dTitle{color:var(--gold);font-size:12px;font-weight:600;letter-spacing:.02em;white-space:nowrap;margin-right:4px;user-select:none}
#earth3dBar .e3dTitle .e3dGlobe{font-size:13px}
#earth3dBar .e3dBtn{background:var(--panel);border:1px solid var(--b1);border-radius:16px;color:var(--sub);
  font-size:11.5px;font-weight:600;padding:5px 12px;cursor:pointer;white-space:nowrap;transition:all .13s}
#earth3dBar .e3dBtn:hover{color:var(--text);border-color:var(--bg);background:var(--panel2)}
#earth3dBar .e3dBtn.on{color:var(--gold);border-color:var(--gold-dim);background:var(--gold-faint)}
/* Labels dropdown (label-type toggles) */
#earth3dBar .e3dLblWrap{position:relative;display:inline-flex}
#e3dLabelMenu{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:140;display:none;
  flex-direction:column;gap:2px;min-width:138px;background:rgba(13,15,17,.97);border:1px solid var(--bg);
  border-radius:10px;padding:7px 8px;box-shadow:0 8px 26px rgba(0,0,0,.6)}
#e3dLabelMenu.show{display:flex}
#e3dLabelMenu label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--sub);
  padding:4px 6px;border-radius:6px;cursor:pointer;white-space:nowrap;user-select:none}
#e3dLabelMenu label:hover{background:var(--panel2);color:var(--text)}
#e3dLabelMenu input{accent-color:var(--gold);width:14px;height:14px;cursor:pointer;margin:0}
#earth3dBar .e3dExit{color:#f0d9d2;border-color:rgba(217,83,63,.5)}
#earth3dBar .e3dExit:hover{color:#fff;background:rgba(217,83,63,.22);border-color:var(--red)}
#earth3dHint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:132;display:none;max-width:min(88vw,560px);
  background:rgba(13,15,17,.94);border:1px solid var(--bg);border-left:3px solid var(--gold);border-radius:8px;
  padding:9px 15px;font-size:11.5px;line-height:1.4;color:var(--sub);box-shadow:0 6px 22px rgba(0,0,0,.5);text-align:center}
#earth3dHint.show{display:block}
#earth3dHint b{color:var(--gold);font-weight:600}
#earth3dHint.warn{border-left-color:var(--red)}
/* V1.17.2-beta.13 — heavy-plot zoom: fade the overlay panes back in after the zoom. A CSS
   animation is used (not inline opacity) because Google rewrites the pane's inline styles when it
   re-renders the markers, which was swallowing the fade; a running animation overrides that. */
@keyframes cpOvFadeIn{from{opacity:0}to{opacity:1}}

