/* ──────────────────────────────────────────────────────────
   Base tab bar (sticky container, NO scrolling here)
   ────────────────────────────────────────────────────────── */
.tab {
  /* NO overflow / momentum scrolling / snap on the sticky parent */
  display: block;
  border-top: 1px solid var(--divider-color);
  border-bottom: 1px solid var(--divider-color);
  margin-bottom: 1.5rem;
  background: transparent;
  overflow: visible;
}

.tab.inverted {
  border-top: 1px solid var(--inverted-divider-color);
  border-bottom: 1px solid var(--inverted-divider-color);
}

/* Keep the sticky behavior only on the parent (safe) */
.popup > .tab {
  position: sticky;
  top: 0;
  z-index: var(--z-dropdown);
  background: var(--popup-bg);
}

/* ──────────────────────────────────────────────────────────
   Inner scroll container (safe place for overflow & momentum)
   ────────────────────────────────────────────────────────── */
.tab .tab-scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* OK here (not on sticky parent) */
  scroll-snap-type: x proximity;     /* gentler than mandatory */
}

/* Hide scrollbar if desired */
.tab .tab-scroll::-webkit-scrollbar {
  display: none;
}

/* ──────────────────────────────────────────────────────────
   Tab links
   ────────────────────────────────────────────────────────── */
.tab a {
  flex: 1 0 auto;
  text-align: center;
  padding: 0.75rem 1rem;
  color: var(--main-text-color);
  background: transparent;
  text-decoration: none;
  font-weight: var(--font-weight-semilight);
  position: relative;
  scroll-snap-align: start;
  white-space: nowrap;
  transition: color var(--transition-medium) ease;
  min-width: max-content;
  z-index: var(--z-sticky);              /* ensure above any decorative layers */
  pointer-events: auto;    /* defensive */
}

.tab.inverted a {
  color: var(--inverted-text-color);
}

/* Active tab */
.tab a.active {
  font-weight: var(--font-weight-semibold);
  color: var(--active-tab-color, var(--main-text-color));
}

.tab.inverted a.active {
  color: var(--inverted-active-tab-color, var(--inverted-text-color));
}

/* Hover effects on capable devices only */
@media (hover: hover) and (pointer: fine) {
  /* Hover affordance is the underline grow only — the scale-zoom wobble was
     dropped at the sia step-2.5 de-bruits for a steadier, more clinical feel.
     (Dropped on hover too, not just active: keeping it would make a hovered
     tab larger than the active one.) */
  .tab a:hover:not(.active)::after,
  .tab a:hover:not(.active)::before {
    width: 100%;
  }
}

/* Underline hover/active effect */
.tab a::after,
.tab a::before {
  content: '';
  position: absolute;
  left: 0;
  width: 0;
  height: 2px;
  transition: width var(--transition-medium) ease;
}

.tab a::after { bottom: 0; background-color: var(--divider-color); }
.tab a::before { top: 0;    background-color: var(--divider-color); }

.tab.inverted a::after,
.tab.inverted a::before {
  background-color: var(--inverted-divider-color);
}

/* Touch behavior (optional) */
body { touch-action: pan-y; }
.tab .tab-scroll { touch-action: auto; }