/* recommendations/_themes — the theme (action_type) tabs. Figma "Tab button":
 * 48px tall, 4px radius, 16/500, surface-2 fill, active = brand gradient. They
 * fill the content width (equal-width, wrapping on narrow screens). */

.rec-themes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-12);
}

.rec-theme {
  flex: 1 1 7rem; /* Note: grow to fill, ~Figma tab width, wrap when cramped */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding-inline: var(--spacing-12);
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-surface-2);
  color: var(--text-primary);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-500);
  white-space: nowrap;
}
.rec-theme:hover { background-color: var(--background-hover); }
.rec-theme.is-active {
  background-image: var(--brand-gradient);
  color: var(--text-light);
}