@layer utilities {
  .muted { color: var(--ink-soft); }
  .faint { color: var(--ink-faint); }
  .center { text-align: center; }
  .nowrap { white-space: nowrap; }
  .tabular { font-variant-numeric: tabular-nums; }
  .mt-l { margin-block-start: var(--space-l); }
  .mt-xl { margin-block-start: var(--space-xl); }
  .full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
}

/* X-ray mode (toggle on /under-the-hood): outline every element Herb marked as a slot. */
@layer utilities {
  [data-xray] [data-herb-slot] { outline: 1px dashed oklch(70% 0.25 330); outline-offset: 1px; }
  [data-xray] [data-herb-slot]:hover { outline: 2px solid oklch(70% 0.25 330); background: oklch(70% 0.25 330 / 0.08); }
  [data-xray] [data-herb-name] { outline-color: oklch(75% 0.2 150); }
}