/* ============================================================
   CUSTOM SCROLLBAR · a single travelling line, nothing else
   No track, no background, no arrows, no caps.
   Loaded by every page. Paired with scrollbar.js.
   ============================================================ */

/* Strip the native scrollbar entirely. This reclaims its gutter, so content
   gains ~15px of width on platforms that reserve one (Windows/Linux). */
html { scrollbar-width: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Fixed, not absolute — out of flow either way (so it shifts nothing), but
   fixed keeps it pinned to the viewport instead of scrolling away.
   z-index sits below .site-nav (500) so the floating nav always wins. */
.scrollline {
  position: fixed;
  top: var(--scrollline-top, 24px);
  bottom: var(--scrollline-bottom, 110px);
  right: var(--scrollline-right, 10px);
  width: 2px;
  z-index: 400;
  pointer-events: none;
}

/* Nothing to scroll — no indicator at all. */
.scrollline.is-idle { display: none; }

/* Invisible grab strip, wider than the line so a 2px target is catchable.
   Only interactive on real pointers; on touch the line stays a pure indicator. */
.scrollline-hit {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 20px;
  transform: translateX(-50%);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .scrollline-hit { pointer-events: auto; }
}

/* The line itself. Fixed height — never resizes with page length. */
.scrollline-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: var(--scrollline-thumb-h, 60px);
  background: var(--lines, #A2A2A2);
  opacity: 0;
  /* Slow out when idle... */
  transition: opacity 0.4s ease;
  will-change: transform;
}

/* ...fast in the moment scrolling starts. */
.scrollline.is-visible .scrollline-thumb {
  opacity: 1;
  transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .scrollline-thumb { transition: none; }
}