/* utilities.css — small atomic helpers used across pages */

/* spacing */
.m-0 { margin: 0; }
.mb-1 { margin-bottom: 6px; }
.mb-2 { margin-bottom: 12px; }
.mb-3 { margin-bottom: 18px; }
.mb-4 { margin-bottom: 24px; }
.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 18px; }
.mt-4 { margin-top: 24px; }
.p-2 { padding: 12px; }
.p-3 { padding: 18px; }

/* gaps */
.row-8 { display: flex; gap: 8px; align-items: center; }
.row-12 { display: flex; gap: 12px; align-items: center; }
.row-16 { display: flex; gap: 16px; align-items: center; }
.row-24 { display: flex; gap: 24px; align-items: center; }
.col-8 { display: flex; flex-direction: column; gap: 8px; }
.col-12 { display: flex; flex-direction: column; gap: 12px; }
.col-16 { display: flex; flex-direction: column; gap: 16px; }
.grow-1 { flex: 1 1 auto; }
.spacer { flex: 1 1 auto; }
.nowrap { white-space: nowrap; }

/* colors/text */
.text-muted { color: var(--text-secondary); }
.text-faint { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-accent  { color: var(--accent-strong); }

.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-18 { font-size: 18px; }

/* layout */
.right { text-align: right; }
.center { text-align: center; }
.hidden { display: none !important; }
.relative { position: relative; }

/* hide on small screens */
@media (max-width: 760px) {
  .hide-sm { display: none; }
}

/* focus visibility */
:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
  border-radius: 4px;
}