/**
 * <Tabs> — underline-style tabs.
 *
 * Active tab: text.primary + 1.5px bottom border.
 * Inactive tabs: text.secondary, no border.
 *
 * Markup:
 *   <div class="c-tabs" data-c-tabs>
 *     <div class="c-tabs__list" role="tablist" aria-label="Client setup">
 *       <button type="button" class="c-tabs__tab" role="tab" id="tab-claude"
 *               aria-controls="panel-claude" aria-selected="true">Claude Desktop</button>
 *       <button type="button" class="c-tabs__tab" role="tab" id="tab-cursor"
 *               aria-controls="panel-cursor" aria-selected="false" tabindex="-1">Cursor</button>
 *     </div>
 *     <div class="c-tabs__panels">
 *       <div class="c-tabs__panel" role="tabpanel" id="panel-claude" aria-labelledby="tab-claude">…</div>
 *       <div class="c-tabs__panel" role="tabpanel" id="panel-cursor" aria-labelledby="tab-cursor" hidden>…</div>
 *     </div>
 *   </div>
 */

.c-tabs {
  display: block;
}

.c-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  border-bottom: 0.5px solid var(--border-tertiary);
  margin-bottom: var(--space-5);
}

.c-tabs__tab {
  position: relative;
  margin: 0;
  padding: var(--space-2) 0;
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.c-tabs__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.5px;
  height: 1.5px;
  background: transparent;
}

.c-tabs__tab:hover {
  color: var(--text-primary);
}

.c-tabs__tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.c-tabs__tab[aria-selected="true"] {
  color: var(--text-primary);
}

.c-tabs__tab[aria-selected="true"]::after {
  background: var(--text-primary);
}

.c-tabs__panel[hidden] {
  display: none;
}