/* Canonical Explore geometry for phone, iPad, and desktop. */
html body .app-shell .map-stage.map-focus {
  --map-safe-gadget-size: 88px !important;
}

html body main.app-shell section.map-stage.map-focus .map-navigation-gadget {
  --gadget-size: 88px !important;
}

html body main.app-shell section.map-stage.map-focus .map-navigation-gadget > * {
  min-width: 44px !important;
  min-height: 44px !important;
}

html body main.app-shell section.map-stage.map-focus .map-depth-switch {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: 44px !important;
  align-items: stretch !important;
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  padding: 3px !important;
}

html body main.app-shell section.map-stage.map-focus .map-depth-switch button,
html body .app-shell .map-stage.map-focus .directions-mode-button,
html body .app-shell .map-stage.map-focus .directions-action {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
}

html body .app-shell .map-stage.map-focus .pin-search-heading,
html body main.app-shell section.map-stage.map-focus .pin-search-heading {
  grid-template-columns: minmax(0, 1fr) 44px !important;
}

html body .app-shell .map-stage.map-focus #pinSearchCloseButton.pin-search-close,
html body main.app-shell section.map-stage.map-focus #pinSearchCloseButton.pin-search-close {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
}

/* Desktop overlays belong to the map container, not the browser viewport. */
@media (hover: hover) and (pointer: fine) {
  html body .app-shell .map-stage.map-focus :is(
    #memorySaveConfirmation.memory-save-confirmation[data-kind],
    .memory-journey-toast,
    #memoryPeekCard.memory-peek-card,
    #mappiGuideBubble.mappi-guide-bubble,
    #youAreHereMessage.you-are-here-message,
    .chapter-journey-resume-dock:not([hidden])
  ),
  html body main.app-shell section.map-stage.map-focus #memorySaveConfirmation.memory-save-confirmation[data-kind][data-presentation="map-lane"] {
    position: absolute !important;
    width: min(420px, calc(100% - var(--map-safe-gadget-size) - var(--map-safe-gadget-gap) - (2 * var(--map-safe-edge)))) !important;
    max-width: calc(100% - var(--map-safe-gadget-size) - var(--map-safe-gadget-gap) - (2 * var(--map-safe-edge))) !important;
  }

  html body main.app-shell section.map-stage.map-focus #memorySaveConfirmation.memory-save-confirmation[data-kind][data-presentation="map-lane"] {
    right: auto !important;
    left: 50% !important;
    translate: -50% 0 !important;
    transform-origin: 50% 100% !important;
  }
}

/* Every coarse-pointer iPad follows the same overlay coordinate system,
   including 1194px and 1366px landscape models. */
@media (hover: none) and (pointer: coarse) {
  html body main.app-shell section.map-stage.map-focus .map-navigation-gadget {
    position: fixed !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: calc(var(--bottom-nav-height, 78px) + env(safe-area-inset-bottom) + 18px) !important;
  }

  html body main.app-shell section.map-stage.map-focus .map-depth-switch {
    position: fixed !important;
    top: calc(72px + env(safe-area-inset-top)) !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }

  html body .app-shell .map-stage.map-focus :is(
    #memorySaveConfirmation.memory-save-confirmation[data-kind],
    .memory-journey-toast,
    #memoryPeekCard.memory-peek-card,
    #mappiGuideBubble.mappi-guide-bubble,
    #youAreHereMessage.you-are-here-message,
    .chapter-journey-resume-dock:not([hidden])
  ),
  html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind][data-presentation="map-lane"] {
    position: fixed !important;
    right: calc(max(14px, env(safe-area-inset-right)) + var(--map-safe-gadget-size) + var(--map-safe-gadget-gap)) !important;
    left: max(14px, env(safe-area-inset-left)) !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 420px) {
  html body main.app-shell section.map-stage.map-focus .map-depth-switch {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
  }
}