/* Final Explore polish: calm map chrome, clear hierarchy, and stable motion. */
html body main.app-shell section.map-stage.map-focus .topbar {
  top: max(14px, env(safe-area-inset-top)) !important;
  left: 0 !important;
  right: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 clamp(16px, 2.5vw, 28px) !important;
  transform: none !important;
  pointer-events: none !important;
}

html body main.app-shell section.map-stage.map-focus header.topbar {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  transform: none !important;
}

html body main.app-shell section.map-stage.map-focus .topbar-left,
html body main.app-shell section.map-stage.map-focus .topbar-actions,
html body main.app-shell section.map-stage.map-focus .brand {
  pointer-events: auto !important;
}

html body main.app-shell section.map-stage.map-focus .topbar-left,
html body main.app-shell section.map-stage.map-focus .topbar-actions {
  box-sizing: border-box !important;
  display: flex !important;
  width: max-content !important;
  min-height: 50px !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 4px !important;
  border: 1px solid rgba(216, 255, 246, 0.22) !important;
  border-radius: 17px !important;
  background: linear-gradient(145deg, rgba(5, 55, 67, 0.91), rgba(4, 38, 53, 0.89)) !important;
  box-shadow: 0 12px 30px rgba(3, 29, 42, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.11) !important;
  transform: none !important;
  -webkit-backdrop-filter: blur(17px) saturate(1.08) !important;
  backdrop-filter: blur(17px) saturate(1.08) !important;
}

html body main.app-shell section.map-stage.map-focus header.topbar > .topbar-left,
html body main.app-shell section.map-stage.map-focus header.topbar > .topbar-actions {
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  align-self: center !important;
  transform: none !important;
}

html body main.app-shell section.map-stage.map-focus .topbar-left {
  position: static !important;
  grid-column: 1 !important;
  justify-self: start !important;
  width: 95px !important;
}

html body main.app-shell section.map-stage.map-focus .topbar-actions {
  position: static !important;
  grid-column: 3 !important;
  justify-self: end !important;
  width: 95px !important;
}

html body main.app-shell section.map-stage.map-focus .topbar-left > button,
html body main.app-shell section.map-stage.map-focus .topbar-actions > button {
  display: grid !important;
  width: 41px !important;
  height: 41px !important;
  min-width: 41px !important;
  min-height: 41px !important;
  place-items: center !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 13px !important;
  color: #f4fffc !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: none !important;
  filter: none !important;
}

html body main.app-shell section.map-stage.map-focus .topbar-left > button:hover,
html body main.app-shell section.map-stage.map-focus .topbar-actions > button:hover,
html body main.app-shell section.map-stage.map-focus .topbar-left > button:focus-visible,
html body main.app-shell section.map-stage.map-focus .topbar-actions > button:focus-visible {
  color: #ffffff !important;
  background: rgba(91, 221, 187, 0.15) !important;
}

html body main.app-shell section.map-stage.map-focus .avatar-button img {
  width: 35px !important;
  height: 35px !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 3px 6px rgba(1, 26, 37, 0.2)) !important;
}

