/* Build 719: one predictable lane for every transient Explore card.
   The current-location confirmation is the only exception: it belongs at the
   top center of the map. Selected-destination sheets remain owned by
   search-destination-phone-v719.css. */

/* The two deliberately unmatched :not() IDs below give this final layer
   enough specificity to supersede older !important Explore fixes. :where()
   then keeps every transient in the lane at the same internal specificity. */

html body .app-shell .map-stage.map-focus {
  --map-notice-gadget-size: var(--map-safe-gadget-size, 88px);
  --map-notice-gadget-gap: var(--map-safe-gadget-gap, 12px);
  --map-notice-edge: var(--map-safe-edge, clamp(18px, 3vw, 28px));
  --map-notice-bottom: var(--map-safe-bottom, clamp(104px, 12vh, 122px));
}

/* Desktop cards stay inside the map canvas and align their bottom edge with
   the navigation gadget. The two explicit inset edges prevent any horizontal
   transform inherited by older card variants from pushing them off-screen. */
html:not(#map-notice-v719-a):not(#map-notice-v719-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])
) {
  position: absolute !important;
  top: auto !important;
  right: calc(
    var(--map-notice-edge) +
    var(--map-notice-gadget-size) +
    var(--map-notice-gadget-gap)
  ) !important;
  bottom: var(--map-notice-bottom) !important;
  left: auto !important;
  z-index: 1682 !important;
  box-sizing: border-box !important;
  width: min(
    420px,
    calc(
      100% -
      var(--map-notice-gadget-size) -
      var(--map-notice-gadget-gap) -
      (2 * var(--map-notice-edge))
    )
  ) !important;
  max-width: calc(
    100% -
    var(--map-notice-gadget-size) -
    var(--map-notice-gadget-gap) -
    (2 * var(--map-notice-edge))
  ) !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  translate: none !important;
  transform: translateY(12px) scale(0.985) !important;
  transform-origin: 100% 100% !important;
}

html:not(#map-notice-v719-a):not(#map-notice-v719-b) body main.app-shell section.map-stage.map-focus :where(
  #memorySaveConfirmation.memory-save-confirmation[data-kind][data-presentation="map-lane"].show,
  .memory-journey-toast.show,
  #memoryPeekCard.memory-peek-card.show,
  #mappiGuideBubble.mappi-guide-bubble.is-visible,
  #mapEmptyState.map-empty-state.is-visible,
  .chapter-journey-resume-dock:not([hidden])
) {
  transform: translateY(0) scale(1) !important;
}

html:not(#map-notice-v719-a):not(#map-notice-v719-b) body main.app-shell section.map-stage.map-focus #locationBanner.location-banner:not([hidden]) {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  min-height: 94px !important;
  max-height: 118px !important;
  padding: 10px 12px !important;
  gap: 4px 10px !important;
  align-items: center !important;
  transform: none !important;
}

html body main.app-shell section.map-stage.map-focus #locationBanner.location-banner:not([hidden]) img {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 42px !important;
  height: 42px !important;
}

html body main.app-shell section.map-stage.map-focus #locationBanner.location-banner:not([hidden]) > div {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html body main.app-shell section.map-stage.map-focus #locationBanner.location-banner:not([hidden]) :is(strong, span) {
  display: -webkit-box !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: vertical !important;
}

html body main.app-shell section.map-stage.map-focus #locationBanner.location-banner:not([hidden]) strong {
  -webkit-line-clamp: 1 !important;
}

html body main.app-shell section.map-stage.map-focus #locationBanner.location-banner:not([hidden]) span {
  font-size: 0.7rem !important;
  line-height: 1.18 !important;
  -webkit-line-clamp: 2 !important;
}

html body main.app-shell section.map-stage.map-focus #locationBanner.location-banner:not([hidden]) button {
  grid-column: 2 !important;
  grid-row: 2 !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 6px 12px !important;
}

