/* =============================================================================
   Utility layer. Namespaced `hh-` prefix so it coexists with any legacy/framework
   CSS during migration (§2.4, §6). Small and deliberate — not a full framework.
   ========================================================================== */

.hh-stack   { display: flex; flex-direction: column; gap: var(--hh-space-4); }
.hh-row     { display: flex; align-items: center; gap: var(--hh-space-3); }
.hh-row-wrap{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--hh-space-2); }
.hh-between { display: flex; align-items: center; justify-content: space-between; gap: var(--hh-space-3); }
.hh-grow    { flex: 1 1 auto; min-width: 0; }
.hh-center  { display: flex; align-items: center; justify-content: center; }

.hh-gap-1 { gap: var(--hh-space-1); }
.hh-gap-2 { gap: var(--hh-space-2); }
.hh-gap-5 { gap: var(--hh-space-5); }

.hh-mt-2 { margin-top: var(--hh-space-2); }
.hh-mt-4 { margin-top: var(--hh-space-4); }
.hh-mt-6 { margin-top: var(--hh-space-6); }
.hh-mb-2 { margin-bottom: var(--hh-space-2); }
.hh-mb-4 { margin-bottom: var(--hh-space-4); }

.hh-muted     { color: var(--hh-muted); }
.hh-soft      { color: var(--hh-ink-soft); }
.hh-small     { font-size: 0.82rem; }
.hh-tiny      { font-size: 0.72rem; }
.hh-strong    { font-weight: 650; }
.hh-mono      { font-family: var(--hh-font-mono); }
.hh-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-prose     { max-width: 68ch; }

.hh-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;
}

/* visually hidden but focusable (honeypot, skip-link) */
.hh-offscreen { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.hh-divider { height: 1px; background: var(--hh-border); border: 0; }