/* Native fallback remains usable until the shared enhancement is attached. */
:root { --brace-scrollbar-size: 14px; }
:where(*) { scrollbar-width: thin; scrollbar-color: #b8c0c5 transparent; }
:where(*)::-webkit-scrollbar { width: 14px; height: 14px; }
:where(*)::-webkit-scrollbar-track, :where(*)::-webkit-scrollbar-corner { background: transparent; }
:where(*)::-webkit-scrollbar-thumb { background-color: #b8c0c5; background-clip: padding-box; border: 3px solid transparent; border-radius: 7px; }
[data-brace-scrollbars] { scrollbar-width: none !important; }
[data-brace-scrollbars]::-webkit-scrollbar { display: none !important; }
/* Navigation rows keep native scrolling/touch, without a visible rail or gutter.
   This is intentionally self-only: nested menus still get content scrollbars. */
[data-scrollbars="navigation"] { scrollbar-width: none !important; }
[data-scrollbars="navigation"]::-webkit-scrollbar { display: none !important; }
/* WebKit can take the viewport scrollbar from body even when html scrolls. */
html[data-brace-scrollbars] > body { scrollbar-width: none !important; }
html[data-brace-scrollbars] > body::-webkit-scrollbar { display: none !important; }
.brace-scrollbars {
  left: 0; top: 0; margin: 0; padding: 0; border: 0;
  box-sizing: border-box; pointer-events: none; z-index: 1;
  --brace-scrollbar-thumb: #b8c0c5;
  --brace-scrollbar-active: #616161;
}
.brace-scrollbars[hidden], .brace-scrollbar[hidden] { display: none !important; }
.brace-scrollbars[data-gutter="external"] { z-index: 0; }
.brace-scrollbar {
  position: absolute; box-sizing: border-box; margin: 0; padding: 0; border: 0;
  background: transparent; pointer-events: auto;
  touch-action: none; user-select: none; cursor: pointer;
}
.brace-scrollbar[data-axis="y"] { top: 0; right: 0; width: 14px; }
.brace-scrollbar[data-axis="x"] { bottom: 0; left: 0; height: 14px; }
.brace-scrollbar-thumb {
  position: absolute; box-sizing: border-box; margin: 0;
  border: 0; background: transparent;
}
/* Keep the whole 14px thumb draggable. Paint an 8px capsule separately so
   fractional browser zoom cannot widen it by rounding transparent borders. */
.brace-scrollbar-thumb::before {
  content: ""; position: absolute; inset: 3px;
  border-radius: 4px; background-color: var(--brace-scrollbar-thumb);
  pointer-events: none;
}
.brace-scrollbar[data-axis="y"] .brace-scrollbar-thumb { width: 100%; }
.brace-scrollbar[data-axis="x"] .brace-scrollbar-thumb { height: 100%; }
.brace-scrollbar:hover .brace-scrollbar-thumb::before,
.brace-scrollbar:focus-visible .brace-scrollbar-thumb::before { background-color: var(--brace-scrollbar-active); }
.brace-scrollbar:focus-visible { outline: 2px solid #0070c9; outline-offset: -2px; }
@media (forced-colors: active) {
  .brace-scrollbars { forced-color-adjust: none; --brace-scrollbar-thumb: ButtonText; --brace-scrollbar-active: Highlight; }
  .brace-scrollbar:focus-visible { outline-color: Highlight; }
}
@media print { .brace-scrollbars { display: none !important; } }