/* Numbered Marker — hexagon badge with accent line
   ========================================================================== */

.numbered-marker {
	display: flex;
	align-items: center;
	gap: 12px;
}

.numbered-marker__badge {
	display: block;
	flex-shrink: 0;
	width: var(--marker-badge-width);
	aspect-ratio: var(--marker-hex-ratio);
}

.numbered-marker__hex {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	color: var(--color-accent);
}

.numbered-marker__hex polygon {
	fill: currentColor;
}

.numbered-marker__digit {
	fill: var(--color-black);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xs);
	font-weight: 800;
	font-variant-numeric: lining-nums tabular-nums;
	letter-spacing: -0.03em;
}

.numbered-marker--outline .numbered-marker__hex polygon {
	fill: rgba(212, 255, 0, 0.1);
	stroke: currentColor;
	stroke-width: 1.25;
	stroke-linejoin: round;
}

.numbered-marker--outline .numbered-marker__digit {
	fill: var(--color-accent);
}