/* decodED's own. Brief 179 (Linzie, 4 Nov 2026 09:28): ONE SCROLL BAR FOR THE WHOLE PRODUCT.
 *
 * "Anytime that there's a scroll bar that appears or reappears because it's being dynamic, the scroll bar cannot move
 * any of the contents within the box … make the scroll bar a little more subtle, maybe a little more translucent.
 * That rule has to be everywhere."
 *
 * Two halves, both everywhere:
 *   1 THE LOOK (this file, every page): a slim dark green thumb, barely there until the pointer is over the box, no
 *     track and no arrow buttons. WebKit's own bar where it exists (Chrome, Edge, Safari); Firefox gets the standard
 *     thin bar in the same green. Nothing else in the product styles a scroll bar: a box that wants none says
 *     `scrollbar-width: none` and keeps it.
 *   2 NOTHING MOVES (every scroll box's own rule): a box that scrolls up and down keeps its bar's gutter whether the bar
 *     is there or not (`scrollbar-gutter: stable`), so a list growing past the box never pushes a row sideways.
 *     scripts/check-scroll.mjs fails the tests for a scroll box that forgets it.
 *
 * Linked from index.html, my.html and join.html, after tokens.css. */
:root {
  --scroll-bar: rgba(35, 85, 70, 0.14);
  --scroll-bar-near: rgba(35, 85, 70, 0.28);
  --scroll-bar-hold: rgba(35, 85, 70, 0.45);
}

@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: transparent;
  }
  ::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-corner {
    background: transparent;
  }
  ::-webkit-scrollbar-track {
    margin: 6px 0;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--scroll-bar);
    border-radius: 3px;
  }
  :hover::-webkit-scrollbar-thumb {
    background: var(--scroll-bar-near);
  }
  ::-webkit-scrollbar-thumb:hover,
  ::-webkit-scrollbar-thumb:active {
    background: var(--scroll-bar-hold);
  }
}

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-bar-near) transparent;
  }
}