/* Ability Glossary — static keyword reference page. */

.gloss-page {
	max-width: 760px;
	margin: 0 auto;
	padding: 28px 20px 64px;
}

.gloss-head { text-align: center; margin-bottom: 34px; }

.gloss-head h1 {
	font-family: var(--serif);
	font-size: 2.1rem;
	font-weight: 600;
	color: var(--text);
	margin: 0 0 8px;
}

.gloss-tagline {
	color: var(--text-dim);
	font-size: .95rem;
	line-height: 1.5;
	max-width: 52ch;
	margin: 0 auto;
}

.gloss-filter-bar {
	margin: 0 0 20px;
	border-radius: var(--radius-md);
	border: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	position: static;
}

.gloss-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

.gloss-no-results {
	text-align: center;
	color: var(--text-mute);
	font-size: .9rem;
	padding: 24px 0;
}

.gloss-term {
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-card);
}

.gloss-term-name {
	display: flex;
	align-items: baseline;
	gap: .35em;
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 600;
	color: var(--text);
	margin: 0 0 4px;
}

.gloss-name-en { order: 1; }
.gloss-name-sep { order: 2; color: var(--text-mute); font-weight: 500; }
.gloss-name-es { order: 3; font-weight: 500; color: var(--text-mute); }

/* Sorting by Spanish name: lead with the Spanish name instead. */
#glossList.sort-by-es .gloss-name-es { order: 1; }
#glossList.sort-by-es .gloss-name-sep { order: 2; }
#glossList.sort-by-es .gloss-name-en { order: 3; }

/* English site: the Spanish name is redundant, so drop it entirely. */
.gloss-hide-es .gloss-name-es,
.gloss-hide-es .gloss-name-sep { display: none; }

.gloss-term-desc {
	margin: 0;
	color: var(--text-dim);
	font-size: .9rem;
	line-height: 1.5;
}

@media (max-width: 520px) {
	.gloss-head h1 { font-size: 1.7rem; }
}