/* ==========================================================================
   DIGITAL MARKETING DOCTOR — UI FINISH LAYER
   ==========================================================================
   Loaded LAST on all six live pages, including index.html. It carries one
   thing only: the scrollbar system, and the spacing that keeps a scrollbar
   off the cards it sits under.

   Everything else in this correction pass (selected states, blue labels) is
   fixed at source in the component's own stylesheet, the way the 2026-08-30
   light-theme sweep was.

   ---------------------------------------------------------------------------
   WHY THESE VALUES

   A scrollbar is a control, not an accent, so it is drawn in the site's own
   cool neutral family (hue 217, sat 8.3% — the hue of --ink-3), never in
   brand blue and never in the warm grey the browser defaults to.

   Contrast, measured against the three legal grounds (paper #FFFFFF,
   mist #F6F8FC, ground-2 #EDF2F9):

     rest    #858C98    3.39 : 3.18 : 3.01   clears 3:1 everywhere (WCAG 1.4.11)
     hover   #767E8B    4.10 : 3.85 : 3.64   = --ink-3 exactly
     active  #5A6474    5.98 : 5.63 : 5.32

   What it replaces, and why each was wrong:
     --line-b  #DEE5F1   1.27:1  .v03-rail thumb — invisible
     --edge    #CFE0FD   1.33:1  .tmx-body thumb — invisible AND blue
     rgba(21,20,15,.26)  1.75:1  .r4-scroll thumb — warm grey, foreign
     (unstyled)                  .c1-rail, .c4-rail, .gfc-body, the page

   3:1 does not read heavy here because the mark is small: the gutter is 12px
   but the thumb is inset 3px on every side with a transparent border and
   background-clip, so what is painted is a 6px fully-round pill. Contrast
   comes from the colour, restraint comes from the geometry — rather than
   fading the colour until the control disappears.

   The track is not painted. These rails sit on five different section
   grounds; a filled channel would read as a stray object on all of them.
   The two rails that carry a long horizontal travel opt back in below.
   ========================================================================== */

:root{
  --sb-thumb:       #858C98;
  --sb-thumb-hover: #767E8B;
  --sb-thumb-press: #5A6474;
  --sb-track:       #E9EDF3;   /* opt-in only — 2.88:1 beneath the thumb */
  --sb-size:        12px;      /* the gutter the bar lives in             */
  --sb-inset:       3px;       /* → a 6px painted pill                    */
  --sb-gap:         14px;      /* card bottom → bar top                   */
}

/* ---- Firefox and the standard property --------------------------------
   scrollbar-color inherits, so one declaration on the root reaches every
   scroller. Rails that hide their bar set scrollbar-width:none on a class
   selector, which still wins — nothing hidden today becomes visible.      */
html{ scrollbar-color: var(--sb-thumb) transparent; }
*{ scrollbar-width: thin; }

/* ---- WebKit / Blink ---------------------------------------------------
   Left at 0-0-0 on purpose: every existing `display:none` bar is written on
   a class or id selector and therefore outranks this.                     */
::-webkit-scrollbar{
  width: var(--sb-size); height: var(--sb-size); background: transparent;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner{ background: transparent; }
::-webkit-scrollbar-thumb{
  background-color: var(--sb-thumb);
  border: var(--sb-inset) solid transparent;
  background-clip: content-box;
  border-radius: 999px;
  min-height: 40px;            /* a long page still gets a grabbable mark */
}
::-webkit-scrollbar-thumb:hover { background-color: var(--sb-thumb-hover); }
::-webkit-scrollbar-thumb:active{ background-color: var(--sb-thumb-press); }
/* a horizontal bar needs length, not height, as its minimum */
::-webkit-scrollbar-thumb:horizontal{ min-height: 0; min-width: 40px; }

/* ==========================================================================
   THE TWO RAILS THAT SHOW A HORIZONTAL BAR
   --------------------------------------------------------------------------
   About Us: the milestone rail (#c1-rail) and the chapter rail (.c4-rail).
   Every other rail on the site hides its bar and is left exactly as it is.

   The sequence these two now read as:

     card bottom border
       ↓  14px clear                     (the rail's own padding-bottom)
     6px thumb inside a 12px gutter
       ↓  the section's existing bottom padding

   The milestone rail was at 8px, which put a 12px gutter hard under a
   bordered, shadowed card — the complaint that the bar touches the card
   edge. 14px is the smallest gap that reads as deliberate against a 22px
   card radius; more would open a hole in the section.
   ========================================================================== */
#c1-rail{ padding-bottom: var(--sb-gap); }

/* these two carry a long travel, so the channel is worth drawing */
#c1-rail::-webkit-scrollbar-track,
.c4-rail::-webkit-scrollbar-track{
  background: var(--sb-track); border-radius: 999px;
}