/* ===================================================================
 * Layout helpers + accessibility utilities.
 * =================================================================== */

/* §13.3 — screen-reader-only */
.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;
}

/* §13.2 — skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--text-on-accent);
  border-radius: var(--radius-sm);
  text-decoration: none;
  z-index: var(--z-tooltip);
}
.skip-link:focus { top: var(--space-2); color: var(--text-on-accent); }

/* Stack helpers — vertical layouts */
.stack       { display: flex; flex-direction: column; }
.stack-2     { gap: var(--space-2); }
.stack-3     { gap: var(--space-3); }
.stack-4     { gap: var(--space-4); }
.stack-6     { gap: var(--space-6); }
.stack-8     { gap: var(--space-8); }

/* Cluster helpers — horizontal */
.cluster     { display: flex; align-items: center; }
.cluster-2   { gap: var(--space-2); }
.cluster-3   { gap: var(--space-3); }
.cluster-4   { gap: var(--space-4); }

/* Common */
.muted       { color: var(--text-tertiary); }
.text-secondary { color: var(--text-secondary); }
.text-danger { color: var(--danger); }
.full-width  { width: 100%; }
.text-center { text-align: center; }
.flex        { display: flex; }
.flex-1      { flex: 1; min-width: 0; }
.justify-end { justify-content: flex-end; }
.items-center { align-items: center; }
.between     { display: flex; align-items: center; justify-content: space-between; }