/* ==========================================================================
   CLUTCHwx bespoke scroll rail
   --------------------------------------------------------------------------
   Replaces the browser scrollbar on wide, non-touch displays with a milled
   gold bar and a set of section ticks. No wordmarks, no labels - the rail
   reads as hardware, not as a second navigation. Everything is opt-in from
   JS: until `luxe-scrollbar.js` adds `.rail-live`, the native scrollbar
   stays exactly where it is, so the page never loses its scroll affordance.
   ========================================================================== */

:root{
  --rail-x:21px;              /* centre line, inset from the viewport edge */
  --rail-w:4px;               /* track width */
  --rail-thumb-w:11px;        /* thumb width, pointer on the rail */
  --rail-gold:#d5af59;
}

/* The native bar is surrendered only once the rail is measured and live. */
html.rail-live{scrollbar-width:none}
html.rail-live::-webkit-scrollbar{width:0;height:0}

/* ---- Native bars we keep, dressed in brand colour ----------------------- */
/* The two dialogs scroll independently of the page, so they keep a real
   scrollbar - sized to match the rail rather than the platform default. */
.menu-dialog,.media-dialog{scrollbar-width:auto;scrollbar-color:rgba(213,175,89,.6) transparent}
.menu-dialog::-webkit-scrollbar,.media-dialog::-webkit-scrollbar{width:14px}
.menu-dialog::-webkit-scrollbar-track,.media-dialog::-webkit-scrollbar-track{background:transparent}
.menu-dialog::-webkit-scrollbar-thumb,.media-dialog::-webkit-scrollbar-thumb{
  border:4px solid transparent;border-radius:999px;
  background:linear-gradient(180deg,#e6cf9c,#d5af59 45%,#c2a065);
  background-clip:content-box;
}
.menu-dialog::-webkit-scrollbar-thumb:hover,.media-dialog::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#f0dcae,#e0c488 45%,#cdac6f);
  background-clip:content-box;
}

/* ---- The rail ----------------------------------------------------------- */
.rail{
  position:fixed;
  z-index:45;
  top:calc(var(--header-height) + 34px);
  right:0;
  bottom:34px;
  width:76px;                 /* track, ticks, and a comfortable target */
  pointer-events:none;
  opacity:0;
  transition:opacity .6s var(--ease);
  /* Tone is swapped per section so the rail reads on pine and on paper. */
  --rail-line:rgba(24,51,40,.2);
  --rail-groove:rgba(24,51,40,.1);
  --rail-halo:rgba(6,44,36,.08);
  --rail-shade:rgba(4,25,20,.26);
}
.rail[data-ready]{opacity:1}
.rail[data-tone=dark]{
  --rail-line:rgba(230,237,225,.26);
  --rail-groove:rgba(230,237,225,.12);
  --rail-halo:rgba(213,175,89,.16);
  --rail-shade:rgba(0,0,0,.34);
}

/* A dialog owns the viewport while it is open. */
body.modal-open .rail{opacity:0}
body.modal-open .rail,body.modal-open .rail *{pointer-events:none}

/* Only the strip over the track and the ticks themselves listen for the
   pointer, so the rail never steals clicks from the page. */
.rail-hit{position:absolute;inset:0 0 0 auto;width:44px;pointer-events:auto;cursor:pointer;
  touch-action:none;-webkit-user-select:none;user-select:none}
/* A drag can travel anywhere on screen; keep the cursor and stop the page
   selecting text under it while the thumb is held. */
html.rail-dragging,html.rail-dragging *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important}

/* ---- Track, with ruler terminals at each end --------------------------- */
.rail-track{
  position:absolute;top:0;bottom:0;right:calc(var(--rail-x) - var(--rail-w) / 2);
  width:var(--rail-w);border-radius:999px;
  background:var(--rail-groove);
  box-shadow:inset 0 0 0 1px var(--rail-groove);
  transition:background .5s var(--ease),box-shadow .5s var(--ease);
}
.rail-track::before,.rail-track::after{
  content:"";position:absolute;right:-4px;width:12px;height:1px;background:var(--rail-line);
}
.rail-track::before{top:0}
.rail-track::after{bottom:0}

