/* Final Explore rail: one stable baseline above navigation. Compact notices
   reserve the actual 96px gadget plus a 12px gap, including on phones. Showing
   a notice must never move the controls. Expanded drawers keep their layout. */

html body .app-shell .map-stage.map-focus {
  --explore-notice-min-height: min(max(112px, 7rem), max(96px, calc(var(--mymappi-visible-height, 100svh) - var(--explore-notice-center-bottom) - max(8px, env(safe-area-inset-top, 0px)) - 76px)));
  --explore-notice-max-height: max(var(--explore-notice-min-height), min(280px, calc(var(--mymappi-visible-height, 100svh) - var(--explore-notice-center-bottom) - max(8px, env(safe-area-inset-top, 0px)) - 140px)));
  --explore-rail-edge: max(14px, env(safe-area-inset-right, 0px));
  --explore-rail-right: var(--explore-rail-edge);
  --explore-rail-left: max(14px, env(safe-area-inset-left, 0px));
  --explore-rail-reserved: calc(var(--map-safe-gadget-size, 96px) + 12px);
  --explore-notice-right: calc(var(--explore-rail-right) + var(--explore-rail-reserved));
  --explore-notice-center-width: min(420px, calc(100% - var(--explore-rail-edge) - var(--explore-rail-left) - var(--explore-rail-reserved)));
  --explore-notice-center-bottom: calc(
    var(--bottom-nav-height, 78px) +
    env(safe-area-inset-bottom, 0px) +
    18px
  );
}

html:not(#explore-notice-center-a):not(#explore-notice-center-b):not(#explore-notice-center-c):not(#explore-notice-center-d):not(#explore-notice-center-e):not(#explore-notice-center-f) body main.app-shell section.map-stage.map-focus :where(
  #memorySaveConfirmation.memory-save-confirmation[data-kind][data-presentation="map-lane"]:not([hidden]),
  .memory-journey-toast,
  .memory-journey-skip,
  #memoryPeekCard.memory-peek-card,
  #mappiGuideBubble.mappi-guide-bubble,
  #locationBanner.location-banner:not([hidden]),
  #youAreHereMessage.you-are-here-message:not([hidden]),
  #mapEmptyState.map-empty-state.is-visible,
  .chapter-journey-resume-dock:not([hidden]),
  #ourMapExplorerButton:not([hidden])
) {
  position: absolute !important;
  top: auto !important;
  right: var(--explore-notice-right) !important;
  bottom: var(--explore-notice-center-bottom) !important;
  left: auto !important;
  width: var(--explore-notice-center-width) !important;
  max-width: var(--explore-notice-center-width) !important;
  min-width: 0 !important;
  margin: 0 !important;
  translate: none !important;
  transform: none !important;
  transform-origin: 100% 100% !important;
  transition-property: opacity !important;
}

/* `display: grid !important` is part of the resting notification geometry.
   Keep it from overriding the semantic `hidden` state after a notice closes;
   otherwise its transparent actions remain measurable and keyboard-visible. */
html body main.app-shell #memorySaveConfirmation.memory-save-confirmation[hidden] {
  display: none !important;
}

/* Several historical Explore layers use `display: flex !important` for their
   visible geometry. Preserve the platform `hidden` contract at the final
   cascade layer so closed status messages cannot remain measurable over the
   map or reachable to assistive technology. */
html body main.app-shell #youAreHereMessage.you-are-here-message[hidden] {
  display: none !important;
}

/* Location acknowledgement uses the same resting rail as other notices.
   Opacity alone may animate; a transform must never send it under the logo. */
html body main.app-shell section.map-stage.map-focus #youAreHereMessage.you-are-here-message {
  grid-template-columns: 40px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: left !important;
  border: 1px solid #486f83 !important;
  color: #f5fffc !important;
  background: #00243f !important;
  box-shadow: 0 8px 24px rgb(0 36 63 / 14%) !important;
  animation: none !important;
  transition: opacity 140ms ease !important;
}
html body main.app-shell section.map-stage.map-focus #youAreHereMessage.you-are-here-message:not([hidden]) { display: grid !important; }

