/* Interactive ecosystem themes (pills + tooltip) */

.themes-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-top: 0.75rem;
}

.theme-pill {
  background: #ffffff;
  border: 1px solid #d9e4ec;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 500;
  font-size: 14px;
  color: var(--hp-primary-dark);
  cursor: pointer;
  transition: transform 180ms var(--ease-out), background 180ms, border-color 180ms;
  -webkit-tap-highlight-color: transparent;
}

.theme-pill:focus {
  outline: 3px solid rgba(13,92,171,0.08);
  outline-offset: 4px;
}

.theme-pill:hover,
.theme-pill.is-active {
  background: #f3f8fb;
  border-color: #0d5cab;
  transform: translateY(-1px);
}

.theme-tooltip {
  position: absolute;
  z-index: 80;
  background: #ffffff;
  border: 1px solid #dfe8ef;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  padding: 12px 14px;
  max-width: 320px;
  font-size: 0.95rem;
  color: var(--hp-text-muted);
  display: none;
}

.theme-tooltip[aria-hidden="false"] {
  display: block;
}

.theme-tooltip strong {
  display: block;
  color: var(--hp-heading);
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
}

/* Responsive */
@media (max-width: 780px) {
  .themes-pills { gap: 0.5rem; }
  .theme-pill { padding: 10px 14px; font-size: 15px; }
  .theme-tooltip { max-width: 90vw; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-pill { transition: none; transform: none; }
}