/* ═══════════════════════════════════════════════════════════════
   VSS CHROME  —  browser furniture shared by every page
   Vantage Strategic Systems · exitblueprint.io

   Two things live here, both of which used to exist on the landing
   page only, which is why the site felt different page to page:

     1. the scrollbar, styled in brand colours
     2. the thin scroll-progress rail across the top

   Paired with assets/js/vss-chrome.js, which draws the rail.
   Load both on every page. There is no per-page variant on purpose.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --vc-green: #1fff93;
  --vc-rail:  #00d4ff;
  --vc-track: #0a0d12;
  --vc-thumb: rgba(31,255,147,0.32);
  --vc-thumb-hover: rgba(31,255,147,0.55);
}

/* ───────────── Scrollbar ─────────────
   Firefox takes the two-value shorthand, Chromium and Safari need the
   pseudo-elements. Both are declared so the bar looks the same in all
   three rather than dark green in one and system grey in another. */

html{
  scrollbar-width: thin;
  scrollbar-color: var(--vc-thumb) var(--vc-track);
}

::-webkit-scrollbar{
  width:10px;
  height:10px;
}
::-webkit-scrollbar-track{
  background:var(--vc-track);
}
::-webkit-scrollbar-thumb{
  background:var(--vc-thumb);
  border-radius:8px;
  /* the border is the track colour, so the thumb reads as inset */
  border:2px solid var(--vc-track);
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{
  background:var(--vc-thumb-hover);
  background-clip:padding-box;
}
::-webkit-scrollbar-corner{
  background:var(--vc-track);
}

/* Carousels and other inner scrollers opt out by hiding their own bar;
   those rules already exist per page and still win by specificity. */

/* ───────────── Scroll progress rail ───────────── */

#scroll-progress{
  position:fixed; top:0; left:0;
  height:2px; width:0%;
  background:linear-gradient(90deg, var(--vc-green), var(--vc-rail));
  box-shadow:0 0 8px rgba(31,255,147,0.6);
  z-index:200;
  transition:width 0.1s linear;
  pointer-events:none;
}

@media(prefers-reduced-motion:reduce){
  #scroll-progress{ transition:none; }
}