html body main.app-shell section.map-stage.map-focus #youAreHereMessage .location-status-mark {
  display: grid !important; place-items: center !important;
  width: 40px !important; height: 40px !important;
  padding: 0 !important; margin: 0 !important; border-radius: 13px !important;
  color: #9ee7d8 !important; background: #153e50 !important;
}
html body main.app-shell section.map-stage.map-focus #youAreHereMessage .location-status-mark svg { width: 23px; height: 23px; }
html body main.app-shell section.map-stage.map-focus #youAreHereMessage .location-status-copy { display: grid; min-width: 0; gap: 4px; }
html body main.app-shell section.map-stage.map-focus #youAreHereMessage strong { color: #f5fffc !important; font-size: .9375rem !important; line-height: 1.35 !important; white-space: normal !important; }
html body main.app-shell section.map-stage.map-focus #youAreHereMessage small { color: #b9d3df !important; font-size: .75rem !important; line-height: 1.4 !important; white-space: normal !important; }

/* Public-place travel uses brand ink, not the historic green/blue gradient
   or a mood-colored tile. Keep memory pin colors on the map itself. */
html body main.app-shell section.map-stage.map-focus .memory-journey-toast {
  background: #00243f !important;
  border-color: #486f83 !important;
  color: #f5fffc !important;
  box-shadow: 0 8px 24px rgb(0 36 63 / 16%) !important;
}
html body main.app-shell section.map-stage.map-focus .memory-journey-kicker { color: #73dac6 !important; }
html body main.app-shell section.map-stage.map-focus .memory-journey-copy small { color: #b9d3df !important; }
html body main.app-shell section.map-stage.map-focus .memory-journey-pin {
  background: #e8f5f0 !important;
  border-color: #cde6df !important;
  color: #00243f !important;
  box-shadow: none !important;
}

/* A newer state must not paint alongside an older location acknowledgement. */
html body main.app-shell section.map-stage.map-focus:has(
  #locationBanner:not([hidden]), .memory-journey-skip,
  .chapter-journey-resume-dock:not([hidden]), .memory-journey-toast.show,
  #memoryPeekCard.show:not([hidden]), #mappiGuideBubble.is-visible:not([hidden])
) #youAreHereMessage {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
html body main.app-shell section.map-stage.map-focus:has(#youAreHereMessage.is-visible:not([hidden])) #mapEmptyState {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html:not(#explore-notice-center-a):not(#explore-notice-center-b):not(#explore-notice-center-c):not(#explore-notice-center-d):not(#explore-notice-center-e):not(#explore-notice-center-f) 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,
  .memory-journey-skip,
  #memoryPeekCard.memory-peek-card.show,
  #mappiGuideBubble.mappi-guide-bubble.is-visible,
  #locationBanner.location-banner:not([hidden]),
  #youAreHereMessage.you-are-here-message.is-visible:not([hidden]),
  #mapEmptyState.map-empty-state.is-visible,
  .chapter-journey-resume-dock:not([hidden])
) {
  transform: none !important;
}

/* Fine-pointer navigation sits 28px above the viewport edge. Thirty-eight
   pixels therefore leaves an intentional 10px gap between the card and tabs. */
@media (min-width: 700px) {
  html body .app-shell .map-stage.map-focus {
    --explore-notice-center-bottom: calc(
      var(--bottom-nav-height, 78px) +
      env(safe-area-inset-bottom, 0px) +
      38px
    );
  }
}

/* On a real iPad the navigation itself already includes the safe-area offset,
   so 18px leaves a deliberate 12–18px visual gap above the tab bar. */
@media (min-width: 700px) and (hover: none) and (pointer: coarse) {
  html body .app-shell .map-stage.map-focus {
    --explore-notice-center-bottom: calc(
      var(--bottom-nav-height, 78px) +
      env(safe-area-inset-bottom, 0px) +
      18px
    );
  }
}

html:not(#explore-notice-center-a):not(#explore-notice-center-b):not(#explore-notice-center-c):not(#explore-notice-center-d):not(#explore-notice-center-e):not(#explore-notice-center-f) body main.app-shell section.map-stage.map-focus :where(#mapNavigationGadget) {
  position: absolute !important;
  right: var(--explore-rail-right) !important;
  bottom: var(--explore-rail-gadget-bottom, var(--explore-notice-center-bottom)) !important;
  top: auto !important;
  left: auto !important;
  translate: none !important;
  transform: none !important;
  transition-property: opacity !important;
}

/* Large portrait tablets use the 22px navigation inset, not the phone's 8px.
   Match that inset so both the gadget and notices keep a real 10px gap. */
@media (min-width: 901px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  html body .app-shell .map-stage.map-focus {
    --explore-notice-center-bottom: calc(var(--bottom-nav-height, 78px) + max(22px, env(safe-area-inset-bottom, 0px)) + 10px);
  }
}

/* Expanded directions are a full-width drawer, not a compact notice. Retain
   their measured clearance; closing the drawer restores the resting rail. */
@media (max-width: 480px) and (min-height: 561px) {
  html body .app-shell .map-stage.map-focus:has(#directionsPanel.open.has-target) {
    --explore-rail-gadget-bottom: calc(var(--bottom-nav-height, 84px) + env(safe-area-inset-bottom, 0px) + var(--route-preview-height, 300px) + 28px);
  }
}

/* The journey dock used to redefine the centering variables on itself. Take
   the same available width and baseline as the map instead of overflowing
   the narrower rail with its former full-width dimensions. */
html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock.is-my-map-control:not([hidden]) {
  --explore-notice-center-width: inherit !important;
  --explore-notice-center-bottom: inherit !important;
}
@media (max-width: 480px) {
  html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock.is-my-map-control:not([hidden]) button {
    min-width: 44px !important;
    padding-inline: 6px !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

/* Native browser chrome can move the visual viewport without moving the map
   container. WKWebView can also retain the previous orientation's width or
   offset during launch/rotation. Bound both measurements to the containing
   block: an outdated width must never produce a negative right inset and
   move every notice (and the gadget) off-screen. Percentages also avoid a
   provisional 100vw disagreeing with the repaired iPad shell width. */
@media (hover: none) and (pointer: coarse), (max-width: 520px) {
  html body .app-shell .map-stage.map-focus {
    --explore-rail-viewport-width: min(100%, var(--mymappi-visible-width, 100%));
    --explore-rail-offset-left: clamp(
      0px,
      var(--mymappi-visual-offset-left, 0px),
      max(0px, calc(100% - var(--explore-rail-viewport-width)))
    );
    --explore-rail-right: max(
      var(--explore-rail-edge),
      calc(100% - var(--explore-rail-offset-left) - var(--explore-rail-viewport-width) + var(--explore-rail-edge))
    );
    --explore-notice-center-width: min(
      420px,
      calc(var(--explore-rail-viewport-width) - var(--explore-rail-edge) - var(--explore-rail-left) - var(--explore-rail-reserved))
    );
  }

  html:not(#explore-notice-center-a):not(#explore-notice-center-b):not(#explore-notice-center-c):not(#explore-notice-center-d):not(#explore-notice-center-e):not(#explore-notice-center-f) body main.app-shell section.map-stage.map-focus :where(
    #memorySaveConfirmation.memory-save-confirmation[data-kind][data-presentation="map-lane"]:not([hidden]),
    .memory-journey-toast,
    .memory-journey-skip,
    #memoryPeekCard.memory-peek-card,
    #mappiGuideBubble.mappi-guide-bubble,
    #locationBanner.location-banner:not([hidden]),
    #youAreHereMessage.you-are-here-message:not([hidden]),
    #mapEmptyState.map-empty-state.is-visible,
    .chapter-journey-resume-dock:not([hidden]),
    #ourMapExplorerButton:not([hidden]),
    #mapNavigationGadget
  ) {
    position: fixed !important;
  }
}

/* Tablets and sideways phones center notices independently of the gadget.
   Reserve equal space on both sides so a smaller landscape phone narrows
   the notice instead of pushing its center toward the right-hand controls. */
@media (min-width: 700px) and (min-height: 600px) and (hover: none) and (pointer: coarse), (orientation: landscape) and (hover: none) and (pointer: coarse) {
  html body .app-shell .map-stage.map-focus {
    --explore-rail-reserved: calc(var(--map-safe-gadget-size, 96px) + 24px);
    --explore-notice-center-width: min(
      420px,
      calc(var(--explore-rail-viewport-width) - 2 * (max(var(--explore-rail-edge), var(--explore-rail-left)) + var(--explore-rail-reserved)))
    );
    --explore-notice-right: max(
      calc(var(--explore-rail-right) + var(--explore-rail-reserved)),
      calc(100% - var(--explore-rail-offset-left) - var(--explore-rail-viewport-width) / 2 - var(--explore-notice-center-width) / 2)
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  html body main.app-shell section.map-stage.map-focus :where(
    #memorySaveConfirmation.memory-save-confirmation[data-presentation="map-lane"],
    .memory-journey-toast,
    #memoryPeekCard.memory-peek-card,
    #mappiGuideBubble.mappi-guide-bubble,
    #locationBanner.location-banner,
    #youAreHereMessage.you-are-here-message,
    #mapEmptyState.map-empty-state,
    .chapter-journey-resume-dock
  ) {
    transition: none !important;
  }
}

/* The launcher is a low-priority invitation, not a second notification. Keep
   it out of the occupied rail (and out of hit testing) until the notice ends. */
html body main.app-shell section.map-stage.map-focus:has(
  #memorySaveConfirmation.show:not([hidden]),
  #mappiGuideBubble.is-visible:not([hidden]),
  #memoryPeekCard.show:not([hidden]),
  #locationBanner:not([hidden]),
  #youAreHereMessage.is-visible:not([hidden]),
  .memory-journey-toast.show,
  .memory-journey-skip,
  .chapter-journey-resume-dock:not([hidden])
) #ourMapExplorerButton {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* A confirmation temporarily owns the rail, including its fade-out. Keep
   the flight and its controls intact so they return when it closes. All
   lower-priority cards yield until hidden, not just until .show is removed. */
html body main.app-shell section.map-stage.map-focus:has(
  #memorySaveConfirmation[data-presentation="map-lane"]:not([hidden])
) :is(
  .memory-journey-skip,
  .chapter-journey-resume-dock,
  .memory-journey-toast,
  #memoryPeekCard,
  #mappiGuideBubble,
  #locationBanner,
  #youAreHereMessage,
  #mapEmptyState,
  #ourMapExplorerButton
) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* A journey's Continue/End controls take priority over a generic guide.
   The guide must not cover them or become a second card in the same slot. */
html body main.app-shell section.map-stage.map-focus:has(
  .chapter-journey-resume-dock:not([hidden])
) #mappiGuideBubble {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* On small phones, give the message the full first row instead of leaving a
   few characters squeezed between a decorative icon and its action. */
html body main.app-shell section.map-stage.map-focus #memoryPeekCard.center-memory-preview {
  grid-template-columns: 48px minmax(0, 1fr) 44px !important;
  column-gap: 8px !important;
}
/* The older thumbnail rule stops at 1024px while this rail applies at every
   width. Keep its actual box inside the 48px track on large iPads/desktop too,
   otherwise a 62px image paints over the beginning of the memory title. */
html body main.app-shell section.map-stage.map-focus #memoryPeekCard.center-memory-preview .center-memory-preview-media {
  box-sizing: border-box !important;
  width: 48px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 48px !important;
  min-height: 0 !important;
  max-height: 48px !important;
}
@media (max-width: 350px) {
  html body main.app-shell section.map-stage.map-focus #memoryPeekCard.center-memory-preview {
    grid-template-columns: minmax(0, 1fr) 44px !important;
  }
  html body main.app-shell section.map-stage.map-focus #memoryPeekCard.center-memory-preview .center-memory-preview-media { display: none !important; }
  html body main.app-shell section.map-stage.map-focus #memoryPeekCard.center-memory-preview .peek-copy strong {
    display: -webkit-box !important; white-space: normal !important;
    -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
  }
}
@media (max-width: 390px) {
  html body main.app-shell #memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation[data-presentation="map-lane"] {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    gap: 6px !important;
    height: auto !important;
    min-height: 96px !important;
    max-height: none !important;
    padding: 10px !important;
  }
  html body main.app-shell #memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation[data-presentation="map-lane"] > :is(span, svg, .memory-confirmation-status) { display: none !important; }
  html body main.app-shell #memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation[data-presentation="map-lane"] > strong {
    grid-column: 1 / -1 !important; grid-row: 1 !important;
    white-space: normal !important; max-height: none !important;
  }
  html body main.app-shell #memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation[data-presentation="map-lane"] > small { grid-column: 1 !important; grid-row: 2 !important; }
  html body main.app-shell #memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation[data-presentation="map-lane"] > :is(.memory-confirmation-view, .memory-confirmation-undo) { grid-column: 2 !important; grid-row: 2 !important; }
  html body main.app-shell #memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation[data-presentation="map-lane"] > .memory-confirmation-actions { grid-column: 1 / -1 !important; grid-row: 3 !important; }
}

