Road Trip Milestone Path Features Block for React

Edit STOPS at the top of the file: each has a name, a sentence, a time and a state (done, current or todo). Keep the states in order: the road is solid above the current stop's marker and dashed below it, and each stop draws its own piece of road, so the line stays continuous whatever the row heights. The "3 of 5 stops" in the header counts the done ones.

In CSS, not SVG: each row draws a thin line above and below its marker, solid in the text colour or dashed with a repeating gradient. Drawing it per row means the solid part ends exactly at the truck however tall the text makes each stop, with no measuring and no script.

The stops are an ordered list named "The route, in order", each with a heading, a sentence and its badge and time, so it reads like a tracking page: "Picked up, Done, Day 1, 08:40". The road, the markers and the truck are decorative and hidden.

The road moves to the start edge and every stop sits beside it on the same side, one under the next, with the same badge and time. Nothing is hidden; the alternating layout only applies from lg.

The road and the stops mirror: the road sits at the end edge on a phone, and the alternation starts from the other side on a desktop. Times are isolated so their digits stay in order.

The header fades up once on load, and a soft ring pings around the truck chip. With reduced motion the fade is off and the ring stays still.