/* cards.css — the stacked patient cards (§25.1, §54.7). Each card = one purpose. */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-grid);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-1);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.card__title {
  font-size: var(--font-size-3);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-3);
}

.state-pill {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text-secondary);
  font-size: var(--font-size-2);
  margin-bottom: var(--space-3);
}
.state-pill--done { background: var(--color-accent-soft); color: var(--color-accent); }

.task-line { font-size: var(--font-size-4); font-weight: var(--font-weight-medium); margin-bottom: var(--space-2); }

.card__detail {
  font-size: var(--font-size-2);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}
.card__detail--accent { color: var(--color-accent); }