/* Shared aerial/walking surfaces, based on the time-of-day control. */
:root{
 --view-surface:#142018f2;
 --view-border:#bdcc9866;
 --view-text:#e4e8db;
 --view-hover:#ffffff16;
 --view-selected:#d4dfb9;
 --view-radius:4px;
 --view-inset-radius:2px;
 --view-nav-bottom:74px;
}
#backToIntro,#switchView,#deviceLocationButton,#locationsButton,#resetAerial,#dayNightToggle,
#layoutControls,#locationsPanel,#deviceLocationStatus,#buildingPhotos,#buildingHoverLabel,
.photo-lightbox-content,.explore-guide,#churtonNav,
#look,#walkTouch button,#photoLightbox button{
 background:var(--view-surface);
 border:1px solid var(--view-border);
 border-radius:var(--view-radius);
 color:var(--view-text);
 text-shadow:none;
}
#layoutControls,#locationsPanel,#deviceLocationStatus,#buildingPhotos,#buildingHoverLabel,
.photo-lightbox-content,.explore-guide,#churtonNav{box-shadow:0 8px 30px #0004}
#dayNightToggle button,#layoutControls>summary,#locationsPanel a,#churtonNav a,
#closeBuildingPhotos,#buildingPhotoList .building-photo-open,#layoutControls .period-range button{
 border-radius:var(--view-inset-radius);
}
#closeBuildingPhotos,#layoutControls .period-range button{background:transparent;color:var(--view-text)}
#backToIntro:hover,#switchView:hover:not(:disabled),#deviceLocationButton:hover,#locationsButton:hover,#resetAerial:hover,#look:hover,
#walkTouch button:hover,#photoLightbox button:hover{background:color-mix(in srgb,var(--view-surface),white 8%)}
#layoutControls>summary:hover,#layoutControls .period-range button:hover:not(:disabled),
#locationsPanel a:hover,#churtonNav a:hover,#closeBuildingPhotos:hover{background:var(--view-hover)}
#locationsPanel a[aria-current="page"],#walkTouch button.held{background:var(--view-selected);color:#26331d}
#backToIntro:focus-visible,button:focus-visible,#locationsPanel a:focus-visible,
#churtonNav a:focus-visible,#layoutControls>summary:focus-visible{
 outline:2px solid #e3d5a4;outline-offset:2px;
}
#dayNightToggle button:focus-visible{outline-offset:-2px}
#layoutControls .period-range button{width:44px;min-width:44px}
#periodTicks{margin-left:59px;margin-right:59px}
.period-endpoints{margin-left:52px;margin-right:52px}
#churtonNav{padding:8px 12px;max-width:calc(100vw - 48px)}
#churtonNav a{display:inline-block;padding:8px 4px;text-decoration:none}

/* DOM and visual order agree: location crosshairs, lighting, then menu/reset. */
#previewNav,.explore-nav{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
.view-navigation{display:flex;align-items:center;gap:8px;pointer-events:none}
.view-navigation>*{pointer-events:auto}
#switchView{display:flex;align-items:center;padding:12px 16px;min-height:50px;font:600 12px Arial;letter-spacing:1px}
#switchView:disabled{opacity:.6;cursor:wait}
.view-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-left:auto;pointer-events:none}
.view-actions>*{pointer-events:auto}
#dayNightToggle,#locationsPicker{margin:0;flex:none}
#backToIntro,#deviceLocationButton,#locationsButton,#resetAerial{min-height:50px}
#deviceLocationButton{height:50px}
#backToIntro{font:600 12px Arial;letter-spacing:1px}
#locationsPanel{top:calc(100% + 8px)}
#deviceLocationStatus{top:calc(var(--view-nav-bottom) + 8px)}

@media(max-width:1000px){
 .explore-nav~#layoutControls,body.explore-touch .explore-nav~#layoutControls{top:calc(var(--view-nav-bottom) + 12px)}
}
@media(max-width:650px){
 :root{--view-nav-bottom:120px}
 #previewNav,.explore-nav{top:12px;left:12px;right:12px}
 .view-navigation #backToIntro,.view-navigation #switchView{padding:12px 8px;font-size:11px;letter-spacing:.4px}
 .view-actions{flex-basis:100%}
 #previewNav #locationsPanel,.explore-nav #locationsPanel{top:calc(var(--view-nav-bottom) + 8px);right:12px;max-height:calc(100dvh - var(--view-nav-bottom) - 24px)}
 #deviceLocationStatus{max-width:calc(100vw - 24px)}
 .building-photos-open #layoutControls{top:calc(var(--view-nav-bottom) + 12px)}
 body.explore-touch .explore-nav~#layoutControls{max-height:calc(100dvh - var(--view-nav-bottom) - 256px)}
 #churtonNav:is(.pharmacy-navigation,.hale-navigation,.irby-navigation,.farndon-navigation,.witby-navigation,.estates-navigation,.annexe-ward-navigation){top:calc(var(--view-nav-bottom) + 12px)}
}
@media(max-width:430px){
 body:has(#previewNav){--view-nav-bottom:178px}
 #previewNav #locationsPicker{flex-basis:100%;justify-content:flex-end}
}
@media(max-height:500px){
 #layoutControls{top:calc(var(--view-nav-bottom) + 12px);max-height:calc(100dvh - var(--view-nav-bottom) - 28px)}
}
@media(min-width:500px) and (max-height:500px){
 body.explore-touch .explore-guide{top:calc(var(--view-nav-bottom) + 12px)}
 body.explore-touch .explore-nav~#layoutControls{max-height:calc(100dvh - var(--view-nav-bottom) - 28px)}
}

.developer-options{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:8px;pointer-events:auto;text-shadow:none}
.developer-options button{background:var(--view-surface);border:1px solid var(--view-border);border-radius:var(--view-radius);color:var(--view-text);padding:8px 12px;min-height:44px;font:12px Arial;letter-spacing:0;margin:0}
.developer-options button:hover{background:color-mix(in srgb,var(--view-surface),white 8%)}
.developer-options button[aria-pressed="true"]{background:var(--view-selected);color:#26331d}
#developerShortcuts{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
#developerShortcuts[hidden]{display:none}
.stair-overlay-legend{display:flex;gap:10px;font:11px Arial}
.stair-overlay-legend span::before{content:'';display:inline-block;width:8px;height:8px;margin-right:4px;background:#54e8ff}
.stair-overlay-legend span+span::before{background:#ffa852}
#developerStatus{flex-basis:100%;font:11px/1.4 Arial}
#developerStatus:empty{display:none}
body.mouse-locked .explore-guide .developer-options button{display:inline-block}

@media(max-width:650px){
 body:has(#aerialHelp) #layoutControls{bottom:calc(var(--aerial-help-height,100px) + 30px);max-height:max(44px,calc(100dvh - var(--view-nav-bottom) - var(--aerial-help-height,100px) - 54px))}
}