/*
 * utilities.css — Layout helpers and spacing utilities.
 *
 * These supplement style.css and eliminate repeated inline styles.
 * No class names from the original design system are changed.
 */

/* ── Display ─────────────────────────────────────────────────── */
.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start   { display: flex; align-items: center; justify-content: flex-start; }
.flex-wrap    { flex-wrap: wrap; }

/* ── Gap ─────────────────────────────────────────────────────── */
.gap-xs  { gap: .25rem; }
.gap-sm  { gap: .5rem; }
.gap-md  { gap: 1rem; }
.gap-lg  { gap: 1.5rem; }

/* ── Margin (supplements the existing .mt-1, .mt-2, .mb-1) ───── */
.mt-0    { margin-top: 0; }
.mt-3    { margin-top: 1.5rem; }
.mb-0    { margin-bottom: 0; }
.mb-2    { margin-bottom: 1rem; }
.mb-3    { margin-bottom: 1.5rem; }
.mx-auto { margin-inline: auto; }

/* ── Padding ─────────────────────────────────────────────────── */
.p-0    { padding: 0; }
.p-sm   { padding: .5rem; }
.p-md   { padding: 1rem; }

/* ── Text ────────────────────────────────────────────────────── */
.text-sm   { font-size: var(--font-size-sm); }
.text-xs   { font-size: var(--font-size-xs); }
.text-bold { font-weight: 700; }
.truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Visibility ──────────────────────────────────────────────── */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── Sizing ──────────────────────────────────────────────────── */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.min-w-0 { min-width: 0; }