/**
 * OSHIDA — pill.
 *
 * @figma 1560:926  334 x 60, hairline edge
 * @figma 1560:929  label 18px / 400 / -0.03em, set 29.4px in from the inline
 *                  start; the rest of the run is a rule.
 *
 * 1560:927 is a custom vector, not a rounded rectangle, and the render is too
 * dark to read its exact silhouette at 1x. Reproduced as a hairline-edged
 * rounded rectangle with a rule filling the empty run — close, not exact.
 * Flagged in docs/ai/component-contracts.md.
 *
 * Owner: work package B1.
 */

.o-pill {
	display: flex;
	align-items: center;
	gap: var(--o-space-xs);
	min-block-size: 60px;
	padding-inline: 29px;
	border: var(--o-line-width) solid var(--o-line-soft);
	border-radius: var(--o-radius-sm);
	font-size: var(--o-fs-md);
	font-weight: var(--o-fw-regular);
	letter-spacing: var(--o-track-tight);
}

.o-pill__label {
	flex: none;
}

.o-pill__rule {
	flex: 1 1 auto;
	min-inline-size: var(--o-space-xs);
	block-size: 1px;
	background-color: var(--o-line-soft);
}

@media (max-width: 599px) {
	.o-pill {
		min-block-size: 48px;
		padding-inline: var(--o-space-md);
	}
}