/* Custom native scroll bar (demo-only extra). Progressive enhancement:
   standard scrollbar-* properties (Firefox, Chromium 121+) and ::-webkit-scrollbar (Safari, older Chromium).
   Still the real native scroll bar: visible, draggable, keyboard and screen-reader friendly.
   Touch devices with overlay scroll bars keep their native behaviour. */

:root {
  --thumb: #6b7a88;          /* 3.7:1 against the track */
  --thumb-hover: #52606d;
  --thumb-active: #13293d;
  --track: #e9edf1;
}
.scroll-dark {
  --thumb: #9db2c6;          /* 5.2:1 against the dark track */
  --thumb-hover: #c3d2dd;
  --thumb-active: #ffffff;
  --track: #1c3a55;
}

/* Reserve gutter so locking scroll (menu, preloader) never shifts the layout. */
html { scrollbar-gutter: stable; }

@media (hover: hover) and (pointer: fine) {
  html, .scroll-thin { scrollbar-width: thin; scrollbar-color: var(--thumb) var(--track); }

  /* WebKit/Blink fallback (ignored where scrollbar-color is supported) */
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: var(--track); }
  ::-webkit-scrollbar-thumb { min-height: 40px; background: var(--thumb); border: 3px solid var(--track); border-radius: 999px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--thumb-hover); }
  ::-webkit-scrollbar-thumb:active { background: var(--thumb-active); }
  ::-webkit-scrollbar-corner { background: var(--track); }
  .scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
  .scroll-thin::-webkit-scrollbar-thumb { border-width: 2px; }
}