/* Intro, stops and completion share one anchor from their first frame.
   Do not interpolate a former right-side position while the camera moves. */
html body main.app-shell section.map-stage.map-focus #memoryPeekCard.story-mode-card {
  /* An older journey layer adds the dock height to this card's own bottom
     variable. The rail owns that value, including intro and completion. */
  --explore-notice-center-bottom: inherit !important;
  --explore-notice-center-width: inherit !important;
  transition: opacity 140ms ease !important;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html body main.app-shell section.map-stage.map-focus #memoryPeekCard.story-mode-card {
    transition: none !important;
  }
}

/* One card family for the compact Explore rail. A 112px everyday card sits
   comfortably beside the 96px gadget instead of becoming a tiny bottom strip.
   More detailed messages may grow; never shrink text or crop required actions
   to force permission, first-save or journey content into a fixed-height box. */
html:not(#explore-notice-center-a):not(#explore-notice-center-b):not(#explore-notice-center-c):not(#explore-notice-center-d):not(#explore-notice-center-e):not(#explore-notice-center-f) body main.app-shell section.map-stage.map-focus :where(
  #memorySaveConfirmation.memory-save-confirmation[data-kind][data-presentation="map-lane"]:not([hidden]),
  .memory-journey-toast,
  .memory-journey-skip,
  #memoryPeekCard.memory-peek-card,
  #mappiGuideBubble.mappi-guide-bubble,
  #locationBanner.location-banner:not([hidden]),
  #youAreHereMessage.you-are-here-message:not([hidden]),
  #mapEmptyState.map-empty-state.is-visible,
  .chapter-journey-resume-dock:not([hidden])
) {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: var(--explore-notice-min-height) !important;
  max-height: var(--explore-notice-max-height) !important;
  padding: 12px !important;
  border: 1px solid #486f83 !important;
  border-radius: 20px !important;
  color: #f5fffc !important;
  background: #00243f !important;
  box-shadow: 0 8px 24px rgb(0 36 63 / 16%) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #73dac6 #00243f;
  scroll-padding-block: 12px;
}

