/* Scrollbars: thin, and invisible until you point at the scrolling area. Touch devices already use their own overlay bars. */
:root{--sb-on:rgba(21,21,27,.30);--sb-hover:rgba(21,21,27,.52)}
.dark-surface,.pv-page{--sb-on:rgba(255,255,255,.28);--sb-hover:rgba(255,255,255,.5)}
@supports (scrollbar-color:auto){
  *{scrollbar-width:thin;scrollbar-color:transparent transparent}
  *:hover:not(html),[data-scrolling]{scrollbar-color:var(--sb-on) transparent}      /* a panel shows its bar while you point at it or scroll it; the page bar only while it moves */
}
@supports not (scrollbar-color:auto){
  ::-webkit-scrollbar{width:9px;height:9px}
  ::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
  ::-webkit-scrollbar-thumb{background-color:transparent;border:2px solid transparent;background-clip:content-box;border-radius:9px}
  *:hover:not(html)::-webkit-scrollbar-thumb,[data-scrolling]::-webkit-scrollbar-thumb{background-color:var(--sb-on)}::-webkit-scrollbar-thumb:hover{background-color:var(--sb-hover)}
}
/* strips that scroll sideways (tabs, chip rows) need no bar at all */
.tabs,.mnav,.chips,.strip{scrollbar-width:none}.tabs::-webkit-scrollbar,.mnav::-webkit-scrollbar,.chips::-webkit-scrollbar,.strip::-webkit-scrollbar{display:none}
/* scrolling inside a panel never drags the page behind it */
dialog,.menu,.side,.recents,.thread,.live,.segs,.sgrid{overscroll-behavior:contain}