/* utilities.css
 *
 * Small utility and component classes extracted from inline style= attributes
 * across public/*.html. These were the 40 "inline-style bypasses" called out in
 * images/audit/2026-04-15/design-system-gaps.md.
 *
 * Rules:
 *   - Uses existing --s-* spacing tokens from app.css when loaded. Fallbacks
 *     mirror the 8px grid so impact.html (which is self-contained and does
 *     NOT load app.css) still renders correctly.
 *   - Ship ONLY what HTML actually references. Do not bulk-create a utility
 *     library. If a class is dead, delete it.
 *   - Companion file to app.css / dashboard.css / donate.css / i18n.css.
 *     Always <link>-ed AFTER app.css so utilities win on specificity ties.
 */

/* ---------------------------------------------------------------------------
 * Spacing — margin top / bottom, 8px grid
 * ------------------------------------------------------------------------ */

.mt-2 { margin-top: var(--s-2, 8px); }
.mt-3 { margin-top: var(--s-3, 12px); }
.mt-4 { margin-top: var(--s-4, 16px); }

.mb-3 { margin-bottom: var(--s-3, 12px); }
.mb-4 { margin-bottom: var(--s-4, 16px); }

/* Horizontal margin utility — used for spacing inline buttons in a row. */
.ml-2 { margin-left: var(--s-2, 8px); }

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

/* Vertical stack with small gap (8px). Used for button groups, export rows. */
.stack-sm {
  display: flex;
  flex-direction: column;
  gap: var(--s-2, 8px);
  margin-top: var(--s-2, 8px);
}

/* Horizontal row with small gap (8px). Buttons side-by-side. */
.row-sm {
  display: flex;
  gap: var(--s-2, 8px);
  margin-top: var(--s-2, 8px);
}

/* Inline h-flush — h2 inside a <summary> accordion that should render inline
 * flush with its caret and sibling text. */
.inline-m0 {
  display: inline;
  margin: 0;
}

/* Responsive toolbar row — page title on the left, export actions on the
 * right, wraps on small screens. Used by impact.html page-title/export row. */
.toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2, 8px);
  margin-bottom: var(--s-1, 4px);
}

/* ---------------------------------------------------------------------------
 * Named component classes
 * ------------------------------------------------------------------------ */

/* Language toggle in the page header — 7 pages set margin-bottom:16px inline. */
.lang-toggle--header {
  margin-bottom: var(--s-4, 16px);
}

/* Some pages (donate.html, privacy.html) use a tighter 12px gap instead. */
.lang-toggle--header-compact {
  margin-bottom: var(--s-3, 12px);
}

/* Press page — dark logo showcase card. Inverts the logo's color via filter. */
.press-logo-card {
  background: var(--ffc-black, #1a1a1a);
  padding: var(--s-4, 16px);
  border-radius: var(--s-2, 8px);
  display: inline-block;
}
.press-logo-card img {
  filter: brightness(0) invert(1);
}

/* Press page — caption under each brand asset. */
.press-caption {
  font-size: 13px;
  color: var(--mute, #6b7280);
}

/* Soft horizontal rule (20px above/below, 1px --line). Replaces the
 * inline <hr style="margin:20px 0;border:none;border-top:1px solid #eee;">
 * in app.html. */
.hr-soft {
  margin: var(--s-5, 24px) 0;
  border: none;
  border-top: 1px solid var(--line, #e5e7eb);
}

/* Ghost button variant — transparent background, black ink. Used for the
 * "Sign out" button in the authed app header, where we want it to blend in
 * with the header rather than shout. */
.btn--ghost {
  background: transparent;
  color: var(--ffc-black, #1a1a1a);
}

/* About page — "Board of Directors" style heading inside a content panel.
 * Promotes the inline font-size:18px;font-weight:700;margin-bottom:12px
 * to a real class. */
.panel-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: var(--s-3, 12px);
}

/* Safety-link — inherits surrounding ink color, keeps underline.
 * Used on the Good Samaritan Act link on index.html and
 * courier-signup.html. */
.safety__link,
.inline-link {
  color: inherit;
  text-decoration: underline;
}

/* Inline safety banner — variant of .safety above a CTA (no top border,
 * tighter padding). Used on courier-signup.html above the submit button. */
.safety--inline {
  border-top: none;
  padding: var(--s-3, 12px) 0;
}

/* Impact dashboard auth-required card — founder-only page unauth state. */
.auth-required-card {
  max-width: 520px;
  margin: var(--s-7, 40px) auto;
  text-align: center;
}