/* Read progress: scaled, never resized. */
.rail-fill{
  position:absolute;top:0;right:calc(var(--rail-x) - var(--rail-w) / 2);
  width:var(--rail-w);height:100%;border-radius:999px;
  background:linear-gradient(180deg,rgba(213,175,89,.05),rgba(213,175,89,.42));
  transform:scaleY(var(--p,0));transform-origin:top;
}

/* ---- Thumb: a milled gold bar ------------------------------------------ */
.rail-thumb{
  position:absolute;top:0;right:calc(var(--rail-x) - var(--rail-thumb-w) / 2);
  width:var(--rail-thumb-w);height:var(--thumb-h,64px);
  transform:translate3d(0,var(--thumb-y,0px),0);
  cursor:grab;
  /* The rail itself is pointer-events:none, so the thumb has to opt back in -
     otherwise the press lands on the track strip behind it and never drags. */
  pointer-events:auto;
  touch-action:none;
  -webkit-user-select:none;user-select:none;
}
/* An 11px bar is a thin thing to catch. The grip widens the target without
   widening the metal, and sits above the track so a press near the thumb
   grabs it rather than jumping the page. */
.rail-thumb::before{content:"";position:absolute;inset:-3px -9px}
.rail[data-drag] .rail-thumb{cursor:grabbing}
/* Two layers: a vertical gold gradient for the metal, and a horizontal
   sheen that gives the bar its roundness. Scaled down at rest so the rail
   stays quiet until the pointer arrives, then eased out to full width. */
.rail-thumb i{
  position:absolute;inset:0;border-radius:999px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.4),rgba(255,255,255,.04) 48%,rgba(0,0,0,.14)),
    linear-gradient(180deg,#e8d3a2,var(--rail-gold) 34%,#cdab6b 76%,#bd9750);
  box-shadow:0 1px 4px var(--rail-shade),inset 0 0 0 1px rgba(255,255,255,.16);
  transform:scaleX(.68);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.rail[data-open] .rail-thumb i,.rail[data-drag] .rail-thumb i{
  transform:scaleX(1);
  box-shadow:0 2px 10px var(--rail-shade),0 0 0 8px var(--rail-halo),
             inset 0 0 0 1px rgba(255,255,255,.26);
}
.rail[data-drag] .rail-thumb i{filter:brightness(1.06)}

/* ---- Section ticks ----------------------------------------------------- */
.rail-mark{
  position:absolute;top:var(--t,0);
  /* Only the tick gutter, never the track: the whole strip stays draggable. */
  right:calc(var(--rail-x) + 11px);width:26px;
  display:flex;align-items:center;justify-content:flex-end;
  height:18px;margin-top:-9px;
  pointer-events:none;
}
.rail[data-open] .rail-mark{pointer-events:auto;cursor:pointer}
.rail-mark b{
  width:7px;height:1px;background:var(--rail-line);
  transform-origin:right;
  transition:transform .45s var(--ease),background .45s var(--ease),opacity .45s var(--ease);
}
.rail[data-open] .rail-mark b{transform:scaleX(1.6)}
.rail-mark[data-on] b{background:var(--rail-gold);transform:scaleX(2)}
.rail[data-open] .rail-mark[data-on] b{transform:scaleX(2.6)}
.rail[data-open] .rail-mark:hover b{background:var(--rail-gold);transform:scaleX(2.6)}

/* ---- Restraint where it is asked for ----------------------------------- */
@media (prefers-reduced-motion:reduce){
  .rail,.rail-track,.rail-thumb i,.rail-mark b{transition:none}
}

/* The rail is a desktop affordance. Touch keeps the platform's own bars. */
@media (max-width:1023px),(pointer:coarse){
  .rail{display:none}
}