/*
 * Glossary: search control, group, hairline term grid.
 * design/DESIGN-SYSTEM.md §4.10; design/PAGE-STRUCTURE.md §8.
 *
 * The 1px gap IS the rule: the grid's own background shows through it, so the
 * cells never draw borders of their own and no two rules ever double up.
 *
 * The search input follows §8 row 2 (#111 / 14px), not the prototype's one-off
 * #1B1B1B / 13px 16px -- the design system's own consolidation, and what every
 * other field in the theme already does.
 */

.sp-glossary__search-field {
	flex: 0 1 300px;
	min-width: 240px;
}

.sp-glossary__search {
	width: 100%;
	padding: var(--sp-4);
	background: var(--sp-bg-deep);
	border: var(--sp-border-field);
	border-radius: var(--sp-radius);
	color: var(--sp-text);
	font-family: var(--sp-font-body);
	font-size: var(--sp-fs-base);
}

.sp-glossary__search::placeholder {
	color: var(--sp-text-45);
}

/* ---------------------------------------------------------------- groups */

.sp-glossary__groups {
	display: flex;
	flex-direction: column;
	/* TODO token: glossary group vertical gap (§1.3). */
	gap: clamp(26px, 3vw, 40px);
}

.sp-glossary__group-title {
	margin: 0 0 var(--sp-4);
	font-family: var(--sp-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: var(--sp-fs-micro);
	line-height: var(--sp-lh-body);
	letter-spacing: var(--sp-ls-tag);
	text-transform: uppercase;
	color: var(--sp-red);
}

/* ----------------------------------------------------------- term grid */

.sp-glossary__terms {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1px;
	margin: 0;
	/* TODO token: glossary hairline, rgba(255,255,255,0.09) (§1.1). */
	background: rgba(255, 255, 255, 0.09);
	border: 1px solid rgba(255, 255, 255, 0.09);
}

.sp-term {
	padding: var(--sp-7) var(--sp-8);
	background: var(--sp-bg-deep);
}

.sp-term__word {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: var(--sp-fs-lg);
	line-height: var(--sp-lh-tight);
	text-transform: uppercase;
	color: var(--sp-text);
}

.sp-term__def {
	margin: 6px 0 0;
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-60);
	text-wrap: pretty;
}

/* ----------------------------------------------------------- empty state */

.sp-glossary__empty {
	margin: var(--sp-9) 0 0;
	font-size: var(--sp-fs-base);
	color: var(--sp-text-50);
}