/* The one tab recipe (round 27, r.12; run 36a1 TAB-1, point 4): a strip with a hairline,
   the active tab carries a 2px primary indicator — no box, no top border, no radius.
   Sizes and layout live here; colour, states and the ring in public/css/ui/ui-tabs.css.
   One selector list for every strip (.sc-tabs, .sc-np-tabs, .siteclick-ve-tabs,
   .siteclick-ve-viewtabs) and every tab (.sc-tab, .sc-np-tab, .siteclick-ve-tab,
   .siteclick-ve-viewtab); the class names stay (no markup migration).
   - labels side by side, never stretched or centred;
   - the strip scrolls; public/js/parts/sc-tabs.js sets data-sc-fade="l|r|l r" for the edge
     fades and keeps the active tab in view (scroll-padding-inline-start);
   - the label sits --sc-tab-inset from the left edge of its host and the line runs over the
     full width of the host: the strip bleeds into the host padding (margin-inline -inset,
     padding-inline inset). The hosts set --sc-tab-inset below; without a host it is 0.
   Heights: --sc-tab-h in the app, --sc-tab-h-sm in panels and sidebars; stacked strips sit
   --sc-tab-stack apart. The pill alias sc-tabs-pill has no rules. */

/* Hosts. */
.siteclick-subheader {
    --sc-tab-inset: calc(var(--sc-rail-w, 0px) + var(--sc-page-gutter, 0px));
}
.siteclick-panel-content-in {
    --sc-tab-inset: 1rem;
}
#wpbody,
.sc-mkt {
    --sc-tab-inset: var(--np-gutter, 20px);
}
.ch-tile-tabs {
    --sc-tab-inset: 0px;
}
body.sc-in-shell .ds-editor-fields {
    --sc-tab-inset: 16px;
}
/* Run 36n (CHR-1): a title that carries the view strip draws no hairline of its own; the strip's line sits on the same pixel.
   (0,3,0) beats ui-sidebar.css (0,2,0). */
.siteclick-container .siteclick-panel-title:has(> .siteclick-ve-viewtabs) {
    box-shadow: none;
}

.sc-tabs,
.sc-np-tabs,
.siteclick-ve-tabs,
.siteclick-ve-viewtabs {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--sc-tab-gap);
    min-width: 0;
    margin-inline: calc(-1 * var(--sc-tab-inset, 0px));
    padding-block: 0;
    padding-inline: var(--sc-tab-inset, 0px);
    border: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-padding-inline: max(var(--sc-tab-inset, 0px), 12px);
}
.sc-tabs {
    margin-block: 0 1rem;
}
.sc-tabs::-webkit-scrollbar,
.sc-np-tabs::-webkit-scrollbar,
.siteclick-ve-tabs::-webkit-scrollbar,
.siteclick-ve-viewtabs::-webkit-scrollbar {
    display: none;
}

:is(.sc-tabs, .sc-np-tabs, .siteclick-ve-tabs, .siteclick-ve-viewtabs)[data-sc-fade="l"] {
    mask-image: linear-gradient(to right, transparent, var(--sc-color-black) 24px);
}
:is(.sc-tabs, .sc-np-tabs, .siteclick-ve-tabs, .siteclick-ve-viewtabs)[data-sc-fade="r"] {
    mask-image: linear-gradient(to left, transparent, var(--sc-color-black) 24px);
}
:is(.sc-tabs, .sc-np-tabs, .siteclick-ve-tabs, .siteclick-ve-viewtabs)[data-sc-fade="l r"] {
    mask-image: linear-gradient(to right, transparent, var(--sc-color-black) 24px, var(--sc-color-black) calc(100% - 24px), transparent);
}

/* Stacked strips sit --sc-tab-stack apart. */
:is(.sc-tabs, .sc-np-tabs, .siteclick-ve-tabs, .siteclick-ve-viewtabs):has(+ :is(.sc-tabs, .sc-np-tabs, .siteclick-ve-tabs, .siteclick-ve-viewtabs)) {
    margin-bottom: var(--sc-tab-stack);
}
/* Run 37a2 (TAB-1): stacked strips are --sc-tab-pitch (36px) apart line to line. The first panel strip
   replaces the 16px #wpbody padding by the stack gap (8px); a Hub form strip likewise (after the hidden
   csrf input); a strip opening a pane sits right under the strip above it. */
#np-root > .sc-np-tabs:first-child,
body.sc-in-shell .ds-editor-fields > .sc-np-tabs:first-of-type {
    margin-top: calc(var(--sc-tab-stack) - 16px);
}
.sc-np-tabpane > .sc-np-tabs:first-child {
    margin-top: 0;
}

.sc-tabs .sc-tab,
.sc-np-tab,
.siteclick-ve-tab,
.siteclick-ve-viewtab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    height: var(--sc-tab-h-sm);
    margin: 0;
    padding: 0;
    border: 0;
    font-family: inherit;
    font-size: var(--sc-tab-font);
    font-weight: var(--sc-font-weight-ui);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
}
.sc-tabs .sc-tab {
    height: var(--sc-tab-h);
}
.sc-tabs--sm .sc-tab {
    height: var(--sc-tab-h-sm);
}

/* App subheader: one row per .siteclick-subheader-in. The row content is capped in width
   (shared.css) and scrolls, so the strip does not bleed there; each row draws its own
   hairline over the full width of the subheader (the 2px line of shared.css is gone). */
body.siteclick-container .siteclick-subheader {
    overflow-x: clip;
}
body.siteclick-container .siteclick-subheader::after {
    display: none;
}
.siteclick-subheader-in {
    position: relative;
}
.siteclick-subheader-in::after {
    content: "";
    position: absolute;
    left: -100vmax;
    right: -100vmax;
    bottom: 0;
    height: 1px;
    background: var(--sc-color-hairline);
    pointer-events: none;
}
.siteclick-subheader-in-content {
    position: relative;
    z-index: 1;
}
.siteclick-subheader .sc-tabs {
    margin: 0;
    padding-inline: 0;
    scroll-padding-inline: 12px;
    box-shadow: none;
}

/* The count after the label: plain text, no bubble (colour in ui-tabs.css). */
.sc-tab-count {
    font-weight: var(--sc-font-weight-ui);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* A score after the label is a bar (.sc-bar-score, parts/sc-header.css), never a number. */
.sc-tab-score {
    flex: 0 0 auto;
}

/* Optional icon before the label and sub text after it (run fix31, A58). */
.sc-tab-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}
.sc-tab-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}
.sc-tab-sub {
    color: var(--sc-color-text-muted);
    line-height: 1;
}

.sc-tabpane:not(.is-active) {
    display: none;
}