/*
 * tabs.css — Tab navigation bar.
 *
 * Pill-shaped tab buttons in the app bar. Selected state uses accent color.
 * Load after base.css.
 */

.tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Group wrapper for the secondary tabs (used by the mobile "split" nav).
   `display: contents` makes its children participate in the parent flex
   layout as if they were direct children, so desktop / icons / menu layouts
   are unaffected. The mobile "split" mode overrides this to a panel. */
.tabs__sheet {
  display: contents;
}

.tab {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}

.tab:hover {
  background: var(--bg);
  color: var(--text);
}

.tab[aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.tab[aria-selected="true"]:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.tab:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion: no-preference) {
  .tab {
    transition: background-color var(--transition) ease, color var(--transition) ease;
  }
}

/* ---------- Quick sync button (in the app bar, after the tabs) ---------- */
.quick-sync-btn {
  appearance: none;
  border: 0;
  margin: 0 0 0 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.quick-sync-btn:hover {
  background: var(--bg);
  color: var(--accent);
}

.quick-sync-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.quick-sync-btn--syncing {
  color: var(--accent);
  animation: quick-sync-spin 0.8s linear infinite;
}

@keyframes quick-sync-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}