/* ---------- Scroll rail (desktop only, replaces the native scrollbar) ---------- */
html.has-rail { scrollbar-width: none; }
html.has-rail::-webkit-scrollbar { display: none; }

/* Rail centred on the right edge, about a third of the screen tall. The element is a wider hit area. */
.rail {
  position: fixed;
  top: 50%;
  right: 18px;
  width: 24px;
  height: 250px;
  transform: translateY(-50%);
  z-index: 50;
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

html.has-rail .rail { display: block; }
.rail.is-visible { opacity: 1; pointer-events: auto; }

.rail__track {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 9px;
  width: 4px;
  border-radius: 999px;
  background: rgba(20, 20, 20, .09);
  cursor: pointer;
}

.rail__thumb {
  position: absolute;
  left: -1px;
  width: 6px;
  height: 30px;
  border-radius: 999px;
  background: #9a9a98;
  cursor: grab;
  transition: background-color .2s ease;
}

.rail:hover .rail__thumb { background: var(--ink); }
.rail.is-dragging .rail__thumb { background: var(--ink); cursor: grabbing; }

/* Floating label: follows the cursor up and down the rail and names the section at that point */
.rail__label {
  position: absolute;
  right: 30px;
  top: 0;
  padding: 4px 9px;
  border-radius: 7px;
  background: var(--surface);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0;
  transform: translate(4px, -50%);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}

.rail:hover .rail__label,
.rail.is-dragging .rail__label { opacity: 1; transform: translate(0, -50%); }