/* © 2026 MEK.txt. All rights reserved. Part of the MEK design system; not licensed for reuse. */
/* MEK design system · scrollbar
   The system's scrollbar, for every page and scrolling box. base.css imports it, so a page with mek.css or base.css
   has it already; a page that skips base.css (it resets the page) links this file alone. Needs tokens.css. */

/* ---------- Scrollbars ----------
   One for every page and scrolling box: a 6px gutter, 1px clear each side of a 4px bar in a checkerboard of 2px
   squares (the hover dissolve's 50%, doubled so it reads at this size), in --scrollbar-ink, on nothing. No arrows,
   square ends. On the bar itself, or while it's held, it dissolves to solid in four frames and back: js/mek.js
   steps --sb-dz (0 → 1) on that element. Chrome, Edge and Safari draw it exactly; Firefox only takes a width and
   colours, so there it's a thin bar in the same ink. */
@property --sb-dz { syntax: "<number>"; inherits: false; initial-value: 0; }   /* each box its own, not its parent's */
* {   /* the two empty squares of each 2×2, filling one per frame as --sb-dz rises */
  --sb-gap1: color-mix(in srgb, var(--scrollbar-ink) calc(clamp(0, (var(--sb-dz) - .4) * 1000, 1) * 100%), transparent);
  --sb-gap2: color-mix(in srgb, var(--scrollbar-ink) calc(clamp(0, (var(--sb-dz) - .7) * 1000, 1) * 100%), transparent);
}
::-webkit-scrollbar { width: 6px; height: 6px; }
/* The page keeps its scrollbar's 6px whether it scrolls or not, so nothing moves sideways when it grows long enough to
   scroll (an expander opened, a list loaded): a centred page would otherwise shift 3px left. */
html { scrollbar-gutter: stable; }
/* Chrome and Safari keep that gutter on a scrolling box but not on the page: the bar above takes its 6px only while
   the page scrolls. So the page is always given its scrollbar, the bar drawn only when there's something to scroll
   (no track, so a short page shows an empty 6px). Firefox keeps the gutter and needs nothing more. A page that never
   scrolls opts out with html { overflow: hidden; scrollbar-gutter: auto; }. */
@supports selector(::-webkit-scrollbar) { html { overflow-y: scroll; } }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-thumb { border: 1px solid transparent;
  background: conic-gradient(var(--scrollbar-ink) 0 25%, var(--sb-gap1) 0 50%, var(--scrollbar-ink) 0 75%, var(--sb-gap2) 0)
    padding-box 0 0 / 4px 4px; background-origin: padding-box; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; }
  :root { scrollbar-color: var(--scrollbar-ink) transparent; }
}