/* ─────────────────────────────────────────────────────────────
   RAIL · left-hand stage tracker
   ───────────────────────────────────────────────────────────── */
.rail { position: fixed; left: max(42px, env(safe-area-inset-left, 0px)); top: clamp(110px, 16vh, 150px); z-index: 40; display: flex; flex-direction: column; gap: 30px; animation: railIn 1.2s 2.4s both; }
@keyframes railIn { from { opacity: 0; transform: translateX(-20px); } }
.rail::before { content: ""; position: absolute; left: 11px; top: -26px; bottom: 10px; width: 1.5px; background: linear-gradient(transparent, rgba(233,189,103,.7) 12%, rgba(233,189,103,.7) 88%, transparent); }
.rail .fill { position: absolute; left: 11px; top: 0; width: 1.5px; height: 0; background: linear-gradient(var(--gold-soft), var(--magenta)); box-shadow: 0 0 8px var(--gold); transition: height 1.1s cubic-bezier(.6,0,.2,1); }
.rail a { display: flex; align-items: center; gap: 16px; text-decoration: none; font: italic 700 .8rem/1 var(--f-ui); letter-spacing: .2em; color: var(--ivory); opacity: .85; position: relative; }
.rail a i { width: 23px; height: 23px; flex: none; position: relative; display: grid; place-items: center; }
.rail a i::before { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--gold); background: rgba(17,9,38,.8); transition: all .4s; }
.rail a i svg { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%) scale(0) rotate(-45deg); transition: transform .5s cubic-bezier(.3,1.5,.5,1); filter: drop-shadow(0 0 6px rgba(255,170,90,.8)); }
.rail a.on { opacity: 1; color: var(--gold-soft); }
.rail a.on i::before { opacity: 0; transform: scale(.4); }
.rail a.on i svg { transform: translate(-50%, -50%) scale(1) rotate(0); }
.rail a span { transition: opacity .35s, transform .35s; text-shadow: 0 1px 8px rgba(12,5,30,.9); }
.rail.compact a span { opacity: 0; transform: translateX(-8px); pointer-events: none; }
.rail.compact a:hover span { opacity: 1; transform: none; background: var(--glass); padding: 6px 10px; border-radius: 999px; }

@media (max-width: 1240px) { .rail { display: none; } }