/* ============================================================
   xmesh DS · _scroll.css — scrollbar appearance + helpers.

   Two opt-in classes plus a token set. Components don't write
   `::-webkit-scrollbar` rules ad-hoc — they pick a class:

     .scroll-canvas   thin overlay scrollbar tuned for canvas /
                       sidebar / artifact surfaces (uses the
                       --c-text-canvas family so the thumb is
                       visible against the dark canvas in dark
                       theme and against the cream canvas in
                       light theme — single set of rules covers
                       both modes via the canvas token flip).

     .scroll-hidden    hide the scrollbar entirely (still
                       scrollable). Use for inline single-line
                       textareas / horizontal strips where the
                       scrollbar would compete with the chrome.

   Tokens (overridable per-host if needed):
     --c-scrollbar-thumb        resting thumb
     --c-scrollbar-thumb-hover  hover thumb
     --s-scrollbar-w            track width
     --r-scrollbar              thumb radius
   ============================================================ */

:root {
  --s-scrollbar-w: 10px;
  --r-scrollbar:   var(--r-pill);

  /* Card-surface scrollbars — used by .scroll-on-card (not yet wired,
     but reserved). The canvas variant below covers every current
     scrollable in this repo. */
  --c-scrollbar-thumb:       color-mix(in oklab, var(--c-text) 18%, transparent);
  --c-scrollbar-thumb-hover: color-mix(in oklab, var(--c-text) 32%, transparent);

  /* Inverse-surface scrollbars — for shadow-DOM overlay listboxes (xm-select /
     multi-select / autocomplete) that sit on inverse-surface. They must theme
     their OWN scrollbar inside the component sheet: the .scroll-canvas class
     can't cross the shadow boundary, and its canvas ink mis-flips on inverse. */
  --xm-scrollbar-thumb-inverse:       color-mix(in oklab, var(--md-sys-color-inverse-on-surface) 22%, transparent);
  --xm-scrollbar-thumb-inverse-hover: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) 38%, transparent);
}

/* ----- Canvas-rooted scrollables -----
   Thumb uses the canvas ink wash so it auto-flips per theme:
   light-on-dark in dark mode, dark-on-cream in light mode. */
.scroll-canvas {
  scrollbar-width: thin;
  scrollbar-color:
    color-mix(in oklab, var(--c-text-canvas) 22%, transparent)
    transparent;
}
.scroll-canvas::-webkit-scrollbar {
  width:  var(--s-scrollbar-w);
  height: var(--s-scrollbar-w);
}
.scroll-canvas::-webkit-scrollbar-track {
  background: transparent;
}
.scroll-canvas::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--c-text-canvas) 22%, transparent);
  border-radius: var(--r-scrollbar);
  border: 2px solid transparent;
  background-clip: content-box;
}
.scroll-canvas::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--c-text-canvas) 38%, transparent);
  background-clip: content-box;
}
.scroll-canvas::-webkit-scrollbar-corner {
  background: transparent;
}

/* ----- Hide the scrollbar entirely (still scrollable) ----- */
.scroll-hidden {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scroll-hidden::-webkit-scrollbar {
  display: none;
}