/* Tab navigation — flat, precise, enterprise. Indicator bar below, no
   decorative treatment. */

.tabs {
  display: flex;
  border-bottom: var(--hairline) solid var(--border);
  margin-bottom: var(--sp-5);
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tab {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  color: var(--muted);
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  position: relative;
  top: 1px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  letter-spacing: -0.005em;
}
.tab:hover { color: var(--fg-soft); }
.tab.active {
  color: var(--fg);
  border-bottom-color: var(--fg);
  font-weight: var(--fw-semi);
}
.tab .kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  background: var(--subtle);
  padding: 1px 5px;
  border-radius: var(--r-sm);
  line-height: 1.4;
  font-weight: 500;
}
.tab.active .kbd {
  color: var(--fg-soft);
  background: var(--subtle-2);
}

.panel {
  display: none;
}
.panel.active { display: block; }