/* esc-streetzoom (sz1): satellite/hybrid street-level zoom overlay. Additive. */
#escSZ{position:fixed;inset:0;z-index:150;opacity:0;pointer-events:none;transition:opacity .6s ease;background:transparent}
#escSZ.on{opacity:1}
#escSZ.on .sz-disc{pointer-events:auto}
#escSZ .sz-disc{position:absolute;left:50%;top:calc(50% + 48px);width:var(--sz-size,86vmin);height:var(--sz-size,86vmin);transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;background:#000;pointer-events:none;box-shadow:0 0 0 2px var(--gold,#d4af37),0 0 22px color-mix(in srgb,var(--gold,#d4af37) 28%,transparent),0 18px 60px rgba(0,0,0,.55);transition:width .38s ease,height .38s ease,border-radius .38s ease}
#escSZ.full .sz-disc{width:100%;height:100%;border-radius:0;box-shadow:inset 0 0 0 2px var(--gold,#d4af37)}
#escSZ .sz-map{position:absolute;inset:0}
#escSZ .sz-bar{position:absolute;top:200px;left:50%;transform:translateX(-50%);z-index:4;display:flex;gap:8px;align-items:center}
#escSZ:not(.full) .maplibregl-ctrl-group{display:none}
#escSZBack{min-height:44px;padding:0 16px;border-radius:22px;border:1px solid var(--accent,#d4af37);background:rgba(10,10,14,.85);color:var(--text,#fff);font:600 14px/44px system-ui,sans-serif;cursor:pointer}
#escSZStyle{min-height:44px;padding:0 14px;border-radius:22px;border:1px solid rgba(255,255,255,.3);background:rgba(10,10,14,.85);color:var(--text,#fff);font:500 13px/44px system-ui,sans-serif;cursor:pointer}
#escSZLabel{position:absolute;top:252px;left:50%;transform:translateX(-50%);z-index:3;padding:4px 10px;border-radius:12px;background:rgba(10,10,14,.7);color:#fff;font:12px system-ui,sans-serif;max-width:70vw}
#escSZLogo{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;z-index:3;display:block;line-height:0}
#escSZFull{min-height:44px;padding:0 14px;border-radius:22px;border:1px solid rgba(255,255,255,.3);background:rgba(10,10,14,.85);color:var(--text,#fff);font:500 13px/44px system-ui,sans-serif;cursor:pointer}
#escSZLogo img{height:22px}
#escSZHint{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:140;display:none;min-height:44px;padding:0 18px;border-radius:22px;border:1px solid var(--accent,#d4af37);background:rgba(10,10,14,.88);color:var(--text,#fff);font:600 14px/44px system-ui,sans-serif;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.5)}
#escSZHint.show{display:block}
#escSZ .maplibregl-ctrl-attrib{font-size:11px}
/* sz1b: keep MapTiler logo + attribution clear of the phone bottom nav / radio bar */
@media (max-width:760px){#escSZ .sz-map{bottom:calc(64px + env(safe-area-inset-bottom))}#escSZLogo{bottom:calc(74px + env(safe-area-inset-bottom))}}

/* Street view REPLACES the globe (Corey, 2026-10-21): while street view is
   open the 3D earth yields entirely - no rim peeking around the disc - and
   Back to globe restores it. The class is only set on a successful open,
   so the staged dive still flies over the earth, and a failed open keeps it. */
body.esc-sz-open > canvas { visibility: hidden; }

/* The disc fits the space BELOW the app header (Corey, 2026-10-21: it was
   overlapping the header) and, in disc view, slides right and shrinks to
   the free space when the left panel opens - panels stay usable in both
   street view modes. Full view keeps the whole screen. */
#escSZ:not(.full) .sz-disc{width:min(var(--sz-size,86vmin),calc(100vw - 24px),calc(100vh - 112px));height:min(var(--sz-size,86vmin),calc(100vw - 24px),calc(100vh - 112px))}
@media (min-width:821px){
  body.esc-sz-open[data-left="open"] #escSZ:not(.full) .sz-disc{left:calc(50% + 236px);width:min(var(--sz-size,86vmin),calc(100vw - 496px),calc(100vh - 112px));height:min(var(--sz-size,86vmin),calc(100vw - 496px),calc(100vh - 112px))}
  body.esc-sz-open[data-left="open"] #escSZ.full .sz-disc{left:480px;top:0;width:calc(100% - 480px);height:100%;transform:none;transition:width .38s ease,height .38s ease,left .38s ease,top .38s ease}
}