diff --git a/src/App.jsx b/src/App.jsx
index 0d02c8f..3bdea6e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,8 +1,7 @@
 import { useEffect, useRef, useCallback } from 'react'
 import { useStore } from './store'
 import { useTheme } from './hooks/useTheme'
-import { requestRoute, fetchAuthState } from './api'
-import { decodePolyline } from './utils/decode'
+import { fetchAuthState } from './api'
 import MapView from './components/MapView'
 import Panel from './components/Panel'
 
@@ -12,20 +11,10 @@ import LocateButton from './components/LocateButton'
 
 export default function App() {
   const mapViewRef = useRef(null)
-  const routeDebounceRef = useRef(null)
 
   // Initialize theme system
   useTheme()
 
-  const stops = useStore((s) => s.stops)
-  const mode = useStore((s) => s.mode)
-  const route = useStore((s) => s.route)
-  const gpsOrigin = useStore((s) => s.gpsOrigin)
-  const geoPermission = useStore((s) => s.geoPermission)
-  const setRoute = useStore((s) => s.setRoute)
-  const setRouteLoading = useStore((s) => s.setRouteLoading)
-  const setRouteError = useStore((s) => s.setRouteError)
-  const clearRoute = useStore((s) => s.clearRoute)
   const setAuth = useStore((s) => s.setAuth)
 
   // Initialize auth state on app load (single fetch, no polling)
@@ -33,70 +22,18 @@ export default function App() {
     fetchAuthState().then(setAuth)
   }, [setAuth])
 
-  // Fetch route when stops, mode, gpsOrigin, or geoPermission change (debounced 500ms)
-  useEffect(() => {
-    if (routeDebounceRef.current) clearTimeout(routeDebounceRef.current)
-
-    routeDebounceRef.current = setTimeout(async () => {
-      const { userLocation } = useStore.getState()
-
-      let effective = stops.map((s) => ({ lat: s.lat, lon: s.lon }))
-      if (gpsOrigin && geoPermission === 'granted' && userLocation) {
-        effective = [{ lat: userLocation.lat, lon: userLocation.lon }, ...effective]
-      }
-
-      if (effective.length < 2) {
-        clearRoute()
-        return
-      }
-
-      setRouteLoading(true)
-
-      try {
-        const data = await requestRoute(effective, mode)
-        if (data.trip) {
-          setRoute(data.trip)
-        } else {
-          setRouteError('No route returned')
-        }
-      } catch (e) {
-        setRouteError(e.message || 'Route request failed')
-      } finally {
-        setRouteLoading(false)
-      }
-    }, 500)
-
-    return () => {
-      if (routeDebounceRef.current) clearTimeout(routeDebounceRef.current)
-    }
-  }, [stops, mode, gpsOrigin, geoPermission, clearRoute, setRoute, setRouteLoading, setRouteError])
-
-  // Handle maneuver click
-  const handleManeuverClick = useCallback(
-    (maneuver) => {
-      if (!route || !route.legs) return
-
-      const legIdx = maneuver._legIndex || 0
-      const leg = route.legs[legIdx]
-      if (!leg || !leg.shape) return
-
-      const coords = decodePolyline(leg.shape, 6)
-      const idx = maneuver.begin_shape_index
-      if (idx >= 0 && idx < coords.length) {
-        const [lng, lat] = coords[idx]
-        mapViewRef.current?.flyTo(lat, lng, 15)
-      }
-    },
-    [route]
-  )
+  // Handle clear route from panel
+  const handleClearRoute = useCallback(() => {
+    mapViewRef.current?.clearRoute?.()
+  }, [])
 
   return (
     <div className="relative w-screen h-screen overflow-hidden" style={{ background: 'var(--bg-base)' }}>
       <MapView ref={mapViewRef} />
-      <Panel onManeuverClick={handleManeuverClick} />
-      
+      <Panel onClearRoute={handleClearRoute} />
+
       <ContactModal />
-      
+
       {/* Bottom-right map controls */}
       <div className="map-controls-br">
         <LocateButton mapRef={mapViewRef} />
diff --git a/src/api.js b/src/api.js
index fe8fd02..47d5861 100644
--- a/src/api.js
+++ b/src/api.js
@@ -321,3 +321,69 @@ export async function fetchAuthState() {
     return { authenticated: false, username: null }
   }
 }
