/* see CLAUDE_notes.md */

.tabSlide {
    /* .pageNav strips are already `position: fixed` (two classes, so they win
       over this) — this is for the embedded, non-fixed strips. Either way the
       strip is the containing block for the bar. */
    position: relative;
}

.tabSlide::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--tabind-w, 0px);
    height: var(--tabind-h, 3px);
    transform: translate(var(--tabind-x, 0px), var(--tabind-y, 0px));

    /* The fallback is only reached before JS has measured the strip (or with
       JS off). --primary-color, not a hard-coded hex: a hex there would
       flash a light-theme blue on first paint in dark mode. */
    background: var(--tabind-color, var(--primary-color));
    border-radius: 3px 3px 0 0;

    /* 0 until JS has a live measurement — and back to 0 whenever the strip is
       hidden (.fap-sub-tabs spends most of its life display:none). */
    opacity: var(--tabind-o, 0);
    pointer-events: none;

    transition:
        transform var(--tabind-d1, 0.5s)  cubic-bezier(0.65, 0, 0.35, 1),
        width     var(--tabind-d2, 0.58s) cubic-bezier(0.65, 0, 0.35, 1),
        opacity 0.18s ease,
        background-color 0.2s ease;
    will-change: transform, width;
}

/* The strips that keep their own 2px track line under the row (the embedded,
   non-fixed ones) get a 2px bar sitting exactly on that track. The fixed
   .pageNav strips clip vertical overflow, so theirs stays the 3px default and
   JS keeps it inside the box. */
.tabSlide.pageTabs:not(.pageNav),
.tabSlide.met-tabs:not(.pageNav) { --tabind-h: 2px; }

/* Hand the underline over: the active tab stops drawing its own border, the
   sliding bar is the only one left. Three classes, so this outranks the family
   rules in controls.css / page_nav.css / ui.css whatever the load order. */
.tabSlide.tabSlide > .active,
.tabSlide.tabSlide > .is-active,
.tabSlide.tabSlide > [aria-current="page"] { border-bottom-color: transparent; }