/* The same filling rail as INSTA_GM_V1, in this page's cream palette.
   Keep the blend surface narrow and outside the isolated story stage. */
.page-scrollbar {
  --page-progress-ink: #f6f3ec;
  position: fixed;
  inset: 0 0 0 auto;
  width: 16px;
  z-index: 100;
  pointer-events: none;
  mix-blend-mode: difference;
}
.page-scrollbar[hidden] { display: none; }
.page-scrollbar-track {
  position: absolute;
  inset: 12px 0;
  width: 16px;
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.page-scrollbar-track::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 5px;
  width: 3px;
  height: calc(100% - 12px);
  background: var(--page-progress-ink);
  transform-origin: top;
  transform: scaleY(var(--page-scroll-progress, 0));
  pointer-events: none;
}
.page-scrollbar-track:focus-visible:not([data-pointer-focus]) {
  outline: 2px solid var(--page-progress-ink);
  outline-offset: -2px;
}
.page-scrollbar-marker {
  position: absolute;
  top: 0;
  right: 5px;
  width: 3px;
  height: 12px;
  background: #f6f3ec;
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--page-scroll-offset, 0px));
}
/* Keyboard focus follows the slim line; pointer input never draws a box. */
.page-scrollbar-track:focus-visible:not([data-pointer-focus])::after { background: #fff; }
.page-scrollbar-track:focus-visible:not([data-pointer-focus]) .page-scrollbar-marker { opacity: 1; }
.page-scrollbar-track[data-dragging] { cursor: grabbing; }
html:has(dialog[open]) .page-scrollbar { visibility: hidden; }
html:has(dialog[open]) .page-scrollbar-track { visibility: hidden; pointer-events: none; }
@media screen and (forced-colors: none) {
  /* A failed or disabled script leaves the native page controls available. */
  html[data-page-progress-ready] { scrollbar-width: none; scrollbar-gutter: auto; }
  html[data-page-progress-ready]::-webkit-scrollbar { display: none; width: 0; height: 0; }
}
@media (forced-colors: active), print { .page-scrollbar { display: none; } }
