/* utilities.css — spacing, alignment, and display helpers.
 *
 * Introduced by #385 to eliminate inline `style=""` attributes so the CSP
 * `style-src` directive can drop 'unsafe-inline'. Inline style attributes
 * cannot carry a nonce or hash, so removing them is the only way to tighten
 * the policy. Each class below replaces an exact inline declaration that was
 * previously sprinkled across the templates — keep this layer small (YAGNI):
 * add a class only when a template needs it, not speculatively.
 *
 * Loaded after base.css and before components.css in _base.html.
 */

/* --- Text alignment --- */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

/* --- Display --- */
.hidden       { display: none; }
.d-block      { display: block; }
.d-inline     { display: inline; }
.inline-flex  { display: inline-flex; }

/* --- Flex alignment (for existing flex rows) --- */
.justify-center { justify-content: center; }

/* --- Margin top --- */
.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }

/* --- Margin bottom --- */
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }

/* --- Margin shorthand (reset siblings, set one side) — exact replacements for
 *     the handful of <p>/<div> resets that zeroed the browser default margin. */
.m-0         { margin: 0; }
.m-t10-reset { margin: 10px 0 0; }
.m-t16-reset { margin: 16px 0 0; }
.m-b8-reset  { margin: 0 0 8px; }
.m-b10-reset { margin: 0 0 10px; }

/* --- Padding --- */
.p-24  { padding: 24px; }
.pl-20 { padding-left: 20px; }

/* --- Typography --- */
.fs-13  { font-size: 13px; }
.fs-14  { font-size: 14px; }
.fs-24  { font-size: 24px; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.lh-18  { line-height: 1.8; }

/* --- Color (semantic tokens) --- */
.ink-2      { color: var(--ink-2); }
.ink-3      { color: var(--ink-3); }
.text-ok    { color: var(--ok); }
.text-alert { color: var(--alert); }

/* --- Misc --- */
.break-all { word-break: break-all; }