/* Keep the navigation map full-height below its return bar. The older
   responsive route theme sizes this pane to 61vh, leaving an empty canvas and
   placing the tools toggle behind the return bar. */
.route-screen {
  display: block;
  overflow: hidden;
}

.route-screen .route-map-shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  min-height: 0;
}

.route-screen.has-route-back .route-subpage-bar {
  position: absolute;
  z-index: 900;
  inset: 0 0 auto;
}

.route-screen.has-route-back .route-map-shell {
  inset: 68px 0 0;
}

.route-screen.has-route-back .route-panel-toggle {
  top: 85px;
}

@media (max-width: 680px) {
  .route-screen.has-route-back .route-map-shell {
    inset: 64px 0 0;
  }

  .route-screen.has-route-back .route-panel-toggle {
    top: 76px;
  }
}

/* Route discovery shares the same full-screen map as navigation, but keeps
   its browse controls floating so the map and route pins remain visible. */
.route-screen.explore-mode .route-map-shell { display: block; padding: 0; }
.route-screen.explore-mode .route-map-heading {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 165px;
  right: 16px;
  width: auto;
  pointer-events: none;
}
.route-screen.explore-mode .route-map-heading > div { max-width: min(280px, 100%); }
.route-screen.explore-mode .route-zoom,
.route-screen.explore-mode .route-locate,
.route-screen.explore-mode .route-ip-locate,
.route-screen.explore-mode .route-status {
  position: absolute;
  z-index: 500;
  width: auto;
  min-width: 0;
  box-shadow: 0 8px 24px rgb(25 44 28 / .15);
}
.route-screen.explore-mode .route-zoom { inset: auto 16px 112px auto; }
.route-screen.explore-mode .route-locate { inset: auto 16px 60px auto; }
.route-screen.explore-mode .route-ip-locate { inset: auto 140px 60px auto; }
.route-screen.explore-mode .route-status {
  inset: auto auto 16px 16px;
  max-width: min(440px, calc(100% - 220px));
  padding: 8px 11px;
  font-size: 11px;
}

@media (max-width: 680px) {
  .route-screen.explore-mode .route-map-heading { top: 12px; left: 98px; right: 12px; }
  .route-screen.explore-mode .route-map-heading > div { max-width: min(220px, 100%); }
  .route-screen.explore-mode .route-zoom { inset: auto 12px 122px auto; }
  .route-screen.explore-mode .route-locate { inset: auto 12px 69px auto; }
  .route-screen.explore-mode .route-ip-locate { inset: auto 12px 16px auto; }
  .route-screen.explore-mode .route-status {
    inset: auto auto 16px 12px;
    max-width: calc(100% - 145px);
    font-size: 10px;
  }
}