/* ============================================================
   Counter Roll – Styles (Editor + Frontend)
   ============================================================ */

.cr-counter {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25em;
}

/* Number row */
.cr-number {
	display: inline-flex;
	align-items: flex-end;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Each digit column clips the reel */
.cr-digit-wrap {
	display: inline-block;
	overflow: hidden;
	height: 1em;
	vertical-align: bottom;
	/* Fade in when JS makes it visible */
	transition: opacity 0.3s ease;
}

/* Leading columns (higher order digits not yet needed) start invisible */
.cr-digit-wrap--leading {
	opacity: 0;
}

/* The reel: 10 digits stacked */
.cr-digit-reel {
	display: flex;
	flex-direction: column;
	will-change: transform;
	transform: translateY( 0 );
}

.cr-digit {
	display: block;
	text-align: center;
	height: 1em;
	line-height: 1;
	flex-shrink: 0;
}

/* Suffix */
.cr-suffix {
	display: inline-block;
	line-height: 1;
	height: 1em;
	vertical-align: bottom;
}

/* Label area */
.cr-label-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3em;
	margin-top: 0.4em;
}

/* Line above label — auto-width via inline-block on parent */
.cr-label-line {
	width: 100%;
	height: 1px;
	background: currentColor;
	opacity: 0.4;
}

.cr-label {
	text-align: center;
	white-space: nowrap;
}

/* Screen reader only */
.cr-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* ── Editor: show end digit statically ────────────────────── */
.cr-counter--editor .cr-digit-wrap--leading {
	opacity: 0.2;
}