html body main.app-shell section.map-stage.map-focus .brand {
  position: static !important;
  grid-column: 2 !important;
  justify-self: center !important;
  min-height: 50px !important;
  padding: 7px 18px !important;
  border: 1px solid rgba(216, 255, 246, 0.2) !important;
  border-radius: 17px !important;
  background: linear-gradient(145deg, rgba(5, 55, 67, 0.91), rgba(4, 38, 53, 0.89)) !important;
  box-shadow: 0 12px 30px rgba(3, 29, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(17px) saturate(1.08) !important;
  backdrop-filter: blur(17px) saturate(1.08) !important;
}

html body main.app-shell section.map-stage.map-focus .brand h1 {
  font-size: clamp(1.48rem, 2.15vw, 1.92rem) !important;
  line-height: 1 !important;
  text-shadow: 0 3px 12px rgba(1, 21, 31, 0.24) !important;
}

html body main.app-shell section.map-stage.map-focus .you-are-here-message {
  top: calc(max(14px, env(safe-area-inset-top)) + 63px) !important;
  left: 50% !important;
  display: inline-flex !important;
  width: max-content !important;
  min-height: 36px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 13px !important;
  border: 1px solid rgba(220, 255, 248, 0.2) !important;
  border-radius: 999px !important;
  color: #f5fffc !important;
  background: rgba(4, 45, 58, 0.9) !important;
  box-shadow: 0 9px 24px rgba(3, 29, 42, 0.17) !important;
  transform: translateX(-50%) translateY(-5px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  backdrop-filter: blur(15px) !important;
}

html body main.app-shell section.map-stage.map-focus .you-are-here-message.is-visible {
  transform: translateX(-50%) translateY(0) !important;
}

html body main.app-shell section.map-stage.map-focus .you-are-here-message > span {
  width: 9px !important;
  height: 9px !important;
  overflow: hidden !important;
  border: 2px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 50% !important;
  color: transparent !important;
  background: #1989ff !important;
  box-shadow: 0 0 0 4px rgba(25, 137, 255, 0.16) !important;
}

html body main.app-shell section.map-stage.map-focus .map-empty-state {
  top: auto !important;
  right: auto !important;
  bottom: calc(var(--bottom-nav-height, 84px) + 42px) !important;
  left: 50% !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  width: min(330px, calc(100vw - 40px)) !important;
  min-height: 82px !important;
  gap: 3px 12px !important;
  align-items: center !important;
  padding: 11px 14px 11px 10px !important;
  border: 1px solid rgba(9, 82, 86, 0.13) !important;
  border-radius: 20px !important;
  color: #0a3c46 !important;
  background: linear-gradient(145deg, rgba(255, 255, 253, 0.96), rgba(238, 250, 246, 0.94)) !important;
  box-shadow: 0 17px 40px rgba(3, 29, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  transform: translateX(-50%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.05) !important;
  backdrop-filter: blur(18px) saturate(1.05) !important;
}

html body main.app-shell section.map-stage.map-focus .map-empty-state[hidden] {
  display: none !important;
}

html body main.app-shell section.map-stage.map-focus .map-empty-state img {
  grid-row: 1 / 3 !important;
  width: 58px !important;
  height: 58px !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(9, 94, 96, 0.96), rgba(9, 129, 105, 0.92)) !important;
  box-shadow: 0 7px 18px rgba(4, 65, 72, 0.17) !important;
}

html body main.app-shell section.map-stage.map-focus .map-empty-state strong,
html body main.app-shell section.map-stage.map-focus .map-empty-state span {
  margin: 0 !important;
  text-align: left !important;
}

html body main.app-shell section.map-stage.map-focus .map-empty-state strong {
  align-self: end !important;
  color: #073b45 !important;
  font-size: 0.88rem !important;
  line-height: 1.2 !important;
}

html body main.app-shell section.map-stage.map-focus .map-empty-state span {
  align-self: start !important;
  color: rgba(7, 59, 69, 0.68) !important;
  font-size: 0.69rem !important;
  line-height: 1.35 !important;
}

html body main.app-shell section.map-stage.map-focus .location-banner {
  right: auto !important;
  bottom: calc(var(--bottom-nav-height, 84px) + 42px) !important;
  left: clamp(18px, 2.5vw, 28px) !important;
  width: min(390px, calc(100vw - 150px)) !important;
  border: 1px solid rgba(9, 82, 86, 0.13) !important;
  border-radius: 20px !important;
  background: rgba(253, 255, 252, 0.96) !important;
  box-shadow: 0 17px 40px rgba(3, 29, 42, 0.16) !important;
}

html body .app-shell .map-stage.map-focus .location-banner:not([hidden]),
html body main.app-shell section.map-stage.map-focus .location-banner:not([hidden]) {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 11px !important;
  color: #073b45 !important;
}

html body .app-shell .map-stage.map-focus .location-banner strong,
html body main.app-shell section.map-stage.map-focus .location-banner strong {
  color: #073b45 !important;
}

html body .app-shell .map-stage.map-focus .location-banner span,
html body main.app-shell section.map-stage.map-focus .location-banner span {
  color: rgba(7, 59, 69, 0.72) !important;
}

html body .app-shell .map-stage.map-focus .location-banner img,
html body main.app-shell section.map-stage.map-focus .location-banner img {
  width: 52px !important;
  height: 52px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(9, 94, 96, 0.96), rgba(9, 129, 105, 0.92)) !important;
  box-shadow: none !important;
}

html body .app-shell .map-stage.map-focus .location-banner button,
html body main.app-shell section.map-stage.map-focus .location-banner button {
  grid-column: 2 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0f8f8b, #18a978) !important;
}

html body main.app-shell section.map-stage.map-focus:not(.map-interacting):not(.map-zooming) .mymappi-pin-only.is-breathing {
  animation: mymappiPremiumPinBreathe 4.2s var(--pin-presence-delay, 0ms) ease-in-out infinite !important;
}

html body main.app-shell section.map-stage.map-focus.map-interacting .mymappi-pin-only,
html body main.app-shell section.map-stage.map-focus.map-zooming .mymappi-pin-only,
html body main.app-shell section.map-stage.map-focus.map-detail-quiet .mymappi-pin-only {
  animation: none !important;
}

@keyframes mymappiPremiumPinBreathe {
  0%, 72%, 100% { transform: translateZ(0) scale(1); }
  78% { transform: translateY(-1px) translateZ(0) scale(1.025); }
  84% { transform: translateZ(0) scale(1); }
  90% { transform: translateY(-0.5px) translateZ(0) scale(1.012); }
}

@media (max-width: 720px) {
  html body main.app-shell section.map-stage.map-focus .topbar {
    top: max(10px, env(safe-area-inset-top)) !important;
    padding: 0 10px !important;
  }

  html body main.app-shell section.map-stage.map-focus .topbar-left,
  html body main.app-shell section.map-stage.map-focus .topbar-actions {
    width: 87px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    border-radius: 15px !important;
    transform: none !important;
  }

  html body main.app-shell section.map-stage.map-focus .topbar-left > button,
  html body main.app-shell section.map-stage.map-focus .topbar-actions > button {
    width: 37px !important;
    height: 37px !important;
    min-width: 37px !important;
    min-height: 37px !important;
    border-radius: 11px !important;
  }

  html body main.app-shell section.map-stage.map-focus .avatar-button img {
    width: 32px !important;
    height: 32px !important;
  }

  html body main.app-shell section.map-stage.map-focus .brand {
    min-height: 46px !important;
    padding: 7px 12px !important;
    border-radius: 15px !important;
  }

  html body main.app-shell section.map-stage.map-focus .brand h1 {
    font-size: clamp(1.28rem, 6.2vw, 1.58rem) !important;
  }

  html body main.app-shell section.map-stage.map-focus .you-are-here-message {
    top: calc(max(10px, env(safe-area-inset-top)) + 56px) !important;
    min-height: 32px !important;
    padding: 6px 11px !important;
  }

  html body main.app-shell section.map-stage.map-focus .map-empty-state {
    right: auto !important;
    bottom: calc(var(--bottom-nav-height, 78px) + env(safe-area-inset-bottom) + 132px) !important;
    left: 50% !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    width: min(320px, calc(100vw - 28px)) !important;
    min-height: 72px !important;
    gap: 2px 9px !important;
    padding: 9px 10px 9px 8px !important;
    border-radius: 18px !important;
    transform: translateX(-50%) !important;
  }

  html body main.app-shell section.map-stage.map-focus .map-empty-state img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
  }

  html body main.app-shell section.map-stage.map-focus .map-empty-state strong {
    font-size: 0.78rem !important;
  }

  html body main.app-shell section.map-stage.map-focus .map-empty-state span {
    font-size: 0.62rem !important;
  }

  html body main.app-shell section.map-stage.map-focus .location-banner {
    right: 108px !important;
    bottom: calc(var(--bottom-nav-height, 78px) + env(safe-area-inset-bottom) + 42px) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    width: auto !important;
  }
}

/* Mobile reliability: keep Search and the four map controls responsive to taps. */
html body .app-shell .pin-search-box,
html body .app-shell .pin-search-go-button,
html body .app-shell .map-navigation-gadget,
html body .app-shell .map-navigation-gadget button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

html body .app-shell .pin-search-go-button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.82;
}

html body .app-shell .location-banner button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

@media (prefers-reduced-motion: reduce) {
  html body main.app-shell section.map-stage.map-focus .mymappi-pin-only.is-breathing {
    animation: none !important;
  }
}