/* Adventure Builder Satnav Clean Core — Search, GO, Map and END only. */
:root { --clean-safe-top: max(12px, env(safe-area-inset-top)); --clean-safe-bottom: max(12px, env(safe-area-inset-bottom)); }
body { overflow: hidden; }
.app-shell { min-height: 100dvh; background: #071512; }
#map { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; }

/* Keep only the clean entry controls. */
.top-panel { position: fixed !important; top: var(--clean-safe-top) !important; left: 12px !important; right: 12px !important; z-index: 30 !important; width: auto !important; }
.top-panel .stage-badge, .top-panel .build-dashboard-button { display: none !important; }
#screenTitle { font-size: 1.05rem !important; }
.destination-panel { position: fixed !important; z-index: 31 !important; top: 78px !important; left: 12px !important; right: 12px !important; width: auto !important; max-width: 560px !important; margin: 0 auto !important; }
.destination-heading .eyebrow, .destination-heading h2, #collapsePanelButton, #searchHelp,
.route-mode, #useCurrentLocationButton, .quick-grid { display: none !important; }
.destination-heading { min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
#destinationPanelBody { display: block !important; }
.search-wrap { margin: 0 !important; }
.selected-destination { margin-top: 10px !important; }

/* Remove every optional satnav control from the clean core. */
#trafficAssistant, #adventureStops, #crossChannelPanel, #speedAssistant, .status-card,
#simulationModeBanner, #simulationPanel, #buildDashboardPanel,
#buildDashboardBackdrop, #savedJourneysPanel, #savedJourneysBackdrop,
#navigationBanner, #laneGuidance, #routeSummary, .location-readout,
#saveForLaterButton, .journey-tools, #driverMenuButton,
#backToPlannerButton, #locateButton, .privacy-note { display: none !important; }

.bottom-panel { position: fixed !important; z-index: 32 !important; left: 12px !important; right: 12px !important; bottom: var(--clean-safe-bottom) !important; width: auto !important; max-width: 560px !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; pointer-events: none; }
#journeyActions, #navigationActions { pointer-events: auto; width: 100% !important; }
#journeyActions:not([hidden]) { display: flex !important; }
#planRouteButton { width: 100% !important; min-height: 58px !important; font-size: 1.1rem !important; border-radius: 16px !important; }
#navigationActions:not([hidden]) { display: flex !important; }
#endNavigationButton { width: 100% !important; min-height: 58px !important; font-size: 1.05rem !important; border-radius: 16px !important; }

/* While navigating, leave only the map and END visible. */
.app-shell.navigation-active .top-panel,
.app-shell.navigation-active .destination-panel { display: none !important; }

@media (min-width: 900px) {
  .destination-panel { top: 82px !important; }
  .top-panel, .destination-panel, .bottom-panel { max-width: 620px !important; }
}

/* Stage 2B — strict two-state controls. Hidden controls must never be revived by older layout CSS. */
#journeyActions[hidden],
#navigationActions[hidden] { display: none !important; }

.app-shell:not(.navigation-active) #navigationActions { display: none !important; }
.app-shell:not(.navigation-active) #journeyActions:not([hidden]) { display: flex !important; }

.app-shell.navigation-active #journeyActions { display: none !important; }
.app-shell.navigation-active #navigationActions:not([hidden]) { display: flex !important; }

/* Navigation mode is map-first: remove every planner surface once GO succeeds. */
.app-shell.navigation-active .top-panel,
.app-shell.navigation-active .destination-panel,
.app-shell.navigation-active .status-card { display: none !important; }
.app-shell.navigation-active #map { inset: 0 !important; z-index: 1 !important; }
.app-shell.navigation-active .bottom-panel { z-index: 40 !important; }


/* Stage 3 — small back arrow on the Satnav search screen only. */
.satnav-back-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 13px;
  color: #f4fbf8;
  background: rgba(255,255,255,.08);
  text-decoration: none;
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
.satnav-back-button:active { transform: scale(.95); }
.app-shell.navigation-active .satnav-back-button { display: none !important; }


/* Stage 3B — larger, easier-to-read destination search and confirmed-only GO. */
.search-box {
  min-height: 68px !important;
  padding: 0 14px 0 18px !important;
  gap: 12px !important;
  border-radius: 18px !important;
}
.search-box .search-icon { font-size: 25px !important; }
.search-box input {
  min-height: 64px !important;
  font-size: 21px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
}
.search-box input::placeholder {
  font-size: 20px !important;
  font-weight: 600 !important;
}
.search-result { padding: 14px 12px !important; grid-template-columns: 34px 1fr !important; }
.search-result strong { font-size: 17px !important; line-height: 1.25 !important; }
.search-result small { font-size: 13px !important; line-height: 1.35 !important; }
.selected-destination { padding: 14px 13px !important; gap: 11px !important; }
.selected-destination strong { font-size: 17px !important; line-height: 1.35 !important; }
#journeyActions[aria-hidden="true"] { display: none !important; }

@media (max-width: 719px) {
  .search-box { min-height: 66px !important; }
  .search-box input { min-height: 62px !important; font-size: 20px !important; }
}


/* Stage 3C — GO NOW has one strict confirmed-destination state. */
#journeyActions[hidden],
#journeyActions[aria-hidden="true"],
#planRouteButton[hidden] { display: none !important; }
#journeyActions[aria-hidden="false"] { display: flex !important; }

/* Stage 4D — clean search layout rebuild.
   Replaces the Stage 4C/4CB/4CC sizing and overlay patches with one normal-flow layout.
   The dark destination card now owns the search field, result list, selected place and GO button. */
.destination-panel {
  max-height: calc(100dvh - 102px - var(--clean-safe-bottom)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

#destinationPanelBody {
  display: block !important;
  min-width: 0;
}

.search-wrap {
  position: static !important;
  display: block !important;
  min-width: 0;
}

.search-results {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100% !important;
  height: auto !important;
  max-height: 326px !important;
  margin: 10px 0 0 !important;
  padding: 6px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  box-sizing: border-box !important;
  border: 1px solid var(--border) !important;
  border-radius: 15px !important;
  background: #101010 !important;
  box-shadow: none !important;
  scrollbar-gutter: stable;
}
.search-results[hidden] { display: none !important; }

.search-result {
  min-height: 68px !important;
  padding: 12px 11px !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
}
.search-result strong {
  font-size: 17px !important;
  line-height: 1.25 !important;
}
.search-result small {
  margin-top: 4px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.more-results-hint {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: block;
  min-height: 36px;
  margin: 4px -6px -6px;
  padding: 9px 12px 8px;
  border-top: 1px solid rgba(255,255,255,.09);
  color: #aebbb6;
  background: linear-gradient(180deg, rgba(16,16,16,.86), #101010 42%);
  text-align: center;
  font-size: 13px;
  font-weight: 750;
  pointer-events: none;
  transition: opacity .16s ease;
}
.more-results-hint.at-end { opacity: 0; }

.selected-destination {
  margin-top: 10px !important;
}

.confirmed-journey-actions {
  width: 100% !important;
  margin-top: 12px !important;
  pointer-events: auto;
}
.confirmed-journey-actions:not([hidden]) { display: flex !important; }
.confirmed-journey-actions #planRouteButton {
  width: 100% !important;
  min-height: 58px !important;
  font-size: 1.1rem !important;
  border-radius: 16px !important;
}
.confirmed-journey-actions #saveForLaterButton { display: none !important; }

/* The bottom dock belongs only to active navigation. */
.app-shell:not(.navigation-active) .bottom-panel { display: none !important; }
.app-shell.navigation-active .bottom-panel { display: block !important; }

@media (max-width: 719px) {
  .destination-panel {
    max-height: calc(100dvh - 96px - var(--clean-safe-bottom)) !important;
  }
  .search-results {
    max-height: min(326px, 48dvh) !important;
  }
}

@media (max-height: 700px) and (max-width: 719px) {
  .search-results {
    max-height: min(286px, 42dvh) !important;
  }
  .search-result {
    min-height: 62px !important;
  }
}


/* Stage 4.1 — Live Navigation Foundation.
   One owner for GPS, vehicle marker, route line, fixed destination marker, camera follow and END. */
.core-vehicle-marker .user-marker-core {
  width: 24px !important;
  height: 24px !important;
  border: 4px solid #101010 !important;
  background: #ff8a00 !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 4px 16px rgba(0,0,0,.45) !important;
}
.app-shell.navigation-active #navigationBanner,
.app-shell.navigation-active #speedAssistant,
.app-shell.navigation-active #trafficAssistant,
.app-shell.navigation-active #laneGuidance,
.app-shell.navigation-active #simulationPanel,
.app-shell.navigation-active #simulationModeBanner { display: none !important; }
.app-shell.navigation-active #endNavigationButton {
  background: #b62323 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}


/* Stage 2A-M1 Repair A — the test centre and voice module are intentional core test tools. */
.confirmed-journey-actions:not([hidden]) {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
.confirmed-journey-actions #planRouteButton {
  grid-column: 1 / -1 !important;
}
#simulateRouteButton,
#voiceTestButton {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100% !important;
  min-height: 50px !important;
  border-radius: 14px !important;
  font-weight: 800;
  cursor: pointer;
}
#voiceTestButton {
  border: 1px solid rgba(39,211,162,.4);
  color: #eafff8;
  background: rgba(39,211,162,.13);
}
#simulateRouteButton:disabled { opacity: .5; cursor: not-allowed; }
.app-shell.simulation-active #simulationPanel:not([hidden]) {
  display: block !important;
  position: fixed !important;
  z-index: 55 !important;
  left: 12px !important;
  right: 12px !important;
  bottom: calc(var(--clean-safe-bottom) + 74px) !important;
  max-width: 560px !important;
  margin: 0 auto !important;
}
.app-shell.simulation-active #simulationModeBanner:not([hidden]) {
  display: flex !important;
  z-index: 56 !important;
}
.app-shell.navigation-active #voiceToggleButton {
  display: inline-flex !important;
}
@media (max-width: 420px) {
  .confirmed-journey-actions:not([hidden]) { grid-template-columns: 1fr !important; }
  .confirmed-journey-actions #planRouteButton { grid-column: auto !important; }
}

/* Stage 2C Repair A: modular map controls stay interactive */
#map { pointer-events: auto !important; touch-action: none !important; }
#map .maplibregl-canvas { touch-action: none !important; }
#map .maplibregl-canvas-container { touch-action: none !important; }
#cameraRecenterButton { display: grid !important; pointer-events: auto !important; }