/* Card (shadcn/ui card).
/*
/*   <section class="ui-card">
/*     <header class="ui-card__header">
/*       <h2 class="ui-card__title">Title</h2>
/*       <p class="ui-card__description">Description</p>
/*       <div class="ui-card__action">…</div>            optional, top right
/*     </header>
/*     <div class="ui-card__content">…</div>
/*     <footer class="ui-card__footer">…</footer>
/*   </section>
/*
/* ui-card--flush drops the inner padding (a table or list edge to edge). */
@layer ui {
  .ui-card {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    color: var(--card-foreground);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-inline-size: 0;
    padding-block: 1.5rem;
    text-align: start;
  }

  .ui-card__header {
    align-items: start;
    display: grid;
    gap: 0.375rem;
    grid-auto-rows: min-content;
    padding-inline: 1.5rem;

    &:has(.ui-card__action) {
      grid-template-columns: 1fr auto;
    }

    &.ui-card__header--bordered {
      border-block-end: 1px solid var(--border);
      padding-block-end: 1.5rem;
    }
  }

  .ui-card__title {
    font-size: var(--text-medium);
    font-weight: 600;
    line-height: 1;
    margin: 0;
  }

  /* A figure as the card's title (the dashboard example's section cards): text-2xl semibold,
  /* tabular, text-3xl once the card is 250px wide; --long for a phrase rather than a number. */
  .ui-card__title--figure {
    font-size: var(--text-2xl);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1.15;

    @container card (width >= 250px) {
      font-size: var(--text-3xl);
    }
  }

  .ui-card__title--figure-long {
    @container card (width >= 250px) {
      font-size: var(--text-2xl);
    }
  }

  .ui-card__description {
    color: var(--muted-foreground);
    font-size: var(--text-normal);
    margin: 0;
  }

  .ui-card__action {
    align-self: start;
    display: flex;
    gap: 0.5rem;
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
  }

  .ui-card__content {
    padding-inline: 1.5rem;
  }

  .ui-card__footer {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    padding-inline: 1.5rem;

    &.ui-card__footer--bordered {
      border-block-start: 1px solid var(--border);
      padding-block-start: 1.5rem;
    }

    &.ui-card__footer--end {
      justify-content: flex-end;
    }
  }

  .ui-card--flush {
    gap: 0;
    overflow: hidden;
    padding-block: 0;

    .ui-card__header {
      padding-block: 1.5rem;
    }
  }

  .ui-card--sm {
    gap: 1rem;
    padding-block: 1rem;

    :is(.ui-card__header, .ui-card__content, .ui-card__footer) {
      padding-inline: 1rem;
    }
  }

  /* An inline confirmation (layouts/shared/_confirm): a small card, at most a dialog's width. */
  .ui-confirm {
    inline-size: 100%;
    max-inline-size: 24rem;
  }
}