/* ============================================================
   LPWD Scrollbar Standard — main-colour scrollbar, every project
   (past · present · future). Build-once agency component.

   Drop-in: link/append this AFTER the project's token file so the
   vars resolve. Each project's MAIN colour drives the thumb.

   Per-project override (only if the project doesn't expose --accent-1):
     :root { --scrollbar-accent: var(--primary);            }
     :root { --scrollbar-accent-strong: var(--primary-dark); }
   Defaults below fall back to --accent-1 / --accent-2, then violet.
   ============================================================ */
:root {
  --scrollbar-accent:        var(--accent-1, #8b5cf6);
  --scrollbar-accent-strong: var(--accent-2, #7c3aed);
  --scrollbar-track:         color-mix(in srgb, var(--scrollbar-accent) 12%, transparent);
}

/* The standard: Firefox 64+, Chrome/Edge 121+, Safari 26.2+ (scrollbar-width from Safari 18.2). */
html { scrollbar-width: thin; scrollbar-color: var(--scrollbar-accent) var(--scrollbar-track); }

/* Reserve the scrollbar gutter in BOTH scroll states so a scroll-locking overlay
   (modal, off-canvas menu, search/cookie gate that sets overflow:hidden on html/body)
   can't remove the scrollbar and widen the layout — the ~10px snap-shift measured on
   michaelis. Cost: the gutter is reserved even on pages too short to scroll.
   Verify with scripts/verify-scroll-lock-shift.mjs (Playwright headless hides this
   whole bug class via its default --hide-scrollbars). */
html { scrollbar-gutter: stable; }

/* Legacy fallback — ONLY where scrollbar-color is unsupported (Safari before 26.2, old Chromium).
   A browser that supports scrollbar-color ignores these pseudo-elements once it is set, so the
   thumb radius and hover colour below never rendered in Chrome 121+ — the guard makes the file
   say what the browser does. The custom properties cascade in; nothing is duplicated. */
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar        { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track  { background: var(--scrollbar-track); }
  ::-webkit-scrollbar-thumb  { background: var(--scrollbar-accent); border-radius: var(--radius-m, 6px); }
  ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-accent-strong); }
}