/* Scroll Gauge: the gauge (built by gauge.js) and the travelling words.
   Colours and sizes arrive as custom properties on .sg-gauge (see dress() in gauge.js). */

html.sg-hide-native { scrollbar-width: none; }
html.sg-hide-native::-webkit-scrollbar { display: none; }

.sg-gauge {
	--sg-axis: calc(var(--sg-thick) + 6px); /* Distance from the screen edge to the centre of bars, dots and beads. */
	--sg-line: max(2px, calc(var(--sg-thick) / 3));
	position: fixed; top: var(--sg-top); right: var(--sg-edge); bottom: var(--sg-bottom); z-index: 110;
	width: var(--sg-width); overflow: hidden; pointer-events: none; user-select: none;
}
.sg-gauge--left { right: auto; left: var(--sg-edge); }
.sg-gauge--boxed { position: absolute; }
.sg-gauge[hidden] { display: none; }
.sg-gauge--interactive { pointer-events: auto; cursor: ns-resize; touch-action: none; }
/* Phones and touch screens: slim, display-only, below the header (taps pass straight through). */
.sg-gauge--slim { top: var(--sg-slim-top); bottom: 10px; z-index: 99; width: min(var(--sg-width), 38px); }
.sg-gauge--solid, .sg-gauge--dots, .sg-gauge--line { overflow: visible; }

/* Ruler: a depth tape sliding past the marker; dark marks with a light halo read on light and dark backgrounds. */
.sg-ruler__tape { --step: 8px; position: absolute; top: 0; right: 0; left: 0; will-change: transform; }
.sg-ruler__band {
	position: absolute; top: 0; right: 0; left: 22px; will-change: transform;
	background: linear-gradient(90deg, transparent, var(--sg-track)); border-block: 1px solid var(--sg-track-line);
}
.sg-gauge--left .sg-ruler__band { right: 22px; left: 0; background: linear-gradient(270deg, transparent, var(--sg-track)); }
.sg-ruler__tick {
	--lens: 0; position: absolute; top: calc(var(--n) * var(--step)); right: 4px; height: 1px;
	width: calc(10px + var(--lens) * 12px); background: var(--sg-ink);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); opacity: calc(.45 + var(--lens) * .55);
	transition: width .18s ease-out, opacity .18s ease-out;
}
.sg-ruler__tick.is-major { width: calc(20px + var(--lens) * 8px); opacity: calc(.75 + var(--lens) * .25); }
.sg-ruler__tick b {
	position: absolute; right: calc(100% + 5px); top: -5px; color: var(--sg-ink);
	font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em;
	text-shadow: 0 0 2px rgba(255, 255, 255, .85), 0 0 4px rgba(255, 255, 255, .85), 0 0 1px rgba(255, 255, 255, .85);
}
.sg-gauge--left .sg-ruler__tick { right: auto; left: 4px; }
.sg-gauge--left .sg-ruler__tick b { right: auto; left: calc(100% + 5px); }
.sg-ruler__marker {
	position: absolute; top: 0; left: 0; width: 100%; height: 2px; margin-top: -1px; will-change: transform;
	background: var(--sg-fill-across); box-shadow: 0 0 0 1px rgba(3, 18, 37, .35), 0 0 12px var(--sg-glow);
}
.sg-ruler__marker span {
	position: absolute; right: 4px; top: 6px; padding: 3px 5px; border-radius: 5px;
	background: var(--sg-label-bg); color: var(--sg-fill); box-shadow: 0 2px 8px rgba(3, 18, 37, .3);
	font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em;
}
.sg-gauge--left .sg-ruler__marker span { right: auto; left: 4px; }
.sg-gauge--interactive:hover .sg-ruler__tick, .sg-gauge.is-dragging .sg-ruler__tick { opacity: 1; }
.sg-gauge--slim .sg-ruler__tick { right: 2px; width: calc(6px + var(--lens) * 8px); }
.sg-gauge--slim .sg-ruler__tick.is-major { width: calc(12px + var(--lens) * 6px); }
.sg-gauge--slim .sg-ruler__tick b { font-size: 8px; right: calc(100% + 3px); top: -4px; }
.sg-gauge--slim .sg-ruler__band { left: 14px; }
.sg-gauge--slim .sg-ruler__marker span { font-size: 8px; padding: 2px 3px; right: 2px; top: 5px; }
.sg-gauge--slim.sg-gauge--left .sg-ruler__tick { right: auto; left: 2px; }
.sg-gauge--slim.sg-gauge--left .sg-ruler__tick b { right: auto; left: calc(100% + 3px); }
.sg-gauge--slim.sg-gauge--left .sg-ruler__band { right: 14px; left: 0; }

