/* The ONE section stepper (look, size, position and behaviour of the /roadmap/ rail). Markup: tools/rail-render.mjs; script: assets/js/rail.mjs. No page keeps its own copy.
   ≥ 88rem: it hangs in the left margin of the viewport, outside the content column (which keeps the width and left edge it has without it). In a .rm-shell (roadmap, partners, investors, developers)
   it is the first grid item; on other pages it is the first child of <main> with no height, positioned from the container. 64rem–88rem: hidden (no margin for it; /roadmap/ gives it a column, see roadmap.css).
   ≤ 64rem: a progress bar under the header (labels drop away at ≤ 40rem). All motion is off under prefers-reduced-motion. */
.rm-rail { width: 8.25rem; margin-left: calc(max(0px, (100% - var(--container)) / 2) + var(--gutter) - 9.25rem); position: sticky; top: calc(var(--header-h) + 1.5rem); z-index: 3; --rp: 0; height: 0; padding-top: 0; }
.rm-rail ol { position: relative; display: grid; gap: 2.4rem; padding: 0; margin: clamp(1.25rem, 2.2vw, 2rem) 0 0; list-style: none; }
.rm-shell > .rm-rail { margin-left: -9.25rem; height: auto; padding-top: clamp(1.25rem, 2.2vw, 2rem); }
.rm-shell > .rm-rail ol { margin-top: 0; }
.rm-rail ol::before, .rm-rail ol::after { content: ''; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; }
.rm-rail ol::before { background: var(--border); }
.rm-rail ol::after { background: linear-gradient(180deg, var(--brand-amber), var(--brand-red) 38%, var(--brand-magenta) 66%, var(--brand-blue)); clip-path: inset(0 0 calc((1 - var(--rp)) * 100%) 0); }
.rm-rail li.rc0 { --hc: var(--brand-amber); } .rm-rail li.rc1 { --hc: var(--brand-red); } .rm-rail li.rc2 { --hc: var(--brand-magenta); } .rm-rail li.rc3 { --hc: var(--brand-indigo); } .rm-rail li.rc4 { --hc: var(--brand-blue); }
.rm-rail a { position: relative; display: flex; align-items: center; gap: .8rem; min-height: 34px; color: var(--text-faint); text-decoration: none; border-radius: 8px; transition: color var(--t-fast) var(--ease); }
.rm-rail a:hover, .rm-rail a[aria-current="step"] { color: var(--text); }
.rm-rail a:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; color: var(--text); }
.rm-dot { position: relative; z-index: 1; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--border-hover); transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease); }
.rm-rail a:hover .rm-dot { border-color: var(--hc); }
.rm-rail a[aria-current="step"] .rm-dot { background: var(--hc); border-color: var(--hc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hc) 24%, transparent), 0 0 18px 3px color-mix(in srgb, var(--hc) 60%, transparent); }
.rm-lbl { display: flex; align-items: baseline; gap: .55rem; font: var(--text-body); }
.rm-lbl i { font: var(--text-small); font-family: var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
@media (prefers-reduced-motion: reduce) { .rm-rail *, .rm-rail a { transition: none !important; } }

/* a page that also has the sticky .subnav strip: the rail starts below it */
@media (min-width: 64.01rem) { body:has(.subnav) .rm-rail { top: calc(var(--header-h) + 3.25rem + 1.5rem); } }

/* no margin for it between 64rem and 88rem (/roadmap/ keeps it as a column there) */
@media (min-width: 64.01rem) and (max-width: 87.99rem) { .rm-rail { display: none; } }
/* the rail turns into a progress bar under the header */
@media (max-width: 64rem) {
  .rm-rail, .rm-shell > .rm-rail { top: var(--header-h); width: auto; height: auto; margin-left: 0; padding: .6rem var(--gutter) .5rem; background: linear-gradient(180deg, var(--bg) 72%, transparent); }
  .rm-shell > .rm-rail { padding-inline: 0; }
  .rm-rail ol, .rm-shell > .rm-rail ol { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin-top: 0; }
  .rm-rail ol::before, .rm-rail ol::after { left: 12.5%; right: 12.5%; top: 7px; bottom: auto; width: auto; height: 2px; }
  .rm-rail[data-n="3"] ol::before, .rm-rail[data-n="3"] ol::after { left: 16.667%; right: 16.667%; }
  .rm-rail[data-n="5"] ol::before, .rm-rail[data-n="5"] ol::after { left: 10%; right: 10%; }
  .rm-rail[data-n="6"] ol::before, .rm-rail[data-n="6"] ol::after { left: 8.333%; right: 8.333%; }
  .rm-rail[data-n="7"] ol::before, .rm-rail[data-n="7"] ol::after { left: 7.143%; right: 7.143%; }
  .rm-rail[data-n="8"] ol::before, .rm-rail[data-n="8"] ol::after { left: 6.25%; right: 6.25%; }
  .rm-rail ol::after { background: var(--spectrum); clip-path: inset(0 calc((1 - var(--rp)) * 100%) 0 0); }
  .rm-rail a { flex-direction: column; justify-content: flex-start; gap: .35rem; min-height: 44px; }
  .rm-lbl { flex-direction: column; align-items: center; gap: .1rem; text-align: center; }
  .rm-lbl i { opacity: 1; }
}
@media (max-width: 40rem) {
  .rm-lbl span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}