/* One quiet scrollbar for pages, panels and horizontal lists. */
:root {
  --suzy-scrollbar-thumb: rgba(112, 132, 154, .36);
  --suzy-scrollbar-hover: rgba(112, 132, 154, .6);
}
@supports (color: color-mix(in srgb, black, transparent)) {
  :root {
    --suzy-scrollbar-thumb: color-mix(in srgb, var(--muted, #70849a) 36%, transparent);
    --suzy-scrollbar-hover: color-mix(in srgb, var(--muted, #70849a) 60%, transparent);
  }
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--suzy-scrollbar-thumb) transparent;
}
/* Chromium and Safari use the smaller, precise six-pixel track. */
@supports selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
  *::-webkit-scrollbar { width: 6px; height: 6px; }
  *::-webkit-scrollbar-track,
  *::-webkit-scrollbar-corner { background: transparent; }
  *::-webkit-scrollbar-thumb {
    min-height: 24px;
    min-width: 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--suzy-scrollbar-thumb);
    background-clip: padding-box;
  }
  *::-webkit-scrollbar-thumb:hover,
  *::-webkit-scrollbar-thumb:active { background-color: var(--suzy-scrollbar-hover); }
  *::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
}
/* Keep native handles when the device requests a high-contrast palette. */
@media (forced-colors: active) {
  * { scrollbar-width: auto; scrollbar-color: auto; }
  *::-webkit-scrollbar,
  *::-webkit-scrollbar-track,
  *::-webkit-scrollbar-corner,
  *::-webkit-scrollbar-thumb,
  *::-webkit-scrollbar-button { all: revert; }
}