/*
Single-purpose helper classes.

- Margin helpers
- Padding helpers
- Display utilities
- Flex/grid helpers
- Text alignment
- Visibility toggles

One rule per class. No nesting. No complexity. If a class does more than one thing, you failed.
*/

/* spacing */
.m-0 {
	margin: 0 !important;
}
.mt-4 {
	margin-top: var(--s-4) !important;
}
.mb-4 {
	margin-bottom: var(--s-4) !important;
}
.p-4 {
	padding: var(--s-4) !important;
}

/* layout */
.block {
	display: block !important;
}
.inline-block {
	display: inline-block !important;
}
.flex {
	display: flex !important;
}
.grid {
	display: grid !important;
} /* yes, wins if you need it */
.items-center {
	align-items: center !important;
}
.justify-between {
	justify-content: space-between !important;
}
.gap-3 {
	gap: var(--s-3) !important;
}
.gap-4 {
	gap: var(--s-4) !important;
}

/* text */
.text-center {
	text-align: center !important;
}
.muted {
	color: var(--c-muted) !important;
}

/* visibility */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}