/* app/assets/stylesheets/base/utilities.css
   ─────────────────────────────────────────────────────────────────────────────
   Single-purpose utility classes. Keep this lean — not a full utility framework.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Accessibility ───────────────────────────────────────────────────────── */

.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0,0,0,0);
  white-space: nowrap;
  border:     0;
}

/* ── Display ─────────────────────────────────────────────────────────────── */

.hidden  { display: none !important; }
.block   { display: block; }
.flex    { display: flex; }
.grid    { display: grid; }
.inline  { display: inline; }
.inline-flex { display: inline-flex; }

/* ── Flex helpers ────────────────────────────────────────────────────────── */

.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.flex-gap-2    { gap: var(--space-2); }
.flex-gap-4    { gap: var(--space-4); }
.flex-wrap     { flex-wrap: wrap; }
.flex-1        { flex: 1; }

/* ── Spacing ─────────────────────────────────────────────────────────────── */

.mt-2  { margin-top:    var(--space-2); }
.mt-4  { margin-top:    var(--space-4); }
.mt-6  { margin-top:    var(--space-6); }
.mt-8  { margin-top:    var(--space-8); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }

/* ── Width ───────────────────────────────────────────────────────────────── */

.w-full  { width: 100%; }
.w-auto  { width: auto; }
.max-prose { max-width: var(--max-width-prose); }

/* ── Borders ─────────────────────────────────────────────────────────────── */

.divider {
  border: none;
  border-top: var(--border-width) solid var(--border-color);
  margin: var(--space-6) 0;
}

.divider--heavy {
  border-top-width: 3px;
  border-color: var(--color-black);
}

/* ── Backgrounds ─────────────────────────────────────────────────────────── */

.bg-surface { background: var(--bg-surface); }
.bg-sunken  { background: var(--bg-sunken); }
.bg-accent  { background: var(--accent-light); }

/* ── Text alignment ──────────────────────────────────────────────────────── */

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ── Cursor ──────────────────────────────────────────────────────────────── */

.cursor-pointer { cursor: pointer; }

/* ── Overflow ────────────────────────────────────────────────────────────── */

.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }