/* Compact map navigation, with accessible names retained on every button. */
html body #app aside>.hud-layer{width:46px;min-width:46px;height:46px;min-height:46px;padding:0;justify-content:center;gap:0}
html body #app aside>.hud-layer b{flex:0 0 20.7px;font-size:20.7px}
html body #app aside>.hud-layer b svg{width:20.7px;height:20.7px}
html body #app aside>.hud-layer i{display:none}
html body #app aside>.hud-layer[data-group="create"]{display:none!important}
html body #app header{display:flex;align-items:center;gap:8px}
html body #app header .brand{margin-right:auto;flex-shrink:0}
html body #app header .topnav{position:static;transform:none;width:auto;margin:0;flex-shrink:0}
html body #app header .atmosphere-toggle,html body #app header .header-music{position:relative!important;inset:auto!important;transform:none;display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:1px solid var(--map-border);border-radius:50%;background:var(--map-surface)!important;color:var(--map-ink)!important;box-shadow:var(--map-shadow);font-size:23px;cursor:pointer}
html body #app header .header-music[aria-pressed="false"]:after{content:'';position:absolute;width:24px;height:2px;background:currentColor;transform:rotate(-45deg);box-shadow:0 1px var(--map-surface)}
html body #app header .header-music:focus-visible{outline:3px solid #b78a36;outline-offset:2px}
@media(max-width:700px){
 html body #app header [data-mode="overview"]{display:none!important}
 html body #app header{gap:6px}
 html body #app header .nav-button{font-size:13px;padding:7px 6px}
}
@media(max-width:360px){html body #app header .topnav{display:none}}
/* Keep the map clear and put the primary utility within thumb reach. */
html body #app header [data-mode="explore"],html body #app aside>.loom-install-trigger,html body #app .viewpoints{display:none!important}
html body #app #loom-welcome .welcome-eyebrow,html body #app #loom-welcome .welcome-location{display:none!important}
html body #app .map-control-dock{left:auto;right:calc(12px + var(--ui-right,0px));bottom:calc(36px + var(--ui-bottom,0px));max-width:calc(100% - 24px);gap:8px}
html body #app .map-control-dock .map-search-toggle{order:2;flex:0 0 52.8px;width:52.8px;height:52.8px}
html body #app .map-search-toggle svg{width:24px;height:24px}
@media(min-width:701px){html body #app .hud-search{left:auto!important;right:12px!important;bottom:98px!important;width:min(430px,calc(100% - 24px))!important}}
@media(max-width:700px){html body #app header .topnav{display:none}}
/* Expand just the selected label; the icon stays in its original column. */
html body #app aside{max-width:144px}
html body #app aside>.hud-layer{justify-content:flex-start;overflow:hidden;transition:width .2s ease,background .15s ease;max-width:none}
html body #app aside>.hud-layer b{flex:0 0 44px}
html body #app aside>.hud-layer i{display:block;white-space:nowrap;opacity:0;transform:translateX(-8px);transition:opacity .16s ease,transform .2s ease;font-size:14px}
html body #app aside>.hud-layer.nav-label-open{width:138px}
html body #app aside>.hud-layer.nav-label-open i{opacity:1;transform:translateX(0)}
@media(prefers-reduced-motion:reduce){html body #app aside>.hud-layer,html body #app aside>.hud-layer i{transition:none}}
/* Focused menu: one tactile button above its choices. */
html body #app aside>.hud-layer{border-radius:13px!important;box-shadow:0 2px 0 #243a3038,0 3px 8px #243a3018!important}
html body #app aside>.hud-layer b{font-size:29px}
html body #app aside>.hud-layer b svg{width:29px;height:29px;stroke-width:1.7}
html body #app aside>.hud-layer:active{transform:translateY(1px);box-shadow:0 1px 0 #243a3038!important}
html body #app.nav-focused aside>.hud-layer:not(.nav-label-open){display:none!important}
html body #app.nav-focused aside{overflow:visible;max-height:none}
html body #app.nav-focused:not(.map-journey) #discovery-tray,html body #app.nav-focused[data-journey-target="explorer-home"] #discovery-tray{left:var(--discovery-left)!important;top:var(--discovery-top)!important;bottom:auto!important;right:auto!important;transform:none!important;width:min(220px,calc(100% - var(--discovery-left) - 12px))!important;max-height:calc(100% - var(--discovery-top) - 88px)!important;overflow:auto!important}

/* Keep search beneath the post/feedback control and sources beside lighting. */
html body #app .map-control-dock{left:auto!important;right:12px!important;top:126px!important;bottom:auto!important;max-width:none}
html body #app .map-control-dock .map-search-toggle{flex:0 0 44px;width:44px;height:44px}
html body #app .mirble-feedback-button{right:12px;width:44px;height:44px;min-width:44px;padding:0;justify-content:center}
html body #app .mirble-feedback-button span{display:none}
html body #app header .information-guide-link{flex:0 0 40px;width:40px;min-width:40px;height:44px;min-height:44px;background:transparent;border:0;color:var(--map-ink);font-size:18px}
html body #app header .information-guide-link:focus-visible{outline:3px solid #b78a36;outline-offset:1px}
@media(max-width:700px){html body #app .map-control-dock,html body #app .mirble-feedback-button{right:10px!important}}
@media(min-width:701px){html body #app.search-active .hud-search{top:178px!important;bottom:auto!important;right:12px!important;max-height:calc(100% - 190px);overflow:auto}}

/* Post is a primary action within thumb reach, separate from map navigation. */
html body #app > .post-action{position:absolute;z-index:9;right:calc(16px + var(--ui-right,0px));bottom:calc(32px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:center;width:64px;height:64px;min-width:64px;min-height:64px;padding:0;margin:0;border:1px solid var(--map-border,#b7c2a9);border-radius:20px;background:var(--map-surface,#fffaf0);color:var(--map-ink,#263c30);box-shadow:0 3px 0 #243a3038,0 6px 18px #243a3033;cursor:pointer;touch-action:manipulation}
html body #app > .post-action b{display:flex;align-items:center;justify-content:center}
html body #app > .post-action svg{width:36px;height:36px;stroke-width:1.7}
html body #app > .post-action i{display:none}
html body #app > .post-action:focus-visible{outline:3px solid #b78a36;outline-offset:3px}
html body #app > .post-action:active{transform:translateY(1px)}
@media(hover:hover){html body #app > .post-action:hover{background:var(--map-active,#dfe9d2)}}
html body:is(.mode-overview,.cinematic-active) #app > .post-action,
html body #app:is(.map-journey,.nav-focused,.search-active,.post-picking,.loom-routing,.transit-mode,.cip-map-view,.sentiment-mode,.permit-map-mode,.event-frequency-mode,.ward-radial-open,.downtown-film-active) > .post-action{display:none!important}