/* A precise exposure marker; visible only during scrolling or keyboard use. */
html.has-page-trace{scrollbar-width:none;scrollbar-gutter:auto}
html.has-page-trace::-webkit-scrollbar{display:none;width:0;height:0}
.page-trace{position:fixed;z-index:12;right:max(0px,env(safe-area-inset-right));top:max(118px,calc(env(safe-area-inset-top) + 86px));bottom:max(84px,calc(env(safe-area-inset-bottom) + 54px));width:24px;opacity:0;touch-action:none;user-select:none;cursor:pointer;contain:layout style;--page-progress:0;--trace-thumb:30px;--trace-offset:0px;transition:opacity .32s ease}
.trace-track{position:absolute;top:0;bottom:0;left:12px;width:1px;background:linear-gradient(180deg,transparent,var(--accent-line,#a65b63) 12% 88%,transparent);opacity:.25;pointer-events:none}
.trace-cursor{position:absolute;left:0;top:var(--trace-offset);width:100%;height:var(--trace-thumb);cursor:grab}
.trace-cursor:before{content:"";position:absolute;left:10px;top:0;bottom:0;width:5px;background:var(--accent-line,#a65b63);clip-path:polygon(2px 0,100% 0,100% calc(100% - 3px),3px 100%,0 100%,0 2px);transform-origin:right center;transition:transform .16s cubic-bezier(.2,.8,.2,1),background-color .16s ease}
.trace-cursor span{position:absolute;left:12px;top:7px;bottom:7px;width:1px;background:var(--accent-soft,#d7b5b9);opacity:.85;transform-origin:center;transition:transform .16s cubic-bezier(.2,.8,.2,1)}
.page-trace:is(:focus-visible,.is-moving,.is-dragging){opacity:.9}
.page-trace:focus-visible{outline:none}
.page-trace.is-dragging,.page-trace.is-dragging .trace-cursor{cursor:grabbing}
body.opening-active:not(.opening-settled) .page-trace,body:has(dialog[open]) .page-trace{visibility:hidden;pointer-events:none}
@media(max-width:750px){.page-trace{width:20px;top:max(108px,calc(env(safe-area-inset-top) + 76px));bottom:max(76px,calc(env(safe-area-inset-bottom) + 48px))}.trace-track{left:10px}.trace-cursor:before{left:8px;width:4px}.trace-cursor span{left:10px}}
@media(max-height:560px){.page-trace{top:86px;bottom:50px}}
@media(prefers-reduced-motion:reduce){.page-trace{transition:none}}
@media(forced-colors:active){.page-trace{display:none}html.has-page-trace{scrollbar-width:auto}html.has-page-trace::-webkit-scrollbar{display:initial;width:auto;height:auto}}

/* The approved cut marker grows toward the page, never beyond the screen. */
.page-trace:is(.is-dragging,:focus-visible) .trace-cursor:before{transform:scale(2.2,1.22);background:var(--accent-soft,#c0b8b8)}
.page-trace:is(.is-dragging,:focus-visible) .trace-cursor span{transform:translateX(-2px) scaleY(1.16)}
@media(hover:hover) and (pointer:fine){.page-trace:hover:not(.is-dragging):not(:focus-visible) .trace-cursor:before{transform:scale(1.6,1.12)}}
@media(prefers-reduced-motion:reduce){.trace-cursor:before,.trace-cursor span{transition:none}}

/* No rectangular rail outline; keyboard focus stays local to the thumb. */
.page-trace{outline:none;border:0;background:none}.page-trace:focus-visible:not(.is-pointer) .trace-cursor:before{box-shadow:inset 0 0 0 1px var(--accent-soft)}
/* Pointer focus must not pin the rail on-screen after a finished drag. */
.page-trace.is-pointer:not(.is-moving):not(.is-dragging){opacity:0}
@media(hover:hover) and (pointer:fine){.page-trace:hover,.page-trace.is-pointer:hover{opacity:.9}}