details tabs

 <div class="detabs">
    <details name="*">
        <summary>"hi"</summary>
        "bye"
    </details>
    <details name="*">
        <summary>"hi"</summary>
        "hi!"
    </details>
    <details open name="*">
        <summary>"hi"</summary>
        "what's up?"
    </details>
 </div>

.detabs {
  &:has(details:nth-child(1)) { --tabs: 1; }
  &:has(details:nth-child(2)) { --tabs: 2; }
  &:has(details:nth-child(3)) { --tabs: 3; }
  &:has(details:nth-child(4)) { --tabs: 4; }
  &:has(details:nth-child(5)) { --tabs: 5; }
  &:has(details:nth-child(6)) { --tabs: 6; }
  &:has(details:nth-child(7)) { --tabs: 7; }
  &:has(details:nth-child(8)) { --tabs: 8; }
  &:has(details:nth-child(9)) { --tabs: 9; }
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-area: 1 / 1 / span 3 / span var(--tabs);
}
.detabs > details > summary {
  grid-area: 1 / var(--tab) / 2 / span 1;
  display: grid;
  cursor: pointer;
  padding: 0.25ex 1ch 0.35ex 1ch;
  background: var(--mix-1);
  z-index: 1;
  border: solid var(--mix-2);
  border-width: 1px 0 0 1px;
}
.detabs > details::details-content {
  grid-area: 2 / 1 / span 2 / span var(--tabs);
  border: solid var(--mix-2);
  border-width: 0 0 1px 1px;
}
.detabs > details[open] > summary {
  background: var(--mix-2);
}
.detabs > details[open]::details-content {
  background: var(--background);
  padding: 0.5ex 1ch;
}