html body main.app-shell section.map-stage.map-focus #mapEmptyState.map-empty-state.is-visible {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  min-height: 88px !important;
  max-height: 104px !important;
  padding: 10px 12px !important;
  gap: 3px 10px !important;
  align-items: center !important;
  justify-items: stretch !important;
  text-align: left !important;
}

html body main.app-shell section.map-stage.map-focus #mapEmptyState.map-empty-state.is-visible img {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
}

html body main.app-shell section.map-stage.map-focus #mapEmptyState.map-empty-state.is-visible :is(strong, span) {
  grid-column: 2 !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body main.app-shell section.map-stage.map-focus #mapEmptyState.map-empty-state.is-visible strong {
  grid-row: 1 !important;
}

html body main.app-shell section.map-stage.map-focus #mapEmptyState.map-empty-state.is-visible span {
  display: -webkit-box !important;
  grid-row: 2 !important;
  line-height: 1.2 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock:not([hidden]) {
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  min-height: 84px !important;
  max-height: 104px !important;
  padding: 9px 10px !important;
  gap: 8px !important;
}

html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock:not([hidden]) [data-chapter-journey-resume] {
  grid-column: auto !important;
  width: auto !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding-inline: 10px !important;
}

/* Cancel the historical translateX(50%) used by centered memory peeks. That
   transform was the source of cards hanging off the right side of iPhones. */
html:not(#map-notice-v719-a):not(#map-notice-v719-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
) {
  max-height: 104px !important;
}

/* The current-location acknowledgement deliberately owns a separate top lane. */
html:not(#map-notice-v719-a):not(#map-notice-v719-b) body main.app-shell section.map-stage.map-focus #youAreHereMessage.you-are-here-message {
  position: absolute !important;
  top: calc(max(14px, env(safe-area-inset-top, 0px)) + 63px) !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  z-index: 1684 !important;
  box-sizing: border-box !important;
  width: max-content !important;
  max-width: calc(100% - 28px) !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  translate: none !important;
  transform: translate(-50%, -6px) scale(0.985) !important;
  transform-origin: 50% 0 !important;
}

html:not(#map-notice-v719-a):not(#map-notice-v719-b) body main.app-shell section.map-stage.map-focus #youAreHereMessage.you-are-here-message.is-visible {
  transform: translate(-50%, 0) scale(1) !important;
}

html:not(#map-notice-v719-a):not(#map-notice-v719-b) body main.app-shell section.map-stage.map-focus:has(#activeTripBar:not([hidden])) #youAreHereMessage.you-are-here-message {
  top: calc(max(14px, env(safe-area-inset-top, 0px)) + 116px) !important;
}

/* Only one bottom-lane surface is visible at a time. The order below mirrors
   the runtime priority: confirmation, journey, memory context, guide,
   permission, empty state, then paused-journey resume. */
html body:has(#memorySaveConfirmation.memory-save-confirmation[data-presentation="map-lane"].show:not([hidden])) .app-shell .map-stage.map-focus :is(
  .memory-journey-toast,
  #memoryPeekCard,
  #mappiGuideBubble,
  #youAreHereMessage,
  #locationBanner,
  #mapEmptyState,
  .chapter-journey-resume-dock
),
html body:has(.memory-journey-toast.show) .app-shell .map-stage.map-focus :is(
  #memoryPeekCard,
  #mappiGuideBubble,
  #locationBanner,
  #mapEmptyState,
  .chapter-journey-resume-dock
),
html body:has(#memoryPeekCard.show:not([hidden])) .app-shell .map-stage.map-focus :is(
  #mappiGuideBubble,
  #locationBanner,
  #mapEmptyState,
  .chapter-journey-resume-dock
),
html body:has(#mappiGuideBubble.is-visible:not([hidden])) .app-shell .map-stage.map-focus :is(
  #locationBanner,
  #mapEmptyState,
  .chapter-journey-resume-dock
),
html body:has(#locationBanner:not([hidden])) .app-shell .map-stage.map-focus :is(
  #mapEmptyState,
  .chapter-journey-resume-dock
) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Coarse-pointer devices use viewport coordinates because the native shell's
   visual viewport can move independently while browser chrome changes size. */
