/* Memory confirmation: readable, tappable, and clear of the Explore gadget. */
html body .app-shell .memory-save-confirmation,
html body main.app-shell section.map-stage .memory-save-confirmation {
  z-index: 1100 !important;
}

html body .app-shell .memory-save-confirmation.show,
html body main.app-shell section.map-stage .memory-save-confirmation.show {
  pointer-events: auto !important;
}

html body .app-shell .memory-save-confirmation.is-delete,
html body main.app-shell section.map-stage .memory-save-confirmation.is-delete {
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  gap: 3px 12px !important;
  width: min(390px, calc(100vw - 28px)) !important;
  min-height: 78px !important;
  padding: 13px 14px !important;
  border-color: rgba(255, 224, 204, 0.28) !important;
  background:
    radial-gradient(circle at 9% 4%, rgba(255, 186, 151, 0.3), transparent 40%),
    radial-gradient(circle at 96% 0%, rgba(255, 222, 166, 0.15), transparent 38%),
    linear-gradient(135deg, rgba(54, 27, 24, 0.98), rgba(112, 53, 43, 0.96)) !important;
  box-shadow:
    0 26px 58px rgba(35, 16, 19, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

html body .app-shell .memory-save-confirmation.is-delete strong,
html body main.app-shell section.map-stage .memory-save-confirmation.is-delete strong {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

html body .app-shell .memory-save-confirmation.is-delete small,
html body main.app-shell section.map-stage .memory-save-confirmation.is-delete small {
  grid-column: 2 !important;
  overflow: visible !important;
  line-height: 1.28 !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

html body .app-shell .memory-save-confirmation.is-delete .memory-confirmation-undo,
html body main.app-shell section.map-stage .memory-save-confirmation.is-delete .memory-confirmation-undo {
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  justify-self: end !important;
  min-width: 66px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 8px 14px !important;
}

html body main.app-shell section.map-stage.map-focus .memory-save-confirmation {
  bottom: calc(clamp(104px, 12vh, 122px) + 100px) !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  html body .app-shell .map-stage .memory-save-confirmation,
  html body main.app-shell section.map-stage .memory-save-confirmation {
    right: max(14px, env(safe-area-inset-right)) !important;
    left: max(14px, env(safe-area-inset-left)) !important;
    width: auto !important;
  }

  html body .app-shell .map-stage.map-focus .memory-save-confirmation,
  html body main.app-shell section.map-stage.map-focus .memory-save-confirmation {
    bottom: calc(var(--bottom-nav-height, 78px) + env(safe-area-inset-bottom) + 116px) !important;
  }

  html body .app-shell .memory-save-confirmation.is-delete,
  html body main.app-shell section.map-stage .memory-save-confirmation.is-delete {
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    width: auto !important;
    min-height: 76px !important;
    padding: 12px !important;
    gap: 3px 10px !important;
  }

  html body .app-shell .memory-save-confirmation.is-delete > span,
  html body main.app-shell section.map-stage .memory-save-confirmation.is-delete > span {
    width: 38px !important;
    height: 38px !important;
  }

  html body .app-shell .memory-save-confirmation.is-delete .memory-confirmation-undo,
  html body main.app-shell section.map-stage .memory-save-confirmation.is-delete .memory-confirmation-undo {
    min-width: 62px !important;
    padding: 8px 11px !important;
  }
}

@media (max-width: 390px) {
  html body .app-shell .memory-save-confirmation.is-delete,
  html body main.app-shell section.map-stage .memory-save-confirmation.is-delete {
    grid-template-columns: 36px minmax(0, 1fr) !important;
  }

  html body .app-shell .memory-save-confirmation.is-delete .memory-confirmation-undo,
  html body main.app-shell section.map-stage .memory-save-confirmation.is-delete .memory-confirmation-undo {
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: start !important;
    min-height: 32px !important;
    margin-top: 6px !important;
  }
}