/* ==========================================================================
   Component: spot price ticker

   A conveyor of live metal prices along the very top of the page. It stops
   under the pointer, so a price can be read rather than chased, and it does
   not move at all for anyone who has asked for less motion.
   ========================================================================== */

.tcs-spot {
	position: relative;
	overflow: hidden;
	padding-block: 0.4rem;
	background: var(--tcs-band-ink, #23211D);
	color: var(--tcs-ink-inverse, #F7F5F0);
	font-size: var(--tcs-text-xs, 0.8rem);
	font-variant-numeric: tabular-nums lining-nums;
	line-height: 1.4;
	border-block-end: 1px solid var(--tcs-band-rule, #3D3A33);
}

/* The belt itself: several identical runs, sliding by exactly one run. */
.tcs-spot__track {
	display: flex;
	width: max-content;
	animation: tcs-spot-belt 60s linear infinite;
}

.tcs-spot:hover .tcs-spot__track,
.tcs-spot:focus-within .tcs-spot__track {
	animation-play-state: paused;
}

@keyframes tcs-spot-belt {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-25%, 0, 0); }
}

.tcs-spot__run {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

.tcs-spot__item {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	padding-inline: clamp(0.9rem, 2vw, 1.6rem);
	white-space: nowrap;
}

/* A hairline between entries, in place of a bullet. */
.tcs-spot__item + .tcs-spot__item {
	border-inline-start: 1px solid var(--tcs-band-rule, #3D3A33);
}

.tcs-spot__metal {
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tcs-ink-inverse-muted, #CBC4B5);
}

.tcs-spot__price {
	font-weight: var(--tcs-weight-medium, 500);
	color: var(--tcs-ink-inverse, #F7F5F0);
}

.tcs-spot__unit {
	color: var(--tcs-ink-inverse-faint, #A39B8B);
}

.tcs-spot__change--up {
	color: #8FBF9A;
}

.tcs-spot__change--down {
	color: #D98C82;
}

.tcs-spot__change--flat {
	color: var(--tcs-ink-inverse-faint, #A39B8B);
}

.tcs-spot__note {
	color: var(--tcs-ink-inverse-faint, #A39B8B);
}

/*
 * Reduced motion: the belt stands still and becomes an ordinary scrolling
 * strip, so every price is still reachable.
 */
@media (prefers-reduced-motion: reduce) {
	.tcs-spot {
		overflow-x: auto;
	}

	.tcs-spot__track {
		animation: none;
	}

	/* The repeats exist only to feed the animation. */
	.tcs-spot__run[aria-hidden="true"] {
		display: none;
	}
}