/* NE Design System — components/pills.css — Phase 2 (#65) */
/* Pills, badges, status indicators */

.ne-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--ne-space-1);
	padding: var(--ne-space-1) var(--ne-space-3);
	font-family: var(--ne-font-mono);
	font-size: 0.688rem;
	font-weight: 500;
	letter-spacing: 0.3px;
	border-radius: var(--ne-radius-pill);
	background: var(--ne-elevated);
	color: var(--ne-text);
	white-space: nowrap;
	line-height: 1.5;
}

/* === Color variants === */
.ne-pill--accent {
	background: var(--ne-accent-glow);
	color: var(--ne-accent);
}

.ne-pill--green {
	background: rgba(61, 214, 140, 0.12);
	color: var(--ne-green);
}

.ne-pill--red {
	background: rgba(255, 79, 79, 0.12);
	color: var(--ne-red);
}

.ne-pill--yellow {
	background: rgba(255, 184, 0, 0.12);
	color: var(--ne-yellow);
}

.ne-pill--blue {
	background: rgba(0, 118, 190, 0.12);
	color: var(--ne-blue);
}

/* === Status dot === */
.ne-pill__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.ne-pill__dot.is-live {
	animation: ne-pulse 2s ease-in-out infinite;
}

/* === Badge (larger, bolder) === */
.ne-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 var(--ne-space-2);
	font-family: var(--ne-font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: var(--ne-radius-sm);
	background: var(--ne-accent);
	color: #fff;
}

.ne-badge--gold {
	background: rgba(255, 184, 0, 0.2);
	color: var(--ne-yellow);
}

.ne-badge--silver {
	background: rgba(255, 255, 255, 0.1);
	color: var(--ne-text-subtle);
}

.ne-badge--bronze {
	background: rgba(234, 64, 8, 0.15);
	color: #ea4008;
}

/* === Position badges (podium) === */
.ne-podium {
	display: inline-flex;
	align-items: center;
	gap: var(--ne-space-2);
	font-family: var(--ne-font-mono);
	font-size: 0.85rem;
}

.ne-podium__pos {
	width: 32px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--ne-radius-sm);
	font-weight: 700;
	font-size: 0.75rem;
}

.ne-podium__pos--1 {
	background: rgba(255, 184, 0, 0.2);
	color: var(--ne-yellow);
}

.ne-podium__pos--2 {
	background: rgba(255, 255, 255, 0.1);
	color: var(--ne-text-subtle);
}

.ne-podium__pos--3 {
	background: rgba(234, 64, 8, 0.15);
	color: #ea4008;
}