/* MyMappi v720 — route first on our map, then hand off for navigation. */
html body main.app-shell section.map-stage.map-focus .directions-panel.open.has-target,
html body .app-shell .map-stage.map-focus .directions-panel.open.has-target {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: calc(var(--bottom-nav-height, 78px) + 18px) !important;
  left: max(20px, env(safe-area-inset-left)) !important;
  z-index: 730 !important;
  box-sizing: border-box !important;
  width: min(370px, calc(100% - 146px)) !important;
  max-width: 370px !important;
  height: auto !important;
  max-height: min(250px, calc(100% - 180px)) !important;
  gap: 8px !important;
  padding: 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-radius: 20px !important;
}

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

html body .app-shell .directions-panel.has-target .directions-heading span {
  margin: 0 !important;
}

html body .app-shell .directions-panel.has-target .directions-heading strong {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: rgba(239, 255, 251, 0.72) !important;
}

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

html body .app-shell .directions-panel.has-target .directions-summary {
  min-height: 0 !important;
  gap: 6px !important;
  padding: 9px 10px !important;
}

html body .app-shell .directions-panel.has-target .route-summary-metrics > span {
  padding: 6px 7px !important;
}

html body .app-shell .directions-panel.has-target .directions-actions {
  grid-template-columns: minmax(0, 1fr) !important;
}

html body .app-shell .directions-panel.has-target.is-preview-ready #routeCurrentButton {
  display: none !important;
}

html body .app-shell .directions-panel.has-target .directions-action {
  min-height: 44px !important;
  height: auto !important;
  max-height: none !important;
  padding: 8px 10px !important;
  line-height: 1.15 !important;
}

html body .app-shell .directions-panel.has-target .route-handoff-label {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (hover: none) and (pointer: coarse) {
  html body main.app-shell section.map-stage.map-focus .directions-panel.open.has-target,
  html body .app-shell .map-stage.map-focus .directions-panel.open.has-target {
    position: fixed !important;
    right: calc(max(14px, env(safe-area-inset-right)) + var(--map-safe-gadget-size, 88px) + 12px) !important;
    bottom: calc(var(--bottom-nav-height, 78px) + env(safe-area-inset-bottom) + 18px) !important;
    left: max(14px, env(safe-area-inset-left)) !important;
    width: auto !important;
    max-width: 390px !important;
  }
}

@media (max-width: 720px) {
  html body main.app-shell section.map-stage.map-focus .directions-panel.open.has-target,
  html body .app-shell .map-stage.map-focus .directions-panel.open.has-target {
    position: fixed !important;
    top: auto !important;
    right: calc(max(14px, env(safe-area-inset-right)) + var(--map-safe-gadget-size, 88px) + 12px) !important;
    bottom: calc(var(--bottom-nav-height, 84px) + env(safe-area-inset-bottom) + 16px) !important;
    left: max(14px, env(safe-area-inset-left)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(232px, calc(100dvh - var(--bottom-nav-height, 84px) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 142px)) !important;
    padding: 10px !important;
    border-radius: 18px !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    grid-template-rows: auto auto auto !important;
  }

  html body .app-shell .directions-panel.has-target .directions-heading {
    display: contents !important;
  }

  html body .app-shell .directions-panel.has-target .directions-heading > div {
    display: none !important;
  }

  html body .app-shell .directions-panel.has-target .directions-close {
    grid-row: 1 !important;
    grid-column: 2 !important;
    align-self: stretch !important;
  }

  html body .app-shell .directions-panel.has-target .directions-mode {
    grid-row: 1 !important;
    grid-column: 1 !important;
  }

  html body .app-shell .directions-panel.has-target .directions-summary {
    grid-row: 2 !important;
    grid-column: 1 / -1 !important;
  }

  html body .app-shell .directions-panel.has-target .directions-actions {
    grid-row: 3 !important;
    grid-column: 1 / -1 !important;
  }

  html body .app-shell .directions-panel.has-target .directions-mode-button {
    padding-inline: 8px !important;
  }

  html body .app-shell .directions-panel.has-target .route-summary-destination > strong {
    font-size: 0.82rem !important;
  }
}

@media (max-width: 360px) {
  html body .app-shell .directions-panel.has-target .directions-mode-button [data-lucide],
  html body .app-shell .directions-panel.has-target .directions-mode-button svg,
  html body .app-shell .directions-panel.has-target .directions-action [data-lucide],
  html body .app-shell .directions-panel.has-target .directions-action svg {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body main.app-shell section.map-stage.map-focus .directions-panel.open.has-target,
  html body .app-shell .map-stage.map-focus .directions-panel.open.has-target {
    animation: none !important;
  }
}