/*
 * Tabs — visual layer (Etch Custom CSS)
 * Behavior: core/components/c-interactive.css + etch-alpine.js
 *
 * Default: underline tab bar
 * Toggle variant: .c-tabs.toggle (sliding pill — self-contained below)
 *
 * SOURCE OF TRUTH — loaded via css/custom.css @import.
 * Do not duplicate this block in Etch Custom CSS (Main); nesting
 * &.toggle { &__list } compiles to .c-tabs.toggle__list and breaks layout.
 */

.c-tabs {
    width: 100%;

    &__list {
        border-bottom: var(--border-accordion) var(--border-style) var(--mode-border-opacity);
        margin-bottom: calc(-1 * var(--border-accordion));
        -ms-overflow-style: none;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    &__trigger {
        border: var(--border-accordion) var(--border-style) transparent;
        border-bottom: none;
        border-radius: var(--radius-control) var(--radius-control) 0 0;
        color: var(--mode-muted-color);
        font-weight: var(--weight-body);
        padding: var(--gap-15) var(--gap-25);
        transition:
            background-color var(--time-in) var(--bezier-in),
            border-color var(--time-in) var(--bezier-in),
            color var(--time-in) var(--bezier-in);

        &:focus:not(:focus-visible) {
            outline: none;
        }

        &:focus-visible {
            outline: var(--border-marker) solid var(--mode-active);
            outline-offset: 2px;
        }

        &.is-active,
        &[aria-selected="true"] {
            background: var(--mode-active);
            border-color: var(--mode-border-opacity);
            border-bottom-color: var(--mode-background);
            color: var(--mode-headline-color);
            font-weight: var(--weight-headline);
        }
    }

    &__panels {
        background: var(--mode-background);
        border: var(--border-accordion) var(--border-style) var(--mode-border-opacity);
        border-radius: 0 var(--radius-control) var(--radius-control) var(--radius-control);
    }

    &__panel {
        color: var(--mode-muted-color);
        font-size: var(--body-font);
        font-weight: var(--weight-body);
        line-height: var(--line-height-body);
        padding: var(--gap-25);

        :where(h2, h3) {
            color: var(--mode-headline-color);
            font-weight: var(--weight-headline);
        }

        p {
            margin-top: var(--gap-15);
        }

        .c-btn {
            margin-top: var(--gap-25);
        }
    }

    /* Toggle — sliding pill (selectors MUST stay flat: &.toggle &__list) */
    &.toggle &__list {
        --toggle-count: 2;
        --toggle-padding: var(--gap-05);
        --toggle-active: 0;
        --toggle-track-radius: var(--gap-1);
        --toggle-pill-radius: var(--gap-1);
        --toggle-trigger-pad-y: var(--gap-15);
        --toggle-trigger-pad-x: var(--gap-25);

        -webkit-overflow-scrolling: touch;
        background: var(--mode-opacity-5);
        border-bottom: none;
        border-radius: var(--toggle-track-radius);
        display: grid;
        grid-auto-columns: minmax(max-content, 1fr);
        grid-template-columns: repeat(var(--toggle-count, 2), minmax(max-content, 1fr));
        grid-template-rows: auto;
        list-style: none;
        margin: 0 0 var(--gap-15);
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: var(--toggle-padding);
        position: relative;
        width: 100%;
    }

    &.toggle &__bg {
        background: var(--mode-active);
        border-radius: var(--toggle-pill-radius);
        bottom: var(--toggle-padding);
        left: var(--toggle-padding);
        pointer-events: none;
        position: absolute;
        top: var(--toggle-padding);
        transform: translateX(calc(var(--toggle-active, 0) * 100%));
        transition: transform var(--time-out) var(--bezier-out);
        width: calc((100% - 2 * var(--toggle-padding)) / var(--toggle-count, 2));
    }

    &.toggle &__trigger {
        background: transparent;
        border: none;
        border-radius: 4px;
        color: var(--mode-muted-color);
        display: flex;
        font-size: var(--body-font);
        font-weight: var(--weight-body);
        justify-content: center;
        line-height: var(--line-height-cta);
        padding: var(--toggle-trigger-pad-y) var(--toggle-trigger-pad-x);
        position: relative;
        transition: color var(--time-in) var(--bezier-in);
        z-index: 1;

        &:focus:not(:focus-visible) {
            outline: none;
        }

        &:focus-visible {
            outline: var(--border-marker) solid var(--mode-active);
            outline-offset: 2px;
        }

        &.is-active,
        &[aria-selected="true"] {
            background: var(--mode-reverse);
            border-color: var(--mode);
            color: var(--mode-active-color);
            font-weight: var(--weight-headline);
        }
    }

    &.toggle &__panels {
        border-radius: var(--radius-control);
    }

    &.toggle.s {
        --toggle-trigger-pad-y: var(--gap-1);
        --toggle-trigger-pad-x: var(--gap-15);
    }

    &.toggle.s &__trigger {
        font-size: var(--body-font);
    }

    &.toggle.m {
        --toggle-trigger-pad-y: var(--gap-15);
        --toggle-trigger-pad-x: var(--gap-25);
    }

    &.toggle.l {
        --toggle-padding: var(--gap-1);
        --toggle-trigger-pad-y: var(--gap-2);
        --toggle-trigger-pad-x: var(--gap-3);
    }

    &.toggle.full &__list {
        max-width: none;
        width: 100%;
    }

    @media (prefers-reduced-motion: reduce) {
        &.toggle &__bg {
            transition: none;
        }
    }
}

[data-etch-tabs]:not([data-etch-bound]).toggle .c-tabs__trigger:first-of-type {
    color: var(--mode-headline-color);
    font-weight: var(--weight-headline);
}