Add trend-range gating, vehicle filter, sync cancel, moving time, and UI fixes

- Grey out trend ranges beyond available health history
- Reject implausibly fast (vehicle) activities on upload with feedback
- Add cancel button + cooperative cancellation for Garmin sync
- Show daily steps prominently on the dashboard
- Clear errors for malformed/empty upload ZIPs
- Snap-target dot when drawing a segment on the map
- Time-axis fallback for stationary/HIIT HR timelines; hide map when no GPS
- Parse and display moving time (timer) vs elapsed; backfill task
- Restyle SegmentsPanel like RouteLeaderboard; Laps/Routes/Segments on one row

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

frontend/src/pages/ActivityDetailPage.jsx

@@ -143,7 +143,11 @@ export default function ActivityDetailPage() {
       {/* Stats — all on one row */}
       <div className="grid grid-cols-5 lg:grid-cols-10 gap-3">
         <StatCard label="Distance" value={formatDistance(activity.distance_m)} />
-        <StatCard label="Time" value={formatDuration(activity.duration_s)} />
+        <StatCard label="Time" value={formatDuration(activity.moving_time_s ?? activity.duration_s)}
+          sub={activity.moving_time_s ? 'moving' : undefined} />
+        {activity.moving_time_s != null && Math.abs(activity.moving_time_s - (activity.duration_s ?? 0)) >= 1 && (
+          <StatCard label="Elapsed" value={formatDuration(activity.duration_s)} />
+        )}
         <StatCard label="Pace" value={formatPace(activity.avg_speed_ms, activity.sport_type)} />
         <StatCard label="Elevation ↑" value={formatElevation(activity.elevation_gain_m)} />
         <StatCard label="Avg HR" value={formatHeartRate(activity.avg_heart_rate)} accent="red" />
@@ -162,7 +166,8 @@ export default function ActivityDetailPage() {
         </div>
       )}
 
-      {/* Map with controls */}
+      {/* Map with controls — only when the activity has a GPS track */}
+      {activity.polyline && activity.distance_m > 0 ? (
       <div className="bg-gray-900 rounded-xl overflow-hidden border border-gray-800">
         {/* Map toolbar */}
         <div className="flex items-center justify-between px-4 py-2 border-b border-gray-800">
@@ -265,6 +270,11 @@ export default function ActivityDetailPage() {
           </div>
         )}
       </div>
+      ) : (
+        <div className="bg-gray-900 rounded-xl border border-gray-800 p-8 flex items-center justify-center text-gray-600 text-sm">
+          No GPS track for this activity
+        </div>
+      )}
 
       {/* Metric timeline */}
       <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
@@ -300,25 +310,26 @@ export default function ActivityDetailPage() {
         )}
       </div>
 
-      {/* Laps + Route leaderboard + Segments side by side */}
+      {/* Laps · Routes · Segments — on one row, each shrinking to fit and
+          expanding to fill the width when fewer are present. */}
       {((laps && laps.length > 0) || (actSegments && actSegments.length > 0) || (routeBoard && routeBoard.top?.length > 0)) && (
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        <div className="flex flex-wrap gap-4 items-start">
           {laps && laps.length > 0 && (
-            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
+            <div className="flex-1 min-w-[300px] bg-gray-900 rounded-xl border border-gray-800 p-4">
               <h3 className="text-sm font-medium text-gray-300 mb-3">Laps</h3>
               <LapTable laps={laps} sportType={activity.sport_type} lapBests={lapBests} />
             </div>
           )}
           {routeBoard && routeBoard.top?.length > 0 && (
-            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
+            <div className="flex-1 min-w-[300px] bg-gray-900 rounded-xl border border-gray-800 p-4">
               <h3 className="text-sm font-medium text-gray-300 mb-3">Route — Top 10 Times</h3>
               <RouteLeaderboard data={routeBoard} />
             </div>
           )}
           {actSegments && actSegments.length > 0 && (
-            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
+            <div className="flex-1 min-w-[300px] bg-gray-900 rounded-xl border border-gray-800 p-4">
               <h3 className="text-sm font-medium text-gray-300 mb-3">Segments</h3>
-              <SegmentsPanel segments={actSegments} />
+              <SegmentsPanel segments={actSegments} activityId={Number(id)} />
             </div>
           )}
         </div>