/* Badge/medal/stamp visuals — status is always paired with text, never
   colour alone, per the accessibility requirement. */

.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: 700;
}

/* Text colours below are deliberately NOT --color-status-* — those tokens
   are mid-tone and fail 4.5:1 against these pastel pill backgrounds. Each
   uses a verified-dark alias instead so the label stays readable. */

.badge--locked {
	background: var(--color-surface-muted);
	color: var(--color-text-muted);
}

.badge--current {
	background: var(--color-reward-soft);
	color: var(--color-on-reward);
}

.badge--completed {
	background: var(--raw-teal-400);
	color: var(--color-on-reward);
}

.badge__icon {
	width: 1.1em;
	height: 1.1em;
}

.medal {
	position: relative;
	display: inline-block;
}

.medal img {
	filter: drop-shadow(0 3px 0 rgba(15, 27, 61, 0.15));
}

.medal--locked img {
	filter: grayscale(1) opacity(0.55);
}