/*
 * MyMappi v676 — keep directions beneath the compact map mode control.
 * The close action remains visible and comfortably tappable on phones.
 */
@media (max-width: 720px) {
  /*
   * Keep the app canvas at its pre-keyboard height. Only the editor follows
   * visualViewport.height, so WebKit never exposes the dark map underneath it.
   */
  html body.keyboard-open main.app-shell,
  html body.keyboard-open main.app-shell > section.map-stage {
    height: var(--mymappi-layout-height, 100dvh) !important;
    min-height: var(--mymappi-layout-height, 100dvh) !important;
    max-height: var(--mymappi-layout-height, 100dvh) !important;
  }

  html body .app-shell .map-stage.map-focus .directions-panel.open,
  html body main.app-shell section.map-stage.map-focus .directions-panel.open {
    top: calc(env(safe-area-inset-top) + 118px) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: calc(var(--bottom-nav-height, 78px) + env(safe-area-inset-bottom) + 12px) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body .app-shell .directions-heading,
  html body main.app-shell .directions-heading {
    grid-template-columns: minmax(0, 1fr) 44px !important;
  }

  html body .app-shell .directions-close,
  html body main.app-shell .directions-close {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 14px !important;
  }
}