/* ──────────────────────────────────────────────────────────────
   microanalytics — Design System
   utilities.css · layout helpers and visual primitives
   ──────────────────────────────────────────────────────────────
   Reach-for-these single-purpose classes. If you find yourself
   adding more than 5 properties to a utility, it should become a
   component instead.
   ────────────────────────────────────────────────────────────── */

/* Centered shell with side gutters — wraps page sections. */
.shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-pad);
}

/* Hairline divider matching the rule token. */
.hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-7) 0;
}

/* Solid 1px rule bars (alt to .hr — no margins, use the rule tokens). */
.rule { height: 1px; background: var(--rule); }
.rule-strong { height: 1px; background: var(--rule-strong); }

/* Generic card: lifts on hover via colour + translate, never shadow. */
.card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sharp);
  background: var(--bg-card);
  padding: var(--space-6);
  transition: transform var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease);
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--ink);
}
.card--dark {
  background: var(--ink);
  color: var(--paper);
  border-color: transparent;
}

/* Visually hidden but readable by AT. */
.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;
}

/* Stack helpers — vertical rhythm without margins on children. */
.stack-2  > * + * { margin-top: var(--space-2); }
.stack-3  > * + * { margin-top: var(--space-3); }
.stack-4  > * + * { margin-top: var(--space-4); }
.stack-6  > * + * { margin-top: var(--space-6); }
.stack-8  > * + * { margin-top: var(--space-8); }
.stack-10 > * + * { margin-top: var(--space-10); }

/* Cluster — flex row with consistent gap, wraps gracefully. */
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.cluster--lg { gap: var(--space-5); }