/* Visibility never changes scrollbar dimensions or the available content width. */
:root { --ef-scrollbar-rgb:184,146,0; }
:root:has(body.darkmode), body.darkmode { --ef-scrollbar-rgb:245,197,24; }
@media (prefers-color-scheme:dark) {
  :root:has(body.ef-event-page), body.ef-event-page { --ef-scrollbar-rgb:245,197,24; }
}
* {
  --ef-scrollbar-opacity:0;
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--ef-scrollbar-rgb),calc(var(--ef-scrollbar-opacity) * .8)) transparent;
}
html, .ef-admin-scroll-viewport { scrollbar-gutter:stable; }
html:has(body.ef-standalone-app), html:has(body.ef-event-page) { overflow-y:scroll; }
/* Chromium paints only the canvas colour behind viewport scrollbars. Continue
   the same full-window gradient here; nested tracks remain transparent. */
body.ef-standalone-app::-webkit-scrollbar, body.ef-event-page::-webkit-scrollbar {
  background-image:var(--ef-page-background);
  background-size:100vw 100vh;
  background-position:right top;
  background-repeat:no-repeat;
}
html.ef-modal-scroll-lock:has(body.ef-standalone-app) {
  scrollbar-gutter:auto;
  padding-right:var(--ef-viewport-scrollbar-width,0px);
}
body.ef-modal-scroll-lock.ef-standalone-app {
  width:calc(100% - var(--ef-viewport-scrollbar-width,0px)) !important;
}
/* Desktop administration already owns a full-height, stable inner scroller.
   Reserving a second gutter on html leaves a differently painted strip beside it. */
@media (min-width:861px) {
  html:has(body.ef-admin-entry.ef-adminmode) { scrollbar-gutter:auto; overflow-y:hidden; }
}
/* Chromium may paint the viewport scrollbar using the body's pseudo-element
   even though the actual scrolling element is html. Nested scrollers stay independent. */
html.ef-scrollbar-active > body { --ef-scrollbar-opacity:inherit; }
/* Chromium otherwise prioritizes its native scrollbar-color rendering,
   including the platform arrows, over the custom arrow-free scrollbar. */
@supports selector(::-webkit-scrollbar) {
  * { scrollbar-width:auto; scrollbar-color:auto; }
}
*::-webkit-scrollbar { width:8px; height:8px; background:transparent; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background:transparent; }
*::-webkit-scrollbar-button { display:none; width:0; height:0; }
*::-webkit-scrollbar-thumb {
  min-height:42px;
  border:2px solid transparent;
  border-radius:999px;
  background-clip:padding-box;
  background-color:rgba(var(--ef-scrollbar-rgb),calc(var(--ef-scrollbar-opacity) * .8));
}
/* Time wheels keep their deliberately hidden native scrollbars. */
.ef-time-wheel { scrollbar-width:none; }
.ef-time-wheel::-webkit-scrollbar { display:none; }