/* ── Scroll bars (card 1835, designed on 1834) ────────────────────────────────────────────────
   One scroll bar for every page that includes head-app.php: a thin rounded
   pill, no arrows, no track, in a translucent ink that reads on the light app,
   the dark app and the dark landing alike. It darkens under the pointer, and
   thickens only while it is being used. Touch screens keep their own overlay
   bars, which come and go with the scroll.

   Chromium 121+ and Safari read ::-webkit-scrollbar. The standard properties
   are for Firefox only: in Chromium they override the pseudo-elements and
   bring back the arrowed system bar, which is what every bar looked like. */

:root { --scroll-ink: rgba(100, 110, 130, .38); --scroll-ink-hover: rgba(100, 110, 130, .62); }
:root[data-theme="dark"] { --scroll-ink: rgba(170, 180, 200, .30); --scroll-ink-hover: rgba(170, 180, 200, .52); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --scroll-ink: rgba(170, 180, 200, .30); --scroll-ink-hover: rgba(170, 180, 200, .52); } }

::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
/* The 2px transparent border is the gap round the pill; background-clip keeps the colour inside it. */
::-webkit-scrollbar-thumb { background: var(--scroll-ink); border: 2px solid transparent; background-clip: padding-box; border-radius: 999px; min-height: 32px; min-width: 32px; }
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: var(--scroll-ink-hover); }

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