/* Process rail above the carousel (assets/js/rail.js) */
.rail { display: flex; align-items: center; gap: 18px; padding: 14px 20px 0; }
.rail__mark { flex: none; width: 104px; height: 30px; overflow: visible; }
.rail__lead { fill: none; stroke: var(--muted); stroke-width: 1; opacity: .6; }
.rail__line { fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linejoin: round; }
.rail__line { vector-effect: non-scaling-stroke; }
.rail__fill { fill: var(--mark); transition: width .25s ease-out; }
.rail__hit { fill: transparent; cursor: pointer; }
.rail__names { display: flex; gap: 4px 16px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.rail__name { padding: 4px 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--muted); transition: color .25s ease; }
.rail__name:hover, .rail__name:focus-visible, .rail__name.is-on { color: var(--ink); }
.rail__name.is-on { text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (prefers-reduced-motion: reduce) { .rail__fill, .rail__name { transition: none; } }