/* EmptyState (Figma Frame 10): a first week must read as normal, not broken. No box (2026-10-11,
   editorial pass): the logo's ring, empty, where content will be, a title and one line saying
   what will appear, set on the page between rules. */
@layer components {
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--block-space-half);
    padding: calc(var(--block-space) * 2.5) var(--inline-space-double);
    text-align: center;
    color: var(--color-subtle);
    font-size: var(--text-small);
    border-block: 1px solid var(--color-border);

    /* The empty slot of a stamp card: the ring at the logo's thickness. */
    &::before {
      --slot: 2.5rem;

      content: "";
      inline-size: var(--slot);
      aspect-ratio: 1;
      margin-block-end: var(--block-space-half);
      border: calc(var(--slot) * var(--ring-ratio)) solid var(--color-border-strong);
      border-radius: 50%;
    }

    & p { margin: 0; }
  }

  .empty-state__title { font-size: var(--text-large); font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); }
}