feat: search, multi-stop routing, and route display

Full navigation UI with:
- Search bar with 150ms debounced autocomplete from /api/geocode
- Keyboard navigation (arrow keys, Enter, Escape)
- Exact match badge for verified address results
- Multi-stop list with drag-to-reorder (dnd-kit)
- 10-stop cap with disabled state
- Mode selector (drive/walk/bike)
- Valhalla route display with per-leg color polyline
- Maneuver list with instructions, distance, time remaining
- Click maneuver to fly map to that point
- Optimize stops button (3+ stops, uses /optimized_route)
- Responsive: side panel (desktop ≥768px), bottom sheet (mobile)
- Stop pins: green origin, red destination, blue intermediate
- Pin popup with remove button
- Geolocation permission requested on first route, not on load
- Error handling for unroutable pairs
- nginx proxy for /api/ and /valhalla/ endpoints

Dependencies added: zustand, @dnd-kit/core, @dnd-kit/sortable,
@dnd-kit/utilities

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/ModeSelector.jsx

@@ -0,0 +1,33 @@
+import { useStore } from '../store'
+
+const MODES = [
+  { id: 'auto', label: 'Drive', icon: '🚗' },
+  { id: 'pedestrian', label: 'Walk', icon: '🚶' },
+  { id: 'bicycle', label: 'Bike', icon: '🚴' },
+]
+
+export default function ModeSelector() {
+  const mode = useStore((s) => s.mode)
+  const setMode = useStore((s) => s.setMode)
+
+  return (
+    <div className="flex gap-1" role="radiogroup" aria-label="Travel mode">
+      {MODES.map((m) => (
+        <button
+          key={m.id}
+          role="radio"
+          aria-checked={mode === m.id}
+          onClick={() => setMode(m.id)}
+          className={`flex-1 py-1.5 px-2 rounded text-xs font-medium transition-colors ${
+            mode === m.id
+              ? 'bg-cyan-600 text-white'
+              : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+          }`}
+        >
+          <span className="mr-1">{m.icon}</span>
+          {m.label}
+        </button>
+      ))}
+    </div>
+  )
+}