/* Compact desktop rail; native scrolling and native touch affordances remain. */
:root{scrollbar-color:var(--cf-blue,#019edb) var(--cf-night,#080b12)}
/* Keep the native gutter's layout and viewport units unchanged on enhancement.
   Transparent chrome avoids the late width/centred-rail jump caused by none. */
html.has-scroll-rail{scrollbar-color:transparent transparent}
html.has-scroll-rail::-webkit-scrollbar-track,html.has-scroll-rail::-webkit-scrollbar-thumb{background:transparent}
.scroll-rail{position:fixed;z-index:31;right:max(2px,env(safe-area-inset-right));top:50%;width:28px;height:clamp(128px,20vh,180px);transform:translateY(-50%);touch-action:none;user-select:none;cursor:grab;outline:none;opacity:.62;transition:opacity .25s ease}
.scroll-rail[hidden]{display:none!important}
.scroll-rail-track{position:absolute;inset:0 auto 0 12px;width:3px;border-radius:3px;background:#29364a;box-shadow:0 0 0 1px #080b1266;pointer-events:none}
.scroll-rail-thumb{position:absolute;top:0;left:-1px;width:5px;min-height:28px;border-radius:4px;background:var(--cf-blue,#019edb);box-shadow:0 0 0 #019edb00;transition:box-shadow .25s ease;pointer-events:none}
.scroll-rail:is(:hover,:focus-visible,[data-active],[data-dragging]){opacity:1}
.scroll-rail:is(:hover,:focus-visible,[data-active],[data-dragging]) .scroll-rail-thumb{box-shadow:0 0 9px #019edb66}
.scroll-rail:focus-visible{outline:1px solid var(--cf-light);outline-offset:1px;border-radius:8px}
.scroll-rail[data-dragging]{cursor:grabbing}
html.scroll-rail-dragging,html.scroll-rail-dragging *{user-select:none!important;cursor:grabbing!important}
html.has-dialog .scroll-rail{visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:reduce){.scroll-rail,.scroll-rail-thumb{transition:none}}
html[data-motion=off] .scroll-rail,html[data-motion=off] .scroll-rail-thumb{transition:none}
@media(forced-colors:active){:root{scrollbar-color:auto}.scroll-rail{display:none}}
