/* Serial-Pill.css */

/* Gold pill with black outline and white outlined text */
.pill {
	display: inline-flex;						 /* use flex for perfect centering */
	align-items: center;							/* vertical center */
	justify-content: center;					/* horizontal center */

	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	white-space: nowrap;

	/* Visuals */
	background-color: var(--accent, #d4af37); /* gold fill */
	border: 2px solid #000;									 /* black outline */
	
	/* Text */
	color: #fff;								 /* base white */
	font-size: 12px;
	font-weight: bold;
	text-align: center;

	/* White text with black outline */
	text-shadow:
		-2px -1px 0 var(--special),
		 2px -1px 0 var(--special),
		-2px	1px 0 var(--special),
		 2px	1px 0 var(--special),
		-1px -2px 0 var(--special),
		 1px -2px 0 var(--special),
		-1px	2px 0 var(--special),
		 1px	2px 0 var(--special),
		-2px -2px 0 var(--special),
		 2px -2px 0 var(--special),
		-2px	2px 0 var(--special),
		 2px	2px 0 var(--special);

	/* Transition for hover */
	transition: background-color 120ms ease, border-color 120ms ease;
}

.pill:hover,
.pill:focus {
	background-color: #c19e2b; /* slightly darker gold on hover */
	border-color: #000;
	text-decoration: none;
	outline: 0;
}

.pill:focus-visible {
	box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--accent, #d4af37);
}