feat(roadtrip): move a stop reached after midnight onto the day it is reached

A day that runs past midnight used to keep every one of its stops on its own
card, so day one ended at 03:12 with three places nobody reaches on day one and
day two began with a drive that had already happened. The rail now lays the
stops out by the date they are actually reached: when the clock goes backwards
between two arrivals the ones after it move to the following day, into a block
that says where they came from, and the night drive and its kilometres go with
them. It is an arrangement, not a write — the day planner beside it is
untouched, nothing reaches the database, and a shorter stay the evening before
puts everything back on its own.

The map follows the same arrangement, because a boundary drawn in the rail and
not on the map is two answers to one question. Day one now ends where its last
reachable stop is and the line, the legs and the totals are cut to match.

Two switches in the driving settings, off by default. "Connect the days" routes
the gap between one day's last stop and the next day's first, which is real
driving the rail has never drawn, and counts it. "A colour per day" then puts
the days back into a line that has become continuous, and tints each day header
to match.

Collapsing a day from its header takes its route and its places off the map as
well as out of the rail, and the categories in the corridor panel fold the same
way. The refuel band is one full-width red band with the pump as its button,
the results are chips, and the driving dialog is two columns of panels with the
figures on one right edge.

Also fixes a via that would not adjust the route once dragged. Five separate
causes, all measured rather than guessed: leg threading used the card index
instead of the owning day's, the anchor lookup returned chain indices, it
filtered by the card rather than by the anchor's owner, seams were routed
without their vias, and a seam once routed was never re-fetched.

client/src/components/Map/MapViewGL.tsx

@@ -123,6 +123,11 @@ interface Props {
   /** The dashed last bit to a place the road network does not reach. */
   accessLines?: { line: [[number, number], [number, number]]; meters: number }[]
   route?: [number, number][][] | null
+  /**
+   * One colour pair per entry of `route`, or absent for the blue the route has always
+   * been. Only the road trip passes these, and only while colouring by day is on.
+   */
+  routeColors?: ({ line: string; casing: string } | undefined)[] | null
   routeSegments?: RouteSegment[]
   selectedPlaceId?: number | null
   onMarkerClick?: (id: number) => void
@@ -606,6 +611,7 @@ export function MapViewGL({
   routeVias = NO_ROUTE_VIAS,
   accessLines = NO_ACCESS_LINES,
   route = null,
+  routeColors = null,
   routeSegments = NO_ROUTE_SEGMENTS,
   selectedPlaceId = null,
   hoverDisabled = false,
@@ -762,6 +768,23 @@ export function MapViewGL({
     viaCleanupRef.current = []
     viaPinsRef.current.forEach(p => p.remove())
     viaPinsRef.current = []
+    /**
+     * Zoomed out, the handles go away.
+     *
+     * A via is a handle for a few hundred metres of road, and at a continental zoom a
+     * whole day's worth of them collapses into a cluster of dots over one town — not
+     * something anybody can aim at, and dragging one there moves the route by kilometres
+     * per pixel. Below this the drive is read, not shaped.
+     */
+    const VIA_MIN_ZOOM = 9
+    const applyViaZoom = () => {
+      const on = map.getZoom() >= VIA_MIN_ZOOM
+      for (const pin of viaPinsRef.current) {
+        const node = (pin as { getElement?: () => HTMLElement | null }).getElement?.()
+        if (node) node.style.display = on ? '' : 'none'
+      }
+    }
+
     for (const via of vias) {
       const el = document.createElement('span')
       el.style.cssText = 'display:block;width:12px;height:12px;border-radius:9999px;background:#0a84ff;border:2.5px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45);cursor:grab;touch-action:none'
@@ -850,8 +873,26 @@ export function MapViewGL({
         el.removeEventListener('dblclick', swallow)
       })
     }
+
+    // Applied now and on every zoom that settles, so a handle that should not be there is
+    // gone before the first frame rather than after the first gesture.
+    applyViaZoom()
+    map.on('zoomend', applyViaZoom)
+    viaCleanupRef.current.push(() => map.off('zoomend', applyViaZoom))
   }, [vias, viasDraggable, mapReady, glProvider])
 
+  /**
+   * The other people's pointers, and this person's own going the other way.
+   *
+   * Built as plain elements on the same pin layer the vias use, so they ride the map
+   * during a pan instead of being re-placed a frame later — the same reason the via
+   * handles are not library markers.
+   *
+   * No interpolation between frames, unlike the studio's book: a map pans and zooms under
+   * the arrow, so a position eased towards over several frames is a position that was
+   * never true at any of them. Ten frames a second placed exactly reads as a hand; the
+   * same frames chasing a moving target read as a drift.
+   */
   /**
    * The offered routes, drawn under the current one.
    *
@@ -1178,7 +1219,9 @@ export function MapViewGL({
           id: 'trip-route-casing',
           type: 'line',
           source: 'trip-route',
-          paint: { 'line-color': '#0a5cc2', 'line-width': 8 },
+          // Per feature where the caller gave one, else the blue the route has always
+          // been. `coalesce` rather than a second layer: one source, one stroke.
+          paint: { 'line-color': ['coalesce', ['get', 'casing'], '#0a5cc2'], 'line-width': 8 },
           layout: { 'line-cap': 'round', 'line-join': 'round' },
         })
         // An invisible band over the route, purely to be clicked. The drawn line is 8px
@@ -1195,7 +1238,7 @@ export function MapViewGL({
           id: 'trip-route-line',
           type: 'line',
           source: 'trip-route',
-          paint: { 'line-color': '#0a84ff', 'line-width': 5 },
+          paint: { 'line-color': ['coalesce', ['get', 'color'], '#0a84ff'], 'line-width': 5 },
           layout: { 'line-cap': 'round', 'line-join': 'round' },
         })
       }
@@ -1885,13 +1928,18 @@ export function MapViewGL({
     if (!map) return
     const src = map.getSource('trip-route') as mapboxgl.GeoJSONSource | undefined
     if (!src) return
-    const features = (route || []).filter(seg => seg && seg.length > 1).map(seg => ({
-      type: 'Feature' as const,
-      properties: {},
-      geometry: { type: 'LineString' as const, coordinates: seg.map(([lat, lng]) => [lng, lat]) },
-    }))
+    const features = (route || [])
+      .map((seg, i) => ({ seg, colors: routeColors?.[i] }))
+      .filter(({ seg }) => seg && seg.length > 1)
+      .map(({ seg, colors }) => ({
+        type: 'Feature' as const,
+        // Null rather than absent: `coalesce` in the paint expression falls through on
+        // null, and an absent property would make every line the default colour.
+        properties: { color: colors?.line ?? null, casing: colors?.casing ?? null },
+        geometry: { type: 'LineString' as const, coordinates: seg.map(([lat, lng]) => [lng, lat]) },
+      }))
     src.setData({ type: 'FeatureCollection', features })
-  }, [route, mapReady])
+  }, [route, routeColors, mapReady])
 
   // Update access-spur geojson
   useEffect(() => {