+
+// ── Offroute API ──
+
+const OFFROUTE_URL = "/api/offroute"
+const MVUM_URL = "/api/mvum"
+
+/**
+ * Request an offroute route from the pathfinder API.
+ * @param {object} start - { lat, lon }
+ * @param {object} end - { lat, lon }
+ * @param {string} mode - foot | mtb | atv | vehicle
+ * @param {string} boundaryMode - strict | pragmatic | emergency
+ * @returns {Promise<object>} Offroute response with GeoJSON route
+ */
+export async function requestOffroute(start, end, mode = "foot", boundaryMode = "strict") {
+  const body = {
+    start: [start.lat, start.lon],
+    end: [end.lat, end.lon],
+    mode,
+    boundary_mode: boundaryMode,
+  }
+
+  const controller = new AbortController()
+  const timeout = setTimeout(() => controller.abort(), 120000) // 2 min timeout for complex routes
+
+  try {
+    const resp = await fetch(OFFROUTE_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+      signal: controller.signal,
+    })
+
+    if (!resp.ok) {
+      const errBody = await resp.json().catch(() => ({}))
+      throw new Error(errBody.message || 'Could not find a route. Try a different start point or mode.')
+    }
+
+    return resp.json()
+  } finally {
+    clearTimeout(timeout)
+  }
+}
+
+/**
+ * Fetch MVUM (Motor Vehicle Use Map) info for a location.
+ * @param {number} lat
+ * @param {number} lon
+ * @param {number} radius - Search radius in meters
+ * @returns {Promise<object|null>} MVUM feature info or null
+ */
+export async function fetchMvumInfo(lat, lon, radius = 500) {
+  try {
+    const params = new URLSearchParams({
+      lat: String(lat),
+      lon: String(lon),
+      radius: String(radius),
+    })
+    const resp = await fetch(`${MVUM_URL}?${params}`, { signal: AbortSignal.timeout(5000) })
+    if (!resp.ok) return null
+    const data = await resp.json()
+    return data.feature || null
+  } catch {
+    return null
+  }
+}
diff --git a/src/components/ManeuverList.jsx b/src/components/ManeuverList.jsx
index d869b66..a8b90b0 100644
--- a/src/components/ManeuverList.jsx
+++ b/src/components/ManeuverList.jsx
@@ -1,140 +1,164 @@
-import {
-  MoveRight, MoveUpRight, MoveDownRight, CornerUpRight, CornerUpLeft,
-  MoveLeft, MoveUpLeft, MoveDownLeft, CircleDot, RotateCw,
-  GitMerge, CornerRightDown, CornerRightUp, Navigation
-} from 'lucide-react'
-import { useStore } from '../store'
-
-function formatTime(seconds) {
-  if (seconds < 60) return `${Math.round(seconds)}s`
-  if (seconds < 3600) return `${Math.round(seconds / 60)} min`
-  const h = Math.floor(seconds / 3600)
-  const m = Math.round((seconds % 3600) / 60)
-  return m > 0 ? `${h}h ${m}m` : `${h}h`
-}
-
-function formatDist(miles) {
-  if (miles < 0.1) return `${Math.round(miles * 5280)} ft`
-  return `${miles.toFixed(1)} mi`
-}
-
-function ManeuverIcon({ type }) {
-  const size = 16
-  const props = { size, strokeWidth: 1.5 }
-  switch (type) {
-    case 0: return <MoveRight {...props} />
-    case 1: return <MoveUpRight {...props} />
-    case 2: return <CornerUpRight {...props} />
-    case 3: return <MoveDownRight {...props} />
-    case 4: case 5: return <CornerUpLeft {...props} />
-    case 6: return <MoveDownLeft {...props} />
-    case 7: return <CornerUpLeft {...props} />
-    case 8: return <MoveUpLeft {...props} />
-    case 9: return <Navigation {...props} />
-    case 10: case 11: case 12: return <CircleDot {...props} />
-    case 15: case 16: return <RotateCw {...props} />
-    case 24: return <GitMerge {...props} />
-    case 25: return <CornerRightUp {...props} />
-    case 26: return <CornerRightDown {...props} />
-    default: return <MoveRight {...props} />
-  }
-}
-
-export default function ManeuverList({ onManeuverClick }) {
-  const route = useStore((s) => s.route)
-  const routeLoading = useStore((s) => s.routeLoading)
-  const routeError = useStore((s) => s.routeError)
-
-  if (routeLoading) {
-    return (
-      <div className="flex items-center justify-center py-4">
-        <div
-          className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
-          style={{ borderColor: 'var(--accent)', borderTopColor: 'transparent' }}
-        />
-        <span className="ml-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
-          Calculating route...
-        </span>
-      </div>
-    )
-  }
-
-  if (routeError) {
-    return (
-      <div
-        className="px-3 py-2 rounded text-sm"
-        style={{
-          background: 'color-mix(in srgb, var(--status-danger) 15%, transparent)',
-          border: '1px solid var(--status-danger)',
-          color: 'var(--status-danger)',
-        }}
-      >
-        {routeError}
-      </div>
-    )
-  }
-
-  if (!route || !route.legs) return null
-
-  const totalTime = route.summary?.time || 0
-  const totalDist = route.summary?.length || 0
-
-  const allManeuvers = []
-  let timeRemaining = totalTime
-
-  for (let legIdx = 0; legIdx < route.legs.length; legIdx++) {
-    const leg = route.legs[legIdx]
-    for (const man of leg.maneuvers || []) {
-      allManeuvers.push({ ...man, _legIndex: legIdx, timeRemaining })
-      timeRemaining -= man.time || 0
-    }
-  }
-
-  return (
-    <div className="flex flex-col">
-      {/* Route summary */}
-      <div
-        className="flex items-center justify-between px-3 py-2 rounded mb-2"
-        style={{ background: 'var(--bg-overlay)', border: '1px solid var(--border-subtle)' }}
-      >
-        <span className="font-mono text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
-          {formatDist(totalDist)}
-        </span>
-        <span className="font-mono text-sm" style={{ color: 'var(--text-secondary)' }}>
-          {formatTime(totalTime)}
-        </span>
-      </div>
-
-      {/* Maneuver steps */}
-      <div className="flex flex-col max-h-[50vh] overflow-y-auto">
-        {allManeuvers.map((man, i) => (
-          <button
-            key={i}
-            onClick={() => {
-              if (man.begin_shape_index != null && onManeuverClick) onManeuverClick(man)
-            }}
-            className="flex items-start gap-2 px-2 py-2 text-left rounded transition-colors duration-75"
-            style={{ '--hover-bg': 'var(--bg-overlay)' }}
-            onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-overlay)'}
-            onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
-          >
-            <span className="w-5 shrink-0 mt-0.5" style={{ color: 'var(--accent)' }}>
-              <ManeuverIcon type={man.type} />
-            </span>
-            <div className="flex-1 min-w-0">
-              <p className="text-sm leading-tight" style={{ color: 'var(--text-primary)' }}>
-                {man.instruction || man.verbal_pre_transition_instruction || 'Continue'}
-              </p>
-              <p className="font-mono text-[11px] mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
-                {formatDist(man.length || 0)}
-                {man.timeRemaining > 0 && (
-                  <span className="ml-2">{formatTime(man.timeRemaining)} left</span>
-                )}
-              </p>
-            </div>
-          </button>
-        ))}
-      </div>
-    </div>
-  )
-}
+import {
+  MoveRight, MoveUpRight, MoveDownRight, CornerUpRight, CornerUpLeft,
+  MoveLeft, MoveUpLeft, MoveDownLeft, CircleDot, RotateCw,
+  GitMerge, CornerRightDown, CornerRightUp, Navigation, Mountain, Map, AlertTriangle
+} from 'lucide-react'
+import { useStore } from '../store'
+
+function formatDistKm(km) {
+  const miles = km * 0.621371
+  if (miles < 0.1) return Math.round(miles * 5280) + ' ft'
+  return miles.toFixed(1) + ' mi'
+}
+
+function formatTimeMin(minutes) {
+  if (minutes < 60) return Math.round(minutes) + ' min'
+  const h = Math.floor(minutes / 60)
+  const m = Math.round(minutes % 60)
+  return m > 0 ? h + 'h ' + m + 'm' : h + 'h'
+}
+
+function ManeuverIcon({ type }) {
+  const size = 16
+  const props = { size, strokeWidth: 1.5 }
+  switch (type) {
+    case 0: return <MoveRight {...props} />
+    case 1: return <MoveUpRight {...props} />
+    case 2: return <CornerUpRight {...props} />
+    case 3: return <MoveDownRight {...props} />
+    case 4: case 5: return <CornerUpLeft {...props} />
+    case 6: return <MoveDownLeft {...props} />
+    case 7: return <CornerUpLeft {...props} />
+    case 8: return <MoveUpLeft {...props} />
+    case 9: return <Navigation {...props} />
+    case 10: case 11: case 12: return <CircleDot {...props} />
+    case 15: case 16: return <RotateCw {...props} />
+    case 24: return <GitMerge {...props} />
+    case 25: return <CornerRightUp {...props} />
+    case 26: return <CornerRightDown {...props} />
+    default: return <MoveRight {...props} />
+  }
+}
+
+export default function ManeuverList() {
+  const routeResult = useStore((s) => s.routeResult)
+  const routeLoading = useStore((s) => s.routeLoading)
+  const routeError = useStore((s) => s.routeError)
+
+  if (routeLoading) {
+    return (
+      <div className="flex items-center justify-center py-4">
+        <div
+          className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
+          style={{ borderColor: 'var(--accent)', borderTopColor: 'transparent' }}
+        />
+        <span className="ml-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
+          Calculating route...
+        </span>
+      </div>
+    )
+  }
+
+  if (routeError) {
+    return (
+      <div
+        className="px-3 py-2 rounded text-sm"
+        style={{
+          background: 'color-mix(in srgb, var(--status-danger) 15%, transparent)',
+          border: '1px solid var(--status-danger)',
+          color: 'var(--status-danger)',
+        }}
+      >
+        {routeError}
+      </div>
+    )
+  }
+
+  if (!routeResult?.summary) return null
+
+  const summary = routeResult.summary
+  const networkFeature = routeResult.route?.features?.find(f => f.properties?.segment_type === 'network')
+  const maneuvers = networkFeature?.properties?.maneuvers || []
+
+  return (
+    <div className="flex flex-col">
+      {/* Total summary */}
+      <div
+        className="flex items-center justify-between px-3 py-2 rounded mb-2"
+        style={{ background: 'var(--bg-overlay)', border: '1px solid var(--border-subtle)' }}
+      >
+        <span className="font-mono text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
+          {formatDistKm(summary.total_distance_km)}
+        </span>
+        <span className="font-mono text-sm" style={{ color: 'var(--text-secondary)' }}>
+          {formatTimeMin(summary.total_effort_minutes)}
+        </span>
+      </div>
+
+      {/* Segment breakdown */}
+      <div className="flex flex-col gap-1 px-2 mb-2">
+        {summary.wilderness_distance_km > 0 && (
+          <div className="flex items-center gap-2 text-sm">
+            <Mountain size={14} style={{ color: '#f97316' }} />
+            <span style={{ color: 'var(--text-secondary)' }}>Wilderness</span>
+            <span className="ml-auto font-mono text-xs" style={{ color: 'var(--text-tertiary)' }}>
+              {formatDistKm(summary.wilderness_distance_km)} / {formatTimeMin(summary.wilderness_effort_minutes)}
+            </span>
+          </div>
+        )}
+        {summary.network_distance_km > 0 && (
+          <div className="flex items-center gap-2 text-sm">
+            <Map size={14} style={{ color: '#3b82f6' }} />
+            <span style={{ color: 'var(--text-secondary)' }}>Road/Trail</span>
+            <span className="ml-auto font-mono text-xs" style={{ color: 'var(--text-tertiary)' }}>
+              {formatDistKm(summary.network_distance_km)} / {formatTimeMin(summary.network_duration_minutes)}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Warnings */}
+      {(summary.barrier_crossings > 0 || summary.mvum_closed_crossings > 0) && (
+        <div className="px-2 mb-2 flex flex-col gap-1">
+          {summary.barrier_crossings > 0 && (
+            <div className="flex items-center gap-1 text-xs" style={{ color: 'var(--status-warning)' }}>
+              <AlertTriangle size={12} />
+              <span>{summary.barrier_crossings} barrier crossing{summary.barrier_crossings > 1 ? 's' : ''}</span>
+            </div>
+          )}
+          {summary.mvum_closed_crossings > 0 && (
+            <div className="flex items-center gap-1 text-xs" style={{ color: 'var(--status-warning)' }}>
+              <AlertTriangle size={12} />
+              <span>{summary.mvum_closed_crossings} MVUM closure{summary.mvum_closed_crossings > 1 ? 's' : ''}</span>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Turn-by-turn directions */}
+      {maneuvers.length > 0 && (
+        <div className="flex flex-col max-h-[40vh] overflow-y-auto">
+          <div className="text-xs px-2 mb-1" style={{ color: 'var(--text-tertiary)' }}>Directions</div>
+          {maneuvers.map((man, i) => (
+            <div
+              key={i}
+              className="flex items-start gap-2 px-2 py-2 text-left"
+            >
+              <span className="w-5 shrink-0 mt-0.5" style={{ color: 'var(--accent)' }}>
+                <ManeuverIcon type={man.type} />
+              </span>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm leading-tight" style={{ color: 'var(--text-primary)' }}>
+                  {man.instruction}
+                </p>
+                <p className="font-mono text-[11px] mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
+                  {formatDistKm(man.distance_km)}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/MapView.jsx b/src/components/MapView.jsx
index 0ede093..1dfec38 100644
--- a/src/components/MapView.jsx
+++ b/src/components/MapView.jsx
@@ -6,9 +6,9 @@ import { layers, namedTheme } from 'protomaps-themes-base'
 import { getTheme, getThemeSprite, getOverlayConfig } from '../themes/registry'
 import { useStore } from '../store'
 import { decodePolyline } from '../utils/decode'
-import { fetchReverse } from '../api'
+import { fetchReverse, requestOffroute } from '../api'
 import { getConfig, hasFeature } from '../config'
-import { MapPin, Navigation, ArrowUpRight, ArrowDownLeft, Plus, Star, Ruler, X } from 'lucide-react'
+import { MapPin, Navigation, ArrowUpRight, ArrowDownLeft, Star, Ruler, X, Trash2 } from 'lucide-react'
 import RadialMenu from './RadialMenu'
 import useContextMenu from '../hooks/useContextMenu'
 import toast from 'react-hot-toast'
@@ -27,6 +27,10 @@ const BOUNDARY_SOURCE = 'boundary-source'
 const BOUNDARY_LAYER = 'boundary-layer'
 const STATE_BOUNDARIES_LAYER = 'state-boundaries-z4-z7'
 const ROUTE_LAYER_PREFIX = 'route-layer-'
+const OFFROUTE_SOURCE = 'offroute-source'
+const OFFROUTE_WILDERNESS_LAYER = 'offroute-wilderness'
+const OFFROUTE_NETWORK_LAYER = 'offroute-network'
+const OFFROUTE_MARKERS_LAYER = 'offroute-markers'
 const HILLSHADE_SOURCE = 'hillshade-dem'
 const HILLSHADE_LAYER = 'hillshade-layer'
 const TRAFFIC_SOURCE = 'traffic-tiles'
@@ -1122,6 +1126,7 @@ function isProtectedLayer(id) {
   return id.startsWith('public-lands') ||
          id.startsWith('boundary') ||
          id.startsWith('route') ||
+         id.startsWith('offroute') ||
          id.startsWith('measure') ||
          id.startsWith('contour') ||
          id.startsWith('usfs') ||
@@ -1327,6 +1332,83 @@ function removeStateBoundaries(map) {
   }
 }
 
+
+/** Clear offroute display layers */
+function clearRouteDisplay(map) {
+  if (!map) return
+  if (map.getLayer(OFFROUTE_WILDERNESS_LAYER)) map.removeLayer(OFFROUTE_WILDERNESS_LAYER)
+  if (map.getLayer(OFFROUTE_NETWORK_LAYER)) map.removeLayer(OFFROUTE_NETWORK_LAYER)
+  if (map.getLayer(OFFROUTE_MARKERS_LAYER)) map.removeLayer(OFFROUTE_MARKERS_LAYER)
+  if (map.getSource(OFFROUTE_SOURCE)) map.removeSource(OFFROUTE_SOURCE)
+}
+
+/** Update offroute display with route GeoJSON */
+function updateRouteDisplay(map, routeGeojson) {
+  if (!map || !routeGeojson) return
+  
+  // Clear existing layers
+  clearRouteDisplay(map)
+  
+  // Add source with route features
+  map.addSource(OFFROUTE_SOURCE, {
+    type: "geojson",
+    data: routeGeojson,
+  })
+  
+  // Find first symbol layer for proper z-ordering
+  let beforeId = undefined
+  for (const layer of map.getStyle().layers) {
+    if (layer.type === "symbol") {
+      beforeId = layer.id
+      break
+    }
+  }
+  
+  // Wilderness segment - dashed orange line
+  map.addLayer({
+    id: OFFROUTE_WILDERNESS_LAYER,
+    type: "line",
+    source: OFFROUTE_SOURCE,
+    filter: ["==", ["get", "segment_type"], "wilderness"],
+    layout: { "line-join": "round", "line-cap": "round" },
+    paint: {
+      "line-color": "#f97316", // orange-500
+      "line-width": 4,
+      "line-opacity": 0.9,
+      "line-dasharray": [8, 4],
+    },
+  }, beforeId)
+  
+  // Network segment - solid blue line
+  map.addLayer({
+    id: OFFROUTE_NETWORK_LAYER,
+    type: "line",
+    source: OFFROUTE_SOURCE,
+    filter: ["==", ["get", "segment_type"], "network"],
+    layout: { "line-join": "round", "line-cap": "round" },
+    paint: {
+      "line-color": "#3b82f6", // blue-500
+      "line-width": 5,
+      "line-opacity": 0.85,
+    },
+  }, beforeId)
+  
+  // Fit bounds to route
+  const features = routeGeojson.features || []
+  const allCoords = features
+    .filter(f => f.geometry?.coordinates)
+    .flatMap(f => f.geometry.coordinates)
+  
+  if (allCoords.length > 0) {
+    const bounds = allCoords.reduce(
+      (b, c) => b.extend(c),
+      new maplibregl.LngLatBounds(allCoords[0], allCoords[0])
+    )
+    const leftPad = 420
+    map.fitBounds(bounds, { padding: { top: 60, bottom: 60, left: leftPad, right: 60 } })
+  }
+}
+
 const MapView = forwardRef(function MapView(_, ref) {
   const mapRef = useRef(null)
   const mapInstance = useRef(null)
@@ -1348,14 +1430,11 @@ const MapView = forwardRef(function MapView(_, ref) {
   const measuringRef = useRef({ active: false, points: [] })
   const measureLabelsRef = useRef([]) // HTML label elements
 
-  const stops = useStore((s) => s.stops)
-  const route = useStore((s) => s.route)
   const theme = useStore((s) => s.theme)
   const selectedPlace = useStore((s) => s.selectedPlace)
   const clickMarker = useStore((s) => s.clickMarker)
   const setClickMarker = useStore((s) => s.setClickMarker)
   const clearClickMarker = useStore((s) => s.clearClickMarker)
-  const gpsOrigin = useStore((s) => s.gpsOrigin)
   const geoPermission = useStore((s) => s.geoPermission)
   const setSheetState = useStore((s) => s.setSheetState)
   const setMapCenter = useStore((s) => s.setMapCenter)
@@ -1578,96 +1657,95 @@ const MapView = forwardRef(function MapView(_, ref) {
     updateMeasureLabels(newPoints)
   }
 
-  const radialWedges = [
-    {
-      id: "directions-to",
-      label: "To here",
-      icon: ArrowDownLeft,
-      onSelect: () => {
-        setRadialMenu((m) => ({ ...m, open: false }))
-        const place = {
-          lat: radialMenu.lat,
-          lon: radialMenu.lon,
-          name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
-          source: "radial_menu",
-          matchCode: null,
-        }
-        useStore.getState().startDirections(place)
-      },
-    },
-    {
-      id: "directions-from",
-      label: "From here",
-      icon: ArrowUpRight,
-      onSelect: () => {
-        setRadialMenu((m) => ({ ...m, open: false }))
-        const { clearStops, addStop } = useStore.getState()
-        clearStops()
-        const place = {
-          lat: radialMenu.lat,
-          lon: radialMenu.lon,
-          name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
-          source: "radial_menu",
-          matchCode: null,
-        }
-        addStop(place)
-        useStore.setState({ gpsOrigin: false })
-      },
-    },
-    {
-      id: "add-stop",
-      label: "Add stop",
-      icon: Plus,
-      onSelect: () => {
-        setRadialMenu((m) => ({ ...m, open: false }))
-        const { stops, addStop, clearStops } = useStore.getState()
-        const place = {
-          lat: radialMenu.lat,
-          lon: radialMenu.lon,
-          name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
-          source: "radial_menu",
-          matchCode: null,
-        }
-        if (stops.length === 0) {
-          addStop(place)
-          useStore.setState({ gpsOrigin: false })
-        } else {
-          const success = addStop(place)
-          if (!success) {
-            toast("Maximum 10 stops reached")
-          }
-        }
-      },
-    },
-    {
-      id: "save-place",
-      label: "Save",
-      icon: Star,
-      requiresAuth: true,
-      onSelect: () => {
-        setRadialMenu((m) => ({ ...m, open: false }))
-        const { auth, setEditingContact } = useStore.getState()
-        if (auth.authenticated) {
-          setEditingContact({
-            label: "",
-            lat: radialMenu.lat,
-            lon: radialMenu.lon,
-          })
-        } else {
-          toast("Log in to save places")
-        }
-      },
-    },
-    {
-      id: "measure",
-      label: "Measure",
-      icon: Ruler,
-      onSelect: () => {
-        setRadialMenu((m) => ({ ...m, open: false }))
-        startMeasuring(radialMenu.lat, radialMenu.lon)
-      },
-    },
-  ]
+  const radialWedges = [
+    {
+      id: "to-here",
+      label: "To here",
+      icon: ArrowDownLeft,
+      onSelect: () => {
+        setRadialMenu((m) => ({ ...m, open: false }))
+        const place = {
+          lat: radialMenu.lat,
+          lon: radialMenu.lon,
+          name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
+        }
+        const { routeStart, setRouteEnd, setRouteLoading, setRouteResult, setRouteError, routeMode, boundaryMode } = useStore.getState()
+        setRouteEnd(place)
+        if (routeStart) {
+          setRouteLoading(true)
+          requestOffroute(routeStart, place, routeMode, boundaryMode)
+            .then((data) => {
+              if (data.status === "ok" && data.route) {
+                setRouteResult(data)
+                updateRouteDisplay(mapInstance.current, data.route)
+              } else {
+                setRouteError(data.error || "No route found")
+              }
+            })
+            .catch((e) => setRouteError(e.message))
+            .finally(() => setRouteLoading(false))
+        } else {
+          toast("Set starting point first")
+        }
+      },
+    },
+    {
+      id: "from-here",
+      label: "From here",
+      icon: ArrowUpRight,
+      onSelect: () => {
+        setRadialMenu((m) => ({ ...m, open: false }))
+        const place = {
+          lat: radialMenu.lat,
+          lon: radialMenu.lon,
+          name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
+        }
+        const { clearRoute, setRouteStart } = useStore.getState()
+        clearRoute()
+        clearRouteDisplay(mapInstance.current)
+        setRouteStart(place)
+        toast("Now tap destination")
+      },
+    },
+    {
+      id: "clear-route",
+      label: "Clear",
+      icon: Trash2,
+      onSelect: () => {
+        setRadialMenu((m) => ({ ...m, open: false }))
+        useStore.getState().clearRoute()
+        clearRouteDisplay(mapInstance.current)
+      },
+    },
+    {
+      id: "save-place",
+      label: "Save",
+      icon: Star,
+      requiresAuth: true,
+      onSelect: () => {
+        setRadialMenu((m) => ({ ...m, open: false }))
+        const { auth, setEditingContact } = useStore.getState()
+        if (auth.authenticated) {
+          setEditingContact({
+            label: "",
+            lat: radialMenu.lat,
+            lon: radialMenu.lon,
+          })
+        } else {
+          toast("Log in to save places")
+        }
+      },
+    },
+    {
+      id: "measure",
+      label: "Measure",
+      icon: Ruler,
+      onSelect: () => {
+        setRadialMenu((m) => ({ ...m, open: false }))
+        startMeasuring(radialMenu.lat, radialMenu.lon)
+      },
+    },
+  ]
   // Context menu trigger handler
   const handleContextMenuTrigger = ({ x, y }) => {
     const map = mapInstance.current
@@ -1805,6 +1883,14 @@ const MapView = forwardRef(function MapView(_, ref) {
       updateSatellitePaint(map, currentThemeRef.current)
     },
 
+    // Clear offroute route from map
+    clearRoute() {
+      const map = mapInstance.current
+      if (!map) return
+      clearRouteDisplay(map)
+      useStore.getState().clearRoute()
+    },
+
   }))
 
   // Initialize map
@@ -2464,10 +2550,8 @@ const MapView = forwardRef(function MapView(_, ref) {
       originalPaintValues = {}
 
       // Restore view
-      map.jumpTo({ center, zoom, bearing, pitch })
-      // Re-render route if exists
-      const currentRoute = useStore.getState().route
-      if (currentRoute) updateRoute(map, currentRoute)
+      const currentRoute = useStore.getState().routeResult
+      if (currentRoute?.route) updateRouteDisplay(map, currentRoute.route)
     })
   }, [theme])
 
@@ -2560,168 +2644,6 @@ const MapView = forwardRef(function MapView(_, ref) {
     return () => document.removeEventListener('keydown', handleKeyDown)
   }, [selectedPlace])
 
-  // Update route polyline when route changes
-  useEffect(() => {
-    const map = mapInstance.current
-    if (!map) return
-    if (!map.isStyleLoaded()) {
-      const handler = () => updateRoute(map, route)
-      map.once('idle', handler)
-      return () => map.off('idle', handler)
-    }
-    updateRoute(map, route)
-  }, [route])
-
-  function updateRoute(map, routeData) {
-    if (!map) return
-
-    // Remove old route layers
-    const style = map.getStyle()
-    if (style) {
-      for (const layer of style.layers) {
-        if (layer.id.startsWith(ROUTE_LAYER_PREFIX)) {
-          map.removeLayer(layer.id)
-        }
-      }
-    }
-
-    if (!routeData || !routeData.legs) {
-      if (map.getSource(ROUTE_SOURCE)) {
-        map.getSource(ROUTE_SOURCE).setData({ type: 'FeatureCollection', features: [] })
-      }
-      return
-    }
-
-    const features = []
-    for (let i = 0; i < routeData.legs.length; i++) {
-      const leg = routeData.legs[i]
-      if (!leg.shape) continue
-      const coords = decodePolyline(leg.shape, 6)
-      features.push({
-        type: 'Feature',
-        properties: { legIndex: i },
-        geometry: { type: 'LineString', coordinates: coords },
-      })
-    }
-
-    const source = map.getSource(ROUTE_SOURCE)
-    if (source) {
-      source.setData({ type: 'FeatureCollection', features })
-    } else {
-      map.addSource(ROUTE_SOURCE, {
-        type: 'geojson',
-        data: { type: 'FeatureCollection', features },
-      })
-    }
-
-    // Use CSS variable for route color (read computed value)
-    const routeColor = getComputedStyle(document.documentElement).getPropertyValue('--route-line').trim()
-
-    for (let i = 0; i < features.length; i++) {
-      const layerId = `${ROUTE_LAYER_PREFIX}${i}`
-      if (!map.getLayer(layerId)) {
-        map.addLayer({
-          id: layerId,
-          type: 'line',
-          source: ROUTE_SOURCE,
-          filter: ['==', ['get', 'legIndex'], i],
-          layout: { 'line-join': 'round', 'line-cap': 'round' },
-          paint: {
-            'line-color': routeColor || '#7a9a6b',
-            'line-width': 5,
-            'line-opacity': 0.85,
-          },
-        })
-      }
-    }
-
-    // Fit bounds to route
-    if (features.length > 0) {
-      const allCoords = features.flatMap((f) => f.geometry.coordinates)
-      const bounds = allCoords.reduce(
-        (b, c) => b.extend(c),
-        new maplibregl.LngLatBounds(allCoords[0], allCoords[0])
-      )
-      // Single-panel: no floating detail
-      const leftPad = 420  // 360px panel + margin
-      map.fitBounds(bounds, { padding: { top: 60, bottom: 60, left: leftPad, right: 60 } })
-    }
-  }
-
-  // Update stop markers when stops change
-  useEffect(() => {
-    const map = mapInstance.current
-    if (!map) return
-
-    // Remove old markers
-    for (const m of markersRef.current) m.remove()
-    markersRef.current = []
-    if (popupRef.current) {
-      popupRef.current.remove()
-      popupRef.current = null
-    }
-
-    const hasGpsOrigin = gpsOrigin && geoPermission === 'granted'
-    const indexOffset = hasGpsOrigin ? 1 : 0
-
-    stops.forEach((stop, i) => {
-      const displayIndex = i + indexOffset
-      const effectiveTotal = stops.length + indexOffset
-
-      let pinClass = 'navi-pin navi-pin--intermediate'
-      if (displayIndex === 0) pinClass = 'navi-pin navi-pin--origin'
-      else if (displayIndex === effectiveTotal - 1 && effectiveTotal > 1) pinClass = 'navi-pin navi-pin--destination'
-
-      const label = String.fromCharCode(65 + Math.min(displayIndex, 25))
-
-      const el = document.createElement('div')
-      el.className = pinClass
-      el.textContent = label
-
-      el.addEventListener('click', (e) => {
-        e.stopPropagation()
-        // Flag so the map-level click handler doesn't fire
-        pinClickedRef.current = true
-        if (popupRef.current) popupRef.current.remove()
-        const popup = new maplibregl.Popup({ offset: 20, closeButton: true })
-          .setLngLat([stop.lon, stop.lat])
-          .setHTML(
-            `<div style="font-size:12px;max-width:200px">
-              <strong>${stop.name}</strong>
-              <br/><button id="remove-stop-${stop.id}" style="margin-top:4px;padding:2px 8px;background:var(--status-danger);border:none;border-radius:4px;color:white;cursor:pointer;font-size:11px">Remove</button>
-            </div>`
-          )
-          .addTo(map)
-
-        popup.getElement().querySelector(`#remove-stop-${stop.id}`)?.addEventListener('click', () => {
-          useStore.getState().removeStop(stop.id)
-          popup.remove()
-        })
-        popupRef.current = popup
-      })
-
-      const marker = new maplibregl.Marker({ element: el })
-        .setLngLat([stop.lon, stop.lat])
-        .addTo(map)
-
-      markersRef.current.push(marker)
-    })
-
-    // If stops but no route yet, fit to stops
-    if (stops.length > 0 && !route) {
-      if (stops.length === 1) {
-        map.flyTo({ center: [stops[0].lon, stops[0].lat], zoom: 13 })
-      } else {
-        const bounds = stops.reduce(
-          (b, s) => b.extend([s.lon, s.lat]),
-          new maplibregl.LngLatBounds([stops[0].lon, stops[0].lat], [stops[0].lon, stops[0].lat])
-        )
-        map.fitBounds(bounds, { padding: { top: 60, bottom: 60, left: 420, right: 60 } })
-      }
-    }
-  }, [stops, route, gpsOrigin, geoPermission])
-
-
   // ESC key handler for measurement mode
   useEffect(() => {
     const handleKeyDown = (e) => {
diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index 2799a89..ddae59c 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -1,311 +1,294 @@
-import { useRef, useCallback, useEffect, useState } from 'react'
-import { LogIn, LogOut } from 'lucide-react'
-import ThemePicker from './ThemePicker'
-import { useStore, usePanelState } from '../store'
-import { hasFeature } from '../config'
-import SearchBar from './SearchBar'
-import StopList from './StopList'
-import ModeSelector from './ModeSelector'
-import ManeuverList from './ManeuverList'
-import ContactList from './ContactList'
-import { PlaceCard } from './PlaceCard'
-import { requestOptimizedRoute } from '../api'
-
-export default function Panel({ onManeuverClick }) {
-  const selectedPlace = useStore((s) => s.selectedPlace)
-  const pendingDestination = useStore((s) => s.pendingDestination)
-  const clearSelectedPlace = useStore((s) => s.clearSelectedPlace)
-  const clearPendingDestination = useStore((s) => s.clearPendingDestination)
-  const stops = useStore((s) => s.stops)
-  const mode = useStore((s) => s.mode)
-  const route = useStore((s) => s.route)
-  const routeLoading = useStore((s) => s.routeLoading)
-  const routeError = useStore((s) => s.routeError)
-  const setStops = useStore((s) => s.setStops)
-  const setRoute = useStore((s) => s.setRoute)
-  const setRouteError = useStore((s) => s.setRouteError)
-  const setRouteLoading = useStore((s) => s.setRouteLoading)
-  const sheetState = useStore((s) => s.sheetState)
-  const setSheetState = useStore((s) => s.setSheetState)
-  const theme = useStore((s) => s.theme)
-  const themeOverride = useStore((s) => s.themeOverride)
-  const setThemeOverride = useStore((s) => s.setThemeOverride)
-  const gpsOrigin = useStore((s) => s.gpsOrigin)
-  const geoPermission = useStore((s) => s.geoPermission)
-  const activeTab = useStore((s) => s.activeTab)
-  const auth = useStore((s) => s.auth)
-  const setActiveTab = useStore((s) => s.setActiveTab)
-
-  const panelState = usePanelState()
-
-  const [isMobile, setIsMobile] = useState(false)
-  const [optimizing, setOptimizing] = useState(false)
-  const sheetRef = useRef(null)
-  const dragStartY = useRef(0)
-  const dragStartState = useRef('half')
-
-  // Show contacts tab only if feature enabled AND user is authenticated
-  const showContacts = hasFeature('has_contacts') && auth.authenticated
-
-  // Responsive detection
-  useEffect(() => {
-    const check = () => setIsMobile(window.innerWidth < 768)
-    check()
-    window.addEventListener('resize', check)
-    return () => window.removeEventListener('resize', check)
-  }, [])
-
-  // Auth handlers
-  const handleLogin = () => { window.location.href = '/outpost.goauthentik.io/start?rd=%2F' }
-  const handleLogout = () => { window.location.href = 'https://auth.echo6.co/if/flow/default-invalidation-flow/?next=https://navi.echo6.co/' }
-
-  // Optimize stops
-  const hasGpsOrigin = gpsOrigin && geoPermission === 'granted'
-  const effectiveCount = stops.length + (hasGpsOrigin ? 1 : 0)
-
-  const handleOptimize = useCallback(async () => {
-    if (effectiveCount < 3 || optimizing) return
-    setOptimizing(true)
-    try {
-      const { userLocation } = useStore.getState()
-      let locations = stops.map((s) => ({ lat: s.lat, lon: s.lon }))
-      if (hasGpsOrigin && userLocation) {
-        locations = [{ lat: userLocation.lat, lon: userLocation.lon }, ...locations]
-      }
-      const data = await requestOptimizedRoute(locations, mode)
-      if (data.trip) {
-        const wpOrder = hasGpsOrigin && userLocation
-          ? (data.trip.locations || []).slice(1)
-          : data.trip.locations
-        if (wpOrder && wpOrder.length === stops.length) {
-          const reordered = wpOrder.map((wp) => {
-            let closest = stops[0]
-            let minDist = Infinity
-            for (const s of stops) {
-              const d = Math.abs(s.lat - wp.lat) + Math.abs(s.lon - wp.lon)
-              if (d < minDist) {
-                minDist = d
-                closest = s
-              }
-            }
-            return closest
-          })
-          const seen = new Set()
-          const unique = reordered.filter((s) => {
-            if (seen.has(s.id)) return false
-            seen.add(s.id)
-            return true
-          })
-          if (unique.length === stops.length) {
-            setStops(unique)
-          }
-        }
-        setRoute(data.trip)
-      }
-    } catch (e) {
-      setRouteError(e.message)
-    } finally {
-      setOptimizing(false)
-    }
-  }, [stops, mode, optimizing, effectiveCount, hasGpsOrigin, setStops, setRoute, setRouteError])
-
-  // Mobile sheet drag handling
-  const handleTouchStart = useCallback((e) => {
-    dragStartY.current = e.touches[0].clientY
-    dragStartState.current = sheetState
-  }, [sheetState])
-
-  const handleTouchEnd = useCallback((e) => {
-    const deltaY = e.changedTouches[0].clientY - dragStartY.current
-    if (Math.abs(deltaY) < 30) return
-    if (deltaY < 0) {
-      if (dragStartState.current === 'collapsed') setSheetState('half')
-      else if (dragStartState.current === 'half') setSheetState('full')
-    } else {
-      if (dragStartState.current === 'full') setSheetState('half')
-      else if (dragStartState.current === 'half') setSheetState('collapsed')
-    }
-  }, [setSheetState])
-
-  const showOptimize = effectiveCount >= 3
-
-  // Determine what to show based on panel state
-  const showPreviewCard = panelState.startsWith('PREVIEW')
-  const showRouteSection = ['ROUTING', 'ROUTE_CALCULATED', 'PREVIEW_ROUTING', 'PREVIEW_CALCULATED'].includes(panelState) || !!pendingDestination
-  const showManeuvers = panelState === 'ROUTE_CALCULATED' || panelState === 'PREVIEW_CALCULATED'
-  const showEmptyState = panelState === 'IDLE' && !pendingDestination
-
-  // Routes tab content - now state-driven
-  const routesContent = (
-    <>
-      <SearchBar />
-
-      {/* Preview card when place is selected */}
-      {showPreviewCard && selectedPlace && (
-        <div className="mt-3">
-          <PlaceCard
-            place={selectedPlace}
-            variant="preview"
-            expanded={true}
-            onClose={clearSelectedPlace}
-          />
-        </div>
-      )}
-
-      {/* Route section with stops */}
-      {showRouteSection && (
-        <>
-          <div className="mt-3">
-            <StopList />
-          </div>
-
-          <div className="mt-3 flex flex-col gap-2">
-            <ModeSelector />
-            {showOptimize && (
-              <button
-                onClick={handleOptimize}
-                disabled={optimizing || routeLoading}
-                className="navi-btn-secondary w-full"
-              >
-                {optimizing ? 'Optimizing...' : 'Optimize stop order'}
-              </button>
-            )}
-            {pendingDestination && stops.length === 0 && (
-              <button
-                onClick={clearPendingDestination}
-                className="navi-btn-secondary w-full"
-              >
-                Cancel
-              </button>
-            )}
-          </div>
-        </>
-      )}
-
-      {/* Maneuvers when route is calculated */}
-      {showManeuvers && (route || routeLoading || routeError) && (
-        <div className="mt-3">
-          <ManeuverList onManeuverClick={onManeuverClick} />
-        </div>
-      )}
-
-      {/* Empty state */}
-      {showEmptyState && (
-        <div className="mt-6 text-center text-xs" style={{ color: 'var(--text-tertiary)' }}>
-          <p>Search or tap the map to explore</p>
-        </div>
-      )}
-    </>
-  )
-
-  const content = (
-    <>
-      {showContacts && (
-        <div className="navi-tab-bar mb-3">
-          <button
-            className={`navi-tab ${activeTab === 'routes' ? 'navi-tab-active' : ''}`}
-            onClick={() => setActiveTab('routes')}
-          >
-            Routes
-          </button>
-          <button
-            className={`navi-tab ${activeTab === 'contacts' ? 'navi-tab-active' : ''}`}
-            onClick={() => setActiveTab('contacts')}
-          >
-            Contacts
-          </button>
-        </div>
-      )}
-
-      {(!showContacts || activeTab === 'routes') ? routesContent : <ContactList />}
-    </>
-  )
-
-  const header = (
-    <div className="flex items-center justify-between mb-3">
-      <h1 className="text-md font-semibold" style={{ color: 'var(--accent)' }}>Navi</h1>
-      <div className="flex items-center gap-1">
-        {auth.loaded && (
-          auth.authenticated ? (
-            <button
-              onClick={handleLogout}
-              className="flex items-center gap-1 px-2 py-1 rounded text-xs"
-              style={{ color: 'var(--text-tertiary)' }}
-              title={`Logged in as ${auth.username}. Click to log out.`}
-            >
-              <span className="hidden sm:inline">{auth.username}</span>
-              <LogOut size={14} />
-            </button>
-          ) : (
-            <button
-              onClick={handleLogin}
-              className="flex items-center gap-1 px-2 py-1 rounded text-xs"
-              style={{ color: 'var(--accent)' }}
-              title="Log in"
-            >
-              <LogIn size={14} />
-              <span>Log in</span>
-            </button>
-          )
-        )}
-        <ThemePicker />
-      </div>
-    </div>
-  )
-
-  // Desktop: side panel (now 360px to accommodate PlaceCard)
-  if (!isMobile) {
-    return (
-      <div
-        className="absolute top-0 left-0 z-10 h-full overflow-y-auto p-4 flex flex-col"
-        style={{
-          width: '400px',
-          background: 'var(--bg-raised)',
-          borderRight: '1px solid var(--border)',
-        }}
-      >
-        {header}
-        {content}
-      </div>
-    )
-  }
-
-  // Mobile: bottom sheet
-  const sheetHeights = {
-    collapsed: 'h-12',
-    half: 'h-[45vh]',
-    full: 'h-[85vh]',
-  }
-
-  return (
-    <div
-      ref={sheetRef}
-      className={`absolute bottom-0 left-0 right-0 z-10 rounded-t-2xl transition-all duration-200 ${sheetHeights[sheetState]}`}
-      style={{
-        background: 'var(--bg-raised)',
-        borderTop: '1px solid var(--border)',
-      }}
-    >
-      {/* Drag handle */}
-      <div
-        className="flex justify-center py-2 cursor-grab"
-        onTouchStart={handleTouchStart}
-        onTouchEnd={handleTouchEnd}
-        onClick={() => {
-          if (sheetState === 'collapsed') setSheetState('half')
-          else if (sheetState === 'half') setSheetState('full')
-          else setSheetState('half')
-        }}
-      >
-        <div className="w-10 h-1 rounded-full" style={{ background: 'var(--border)' }} />
-      </div>
-
-      {sheetState !== 'collapsed' && (
-        <div className="px-4 pb-4 overflow-y-auto overflow-x-hidden h-[calc(100%-2rem)]" style={{ paddingBottom: 'max(1rem, env(safe-area-inset-bottom))' }}>
-          {header}
-          {content}
-        </div>
-      )}
-    </div>
-  )
-}
+import { useRef, useCallback, useEffect, useState } from 'react'
+import { LogIn, LogOut, Footprints, Bike, Car, Shield, AlertTriangle, Zap, X, MapPin } from 'lucide-react'
+import ThemePicker from './ThemePicker'
+import { useStore, usePanelState } from '../store'
+import { hasFeature } from '../config'
+import SearchBar from './SearchBar'
+import ManeuverList from './ManeuverList'
+import ContactList from './ContactList'
+import { PlaceCard } from './PlaceCard'
+
+const TRAVEL_MODES = [
+  { id: 'foot', label: 'Foot', Icon: Footprints },
+  { id: 'mtb', label: 'MTB', Icon: Bike },
+  { id: 'atv', label: 'ATV', Icon: Car },
+  { id: 'vehicle', label: '4x4', Icon: Car },
+]
+
+const BOUNDARY_MODES = [
+  { id: 'strict', label: 'Strict', Icon: Shield, title: 'Avoid barriers' },
+  { id: 'pragmatic', label: 'Cross', Icon: AlertTriangle, title: 'Cross with penalty' },
+  { id: 'emergency', label: 'Ignore', Icon: Zap, title: 'Ignore barriers' },
+]
+
+export default function Panel({ onClearRoute }) {
+  const selectedPlace = useStore((s) => s.selectedPlace)
+  const clearSelectedPlace = useStore((s) => s.clearSelectedPlace)
+  const routeStart = useStore((s) => s.routeStart)
+  const routeEnd = useStore((s) => s.routeEnd)
+  const routeMode = useStore((s) => s.routeMode)
+  const boundaryMode = useStore((s) => s.boundaryMode)
+  const routeResult = useStore((s) => s.routeResult)
+  const routeLoading = useStore((s) => s.routeLoading)
+  const setRouteMode = useStore((s) => s.setRouteMode)
+  const setBoundaryMode = useStore((s) => s.setBoundaryMode)
+  const clearRoute = useStore((s) => s.clearRoute)
+  const sheetState = useStore((s) => s.sheetState)
+  const setSheetState = useStore((s) => s.setSheetState)
+  const activeTab = useStore((s) => s.activeTab)
+  const auth = useStore((s) => s.auth)
+  const setActiveTab = useStore((s) => s.setActiveTab)
+
+  const panelState = usePanelState()
+
+  const [isMobile, setIsMobile] = useState(false)
+  const sheetRef = useRef(null)
+  const dragStartY = useRef(0)
+  const dragStartState = useRef('half')
+
+  const showContacts = hasFeature('has_contacts') && auth.authenticated
+
+  useEffect(() => {
+    const check = () => setIsMobile(window.innerWidth < 768)
+    check()
+    window.addEventListener('resize', check)
+    return () => window.removeEventListener('resize', check)
+  }, [])
+
+  const handleLogin = () => { window.location.href = '/outpost.goauthentik.io/start?rd=%2F' }
+  const handleLogout = () => { window.location.href = 'https://auth.echo6.co/if/flow/default-invalidation-flow/?next=https://navi.echo6.co/' }
+
+  const handleTouchStart = useCallback((e) => {
+    dragStartY.current = e.touches[0].clientY
+    dragStartState.current = sheetState
+  }, [sheetState])
+
+  const handleTouchEnd = useCallback((e) => {
+    const deltaY = e.changedTouches[0].clientY - dragStartY.current
+    if (Math.abs(deltaY) < 30) return
+    if (deltaY < 0) {
+      if (dragStartState.current === 'collapsed') setSheetState('half')
+      else if (dragStartState.current === 'half') setSheetState('full')
+    } else {
+      if (dragStartState.current === 'full') setSheetState('half')
+      else if (dragStartState.current === 'half') setSheetState('collapsed')
+    }
+  }, [setSheetState])
+
+  const handleClearRoute = () => {
+    clearRoute()
+    onClearRoute?.()
+  }
+
+  const showPreviewCard = panelState.startsWith('PREVIEW')
+  const hasRoutePoints = routeStart || routeEnd
+  const showRouteSection = hasRoutePoints || routeResult || routeLoading
+  const showEmptyState = panelState === 'IDLE' && !hasRoutePoints
+
+  const routesContent = (
+    <>
+      <SearchBar />
+
+      {showPreviewCard && selectedPlace && (
+        <div className="mt-3">
+          <PlaceCard
+            place={selectedPlace}
+            variant="preview"
+            expanded={true}
+            onClose={clearSelectedPlace}
+          />
+        </div>
+      )}
+
+      {showRouteSection && (
+        <div className="mt-3">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
+              Route
+            </span>
+            <button
+              onClick={handleClearRoute}
+              className="p-1 rounded hover:bg-[var(--bg-overlay)]"
+              title="Clear route"
+            >
+              <X size={14} style={{ color: 'var(--text-tertiary)' }} />
+            </button>
+          </div>
+
+          <div className="flex flex-col gap-1 mb-3 text-xs">
+            <div className="flex items-center gap-2">
+              <MapPin size={12} style={{ color: '#22c55e' }} />
+              <span style={{ color: routeStart ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
+                {routeStart?.name || 'Right-click to set start'}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <MapPin size={12} style={{ color: '#ef4444' }} />
+              <span style={{ color: routeEnd ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
+                {routeEnd?.name || 'Right-click to set destination'}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex gap-1 mb-2">
+            {TRAVEL_MODES.map((m) => {
+              const active = routeMode === m.id
+              return (
+                <button
+                  key={m.id}
+                  onClick={() => setRouteMode(m.id)}
+                  className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs rounded transition-colors"
+                  style={{
+                    background: active ? 'var(--accent-muted)' : 'var(--bg-overlay)',
+                    color: active ? 'var(--accent)' : 'var(--text-tertiary)',
+                  }}
+                  title={m.label}
+                >
+                  <m.Icon size={14} />
+                  <span className="hidden sm:inline">{m.label}</span>
+                </button>
+              )
+            })}
+          </div>
+
+          <div className="flex gap-1 mb-3">
+            {BOUNDARY_MODES.map((m) => {
+              const active = boundaryMode === m.id
+              return (
+                <button
+                  key={m.id}
+                  onClick={() => setBoundaryMode(m.id)}
+                  className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs rounded transition-colors"
+                  style={{
+                    background: active ? 'var(--accent-muted)' : 'var(--bg-overlay)',
+                    color: active ? 'var(--accent)' : 'var(--text-tertiary)',
+                  }}
+                  title={m.title}
+                >
+                  <m.Icon size={14} />
+                  <span className="hidden sm:inline">{m.label}</span>
+                </button>
+              )
+            })}
+          </div>
+
+          <ManeuverList />
+        </div>
+      )}
+
+      {showEmptyState && (
+        <div className="mt-6 text-center text-xs" style={{ color: 'var(--text-tertiary)' }}>
+          <p>Search or tap the map to explore</p>
+        </div>
+      )}
+    </>
+  )
+
+  const content = (
+    <>
+      {showContacts && (
+        <div className="navi-tab-bar mb-3">
+          <button
+            className={"navi-tab " + (activeTab === 'routes' ? 'navi-tab-active' : '')}
+            onClick={() => setActiveTab('routes')}
+          >
+            Routes
+          </button>
+          <button
+            className={"navi-tab " + (activeTab === 'contacts' ? 'navi-tab-active' : '')}
+            onClick={() => setActiveTab('contacts')}
+          >
+            Contacts
+          </button>
+        </div>
+      )}
+
+      {(!showContacts || activeTab === 'routes') ? routesContent : <ContactList />}
+    </>
+  )
+
+  const header = (
+    <div className="flex items-center justify-between mb-3">
+      <h1 className="text-md font-semibold" style={{ color: 'var(--accent)' }}>Navi</h1>
+      <div className="flex items-center gap-1">
+        {auth.loaded && (
+          auth.authenticated ? (
+            <button
+              onClick={handleLogout}
+              className="flex items-center gap-1 px-2 py-1 rounded text-xs"
+              style={{ color: 'var(--text-tertiary)' }}
+              title={"Logged in as " + auth.username + ". Click to log out."}
+            >
+              <span className="hidden sm:inline">{auth.username}</span>
+              <LogOut size={14} />
+            </button>
+          ) : (
+            <button
+              onClick={handleLogin}
+              className="flex items-center gap-1 px-2 py-1 rounded text-xs"
+              style={{ color: 'var(--accent)' }}
+              title="Log in"
+            >
+              <LogIn size={14} />
+              <span>Log in</span>
+            </button>
+          )
+        )}
+        <ThemePicker />
+      </div>
+    </div>
+  )
+
+  if (!isMobile) {
+    return (
+      <div
+        className="absolute top-0 left-0 z-10 h-full overflow-y-auto p-4 flex flex-col"
+        style={{
+          width: '400px',
+          background: 'var(--bg-raised)',
+          borderRight: '1px solid var(--border)',
+        }}
+      >
+        {header}
+        {content}
+      </div>
+    )
+  }
+
+  const sheetHeights = {
+    collapsed: 'h-12',
+    half: 'h-[45vh]',
+    full: 'h-[85vh]',
+  }
+
+  return (
+    <div
+      ref={sheetRef}
+      className={"absolute bottom-0 left-0 right-0 z-10 rounded-t-2xl transition-all duration-200 " + sheetHeights[sheetState]}
+      style={{
+        background: 'var(--bg-raised)',
+        borderTop: '1px solid var(--border)',
+      }}
+    >
+      <div
+        className="flex justify-center py-2 cursor-grab"
+        onTouchStart={handleTouchStart}
+        onTouchEnd={handleTouchEnd}
+        onClick={() => {
+          if (sheetState === 'collapsed') setSheetState('half')
+          else if (sheetState === 'half') setSheetState('full')
+          else setSheetState('half')
+        }}
+      >
+        <div className="w-10 h-1 rounded-full" style={{ background: 'var(--border)' }} />
+      </div>
+
+      {sheetState !== 'collapsed' && (
+        <div className="px-4 pb-4 overflow-y-auto overflow-x-hidden h-[calc(100%-2rem)]" style={{ paddingBottom: 'max(1rem, env(safe-area-inset-bottom))' }}>
+          {header}
+          {content}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/store.js b/src/store.js
index 6b7f30d..2cf78ee 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,155 +1,163 @@
-import { create } from 'zustand'
-
-export const useStore = create((set, get) => ({
-  // ── Search state ──
-  query: '',
-  results: [],
-  searchLoading: false,
-  abortController: null,
-
-  setQuery: (query) => set({ query }),
-  setResults: (results) => set({ results }),
-  setSearchLoading: (loading) => set({ searchLoading: loading }),
-  setAbortController: (ctrl) => set({ abortController: ctrl }),
-
-  // ── Stop list ──
-  stops: [],
-  // Each stop: { id, lat, lon, name, source, matchCode, isOrigin }
-
-  addStop: (stop) => {
-    const { stops } = get()
-    if (stops.length >= 10) return false
-    set({ stops: [...stops, { ...stop, id: crypto.randomUUID() }] })
-    return true
-  },
-
-  removeStop: (id) => {
-    set({ stops: get().stops.filter((s) => s.id !== id) })
-  },
-
-  reorderStops: (newStops) => set({ stops: newStops }),
-
-  clearStops: () => set({ stops: [] }),
-
-  setStops: (stops) => set({ stops }),
-
-  // ── Geolocation ──
-  userLocation: null, // { lat, lon }
-  geoPermission: 'prompt', // 'prompt' | 'granted' | 'denied'
-
-  setUserLocation: (loc) => set({ userLocation: loc }),
-  setGeoPermission: (p) => set({ geoPermission: p }),
-
-  // ── Map viewport (for search bias) ──
-  mapCenter: null, // { lat, lon, zoom }
-  setMapCenter: (center) => set({ mapCenter: center }),
-
-  // ── Mode ──
-  mode: 'auto', // 'auto' | 'pedestrian' | 'bicycle'
-  setMode: (mode) => set({ mode }),
-
-  // ── Route ──
-  route: null, // Valhalla response (trip object)
-  routeLoading: false,
-  routeError: null,
-
-  setRoute: (route) => set({ route, routeError: null }),
-  setRouteLoading: (loading) => set({ routeLoading: loading }),
-  setRouteError: (err) => set({ routeError: err, route: null }),
-  clearRoute: () => set({ route: null, routeError: null }),
-
-  // ── Place detail ──
-  selectedPlace: null, // { lat, lon, name, address, type, source, matchCode, raw, mode?, featureId?, featureLayer?, wikidata? }
-  clickMarker: null, // { lat, lon, circleRadiusPx } — visual marker for two-click selection
-  gpsOrigin: true, // whether GPS should be used as origin when available
-  pendingDestination: null, // place waiting for a starting point (GPS-denied Directions flow)
-
-  setSelectedPlace: (place) => set({ selectedPlace: place }),
-
-  // Boundary rendering function - set by MapView, called by PlaceCard
-  updateBoundary: null,
-  setUpdateBoundary: (fn) => set({ updateBoundary: fn }),
-  clearSelectedPlace: () => set({ selectedPlace: null, clickMarker: null }),
-  setClickMarker: (marker) => set({ clickMarker: marker }),
-  clearClickMarker: () => set({ clickMarker: null }),
-  setGpsOrigin: (val) => set({ gpsOrigin: val }),
-  setPendingDestination: (place) => set({ pendingDestination: place }),
-  clearPendingDestination: () => set({ pendingDestination: null }),
-
-  startDirections: (place) => {
-    const { geoPermission, stops, addStop, clearStops } = get()
-    if (geoPermission === 'granted') {
-      clearStops()
-      addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
-      set({ gpsOrigin: true, selectedPlace: null })
-    } else if (stops.length > 0) {
-      const origin = stops[0]
-      clearStops()
-      addStop({ lat: origin.lat, lon: origin.lon, name: origin.name, source: origin.source, matchCode: origin.matchCode })
-      addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
-      set({ selectedPlace: null })
-    } else {
-      // GPS denied, no stops: set pendingDestination only; origin-picker will add both
-      set({ pendingDestination: place, selectedPlace: null })
-    }
-  },
-
-  // ── UI state ──
-  sheetState: 'half', // 'collapsed' | 'half' | 'full'
-  panelOpen: true,
-  autocompleteOpen: false,
-  theme: 'dark', // 'dark' | 'light' (resolved value — what's actually applied)
-  themeOverride: null, // null | 'dark' | 'light' (manual override, persisted)
-  viewMode: (typeof localStorage !== 'undefined' && localStorage.getItem('navi-view-mode')) || 'map', // 'map' | 'satellite' | 'hybrid'
-
-  setSheetState: (s) => set({ sheetState: s }),
-  setViewMode: (mode) => {
-    set({ viewMode: mode })
-    localStorage.setItem('navi-view-mode', mode)
-  },
-  setPanelOpen: (open) => set({ panelOpen: open }),
-  setAutocompleteOpen: (open) => set({ autocompleteOpen: open }),
-  setTheme: (theme) => set({ theme }),
-  setThemeOverride: (override) => {
-    set({ themeOverride: override })
-    if (override) {
-      localStorage.setItem('navi-theme-override', override)
-    } else {
-      localStorage.removeItem('navi-theme-override')
-    }
-  },
-  // ── Auth state ──
-  auth: { authenticated: false, username: null, loaded: false },
-  setAuth: (auth) => set({ auth: { ...auth, loaded: true } }),
-
-  // ── Contacts ──
-  contacts: [],
-  contactsLoaded: false,
-  activeTab: 'routes', // 'routes' | 'contacts'
-  editingContact: null, // null=closed, {}=new, {id:N}=edit
-  pickingLocationFor: null, // form data while user picks location on map
-
-  setContacts: (c) => set({ contacts: c, contactsLoaded: true }),
-  setActiveTab: (tab) => set({ activeTab: tab }),
-  setEditingContact: (c) => set({ editingContact: c }),
-  clearEditingContact: () => set({ editingContact: null }),
-  setPickingLocationFor: (formData) => set({ pickingLocationFor: formData }),
-  clearPickingLocationFor: () => set({ pickingLocationFor: null }),
-}))
-
-// ── Panel state selector ──
-// Returns string state, prioritizing preview to allow it alongside any route state
-export const usePanelState = () => {
-  return useStore((s) => {
-    const hasPreview = !!s.selectedPlace
-    const hasRoute = !!s.route
-    const hasStops = s.stops.length >= 1
-
-    if (hasPreview && hasRoute) return "PREVIEW_CALCULATED"
-    if (hasPreview && hasStops) return "PREVIEW_ROUTING"
-    if (hasPreview) return "PREVIEW"
-    if (hasRoute) return "ROUTE_CALCULATED"
-    if (hasStops) return "ROUTING"
-    return "IDLE"
-  })
-}
+import { create } from 'zustand'
+
+export const useStore = create((set, get) => ({
+  // ── Search state ──
+  query: '',
+  results: [],
+  searchLoading: false,
+  abortController: null,
+
+  setQuery: (query) => set({ query }),
+  setResults: (results) => set({ results }),
+  setSearchLoading: (loading) => set({ searchLoading: loading }),
+  setAbortController: (ctrl) => set({ abortController: ctrl }),
+
+  // ── Geolocation ──
+  userLocation: null, // { lat, lon }
+  geoPermission: 'prompt', // 'prompt' | 'granted' | 'denied'
+
+  setUserLocation: (loc) => set({ userLocation: loc }),
+  setGeoPermission: (p) => set({ geoPermission: p }),
+
+  // ── Map viewport (for search bias) ──
+  mapCenter: null, // { lat, lon, zoom }
+  setMapCenter: (center) => set({ mapCenter: center }),
+
+  // ── Unified Route State ──
+  // Single routing system - all routes go through /api/offroute
+  routeStart: null, // { lat, lon, name }
+  routeEnd: null, // { lat, lon, name }
+  routeMode: "foot", // foot | mtb | atv | vehicle
+  boundaryMode: "strict", // strict | pragmatic | emergency
+  routeResult: null, // Response from /api/offroute
+  routeLoading: false,
+  routeError: null,
+
+  setRouteStart: (place) => set({ routeStart: place, routeResult: null, routeError: null }),
+  setRouteEnd: (place) => set({ routeEnd: place }),
+  setRouteMode: (mode) => set({ routeMode: mode }),
+  setBoundaryMode: (mode) => set({ boundaryMode: mode }),
+  setRouteResult: (result) => set({ routeResult: result, routeError: null }),
+  setRouteLoading: (loading) => set({ routeLoading: loading }),
+  setRouteError: (err) => set({ routeError: err, routeResult: null }),
+  clearRoute: () => set({
+    routeStart: null,
+    routeEnd: null,
+    routeResult: null,
+    routeError: null
+  }),
+
+  // ── Legacy compatibility (for components not yet migrated) ──
+  stops: [],
+  gpsOrigin: false,
+  pendingDestination: null,
+  route: null,
+
+  addStop: (stop) => {
+    // Legacy: just set as route end point
+    const { routeStart, setRouteEnd } = get()
+    const place = { lat: stop.lat, lon: stop.lon, name: stop.name }
+    if (!routeStart) {
+      set({ routeStart: place, stops: [{ ...stop, id: crypto.randomUUID() }] })
+    } else {
+      setRouteEnd(place)
+      set({ stops: [...get().stops, { ...stop, id: crypto.randomUUID() }] })
+    }
+    return true
+  },
+  removeStop: (id) => {
+    const { stops } = get()
+    const newStops = stops.filter((s) => s.id !== id)
+    set({ stops: newStops })
+    if (newStops.length === 0) {
+      get().clearRoute()
+    }
+  },
+  clearStops: () => set({ stops: [], routeStart: null, routeEnd: null }),
+  setStops: (stops) => set({ stops }),
+  reorderStops: (newStops) => set({ stops: newStops }),
+  setGpsOrigin: (val) => set({ gpsOrigin: val }),
+  setPendingDestination: (place) => set({ pendingDestination: place }),
+  clearPendingDestination: () => set({ pendingDestination: null }),
+
+  startDirections: (place) => {
+    // Legacy: set as destination
+    const { routeStart, setRouteEnd, clearRoute } = get()
+    clearRoute()
+    set({
+      routeEnd: { lat: place.lat, lon: place.lon, name: place.name },
+      stops: [{ ...place, id: crypto.randomUUID() }],
+      selectedPlace: null
+    })
+  },
+
+  // ── Place detail ──
+  selectedPlace: null,
+  clickMarker: null,
+
+  setSelectedPlace: (place) => set({ selectedPlace: place }),
+  updateBoundary: null,
+  setUpdateBoundary: (fn) => set({ updateBoundary: fn }),
+  clearSelectedPlace: () => set({ selectedPlace: null, clickMarker: null }),
+  setClickMarker: (marker) => set({ clickMarker: marker }),
+  clearClickMarker: () => set({ clickMarker: null }),
+
+  // ── UI state ──
+  sheetState: 'half',
+  panelOpen: true,
+  autocompleteOpen: false,
+  theme: 'dark',
+  themeOverride: null,
+  viewMode: (typeof localStorage !== 'undefined' && localStorage.getItem('navi-view-mode')) || 'map',
+
+  setSheetState: (s) => set({ sheetState: s }),
+  setViewMode: (mode) => {
+    set({ viewMode: mode })
+    localStorage.setItem('navi-view-mode', mode)
+  },
+  setPanelOpen: (open) => set({ panelOpen: open }),
+  setAutocompleteOpen: (open) => set({ autocompleteOpen: open }),
+  setTheme: (theme) => set({ theme }),
+  setThemeOverride: (override) => {
+    set({ themeOverride: override })
+    if (override) {
+      localStorage.setItem('navi-theme-override', override)
+    } else {
+      localStorage.removeItem('navi-theme-override')
+    }
+  },
+
+  // ── Auth state ──
+  auth: { authenticated: false, username: null, loaded: false },
+  setAuth: (auth) => set({ auth: { ...auth, loaded: true } }),
+
+  // ── Contacts ──
+  contacts: [],
+  contactsLoaded: false,
+  activeTab: 'routes',
+  editingContact: null,
+  pickingLocationFor: null,
+
+  setContacts: (c) => set({ contacts: c, contactsLoaded: true }),
+  setActiveTab: (tab) => set({ activeTab: tab }),
+  setEditingContact: (c) => set({ editingContact: c }),
+  clearEditingContact: () => set({ editingContact: null }),
+  setPickingLocationFor: (formData) => set({ pickingLocationFor: formData }),
+  clearPickingLocationFor: () => set({ pickingLocationFor: null }),
+}))
+
+// ── Panel state selector ──
+export const usePanelState = () => {
+  return useStore((s) => {
+    const hasPreview = !!s.selectedPlace
+    const hasRoute = !!s.routeResult
+    const hasRoutePoints = !!s.routeStart || !!s.routeEnd
+
+    if (hasPreview && hasRoute) return "PREVIEW_CALCULATED"
+    if (hasPreview && hasRoutePoints) return "PREVIEW_ROUTING"
+    if (hasPreview) return "PREVIEW"
+    if (hasRoute) return "ROUTE_CALCULATED"
+    if (hasRoutePoints) return "ROUTING"
+    return "IDLE"
+  })
+}