/* === Utility classes — do not add component styles here === */

/* Display */
.d-none    { display: none; }
.d-block   { display: block; }
.d-flex    { display: flex; }
.d-inline  { display: inline; }
.d-inline-flex { display: inline-flex; }

/* Flex */
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.flex-1        { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }

/* Position */
.pos-relative { position: relative; }
.pos-absolute { position: absolute; }

/* Text */
.text-none    { text-decoration: none; }
.text-center  { text-align: center; }
.text-accent  { color: var(--accent); }
.text-muted   { color: var(--muted); }
.text-inherit { color: inherit; }

/* Misc */
.ws-nowrap { white-space: nowrap; }

/* JS visibility toggling — use classList.add/remove('hidden') */
.hidden { display: none !important; }

/* Color states */
.text-bad { color: var(--bad); }