/* <x-tabs-vertical>: a column of buttons on the left, the chosen content on the right; a row on a narrow screen. */
x-tabs-vertical {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 28px;
  align-items: start;

  & > .tab-list { display: flex; flex-direction: column; gap: 2px; }

  & > .tab-list button {
    height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--fg-2);
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    transition: background 0.25s var(--ease), color 0.25s var(--ease);

    &:hover { background: var(--zebra); color: var(--fg); }
    &.active { background: var(--accent-soft); color: var(--fg); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
  }
}

@media (max-width: 767px) {
  x-tabs-vertical {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;

    & > .tab-list { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
    & > .tab-list::-webkit-scrollbar { display: none; }
    & > .tab-list button { flex: none; }
  }
}