feat: unify routes and maps experience

lib/features/map/map_screen.dart

@@ -4,6 +4,8 @@ import 'package:drift/drift.dart' as drift;
 import 'package:geolocator/geolocator.dart';
 import 'package:intl/intl.dart';
 import '../../database/database.dart';
+import '../../core/responsive/responsive_layout.dart';
+import '../../core/theme/theme_extensions.dart';
 import '../../services/location_service.dart';
 import '../../services/map/map_provider_interface.dart';
 import '../../services/map/map_providers.dart';
@@ -505,121 +507,326 @@ class _MapScreenState extends ConsumerState<MapScreen> {
 
   @override
   Widget build(BuildContext context) {
-    if (_isLoadingHistory) return const Scaffold(body: Center(child: CircularProgressIndicator()));
+    if (_isLoadingHistory) {
+      return const Scaffold(body: Center(child: CircularProgressIndicator()));
+    }
     final activeProviderType = ref.watch(mapProviderTypeNotifierProvider);
     final isFollowMode = ref.watch(mapFollowStateProvider);
-    final isLandscape = MediaQuery.of(context).orientation == Orientation.landscape;
+    final colors = context.motorColors;
+    final theme = Theme.of(context);
 
-    if (widget.rideId != null) {
+    return ResponsiveLayout(
-      final polylines = _buildPolylines();
+      builder: (context, responsive) {
-      return Scaffold(
+        final isShortLandscape = responsive.isLandscape && responsive.height < 450;
-        appBar: AppBar(
+
-          title: Text('Ride #${widget.rideId} Multi-Layer Map'),
+        if (widget.rideId != null) {
-          actions: [IconButton(
+          final polylines = _buildPolylines();
-            tooltip: 'Switch Map Provider',
+          return Scaffold(
-            icon: Icon(activeProviderType == AppMapType.openStreetMap ? Icons.map : Icons.map_outlined),
+            appBar: AppBar(
-            onPressed: () {
+              title: Text('Ride #${widget.rideId} Multi-Layer Map'),
-              final nextType = activeProviderType == AppMapType.openStreetMap ? AppMapType.googleMaps : AppMapType.openStreetMap;
+              actions: [
-              ref.read(mapProviderTypeNotifierProvider.notifier).setMapProviderType(nextType);
+                IconButton(
-            },
+                  tooltip: 'Switch Map Provider',
-          )],
+                  icon: Icon(
-        ),
+                    activeProviderType == AppMapType.openStreetMap
-        body: LayoutBuilder(builder: (context, constraints) => Stack(fit: StackFit.expand, children: [
+                        ? Icons.map
-          Positioned.fill(child: SizedBox(
+                        : Icons.map_outlined,
-            width: constraints.maxWidth, height: constraints.maxHeight,
+                  ),
-            child: UnifiedMapView(
+                  onPressed: () {
-              key: ValueKey('preview_map_${constraints.maxWidth.toInt()}x${constraints.maxHeight.toInt()}'),
+                    final nextType =
-              center: _initialCenter ?? _fallbackLocation, zoom: 15.0,
+                        activeProviderType == AppMapType.openStreetMap
-              polylines: polylines, markers: _getFilteredMarkers(),
+                            ? AppMapType.googleMaps
+                            : AppMapType.openStreetMap;
+                    ref
+                        .read(mapProviderTypeNotifierProvider.notifier)
+                        .setMapProviderType(nextType);
+                  },
+                ),
+              ],
             ),
-          )),
+            body: Stack(
-          if (_routePoints.isNotEmpty) _buildMultiLayerFilterOverlay(),
+              fit: StackFit.expand,
-          if (_showSpeedHeatmap) _buildSpeedLegend(),
+              children: [
-          if (_routePoints.isEmpty) Positioned(top: 16, left: 20, right: 20, child: Container(
+                Positioned.fill(
-            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+                  child: UnifiedMapView(
-            decoration: BoxDecoration(color: const Color(0xFF0D0D0D).withValues(alpha: 0.9), borderRadius: BorderRadius.circular(12), border: Border.all(color: const Color(0xFF00E5FF).withValues(alpha: 0.4))),
+                    key: ValueKey('preview_map_${widget.rideId}'),
-            child: const Row(children: [Icon(Icons.info_outline, color: Color(0xFF00E5FF), size: 20), SizedBox(width: 10), Expanded(child: Text('No GPS breadcrumbs were recorded during this test session.', style: TextStyle(color: Colors.white70, fontSize: 12, fontFamily: 'Inter')))]),
+                    center: _initialCenter ?? _fallbackLocation,
-          )),
+                    zoom: 15.0,
-        ])),
+                    polylines: polylines,
-      );
+                    markers: _getFilteredMarkers(),
-    }
+                  ),
+                ),
+                if (_routePoints.isNotEmpty) _buildMultiLayerFilterOverlay(colors),
+                if (_showSpeedHeatmap) _buildSpeedLegend(colors),
+                if (_routePoints.isEmpty)
+                  Positioned(
+                    top: 16,
+                    left: 20,
+                    right: 20,
+                    child: Container(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: 16,
+                        vertical: 12,
+                      ),
+                      decoration: BoxDecoration(
+                        color: colors.surfaceContainer.withValues(alpha: 0.95),
+                        borderRadius: BorderRadius.circular(12),
+                        border: Border.all(
+                          color: colors.cyberCyan.withValues(alpha: 0.4),
+                        ),
+                      ),
+                      child: Row(
+                        children: [
+                          Icon(
+                            Icons.info_outline,
+                            color: colors.cyberCyan,
+                            size: 20,
+                          ),
+                          const SizedBox(width: 10),
+                          Expanded(
+                            child: Text(
+                              'No GPS breadcrumbs were recorded during this test session.',
+                              style: TextStyle(
+                                color: theme.colorScheme.onSurface.withValues(alpha: 0.7),
+                                fontSize: 12,
+                                fontFamily: 'Inter',
+                              ),
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+              ],
+            ),
+          );
+        }
 
-    final locationAsync = ref.watch(locationStreamProvider);
+        final locationAsync = ref.watch(locationStreamProvider);
-    final liveAlertsAsync = ref.watch(activeAlertsStreamProvider);
+        final liveAlertsAsync = ref.watch(activeAlertsStreamProvider);
-    final currentPos = locationAsync.when(data: (pos) => AppLatLng(pos.latitude, pos.longitude), error: (_, _) => _fallbackLocation, loading: () => _fallbackLocation);
+        final currentPos = locationAsync.when(
-    final currentHeading = locationAsync.when(data: (pos) => pos.heading, error: (_, _) => 0.0, loading: () => 0.0);
+          data: (pos) => AppLatLng(pos.latitude, pos.longitude),
-    final motorcycleMarker = AppMapMarker(id: 'motorcycle_live', position: currentPos, heading: currentHeading, iconWidget: const Icon(Icons.navigation, color: Colors.cyanAccent, size: 40));
+          error: (_, _) => _fallbackLocation,
-    final List<AppMapMarker> mapMarkers = [motorcycleMarker];
+          loading: () => _fallbackLocation,
-    final liveAlerts = liveAlertsAsync.value ?? [];
+        );
-    for (var alert in liveAlerts) {
+        final currentHeading = locationAsync.when(
-      mapMarkers.add(AppMapMarker(
+          data: (pos) => pos.heading,
-        id: 'alert_${alert.providerId}_${alert.id}', position: AppLatLng(alert.latitude, alert.longitude), heading: alert.heading ?? 0.0, label: alert.category.displayName,
+          error: (_, _) => 0.0,
-        iconWidget: Container(padding: const EdgeInsets.all(6), decoration: BoxDecoration(color: alert.category.color.withValues(alpha: 0.9), shape: BoxShape.circle, boxShadow: const [BoxShadow(color: Colors.black54, blurRadius: 4)]), child: Icon(alert.category.icon, color: Colors.black, size: 22)),
+          loading: () => 0.0,
-        onTap: () => _showRoadAlertDetails(alert),
+        );
-      ));
+        final motorcycleMarker = AppMapMarker(
-    }
+          id: 'motorcycle_live',
-    return Scaffold(
+          position: currentPos,
-      extendBodyBehindAppBar: isLandscape,
+          heading: currentHeading,
-      appBar: AppBar(
+          iconWidget: Icon(
-        title: const Text('Live Map'), backgroundColor: isLandscape ? Colors.black.withValues(alpha: 0.6) : null, elevation: isLandscape ? 0 : null,
+            Icons.navigation,
-        actions: [PopupMenuButton<AppMapType>(
+            color: colors.cyberCyan,
-          icon: const Icon(Icons.layers),
+            size: 40,
-          onSelected: (type) => ref.read(mapProviderTypeNotifierProvider.notifier).setMapProviderType(type),
+          ),
-          itemBuilder: (context) => const [
+        );
-            PopupMenuItem(value: AppMapType.openStreetMap, child: Text('OpenStreetMap / Tactical (Primary)')),
+        final List<AppMapMarker> mapMarkers = [motorcycleMarker];
-            PopupMenuItem(value: AppMapType.googleMaps, child: Text('Google Maps')),
+        final liveAlerts = liveAlertsAsync.value ?? [];
-          ],
+        for (var alert in liveAlerts) {
-        )],
+          mapMarkers.add(
-      ),
+            AppMapMarker(
-      body: LayoutBuilder(builder: (context, constraints) => Stack(fit: StackFit.expand, children: [
+              id: 'alert_${alert.providerId}_${alert.id}',
-        Positioned.fill(child: SizedBox(width: constraints.maxWidth, height: constraints.maxHeight, child: UnifiedMapView(
+              position: AppLatLng(alert.latitude, alert.longitude),
-          key: ValueKey('live_map_${constraints.maxWidth.toInt()}x${constraints.maxHeight.toInt()}'), center: currentPos, zoom: 17.0, markers: mapMarkers,
+              heading: alert.heading ?? 0.0,
-        ))),
+              label: alert.category.displayName,
-        if (!isFollowMode) Positioned(bottom: 24, right: 24, child: FloatingActionButton.extended(
+              iconWidget: Container(
-          backgroundColor: Colors.cyanAccent, foregroundColor: Colors.black, icon: const Icon(Icons.my_location), label: const Text('RECENTER', style: TextStyle(fontWeight: FontWeight.bold)),
+                padding: const EdgeInsets.all(6),
-          onPressed: () => ref.read(mapFollowStateProvider.notifier).recenter(),
+                decoration: BoxDecoration(
-        )),
+                  color: alert.category.color.withValues(alpha: 0.9),
-      ])),
+                  shape: BoxShape.circle,
+                  boxShadow: const [
+                    BoxShadow(color: Colors.black54, blurRadius: 4),
+                  ],
+                ),
+                child: Icon(
+                  alert.category.icon,
+                  color: Colors.black,
+                  size: 22,
+                ),
+              ),
+              onTap: () => _showRoadAlertDetails(alert),
+            ),
+          );
+        }
+
+        return Scaffold(
+          extendBodyBehindAppBar: isShortLandscape,
+          appBar: AppBar(
+            title: const Text('Live Map'),
+            backgroundColor: isShortLandscape
+                ? colors.surfaceContainer.withValues(alpha: 0.75)
+                : null,
+            elevation: isShortLandscape ? 0 : null,
+            actions: [
+              PopupMenuButton<AppMapType>(
+                icon: const Icon(Icons.layers),
+                onSelected: (type) => ref
+                    .read(mapProviderTypeNotifierProvider.notifier)
+                    .setMapProviderType(type),
+                itemBuilder: (context) => const [
+                  PopupMenuItem(
+                    value: AppMapType.openStreetMap,
+                    child: Text('OpenStreetMap / Tactical (Primary)'),
+                  ),
+                  PopupMenuItem(
+                    value: AppMapType.googleMaps,
+                    child: Text('Google Maps'),
+                  ),
+                ],
+              ),
+            ],
+          ),
+          body: Stack(
+            fit: StackFit.expand,
+            children: [
+              Positioned.fill(
+                child: UnifiedMapView(
+                  key: const ValueKey('live_map_view'),
+                  center: currentPos,
+                  zoom: 17.0,
+                  markers: mapMarkers,
+                ),
+              ),
+              if (!isFollowMode)
+                Positioned(
+                  bottom: 24,
+                  right: 24,
+                  child: FloatingActionButton.extended(
+                    backgroundColor: colors.cyberCyan,
+                    foregroundColor: Colors.black,
+                    icon: const Icon(Icons.my_location),
+                    label: const Text(
+                      'RECENTER',
+                      style: TextStyle(fontWeight: FontWeight.bold),
+                    ),
+                    onPressed: () =>
+                        ref.read(mapFollowStateProvider.notifier).recenter(),
+                  ),
+                ),
+            ],
+          ),
+        );
+      },
     );
   }
 
-  Widget _buildMultiLayerFilterOverlay() {
+  Widget _buildMultiLayerFilterOverlay(MotorSignalThemeColors colors) {
-    return Positioned(top: 10, left: 10, right: 10, child: Card(
+    return Positioned(
-      color: Colors.black.withValues(alpha: 0.8), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12), side: const BorderSide(color: Color(0xFF1F1F1F))),
+      top: 10,
-      child: Padding(padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), child: SingleChildScrollView(scrollDirection: Axis.horizontal, child: Row(children: [
+      left: 10,
-        FilterChip(label: const Text('Route'), selected: _showRoute, onSelected: (v) => setState(() => _showRoute = v), selectedColor: const Color(0xFF00E5FF).withValues(alpha: 0.35)),
+      right: 10,
-        const SizedBox(width: 6),
+      child: Card(
-        FilterChip(label: const Text('Speed'), selected: _showSpeedHeatmap, onSelected: (v) => setState(() => _showSpeedHeatmap = v), selectedColor: const Color(0xFFE040FB).withValues(alpha: 0.35)),
+        color: colors.surfaceContainer.withValues(alpha: 0.85),
-        const SizedBox(width: 6),
+        shape: RoundedRectangleBorder(
-        FilterChip(label: const Text('Accel'), selected: _showHardAccel, onSelected: (v) => setState(() => _showHardAccel = v), selectedColor: const Color(0xFF76FF03).withValues(alpha: 0.35)),
+          borderRadius: BorderRadius.circular(12),
-        const SizedBox(width: 6),
+          side: BorderSide(color: colors.outlineVariant),
-        FilterChip(label: const Text('Braking'), selected: _showHardBraking, onSelected: (v) => setState(() => _showHardBraking = v), selectedColor: const Color(0xFFFF5252).withValues(alpha: 0.35)),
+        ),
-        const SizedBox(width: 6),
+        child: Padding(
-        FilterChip(label: const Text('Cornering'), selected: _showCornering, onSelected: (v) => setState(() => _showCornering = v), selectedColor: const Color(0xFF00E5FF).withValues(alpha: 0.35)),
+          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
-      ]))),
+          child: SingleChildScrollView(
-    ));
+            scrollDirection: Axis.horizontal,
+            child: Row(
+              children: [
+                FilterChip(
+                  label: const Text('Route'),
+                  selected: _showRoute,
+                  onSelected: (v) => setState(() => _showRoute = v),
+                  selectedColor: colors.cyberCyan.withValues(alpha: 0.35),
+                ),
+                const SizedBox(width: 6),
+                FilterChip(
+                  label: const Text('Speed'),
+                  selected: _showSpeedHeatmap,
+                  onSelected: (v) => setState(() => _showSpeedHeatmap = v),
+                  selectedColor: const Color(0xFFE040FB).withValues(alpha: 0.35),
+                ),
+                const SizedBox(width: 6),
+                FilterChip(
+                  label: const Text('Accel'),
+                  selected: _showHardAccel,
+                  onSelected: (v) => setState(() => _showHardAccel = v),
+                  selectedColor: colors.launchGreen.withValues(alpha: 0.35),
+                ),
+                const SizedBox(width: 6),
+                FilterChip(
+                  label: const Text('Braking'),
+                  selected: _showHardBraking,
+                  onSelected: (v) => setState(() => _showHardBraking = v),
+                  selectedColor: colors.raceRed.withValues(alpha: 0.35),
+                ),
+                const SizedBox(width: 6),
+                FilterChip(
+                  label: const Text('Cornering'),
+                  selected: _showCornering,
+                  onSelected: (v) => setState(() => _showCornering = v),
+                  selectedColor: colors.cyberCyan.withValues(alpha: 0.35),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
   }
 
-  Widget _buildSpeedLegend() => Positioned(bottom: 20, left: 14, child: Container(
+  Widget _buildSpeedLegend(MotorSignalThemeColors colors) => Positioned(
-    padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
+        bottom: 20,
-    decoration: BoxDecoration(color: Colors.black.withValues(alpha: 0.85), borderRadius: BorderRadius.circular(8), border: Border.all(color: const Color(0xFF222222))),
+        left: 14,
-    child: Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [
+        child: Container(
-      const Text('SPEED RANGES (MPH)', style: TextStyle(fontFamily: 'JetBrains Mono', fontSize: 8.5, fontWeight: FontWeight.bold, color: Colors.white70)),
+          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
-      const SizedBox(height: 4),
+          decoration: BoxDecoration(
-      _buildLegendItem('0–25', const Color(0xFF00E5FF)),
+            color: colors.surfaceContainer.withValues(alpha: 0.9),
-      _buildLegendItem('25–50', const Color(0xFF2979FF)),
+            borderRadius: BorderRadius.circular(8),
-      _buildLegendItem('50–75', const Color(0xFFFFD600)),
+            border: Border.all(color: colors.outlineVariant),
-      _buildLegendItem('75–100', const Color(0xFFFF6D00)),
+          ),
-      _buildLegendItem('100+', const Color(0xFFE040FB)),
+          child: Column(
-    ]),
+            crossAxisAlignment: CrossAxisAlignment.start,
-  ));
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Text(
+                'SPEED RANGES (MPH)',
+                style: TextStyle(
+                  fontFamily: 'JetBrains Mono',
+                  fontSize: 8.5,
+                  fontWeight: FontWeight.bold,
+                  color: colors.cyberCyan,
+                ),
+              ),
+              const SizedBox(height: 4),
+              _buildLegendItem('0–25', const Color(0xFF00E5FF)),
+              _buildLegendItem('25–50', const Color(0xFF2979FF)),
+              _buildLegendItem('50–75', const Color(0xFFFFD600)),
+              _buildLegendItem('75–100', const Color(0xFFFF6D00)),
+              _buildLegendItem('100+', const Color(0xFFE040FB)),
+            ],
+          ),
+        ),
+      );
 
   Widget _buildLegendItem(String label, Color color) => Padding(
-    padding: const EdgeInsets.symmetric(vertical: 1.5),
+        padding: const EdgeInsets.symmetric(vertical: 1.5),
-    child: Row(mainAxisSize: MainAxisSize.min, children: [
+        child: Row(
-      Container(width: 10, height: 10, decoration: BoxDecoration(color: color, shape: BoxShape.circle)),
+          mainAxisSize: MainAxisSize.min,
-      const SizedBox(width: 6),
+          children: [
-      Text(label, style: const TextStyle(fontFamily: 'JetBrains Mono', fontSize: 9, color: Colors.white)),
+            Container(
-    ]),
+              width: 10,
-  );
+              height: 10,
+              decoration: BoxDecoration(color: color, shape: BoxShape.circle),
+            ),
+            const SizedBox(width: 6),
+            Text(
+              label,
+              style: const TextStyle(
+                fontFamily: 'JetBrains Mono',
+                fontSize: 9,
+                fontWeight: FontWeight.w600,
+              ),
+            ),
+          ],
+        ),
+      );
 }

lib/services/routes/navigation_handoff.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:url_launcher/url_launcher.dart';
+import '../../core/theme/theme_extensions.dart';
 import 'route_models.dart';
 
 /// Target navigation application for handoff.
@@ -67,9 +68,10 @@ class NavigationHandoffService {
     required double longitude,
     required String displayName,
   }) {
+    final colors = context.motorColors;
     showModalBottomSheet(
       context: context,
-      backgroundColor: const Color(0xFF1B1E26),
+      backgroundColor: colors.surfaceContainer,
       shape: const RoundedRectangleBorder(
         borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
       ),
@@ -83,9 +85,9 @@ class NavigationHandoffService {
               children: [
                 Row(
                   children: [
-                    const Icon(
+                    Icon(
                       Icons.navigation,
-                      color: Color(0xFF00E5FF),
+                      color: colors.cyberCyan,
                       size: 22,
                     ),
                     const SizedBox(width: 12),
@@ -93,13 +95,13 @@ class NavigationHandoffService {
                       child: Column(
                         crossAxisAlignment: CrossAxisAlignment.start,
                         children: [
-                          const Text(
+                          Text(
                             'NAVIGATION HANDOFF',
                             style: TextStyle(
                               fontSize: 11,
                               letterSpacing: 1.2,
                               fontWeight: FontWeight.w700,
-                              color: Color(0xFF00E5FF),
+                              color: colors.cyberCyan,
                             ),
                           ),
                           const SizedBox(height: 2),
@@ -169,9 +171,9 @@ class NavigationHandoffService {
                       color: Colors.white10,
                       borderRadius: BorderRadius.circular(8),
                     ),
-                    child: const Icon(
+                    child: Icon(
                       Icons.directions_car,
-                      color: Color(0xFF00E5FF),
+                      color: colors.cyberCyan,
                     ),
                   ),
                   title: const Text(

test/canonical_routes_maps_responsive_test.dart

@@ -0,0 +1,298 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:motorcycle_dash/core/theme/theme_extensions.dart';
+import 'package:motorcycle_dash/features/map/map_screen.dart';
+import 'package:motorcycle_dash/features/routes/route_detail_screen.dart';
+import 'package:motorcycle_dash/features/routes/route_planner_screen.dart';
+import 'package:motorcycle_dash/services/auth/auth_providers.dart';
+import 'package:motorcycle_dash/services/auth/auth_user.dart';
+import 'package:motorcycle_dash/services/entitlements/entitlement_providers.dart';
+import 'package:motorcycle_dash/services/map/unified_map_view.dart';
+import 'package:motorcycle_dash/services/routes/navigation_handoff.dart';
+import 'package:motorcycle_dash/services/routes/route_models.dart';
+import 'package:motorcycle_dash/services/routes/route_providers.dart';
+
+const List<Size> testViewports = [
+  Size(320, 640),
+  Size(360, 800),
+  Size(390, 844),
+  Size(412, 915),
+  Size(640, 320),
+  Size(800, 360),
+  Size(844, 390),
+  Size(768, 1024),
+  Size(1024, 768),
+];
+
+MotorSignalRoute createSampleRoute({
+  String id = 'sample-route-1',
+  String title = 'Skyline Ridge Cruise',
+  String description = 'Scenic ridge route with twisties',
+  String ownerUid = 'alice',
+  RouteVisibility visibility = RouteVisibility.public,
+  String? attachedGroupRideId,
+}) {
+  return MotorSignalRoute(
+    id: id,
+    title: title,
+    description: description,
+    ownerUid: ownerUid,
+    createdAt: DateTime(2026, 1, 1),
+    updatedAt: DateTime(2026, 1, 2),
+    visibility: visibility,
+    attachedGroupRideId: attachedGroupRideId,
+    stops: const [
+      RouteStop(
+        id: 'stop-1',
+        orderIndex: 0,
+        latitude: 37.3861,
+        longitude: -122.2641,
+        displayName: 'Alice\'s Restaurant',
+        stopType: RouteStopType.start,
+        notes: 'Meet at 9:00 AM',
+      ),
+      RouteStop(
+        id: 'stop-2',
+        orderIndex: 1,
+        latitude: 37.3200,
+        longitude: -122.2100,
+        displayName: 'Skyline Vista Point',
+        stopType: RouteStopType.scenic,
+        notes: 'Quick photo stop',
+      ),
+      RouteStop(
+        id: 'stop-3',
+        orderIndex: 2,
+        latitude: 37.2500,
+        longitude: -122.1800,
+        displayName: 'Summit Overlook',
+        stopType: RouteStopType.destination,
+        notes: 'Final regroup',
+      ),
+    ],
+  );
+}
+
+void main() {
+  group('UI-2E MapScreen Responsive Matrix', () {
+    for (final size in testViewports) {
+      testWidgets('MapScreen live mode renders cleanly at ${size.width}x${size.height}', (tester) async {
+        await tester.binding.setSurfaceSize(size);
+
+        await tester.pumpWidget(
+          ProviderScope(
+            overrides: [
+              currentUserProvider.overrideWith((ref) => const AuthUser(uid: 'alice', isAnonymous: false)),
+              isProSubscriberProvider.overrideWith((ref) => false),
+            ],
+            child: MaterialApp(
+              theme: ThemeData.dark().copyWith(
+                extensions: [MotorSignalThemeColors.dark],
+              ),
+              home: const MapScreen(),
+            ),
+          ),
+        );
+
+        await tester.pumpAndSettle();
+
+        expect(find.text('Live Map'), findsOneWidget);
+        expect(find.byType(UnifiedMapView), findsOneWidget);
+        expect(tester.takeException(), isNull);
+      });
+    }
+  });
+
+  group('UI-2E RoutePlannerScreen Responsive Matrix', () {
+    for (final size in testViewports) {
+      testWidgets('RoutePlannerScreen renders without overflow at ${size.width}x${size.height}', (tester) async {
+        await tester.binding.setSurfaceSize(size);
+
+        await tester.pumpWidget(
+          ProviderScope(
+            overrides: [
+              currentUserProvider.overrideWith((ref) => const AuthUser(uid: 'alice', isAnonymous: false)),
+              isProSubscriberProvider.overrideWith((ref) => false),
+            ],
+            child: MaterialApp(
+              theme: ThemeData.dark().copyWith(
+                extensions: [MotorSignalThemeColors.dark],
+              ),
+              home: const RoutePlannerScreen(),
+            ),
+          ),
+        );
+
+        await tester.pumpAndSettle();
+
+        expect(find.text('ROUTE PLANNER'), findsOneWidget);
+        expect(find.byKey(const ValueKey('route_planner_save_button')), findsOneWidget);
+        expect(find.byKey(const ValueKey('route_planner_add_stop_button')), findsOneWidget);
+        expect(find.byKey(const ValueKey('route_planner_current_gps_button')), findsOneWidget);
+        expect(tester.takeException(), isNull);
+      });
+    }
+
+    testWidgets('RoutePlannerScreen handles adding stops and reversing', (tester) async {
+      await tester.binding.setSurfaceSize(const Size(412, 915));
+
+      await tester.pumpWidget(
+        ProviderScope(
+          overrides: [
+            currentUserProvider.overrideWith((ref) => const AuthUser(uid: 'alice', isAnonymous: false)),
+            isProSubscriberProvider.overrideWith((ref) => false),
+          ],
+          child: MaterialApp(
+            theme: ThemeData.dark().copyWith(
+              extensions: [MotorSignalThemeColors.dark],
+            ),
+            home: const RoutePlannerScreen(),
+          ),
+        ),
+      );
+
+      await tester.pumpAndSettle();
+
+      // Add stop 1
+      await tester.tap(find.byKey(const ValueKey('route_planner_add_stop_button')));
+      await tester.pumpAndSettle();
+      var fields = find.descendant(of: find.byType(AlertDialog), matching: find.byType(TextField));
+      await tester.enterText(fields.at(0), 'Start Point');
+      await tester.enterText(fields.at(1), '37.3861');
+      await tester.enterText(fields.at(2), '-122.2641');
+      await tester.tap(find.text('ADD'));
+      await tester.pumpAndSettle();
+
+      // Add stop 2
+      await tester.tap(find.byKey(const ValueKey('route_planner_add_stop_button')));
+      await tester.pumpAndSettle();
+      fields = find.descendant(of: find.byType(AlertDialog), matching: find.byType(TextField));
+      await tester.enterText(fields.at(0), 'End Point');
+      await tester.enterText(fields.at(1), '37.2500');
+      await tester.enterText(fields.at(2), '-122.1800');
+      await tester.tap(find.text('ADD'));
+      await tester.pumpAndSettle();
+
+      expect(find.text('Start Point'), findsOneWidget);
+      expect(find.text('End Point'), findsOneWidget);
+      expect(find.text('2/25 STOPS'), findsOneWidget);
+      expect(find.byKey(const ValueKey('route_planner_reverse_button')), findsOneWidget);
+
+      // Reverse stops
+      await tester.tap(find.byKey(const ValueKey('route_planner_reverse_button')));
+      await tester.pumpAndSettle();
+
+      expect(find.text('Start Point'), findsOneWidget);
+      expect(find.text('End Point'), findsOneWidget);
+      expect(tester.takeException(), isNull);
+    });
+
+    testWidgets('RoutePlannerScreen wide layout renders split-pane', (tester) async {
+      await tester.binding.setSurfaceSize(const Size(1024, 768));
+
+      await tester.pumpWidget(
+        ProviderScope(
+          overrides: [
+            currentUserProvider.overrideWith((ref) => const AuthUser(uid: 'alice', isAnonymous: false)),
+            isProSubscriberProvider.overrideWith((ref) => false),
+          ],
+          child: MaterialApp(
+            theme: ThemeData.dark().copyWith(
+              extensions: [MotorSignalThemeColors.dark],
+            ),
+            home: const RoutePlannerScreen(),
+          ),
+        ),
+      );
+
+      await tester.pumpAndSettle();
+
+      expect(find.byKey(const ValueKey('route_planner_map_expanded')), findsOneWidget);
+      expect(find.byKey(const ValueKey('route_planner_save_button')), findsOneWidget);
+      expect(find.text('ROUTE PLANNER'), findsOneWidget);
+      expect(tester.takeException(), isNull);
+    });
+  });
+
+  group('UI-2E RouteDetailScreen Responsive Matrix', () {
+    for (final size in testViewports) {
+      testWidgets('RouteDetailScreen renders without overflow at ${size.width}x${size.height}', (tester) async {
+        await tester.binding.setSurfaceSize(size);
+        final sampleRoute = createSampleRoute(attachedGroupRideId: 'group-ride-123');
+
+        await tester.pumpWidget(
+          ProviderScope(
+            overrides: [
+              currentUserProvider.overrideWith((ref) => const AuthUser(uid: 'alice', isAnonymous: false)),
+              routeByIdProvider('sample-route-1').overrideWith((ref) => Stream.value(sampleRoute)),
+              isProSubscriberProvider.overrideWith((ref) => false),
+            ],
+            child: MaterialApp(
+              theme: ThemeData.dark().copyWith(
+                extensions: [MotorSignalThemeColors.dark],
+              ),
+              home: const RouteDetailScreen(routeId: 'sample-route-1'),
+            ),
+          ),
+        );
+
+        await tester.pumpAndSettle();
+
+        expect(find.text('ROUTE DETAILS'), findsOneWidget);
+        expect(find.text('Skyline Ridge Cruise'), findsOneWidget);
+        expect(find.text('Scenic ridge route with twisties'), findsOneWidget);
+        expect(find.text('STRAIGHT-LINE DISTANCE'), findsOneWidget);
+        expect(find.text('WAYPOINTS'), findsOneWidget);
+        expect(find.text('3 STOPS'), findsOneWidget);
+        expect(find.byKey(const ValueKey('route_detail_edit_button')), findsOneWidget);
+        expect(find.byKey(const ValueKey('route_detail_delete_button')), findsOneWidget);
+        expect(find.byKey(const ValueKey('route_detail_view_attached_group_ride_button')), findsOneWidget);
+        expect(find.byKey(const ValueKey('route_detail_navigate_start_button')), findsOneWidget);
+        expect(tester.takeException(), isNull);
+      });
+    }
+  });
+
+  group('UI-2E NavigationHandoffService Modal', () {
+    testWidgets('Navigation handoff bottom sheet displays options with theme tokens', (tester) async {
+      await tester.binding.setSurfaceSize(const Size(390, 844));
+
+      await tester.pumpWidget(
+        MaterialApp(
+          theme: ThemeData.dark().copyWith(
+            extensions: [MotorSignalThemeColors.dark],
+          ),
+          home: Scaffold(
+            body: Builder(
+              builder: (context) => ElevatedButton(
+                onPressed: () {
+                  NavigationHandoffService.showHandoffSheet(
+                    context: context,
+                    latitude: 37.3861,
+                    longitude: -122.2641,
+                    displayName: 'Alice\'s Restaurant',
+                  );
+                },
+                child: const Text('OPEN HANDOFF'),
+              ),
+            ),
+          ),
+        ),
+      );
+
+      await tester.pumpAndSettle();
+
+      // Open sheet
+      await tester.tap(find.text('OPEN HANDOFF'));
+      await tester.pumpAndSettle();
+
+      expect(find.text('NAVIGATION HANDOFF'), findsOneWidget);
+      expect(find.text('Alice\'s Restaurant'), findsOneWidget);
+      expect(find.byKey(const ValueKey('handoff_google_maps_tile')), findsOneWidget);
+      expect(find.byKey(const ValueKey('handoff_waze_tile')), findsOneWidget);
+      expect(find.byKey(const ValueKey('handoff_system_map_tile')), findsOneWidget);
+      expect(tester.takeException(), isNull);
+    });
+  });
+}