/* ------------------------------------------------------------------
 * Scrollbars, for every public page of this app.
 *
 * The page scrollbar here had no styling at all, so it rendered as the platform's own:
 * a wide track with a STEPPER ARROW at each end. Two problems with that, and only the
 * second is taste. The arrows are explicitly out (see the Scrollbars section of
 * CLAUDE.md), and — the reason it was noticeable — the chatbot side panel docks against
 * the right edge, directly beside that scrollbar, and the chatbot's own surfaces
 * (message list, sidebar conversation list) are all thin, arrowless and grey. The two
 * appearances end up millimetres apart, which reads as two products rather than one.
 *
 * The values are the chatbot's, copied deliberately from the block that styles its
 * sidebar and message list (chatbot/frontend/css/chat-messages.css): 10px wide,
 * transparent track, pill thumb inset by a 2px transparent border so it reads as
 * floating rather than filling a channel. Same 10px/#D1D1D1 there and here is the whole
 * point — this file exists so the panel and the page it sits next to match.
 *
 * `::-webkit-scrollbar-button` is that stepper arrow. Chromium hides it once
 * ::-webkit-scrollbar is styled at all, but it is set explicitly because that is
 * incidental behaviour rather than a guarantee, and the arrows are the exact detail this
 * file is here to remove.
 *
 * Loaded by BOTH public layouts (layouts/landing.php and layouts/public.php) rather than
 * pasted into landing.css and site.css: it is one appearance, so it gets one source. The
 * tokens are declared here too, so the file works whichever of those two stylesheets it
 * lands next to instead of silently falling back to an initial colour.
 * ------------------------------------------------------------------ */
:root {
  --scroll-thumb: #D1D1D1;
  --scroll-thumb-hover: #C2C2C2;
}

/* The page itself, plus this app's own scrolling regions — the two mobile overlays that set
   overflow-y: auto (landing.css .lp-nav-mobile, report.css .rp-mtoc-panel). Listed together
   so none of them can drift to a different width or colour from the others.
   .rp-verify-scroll is deliberately absent: it has its own thinner 5px rule in report.css,
   with a note there explaining why it must NOT set scrollbar-width. */
html,
.lp-nav-mobile,
.rp-mtoc-panel {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
html::-webkit-scrollbar,
.lp-nav-mobile::-webkit-scrollbar,
.rp-mtoc-panel::-webkit-scrollbar { width: 10px; height: 10px; }

html::-webkit-scrollbar-button,
.lp-nav-mobile::-webkit-scrollbar-button,
.rp-mtoc-panel::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

html::-webkit-scrollbar-track,
.lp-nav-mobile::-webkit-scrollbar-track,
.rp-mtoc-panel::-webkit-scrollbar-track { background: transparent; }

html::-webkit-scrollbar-thumb,
.lp-nav-mobile::-webkit-scrollbar-thumb,
.rp-mtoc-panel::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 100px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* :active is the dragged thumb, and takes the SAME value as hover — a thumb that reverts
   to its resting grey the moment you grab it reads as unresponsive at exactly the moment
   the user is interacting with it. (Copied from the chatbot's rule for the same reason.) */
html::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:active,
.lp-nav-mobile::-webkit-scrollbar-thumb:hover,
.lp-nav-mobile::-webkit-scrollbar-thumb:active,
.rp-mtoc-panel::-webkit-scrollbar-thumb:hover,
.rp-mtoc-panel::-webkit-scrollbar-thumb:active {
  background: var(--scroll-thumb-hover);
  background-clip: padding-box;
}