Segments: color track green→red along direction of travel

site/src/components/SegmentDetail.svelte

@@ -109,6 +109,7 @@
     map.on('load', () => {
       map.addSource('seg', {
         type: 'geojson',
+        lineMetrics: true,
         data: {
           type: 'Feature',
           geometry: {
@@ -119,7 +120,10 @@
       });
       map.addLayer({ id: 'seg-line', type: 'line', source: 'seg',
         layout: { 'line-cap': 'round', 'line-join': 'round' },
-        paint: { 'line-color': '#f59e0b', 'line-width': 5 } });
+        paint: {
+          'line-gradient': ['interpolate', ['linear'], ['line-progress'], 0, '#22c55e', 1, '#ef4444'],
+          'line-width': 5,
+        } });
 
       // Start/end markers
       const start = segment!.polyline[0];