/* Tabs (ARIA tabs pattern; global.js upgrades [data-sv-tabs] and adds .is-enhanced).
   Without JS the per-language details stay stacked. */

.sv-tabs { min-width: 0; }
.sv-tabs [role="tablist"] {
  display: flex;
  gap: var(--sv-space-1);
  margin-bottom: var(--sv-space-4);
  overflow-x: auto;
  border-bottom: 1px solid var(--sv-color-border);
  scrollbar-width: thin;
}
.sv-tabs [role="tab"] {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-2);
  min-height: 2.75rem;
  margin-bottom: -1px;
  padding: var(--sv-space-2) var(--sv-space-4);
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--sv-color-text-muted);
  font-size: var(--sv-text-sm);
  font-weight: var(--sv-weight-medium);
  white-space: nowrap;
}
.sv-tabs [role="tab"]:hover { color: var(--sv-color-text); border-bottom-color: var(--sv-color-border-strong); }
.sv-tabs [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--sv-color-primary);
  color: var(--sv-color-primary);
  font-weight: var(--sv-weight-semibold);
}
.sv-tabs [role="tab"]:focus-visible { box-shadow: inset 0 0 0 2px var(--sv-color-focus); border-radius: var(--sv-radius-sm); }
.sv-tabs [role="tab"].is-invalid::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--sv-radius-pill);
  background: var(--sv-color-danger);
}
.sv-tabs [role="tabpanel"]:focus-visible { box-shadow: var(--sv-focus-ring); border-radius: var(--sv-radius-sm); }

.sv-tabs:not(.is-enhanced) > details + details { margin-top: var(--sv-space-3); }
.sv-tabs.is-enhanced > details > summary { display: none; }
.sv-tabs.is-enhanced > details { border: 0; background: transparent; }
.sv-tabs.is-enhanced > details > .sv-details__body { padding: 0; }