/* ============================================================
   STACKALITY — scrollbars
   One file, loaded by every page on the domain, including the
   workshops and the tools that otherwise carry their own styles.

   The rule: the track disappears into whatever is behind it, the
   thumb sits quiet in the depth stack, and amber only shows up
   when you are actually using it. A scrollbar is furniture — it
   should be findable, not loud.

   PALETTE VARIABLES
   -----------------
   Every colour is a var() chain rather than a literal, because
   the pages do not all name their tokens the same way:

     the site + four workshops + Deadzone   --edge  --signal
     Level Forge (its own darker palette)   --line  --amber

   So `var(--edge, var(--line, #3B3459))` reads as: the site's
   token, then Level Forge's equivalent, then a literal for any
   page that defines neither. Each page ends up with a scrollbar
   in its own colours without a single per-page override.

   One asymmetry, on purpose: Level Forge has --amber but no
   --signal-deep, so its hover state lands on the literal #C97A00
   while its drag state is its own #ffb454. Deep amber into bright
   amber is the right progression anyway — but if that page ever
   grows a proper deep tone, name it --signal-deep and this file
   will pick it up with no edit.
   ============================================================ */

:root{
  /* tells the browser to draw its own fallback UI dark, which
     matters for the split second before this file applies and for
     anything we cannot style (Firefox's overlay bars on macOS) */
  color-scheme:dark;

  --sb-size:12px;                                   /* full gutter */
  --sb-pad:3px;                                     /* inset around the thumb */
  --sb-track:transparent;                           /* blends, always */
  --sb-thumb:var(--edge, var(--line, #3B3459));     /* at rest */
  --sb-thumb-hover:var(--signal-deep, #C97A00);     /* pointer over it */
  --sb-thumb-active:var(--signal, var(--amber, #FFB020));  /* dragging */
}


/* ============================================================
   FIREFOX
   Only two properties exist here, and neither can target the
   thumb's own hover state — `scrollbar-color` is set on the
   scrolling box, not on the bar. So Firefox gets the resting
   colours and no interaction states. That is the whole of what
   the standard offers today; the WebKit block below is where the
   amber lives.

   The @supports gate matters. Chromium has shipped these two
   standard properties as well, and where both are present it
   lets `scrollbar-width` win over the ::-webkit-scrollbar width
   below — which would quietly override --sb-size and make the
   variable a lie. Testing for the ::-webkit-scrollbar selector
   splits the two engines cleanly: Firefox does not recognise it
   and takes this block, everything Chromium and WebKit does and
   skips straight to the next one.
   ============================================================ */
@supports not selector(::-webkit-scrollbar){
  *{
    scrollbar-width:thin;
    scrollbar-color:var(--sb-thumb) var(--sb-track);
  }
  /* the page's own bar gets the visible groove, same as WebKit */
  html,body{
    scrollbar-color:var(--sb-thumb) var(--mid, var(--panel, #1E1A31));
  }
}


/* ============================================================
   CHROME, EDGE, SAFARI, and every Chromium browser
   ============================================================ */
::-webkit-scrollbar{
  width:var(--sb-size);
  height:var(--sb-size);
  background:var(--sb-track);
}

/* The track is transparent rather than a colour that happens to
   match. Matching breaks the moment a scrollable panel sits on a
   different surface than the page behind it — and this site has
   four surfaces in its depth stack. Transparent is correct on all
   of them by construction. */
::-webkit-scrollbar-track{
  background:var(--sb-track);
  border-radius:var(--r-pill, 999px);
}

/* The border + background-clip trick: the thumb is drawn at full
   gutter width but clipped to its padding box, so the transparent
   border reads as breathing room on both sides. Changing --sb-pad
   is how you make the bar thinner without touching the hit area,
   which stays the full 12px and is what makes it easy to grab. */
::-webkit-scrollbar-thumb{
  background-color:var(--sb-thumb);
  border-radius:var(--r-pill, 999px);
  border:var(--sb-pad) solid transparent;
  background-clip:padding-box;
  transition:background-color .16s ease;
}

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

/* Dragging. This is the state the amber is for. */
::-webkit-scrollbar-thumb:active{
  background-color:var(--sb-thumb-active);
  border-width:2px;               /* thickens under the finger */
}

/* no stepper arrows, no dead square where the two bars meet */
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:transparent}


/* ============================================================
   THE PAGE ITSELF
   The root scrollbar is the tallest one on the site and the only
   one that is always present, so it gets slightly more presence
   than the panel bars: a real track groove, sitting one step up
   from the page background rather than vanishing into it.
   ============================================================ */
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{
  background:var(--mid, var(--panel, #1E1A31));
  border-radius:0;
}


/* ============================================================
   PANELS THAT ALREADY STYLED THEIR OWN BAR
   The workshops set `.rail` and `.dr-body` thumbs to --edge in
   their own inline <style>, and a class selector beats a bare
   pseudo-element no matter which stylesheet loads first. These
   re-state those two at a specificity that wins, purely so the
   amber hover and drag states reach them too — the resting
   colour is the one they already chose.
   ============================================================ */
html .rail::-webkit-scrollbar,
html .dr-body::-webkit-scrollbar,
html .drBody::-webkit-scrollbar,
html .sheet-body::-webkit-scrollbar,
html .sk-sugg::-webkit-scrollbar,
html .results::-webkit-scrollbar{
  width:10px;
  background:transparent;
}
html .rail::-webkit-scrollbar-thumb,
html .dr-body::-webkit-scrollbar-thumb,
html .drBody::-webkit-scrollbar-thumb,
html .sheet-body::-webkit-scrollbar-thumb,
html .sk-sugg::-webkit-scrollbar-thumb,
html .results::-webkit-scrollbar-thumb{
  background-color:var(--sb-thumb);
  border:2px solid transparent;
  background-clip:padding-box;
  border-radius:var(--r-pill, 999px);
}
html .rail::-webkit-scrollbar-thumb:hover,
html .dr-body::-webkit-scrollbar-thumb:hover,
html .drBody::-webkit-scrollbar-thumb:hover,
html .sheet-body::-webkit-scrollbar-thumb:hover,
html .sk-sugg::-webkit-scrollbar-thumb:hover,
html .results::-webkit-scrollbar-thumb:hover{
  background-color:var(--sb-thumb-hover);
}
html .rail::-webkit-scrollbar-thumb:active,
html .dr-body::-webkit-scrollbar-thumb:active,
html .drBody::-webkit-scrollbar-thumb:active,
html .sheet-body::-webkit-scrollbar-thumb:active,
html .sk-sugg::-webkit-scrollbar-thumb:active,
html .results::-webkit-scrollbar-thumb:active{
  background-color:var(--sb-thumb-active);
}


/* ============================================================
   BARS THAT ARE HIDDEN ON PURPOSE
   Five places scroll without showing a bar, and all five are
   deliberate — the log carousel and the section nav have their
   own arrows, and Level Forge's editor chrome would be unusable
   with 12px of gutter inside every strip.

   They survive this file for a reason worth knowing rather than
   rediscovering: each hides itself from a CLASS selector, and a
   class beats both the bare `*` and the bare ::-webkit-scrollbar
   used above. Nothing here has to exempt them, and nothing here
   should. Add a new hidden bar the same way — from a class — and
   it will keep working.

     .stream-track    the log carousel       css/site.css
     .sk-parent nav   the section nav        css/tokens.css
     .hdr-scroll      Level Forge toolbar    tools/level-forge.html
     .dockrow         Level Forge dock       tools/level-forge.html
     .dialtrack       Level Forge dials      tools/level-forge.html
   ============================================================ */


/* ============================================================
   NARROW SCREENS
   Touch platforms draw overlay bars that ignore most of this,
   and where they do not, 12px of gutter is a real bite out of a
   360px viewport. Thinner, and the amber still lands.
   ============================================================ */
@media(max-width:640px){
  :root{--sb-size:8px;--sb-pad:2px}
}

@media(prefers-reduced-motion:reduce){
  ::-webkit-scrollbar-thumb{transition:none}
}