/* ==========================================================================
   Mustard scroll indicator (shared) — the site's native-scrollbar replacement.
   Values are the § 030 treatment-plans indicator's (styles/sec-identify.css
   `.hp-plans__*`, Figma 1116:5399): 20px column, 2px track at 60%, ten 8px
   ticks at 40%, 14 × 30 mustard thumb with an ink rule and grip lines.
   Generalised to any height: the column stretches to its scroll box and the
   ten ticks divide whatever height that is. Driven by scripts/scroll-indicator.js.
   ========================================================================== */

/* The scroll box and its indicator, side by side (identify: gap --s5, 16px on phones). */
.scroll-ind-row { display: flex; align-items: stretch; gap: var(--s5); min-width: 0; }
.scroll-ind-row > .scroll-ind-box { flex: 1; min-width: 0; }

/* Native scrollbar hidden; the box still scrolls by wheel, touch and keyboard. */
.scroll-ind-box { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.scroll-ind-box::-webkit-scrollbar { display: none; }
.scroll-ind-box:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }

.scroll-ind { position: relative; flex: 0 0 20px; align-self: stretch; touch-action: none; }
.scroll-ind::before {
  content: ""; position: absolute; left: 6px; top: 0; width: 8px; height: calc(100% + 1px); opacity: 0.4;
  background: repeating-linear-gradient(to bottom, var(--hairline) 0 1px, transparent 1px calc((100% - 1px) / 9));
}
.scroll-ind__track {
  position: absolute; left: 9px; top: 0; width: 2px; height: 100%;
  background: var(--hairline); opacity: 0.6; cursor: pointer;
}
.scroll-ind::after { content: ""; position: absolute; inset: 0; cursor: pointer; }
.scroll-ind__thumb {
  position: absolute; left: 3px; top: 0; z-index: 1; width: 14px; height: 30px;
  background: var(--mustard); border: 1px solid var(--ink); border-radius: 2px;
  cursor: grab; will-change: transform;
}
.scroll-ind__thumb::before {
  content: ""; position: absolute; left: 3px; top: 11px; width: 6px; height: 5px; opacity: 0.6;
  background: repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 2px);
}
.scroll-ind.is-dragging .scroll-ind__thumb { cursor: grabbing; }
/* Nothing to scroll: keep the column (so text does not reflow) but show nothing. */
.scroll-ind.is-idle { visibility: hidden; }

@media (max-width: 720px) {
  .scroll-ind-row { gap: var(--s4); }
}