/* vko.media pipeline rail (assets/js/components/rail.js). Site tokens only, dark mode inherits.
   Layers, back to front: line segments, hover ghost, ink pill, accent dot, node labels (ink copy clipped to the pill). */

.rail {
  --rail-pad: 0px;
  --seg: 22px;
  --pl: 0px; --pr: 0px; --hl: 0px; --hr: 0px; --sq: 0px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: calc(44px + 2 * var(--rail-pad));
  padding: var(--rail-pad);
  box-sizing: border-box;
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.rail.is-drag { cursor: grabbing; }

/* 1px line joining the nodes */
.rail-seg { flex: 0 1 var(--seg); min-width: 10px; height: 1px; background: currentColor; opacity: .2; }
.rail--glass { --rail-pad: 4px; --seg: 14px; }

/* node: same metrics as .chip-btn (44 px), no own fill: the pill paints the active one */
.rail-node {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-2);
  font: 600 14px/20px var(--font);
  white-space: nowrap;
  cursor: pointer;
  transition: color 240ms var(--ease), scale 160ms ease-out;
}
.rail-node:active { scale: .96; }
.rail-node:focus-visible { border-radius: 999px; outline-offset: 2px; }
.rail--glass .rail-node { padding: 0 14px; }
/* bar: each node is an outlined stop on the line */
.rail--bar .rail-node::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--faint); border-radius: inherit; pointer-events: none; }

/* the ink copy of the label, clipped to the pill edges so the colour flips exactly under the pill */
.rail-ink {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--bg);
  pointer-events: none;
  clip-path: inset(0 max(0px, calc(var(--x, 0px) + var(--w, 0px) - var(--pr))) 0 max(0px, calc(var(--pl) - var(--x, 0px))));
}

/* ink pill and hover ghost: full-width layers clipped to two spring edges (paint only, no layout) */
.rail-pill, .rail-ghost {
  position: absolute;
  z-index: 0;
  top: var(--rail-pad);
  bottom: var(--rail-pad);
  left: 0;
  width: 100%;
  pointer-events: none;
}
.rail-pill {
  background: var(--ink);
  clip-path: inset(var(--sq) calc(100% - var(--pr)) var(--sq) var(--pl) round 999px);
}
.rail-ghost {
  background: color-mix(in oklab, var(--ink) 7%, transparent);
  clip-path: inset(0 calc(100% - var(--hr)) 0 var(--hl) round 999px);
  opacity: 0;
  transition: opacity 200ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .rail.is-hover .rail-ghost { opacity: 1; }
  .rail-node:hover { color: var(--ink); }
}

/* accent dot: travels the line on change, stretches with speed, trails a short comet tail */
.rail-dot {
  --dx: 0px; --ds: 1; --trail: 0;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--dx), 0, 0);
}
.rail-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 10px 1px color-mix(in oklab, var(--accent) 70%, transparent);
  transform: scaleX(var(--ds));
}
.rail-dot i {
  position: absolute;
  top: 2px;
  right: 3px;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent));
  transform-origin: 100% 50%;
  transform: scaleX(var(--trail));
  opacity: var(--trail);
}
.rail-dot[data-dir="-1"] { scale: -1 1; }

/* arrival ping: one accent ring off the new node */
.rail-node::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1.5px var(--accent); opacity: 0; pointer-events: none; }
.rail-node.is-ping::after { animation: rail-ping 560ms var(--ease) both; }
@keyframes rail-ping { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 1.14 1.3; } }

@media (prefers-reduced-motion: reduce) {
  .rail-dot { display: none; }
  .rail-node.is-ping::after { animation: none; }
  .rail-node, .rail-ghost { transition: none; }
}