/* =========================================================================
   utilities.css — small reusable helpers
   ========================================================================= */

.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-items-center { align-items: center; }
.u-justify-between { justify-content: space-between; }
.u-gap-sm { gap: 0.5rem; }
.u-gap-md { gap: 1rem; }
.u-gap-lg { gap: 2rem; }

.u-mt-sm { margin-top: 0.75rem; }
.u-mt-md { margin-top: 1.5rem; }
.u-mt-lg { margin-top: 2.5rem; }
.u-mb-sm { margin-bottom: 0.75rem; }
.u-mb-md { margin-bottom: 1.5rem; }

.u-text-center { text-align: center; }
.u-text-muted { color: var(--steel-700); }
.u-text-sm { font-size: 0.85rem; }
.u-max-prose { max-width: 68ch; }

.u-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 720px) { .u-grid-2 { grid-template-columns: 1fr; } }

.u-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .u-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .u-grid-4 { grid-template-columns: 1fr; } }

.u-border-top { border-top: 1px solid var(--paper-200); padding-top: 2rem; }
.u-panel {
  background: var(--white);
  border: 1px solid var(--paper-200);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}