/* Solid: a rounded bar that fills as you scroll (the fill is clipped, so a gradient stays put). */
.sg-solid__track, .sg-solid__fill {
	position: absolute; top: 0; bottom: 0; right: calc(var(--sg-axis) - var(--sg-thick) / 2);
	width: var(--sg-thick); border-radius: 999px;
}
.sg-solid__track { background: var(--sg-track); }
.sg-solid__fill { background: var(--sg-fill-bg); }
.sg-gauge--left .sg-solid__track, .sg-gauge--left .sg-solid__fill { right: auto; left: calc(var(--sg-axis) - var(--sg-thick) / 2); }

/* Dots: light up as you pass them; the current dot swells. */
.sg-dots__dot {
	position: absolute; right: calc(var(--sg-axis) - var(--sg-thick) / 2); width: var(--sg-thick); height: var(--sg-thick);
	margin-top: calc(var(--sg-thick) / -2); border-radius: 50%; background: var(--sg-track);
	transition: background-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.sg-dots__dot.is-on { background: var(--sg-dot); }
.sg-dots__dot.is-here { transform: scale(1.7); box-shadow: 0 0 0 2px rgba(255, 255, 255, .7), 0 0 12px var(--sg-dot); }
.sg-gauge--left .sg-dots__dot { right: auto; left: calc(var(--sg-axis) - var(--sg-thick) / 2); }

/* Line: a thin track, filled to a bead in the chosen shape. */
.sg-line__track, .sg-line__fill {
	position: absolute; top: 0; bottom: 0; right: calc(var(--sg-axis) - var(--sg-line) / 2);
	width: var(--sg-line); border-radius: 999px;
}
.sg-line__track { background: var(--sg-track); }
.sg-line__fill { background: var(--sg-fill-bg); }
.sg-line__bead {
	position: absolute; top: 0; right: calc(var(--sg-axis) - var(--sg-thick));
	width: calc(var(--sg-thick) * 2); height: calc(var(--sg-thick) * 2); margin-top: calc(var(--sg-thick) * -1); will-change: transform;
}
.sg-line__bead::before {
	content: ""; position: absolute; inset: 0; box-sizing: border-box; border-radius: 50%;
	background: var(--sg-fill); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 4px 14px var(--sg-glow);
}
.sg-bead--ring::before { background: rgba(255, 255, 255, .9); border: max(2px, calc(var(--sg-thick) / 2.5)) solid var(--sg-fill); }
.sg-bead--diamond::before { border-radius: 3px; transform: rotate(45deg) scale(.8); }
.sg-bead--drop::before { border-radius: 50% 50% 50% 0; transform: rotate(-45deg) scale(.9); }
.sg-bead--pill::before { inset: -30% 18%; border-radius: 999px; }
.sg-gauge--left .sg-line__track, .sg-gauge--left .sg-line__fill { right: auto; left: calc(var(--sg-axis) - var(--sg-line) / 2); }
.sg-gauge--left .sg-line__bead { right: auto; left: calc(var(--sg-axis) - var(--sg-thick)); }

/* Travelling words: each letter is placed by gauge-words.js; only opacity uses CSS transitions.
   With the default "difference" blend, white letters read dark on light sections and light on dark ones. */
.sg-words { position: fixed; inset: 0; z-index: 109; pointer-events: none; mix-blend-mode: difference; }
.sg-words--boxed { position: absolute; overflow: hidden; }
.sg-words[hidden] { display: none; }
.sg-words__l {
	position: absolute; top: 0; left: 0; transform-origin: 0 0; white-space: pre; pointer-events: auto; cursor: pointer;
	font: 800 var(--sg-words-size)/1 var(--sg-words-font); text-transform: var(--sg-words-case); letter-spacing: .02em;
	color: var(--sg-words-color, #fff); will-change: transform; transition: opacity .4s ease;
}
.sg-words__l.is-past, .sg-words__l.is-later { opacity: .6; }
.sg-words__l.is-next { opacity: .85; }
.sg-words__l:hover { opacity: 1; }
.sg-words:not(.is-ready) .sg-words__l { opacity: 0; transition: none; }

@media (prefers-reduced-motion: reduce) {
	.sg-ruler__tick, .sg-dots__dot, .sg-words__l { transition: none; }
}