/* The page timeline (picked 6 Nov 2026, "B"): on desktop it stands in for the browser's scrollbar.
   A track on the right with a notch per section ([data-rail] on each section), a playhead (the Vanish
   selection box) that runs with the scroll, and a "02/07" readout. Drag it to scrub; click a notch to jump;
   hover for the section names. rail.js adds html.has-rail, which hides the native scrollbar; without the
   script (or below 1100px, where there is no rail) the normal scrollbar stays. */
@media (min-width: 1100px) {
  html.has-rail { scrollbar-width: none; }
  html.has-rail::-webkit-scrollbar { display: none; width: 0; height: 0; }
}
.rail { position: fixed; z-index: 40; top: 50%; right: 22px; width: 30px; height: min(58vh, 520px); translate: 0 -50%;
  font: 400 13px/1.2 var(--font-ui); color: var(--label-2); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.rail.is-drag { cursor: grabbing; }
@media (max-width: 1099px) { .rail { display: none; } }
.rail ol { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.rail li { position: absolute; right: 0; top: var(--at); translate: 0 -50%; }
.rail a { pointer-events: auto; position: relative; display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; height: 22px; padding-right: 9px;
  color: inherit; text-decoration: none; white-space: nowrap; cursor: pointer; }
.rail a:focus-visible { outline: 2px solid var(--label); outline-offset: 2px; border-radius: 6px; }
.rail a::after { content: ""; position: absolute; right: 10px; top: 50%; width: 9px; height: 1px; background: var(--label-3); transition: background 200ms var(--ease), width 200ms var(--ease), right 200ms var(--ease); }
.rail a[aria-current]::after, .rail a:hover::after { background: var(--label); width: 13px; right: 8px; }
.rail a[aria-current] { color: var(--label); }
.rail-n { margin-right: 14px; pointer-events: none; font: 500 11px/1 var(--font-mono); color: var(--label-3); }
.rail a[aria-current] .rail-n, .rail a:hover .rail-n { color: var(--label); }
/* hidden names take no clicks: only the rail's own 30px catches the pointer until it's hovered */
.rail-t { opacity: 0; visibility: hidden; translate: 4px 0; transition: opacity 200ms var(--ease), translate 200ms var(--ease), visibility 0s linear 200ms; }
.rail-track { position: absolute; right: 14px; top: 0; bottom: 0; width: 1px; background: var(--separator-2, rgba(0, 0, 0, 0.14)); }
.rail-fill { position: absolute; left: 0; top: 0; width: 1px; height: var(--p, 0%); background: var(--label); }
.rail-head { position: absolute; right: 9px; top: var(--p, 0%); width: 11px; height: 11px; box-sizing: border-box; translate: 0 -50%; border: 1px dashed var(--label); background: #fff; pointer-events: none; transition: scale 160ms var(--ease); }
.rail-head i { position: absolute; width: 4px; height: 4px; border: 1px solid var(--label); background: #fff; border-radius: 50%; }
.rail-head i:nth-child(1) { left: -3px; top: -3px; } .rail-head i:nth-child(2) { right: -3px; top: -3px; }
.rail-head i:nth-child(3) { left: -3px; bottom: -3px; } .rail-head i:nth-child(4) { right: -3px; bottom: -3px; }
.rail.is-drag .rail-head { scale: 1.25; }
.rail-tc { position: absolute; right: 30px; top: var(--p, 0%); translate: 0 -50%; font: 500 11px/1 var(--font-mono); color: var(--label); font-variant-numeric: tabular-nums; pointer-events: none; transition: opacity 200ms var(--ease); }
/* names on hover or focus, on a quiet card so they never sit on the page's text */
.rail::before { content: ""; position: absolute; inset: -14px -10px -14px -170px; border-radius: 12px; background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 0 1px var(--separator), 0 12px 32px -12px rgba(0, 0, 0, 0.18); opacity: 0; transition: opacity 200ms var(--ease); pointer-events: none; }
.rail:is(:hover, :focus-within):not(.is-drag)::before { opacity: 1; }
.rail:is(:hover, :focus-within):not(.is-drag) .rail-t { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 200ms var(--ease), translate 200ms var(--ease), visibility 0s; }
.rail:is(:hover, :focus-within):not(.is-drag) .rail-tc { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .rail::before, .rail-t, .rail-tc, .rail a::after, .rail-head { transition: none; } }