/* Important declarations in this contained layer outrank the unlayered
   legacy locks. Real component selectors keep this override maintainable. */
@layer mymappi-explore-invitation-polish {
  /* Empty private-map invitation only. The shared Explore rail continues to own
     its width, height limits, safe-area position, and gadget/dock clearance. */
  html body main.app-shell section.map-stage.map-focus #mapEmptyState.map-empty-state.is-visible:not([hidden]) {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas: "mascot title" "mascot copy" "action action" !important;
    align-items: center !important;
    align-content: start !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    border-color: #486f83 !important;
    color: #f5fffc !important;
    text-align: left !important;
    background: #00243f !important;
    box-shadow: 0 8px 24px rgb(0 36 63 / 14%) !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    pointer-events: auto !important;
  }

  html body main.app-shell section.map-stage.map-focus #mapEmptyState > img {
    grid-area: mascot !important;
    align-self: center !important;
    width: 56px !important;
    min-width: 0 !important;
    max-width: 56px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    animation: none !important;
  }

  html body main.app-shell section.map-stage.map-focus #mapEmptyState > :is(strong, span) {
    display: block !important;
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    text-shadow: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    overflow: visible !important;
    max-height: none !important;
    -webkit-line-clamp: unset !important;
  }

  html body main.app-shell section.map-stage.map-focus #mapEmptyState > strong {
    grid-area: title !important;
    align-self: end !important;
    color: #f5fffc !important;
    font-family: inherit !important;
    font-size: .9375rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -.015em !important;
    text-wrap: balance !important;
  }

  html body main.app-shell section.map-stage.map-focus #mapEmptyState > span {
    grid-area: copy !important;
    align-self: start !important;
    color: #b9d3df !important;
    font-size: .75rem !important;
    font-weight: 450 !important;
    line-height: 1.45 !important;
    text-wrap: pretty !important;
  }

  html body main.app-shell section.map-stage.map-focus #mapEmptyState > button {
    grid-area: action !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 44px !important;
    margin: 6px 0 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #8ce2d0 !important;
    border-radius: 14px !important;
    color: #00243f !important;
    background: #73dac6 !important;
    box-shadow: none !important;
    filter: none !important;
    font-family: inherit !important;
    font-size: .8125rem !important;
    font-weight: 750 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: background-color 140ms ease !important;
  }

  html body main.app-shell section.map-stage.map-focus #mapEmptyState > button:focus-visible {
    outline: 2px solid #f5fffc !important;
    outline-offset: 3px !important;
  }

  /* Attention belongs to the selected destination or open panel, not to a
     second invitation underneath it. CSS follows actual surface state so the
     invitation returns after dismissal without a timer or data mutation. */
  html body main.app-shell section.map-stage.map-focus:has(
    .mymappi-search-popup-shell,
    #locationBanner:not([hidden]),
    #youAreHereMessage.is-visible:not([hidden]),
    #mappiGuideBubble.is-visible:not([hidden]),
    #memoryPeekCard.show:not([hidden]),
    #memorySaveConfirmation:not([hidden]),
    #memoryBottomSheet.open,
    #directionsPanel.open,
    #pinSearchPanel.open,
    #accountMenu.open,
    #notificationHub.open,
    #memoryForm.open,
    dialog[open]
  ) #mapEmptyState {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  html body main.app-shell section.map-stage.map-focus:has(
    .mymappi-search-popup-shell, #locationBanner:not([hidden]),
    #youAreHereMessage.is-visible:not([hidden]), #mappiGuideBubble.is-visible:not([hidden]),
    #memoryPeekCard.show:not([hidden]), #memorySaveConfirmation:not([hidden]),
    #memoryBottomSheet.open, #directionsPanel.open, #pinSearchPanel.open,
    #accountMenu.open, #notificationHub.open, #memoryForm.open, dialog[open]
  ) #mapEmptyState > button {
    pointer-events: none !important;
  }

  @media (orientation: landscape) and (max-height: 550px) {
    html body main.app-shell section.map-stage.map-focus #mapEmptyState.map-empty-state.is-visible:not([hidden]) {
      grid-template-columns: 48px minmax(0, 1fr) !important;
      column-gap: 10px !important;
      row-gap: 4px !important;
    }
    html body main.app-shell section.map-stage.map-focus #mapEmptyState > img {
      width: 48px !important;
      max-width: 48px !important;
    }
  }

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

}

/* iOS 15.0–15.3 ignores @layer and :has(). Keep the earlier rail geometry,
   but retain the core brand treatment and complete readable invitation.
   The controller still owns semantic hidden/editor/destination guards. */
@supports not selector(:has(*)) {
  html body main.app-shell section.map-stage.map-focus #mapEmptyState.map-empty-state.is-visible:not([hidden]) {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas: "mascot title" "mascot copy" "action action" !important;
    gap: 6px 12px !important;
    background: #00243f !important;
    box-shadow: 0 8px 24px rgb(0 36 63 / 14%) !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    pointer-events: auto !important;
  }
  html body main.app-shell section.map-stage.map-focus #mapEmptyState.map-empty-state.is-visible > img {
    grid-area: mascot !important;
    width: 56px !important; min-width: 0 !important; max-width: 56px !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    object-fit: contain !important; background: transparent !important;
    box-shadow: none !important; filter: none !important; animation: none !important;
  }
  html body main.app-shell section.map-stage.map-focus #mapEmptyState.map-empty-state.is-visible > :is(strong, span) {
    display: block !important; width: 100% !important; min-width: 0 !important;
    margin: 0 !important; text-align: left !important; text-shadow: none !important;
    white-space: normal !important; overflow-wrap: anywhere !important;
    overflow: visible !important; max-height: none !important;
    -webkit-line-clamp: unset !important;
  }
  html body main.app-shell section.map-stage.map-focus #mapEmptyState.map-empty-state.is-visible > strong { grid-area: title !important; color: #f5fffc !important; }
  html body main.app-shell section.map-stage.map-focus #mapEmptyState.map-empty-state.is-visible > span { grid-area: copy !important; color: #b9d3df !important; }
  html body main.app-shell section.map-stage.map-focus #mapEmptyState #emptyMapCreateMemory {
    grid-area: action !important; width: 100% !important; min-width: 0 !important;
    height: auto !important; min-height: 44px !important; margin: 6px 0 0 !important;
    padding: 10px 12px !important; border: 1px solid #8ce2d0 !important; border-radius: 14px !important;
    background: #73dac6 !important; color: #00243f !important;
    box-shadow: none !important; filter: none !important; transform: none !important;
    font-size: .8125rem !important; font-weight: 750 !important; line-height: 1.3 !important;
    white-space: normal !important; overflow-wrap: anywhere !important;
    pointer-events: auto !important; animation: none !important; transition: none !important;
  }
  html body main.app-shell section.map-stage.map-focus #mapEmptyState #emptyMapCreateMemory:focus {
    outline: 2px solid #f5fffc !important; outline-offset: 3px !important;
  }
}