body { padding-bottom: 84px; }
main { min-height: calc(100dvh - 161px); }
#route-flat, #route-solid { position: absolute; inset: 0; }
#route-flat-map { width: 100%; height: 100%; display: block; touch-action: none; background: #f3f6f5; }
.flat-zoom { position: absolute; bottom: 16px; right: 16px; display: flex; gap: 6px; }
.route-view-dock { position: fixed; bottom: 0; left: 0; right: 0; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); background: white; border-top: 1px solid #d4e2dc; z-index: 10; text-align: center; }
.route-view-dock button { width: min(100%, 560px); font-size: 18px; font-weight: 700; }
.is-walking .route-view-dock { display: none; }
#route-directions { padding-left: 22px; line-height: 1.8; }
#route-directions li { margin-bottom: 10px; }
#route-solid canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 760px) {
  header { flex-wrap: wrap; gap: 10px; padding: 12px; }
  #scene { min-height: 58dvh; }
  .view-controls { top: 12px; left: 12px; }
}