/* Sitewide scrollbars.
 *
 * Windows draws the default scrollbar as a wide light channel with arrow
 * buttons at both ends. On a dark page that reads as a strip of daylight down
 * the edge of every modal, panel and long list — the supplier form was the
 * worst of it, but it was on every overflow container on the site.
 *
 * The portal already had a quieter treatment. It never reached most of this,
 * for two reasons worth recording:
 *
 *   1. It was scoped to `.portal-body`, so only the portal got it. The 45 other
 *      pages kept the native one.
 *   2. It styled the thumb but never the track or the buttons. Chrome keeps
 *      rendering its native arrows and channel around a styled thumb unless
 *      both are explicitly cleared, which is why the scrollbar still looked
 *      native even where the rule did apply.
 *
 * Unscoped on purpose: a scrollbar is chrome, not content, and there is no page
 * on this site where the native Windows one is the better answer.
 */

/* Firefox. Only accepts thin/auto and a two-colour pair, so this is the whole
   of what that engine can be told. */
* {
   scrollbar-width: thin;
   scrollbar-color: rgba(255, 255, 255, .14) transparent;
}

/* WebKit and Blink. */
::-webkit-scrollbar {
   width: 10px;
   height: 10px;
}

::-webkit-scrollbar-track {
   background: transparent;
}

/* The transparent border plus background-clip is what gives the thumb its
   inset — without it a 10px bar reads as a solid rail rather than a hint. */
::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, .14);
   border: 2px solid transparent;
   border-radius: 999px;
   background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
   background: rgba(240, 165, 30, .38);
   background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
   background: rgba(240, 165, 30, .55);
   background-clip: padding-box;
}

/* The arrows. Chrome renders them at a default size unless zeroed, and they
   are the single thing that makes a scrollbar look like an operating system
   component rather than part of the page. */
::-webkit-scrollbar-button {
   display: none;
   width: 0;
   height: 0;
}

/* Where a vertical and horizontal bar meet. Left alone it paints a small
   opaque square in the corner of every two-axis scroller. */
::-webkit-scrollbar-corner {
   background: transparent;
}

/* ── Light mode ──────────────────────────────────────────────────────────
   A white thumb on a white page is an invisible scrollbar, which is worse
   than a clunky one — you lose the only cue that a region scrolls at all. */
html.light-mode * {
   scrollbar-color: rgba(15, 18, 30, .20) transparent;
}
html.light-mode ::-webkit-scrollbar-thumb {
   background: rgba(15, 18, 30, .20);
   background-clip: padding-box;
}
html.light-mode ::-webkit-scrollbar-thumb:hover {
   background: rgba(198, 128, 10, .45);
   background-clip: padding-box;
}
html.light-mode ::-webkit-scrollbar-thumb:active {
   background: rgba(198, 128, 10, .62);
   background-clip: padding-box;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Scroll trapping
 *
 * A container that only wants to scroll sideways still becomes a VERTICAL
 * scroll container unless you say otherwise. CSS computes `overflow-y: visible`
 * to `auto` whenever the other axis is not visible — so `overflow-x: auto`
 * alone produces a box that captures a downward swipe.
 *
 * On a phone that is the difference between reading a page and fighting it:
 * you scroll down the article, your thumb happens to land on a table, and the
 * page stops moving until you drag your thumb somewhere else. Nothing looks
 * broken, which is why it survives.
 *
 * None of these needs vertical scrolling — none carries a max-height, so each
 * simply grows to fit its content. Pinning the axis costs nothing and hands
 * the gesture back to the page.
 *
 * overscroll-behavior-x: contain is the companion fix. Swiping horizontally to
 * the end of one of these strips otherwise hands the gesture to the browser,
 * which on Android Chrome navigates back — losing the page to a sideways flick
 * on a table.
 * ═══════════════════════════════════════════════════════════════════════════ */
.table-scroll,
.qa-tablewrap,
.mobile-nav-inner,
.archive-filter-row,
.reg-niche-tabs,
.pipeline-stage-tabs,
.finder-examples,
.dashboard-actions,
#sourcerExamples,
#healthErrors,
#healthAudit {
   overflow-y: hidden;
   overscroll-behavior-x: contain;
}

/* Deprecated, and it builds a separate scrolling layer that makes the capture
   above stickier rather than smoother. Modern iOS gives momentum by default. */
.table-scroll { -webkit-overflow-scrolling: auto; }