/* Black Zero scroll bar — one look for the website (views/page.ejs, views/maintenance.ejs) and the admin
   (admin/index.html, admin/login.html). Behaviour: public/js/scrollbar.js.
   White rounded thumb on black, no arrows. Its bright end points the way the scroller is moving: down = bottom,
   up = top (--sb-up 0 → 1 on the scrolling element, faded by scrollbar.js). Horizontal bars: right / left.
   Sizes: --sb-w = the page's own bar (website .7vw, admin 9px in admin.css / login.html), --sb-in = bars inside boxes.
   A box that hides its bar (scrollbar-width: none / ::-webkit-scrollbar { display: none }) keeps it hidden.
   Don't put scrollbar-width / scrollbar-color on a box: in Chrome that switches this look off for it. */
@property --sb-up { syntax: '<number>'; inherits: false; initial-value: 0; }

::-webkit-scrollbar { width: var(--sb-in, 7px); height: var(--sb-in, 7px); background: transparent; }
/* the page's own bar (Chrome takes it from <body>, Safari from <html>) */
html::-webkit-scrollbar, body::-webkit-scrollbar { width: var(--sb-w, .7vw); height: var(--sb-w, .7vw); background: #000; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  --sb-up: inherit;
  background: linear-gradient(rgba(255,255,255,var(--sb-up)), rgba(255,255,255,calc(1 - var(--sb-up))));
  border-radius: 20px;
}
::-webkit-scrollbar-thumb:horizontal {
  background: linear-gradient(to right, rgba(255,255,255,var(--sb-up)), rgba(255,255,255,calc(1 - var(--sb-up))));
}

/* Firefox: no gradient there — a thin white thumb on black */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: #fff #000; scrollbar-width: thin; }
  body { scrollbar-color: #fff transparent; }
  :where(body *) { scrollbar-width: thin; }
}