/* PACXS utility classes.
 *
 * Companion to style.css. Lives separately so the CSP-extraction migration
 * can grow this file without conflict-prone diffs against the main stylesheet.
 *
 * Goal: drop `'unsafe-inline'` from CSP `style-src`. That requires zero
 * `style="..."` attributes anywhere in rendered HTML. Run
 *   node scripts/audit-inline-styles.js --top 30
 * to see what's left.
 *
 * Convention: short scoped names. Spacing in 4px steps (mb-4 = 4px,
 * mb-12 = 12px, etc) matching the values that already appear inline in
 * app.js. Add a class when you migrate a high-traffic inline style;
 * don't rename existing ones — they may already be referenced.
 */

/* spacing */
.mb-4  { margin-bottom: 4px;  }
.mb-8  { margin-bottom: 8px;  }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mt-4  { margin-top: 4px;  }
.mt-8  { margin-top: 8px;  }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }

/* flex helpers */
.flex-1 { flex: 1; }
.flex-1-min { flex: 1; min-width: 0; }
.row-between-center { display: flex; justify-content: space-between; align-items: center; }
.row-gap-6 { display: flex; gap: 6px; }
.row-gap-8 { display: flex; gap: 8px; }
.row-gap-12 { display: flex; gap: 12px; }
.col-gap-12 { display: flex; flex-direction: column; gap: 12px; }
.col-gap-16 { display: flex; flex-direction: column; gap: 16px; }
.row-center-gap-12 { display: flex; gap: 12px; justify-content: center; }

/* typography */
.fs-11        { font-size: 11px; }
.fs-12        { font-size: 12px; }
.fs-13        { font-size: 13px; }
.fs-12-secondary { font-size: 12px; color: var(--text-secondary); }
.fs-13-secondary { font-size: 13px; color: var(--text-secondary); padding: 8px 0 8px 16px; }
.fs-18-bold   { font-size: 18px; font-weight: bold; }
.fs-24-bold   { font-size: 24px; font-weight: bold; }
.eyebrow      { font-size: 12px; color: var(--text-tertiary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.muted        { color: var(--text-secondary); }
.muted-sm     { color: var(--text-secondary); font-size: 12px; }
.muted-xs     { color: var(--text-secondary); font-size: 11px; }
.fw-600       { font-weight: 600; }
.color-accent { color: var(--accent); }

/* sizing */
.full-cover  { width: 100%; height: 100%; object-fit: cover; }
.input-full  { width: 100%; padding: 12px; font-size: 16px; }

/* tile / stat block */
.stat-tile     { background: var(--surface); border: 1px solid var(--separator); padding: 16px; border-radius: 10px; text-align: center; }
.stat-tile-sm  { background: var(--surface); border: 1px solid var(--separator); padding: 12px; border-radius: 8px; text-align: center; }

/* clickable item rows (used in lists) */
.row-click { cursor: pointer; font-weight: 500; padding: 8px 0; }

/* misc */
.cursor-pointer { cursor: pointer; }
.nowrap         { white-space: nowrap; }