/**
 * css/components/chip-list.css — About page restyle (#68)
 *
 * Numbered "chip" badge + full-width hairline-divided rows
 * (blocks/about_content/text_circles_list.php). About-only — no existing
 * cg component combines a small bordered numeral badge with hairline rows
 * (accordion.css is the closest relative but is interactive/full-bleed;
 * this is a plain static list contained within the split's frame).
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-hairline-list {
	margin: 64px 0 0;
	padding: 0;
	list-style: none;
	border-top: var( --hairline ) solid var( --rule );
}

.cg-hairline-list__item {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 26px 0;
	border-bottom: var( --hairline ) solid var( --rule );
}

.cg-hairline-list__chip {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 28px;
	padding: 0 12px;
	border: var( --hairline ) solid var( --rule-strong );
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var( --accent );
}

.cg-hairline-list__title {
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 16px;
	color: var( --text );
}