/* /design-system/foundations/glyphs — reference grid for glyph specimens.
   Reference grid (not prose), so no <text-content> wrapper and no voice
   classes on cell labels. */

.glyph-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 1rem;
	margin-block: 1.5rem;
}

.glyph-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 1rem;
	border: 1px solid var(--stroke);
	text-align: center;
}

.glyph-cell .glyph {
	font-family: ui-monospace, Monaco, monospace;
	font-size: 2.5rem;
	line-height: 1;
	background: none;
	padding: 0;
}

.glyph-cell h3 {
	font-size: 0.9rem;
	margin: 0;
}

.glyph-example {
	font-family: ui-monospace, Monaco, monospace;
	white-space: pre;
	padding: 1rem;
	background: var(--fill-secondary, #f5f5f5);
	overflow-x: auto;
	margin-block: 1.5rem;
}