/* The page scrollbar is a physical Paint prop. Wheel and touch stay native. */
html.joint-scroll-ready{scrollbar-width:none}
html.joint-scroll-ready::-webkit-scrollbar{display:none;width:0;height:0}
.joint-scrollbar{
  /* One upright bitmap scales uniformly; its painted body stays inside the lane. */
  --scroll-joint-height:600px;
  --scroll-joint-left:-180px;
  --scroll-joint-top:0px;
  --scroll-thumb-size:100%;
  --scroll-thumb-offset:0px;
  position:fixed;
  z-index:49;
  right:0;
  top:max(14px,env(safe-area-inset-top));
  bottom:max(14px,env(safe-area-inset-bottom));
  width:44px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  cursor:pointer;
  outline:none;
}
.joint-scrollbar::before{
  content:'';
  position:absolute;
  width:calc(100dvh - 28px);
  height:5px;
  top:50%;
  left:50%;
  background:url('/assets/paint-stroke.webp') center/100% 1800% no-repeat;
  transform:translate(-50%,-50%) rotate(90deg);
  opacity:.22;
  pointer-events:none;
}
.scroll-joint-thumb{
  position:absolute;
  left:0;
  top:0;
  width:44px;
  height:var(--scroll-thumb-size);
  transform:translateY(var(--scroll-thumb-offset));
  cursor:grab;
  overflow:hidden;
  filter:drop-shadow(1px 2px 0 #24271e3d);
  transition:filter .25s;
}
.scroll-joint-thumb > img[data-scroll-joint]{
  position:absolute;
  width:auto;
  height:var(--scroll-joint-height);
  max-width:none;
  left:var(--scroll-joint-left);
  top:var(--scroll-joint-top);
  clip-path:inset(var(--scroll-body-clip-top,0px) 46.3% 0 46.5%);
  pointer-events:none;
}
.scroll-joint-ember{
  position:absolute;
  z-index:2;
  left:0;
  top:0;
  width:44px;
  height:var(--scroll-ember-height,80px);
  overflow:hidden;
  pointer-events:none;
  mask-image:linear-gradient(to bottom,#000 calc(100% - var(--scroll-seam-blend,12px)),transparent 100%);
}
.scroll-joint-ember img{
  position:absolute;
  width:auto;
  height:var(--scroll-joint-height);
  max-width:none;
  left:var(--scroll-ember-left, -180px);
  top:var(--scroll-ember-top, -7px);
  clip-path:inset(0 46.3% 0 46.5%);
}
.joint-scrollbar:hover::before,.joint-scrollbar:focus-visible::before{opacity:.5}
.joint-scrollbar:focus-visible .scroll-joint-thumb{outline:2px dashed var(--orange);outline-offset:-5px}
.joint-scrollbar.is-smouldering .scroll-joint-thumb{filter:contrast(1.12) saturate(1.6) drop-shadow(0 0 3px #f5662780)}
.joint-scrollbar.is-dragging,.joint-scrollbar.is-dragging .scroll-joint-thumb{cursor:grabbing}
.reader-open .joint-scrollbar,.loader-active .joint-scrollbar,.smoke-pending .joint-scrollbar{visibility:hidden;pointer-events:none}
@media(max-width:850px){
  html.joint-scroll-ready body{padding-right:36px}
  .joint-scroll-ready .floating-inhale{right:42px}
}
@media(prefers-reduced-motion:reduce){.scroll-joint-thumb{transition:none}}
@media(forced-colors:active){
  html.joint-scroll-ready{scrollbar-width:auto}
  html.joint-scroll-ready::-webkit-scrollbar{display:initial;width:initial;height:initial}
  .joint-scrollbar{display:none}
  html.joint-scroll-ready body{padding-right:0}
}