/* The journey rail (rail.js): a hairline on the right-hand edge, one tick per stop, a lit marker that
   travels with the camera, a chevron that drifts while there is more below.
   It takes the SITE's design: the skin sets these tokens on :root from its own palette (left unset, the rail is
   the TradeSmart look: brand red #8B0000 with its red glow, white hairlines with a soft shadow).
     --j-rail-accent   the marker                       --j-rail-glow   the marker's glow
     --j-rail-line     the hairline                     --j-rail-tick   a tick ahead    --j-rail-past  a tick passed
     --j-rail-more     the chevron                      --j-rail-shadow the filter that lifts it off the picture
     (the phone's pull-to-refresh ring, phone.js + phone-deck.js, takes --j-pull-accent, else --j-rail-accent)
     --j-rail-back     a soft backing behind the whole rail, so it reads on a bright daylight scene as well
                       as a dark one (none by default); --j-rail-pad, --j-rail-radius and --j-rail-blur shape it */
.j-rail { position: fixed; right: 26px; top: 50%; z-index: 13; display: flex; flex-direction: column; align-items: center; gap: 14px;
  translate: 0 -50%; pointer-events: none; opacity: 0; transition: opacity 0.6s ease;
  padding: var(--j-rail-pad, 0); border-radius: var(--j-rail-radius, 0); background: var(--j-rail-back, none);
  -webkit-backdrop-filter: var(--j-rail-blur, none); backdrop-filter: var(--j-rail-blur, none);
  filter: var(--j-rail-shadow, drop-shadow(0 0 2px rgba(0, 0, 0, 0.55))); }
.j-rail.is-on { opacity: 1; }
.j-rail.is-gone { opacity: 0; }
.j-rail-track { position: relative; width: 1px; height: min(36vh, calc((var(--j-rail-n, 6) - 1) * 30px));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--j-rail-line, rgba(255, 255, 255, 0.22)) 8%, var(--j-rail-line, rgba(255, 255, 255, 0.22)) 92%, rgba(255, 255, 255, 0)); }
.j-rail-tick { position: absolute; left: 50%; width: 7px; height: 1px; translate: -50% -50%; background: var(--j-rail-tick, rgba(255, 255, 255, 0.36));
  transition: background-color 0.4s ease, width 0.4s ease; }
.j-rail-tick.is-past { background: var(--j-rail-past, rgba(255, 255, 255, 0.7)); }
.j-rail-dot { position: absolute; left: 50%; width: 3px; height: 18px; translate: -50% -50%; border-radius: 2px; background: var(--j-rail-accent, #8B0000);
  box-shadow: 0 0 0 1px var(--j-rail-glow, rgba(224, 69, 60, 0.6)), 0 0 12px 1px var(--j-rail-glow, rgba(224, 69, 60, 0.55)); }
.j-rail-more { width: 12px; height: 8px; color: var(--j-rail-more, rgba(255, 255, 255, 0.82)); transition: opacity 0.5s ease;
  animation: j-rail-drift 2.4s ease-in-out infinite; }
.j-rail-more > svg, .j-rail-up > svg { display: block; width: 12px; height: 8px; overflow: visible; }
.j-rail.is-end .j-rail-more { opacity: 0; }
@keyframes j-rail-drift { 0%, 100% { translate: 0 -2px; opacity: 0.55; } 50% { translate: 0 3px; opacity: 1; } }
/* back to the top: the same chevron turned up, there once the page is past the first stop */
.j-rail-up { width: 12px; height: 8px; color: var(--j-rail-more, rgba(255, 255, 255, 0.82)); rotate: 180deg; transition: opacity 0.5s ease; }
.j-rail.is-start .j-rail-up { opacity: 0; }
/* a control (the engine gave it a way to move the page): the chevrons and the line take a press, each
   with a finger-sized hit area round the small mark; nothing takes a press while the rail is out of sight */
.j-rail.is-ctl.is-on:not(.is-gone) > * { pointer-events: auto; }
.j-rail.is-ctl.is-start .j-rail-up, .j-rail.is-ctl.is-end .j-rail-more { pointer-events: none !important; }
.j-rail.is-ctl { touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.j-rail.is-ctl .j-rail-up, .j-rail.is-ctl .j-rail-more { position: relative; cursor: pointer; }
.j-rail.is-ctl .j-rail-up::after, .j-rail.is-ctl .j-rail-more::after { content: ""; position: absolute; inset: -12px -14px; }
.j-rail.is-ctl .j-rail-track { cursor: grab; }
.j-rail.is-ctl .j-rail-track::before { content: ""; position: absolute; inset: -8px -16px; }
.j-rail.is-drag .j-rail-track { cursor: grabbing; }
.j-rail.is-drag .j-rail-dot { transition: top 0.12s ease; }
.j-rail.is-drag .j-rail-more { animation: none; }

/* a phone playing the film: under the menu button, shorter, closer to the edge */
html.jp-on .j-rail { right: 14px; top: calc(var(--bar-h, 64px) + 22px); translate: 0 0; gap: 10px; z-index: 4; }
/* it stands on a pane's right edge (phone.js keeps the words clear): a soft dark backing by default so
   it reads on a light pane as on the picture (a skin's own --j-rail-back still wins) */
html.jp-on .j-rail { padding: var(--j-rail-pad, 9px 7px); border-radius: var(--j-rail-radius, 14px); background: var(--j-rail-back, rgba(12, 10, 8, 0.46)); }
html.jp-on .j-rail-track { height: min(26vh, calc((var(--j-rail-n, 6) - 1) * 18px)); }
html.jp-on .j-rail-tick { width: 6px; }
html.jp-on .j-rail-dot { height: 14px; }
html.jp-sheet-on .j-rail { opacity: 0; }

@media (prefers-reduced-motion: reduce) { .j-rail-more { animation: none; opacity: 0.8; } .j-rail, .j-rail-tick { transition: none; } }
.sc-failsafe .j-rail { display: none !important; }
@media print { .j-rail { display: none !important; } }

/* no glow: the current-position marker is a crisp ring, no blurred halo */
.j-rail-dot { box-shadow: 0 0 0 1px var(--j-rail-glow, rgba(224, 69, 60, 0.6)); }