/* Route: numbered stations on one line */
.route { margin-top:0; padding-top:40px; border-top:1px solid var(--hair); }
.route-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 32px; }
.route h2 { margin:0; font-size:28px; font-weight:900; letter-spacing:-.01em; }
.route-summary { margin:0; font-size:18px; font-variant-numeric:tabular-nums; }
.route-summary strong { font-weight:700; }
.route-line { position:relative; margin-top:36px; padding-bottom:62px; }
.stations { position:relative; display:grid; grid-template-columns:repeat(6,1fr) 1.6fr; margin:0; padding:0; list-style:none; }
.stations::before,.stations .fill { content:''; position:absolute; top:19px; left:calc(100% / 7.6 * .5); height:4px; border-radius:2px; background:var(--hair-strong); }
.stations::before { right:calc(100% / 7.6 * .8); }
.stations .fill { right:auto; background:var(--rail); width:var(--w,0%); transform-origin:left; animation:draw 1.1s var(--ease) both; }
.stations li { position:relative; display:flex; justify-content:center; }
.station { position:relative; z-index:1; display:grid; place-items:center; min-width:42px; height:42px; padding:0 8px; background:var(--ground); border:3px solid var(--hair-strong); border-radius:21px; font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--muted); }
.stations .is-done .station { background:var(--rail); border-color:var(--rail); color:#fff; }
.stations .is-current .station { border-color:var(--rail); color:var(--rail); background:#fbfcf8; }
.today-mark { position:absolute; top:50px; left:var(--x,0%); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; font-size:14px; font-weight:700; color:var(--rail); animation:fade .5s .9s var(--ease) both; }
.today-mark::before { content:''; width:2px; height:10px; background:var(--rail); }
@keyframes draw { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }

@media (max-width:900px) {
  .route { margin-top:24px; padding-top:32px; }
  .route h2 { font-size:24px; }
  .stations { grid-template-columns:repeat(6,1fr) 1.5fr; }
  .station { min-width:32px; height:32px; font-size:14px; padding:0 6px; border-width:2px; border-radius:16px; }
  .stations li:last-child .station { font-size:13px; padding:0 7px; }
  .stations::before,.stations .fill { top:14px; height:3px; }
  .today-mark { top:42px; }
}
@media (prefers-reduced-motion:reduce) { .stations .fill,.today-mark { animation:none; } }