/* ===== UTILITIES =====
   Single-purpose helpers shared by both layouts. This file is loaded LAST
   (after theme.css and the layout stylesheet) so a utility always wins over a
   component's default for the same property. Values come from theme.css tokens.
   No inline styles anywhere — reach for these (or a component class) instead. */

/* ===== LAYOUT ===== */
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-sm { gap: var(--space-2); }
.stack-lg { gap: var(--space-5); }

.row { display: flex; align-items: center; gap: var(--space-3); }
.row-tight { gap: var(--space-2); }
.row-wrap { flex-wrap: wrap; }
.row-top { align-items: flex-start; }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.between-top { align-items: flex-start; }

/* Centered, wrapping group — e.g. a row of buttons under a heading */
.cluster { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }

/* A row of form fields laid out horizontally, bottom-aligned, wrapping */
.field-row { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
.field-grow { flex: 1; min-width: 160px; }

.grow { flex: 1; min-width: 0; }
.nowrap { white-space: nowrap; }
/* Strip link styling so an anchor inherits its parent's color */
.link-reset { color: inherit; text-decoration: none; }
.ml-auto { margin-left: auto; }
.ml-2 { margin-left: var(--space-2); }
.mx-auto { margin-left: auto; margin-right: auto; }
.w-full { width: 100%; }
.center { text-align: center; }
.inline { display: inline; }

/* Readable-width wrappers (centered). Pair with .container to narrow it. */
.measure-sm { max-width: 520px; margin-left: auto; margin-right: auto; }
.measure { max-width: 600px; margin-left: auto; margin-right: auto; }
.measure-lg { max-width: 760px; margin-left: auto; margin-right: auto; }

/* Hairline dividers between stacked rows */
.divide-top { border-top: 1px solid var(--line); }
.divide-bottom { border-bottom: 1px solid var(--line); }

/* ===== TEXT ===== */
.t-xs { font-size: var(--fs-xs); }
.t-sm { font-size: var(--fs-sm); }
.t-base { font-size: var(--fs-base); }
.t-md { font-size: var(--fs-md); }
.t-lg { font-size: var(--fs-lg); }
.t-xl { font-size: var(--fs-xl); }
.t-2xl { font-size: var(--fs-2xl); }

.t-light { color: var(--text-light); }
.t-muted { color: var(--text-muted); }
.t-strong { color: var(--ink-strong); }
.t-accent { color: var(--accent); }
.t-warn { color: var(--warn); }
.t-green { color: var(--accent); }
.t-gold { color: var(--gold); }
.t-error { color: var(--red); }

.t-semibold { font-weight: 600; }
.t-bold { font-weight: 700; }
.t-center { text-align: center; }
.t-display { font-family: var(--font-display); }
.lh-snug { line-height: 1.5; }
.lh-loose { line-height: 1.8; }

/* Inline text link in body copy — interactive accent that flips in dark. */
.link { color: var(--accent); font-weight: 600; }
.link:hover { text-decoration: underline; }

/* ===== SPACING ===== */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.p-0 { padding: 0; }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }
.pb-3 { padding-bottom: var(--space-3); }

/* Fixed-width small inputs */
.w-sm { width: 110px; }
.w-md { width: 150px; }