/* ── App-wide scrollbar standard — crisp slate-blue pill on a clean track ─────────────
   ROOT-CAUSE NOTE (keep these two systems apart — do not merge):
   Modern Chromium/Edge honour the STANDARD scrollbar-width/scrollbar-color; the moment either
   is set, Chromium drops the ::-webkit-scrollbar pill for the native OS bar (which draws arrows
   on Windows). So the standard props are gated to Firefox only; Chromium/WebKit get the pure
   ::-webkit-scrollbar pill.
   CRISPNESS NOTE: the thumb is inset with a TRANSPARENT border (+ background-clip:content-box),
   NOT an opaque track-coloured border. A transparent inset lets the track show through cleanly
   so the slate pill has one hard edge (no light ring / halo). The track is flat (no inset
   box-shadow) so it reads as one continuous channel. No filter/blur/box-shadow anywhere. */
:root {
  --sb-track:       #e9edf4;   /* clean light-slate channel */
  --sb-thumb:       #5f7aa3;   /* solid slate-blue pill */
  --sb-thumb-hover: #425b7e;   /* deeper slate-blue on hover / drag */
}
html { scrollbar-gutter: stable; }   /* reserve the bar's width → no horizontal layout shift */

/* Firefox ONLY (engines WITHOUT ::-webkit-scrollbar). Never reaches Chromium. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-track); }
}

/* Chromium / Edge / Safari — crisp slate pill sliding inside a clean track */
::-webkit-scrollbar { width: 15px; height: 15px; }
::-webkit-scrollbar-track { background: var(--sb-track); border-radius: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border-radius: 10px;
  border: 3px solid transparent;      /* transparent inset → track shows through, crisp edge, no halo */
  background-clip: content-box;
  transition: background-color .18s ease;
}
::-webkit-scrollbar-thumb:hover  { background: var(--sb-thumb-hover); }
::-webkit-scrollbar-thumb:active { background: var(--sb-thumb-hover); }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }   /* remove up/down arrows */
::-webkit-scrollbar-corner { background: var(--sb-track); }

/* ── Nothing to scroll → leave the reserved gutter unpainted ───────────────────────────
   scrollbar-gutter:stable above keeps the ~15px gutter reserved on every page so nothing
   shifts sideways when a scrollbar comes or goes. On a page that cannot scroll, Chromium still
   paints the track into that gutter, which reads as a broken scrollbar: a channel with no thumb.
   The observer beside the stylesheet link (templates/navbar_v5.html) sets .qv-noscroll on <html>
   in exactly that state. The gutter stays reserved, so nothing moves -- only the paint changes.
   Scoped to the ROOT scrollbar, so a scrollable panel inside the page keeps its own channel. */
html.qv-noscroll::-webkit-scrollbar        { background: transparent; }
html.qv-noscroll::-webkit-scrollbar-track  { background: transparent; }
html.qv-noscroll::-webkit-scrollbar-corner { background: transparent; }