/* ==== Pill tab strip ==== */
.pill-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: clamp(24px, 4vw, 36px);
}

/* ==== Pill tab ==== */
.pill-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border-radius: 30px;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--forest-700);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.pill-tab[aria-selected="true"] {
  background: var(--forest-700);
  border-color: var(--forest-700);
  color: var(--white);
}
@media (hover: hover) and (pointer: fine) {
  .pill-tab:hover { border-color: var(--gold-500); }
  .pill-tab[aria-selected="true"]:hover { border-color: var(--forest-700); }
}
.pill-tab:active {
  border-color: var(--gold-500);
  background: var(--paper-50);
}
.pill-tab[aria-selected="true"]:active {
  background: var(--forest-800);
  border-color: var(--forest-800);
}

/* ==== Panels ==== */
.pill-panel { display: none; }
.pill-panel.active {
  display: block;
  animation: pillFadeIn 0.3s var(--ease-out);
}
@keyframes pillFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (max-width: 900px) {
  .pill-tabs { gap: 8px; }
  .pill-tab {
    padding: 10px 18px;
    font-size: 0.86rem;
  }
}
@media (max-width: 600px) {
  .pill-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(-1 * clamp(16px, 4vw, 48px));
    margin-right: calc(-1 * clamp(16px, 4vw, 48px));
    padding: 4px clamp(16px, 4vw, 48px);
    margin-bottom: 24px;
  }
  .pill-tabs::-webkit-scrollbar { display: none; }

  .pill-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 11px 20px;
    font-size: 0.88rem;
  }
  .pill-tabs::after {
    content: '';
    position: sticky;
    right: 0;
    flex: 0 0 24px;
    margin-left: -24px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--paper-50));
  }
}
@media (max-width: 380px) {
  .pill-tab {
    padding: 10px 16px;
    font-size: 0.82rem;
  }
}