/* 10-second scroll speed challenge (views/scroll-speed-test.cjs). Two panels: the track with its clock (left, first on
 * a phone) and the result with calibration and outputs. The track only scrolls while a run is armed or running
 * (data-state on .vt-ss), so outside a run a finger on it scrolls the page as usual. Hairline borders only. */
#visu-tools.vt-scroll-speed-test .vt-ss { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#visu-tools.vt-scroll-speed-test .vt-ss [hidden] { display: none !important; }
#visu-tools.vt-scroll-speed-test .vt-ss-play { display: grid; gap: 14px; align-content: start; }
#visu-tools.vt-scroll-speed-test .vt-ss-challenge { padding: 12px 14px; border-radius: 12px; border: 1px solid #bfe6f8; background: #eefaff; color: var(--vt-ink); font-weight: 600; font-size: 15px; }

#visu-tools.vt-scroll-speed-test .vt-ss-stage { position: relative; border: 1px solid var(--vt-line-2); border-radius: 16px; overflow: hidden; background: #f4f8fc; }
#visu-tools.vt-scroll-speed-test .vt-ss-track { height: clamp(320px, 56vh, 500px); overflow: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-y; outline: none; scrollbar-width: thin; }
#visu-tools.vt-scroll-speed-test .vt-ss[data-state="armed"] .vt-ss-track,
#visu-tools.vt-scroll-speed-test .vt-ss[data-state="running"] .vt-ss-track { overflow-y: scroll; overscroll-behavior: contain; } /* only during a run: a locked track must let the page scroll */
#visu-tools.vt-scroll-speed-test .vt-ss-track:focus-visible { box-shadow: inset 0 0 0 2px var(--vt-accent); }
/* The road: 3,000,000 px of ruler. A line every 100 px, a stronger one every 500 px, so speed is visible. */
#visu-tools.vt-scroll-speed-test .vt-ss-road { height: 3000000px; background-color: #f4f8fc;
  background-image: linear-gradient(to bottom, rgba(10, 19, 36, .16) 0, rgba(10, 19, 36, .16) 2px, transparent 2px), linear-gradient(to bottom, rgba(10, 19, 36, .07) 0, rgba(10, 19, 36, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(25, 180, 239, .10) 0, rgba(25, 180, 239, .10) 250px, transparent 250px);
  background-size: 100% 500px, 100% 100px, 100% 500px; }
#visu-tools.vt-scroll-speed-test .vt-ss[data-state="armed"] .vt-ss-stage { border-color: var(--vt-accent); }
#visu-tools.vt-scroll-speed-test .vt-ss[data-state="running"] .vt-ss-stage { border-color: var(--vt-accent); }

#visu-tools.vt-scroll-speed-test .vt-ss-hud { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 6px; padding: 16px; text-align: center; pointer-events: none; }
#visu-tools.vt-scroll-speed-test .vt-ss-hud p { margin: 0 !important; }
#visu-tools.vt-scroll-speed-test .vt-ss-clock { font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--vt-muted); font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .86); padding: 4px 12px; border-radius: 999px; border: 1px solid var(--vt-line); }
#visu-tools.vt-scroll-speed-test .vt-ss-live { font-size: clamp(44px, 9vw, 72px); line-height: 1; font-weight: 780; letter-spacing: -0.035em; color: var(--vt-ink); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px #f4f8fc, 0 0 6px #f4f8fc; }
#visu-tools.vt-scroll-speed-test .vt-ss-live small { font-size: .32em; font-weight: 650; letter-spacing: 0; color: var(--vt-muted); }
#visu-tools.vt-scroll-speed-test .vt-ss-state { max-width: 30ch; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--vt-ink); background: rgba(255, 255, 255, .86); padding: 6px 12px; border-radius: 12px; }
#visu-tools.vt-scroll-speed-test .vt-ss[data-state="running"] .vt-ss-state { visibility: hidden; }
#visu-tools.vt-scroll-speed-test .vt-ss[data-state="running"] .vt-ss-live { color: var(--vt-accent-text); }
#visu-tools.vt-scroll-speed-test .vt-ss-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(10, 19, 36, .08); pointer-events: none; }
#visu-tools.vt-scroll-speed-test .vt-ss-bar span { display: block; height: 100%; width: 0; background: var(--vt-accent); }

/* Result */
#visu-tools.vt-scroll-speed-test .vt-ss-result .vt-big-num { font-size: clamp(38px, 4.6vw, 54px); }
#visu-tools.vt-scroll-speed-test .vt-ss-versus { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--vt-line); background: var(--vt-bg); font-weight: 600; font-size: 15px; color: var(--vt-ink); }
#visu-tools.vt-scroll-speed-test .vt-ss-versus[data-outcome="win"] { border-color: #bfe6f8; background: #eefaff; }
#visu-tools.vt-scroll-speed-test .vt-ss-cal { display: grid; gap: 12px; margin-top: 4px; }
#visu-tools.vt-scroll-speed-test .vt-ss-cal > * + * { margin-top: 12px; }
#visu-tools.vt-scroll-speed-test .vt-ss-cal-stage { overflow: hidden; padding: 10px 0; }
#visu-tools.vt-scroll-speed-test .vt-ss-cal-box { height: 54px; max-width: 100%; border-radius: 8px; border: 1px solid var(--vt-accent-text); background: repeating-linear-gradient(90deg, #eefaff 0, #eefaff 10px, #dff3fc 10px, #dff3fc 20px); }
#visu-tools.vt-scroll-speed-test .vt-ss-cal input[type="range"] { width: 100%; accent-color: var(--vt-accent); }
#visu-tools.vt-scroll-speed-test #vt-ss-link { font-size: 14px; }

@media (max-width: 900px) {
  #visu-tools.vt-scroll-speed-test .vt-ss { grid-template-columns: minmax(0, 1fr); }
  #visu-tools.vt-scroll-speed-test .vt-ss-result { position: static; }
  #visu-tools.vt-scroll-speed-test .vt-ss-track { height: clamp(300px, 52vh, 440px); }
  /* One column: Start sits above the track, so it is on the first screen and the track stays under the thumb. */
  #visu-tools.vt-scroll-speed-test .vt-ss-play > .vt-actions { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  #visu-tools.vt-scroll-speed-test .vt-ss-track { scroll-behavior: auto; }
}