/* ── Unified tab language ─────────────────────────────────────
   One active-state formula shared with the topbar mode island
   (layout.css) and the screener sub-tabs (mobile.css), so every
   tab in the engine reads the same:
     active   → cyan text + cyan wash + inset hairline
     inactive → muted text, transparent
     hover    → lifted text + faint white wash
   Radius stays context-appropriate (island 6px, drawers 8px). */

.tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tab-btn {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.tab-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

/* Une seule formule d'etat actif pour tout le produit : texte cyan, lavis
   rgba(111,231,255,0.10), filet interne. Les selecteurs de mode l'ont rejointe depuis
   layout.css, ou elle etait recopiee a l'identique -- tabs.css est plus tardive dans la
   cascade, donc l'etat actif ne peut que mieux gagner, ce qui est son role. Chaque
   selecteur garde sa specificite propre. */
.tab-btn[aria-selected="true"],
.topbar-main > .mode-switcher .mode-btn.is-active,
.mode-switcher .mode-btn.is-active {
  color: var(--accent-cyan);
  background: rgba(111, 231, 255, 0.10);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(111, 231, 255, 0.22);
}

/* Le gras appartient aux ONGLETS seuls : les boutons de mode ne l'avaient pas, et
   le leur donner aurait ete un changement visuel deguise en mise en commun. */
.tab-btn[aria-selected="true"] {
  font-weight: 600;
}

.tab-btn:focus-visible {
  outline: 2px solid rgba(111, 231, 255, 0.5);
  outline-offset: 1px;
}

@media (max-width: 639px) {
  .tab-btn {
    min-height: 44px;
    padding: 0 16px;
  }
}