/* ========================================================== utilities.css
   Small, composable helpers built on the spacing/type tokens so templates can
   drop their inline style="" attributes as each screen is rebuilt. Additive.
   ======================================================================= */

/* Margin / padding — 0..8 map to the --sp scale. */
.mt-0 { margin-top: 0; }        .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: var(--sp-1); }   .mb-1 { margin-bottom: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }   .mb-2 { margin-bottom: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }   .mb-3 { margin-bottom: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }   .mb-4 { margin-bottom: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }   .mb-6 { margin-bottom: var(--sp-6); }
.m-0 { margin: 0; }

/* Flex helpers. */
.row { display: flex; align-items: center; gap: var(--sp-2); }
.row-wrap { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.col { display: flex; flex-direction: column; gap: var(--sp-2); }
.grow { flex: 1; min-width: 0; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); }
.wrap { flex-wrap: wrap; }

/* Text. */
.num { font-variant-numeric: tabular-nums; }
.tright { text-align: right; }
.nowrap { white-space: nowrap; }
.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.fw-semibold { font-weight: var(--fw-semibold); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Visibility. */
.hidden { display: none !important; }
@media (max-width: 640px) { .hide-sm { display: none !important; } }