.route-more-toggle,#routeMobileMore{display:none}
@media(max-width:800px){
.app-shell .view-tabs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;padding:5px 6px calc(5px + env(safe-area-inset-bottom))!important;min-height:68px;align-items:stretch}
.app-shell .view-tabs>.route-secondary-action,.app-shell .view-tabs>.nav-status{display:none!important}
.app-shell .view-tabs>button{position:relative;display:flex!important;flex-direction:column;justify-content:center;align-items:center;gap:5px!important;min-width:0;width:100%;min-height:56px;padding:6px 2px!important;border:0!important;background:transparent;font-size:11px!important}
.app-shell .view-tabs>button.route-secondary-action{display:none!important}
.app-shell .view-tabs>button>i{font-size:21px!important;line-height:24px}
.app-shell .view-tabs>button[data-short-label]>strong{display:none!important}
.app-shell .view-tabs>button[data-short-label]:after{content:attr(data-short-label);font-size:11px;font-weight:600;line-height:14px;white-space:nowrap}
.app-shell .view-tabs>.route-more-toggle strong{font-size:11px;line-height:14px}
.app-shell .view-tabs>button>span{position:absolute;top:3px;left:calc(50% + 8px);font-size:9px!important;min-width:15px;height:15px;padding:0 3px;line-height:15px}
#routeMobileMore:not([hidden]){display:grid;position:fixed;z-index:10000;left:12px;right:12px;bottom:calc(86px + env(safe-area-inset-bottom));padding:10px;background:var(--secondary,#fff);color:var(--text,#212121);border:1px solid var(--border,#ddd);border-radius:18px;box-shadow:0 12px 50px #0005;max-height:calc(100dvh - 160px);overflow:auto}
body.dark-mode #routeMobileMore{background:#232323;color:#f5f5f5;border-color:#444}
.route-more-heading{padding:10px 12px;font-size:12px;font-weight:700;opacity:.7}
#routeMobileMore button{display:flex;align-items:center;gap:14px;min-height:48px;padding:12px;border:0;border-radius:10px;background:transparent;color:inherit;font-size:14px;text-align:left}
#routeMobileMore button i{width:24px;text-align:center;font-size:20px;color:#f57c00}
#routeMobileMore button:hover,#routeMobileMore button:focus-visible{background:#f57c001a}
#routeMobileMore .route-more-close{justify-content:center;border-top:1px solid #8883;border-radius:0;margin-top:5px}
.workspace.map-focus .map-wrap .normal-station-tools{top:100px!important;left:12px!important;bottom:auto!important;right:auto!important;z-index:450}
.workspace.map-focus .normal-station-tools button{min-height:44px;padding:10px 14px;border-radius:12px;box-shadow:0 3px 12px #0003}
}
body:has(.app-shell.dark) #routeMobileMore{background:#232323;color:#f5f5f5;border-color:#444}

/* Keep selected stops reachable without covering the map controls. */
.app-shell .map-wrap .selected-stops-popover{
  box-sizing:border-box;
  max-height:min(50dvh,calc(100% - 160px));
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--primary,#ff7900) transparent;
  scrollbar-gutter:stable;
}
.app-shell .selected-stops-popover::-webkit-scrollbar{width:6px}
.app-shell .selected-stops-popover::-webkit-scrollbar-thumb{background:var(--primary,#ff7900);border-radius:6px}
.app-shell .selected-stops-popover>h3{
  position:sticky;top:-10px;z-index:1;
  background:var(--surface,#202b35);
  margin:-10px -4px 4px;padding:12px 8px 8px;
}