.ui-card {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  padding: 0.75em 1em;
  border: 1px solid var(--border);
  border-radius: 0.5em;
  background: var(--bg-elev);
}
/* Only an interactive `Card` (has `onClick`) gets pointer/hover
   affordance — a plain static one shouldn't look clickable. */
[role="button"].ui-card {
  cursor: pointer;
}
[role="button"].ui-card:hover,
[role="button"].ui-card:focus-visible {
  border-color: var(--purple);
  outline: none;
}
/* A solid border (not just the hover tint above, which needs to keep
   meaning "hovering", not double as "selected") plus a faint fill so a
   selected card still reads once the pointer moves away. */
.ui-card-selected {
  border-color: var(--purple);
  background: color-mix(in srgb, var(--purple) 10%, var(--bg-elev));
}