/* Six destinations, with a compact bar and full 44pt touch targets. */
body.routine-app .social-dock{width:min(380px,calc(100% - 28px));padding:5px;border-radius:32px;bottom:calc(8px + env(safe-area-inset-bottom));grid-template-columns:repeat(6,1fr)}
body.routine-app .social-dock .dock-item{height:48px;min-height:48px;min-width:44px;padding:8px 4px}
body.routine-app .social-dock .dock-item svg{width:23px;height:23px}
body.routine-app .social-dock .dock-compose svg{width:26px;height:26px}
.feed-filter{display:flex!important;position:relative!important;top:auto!important;justify-content:flex-start!important;border:0!important;margin:4px 0 16px!important;transform:none!important;background:transparent!important;padding:0!important}
.feed-filter select{width:auto;min-width:150px;min-height:44px;border:1px solid var(--line);border-radius:24px;background:var(--panel);color:var(--text);font:inherit;font-weight:650;padding:9px 32px 9px 16px;margin:0}
.feed-single{min-height:50vh}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.reels-home{position:relative;height:calc(100dvh - 190px);min-height:300px;border-radius:24px;overflow:hidden;background:#000;color:#fff;max-width:620px;margin:auto}
.reels-home .reel-overlay{bottom:18px}.reels-home #reelViewerStatus{top:0;left:0;right:0;background:transparent;pointer-events:none}.reels-home #reelViewerStatus button{pointer-events:auto}.reels-empty{text-align:center;padding:60px 26px}.reels-empty svg{width:44px;height:44px;color:var(--green)}.reels-empty h2{font-size:23px}.reels-empty p{color:#b6c0b0;line-height:1.6}
body.map-screen-active .main{max-width:100%;padding-left:12px;padding-right:12px;padding-bottom:100px}body.map-screen-active .route-surface{min-height:0}
.map-screen{max-width:1000px;margin:0 auto}.map-mode-bar{display:flex;gap:6px;padding:0 0 10px}.map-mode-bar a{flex:1;text-align:center;border:1px solid var(--line);border-radius:24px;padding:12px 8px;font-size:14px;font-weight:650;text-decoration:none;color:var(--muted);background:var(--panel)}.map-mode-bar a[aria-current]{color:var(--green);border-color:var(--green)}
.map-stage .route-map-preview{height:var(--map-height,55dvh);margin:0;border-radius:22px;border:0}.map-action-panel{padding:12px 4px 0}.map-start-actions{display:flex;gap:10px}.map-start-actions[hidden]{display:none}.map-start-actions>.btn{flex:1;min-height:46px;margin:0;padding:12px 8px;font-size:15px}.map-history-link{display:flex;justify-content:space-between;width:100%;padding:12px 2px;background:none;border:0;color:var(--muted);font-size:14px;min-height:44px}.map-action-panel .card{padding:0;border:0;background:none;margin:0}.map-action-panel .card h2{font-size:24px;margin:7px 0}.map-action-panel .card p{font-size:13px;margin:0 0 8px}.map-action-panel .modal-actions{margin:8px 0 0;gap:8px}.map-action-panel .modal-actions .btn{padding:10px;font-size:14px;min-height:44px}.map-hint{font-size:12px;color:var(--muted);margin:10px 0 0;line-height:1.4}.map-selection{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.map-selection strong{font-size:14px}.map-selection .btn{font-size:12px;padding:8px;min-height:44px}

/* The map owns one fixed viewport. Its actions float above it, never in a
   scroll-driven column; route lists and history open as separate sheets. */
body.map-screen-active{overflow:hidden;overscroll-behavior:none}
body.map-screen-active .social-dock{display:none!important}
body.map-screen-active .main{padding:0!important;height:100dvh;overflow:hidden}
body.map-screen-active .notice{display:none}
body.map-screen-active .topbar{position:fixed!important;inset:0 0 auto;z-index:25;background:var(--bg)!important}
body.map-screen-active .route-surface{transform:none!important;animation:none!important}
.map-screen{position:fixed;inset:calc(72px + env(safe-area-inset-top)) 0 0;max-width:none;overflow:hidden}
.map-stage{position:absolute;inset:0}
.map-stage .route-map-preview{height:100%;width:100%;border-radius:0}
.map-mode-bar{position:absolute;z-index:2;top:12px;left:12px;right:12px;gap:8px;padding:0}
.map-mode-bar a{background:var(--bg);box-shadow:0 3px 14px #0003}
.map-action-panel{position:absolute;z-index:2;left:12px;right:12px;bottom:calc(18px + env(safe-area-inset-bottom));padding:14px;border:1px solid var(--line);border-radius:24px;background:var(--bg);box-shadow:0 6px 24px #0004;max-height:45%;overflow:auto}
.map-screen:has(.native-inline-map.map-ready) .map-mode-bar,.map-screen:has(.native-inline-map.map-ready) .map-action-panel{visibility:hidden}
@media(orientation:landscape) and (max-height:500px){.map-action-panel{left:auto;width:300px;max-height:65%}.map-mode-bar{right:auto;width:340px}}

/* iOS owns the entire map chrome, including Back. Do not wait for an async
   marker on a DOM node that a background render may already have replaced. */
body.native-map-screen .topbar,body.native-map-screen .map-mode-bar,body.native-map-screen .map-action-panel{display:none!important}
body.native-map-screen .map-screen{inset:0}
body.native-map-screen .native-inline-map{visibility:hidden}
.route-filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.route-filter-form input{min-width:0}.route-filter-presets{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap}.route-filter-presets .btn{min-height:44px}.nearby-route{border-top:1px solid var(--line);padding:16px 0}.nearby-route h3{margin:0 0 8px}.nearby-route p{margin:6px 0}

.map-utility-actions{display:flex;gap:8px;margin-top:10px}.map-utility-actions .btn{flex:1;font-size:13px;padding:10px;min-height:44px}.map-selection small{display:block;color:var(--muted);margin-top:5px;font-size:12px}