/* The few utility classes the markup uses, copied from what Tailwind compiled for
   the Vite build (same values, same `utilities` layer, so they still win over
   component rules exactly as before). Icon sizes are Tailwind's spacing scale
   (0.25rem steps). Add a class here only when markup actually needs it. */
@layer utilities {
  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .size-2\.5 { width: 0.625rem; height: 0.625rem; }
  .size-3    { width: 0.75rem;  height: 0.75rem; }
  .size-3\.5 { width: 0.875rem; height: 0.875rem; }
  .size-4    { width: 1rem;     height: 1rem; }
  .size-5    { width: 1.25rem;  height: 1.25rem; }
  .size-6    { width: 1.5rem;   height: 1.5rem; }
  .size-8    { width: 2rem;     height: 2rem; }
  .size-12   { width: 3rem;     height: 3rem; }

  .bg-cream-100 { background-color: var(--cream-100); }
  .bg-ink-950   { background-color: var(--ink-950); }
}