/**
 * Variant CSS: stats--inline-band-with-label
 * Layer 2 — Path B stats role (2026-05-29).
 * Horizontal band: section label left, 3-4 inline metrics right. Static (no JS counters).
 * EVERY selector scoped to .universal-stats--inline-band-with-label (no global leak).
 */

body.aibt-universal .universal-stats--inline-band-with-label {
	background: var(--background-alt);
	color: var(--text-primary);
	border-top: 1px solid var(--divider-primary);
	border-bottom: 1px solid var(--divider-primary);
}

body.aibt-universal .universal-stats--inline-band-with-label .universal-stats__band {
	gap: var(--space-xl);
	align-items: center;
}

/* === Intro (left) === */
body.aibt-universal .universal-stats--inline-band-with-label .universal-stats__intro {
	flex: 1 1 240px;
}

body.aibt-universal .universal-stats--inline-band-with-label .universal-stats__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest) !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	margin: 0 0 var(--space-2xs) 0 !important;
}

body.aibt-universal .universal-stats--inline-band-with-label .universal-stats__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
}

/* === Metrics (right) === */
body.aibt-universal .universal-stats--inline-band-with-label .universal-stats__row {
	flex: 2 1 auto;
	gap: var(--space-lg) var(--space-2xl);
	align-items: baseline;
}

body.aibt-universal .universal-stats--inline-band-with-label .universal-stats__metric {
	text-align: left;
}

body.aibt-universal .universal-stats--inline-band-with-label .universal-stats__number {
	font-family: var(--font-display) !important;
	font-weight: 700 !important;
	font-size: clamp(2.4rem, 4vw, 3.6rem) !important;
	color: var(--accent) !important;
	margin: 0 0 var(--space-2xs) 0 !important;
	line-height: 1 !important;
	letter-spacing: -0.04em !important;
	font-variant-numeric: tabular-nums;
}

body.aibt-universal .universal-stats--inline-band-with-label .universal-stats__label {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
	line-height: 1.3 !important;
}

/* Tablet: the band stacks (intro over metrics) — tighten the inter-metric gutter
   so four inline metrics still read as one row, not a sparse grid. */
@media (max-width: 781px) {
	body.aibt-universal .universal-stats--inline-band-with-label .universal-stats__band {
		gap: var(--space-lg);
	}
	body.aibt-universal .universal-stats--inline-band-with-label .universal-stats__row {
		gap: var(--space-md) var(--space-xl);
	}
}

/* Phone: the metrics wrap to 2-up. Flex-wrap + justify:right leaves a ragged,
   right-pushed block, so switch to an explicit left-aligned 2-col grid for a
   tidy 2x2. Cap the uppercase kicker tracking to 0 (wide tracking hurts
   legibility on a narrow viewport). */
@media (max-width: 640px) {
	body.aibt-universal .universal-stats--inline-band-with-label .universal-stats__row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-lg) var(--space-md);
		justify-content: stretch;
	}
	body.aibt-universal .universal-stats--inline-band-with-label .universal-stats__kicker {
		letter-spacing: 0 !important;
	}
}