/*
 * .tabs — ARIA tabs (tablist + panels), driven by the tabs controller.
 * Structure: .tabs > .tabs__list(role=tablist) > button.tabs__tab(role=tab)
 *            + .tabs__panel(role=tabpanel)
 */
@layer components {
  .tabs__list {
    display: flex;
    gap: calc(var(--u-pad) / 2);
    border-block-end: var(--border-size-1) solid var(--line);
  }
  .tabs__tab {
    padding: calc(var(--u-pad) / 2);
    border: none;
    background: none;
    color: var(--ink-muted);
    font: inherit;
    font-weight: var(--font-weight-6);
    cursor: pointer;
    border-block-end: var(--border-size-2) solid transparent;
    margin-block-end: calc(var(--border-size-1) * -1); /* sit on the list's hairline */
  }
  .tabs__tab:hover { color: var(--ink); }
  .tabs__tab[aria-selected="true"] { color: var(--ink); border-block-end-color: var(--accent); }
  .tabs__tab:focus-visible { outline: var(--border-size-2) solid var(--accent); outline-offset: 2px; }

  .tabs__panel { padding-block-start: var(--u-pad); }
  .tabs__panel[hidden] { display: none; }
}