/*
 * Scrollbars in the site's own colours, on every page (15 Oct 2026): until
 * then a panel that scrolled, such as a square's details on the explore map,
 * showed the browser's pale grey bar down a dark page.
 *
 * The thumb is the page's accent: --signal, the site's blue, where a page
 * has it; --accent, Studio's mint, where it has that instead; the blue
 * otherwise. Quiet until it's used, brighter under the pointer. The track
 * is see-through, so the bar sits on whatever the panel behind it is.
 *
 * Two ways of saying it, because browsers listen to one or the other:
 * scrollbar-color and scrollbar-width (Firefox, and Chrome and Edge, which
 * then ignore the ::-webkit-scrollbar rules), and ::-webkit-scrollbar
 * (Safari). A list that hides its bar on purpose (scrollbar-width: none, or
 * ::-webkit-scrollbar { display: none }, as the home page's tour chips do)
 * still does: a class outranks these.
 */
:root {
  --scrollbar-accent: var(--signal, var(--accent, #0496ff));
  --scrollbar-thumb: color-mix(in srgb, var(--scrollbar-accent) 45%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--scrollbar-accent) 80%, transparent);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

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

/* A pill, inset from the edge by a see-through border. */
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-thumb-hover);
}