/* .card — styles for src/lib/expand.mjs's x-card. Load AFTER tokens.css. See
   public/components/README.md for load order and the split rationale. */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  margin: 0;
  padding: var(--card-padding);
  background-color: var(--card-background);
  border: var(--border-width-hairline) solid var(--card-border);
  border-radius: var(--radius-default);
  box-shadow: var(--card-shadow);
}

.card--compact {
  padding: var(--card-padding-compact) var(--space-2);
  gap: var(--space-2);
}

@media (max-width: 600px) {
  .card {
    padding: var(--card-padding-compact) var(--space-2);
    gap: var(--space-2);
  }
}