/* ===== Metric tabs (spec section 3) ===== */

.tabs-bar {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 0.5px solid var(--color-border);
  padding: 0 4px;
  gap: 0;
}

.metric-tab {
  background: none;
  border: none;
  padding: 10px 18px;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -0.5px;
  transition: color var(--transition), border-color var(--transition);
}

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

.metric-tab.active {
  color: var(--color-accent);
  font-weight: 500;
  border-bottom-color: var(--color-accent);
}

/* ===== Breadcrumbs ===== */

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.breadcrumb {
  color: var(--color-accent);
  cursor: pointer;
  text-decoration: none;
}
.breadcrumb:hover {
  text-decoration: underline;
}
.breadcrumb--current {
  color: var(--color-text-primary);
  cursor: default;
  font-weight: 500;
}
.breadcrumb--current:hover { text-decoration: none; }

.breadcrumbs__sep {
  color: var(--color-text-secondary);
}

/* ===== Chips ===== */

.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 0.5px solid var(--color-border);
  border-radius: 999px;
  font-size: 11px;
  color: var(--color-text-secondary);
  background: var(--color-surface);
}

.chip--metric {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: rgba(24, 95, 165, 0.06);
}