/* =========================================================
   Component — Tabs

   Written in an early pass and never linked, so it still read
   five variables that no longer exist (--color-border,
   --font-display, --transition-base, --shadow-xs,
   --gradient-brand). م3 is the first page to use it, so the
   whole file was moved onto the current token names rather than
   shipped broken.

   Two shapes: a pill group on a sunken ground (default), and an
   underlined row for content pages. The --scroll modifier lets a
   long group slide sideways on a phone instead of wrapping into
   a block that pushes the panel down the screen.
   ========================================================= */
.tabs {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
}

.tabs__tab {
  appearance: none;
  border: 0;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.tabs__tab:hover { color: var(--color-text); }
.tabs__tab:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.tabs__tab[aria-selected="true"] {
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

/* A group that may outgrow a phone: it scrolls in place, and the
   scrollbar is left to the platform rather than hidden — a strip
   that moves with no affordance reads as broken. */
.tabs--scroll {
  display: flex;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

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