/* A bordered content card. Child elements are scoped by nesting, so they
 * carry short, local names (`.title`, `.body`, `.form`) rather than a
 * `card-`-prefixed echo of the parent. */

.card {
  @apply rounded-md border border-slate-200 bg-white p-6;

  /* Edge-to-edge content (e.g. a table that should reach the card border):
   * drops the inner padding and clips overflow to the rounded corners. */
  &.flush {
    @apply overflow-hidden p-0;
  }

  & .title {
    @apply mb-2 text-xl font-bold;
  }

  & .body {
    @apply mb-4 text-slate-700;
  }

  /* An inset sub-panel inside a card — typically wraps a form. */
  & .form {
    @apply rounded-md border border-slate-200 p-4;
  }

  /* When the form box follows a details summary, give it breathing room. */
  & .card-details + .form {
    @apply mt-4;
  }
}