/* Route Preview shares the navy/mint menu palette in every request state. */
html body main.app-shell section.map-stage.map-focus #directionsPanel {
  color: #f5fbff !important;
  background: #00243f !important;
  border: 1px solid #46657b !important;
  box-shadow: 0 16px 40px rgba(0, 36, 63, .24) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: route-preview-reveal 180ms ease-out both !important;
  scrollbar-color: #73dac6 #00243f;
}
html body .app-shell #directionsPanel :is(.directions-heading span, .route-summary-kicker) { color: #a8e7de !important; }
html body .app-shell #directionsPanel :is(.directions-heading strong, .route-summary-destination > strong) { color: #f5fbff !important; }
html body .app-shell #directionsPanel :is(.directions-mode, .directions-box, .directions-summary) {
  color: #cfdee8 !important;
  background: #0c304a !important;
  border-color: #496b80 !important;
}
html body .app-shell #directionsPanel .directions-summary {
  font-size: .85rem !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
  animation: none !important;
}
html body .app-shell #directionsPanel .directions-summary.is-loading { border-left: 3px solid #73dac6 !important; }
html body .app-shell #directionsPanel .directions-summary.is-error { border-left: 3px solid #f1b79f !important; }
html body .app-shell #directionsPanel .directions-summary.is-ready { border-color: #587f8c !important; }
html body .app-shell #directionsPanel .directions-summary > span { color: #cfdee8 !important; }
html body .app-shell #directionsPanel.has-origin #routeCurrentButton { display: none !important; }
html body .app-shell #directionsPanel :is(.directions-mode-button, .directions-action, .directions-close) {
  min-height: 44px !important;
  min-width: 44px !important;
  color: #f5fbff !important;
  background: #0c304a !important;
  border: 1px solid #64889c !important;
  box-shadow: none !important;
  transition: background-color 140ms ease, border-color 140ms ease !important;
}
html body .app-shell #directionsPanel .directions-mode-button { border-color: transparent !important; }
html body .app-shell #directionsPanel .directions-mode-button.active {
  color: #00243f !important;
  background: #73dac6 !important;
}
html body .app-shell #directionsPanel #routeGoogleButton:not(:disabled) {
  color: #00243f !important;
  background: #f0f8fc !important;
  border-color: #f0f8fc !important;
}
html body .app-shell #directionsPanel :is(button, input):focus-visible { outline: 3px solid #73dac6 !important; outline-offset: 2px; }
html body .app-shell #directionsPanel input { color: #f5fbff !important; caret-color: #73dac6; }
html body .app-shell #directionsPanel input::placeholder { color: #b7cddd !important; opacity: 1; }
html body .app-shell #directionsPanel .directions-box:focus-within { border-color: #73dac6 !important; }
html body .app-shell #directionsPanel .directions-result {
  background: #0c304a !important; color: #f5fbff !important; border-color: #496b80 !important;
}
html body .app-shell #directionsPanel .route-summary-destination > strong { white-space: normal !important; overflow-wrap: anywhere; }
html body .app-shell #directionsPanel .route-summary-metrics > span { background: #173b53 !important; }
html body .app-shell #directionsPanel :is(.route-summary-metrics small, .route-summary-attribution) { color: #bdcfdb !important; }
html body .app-shell #directionsPanel .route-summary-attribution { font-size: .65rem !important; }
html body .app-shell #directionsPanel.has-target .route-handoff-label { white-space: normal !important; overflow: visible !important; }
html body main.app-shell section.map-stage.map-focus #directionsPanel.has-target { max-height: min(360px, calc(100% - 230px)) !important; }
html body .app-shell .route-marker.route-marker-start { color: #00243f !important; background: #73dac6 !important; }
html body .app-shell .route-marker.route-marker-end { color: #f5fbff !important; background: #00243f !important; }
@keyframes route-preview-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (hover: hover) {
  html body .app-shell #directionsPanel button:not(:disabled):hover { border-color: #73dac6 !important; }
}
@media (max-width: 480px) and (orientation: portrait) {
  html body main.app-shell section.map-stage.map-focus #directionsPanel.has-target {
    right: max(14px, env(safe-area-inset-right)) !important;
    left: max(14px, env(safe-area-inset-left)) !important;
    width: auto !important;
    max-width: none !important;
  }
  html body main.app-shell section.map-stage.map-focus:has(#directionsPanel.open.has-target) #mapNavigationGadget {
    bottom: calc(var(--bottom-nav-height, 84px) + env(safe-area-inset-bottom, 0px) + var(--route-preview-height, 300px) + 28px) !important;
  }
}
@media (max-width: 480px) and (max-height: 700px) and (orientation: portrait) {
  /* Keep room for the route; these controls return immediately on close. */
  html body main.app-shell section.map-stage.map-focus:has(#directionsPanel.open.has-target) :is(#mapScopeSwitch, #mapScopeCaption, #mapDepthSwitch, #mappiIntelligenceButton) { display: none !important; }
}
@media (max-height: 560px) and (orientation: landscape) {
  html body main.app-shell section.map-stage.map-focus #directionsPanel.has-target { max-height: calc(100% - 155px) !important; }
  html body main.app-shell section.map-stage.map-focus #directionsPanel.open.has-target {
    width: min(320px, 43vw) !important;
    max-width: min(320px, 43vw) !important;
    right: auto !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    grid-template-rows: auto auto auto !important;
    gap: 6px !important;
    padding: 10px !important;
  }
  html body .app-shell #directionsPanel.has-target .directions-heading { display: contents !important; }
  html body .app-shell #directionsPanel.has-target .directions-heading > div { display: none !important; }
  html body .app-shell #directionsPanel.has-target .directions-close { grid-column: 2 !important; grid-row: 1 !important; }
  html body .app-shell #directionsPanel.has-target .directions-mode { grid-column: 1 !important; grid-row: 1 !important; }
  html body .app-shell #directionsPanel.has-target .directions-summary { grid-column: 1 / -1 !important; grid-row: 2 !important; }
  html body .app-shell #directionsPanel.has-target .directions-actions { grid-column: 1 / -1 !important; grid-row: 3 !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body main.app-shell section.map-stage.map-focus #directionsPanel { animation: none !important; }
  html body .app-shell #directionsPanel * { transition: none !important; }
}

/* Route-first controls: the map remains available without a permanent 2×2
   gadget competing with the destination. Closing the route restores it. */
html body main.app-shell section.map-stage #routeMapControlsToggle { display: none !important; }
html body main.app-shell section.map-stage.map-focus:has(#directionsPanel.open.has-target) #routeMapControlsToggle:not([hidden]) {
  position: fixed !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  bottom: calc(var(--bottom-nav-height, 84px) + env(safe-area-inset-bottom, 0px) + 24px) !important;
  width: 112px !important;
  min-height: 44px !important;
  padding: 8px !important;
  border: 1px solid #46657b !important;
  border-radius: 16px !important;
  background: #00243f !important;
  color: #f5fbff !important;
  box-shadow: 0 4px 12px rgba(0, 36, 63, .12) !important;
  font: 600 11px/1.3 Inter, system-ui, sans-serif !important;
  touch-action: manipulation;
  z-index: 731 !important;
}
html body main.app-shell section.map-stage #routeMapControlsToggle:focus-visible {
  outline: 2px solid #73dac6 !important;
  outline-offset: 3px !important;
}
html body main.app-shell section.map-stage #routeMapControlsToggle[aria-expanded="true"] .route-controls-chevron { transform: rotate(180deg); }
html body main.app-shell section.map-stage.map-focus:has(#directionsPanel.open.has-target):not(.route-controls-expanded) #mapNavigationGadget {
  display: none !important;
}
html body main.app-shell section.map-stage.map-focus.route-controls-expanded:has(#directionsPanel.open.has-target) #mapNavigationGadget {
  --explore-rail-right: max(14px, env(safe-area-inset-right));
  --explore-rail-gadget-bottom: calc(var(--bottom-nav-height, 84px) + env(safe-area-inset-bottom, 0px) + 78px);
  right: max(14px, env(safe-area-inset-right)) !important;
  bottom: calc(var(--bottom-nav-height, 84px) + env(safe-area-inset-bottom, 0px) + 78px) !important;
}
@media (max-width: 480px) and (orientation: portrait) {
  html body main.app-shell section.map-stage.map-focus:has(#directionsPanel.open.has-target) #routeMapControlsToggle:not([hidden]) {
    bottom: calc(var(--bottom-nav-height, 84px) + env(safe-area-inset-bottom, 0px) + var(--route-preview-height, 300px) + 28px) !important;
  }
  html body main.app-shell section.map-stage.map-focus.route-controls-expanded:has(#directionsPanel.open.has-target) #mapNavigationGadget {
    --explore-rail-gadget-bottom: calc(var(--bottom-nav-height, 84px) + env(safe-area-inset-bottom, 0px) + var(--route-preview-height, 300px) + 82px);
    bottom: calc(var(--bottom-nav-height, 84px) + env(safe-area-inset-bottom, 0px) + var(--route-preview-height, 300px) + 82px) !important;
  }
}
@media (orientation: landscape) and (max-height: 560px) and (pointer: coarse) {
  /* These contextual switches return on close; never leave controls peeking
     out from behind the route card. The primary header remains accessible. */
  html body main.app-shell section.map-stage.map-focus:has(#directionsPanel.open.has-target) :is(#mapScopeSwitch, #mapScopeCaption, #mapDepthSwitch, #mappiIntelligenceButton) {
    display: none !important;
  }
  html body main.app-shell section.map-stage.map-focus #directionsPanel.open.has-target {
    width: min(300px, 38vw) !important;
    max-width: min(300px, 38vw) !important;
  }
}

