/* ============================================================
   Tab Navigation Bar
   ============================================================ */
.tab-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.tab-list {
  display: flex;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 calc(var(--spacing) * 3);
  overflow-x: auto;
  /* Hide scrollbar on touch devices while keeping scroll */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tab-list::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  position: relative;
  padding: calc(var(--spacing) * 1.75) calc(var(--spacing) * 2);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color 0.2s;
  /* Bottom border acts as the active indicator */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tab-btn:hover {
  color: var(--text-primary);
}

.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

/* ============================================================
   Tab Content Sections
   ============================================================ */
.tab-section {
  display: none;
}

.tab-section.active {
  display: block;
  animation: tab-fade-in 0.18s ease;
}

@keyframes tab-fade-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0);   }
}