/* ==========================================================================
   Chip Foundations — utility layer
   Small, hand-written, composable classes. Combine in markup:
   e.g. <div class="stack stack-lg"> or <div class="grid grid-2 gap-lg">
   ========================================================================== */

/* stack: vertical rhythm */
.stack { display: flex; flex-direction: column; }
.stack-xs > * + * { margin-top: var(--space-2); }
.stack-sm > * + * { margin-top: var(--space-3); }
.stack-md > * + * { margin-top: var(--space-5); }
.stack-lg > * + * { margin-top: var(--space-7); }

/* cluster: horizontal wrap with gap, for badges/tags/actions */
.cluster { display: flex; flex-wrap: wrap; align-items: center; }
.cluster-xs { gap: var(--space-2); }
.cluster-sm { gap: var(--space-3); }
.cluster-md { gap: var(--space-4); }

/* grid */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
.gap-sm { gap: var(--space-4); }
.gap-lg { gap: var(--space-7); }

/* split: two columns, content + side rail */
.split { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-7); align-items: start; }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
}

/* spacing helpers */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-sm { margin-top: var(--space-4); }
.mt-md { margin-top: var(--space-6); }
.mt-lg { margin-top: var(--space-8); }
.mb-sm { margin-bottom: var(--space-4); }
.mb-md { margin-bottom: var(--space-6); }

/* text helpers */
.text-center { text-align: center; }
.text-muted { color: var(--ink-soft); }
.text-sm { font-size: 0.88rem; }
.max-prose { max-width: 68ch; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* flex helpers */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }

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

/* number list used for ledger-style rank display */
.numbered-list { list-style: none; margin: 0; padding: 0; counter-reset: item; }
.numbered-list > li {
  counter-increment: item;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
  border-bottom: var(--border-w-thin) solid var(--sand-line);
}
.numbered-list > li:last-child { border-bottom: none; }
.numbered-list > li::before {
  content: counter(item, decimal-leading-zero);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--sage-dark);
}