@layer components {
  .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-block-end: var(--block-space);
  }

  .tabs--sticky {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: oklch(var(--lch-canvas) / 0.85);
    inset-block-start: calc(var(--header-height, 4rem) - 1px);
    padding-block: var(--block-space-half);
    position: sticky;
    z-index: calc(var(--z-nav) - 1);
  }

  .tabs__tab {
    background: var(--color-ink-lightest);
    border-radius: 0.5em;
    color: var(--color-ink);
    flex: 1;
    font-size: var(--text-small);
    font-weight: 600;
    padding: 0.6em 1em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    /* Instant tap feedback (touch has no hover) */
    &:active {
      filter: brightness(0.92);
    }
  }

  .tabs__tab--active {
    background: var(--color-ink);
    color: var(--color-ink-inverted);
  }
}