@layer components {
  .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-card);
  }

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

  /* A card is a panel, so it takes the column like every other panel. What is
     inside it is what sits on the measure — see .form in forms.css. Capping
     the card itself is what put two half-width panels under a full-width list
     on the Members page, with five hundred pixels of empty paper beside them. */
}