/* The page scrollbar, replaced. Mirrors packages/ui/src/globals.css - the
   landing pages cannot import from the design system, so the two are kept
   deliberately identical instead. */

/* The native bar goes only where scroll-rail.js is running and has put the
   attribute there. No script, no hidden scrollbar. */
html[data-scroll-rail] {
  scrollbar-width: none;
}

html[data-scroll-rail]::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Strips that scroll sideways past a peeking next card: the content says it
   continues, so the bar underneath it is only noise. */
.scroll-quiet {
  scrollbar-width: none;
}

.scroll-quiet::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.scroll-rail {
  position: fixed;
  inset-block: 0;
  right: 0;
  z-index: 45;
  width: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease, ease);
}

.scroll-rail[data-awake="yes"] {
  opacity: 1;
}

.scroll-rail-thumb {
  position: absolute;
  top: 0;
  right: 3px;
  width: 5px;
  border-radius: 999px;
  /* --signature-ink at 42%. A hint, not a stripe of brand colour. */
  background: rgb(200 25 106 / .42);
  touch-action: none;
  transition: width .18s var(--ease, ease), background-color .18s var(--ease, ease);
}

/* Grabbable only while it is on screen: an invisible thumb that swallowed
   clicks down the right edge of the page would be a trap. */
.scroll-rail[data-awake="yes"] .scroll-rail-thumb {
  pointer-events: auto;
}

.scroll-rail-thumb:hover,
.scroll-rail-thumb:active {
  width: 7px;
  background: rgb(200 25 106 / .78);
}

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

@media print {
  .scroll-rail {
    display: none;
  }
}