/* ============================================================
   utilities.css — Small composable helpers
   ============================================================ */

/* Flow / stack spacing */
.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-6); }

/* Flex */
.row { display: flex; align-items: center; }
.row-gap-1 { gap: var(--sp-1); } .row-gap-2 { gap: var(--sp-2); } .row-gap-3 { gap: var(--sp-3); } .row-gap-4 { gap: var(--sp-4); }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center { justify-content: center; }
.items-start { align-items: flex-start; }
.flex-1 { flex: 1; }
.flex-none { flex: none; }

/* Text */
.t-xs { font-size: var(--fs-xs); } .t-sm { font-size: var(--fs-sm); } .t-md { font-size: var(--fs-md); } .t-lg { font-size: var(--fs-lg); }
.t-muted { color: var(--text-muted); } .t-secondary { color: var(--text-secondary); } .t-accent { color: var(--accent); }
.t-center { text-align: center; }
.fw-medium { font-weight: var(--fw-medium); } .fw-semibold { font-weight: var(--fw-semibold); } .fw-bold { font-weight: var(--fw-bold); }
.lead { font-size: var(--fs-lg); color: var(--text-secondary); line-height: var(--lh-relaxed); }
.zh { color: var(--text-muted); }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Spacing */
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); }
.p-4 { padding: var(--sp-4); } .p-6 { padding: var(--sp-6); }

/* Visibility */
.hidden { display: none !important; }
@media (max-width: 720px) { .hide-mobile { display: none !important; } }
@media (min-width: 721px) { .hide-desktop { display: none !important; } }

/* Animation */
.fade-in { animation: fade-in var(--t-base); }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }