/* Build 739: keep the full Create Memory sheet tucked directly beneath the
   shared MyMappi wordmark without allowing the sheet to cover it. */
html body .app-shell .map-stage.memory-editor-active > .topbar,
html body main.app-shell section.map-stage.memory-editor-active > .topbar {
  z-index: 1900 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

html body .app-shell .map-stage.memory-editor-active > .topbar > :is(.topbar-left, .topbar-actions),
html body main.app-shell section.map-stage.memory-editor-active > .topbar > :is(.topbar-left, .topbar-actions) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body .app-shell .map-stage.memory-editor-active > .topbar > .brand,
html body main.app-shell section.map-stage.memory-editor-active > .topbar > .brand {
  position: relative !important;
  z-index: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

@media (max-width: 720px) {
  html body .app-shell .map-stage.memory-editor-active > .memory-editor.open,
  html body main.app-shell section.map-stage.memory-editor-active > .memory-editor.open,
  html body.keyboard-open .app-shell .map-stage.memory-editor-active > .memory-editor.open,
  html body.keyboard-open main.app-shell section.map-stage.memory-editor-active > .memory-editor.open {
    position: fixed !important;
    /* The phone wordmark is about 46px tall. A 48px lane leaves a deliberate
       2px seam, matching the tucked desktop relationship without overlap. */
    top: calc(env(safe-area-inset-top, 0px) + 48px) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    z-index: 1800 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Existing-memory edits are a focused task. Let the editor surface own the
     safe areas so Memory Lane or the map never peeks through above or below. */
  html body .app-shell .map-stage.memory-editor-active > #memoryForm.memory-editor.open.is-editing-memory,
  html body main.app-shell section.map-stage.memory-editor-active > #memoryForm.memory-editor.open.is-editing-memory,
  html body.keyboard-open .app-shell .map-stage.memory-editor-active > #memoryForm.memory-editor.open.is-editing-memory,
  html body.keyboard-open main.app-shell section.map-stage.memory-editor-active > #memoryForm.memory-editor.open.is-editing-memory {
    inset: 0 !important;
    box-sizing: border-box !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 66px) !important;
    padding-right: max(18px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(18px, env(safe-area-inset-left, 0px)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overscroll-behavior: contain !important;
  }
}

@media (min-width: 721px) {
  html body .app-shell .map-stage.memory-editor-active > .memory-editor.open,
  html body main.app-shell section.map-stage.memory-editor-active > .memory-editor.open,
  html body.keyboard-open .app-shell .map-stage.memory-editor-active > .memory-editor.open,
  html body.keyboard-open main.app-shell section.map-stage.memory-editor-active > .memory-editor.open {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 68px) !important;
    right: auto !important;
    bottom: max(24px, env(safe-area-inset-bottom, 0px)) !important;
    left: 50% !important;
    box-sizing: border-box !important;
    width: min(680px, calc(100vw - 48px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 48px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    z-index: 1800 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: translate3d(-50%, 0, 0) !important;
    -webkit-overflow-scrolling: touch !important;
  }
}