/* styles/sections/seo-tool-tabs.css
 * "Quick Setup by Tool" tabs on /agent-setup (BRI-7775): a row of tab buttons over one
 * panel per tool. The script on the page toggles .active and aria-selected. */
@layer sections {
  .seo-page .tool-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-block: var(--space-16);
  }

  .seo-page .tool-tab {
    min-height: 44px;
    padding: 0 var(--space-16);
    border: 1px solid var(--rule-edge);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
    transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  }

  @media (hover: hover) {
    .seo-page .tool-tab:not(.active):hover {
      border-color: var(--fern);
    }
  }

  .seo-page .tool-tab.active {
    border-color: var(--fern);
    background: var(--fern);
    color: var(--white);
  }

  .seo-page .tool-content {
    display: none;
  }

  .seo-page .tool-content.active {
    display: block;
  }

  .seo-page .tool-content > h3 {
    margin-top: var(--space-16);
    font-size: var(--t-h4-size);
    line-height: var(--t-h4-lh);
    letter-spacing: var(--t-h4-ls);
  }

  .seo-page .tool-content > h4 {
    margin-top: var(--space-24);
    font-size: var(--t-h5-size);
    line-height: var(--t-h5-lh);
    letter-spacing: var(--t-h5-ls);
  }
}