@font-face{font-family:Oxanium;src:url("fonts/oxanium-latin-variable.woff2") format("woff2");font-style:normal;font-weight:200 800;font-display:swap}
html,body.proto{height:100%;margin:0;overflow:hidden;background:var(--bg)}
.proto main{position:absolute;top:72px;left:0;right:0;bottom:0}
.pbar{position:absolute;top:0;left:0;right:0;height:72px;display:flex;align-items:center;gap:14px;padding:0 16px;background:linear-gradient(180deg,#0b0f18,#050505);border-bottom:1px solid var(--line);z-index:5;font-size:14px}
.pbrand{display:inline-flex;align-items:center;text-decoration:none;min-width:0;flex:0 1 auto;max-width:min(460px,calc(100vw - 210px))}
.pbrand-img{display:block;height:56px;width:auto;max-width:100%;object-fit:contain;object-position:left center;filter:drop-shadow(0 0 10px rgba(212,166,42,.22))}
.pbadge{flex:0 0 auto;margin-left:2px;font-family:Oxanium,var(--sans);font-weight:600;font-size:10px;letter-spacing:.14em;color:var(--silver);border:1px solid rgba(212,166,42,.35);border-radius:999px;padding:4px 10px;background:rgba(212,166,42,.06);white-space:nowrap}
.pctl{margin-left:auto;display:flex;gap:14px;color:var(--silver);flex-wrap:wrap;align-items:center}.pctl label{cursor:pointer;white-space:nowrap}
.pctl input{accent-color:var(--gold);width:16px;height:16px;margin:0 6px 0 0;padding:0;vertical-align:-3px}
#pmap{position:absolute;inset:0;overflow:hidden;background:#020308}
/* the two maps sit on top of each other and crossfade */
#pmap #map.pgold,#real{position:absolute;inset:0;transition:opacity .7s ease-in-out}
#pmap #map.pgold{height:auto;min-height:0;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
#real{background:radial-gradient(circle at center,#0a1430 0%,#050505 70%)}
#pmap.m-gold #real{opacity:0;pointer-events:none}#pmap.m-gold #map.pgold{opacity:1}
#pmap.m-real #map.pgold{opacity:0;pointer-events:none}#pmap.m-real #real{opacity:1}
#pmap.m-gold .ppop:not(.gpop),#pmap.m-real .gpop{display:none!important}
#pmap.m-real .plegend{display:none}
.plegend{position:absolute;left:14px;top:auto;bottom:0;z-index:3;display:flex;gap:14px;padding:8px 12px;border:1px solid var(--line);border-radius:10px 10px 0 0;background:var(--glass);backdrop-filter:blur(6px);font-size:13px;color:var(--silver)}
.plegend,.plegend > span,.ppop .tg{text-transform:uppercase!important}
.plegend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.pbtns{position:absolute;right:14px;top:14px;z-index:6;display:flex;flex-direction:column;align-items:center;gap:6px}
.pbtns button,.pmodebtn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.65);color:var(--gold2);font-size:18px;cursor:pointer;line-height:1}
.pbtns button:hover,.pmodebtn:hover{background:rgba(212,166,42,.22)}
#bLoc svg{vertical-align:middle}#bLoc.busy svg{animation:plocspin 1s linear infinite}@keyframes plocspin{to{transform:rotate(360deg)}}
.pmsg{position:absolute;right:62px;top:58px;z-index:6;max-width:min(300px,calc(100% - 80px));background:rgba(6,6,8,.92);border:1px solid var(--gold);border-radius:10px;padding:8px 12px;font-size:13px;color:#e4dfd2;opacity:0;pointer-events:none;transition:opacity .3s}.pmsg.on{opacity:1}
.youdot{position:absolute;z-index:3;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#4aa3ff;border:2.5px solid #fff;box-shadow:0 0 0 0 rgba(74,163,255,.6);animation:pyou 2s ease-out infinite;pointer-events:none;display:none}
.youdot span{position:absolute;left:50%;top:-24px;transform:translateX(-50%);white-space:nowrap;font:600 11px/1 var(--sans);color:#fff;background:rgba(6,6,8,.8);border:1px solid var(--line);border-radius:99px;padding:3px 7px}
@keyframes pyou{0%{box-shadow:0 0 0 0 rgba(74,163,255,.6)}100%{box-shadow:0 0 0 16px rgba(74,163,255,0)}}
.pinfo{position:absolute;left:14px;top:14px;bottom:auto;z-index:3;font-size:12px;color:var(--silver);background:var(--glass);border:1px solid var(--line);border-radius:8px;padding:4px 10px;pointer-events:none}.pinfo:empty{display:none}
/* OpenLayers controls themed */
#real .ol-control{background:transparent}
#real .ol-attribution{background:rgba(5,5,5,.75);border:1px solid var(--line);border-radius:8px 0 0 0;color:var(--silver);font-size:11px}
#real .ol-attribution a{color:var(--gold2)}#real .ol-attribution button{width:22px;height:22px;font-size:13px}
#real .ol-scale-line{background:var(--glass);border:1px solid var(--line);left:auto;right:14px;bottom:40px}#real .ol-scale-line-inner{border-color:var(--gold2);color:var(--gold2)}
#real .ol-rotate,#real .ol-zoom{display:none}
.ppop{position:absolute;z-index:4;display:none;min-width:240px;max-width:320px;background:rgba(16,22,34,.96);border:1px solid var(--gold);border-radius:14px;padding:16px 18px;color:#e4dfd2;box-shadow:0 10px 40px rgba(0,0,0,.6);font-size:14px;transform:translate(-50%,calc(-100% - 16px));}
.ppop h3{margin:0 24px 6px 0;font-size:1.05rem}.ppop .x{position:absolute;right:10px;top:6px;background:none;border:0;color:var(--gold2);font-size:22px;cursor:pointer}
.ppop .tg{display:inline-block;font-size:11px;border:1px solid var(--line);border-radius:99px;padding:1px 8px;margin:0 4px 4px 0;color:var(--gold2)}
.ppop .mut{color:#9ea3ad}.ppop ul{list-style:none;padding:0;margin:6px 0 0;max-height:220px;overflow:auto}.ppop li{padding:5px 0;border-top:1px solid rgba(212,166,42,.15);cursor:pointer}.ppop li:hover b{color:var(--gold2)}
@media(max-width:760px){
.pbadge{display:none}
.pbar{height:64px;gap:10px;padding:0 12px}
.proto main{top:64px}
.pbrand{max-width:calc(100vw - 150px)}
.pbrand-img{height:48px}
.pctl{gap:8px;font-size:12px}
.plegend{top:auto;bottom:0;left:10px}
}
@media(max-width:420px){
.pbar{height:58px}
.proto main{top:58px}
.pbrand{max-width:calc(100vw - 120px)}
.pbrand-img{height:42px}
.pctl label{max-width:42vw;overflow:hidden;text-overflow:ellipsis}
}
@media(prefers-reduced-motion:reduce){#pmap #map.pgold,#real{transition-duration:.01s}}
/* golden <-> realistic toggle (bottom of the column, same style as the other buttons) */
#bMode .ilayers{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vertical-align:middle}
#bMode .l1{fill:rgba(245,212,122,.35)}#pmap.m-real #bMode{border-color:var(--gold2)}#pmap.m-real #bMode .l1{fill:#f5d47a}
.pmodebtn{position:absolute;top:14px;right:56px;z-index:6;padding:0;display:grid;place-items:center}
#pmap.noanim #map.pgold,#pmap.noanim #real{transition:none}

.pbtns button[aria-pressed=true]{background:rgba(212,166,42,.22)}
/* Stopped spin is unselected even while a mouse/touch leaves :hover active. Keep keyboard focus outline. */
#bSpin{-webkit-tap-highlight-color:transparent}
.pbtns button{display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
.pbtns button svg{display:block;flex:none;width:18px;height:18px;margin:0;padding:0;transform:none;pointer-events:none}
#bSpin[aria-pressed=false]{background:rgba(0,0,0,.65);color:#9ea3ad;border-color:rgba(158,163,173,.3)}
/* Streets | Satellite: sits in the top-right row, left of the golden/realistic layers button; only in the realistic view */
.pseg{position:absolute;top:14px;right:98px;z-index:6;display:flex;height:36px;padding:3px;gap:2px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .35s,transform .35s,visibility 0s .35s}
#pmap.m-real .pseg{opacity:1;visibility:visible;transform:none;transition:opacity .35s .35s,transform .35s .35s,visibility 0s}
.pseg button{border:0;border-radius:7px;background:transparent;color:var(--silver);font:600 12px/1 var(--sans);letter-spacing:.03em;padding:0 11px;cursor:pointer;transition:background .25s,color .25s}
.pseg button:hover{color:var(--gold2)}
.pseg button[aria-checked=true]{background:var(--grad);color:#120d02}
.pseg button:focus-visible{outline:2px solid var(--gold2);outline-offset:1px}
/* light sharpening of the OSM streets layer only (switch: SHARPEN_OSM in map-prototype.js) */
#pmap.sharpen #real .osm-base{filter:url(#psharpen)}
@media(max-width:600px){#real .ol-attribution{font-size:9px;line-height:1.3;max-width:100%}#real .ol-scale-line{right:auto;left:14px;bottom:74px}}

/* Uppercase presentation only; stored listing data and form values remain unchanged. */
body.proto,body.proto *{text-transform:uppercase}
body.proto input,body.proto textarea{ text-transform:none }

/* Stroke-area centroid is (12.65,11.31) in the 24-unit glyph; at 18px compensate ~(-.49,+.51)px. */
#bSpin svg{transform:translate(-.5px,.5px)}