.tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-bottom: 1px solid var(--color-border, #E5E7EB);
}
.tabs > details {
  flex: 0 0 auto;
}
.tabs > details > .tabs-summary {
  /* Override <summary>'s default display: list-item so it lays out
     inline as a tab. */
  display: inline-flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
  padding: var(--spacing-md, 8px) var(--spacing-lg, 16px);
  font-weight: 500;
  font-size: var(--text-base, 0.95rem);
  color: var(--color-text-muted, #6B7280);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* overlap the strip's 1px border-bottom */
  transition: color 150ms ease, border-color 150ms ease;
  user-select: none;
  white-space: nowrap;
}
.tabs > details > .tabs-summary::-webkit-details-marker { display: none; }
.tabs > details > .tabs-summary::marker { content: ''; }
.tabs > details > .tabs-summary:hover {
  color: var(--color-text, #1F2937);
}
.tabs > details > .tabs-summary:focus-visible {
  outline: 2px solid var(--color-primary, #4F46E5);
  outline-offset: -2px;
  border-radius: var(--radii-md, 8px);
}
.tabs > details[open] > .tabs-summary {
  color: var(--color-primary, #4F46E5);
  border-bottom-color: var(--color-primary, #4F46E5);
  font-weight: 600;
}
.tabs > .tabs-panels {
  /* Forces a flex-wrap break: panels area takes a full row below the
     summary strip. min-width: 0 lets the row shrink below its content's
     intrinsic width (flex items default to min-width auto), so wide panel
     content — a long code line — scrolls inside its own overflow container
     instead of stretching the whole page. */
  flex: 1 0 100%;
  min-width: 0;
  padding: var(--spacing-lg, 16px) 0 0;
}
.tabs > .tabs-panels > .tabs-panel {
  max-width: 100%;
}
.tabs > .tabs-panels > .tabs-panel { display: none; }
.tabs:has(> details:nth-of-type(1)[open]) > .tabs-panels > .tabs-panel:nth-of-type(1),
.tabs:has(> details:nth-of-type(2)[open]) > .tabs-panels > .tabs-panel:nth-of-type(2),
.tabs:has(> details:nth-of-type(3)[open]) > .tabs-panels > .tabs-panel:nth-of-type(3),
.tabs:has(> details:nth-of-type(4)[open]) > .tabs-panels > .tabs-panel:nth-of-type(4),
.tabs:has(> details:nth-of-type(5)[open]) > .tabs-panels > .tabs-panel:nth-of-type(5),
.tabs:has(> details:nth-of-type(6)[open]) > .tabs-panels > .tabs-panel:nth-of-type(6),
.tabs:has(> details:nth-of-type(7)[open]) > .tabs-panels > .tabs-panel:nth-of-type(7),
.tabs:has(> details:nth-of-type(8)[open]) > .tabs-panels > .tabs-panel:nth-of-type(8),
.tabs:has(> details:nth-of-type(9)[open]) > .tabs-panels > .tabs-panel:nth-of-type(9),
.tabs:has(> details:nth-of-type(10)[open]) > .tabs-panels > .tabs-panel:nth-of-type(10),
.tabs:has(> details:nth-of-type(11)[open]) > .tabs-panels > .tabs-panel:nth-of-type(11),
.tabs:has(> details:nth-of-type(12)[open]) > .tabs-panels > .tabs-panel:nth-of-type(12),
.tabs:has(> details:nth-of-type(13)[open]) > .tabs-panels > .tabs-panel:nth-of-type(13),
.tabs:has(> details:nth-of-type(14)[open]) > .tabs-panels > .tabs-panel:nth-of-type(14),
.tabs:has(> details:nth-of-type(15)[open]) > .tabs-panels > .tabs-panel:nth-of-type(15),
.tabs:has(> details:nth-of-type(16)[open]) > .tabs-panels > .tabs-panel:nth-of-type(16) { display: block; }

@media (prefers-reduced-motion: reduce) {
  .tabs > details > .tabs-summary { transition: none; }
}