/* Explore polish: calm map-mode chrome and center desktop transients. */

/* Keep the 2D/3D control compact without shrinking either tap target. The
   fitted shell deliberately owns its background so map movement cannot reveal
   the larger, dark performance-mode rectangle used by older layers. */
html body main.app-shell section.map-stage.map-focus .map-depth-switch {
  isolation: isolate !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(44px, 1fr) !important;
  gap: 2px !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(203, 246, 237, 0.28) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(8, 60, 70, 0.96), rgba(4, 38, 52, 0.96)) !important;
  background-color: #062f3d !important;
  box-shadow: 0 8px 20px rgba(2, 29, 41, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(10px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.06) !important;
}

/* Pitch changes emit normal map-movement events. Reassert the same fitted
   surface during that movement; an older performance rule otherwise flashes
   a different dark rectangle on iOS. */
html body main.app-shell section.map-stage.map-focus:is(.map-interacting, .map-zooming) .map-depth-switch {
  background: linear-gradient(145deg, rgba(8, 60, 70, 0.96), rgba(4, 38, 52, 0.96)) !important;
  background-color: #062f3d !important;
  box-shadow: 0 8px 20px rgba(2, 29, 41, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body main.app-shell section.map-stage.map-focus .map-depth-switch button {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  min-width: 44px !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 44px !important;
  max-height: none !important;
  border-radius: 12px !important;
  color: rgba(228, 248, 244, 0.7) !important;
  font-size: 0.7rem !important;
  font-weight: 780 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease !important;
}

html body main.app-shell section.map-stage.map-focus .map-depth-switch::before,
html body main.app-shell section.map-stage.map-focus .map-depth-switch button::before {
  content: none !important;
}

html body main.app-shell section.map-stage.map-focus .map-depth-switch button.active {
  color: #063b45 !important;
  background: linear-gradient(145deg, #a4efd8, #6bd8c1) !important;
  box-shadow: 0 2px 8px rgba(3, 82, 78, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

/* On touch layouts the shell becomes exactly two 44px segments plus its
   border and divider: smaller visually, still comfortable to operate. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  html body main.app-shell section.map-stage.map-focus .map-depth-switch {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
  }

  html body main.app-shell section.map-stage.map-focus .map-depth-switch button {
    width: 100% !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* Measure the map canvas rather than the browser viewport. Embedded desktop
   previews can have a fine pointer while exposing a phone-width map stage. */
html body main.app-shell section.map-stage.map-focus {
  container-name: mappi-map-stage !important;
  container-type: inline-size !important;
}

/* Fine-pointer notices use the centered lane only when the map canvas can fit
   the full 420px card, the 88px gadget, and their safe edges/gap. Narrow
   desktop embeds fall through to the universal side lane, just like touch
   layouts, so neither the gadget nor the bottom navigation can be covered. */
@media (hover: hover) and (pointer: fine) {
  @container mappi-map-stage (min-width: 680px) {
    html:not(#map-notice-v721-a):not(#map-notice-v721-b) body main.app-shell section.map-stage.map-focus :where(
      #memorySaveConfirmation.memory-save-confirmation[data-kind][data-presentation="map-lane"],
      .memory-journey-toast,
      #memoryPeekCard.memory-peek-card,
      #mappiGuideBubble.mappi-guide-bubble,
      #locationBanner.location-banner:not([hidden]),
      #mapEmptyState.map-empty-state.is-visible,
      .chapter-journey-resume-dock:not([hidden])
    ) {
      right: auto !important;
      left: 50% !important;
      width: min(420px, calc(100% - (2 * var(--map-notice-edge)))) !important;
      max-width: calc(100% - (2 * var(--map-notice-edge))) !important;
      translate: -50% 0 !important;
      transform-origin: 50% 100% !important;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html body main.app-shell section.map-stage.map-focus .map-depth-switch button {
    transition: none !important;
  }
}