/* Shared top-level section navigation for the family dashboard.
   Single source of truth for the "bubble" tab bar used on every section
   page (Family, Assistant, Alpha Research, Brief Sources, Debugger).
   Self-contained: all custom properties have literal fallbacks so the bar
   renders identically regardless of which CSS variables a page defines. */

.dashboard-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
}

.dashboard-tab {
  color: var(--text-dim, #8888a0);
  text-decoration: none;
  border: 1px solid var(--border, #242437);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.dashboard-tab:hover,
.dashboard-tab:focus-visible {
  color: var(--text, #e8e8ed);
  border-color: rgba(108, 140, 255, 0.45);
  background: rgba(108, 140, 255, 0.10);
  outline: none;
}

.dashboard-tab.active {
  color: var(--text, #e8e8ed);
  border-color: rgba(108, 140, 255, 0.55);
  background: rgba(108, 140, 255, 0.14);
  cursor: default;
}