feat: route log odometer and lit mile markers for profile and experience

src/components/JourneyHud.vue

@@ -22,6 +22,11 @@ const next = computed(() =>
    a route rule that fills along its lower edge. */
 const route = computed(() => Math.min(1, Math.max(0, props.journey.routeProgress)));
 const routePercent = computed(() => `${Math.round(route.value * 100)}%`);
+/* MILE MARKERS: "LOG 02/04 · ..." rolls its index on 1-digit odometer
+   columns, each keyed by its value so a change re-enters (route-log.css).
+   Client-only: the server sub-line is empty, so its HTML is unchanged. */
+const log = computed(() => /^LOG (\d+)\/(\d+)(.*)$/.exec(props.subline ?? ''));
+const rewind = computed(() => (props.subline ?? '').endsWith('REWIND'));
 /* The plate is keyed by chapter, so a new chapter is a new element: under
    reduced motion it fades in over 160 ms (gantry.css) instead of swapping. */
 </script>
@@ -43,6 +48,10 @@ const routePercent = computed(() => `${Math.round(route.value * 100)}%`);
     <span class="journey-hud__section">{{ sectionLabel }}</span>
     <!-- END OF SHIFT: html[data-dawn='day'] swaps the label for data-day (CSS). -->
     <strong v-if="journey.arrived" class="journey-hud__arrival" data-day="SHIFT OVER">ARRIVED</strong>
-    <span class="journey-hud__subline">{{ subline }}</span>
+    <template v-if="log">
+      <span class="journey-hud__subline" :data-rewind="rewind">LOG <span class="route-odo"><span v-for="(digit, i) in log[1]" :key="`${i}:${digit}`" class="route-odo__digit">{{ digit }}</span></span>/{{ log[2] }}{{ log[3] }}</span>
+      <span :key="log[1]" class="journey-hud__log-pulse"></span>
+    </template>
+    <span v-else class="journey-hud__subline">{{ subline }}</span>
   </aside>
 </template>