/* ============================================================
   ONE TAB ROW LOOK (home page, 2026-10-23). "Already use Claude or
   ChatGPT?" (#setup, .ct-tabs) and "Prefer a head start?" (#workflows-start,
   .wfp-tabs) share one style (Dom): a white tray with a soft shadow, 14px
   bold tabs with a 16px icon, the open one in the brand magenta. Loaded
   after css/custom-tools.css, css/setup.css and css/workflow-packs.css.
   ============================================================ */
.ct--setup .ct-tabs,
.wfs.wfp .wfp-tabs {
    gap: 4px; padding: 5px; border-radius: 999px;
    background: #fff; border: 1px solid var(--line, #EAE3E1);
    box-shadow: 0 1px 2px rgba(20, 17, 26, .04), 0 10px 24px -16px rgba(20, 17, 26, .22);
}
.ct--setup .ct-tab,
.wfs.wfp .wfp-tab {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px;
    border: 0; border-radius: 999px; background: transparent; box-shadow: none; transform: none;
    font-size: .875rem; font-weight: 700; letter-spacing: -.005em; color: var(--body, #4E4854); white-space: nowrap;
    transition: background-color .18s ease, color .18s ease, box-shadow .2s ease;
}
.wfs.wfp .wfp-tab b { font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
.ct--setup .ct-tab img, .ct--setup .ct-tab svg,
.wfs.wfp .wfp-tab-ico { width: 16px; height: 16px; flex: none; }
.ct--setup .ct-tab:hover,
.wfs.wfp .wfp-tab:hover { color: var(--ink, #16121A); background: var(--soft, #F4EFED); }
.ct--setup .ct-tab.is-on,
.wfs.wfp .wfp-tab[aria-selected="true"],
.wfs.wfp .wfp-tab[aria-selected="true"]:hover {
    color: #fff; background: var(--brand-magenta, #D53BD5); transform: none;
    box-shadow: 0 1px 2px rgba(22, 18, 26, .05), 0 12px 26px -16px rgba(213, 59, 213, .5);
}
.ct--setup .ct-tab.is-on img { filter: brightness(0) invert(1); }
.ct--setup .ct-tab:focus-visible,
.wfs.wfp .wfp-tab:focus-visible { outline: 2px solid var(--brand-blue, #4C6BEE); outline-offset: 2px; }

/* phones: both rows are full-width rails (their own rules); the tabs keep
   this shape */
@media (max-width: 979px) {
    .ct--setup .ct-tab, .wfs.wfp .wfp-tab { border-radius: 999px; }
}