/* ============================================================
   tabs.css — literal translation of library/lib/src/components/tabs.dart
   ============================================================
   PaneTabs: a horizontal row of text tabs for section navigation.
   Styled like SegmentedControl but with no outer container — an
   accent pill slides behind the selected tab.

   PaneTabs:
     gap      = Spacing.s2 (8)
     padding  = EdgeInsets.symmetric(horizontal: Spacing.s4)
     height   = pressableTextHeight(solid)       -> 36  (button.css)
     radius   = pressableTextCornerRadius(solid) -> Radii.lg
     duration = 100ms, curve = easeInOut
     label    = H5, mutedForeground -> foreground when selected,
                cross-faded over the same duration
     pill     = ColorScheme.accent, absent until measured so it
                appears in place instead of sliding in from the
                left edge (--tab-w starts at 0)

   FadeScrollView: tabs that outgrow the row scroll horizontally
   behind fading edges. The fade is applied only while the row
   actually overflows (.tabs--over), so a resting tab is never
   clipped.

   The pill measures against .tabs-row (content space), so
   scrolling does not disturb it — hence the two elements:
   .tabs scrolls, .tabs-row is the measured stack.
   ============================================================ */

.tabs {
  max-width: 100%;
  /* Gutter matching .container, so a scrolled row still starts on the page's
     left edge — and the fade below falls exactly over it. */
  padding: 0 var(--space-6);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* The row overhangs the viewport by only a few tabs' worth on a phone, so a
     swipe reaches its end almost at once. Without this the leftover travel
     chains outward and slides the PAGE sideways instead of stopping. .rail
     carries the same guard for the same reason. */
  overscroll-behavior-x: contain;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs--over {
  -webkit-mask: linear-gradient(90deg, transparent, #000 var(--space-6),
                                #000 calc(100% - var(--space-6)), transparent);
          mask: linear-gradient(90deg, transparent, #000 var(--space-6),
                                #000 calc(100% - var(--space-6)), transparent);
}

.tabs-row { position: relative; display: inline-flex; gap: var(--space-2); }

/* The pill. JS sets --tab-x / --tab-w from the selected tab's box. */
.tabs-row::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--tab-x, 0);
  width: var(--tab-w, 0);
  border-radius: var(--radius-lg);
  background: var(--color-accent);
  transition: left 100ms ease-in-out, width 100ms ease-in-out;
}

.tab {
  position: relative;                 /* above the pill */
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-lg);
  background: none;
  color: var(--color-muted-foreground);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);           /* H5 */
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  /* The label's colour flips instantly; only the pill behind it travels. */
}

.tab:hover,
.tab.on { color: var(--color-foreground); }
.tab:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .tabs-row::before { transition: none; }
}