/*
 * EatRate utility layer — the thin seam between tokens and components.
 *
 * WHY THIS FILE EXISTS
 * Before this layer, 527 inline style="…" attributes across 164 Blade views re-made the same
 * handful of decisions on every page: constrain this create-form panel, tighten this control row,
 * push this section down, bottom-align this submit button, step this heading down a size. The
 * values were mostly already tokens, so the pages agreed — but the decision lived in the markup,
 * where it cannot be changed centrally, cannot be reviewed, and cannot be kept honest.
 *
 * THE RULES THIS LAYER LIVES BY (see docs/design-system/SPEC.md)
 *   1. Every declaration resolves to a token. No literal colours, sizes or spacing values.
 *   2. It stays small and named for INTENT ("a compact operational panel", "a tight control row"),
 *      never for value ("mb-5", "gap-2"). A Tailwind-shaped scale of single-purpose classes would
 *      just relocate the inconsistency, not remove it. If this file starts growing a scale, the
 *      right answer is a named component in er-components.css instead.
 *   3. It loads AFTER er-components.css so a utility can refine a primitive (.er-row-tight beats
 *      .er-row's gap at equal specificity by source order), but BEFORE the per-module stylesheets
 *      pushed through @stack('styles'), so a module keeps the last word on its own components.
 *   4. Every name here was checked against existing markup and CSS for collisions. Deliberately
 *      avoided: .er-panel (an existing surface component in er-components.css), .er-stack-sm
 *      (already referenced, undefined, by kitchen/floor-plan.blade.php) and .er-list-plain
 *      (already defined by er-provenance.css). Reusing any of those names would have silently
 *      restyled pages this refactor is not allowed to touch.
 */

/* ---------- Resets applied often enough to deserve a name ----------
   Declared before the flow utilities below so that composing the two (e.g.
   class="er-fieldset-plain er-space-above") lets the more specific intent win on source order. */
/* A heading or paragraph whose spacing is owned by its container, not by itself. */
.er-bare{margin:0}
/* A list used as layout, not as prose. Named -bare, not -plain: er-provenance.css already owns
   .er-list-plain and gives it a flex column with a gap, which is a different thing. */
.er-list-bare{list-style:none;margin:0;padding:0}
/* A fieldset used purely for grouping and labelling, carrying no box of its own. Deliberately does
   NOT reset margin — the browser's 2px inline margin on a fieldset is load-bearing in places.
   Compose with .er-bare where the markup really did zero all four sides. */
.er-fieldset-plain{border:0;padding:0}

/* ---------- Measure: how wide a column of form content is allowed to get ---------- */
/* An operational create/add panel ("Add table", "Raise requisition", "Request leave"). */
.er-measure-panel{max-width:var(--er-panel-measure)}
/* A standard form column — the wider sibling used by longer record forms. */
.er-measure-form{max-width:var(--er-form-measure)}

/* ---------- Stack: vertical rhythm inside a group ----------
   Pairs with .er-stack (--space-4) and .er-stack-lg (--space-8) already in er-components.css. */
.er-stack-tight{display:grid;gap:var(--space-2)}
.er-stack-xs{display:grid;gap:var(--space-1)}

/* ---------- Row: refinements to the .er-row primitive ---------- */
/* A tight row — chips, section tabs, paired confirm/cancel buttons. */
.er-row-tight{gap:var(--space-2)}
/* A filter/search bar: inputs of differing height sit on a common baseline, so align to the end. */
.er-row-end{align-items:flex-end}
/* Label on the left, value or action on the right. */
.er-row-split{justify-content:space-between}

/* ---------- Alignment: a control that must line up with the inputs beside it ---------- */
/* The submit button of a horizontal filter/entry grid, bottom-aligned with its sibling fields. */
.er-self-end{align-self:end}

/* ---------- Type: stepping a heading off its default level ----------
   Used where the heading LEVEL is fixed by the document outline but the visual weight should not
   be — an h2 that opens a card is not an h2 that opens a page. */
.er-text-base{font-size:var(--text-base)}
.er-text-lg{font-size:var(--text-lg)}
.er-text-xl{font-size:var(--text-xl)}

/* ---------- Block flow: separating a section from the one before or after it ---------- */
.er-space-above-sm{margin-top:var(--space-3)}
.er-space-above{margin-top:var(--space-4)}
.er-space-above-lg{margin-top:var(--space-6)}
.er-space-below{margin-bottom:var(--space-4)}
.er-space-below-lg{margin-bottom:var(--space-6)}