/* =================================================================
   SCROLLBAR
   Branded scrollbar for scrolling panels — e.g. the stacked article
   cards on /articles/. Loaded by inc/enqueue.php.
   ================================================================= */

/* ---------------------------------------------------------------
   .scroll-list — add to the container that scrolls (the one with
   max-height + overflow). Keep max-height / overflow / any mask in
   Elementor; this class only styles the bar and moves it.

   - 2px powder track, 3px cobalt thumb, rounded caps. Each is drawn
     inside an 8px scrollbar as a background clipped to the padding
     box, with transparent side borders making up the difference
     (3px each side for the track, 2.5px for the thumb).
   - The bar sits on the LEFT: the panel is set to rtl (which is
     where browsers put the scrollbar for rtl content) and its
     children set back to ltr, so the cards read normally.
   - Chrome/Safari use the ::-webkit-scrollbar rules. Firefox can't
     size track and thumb separately, so it gets the nearest thing:
     a thin bar in the same two colours. That fallback is fenced
     off from Chrome, which would otherwise IGNORE the webkit rules
     the moment scrollbar-width/color are set.
   - Styling the bar also replaces macOS's auto-hiding overlay bar
     with a permanent one — which is the point.

   Gap: give the panel padding-inline-start so the cards clear the
   bar (32px looks right on /articles/).
--------------------------------------------------------------- */
.scroll-list {
    direction: rtl;
    scrollbar-gutter: stable;
}
.scroll-list > * {
    direction: ltr;
}
.scroll-list::-webkit-scrollbar {
    width: 8px;
}
.scroll-list::-webkit-scrollbar-track {
    background: var(--ipg-powder);
    background-clip: padding-box;
    border: 0 solid transparent;
    border-width: 0 3px;
    border-radius: 999px;
}
.scroll-list::-webkit-scrollbar-thumb {
    background: var(--ipg-cobalt);
    background-clip: padding-box;
    border: 0 solid transparent;
    border-width: 0 2.5px;
    border-radius: 999px;
}
.scroll-list::-webkit-scrollbar-button {
    display: none;
    height: 0;
}
@supports not selector(::-webkit-scrollbar) {
    .scroll-list {
        scrollbar-width: thin;
        scrollbar-color: var(--ipg-cobalt) var(--ipg-powder);
    }
}