/* Tabs
 * Trend / Heatmap / Insights / Words tab bar.
 *
 * Lifted from the prototype's single stylesheet, unchanged apart from
 * indentation. Every colour resolves through a token in tokens.css.
 */

/* ---------- tab bar (trend / heatmap / insights / words) ---------- */
.tabbar { display: flex; gap: 6px; background: var(--surface-2); border-radius: 999px; padding: 4px; margin-bottom: 16px; overflow-x: auto; }
.tabbar::-webkit-scrollbar { display: none; }
.tabbar button {
  flex: 1; white-space: nowrap; border: none; background: transparent; color: var(--ink-soft);
  font-size: 15px; font-weight: 700; padding: 12px 10px; min-height: 46px; border-radius: 999px; cursor: pointer;
}
.tabbar button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.tabpanel { animation: accordionPop .4s cubic-bezier(.34,1.56,.64,1); }
@media (prefers-reduced-motion: reduce) { .tabpanel { animation: none; } }