/* SITREP utility classes.
   Narrow surface — only what's actually used across HTML/JS templates.
   Every utility either pulls a design token or matches a font-size /
   spacing value that recurs 2+ times. Don't grow this into a framework.
   Load AFTER tokens.css and the page-specific stylesheet so utilities
   can override component styles when applied. */

/* -- Text color (token-bound) -------------------------------- */
.u-text-muted   { color: var(--muted); }
.u-text-accent  { color: var(--accent); }
.u-text-text    { color: var(--text); }
.u-text-t1      { color: var(--t1); }
.u-text-t2      { color: var(--t2); }
.u-text-danger  { color: var(--danger); }
/* Mode-hue text colors — per DESIGN.md "Mode-Hue Containment Rule",
   only use these inside mode chips, mode labels, or mode-specific
   config titles. Do NOT use for chrome, buttons, or focus rings. */
.u-text-hp      { color: var(--hp); }
.u-text-snd     { color: var(--snd); }
.u-text-ol      { color: var(--ol); }

/* -- Font size ---------------------------------------------- */
.u-fs-10 { font-size: 10px; }
.u-fs-11 { font-size: 11px; }
.u-fs-12 { font-size: 12px; }
.u-fs-13 { font-size: 13px; }
.u-fs-14 { font-size: 14px; }

/* -- Font weight -------------------------------------------- */
.u-fw-600 { font-weight: 600; }

/* -- Text alignment ----------------------------------------- */
.u-text-center { text-align: center; }
.u-text-left   { text-align: left; }

/* -- Margin top --------------------------------------------- */
.u-mt-0  { margin-top: 0; }
.u-mt-6  { margin-top: 6px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-24 { margin-top: 24px; }

/* -- Margin bottom ------------------------------------------ */
.u-mb-0  { margin-bottom: 0; }
.u-mb-4  { margin-bottom: 4px; }
.u-mb-6  { margin-bottom: 6px; }
.u-mb-10 { margin-bottom: 10px; }
.u-mb-12 { margin-bottom: 12px; }
.u-mb-16 { margin-bottom: 16px; }

/* -- Margin auto / left / right ----------------------------- */
.u-ml-auto  { margin-left: auto; }
.u-ml-6     { margin-left: 6px; }
.u-mr-4     { margin-right: 4px; }

/* -- Cursor / interaction ---------------------------------- */
.u-cursor-pointer { cursor: pointer; }

/* -- Flex helpers ------------------------------------------- */
.u-flex-shrink-0  { flex-shrink: 0; }

/* -- Text decoration ---------------------------------------- */
.u-no-underline { text-decoration: none; }

/* -- Width helpers ------------------------------------------ */
.u-w-full { width: 100%; }

/* -- Semantic: small parenthetical hint inside an input label.
   Resets the parent .input-label's caps/tracking/weight back to
   normal prose so "(optional)" reads as a quiet helper. ----- */
.u-label-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
}