/* Scroll graph: a bell-curve scrollbar on the right edge (see scrollgraph.js) */
.scrollgraph {
  position: fixed; top: 50%; right: 4px; z-index: 25;
  width: 52px; height: min(48vh, 420px); transform: translateY(-50%);
  cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; outline: none;
  transition: opacity 0.4s ease;
}
.scrollgraph.is-dragging { cursor: grabbing; }
.scrollgraph.is-static { opacity: 0.25; pointer-events: none; }
.scrollgraph-curve { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sg-axis { stroke: var(--rule); stroke-width: 2; transition: stroke 0.25s ease; }
.scrollgraph:is(:hover, .is-dragging, :focus-visible) .sg-axis { stroke: var(--copper); }

.sg-line { stroke: var(--copper-light); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke 0.18s ease-out; }
.scrollgraph.is-active .sg-line { stroke: var(--copper); }
.scrollgraph:hover .sg-line, .scrollgraph:focus-visible .sg-line, .scrollgraph.is-dragging .sg-line { stroke: var(--text); }

/* Marker riding the axis at the current position (x = 52/60 of the 52px width) */
.sg-dot {
  position: absolute; left: 45px; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--copper-light); pointer-events: none;
  box-shadow: 0 0 0 3px var(--copper-glow), 0 0 14px var(--copper-glow);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.scrollgraph:is(:hover, :focus-visible) .sg-dot { transform: scale(1.2); }
.scrollgraph.is-dragging .sg-dot { transform: scale(1.5); }

/* Percentage readout, fades in beside the marker while you interact with the graph */
.sg-readout {
  position: absolute; right: calc(100% + 2px); top: 0; transform: translate(6px, -50%);
  padding: 3px 9px; border-radius: 999px; pointer-events: none;
  font: 600 12px/1.4 var(--font); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--copper-light);
  background: var(--header-bg); border: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.scrollgraph:is(:hover, :focus-visible, .is-dragging, .is-active) .sg-readout { opacity: 1; transform: translate(0, -50%); }

/* Visible keyboard focus (the old native slider had none) */
.scrollgraph:focus-visible::after {
  content: ""; position: absolute; inset: -8px -4px; border-radius: 14px; pointer-events: none;
  border: 2px solid var(--copper); box-shadow: 0 0 18px var(--copper-glow);
}

@media (max-width: 640px) { .scrollgraph { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .scrollgraph, .sg-dot, .sg-readout { transition: none; }
}