/* 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; }
/* Every table's heading row stays in view while the table scrolls past (Tario 11-02: on /reserves/ the headings left the
   screen a few rows down). It sticks to the top of the window, or of the box its table scrolls in, on the page's own
   background: --surface (/reserves/), --cream (the squad family's pages), else the browser's. Every page with a table loads
   this file, so a new table gets it too. */
thead th { position: sticky; top: 0; z-index: 2; background: var(--surface, var(--cream, Canvas)); box-shadow: inset 0 -1px var(--grid, var(--rule, rgba(128,128,128,.25))); }