/* Sliding-tab foundation: Transitions.dev. See TRANSITIONS-LICENSE.txt. */
:root {
  --tabs-dur: 250ms;
  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabs-text-muted: rgba(15, 15, 15, 0.8);
  --tabs-text-active: #0f0f0f;
  --tabs-bar-bg: #f1f1f1;
  --tabs-pill-bg: #ffffff;
}
.t-tabs {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 48px;
  background: var(--tabs-bar-bg);
}
.t-tab {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  height: 30px;
  padding: 4px 12px;
  color: var(--tabs-text-muted);
  cursor: pointer;
  border-radius: 48px;
  z-index: 1;
  transition: color var(--tabs-dur) var(--tabs-ease);
}
.t-tab:not([aria-selected="true"]):hover,
.t-tab[aria-selected="true"] {
  color: var(--tabs-text-active);
}
.t-tabs-pill {
  position: absolute;
  top: 3px;
  left: 0;
  height: 30px;
  width: 0;
  background: var(--tabs-pill-bg);
  border-radius: 48px;
  transform: translateX(0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width     var(--tabs-dur) var(--tabs-ease);
  will-change: transform, width;
  z-index: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .t-tabs-pill, .t-tab { transition: none !important; }
}

/* Ballr keeps its existing black capsule and white selection. */
.tabbar.t-tabs {
 --tabs-dur:320ms;
 --tabs-text-muted:#8d8d94;
 --tabs-text-active:#0c0c0e;
 --tabs-bar-bg:#0c0c0e;
 position:absolute;
 gap:6px;
 padding:8px;
 border-radius:999px;
 overflow:visible;
 touch-action:none;
 user-select:none;
 -webkit-user-select:none;
 -webkit-touch-callout:none;
 transform:translateX(-50%);
}
.tabbar .t-tabs-pill {top:8px;height:53px;background:transparent;border-radius:999px;}
.nav-bubble {display:block;width:100%;height:100%;background:var(--tabs-pill-bg);border-radius:999px;}
.tabbar[data-dragging] .t-tabs-pill {transition:none;}
.tabbar .tab,.tabbar .tab.active {padding:0;background:transparent;color:var(--tabs-text-muted);transform:none;transition:color 120ms var(--tabs-ease);}
.tabbar .tab.active {color:var(--tabs-text-active);}
.tabbar[data-dragging] .tab {color:var(--tabs-text-muted);}
.tabbar[data-dragging] .tab.is-preview {color:var(--tabs-text-active);}
.tabbar .nav-content {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;pointer-events:none;}
.nav-content svg {display:block;flex:none;}
@media (hover:hover) {
 .tabbar:not([data-pressed]) .tab:not(.active):hover {color:#cfcfd4;}
}
@media (prefers-reduced-motion:reduce) {
 .tabbar .tab {transition:none!important;}
}