/* 165-6: preserve the warm surfaces, dark text and purple active states. */
[hidden]{display:none!important}
#app{--release-control:44px}
#topbar{display:flex;min-height:56px;height:auto;gap:8px;padding:6px 12px;flex-wrap:wrap;overflow:visible!important}
#topbar .logo-btn{font:700 15px var(--sans);min-height:44px;flex:0 0 auto}
#topbar .spacer{display:none}
#topbar #place-search-form{flex:1 1 260px;max-width:460px;min-width:120px;margin:0}
#topbar #user-chip{margin-left:auto;max-width:220px!important;min-height:44px;gap:5px;overflow:hidden}
#user-name-disp{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-prefix{white-space:nowrap;font:12px var(--sans);color:var(--text2)}
#topbar .help-btn{margin-left:auto;min-height:44px!important;height:44px!important;flex:0 0 48px!important}
#topbar .help-btn+#user-chip{margin-left:0}
#walk-now,#walk-tools-toggle,#map-only-toggle,#walk-tools-close{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:44px;height:44px;min-height:44px;flex:0 0 44px;padding:8px;border:1px solid var(--border2);border-radius:10px;background:var(--surface2);color:var(--text);box-shadow:var(--sh);cursor:pointer;font:600 18px var(--sans)}
#walk-now svg,#walk-tools-toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#walk-now{color:var(--mosque)}
#walk-tools-toggle,#map-only-toggle{position:absolute;z-index:2150;top:10px}
#walk-tools-toggle{left:10px}#map-only-toggle{right:10px}
#bottombar{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto!important;flex-shrink:0}
#map-action-panel{position:static!important;max-width:none!important;width:auto!important;padding:0!important;border:0!important;box-shadow:none!important;display:block!important}
#map-action-panel[hidden]{display:block!important}
#toolbar-toggle{display:none!important}
#layer-row{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px!important;padding:7px 8px!important;overflow:visible!important}
#layer-row .lbtn{width:100%;min-width:0;min-height:44px;height:44px;padding:5px 8px;box-sizing:border-box;justify-content:center;gap:5px;border:1px solid var(--border2);border-radius:10px;font-size:12px;color:var(--text2);white-space:normal;line-height:1.2}
#layer-row .lbtn.on{color:var(--mosque);border-color:var(--mosque);background:#f6f1ff}
#walk-tools-panel{position:absolute;z-index:2140;top:62px;left:10px;width:360px;max-width:calc(100% - 74px);max-height:calc(100% - 126px);overflow:auto;overscroll-behavior:contain;box-sizing:border-box;padding:10px;background:var(--surface);border:1px solid var(--border2);border-radius:12px;box-shadow:var(--sh2);color:var(--text);font:13px var(--sans)}
.walk-tools-heading{display:flex;align-items:center;gap:6px;margin-bottom:8px}.walk-tools-heading strong{flex:1;font-size:14px}#walk-tools-close{width:36px;height:36px;min-height:36px;flex-basis:36px;box-shadow:none}
#walk-tools-panel #action-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px;padding:0!important;background:transparent;border:0}
#walk-tools-panel #action-row>button{display:flex;justify-content:center;align-items:center;width:100%;height:48px;min-height:48px;box-sizing:border-box;padding:5px 7px;margin:0;border:1px solid var(--border2);border-radius:9px;background:var(--surface2);color:var(--text);font:500 12px var(--sans);white-space:normal;line-height:1.3;cursor:pointer}
#walk-tools-panel #action-row>button[aria-expanded=true]{border-color:var(--mosque);background:#f6f1ff;color:var(--mosque)}
.walk-tool-sections{margin-top:10px}.walk-tool-section{display:grid;gap:6px}
.walk-choice,#walk-section>#btn-gps{display:block;box-sizing:border-box;width:100%;min-height:58px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);color:var(--text);text-align:left;font:12px var(--sans);cursor:pointer;white-space:normal}
.walk-choice strong{display:block;font:600 12px/1.4 var(--sans)}.walk-choice small{display:block;margin-top:3px;font:11px/1.5 var(--sans);color:var(--text2)}
.favourites-shortcut{margin-top:10px;font-weight:500;min-height:44px}
#gps-walk-menu{padding:6px;border-color:var(--border2);border-radius:var(--r)}
#gps-walk-menu button{min-height:58px;margin:3px 0;background:var(--surface2);border:1px solid var(--border);font-size:12px;color:var(--text2)}
#gps-walk-menu strong{font-size:12px;font-weight:600}#gps-walk-menu small{font-size:10px;margin-top:3px;color:var(--text2)}
#gps-walk-menu button:hover,#gps-walk-menu button:focus-visible,.walk-choice:hover{border-color:var(--mosque);color:var(--mosque);background:#f5f3ff}
#mmapper-menu,#map-settings-panel{position:fixed;z-index:2900;top:58px;left:10px;width:270px;max-width:calc(100vw - 20px);max-height:calc(100dvh - 80px);box-sizing:border-box;overflow:auto;padding:6px;border:1px solid var(--border2);border-radius:12px;background:var(--surface);box-shadow:var(--sh2)}
#mmapper-menu button{display:block;width:100%;min-height:44px;padding:10px 12px;text-align:left;border:0;border-radius:8px;background:var(--surface);color:var(--text);font:13px var(--sans);cursor:pointer}
#mmapper-menu button:hover{background:var(--surface2)}#map-settings-panel{padding:12px}#map-settings-panel h2{font:600 16px var(--sans);margin:0 0 12px}#map-settings-panel>button{margin-top:6px}
#density-map-scale{position:absolute;z-index:700;left:10px;bottom:75px;width:136px;box-sizing:border-box;padding:7px 8px 5px;border:1px solid var(--border2);border-radius:8px;background:var(--surface);box-shadow:var(--sh);font:10px var(--sans);color:var(--text);pointer-events:none}
.density-scale-title{display:block;font-size:9px;line-height:1.3;margin-bottom:5px;white-space:normal}
.density-scale-ramp{height:7px;border:1px solid #a99bbd;border-radius:3px;background:linear-gradient(to right,#fff 0%,#f3efff 2%,#ddd6fe 5%,#a5b4fc 10%,#818cf8 18%,#6366f1 30%,#4f46e5 45%,#4338ca 60%,#3730a3 75%,#312e81 88%,#26165e 100%)}
.density-scale-ticks{display:flex;justify-content:space-between;gap:3px;margin-top:4px;font-size:9px}.national-scale .density-scale-ticks{font-size:8px}
#app.map-only>#topbar,#app.map-only>#bottombar,#app.map-only #walk-tools-toggle,#app.map-only #walk-tools-panel,#app.map-only~#walks-panel,#app.map-only~#users-panel,#app.map-only #mmapper-menu,#app.map-only #map-settings-panel{display:none!important}
#app.map-only #map{height:100%!important;flex:1!important}
#walks-panel,#users-panel:not(.pg-active){top:calc(var(--release-map-top,120px) + 62px)!important;max-height:calc(var(--release-map-height,70dvh) - 126px)!important;height:auto!important;bottom:auto!important;z-index:2200}
#users-panel.pg-active{z-index:2200;top:calc(var(--release-map-top,120px) + 8px)!important;max-height:calc(var(--release-map-height,70dvh) - 68px)!important}
#users-panel.pg-active #pg-controls{max-height:38%;overflow-y:auto;overscroll-behavior:contain}
#pg-body button,#pg-controls button,#users-panel .people-tab{min-height:44px!important;touch-action:manipulation}
#users-panel.pg-active .panel-head,#users-panel.pg-active .people-tabs,#users-panel.pg-active .people-search-wrap{flex-shrink:0}
#users-panel.pg-active #pg-body{min-height:70px;touch-action:pan-y}
#users-panel.pg-active .panel-close,#pg-expand{min-width:44px;min-height:44px}
#topbar button:focus-visible,#walk-tools-panel button:focus-visible,#layer-row button:focus-visible,#walk-tools-toggle:focus-visible,#map-only-toggle:focus-visible{outline:2px solid var(--mosque);outline-offset:2px}
@media(max-width:700px){
 #topbar{display:grid;grid-template-columns:44px minmax(0,1fr) 44px!important;gap:5px;padding:5px 8px}
 #topbar .logo-btn{grid-column:1/4!important;grid-row:1!important;justify-self:start;font-size:14px}
 #topbar #user-chip{grid-column:2/4!important;grid-row:2!important;justify-self:start!important;margin:0;max-width:100%;padding-left:0}
 #topbar .help-btn{grid-column:1!important;grid-row:2!important;margin:0}
 #walk-now{grid-column:3!important;grid-row:3!important}
 #topbar #place-search-form{grid-column:1/3!important;grid-row:3!important;width:100%;max-width:none;min-width:0}
 #layer-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px!important;padding:5px 8px!important}
 #layer-row .lbtn{font-size:11px;padding:5px;height:44px}
 #walk-tools-panel{max-width:calc(100% - 74px);width:330px}
 #density-map-scale{width:120px;bottom:80px}
 #mmapper-menu,#map-settings-panel{top:54px}
}
@media(max-height:500px) and (min-width:600px){
 #topbar{flex-wrap:nowrap;display:flex;min-height:48px;padding:2px 8px}
 #topbar .logo-btn{font-size:13px}#topbar #place-search-form{max-width:310px;min-width:120px}#topbar #user-chip{max-width:150px}.account-prefix{display:none}
 #layer-row{grid-template-columns:repeat(6,minmax(0,1fr));padding:4px 8px!important}
 #walk-tools-panel{top:10px;left:62px;width:380px;max-width:calc(100% - 124px);max-height:calc(100% - 70px)}
 #density-map-scale{bottom:55px;width:120px}
 #users-panel.pg-active{width:360px;max-height:calc(var(--release-map-height,70dvh) - 20px)!important;height:calc(var(--release-map-height,70dvh) - 20px)}
 #users-panel.pg-active .people-tabs,#users-panel.pg-active .people-search-wrap{padding-top:2px;padding-bottom:2px}
 #users-panel.pg-active #pg-controls{max-height:36%}
}

@media(min-width:701px){#topbar{display:flex!important}#topbar .logo-btn,#topbar .help-btn,#topbar #user-chip,#topbar #place-search-form{grid-column:auto!important;grid-row:auto!important}}

#topbar .help-btn{width:44px!important;max-width:44px!important;justify-self:start}#topbar #user-name-disp{max-width:140px!important}