/* A short portrait phone has no room for a second row above the disclosure.
   Expand sideways into four full-size controls and keep a 44px close toggle. */
@media (orientation: portrait) and (max-width: 480px) and (max-height: 700px) {
  html body main.app-shell section.map-stage.map-focus.route-controls-expanded:has(#directionsPanel.open.has-target) #routeMapControlsToggle {
    width: 44px !important;
  }
  html body main.app-shell section.map-stage.map-focus.route-controls-expanded #routeMapControlsToggle > span:first-child { display: none; }
  html body main.app-shell section.map-stage.map-focus.route-controls-expanded:has(#directionsPanel.open.has-target) #mapNavigationGadget {
    --explore-rail-right: calc(max(14px, env(safe-area-inset-right)) + 54px);
    --explore-rail-gadget-bottom: calc(var(--bottom-nav-height, 84px) + env(safe-area-inset-bottom, 0px) + var(--route-preview-height, 300px) + 28px);
    width: 176px !important;
    min-width: 176px !important;
    height: 44px !important;
    min-height: 44px !important;
    grid-template-columns: repeat(4, 44px) !important;
    grid-template-rows: 44px !important;
    border-radius: 14px !important;
  }
  html body main.app-shell section.map-stage.map-focus.route-controls-expanded:has(#directionsPanel.open.has-target) #mapNavigationGadget > :is(#locateButton, #mapCompass, #mapZoomInButton, #mapZoomOutButton) {
    grid-area: auto !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}