/* Perfect Scrollbar from Vristo: overlay rails, 6px thumb and 200ms fade.
   Square thumb ends (no radius), flush with the top and bottom edge at the scroll limits.
   Rails appear while the pointer is over the scroll area or over the panel (card) that contains it.
   Loaded only by the Vristo portal; public/auth pages keep their own styles. */
html[data-portal-ui="vristo"] {
  --vristo-scroll-thumb: color-mix(in srgb, var(--color-base-content) 32%, transparent);
  --vristo-scroll-thumb-hover: color-mix(in srgb, var(--color-base-content) 48%, transparent);
  scrollbar-width: thin;
  scrollbar-color: var(--vristo-scroll-thumb) transparent;
}

html[data-portal-ui="vristo"] [data-vristo-scroll] {
  overflow: hidden !important;
  overflow-anchor: none;
  scrollbar-width: none !important;
  scrollbar-gutter: auto !important;
  touch-action: auto;
}
html[data-portal-ui="vristo"] [data-vristo-scroll="relative"] { position: relative; }
html[data-portal-ui="vristo"] [data-vristo-scroll]::-webkit-scrollbar { display: none; }

html[data-portal-ui="vristo"] [data-vristo-scroll] > :is(.ps__rail-x, .ps__rail-y) {
  position: absolute !important;
  display: none;
  z-index: 5;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: 0;
  transition: opacity .2s linear, background-color .2s linear;
}
html[data-portal-ui="vristo"] [data-vristo-scroll] > .ps__rail-y { right: 0; width: 15px; }
html[data-portal-ui="vristo"] [data-vristo-scroll] > .ps__rail-x { bottom: 0; height: 15px; }
html[data-portal-ui="vristo"] [data-vristo-scroll].ps--active-y > .ps__rail-y,
html[data-portal-ui="vristo"] [data-vristo-scroll].ps--active-x > .ps__rail-x { display: block; }
html[data-portal-ui="vristo"] [data-vristo-scroll]:is(:hover, :focus-within, .ps--scrolling-x, .ps--scrolling-y) > :is(.ps__rail-x, .ps__rail-y),
html[data-portal-ui="vristo"] :is(.card, .panel):hover [data-vristo-scroll] > :is(.ps__rail-x, .ps__rail-y) { opacity: .6; }
html[data-portal-ui="vristo"] [data-vristo-scroll] > :is(.ps__rail-x, .ps__rail-y):is(:hover, .ps--clicking) { opacity: 1; }
html[data-portal-ui="vristo"] [data-vristo-scroll] :is(.ps__thumb-x, .ps__thumb-y) {
  position: absolute;
  border-radius: 0;
  background: var(--vristo-scroll-thumb);
  transition: background-color .2s linear, width .2s ease-in-out, height .2s ease-in-out;
}
html[data-portal-ui="vristo"] [data-vristo-scroll] .ps__thumb-y { right: 2px; width: 6px; }
html[data-portal-ui="vristo"] [data-vristo-scroll] .ps__thumb-x { bottom: 2px; height: 6px; }
html[data-portal-ui="vristo"] [data-vristo-scroll] > .ps__rail-y:is(:hover, .ps--clicking) > .ps__thumb-y { width: 9px; background: var(--vristo-scroll-thumb-hover); }
html[data-portal-ui="vristo"] [data-vristo-scroll] > .ps__rail-x:is(:hover, .ps--clicking) > .ps__thumb-x { height: 9px; background: var(--vristo-scroll-thumb-hover); }
html[data-portal-ui="vristo"] [data-vristo-scroll] :is(.ps__thumb-x, .ps__thumb-y):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Native document scrollbar and JS/touch fallback: no Windows arrow buttons. */
@supports selector(::-webkit-scrollbar) {
  html[data-portal-ui="vristo"] { scrollbar-width: auto; scrollbar-color: auto; }
  html[data-portal-ui="vristo"]::-webkit-scrollbar { width: 8px; height: 8px; }
  html[data-portal-ui="vristo"]::-webkit-scrollbar-track { background: transparent; }
  html[data-portal-ui="vristo"]::-webkit-scrollbar-thumb { border: 0 solid transparent; border-inline-width: 1px; border-radius: 0; background: var(--vristo-scroll-thumb); background-clip: padding-box; }
  html[data-portal-ui="vristo"]::-webkit-scrollbar-thumb:hover { background: var(--vristo-scroll-thumb-hover); }
  html[data-portal-ui="vristo"]::-webkit-scrollbar-button,
  html[data-portal-ui="vristo"] ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  html[data-portal-ui="vristo"]::-webkit-scrollbar-corner,
  html[data-portal-ui="vristo"] ::-webkit-scrollbar-corner { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-portal-ui="vristo"] [data-vristo-scroll] > :is(.ps__rail-x, .ps__rail-y),
  html[data-portal-ui="vristo"] [data-vristo-scroll] :is(.ps__thumb-x, .ps__thumb-y) { transition: none; }
}