/*
 * Manhali Modern: single-purpose utilities.
 * Loaded last so a utility always wins over component defaults, the way the inline
 * styles they replace did. Names follow Tailwind (the platform port target), so a
 * class here maps 1:1 to its Tailwind utility: 4px spacing steps, gap-0.5 = 2px.
 * Keep this list small. Anything with meaning (a card, a row) belongs in components.css.
 */

/* Gap */
.gap-0 { gap: 0 !important; }
.gap-0\.5 { gap: 2px !important; }
.gap-1 { gap: 4px !important; }
.gap-1\.5 { gap: 6px !important; }
.gap-2 { gap: 8px !important; }
.gap-2\.5 { gap: 10px !important; }
.gap-3 { gap: 12px !important; }
.gap-3\.5 { gap: 14px !important; }
.gap-4 { gap: 16px !important; }
.gap-6 { gap: 24px !important; }
.gap-grid { gap: var(--grid-gap) !important; }

/* Block-start / block-end margin (logical, so RTL and LTR match) */
.mt-1 { margin-block-start: 4px !important; }
.mt-1\.5 { margin-block-start: 6px !important; }
.mt-2 { margin-block-start: 8px !important; }
.mt-2\.5 { margin-block-start: 10px !important; }
.mt-3 { margin-block-start: 12px !important; }
.mt-3\.5 { margin-block-start: 14px !important; }
.mt-4 { margin-block-start: 16px !important; }
.mb-2 { margin-block-end: 8px !important; }

/* Flex and sizing */
.self-start { align-self: flex-start !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.min-w-0 { min-inline-size: 0 !important; }
.w-full { inline-size: 100% !important; }
.max-w-full { max-inline-size: 100% !important; }
.d-block { display: block !important; }

/* Text */
.text-center { text-align: center !important; }
.text-start { text-align: start !important; }
.nowrap { white-space: nowrap; }

/* `hidden` must still win over display utilities */
[hidden] { display: none !important; }
.text-end { text-align: end !important; }