/* Error notices share the stable rail, but need an unmistakable severity
   accent instead of the same mint border as a successful save. */
html:not(#explore-notice-center-a):not(#explore-notice-center-b):not(#explore-notice-center-c):not(#explore-notice-center-d):not(#explore-notice-center-e):not(#explore-notice-center-f) body main.app-shell section.map-stage.map-focus #memorySaveConfirmation.memory-save-confirmation[data-kind="error"] {
  border-color: #efa99a !important;
  box-shadow: inset 3px 0 0 #efa99a, 0 8px 24px rgb(0 36 63 / 16%) !important;
}
html:not(#explore-notice-center-a):not(#explore-notice-center-b):not(#explore-notice-center-c):not(#explore-notice-center-d):not(#explore-notice-center-e):not(#explore-notice-center-f) body main.app-shell section.map-stage.map-focus #memorySaveConfirmation.memory-save-confirmation[data-kind="error"] > span {
  color: #efa99a !important;
  background: #10334a !important;
}

html body main.app-shell section.map-stage.map-focus #mappiGuideBubble.mappi-guide-bubble {
  align-items: center !important;
  gap: 12px !important;
}
html body main.app-shell section.map-stage.map-focus #mappiGuideBubble.mappi-guide-bubble > img {
  flex: 0 0 40px !important; width: 40px !important; height: 40px !important;
  margin: 0 !important; object-fit: contain;
}
html body main.app-shell section.map-stage.map-focus #mappiGuideText {
  min-width: 0 !important; max-height: none !important;
  display: block !important; overflow: visible !important;
  -webkit-line-clamp: unset !important;
  color: #f5fffc !important; font-size: .875rem !important; line-height: 1.45 !important;
  white-space: normal !important; overflow-wrap: anywhere;
}
/* Keep permission explanations legible against the shared navy surface. */
html:not(#explore-notice-center-a):not(#explore-notice-center-b):not(#explore-notice-center-c) body main.app-shell section.map-stage.map-focus #locationBanner.location-banner:not([hidden]) {
  grid-template-columns: 40px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
  text-align: left !important;
}
html:not(#explore-notice-center-a):not(#explore-notice-center-b):not(#explore-notice-center-c) body main.app-shell section.map-stage.map-focus #locationBanner.location-banner:not([hidden]) > div {
  place-items: start !important; gap: 4px !important;
}
html:not(#explore-notice-center-a):not(#explore-notice-center-b):not(#explore-notice-center-c) body main.app-shell section.map-stage.map-focus #locationBanner.location-banner:not([hidden]) :is(strong, span) {
  text-align: left !important; color: #f5fffc !important; line-height: 1.4 !important;
}
html:not(#explore-notice-center-a):not(#explore-notice-center-b):not(#explore-notice-center-c) body main.app-shell section.map-stage.map-focus #locationBanner.location-banner:not([hidden]) strong { font-size: .875rem !important; }
html:not(#explore-notice-center-a):not(#explore-notice-center-b):not(#explore-notice-center-c) body main.app-shell section.map-stage.map-focus #locationBanner.location-banner:not([hidden]) span { color: #b9d3df !important; font-size: .75rem !important; }
html:not(#explore-notice-center-a):not(#explore-notice-center-b):not(#explore-notice-center-c) body main.app-shell section.map-stage.map-focus #locationBanner.location-banner:not([hidden]) > button {
  grid-column: 1 / -1 !important; grid-row: 2 !important; width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important; height: auto !important; padding: 8px 10px !important;
  color: #00243f !important; background: #73dac6 !important; border-color: #8ce2d0 !important;
  font-size: .75rem !important; line-height: 1.3 !important; white-space: normal !important;
}
html:not(#explore-notice-center-a):not(#explore-notice-center-b):not(#explore-notice-center-c) body main.app-shell section.map-stage.map-focus #locationBanner.location-banner:not([hidden]) > button:disabled {
  color: #c1d1da !important; background: #1d4056 !important; border-color: #486f83 !important;
}

/* These surfaces formerly alternated ivory and navy. Their copy must follow
   the shared shell, without recoloring buttons, counters or memory covers. */
html:not(#explore-notice-center-a):not(#explore-notice-center-b):not(#explore-notice-center-c) body main.app-shell section.map-stage.map-focus :is(
  #memorySaveConfirmation[data-presentation="map-lane"], #memoryPeekCard,
  .memory-journey-toast, .memory-journey-skip, .chapter-journey-resume-dock, #mapEmptyState
) strong { color: #f5fffc !important; }
html:not(#explore-notice-center-a):not(#explore-notice-center-b):not(#explore-notice-center-c) body main.app-shell section.map-stage.map-focus :is(
  #memorySaveConfirmation[data-presentation="map-lane"], #memoryPeekCard,
  .memory-journey-toast, .memory-journey-skip, .chapter-journey-resume-dock
) small { color: #b9d3df !important; }
html:not(#explore-notice-center-a):not(#explore-notice-center-b):not(#explore-notice-center-c) body main.app-shell section.map-stage.map-focus #mapEmptyState > span {
  display: block !important; color: #b9d3df !important; font-size: .75rem !important; line-height: 1.4 !important;
  max-height: none !important; overflow: visible !important; -webkit-line-clamp: unset !important;
}
html:not(#explore-notice-center-a):not(#explore-notice-center-b):not(#explore-notice-center-c) body main.app-shell section.map-stage.map-focus #mapEmptyState::after { display: none !important; content: none !important; }