/* One scrollbar for the whole site (Kate, 22 Oct 2026): thin, no arrows, no track, a soft pill that is a light tone on a dark page and a dark tone
   on a light page, a little stronger under the pointer. It takes the colour of the text it scrolls (currentColor), so it follows the dashboard's
   dark and light themes and every page of its own without a rule per page: light text gives a light pill, dark text a dark one.
   The page's own scrollbar, the side rail, tables, menus and lists all read from this. A rule elsewhere that sets its own scrollbar-color or
   ::-webkit-scrollbar would win over this on that one element, so there should be none (display:none on a scroller's bar is fine). */
:root{--sb:rgba(128,128,128,.5);--sb-h:rgba(128,128,128,.75)}
@supports (color:color-mix(in srgb,red,blue)){:root{--sb:color-mix(in srgb,currentColor 30%,transparent);--sb-h:color-mix(in srgb,currentColor 55%,transparent)}}
* {scrollbar-width:thin;scrollbar-color:var(--sb) transparent}
/* Chrome, Edge and Safari: draw it by hand so it can have a hover and no arrow buttons; scrollbar-color is reset or it would switch this off. */
@supports selector(::-webkit-scrollbar){
  *{scrollbar-width:auto;scrollbar-color:auto}
  *::-webkit-scrollbar{width:10px;height:10px;background:transparent}
  *::-webkit-scrollbar-track,*::-webkit-scrollbar-corner{background:transparent}
  *::-webkit-scrollbar-button{display:none;width:0;height:0}
  *::-webkit-scrollbar-thumb{background:var(--sb);background-clip:padding-box;border:3px solid transparent;border-radius:999px;min-height:40px;min-width:40px}
  *::-webkit-scrollbar-thumb:hover,*::-webkit-scrollbar-thumb:active{background:var(--sb-h);background-clip:padding-box}
}