@media (hover: none) and (pointer: coarse) {
  html body .app-shell .map-stage.map-focus {
    --map-notice-edge: max(14px, env(safe-area-inset-right, 0px));
    --map-notice-bottom: calc(
      var(--bottom-nav-height, 78px) +
      env(safe-area-inset-bottom, 0px) +
      18px
    );
  }

  html:not(#map-notice-v719-a):not(#map-notice-v719-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])
  ) {
    position: fixed !important;
    right: calc(
      100vw -
      var(--mymappi-visual-offset-left, 0px) -
      var(--mymappi-visible-width, 100vw) +
      max(14px, env(safe-area-inset-right, 0px)) +
      var(--map-notice-gadget-size) +
      var(--map-notice-gadget-gap)
    ) !important;
    left: auto !important;
    width: min(
      420px,
      calc(
        var(--mymappi-visible-width, 100vw) -
        var(--map-notice-gadget-size) -
        var(--map-notice-gadget-gap) -
        max(14px, env(safe-area-inset-left, 0px)) -
        max(14px, env(safe-area-inset-right, 0px))
      )
    ) !important;
    max-width: calc(
      var(--mymappi-visible-width, 100vw) -
      var(--map-notice-gadget-size) -
      var(--map-notice-gadget-gap) -
      max(14px, env(safe-area-inset-left, 0px)) -
      max(14px, env(safe-area-inset-right, 0px))
    ) !important;
  }

  html:not(#map-notice-v719-a):not(#map-notice-v719-b) body main.app-shell section.map-stage.map-focus #youAreHereMessage.you-are-here-message {
    position: fixed !important;
    max-width: calc(
      100vw -
      max(14px, env(safe-area-inset-left, 0px)) -
      max(14px, env(safe-area-inset-right, 0px))
    ) !important;
  }
}

/* The fresh-account invitation points to the navigation + action, so a
   rotated iPad keeps it centered over that action instead of treating it as
   a gadget-adjacent transient. Phones retain the compact side-lane contract. */
@media (hover: none) and (pointer: coarse) and (min-width: 1025px) and (max-width: 1600px) {
  html:not(#map-notice-v719-a):not(#map-notice-v719-b) body main.app-shell section.map-stage.map-focus #mapEmptyState.map-empty-state.is-visible {
    right: auto !important;
    bottom: calc(
      var(--bottom-nav-height, 78px) +
      env(safe-area-inset-bottom, 0px) +
      22px
    ) !important;
    left: 50% !important;
    width: min(326px, calc(var(--mymappi-visible-width, 100vw) - 28px)) !important;
    max-width: 326px !important;
    translate: none !important;
    transform: translate3d(-50%, 0, 0) !important;
    transform-origin: 50% 100% !important;
  }
}

/* Keep the established desktop clearance above its floating navigation. The
   universal notice bottom is shorter than that clearance at 768px tall. */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  html:not(#map-notice-v719-a):not(#map-notice-v719-b) body main.app-shell section.map-stage.map-focus #mapEmptyState.map-empty-state.is-visible {
    bottom: calc(var(--bottom-nav-height, 78px) + 58px) !important;
  }
}

@media (max-width: 420px) {
  html:not(#map-notice-v719-a):not(#map-notice-v719-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
  ) {
    max-height: 98px !important;
  }

  html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock:not([hidden]) {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    max-height: 112px !important;
  }

  html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock:not([hidden]) [data-chapter-journey-resume] {
    grid-column: 2 !important;
    justify-self: start !important;
    min-height: 44px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(#map-notice-v719-a):not(#map-notice-v719-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,
    #youAreHereMessage.you-are-here-message
  ) {
    transition: none !important;
  }
}