/* ==========================================================================
 * 05-utilities.css — single-purpose helper classes
 * --------------------------------------------------------------------------
 * LOADED BY  : src/templates/base.html, every page (5th of six core files).
 * RULE       : each class does exactly ONE thing (one or two declarations).
 *              Anything with a descendant selector or more than a couple
 *              declarations belongs in 04-components.css instead.
 * ========================================================================== */


.ax-hidden { display: none !important; }

.ax-tone-primary { color: var(--ax-primary-text) !important; }
.ax-tone-ok      { color: var(--ax-success-text) !important; }
.ax-tone-warn    { color: var(--ax-warning-text) !important; }
.ax-tone-crit    { color: var(--ax-danger-text) !important; }
.ax-tone-muted   { color: var(--ax-text-muted) !important; }

.ax-bg { background: var(--ax-bg) !important; }
.ax-bg-surface-1 { background: var(--ax-surface-1) !important; }
.ax-bg-surface-2 { background: var(--ax-surface-2) !important; }

.ax-nums { font-variant-numeric: tabular-nums; }
.ax-mono { font-family: var(--ax-font-mono); }
.ax-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ax-radius-sm { border-radius: var(--ax-radius-sm); }
.ax-radius-md { border-radius: var(--ax-radius-md); }
.ax-radius-lg { border-radius: var(--ax-radius-lg); }

.ax-shadow-1 { box-shadow: var(--ax-shadow-1); }
.ax-shadow-2 { box-shadow: var(--ax-shadow-2); }
.ax-shadow-3 { box-shadow: var(--ax-shadow-3); }

.ax-glow-drop { filter: drop-shadow(0 0 5px rgba(0, 99, 255, 0.35)); }

.ax-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}