/*
 * A card: one self-contained block of a page — a keystats panel, the key
 * financials, the commentary excerpt. A 1px rule on the ground and no shadow;
 * never a card inside a card.
 *
 *   .card__header   title on the left, a key or a link on the right
 *   .card--flush    no padding, for a table that runs to the card's edges
 */
@layer components {
  .card {
    padding: var(--space-md) var(--space-md) var(--space-lg);
    border: var(--rule-width) solid var(--color-rule);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);

    @media (width >= 768px) {
      padding-inline: var(--space-lg);
    }
  }

  /* The title keeps whatever sits beside it — a lock, a key, a link — on its
     own line, and wraps itself instead. */
  .card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-md);
    margin-block-end: var(--space-sm);

    & > .heading {
      min-inline-size: 0;
      margin-block-end: 0;
    }
  }

  .card__header--end {
    justify-content: flex-end;
  }

  .card--flush {
    padding: 0;
    overflow: hidden;

    & > .card__header {
      margin: 0;
      padding: var(--space-sm) var(--space-md);
      border-block-end: var(--rule-width) solid var(--color-rule);

      @media (width >= 768px) {
        padding-inline: var(--space-lg);
      }
    }

    & > .table-legend {
      margin: 0;
      padding: var(--space-xs) var(--space-md) var(--space-sm);

      @media (width >= 768px) {
        padding-inline: var(--space-lg);
      }
    }
  }
}