/**
 * Site counter — front end.
 *
 * Every value is a custom property with an inline fallback, and none are
 * declared on .liminal-odometer itself. This stylesheet loads after the
 * theme's, so defaults declared on the same selector would beat anything a
 * theme set there. With fallbacks at the point of use, a theme can set these
 * anywhere — :root, an ancestor, or the element — and they apply.
 *
 * Available variables:
 *   --lvc-gap --lvc-label-color --lvc-label-size --lvc-label-spacing
 *   --lvc-label-font --lvc-digit-font --lvc-digit-size --lvc-digit-color
 *   --lvc-digit-bg --lvc-digit-border --lvc-digit-radius --lvc-digit-gap
 *   --lvc-digit-padding --lvc-meta-color --lvc-meta-size
 */

.liminal-odometer {
	display: flex;
	flex-direction: column;
	gap: var(--lvc-gap, 0.5rem);
	align-items: flex-start;
}

.liminal-odometer__label {
	font-family: var(--lvc-label-font, inherit);
	font-size: var(--lvc-label-size, 0.68rem);
	letter-spacing: var(--lvc-label-spacing, 0.16em);
	text-transform: uppercase;
	color: var(--lvc-label-color, currentColor);
	opacity: var(--lvc-label-opacity, 0.85);
}

.liminal-odometer__digits {
	display: flex;
	gap: var(--lvc-digit-gap, 0.1875rem);
}

.liminal-odometer__digit {
	font-family: var(--lvc-digit-font, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	font-size: var(--lvc-digit-size, 1.125rem);
	line-height: 1;
	font-variant-numeric: tabular-nums;

	/* A fixed min-width keeps the cells square-ish whatever the digit, so the
	   run does not shuffle as the number ticks over. */
	min-width: var(--lvc-digit-width, 1.1em);
	padding: var(--lvc-digit-padding, 0.32em 0.18em);
	box-sizing: border-box;
	text-align: center;

	color: var(--lvc-digit-color, currentColor);
	background: var(--lvc-digit-bg, rgba(0, 0, 0, 0.06));
	border: 1px solid var(--lvc-digit-border, rgba(0, 0, 0, 0.16));
	border-radius: var(--lvc-digit-radius, 2px);
}

.liminal-odometer__meta {
	font-size: var(--lvc-meta-size, 0.78rem);
	color: var(--lvc-meta-color, currentColor);
	opacity: var(--lvc-meta-opacity, 0.72);
}

/* The counter is decorative furniture rather than content, so it steps aside
   when the page is printed. */
@media print {
	.liminal-odometer {
		display: none;
	}
}