/* Hallmark · component: scrollbar · genre: editorial · theme: manifesto
 * States: default, hover, focus, active, disabled, loading, error, success.
 * Pre-emit critique: P5 H4 E4 S5 R4 V4. */
html{scrollbar-color:var(--color-accent) var(--color-paper);scrollbar-width:thin}
.scroll-rail{display:none}
@media(min-width:901px) and (min-height:501px) and (pointer:fine) and (forced-colors:none){
  html.has-scroll-rail{scrollbar-width:none}
  html.has-scroll-rail::-webkit-scrollbar{display:none}
  .has-scroll-rail body{padding-right:52px}
  .has-scroll-rail .masthead{left:calc(50% - 26px);width:calc(100% - 116px)}
  .has-scroll-rail .nav-progress{display:none}
  .has-scroll-rail .scroll-rail{display:block}
  .scroll-rail{position:fixed;z-index:105;right:0;top:0;bottom:0;width:52px;background:var(--color-paper);color:var(--color-accent);font-family:var(--font-body);user-select:none}
  .rail-caption{position:absolute;top:36px;left:20px;writing-mode:vertical-rl;font-size:9px;letter-spacing:.22em;line-height:12px}
  .rail-track{position:absolute;inset:116px 4px 82px;width:44px;cursor:pointer;touch-action:none;border-radius:var(--radius-pill)}
  .rail-track::before{content:'';position:absolute;inset:0 20px;background:var(--color-wash);border-radius:var(--radius-pill)}
  .rail-track::after{content:'';position:absolute;inset:0 10px 0 29px;background:repeating-linear-gradient(to bottom,var(--color-line) 0 1px,transparent 1px 16px);opacity:.65;pointer-events:none}
  .rail-fill{position:absolute;top:0;left:21px;width:2px;height:100%;background:var(--color-accent);transform-origin:top;transform:scaleY(var(--rail-progress,0));opacity:.35;pointer-events:none}
  .rail-thumb{position:absolute;z-index:2;top:0;left:0;width:44px;height:var(--rail-thumb-height,64px);transform:translateY(var(--rail-thumb-y,0px));cursor:grab;touch-action:none}
  .rail-grip{position:absolute;inset:0 17px;background:var(--color-accent);border-radius:var(--radius-pill);transform:scaleY(var(--rail-stretch,1));transition:inset 240ms var(--ease-out),transform 180ms var(--ease-out);box-shadow:0 2px 8px var(--color-shadow)}
  .rail-grip::after{content:'';position:absolute;top:50%;left:3px;right:3px;height:16px;transform:translateY(-50%);border-top:1px solid var(--color-paper);border-bottom:1px solid var(--color-paper);opacity:.8}
  .rail-peek{position:absolute;right:48px;top:50%;display:flex;align-items:center;gap:14px;min-width:176px;padding:14px 18px;background:var(--color-accent);color:var(--color-paper);border-radius:18px 18px 4px 18px;transform:translate(8px,-50%) scale(.96);transform-origin:right center;opacity:0;pointer-events:none;transition:opacity 180ms var(--ease-out),transform 240ms var(--ease-out);box-shadow:0 6px 24px var(--color-shadow);white-space:nowrap}
  .rail-peek{border:1px solid var(--color-wine-line)}
  .rail-peek-number{font:36px/1 var(--font-display);font-variant-numeric:tabular-nums;min-width:35px}
  .rail-peek-copy{display:grid;gap:4px;font-size:12px;line-height:1.2}
  .rail-peek-copy small{font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
  .rail-track:hover .rail-grip,.rail-track:focus-visible .rail-grip,.rail-track.is-hover .rail-grip,.rail-track.is-focus .rail-grip{inset-inline:14px}
  .rail-track:hover .rail-peek,.rail-track:focus-visible .rail-peek,.scroll-rail.is-dragging .rail-peek,.rail-track.is-hover .rail-peek,.rail-track.is-focus .rail-peek{opacity:1;transform:translate(0,-50%) scale(1)}
  .rail-track:focus-visible,.rail-track.is-focus{outline:2px solid var(--color-accent);outline-offset:0}
  .rail-track:active .rail-grip,.scroll-rail.is-dragging .rail-grip,.rail-track.is-active .rail-grip{inset-inline:12px;background:var(--color-ink)}
  .scroll-rail.is-dragging .rail-thumb,.scroll-rail.is-dragging .rail-track{cursor:grabbing}
  .rail-markers{position:absolute;inset:116px 4px 82px;pointer-events:none}
  .rail-stop{position:absolute;right:0;width:44px;height:44px;transform:translateY(-50%);border:0;background:transparent;padding:0;pointer-events:auto;border-radius:var(--radius-pill);color:var(--color-accent)}
  .rail-stop::after{content:'';position:absolute;right:7px;top:20px;width:5px;height:5px;border-radius:50%;background:var(--color-accent);transition:transform 180ms var(--ease-out)}
  .rail-stop span{position:absolute;right:46px;top:5px;padding:8px 12px;border-radius:var(--radius-pill);background:var(--color-accent);color:var(--color-paper);font-size:11px;line-height:18px;white-space:nowrap;opacity:0;transform:translateX(6px);pointer-events:none;transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
  .rail-stop:hover span,.rail-stop:focus-visible span{opacity:1;transform:none}
  .rail-stop:hover::after,.rail-stop[aria-current]::after{transform:scale(1.6)}
  .rail-stop:focus-visible,.rail-percent:focus-visible{outline:2px solid var(--color-accent);outline-offset:0}
  .rail-stop:active::after{transform:scale(.8)}
  .rail-percent{position:absolute;bottom:22px;left:4px;display:grid;place-content:center;gap:1px;width:44px;height:48px;padding:0;border:0;background:transparent;color:var(--color-accent);border-radius:12px;font:26px/1 var(--font-display);font-variant-numeric:tabular-nums;cursor:pointer}
  .rail-percent small{font:8px/1.2 var(--font-body);letter-spacing:.06em}
  .rail-percent:hover{background:var(--color-wash)}
  .rail-percent:active{transform:translateY(1px)}
  .scroll-rail[data-state=success] .rail-percent{background:var(--color-accent);color:var(--color-paper)}
  .scroll-rail[data-state=success] .rail-grip{background:var(--color-ink)}
  .scroll-rail[data-state=loading] .rail-thumb{opacity:.35}
  .scroll-rail[data-state=loading] .rail-track{cursor:progress}
  .rail-track[aria-disabled=true],.scroll-rail[data-state=disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
  .scroll-rail[data-state=error]{display:none}
}
@media(prefers-reduced-motion:reduce){.scroll-rail *{transition:none!important}.rail-grip{transform:none}}
@media print{.scroll-rail{display:none!important}.has-scroll-rail body{padding-right:0}.has-scroll-rail .masthead{left:auto;width:auto}}