@layer components {
  /*
   * Cards are size containers, so their contents adapt to the card's width
   * (not the viewport) – the same card works in a sidebar or a wide column.
   */
  .card {
    container: card / inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: clamp(var(--space-s), 5cqi, var(--space-l));
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-l);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-m);
  }

  .card--elevated {
    box-shadow: var(--shadow-l);
  }

  .card--sunken {
    background-color: var(--color-surface-sunken);
    box-shadow: none;
  }

  .card__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);

    & p {
      color: var(--color-text-muted);
    }
  }

  .card__title {
    font-size: var(--step-2);
  }

  /* Card footers stack on narrow cards and line up in a row on wider ones. */
  .card__footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding-block-start: var(--space-s);
    border-block-start: var(--border-width) solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--step--1);
    text-align: center;

    @container card (inline-size > 30rem) {
      flex-direction: row;
      justify-content: space-between;
      text-align: start;
    }
  }

  /* Empty state placeholder */
  .empty-state {
    display: grid;
    justify-items: center;
    gap: var(--space-xs);
    padding: var(--space-xl) var(--space-m);
    border: 1.5px dashed var(--color-border-strong);
    border-radius: var(--radius-l);
    background-color: color-mix(in oklab, var(--color-surface) 60%, transparent);
    text-align: center;

    & p {
      color: var(--color-text-muted);
    }
  }

  .empty-state__icon {
    display: grid;
    place-items: center;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border-radius: var(--radius-full);
    background-color: var(--color-accent-subtle);
    color: var(--color-accent);

    & svg {
      inline-size: 1.6rem;
      block-size: 1.6rem;
    }
  }
}