@layer components {
  .singlestage-card {
    @apply bg-card
    border
    flex
    flex-col
    gap-6
    py-6
    rounded-xl
    shadow-sm
    text-card-foreground;

    > header {
      @apply @container/card-header
      [.border-b]:pb-6
      auto-rows-min
      gap-1.5
      grid
      grid-rows-[auto_auto]
      has-data-[slot=card-action]:grid-cols-[1fr_auto]
      items-start
      px-6;

      h2 {
        @apply font-semibold
        leading-none;
      }

      p {
        @apply text-muted-foreground
        text-sm;
      }
    }

    > section {
      @apply px-6;
    }

    > footer {
      @apply [.border-t]:pt-6
      flex
      items-center
      px-6;
    }
  }
}
