/*
 * Small, documented utility layer. These absorb the handful of one-off inline styles that were scattered
 * across pages (inline post-forms, right-aligned row actions, flex header rows, spacing resets) so markup
 * references a shared class instead of hard-coding `style="..."`. Everything here uses design tokens — no
 * raw px. Keep this set SMALL and intentional; reach for a proper component when a pattern is real UI.
 */

/* Layout ------------------------------------------------------------------ */

/* A horizontal row that wraps on narrow screens — the common "title + actions on one line" header pattern. */
.u-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.u-row--tight { gap: var(--space-sm); }
.u-row--between { justify-content: space-between; }

/* A vertical stack with a consistent gap. */
.u-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.u-stack--tight { gap: var(--space-sm); }

/* Two cards sharing one row — a narrower action card beside a wider table card (Club → Races: Create race ·
   Import from federation). minmax(0, …) lets each card's own table scroll instead of blowing the row open;
   single-column below the tablet breakpoint. With one child (nothing to import) the card keeps its column. */
.u-card-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--space-lg);
    align-items: start;
}

@media (max-width: 60rem) {
    .u-card-row { grid-template-columns: minmax(0, 1fr); }
}

/* Push a trailing element to the far edge of a flex row (replaces inline margin-left:auto). */
.u-push-right { margin-left: auto; }

/* Inline post-forms that must sit alongside other row actions (replaces inline display:inline). */
.u-inline { display: inline; }
.u-inline-flex { display: inline-flex; align-items: center; gap: var(--space-sm); }

.u-nowrap { white-space: nowrap; }
/* Holds an element's space without showing it — a placeholder slot that keeps row actions the same width
   on every row (e.g. the PDF button that only Finished races have), so buttons line up in clean columns. */
.u-invisible { visibility: hidden; }
.u-clickable { cursor: pointer; }
/* An element whose title attribute carries the explanation — the cursor cues the hover tooltip. */
.u-help { cursor: help; }

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

/* Secondary text on a dark/navy surface (replaces hard-coded rgba(255,255,255,0.6) on hero cards). */
.text-on-dark-muted { color: var(--on-primary-muted); }

.u-p-md { padding: var(--space-md); }

.u-text-lg { font-size: var(--text-body-lg-size); }

/* Spacing helpers — token-based, for the odd margin tweak that doesn't warrant its own component rule. */
.u-m-0 { margin: 0; }
.u-mt-sm { margin-top: var(--space-sm); }
.u-mt-md { margin-top: var(--space-md); }
.u-mt-lg { margin-top: var(--space-lg); }
.u-mt-0 { margin-top: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-mb-sm { margin-bottom: var(--space-sm); }
.u-mb-md { margin-bottom: var(--space-md); }
.u-py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }

/* An unstyled list (no bullet, no default margin/padding) — for lists used as layout containers. */
.u-plain-list { list-style: none; margin: 0; padding: 0; }

/* A gently-indented list (keeps its bullets) — tighter than the browser default. */
.u-indent { padding-left: var(--space-lg); }
.u-my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
.u-my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }

/* Readable-measure caps — constrain a form/content card or a search input to a sensible width instead of
   a one-off inline max-width. Five steps cover every width the pages were hard-coding (240–900px). */
.u-maxw-2xs { max-width: 10rem; }     /* ~160px — a short number field */
.u-maxw-xs { max-width: 15rem; }      /* ~240px — search / small filter inputs */
.u-maxw-sm { max-width: 32.5rem; }    /* ~520px */
.u-maxw-md { max-width: 40rem; }      /* ~640px */
.u-maxw-lg { max-width: 47.5rem; }    /* ~760px — the standard form column */
.u-maxw-xl { max-width: 56.25rem; }   /* ~900px */