/* Hide the default page scrollbar; scroll.js draws a thin overlay thumb while the page moves (like macOS). Its class is
   sb-overlay because pages use .sbar for their phone mockups' status bars. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
.sb-overlay { position: fixed; top: 0; right: 3px; width: 6px; height: 100vh; z-index: 95; pointer-events: none; }
.sb-overlay[hidden] { display: none; }
.sb-overlay i { position: absolute; top: 0; right: 0; width: 6px; border-radius: 3px; background: rgba(28,28,30,.34); opacity: 0; transition: opacity .4s ease; will-change: transform; }
.sb-overlay.on i { opacity: 1; transition-duration: .12s; }
/* phones and tablets already draw overlay scrollbars */
@media (hover: none) { .sb-overlay { display: none; } }
/* inner scrolling surfaces stay thin and quiet too */
.sheet-card { scrollbar-width: thin; scrollbar-color: rgba(60,60,67,.25) transparent; }