/* ============================================================
   VILLA ELARA — "Plumb Line" bespoke scrollbar (kp-scrollbar)
   A drafted elevation ruler on the right edge: double hairline,
   10% ticks, section labels in drafting caps, and a brass plumb
   bob that tips with scroll velocity and settles dead vertical.
   Desktop-only flourish; native bar returns on mobile/coarse.
   ============================================================ */

/* Hide the native bar ONLY where the plumb line runs */
@media (min-width: 721px) and (pointer: fine) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
}

.kp-sb {
  position: fixed;
  top: calc(var(--nav-h, 74px) + 18px);
  bottom: 26px;
  right: 0;
  width: 148px;
  z-index: 140; /* above content/nav(120), below mnav(150) + loader(200) */
  pointer-events: none; /* only the track strip takes events */
  opacity: 1;
  transition: opacity 480ms var(--ease-out, ease);
  font-family: var(--mono, ui-monospace, monospace);
}
.kp-sb.is-idle { opacity: .35; }
.kp-sb:hover { opacity: 1; }
.kp-sb.is-hidden { display: none; }

/* mobile / coarse pointers: no rail at all */
@media (max-width: 720px), (pointer: coarse) {
  .kp-sb { display: none; }
}

/* ---------- the drafted ruler ---------- */
.kp-sb__track {
  position: absolute;
  top: 0; bottom: 0;
  right: 14px;
  width: 26px;           /* generous hit strip */
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
}
/* double hairline, drawn on the strip's centre */
.kp-sb__track::before,
.kp-sb__track::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line, rgba(20,19,16,.16));
}
.kp-sb__track::before { right: 9px; }
.kp-sb__track::after  { right: 15px; }

/* 10% ruler ticks */
.kp-sb__tick {
  position: absolute;
  right: 9px;
  width: 7px;
  height: 1px;
  background: var(--ink-faint, #6C685C);
  opacity: .5;
}
.kp-sb__tick--maj { width: 11px; right: 7px; opacity: .7; }

/* section tick + drafting label */
.kp-sb__sec { position: absolute; right: 0; left: 0; height: 0; }
.kp-sb__sec i {
  position: absolute;
  right: 21px;
  top: 0;
  width: 13px;
  height: 1px;
  background: var(--clay, #8A5E20);
  opacity: .45;
  transition: opacity 300ms var(--ease-out, ease), background 300ms var(--ease-out, ease);
}
.kp-sb__sec span {
  position: absolute;
  right: 46px;
  top: -4.5px;
  max-width: 96px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: right;
  font-size: 8.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-faint, #6C685C);
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 360ms var(--ease-out, ease), transform 360ms var(--ease-out, ease);
}
.kp-sb__sec.on i { opacity: 1; background: var(--clay-deep, #6E4A17); }
.kp-sb__sec.on span { opacity: 1; transform: none; }
.kp-sb__track:hover ~ .kp-sb__secs .kp-sb__sec span,
.kp-sb.is-drag .kp-sb__sec span { opacity: .8; transform: none; }

/* ---------- the plumb bob ---------- */
.kp-sb__bob {
  position: absolute;
  right: 14px;            /* aligns with track strip */
  top: 0;
  width: 26px;
  height: 46px;
  pointer-events: auto;
  cursor: grab;
  will-change: transform;
}
.kp-sb.is-drag .kp-sb__bob { cursor: grabbing; }
.kp-sb__bob svg {
  display: block;
  width: 26px;
  height: 46px;
  overflow: visible;
  transform-origin: 13px 0px;  /* swings from the line's anchor */
  will-change: transform;
}

/* % readout — drafting type, tabular figures */
.kp-sb__pct {
  position: absolute;
  right: 44px;
  top: 14px;
  font-size: 9.5px;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  color: var(--clay-deep, #6E4A17);
  opacity: 0;
  transition: opacity 420ms var(--ease-out, ease);
  pointer-events: none;
  white-space: nowrap;
}
.kp-sb.is-active .kp-sb__pct,
.kp-sb:hover .kp-sb__pct { opacity: .9; }

/* drag: the line "reels" — ticks get a slight parallax (JS drives
   --kp-reel), labels surface */
.kp-sb__ticks, .kp-sb__secs {
  position: absolute; inset: 0; pointer-events: none;
  will-change: transform;
  transform: translateY(var(--kp-reel, 0px));
}

@media (prefers-reduced-motion: reduce) {
  .kp-sb, .kp-sb__sec i, .kp-sb__sec span, .kp-sb__pct { transition: none; }
}