/* Manifest Forms */

@layer base, components, utilities;

@layer components {

    /* Group & tab bar wrappers */
    :where([role=group]:has(button, [role=button], input, select, textarea, [onclick], [popovertarget], [x-dropdown], [\@click], [\@click\.stop], [\@click\.prevent], [x-on\:click], [x-on\:click\.stop], [x-on\:click\.prevent]),
        [role=tablist]:not(:has(>:not(button, a, [role=button], [role=tab], template)))):not(.unstyle) {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: 0;
        width: fit-content;
        max-width: 100%;

        &>*:focus {
            z-index: 1
        }

        /* Equal-width children */
        &.even>* {
            flex-shrink: initial;
            width: 100%
        }

        & input,
        & .combobox {
            width: fit-content
        }

        /* Own rule: a selector list is not forgiving, so a browser that can't
           parse the :has() would drop the two plain selectors above with it. */
        & :where(label, .label):has(input:not([type=checkbox], [type=radio]), select, textarea) {
            width: fit-content
        }

        /* Groups connect interactive elements */
        &:where([role=group]) {

            &>:where(button, [role=button], input:not([type=hidden]), select, textarea, .combobox, label:has(input:not([type=checkbox], [type=radio]), select, textarea), .label:has(input:not([type=checkbox], [type=radio]), select, textarea)):not([hidden]):not([popover]):not(.hidden):not([style*="display: none"]) {

                /* First participant — only when something follows it. A lone
                   participant matched this AND the last rule, squaring all four
                   corners of what is really just a single field. */
                &:not(:where(button, [role=button], input:not([type=hidden]), select, textarea, .combobox, label:has(input:not([type=checkbox], [type=radio]), select, textarea), .label:has(input:not([type=checkbox], [type=radio]), select, textarea)):not([hidden]):not([popover]):not(.hidden):not([style*="display: none"]) ~ &):has(~ :where(button, [role=button], input:not([type=hidden]), select, textarea, .combobox, label:has(input:not([type=checkbox], [type=radio]), select, textarea), .label:has(input:not([type=checkbox], [type=radio]), select, textarea)):not([hidden]):not([popover]):not(.hidden):not([style*="display: none"])) {
                    border-start-end-radius: 0;
                    border-end-end-radius: 0
                }

                /* Middle participants */
                &:where(:where(button, [role=button], input:not([type=hidden]), select, textarea, .combobox, label:has(input:not([type=checkbox], [type=radio]), select, textarea), .label:has(input:not([type=checkbox], [type=radio]), select, textarea)):not([hidden]):not([popover]):not(.hidden):not([style*="display: none"]) ~ &):has(~ :where(button, [role=button], input:not([type=hidden]), select, textarea, .combobox, label:has(input:not([type=checkbox], [type=radio]), select, textarea), .label:has(input:not([type=checkbox], [type=radio]), select, textarea)):not([hidden]):not([popover]):not(.hidden):not([style*="display: none"])) {
                    border-radius: 0
                }

                /* Last participant — only when something precedes it */
                &:where(:where(button, [role=button], input:not([type=hidden]), select, textarea, .combobox, label:has(input:not([type=checkbox], [type=radio]), select, textarea), .label:has(input:not([type=checkbox], [type=radio]), select, textarea)):not([hidden]):not([popover]):not(.hidden):not([style*="display: none"]) ~ &):not(:has(~ :where(button, [role=button], input:not([type=hidden]), select, textarea, .combobox, label:has(input:not([type=checkbox], [type=radio]), select, textarea), .label:has(input:not([type=checkbox], [type=radio]), select, textarea)):not([hidden]):not([popover]):not(.hidden):not([style*="display: none"]))) {
                    border-start-start-radius: 0;
                    border-end-start-radius: 0
                }
            }
        }

        /* Tab bar track */
        &[role=tablist] {
            position: relative;
            isolation: isolate;
            gap: calc(var(--spacing, 0.25rem) * 0.5);
            height: var(--spacing-field-height, calc(var(--spacing) * 9));
            padding: calc(var(--spacing, 0.25rem) / 2);
            background-color: color-mix(in oklch, var(--color-field-surface, oklch(20.5% 0 0)) 50%, transparent);
            border-radius: var(--radius, 0.5rem);
            anchor-scope: --selected-tab;

            /* Concentric corners */
            &>* {
                flex-grow: 1;
                justify-content: center;
                width: fit-content;
                min-height: 0;
                height: 100%;
                color: var(--color-content-neutral, oklch(43.9% 0 0));
                background-color: transparent;
                border-radius: max(calc(var(--radius, 0.5rem) - var(--spacing, 0.25rem) / 2), 0px);

                &:hover:not(.selected, [aria-selected=true], [aria-current]) {
                    color: var(--color-field-inverse, oklch(20.5% 0 0));
                    background-color: color-mix(in oklch, var(--color-field-surface-hover, oklch(70.8% 0 0)) 40%, transparent)
                }
            }

            /* Selected tab */
            &>:is(.selected, [aria-selected=true], [aria-current]) {
                color: var(--color-field-inverse, oklch(20.5% 0 0));
                background-color: var(--color-field-surface, oklch(87% 0 0));
                box-shadow: var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1))
            }

            /* Background slider for selected tab) */
            @supports (anchor-scope: --tab) {

                &>:is(.selected, [aria-selected=true], [aria-current]) {
                    /* --co-anchor lets inline anchor-name writers (e.g. tooltips) compose with the slider anchor */
                    anchor-name: --selected-tab;
                    --co-anchor: --selected-tab;
                    background-color: transparent;
                    box-shadow: none
                }

                &:has(>:is(.selected, [aria-selected=true], [aria-current]))::before {
                    content: "";
                    position: absolute;
                    z-index: -1;
                    position-anchor: --selected-tab;
                    top: anchor(top);
                    left: anchor(left);
                    width: anchor-size(width);
                    height: anchor-size(height);
                    background-color: var(--color-page, oklch(98.5% 0 0));
                    border-radius: max(calc(var(--radius, 0.5rem) - var(--spacing, 0.25rem) / 2), 0px);
                    box-shadow: var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1));
                    transition: var(--tab-slide-transition, all 0.15s ease-in-out)
                }

                .dark &:has(>:is(.selected, [aria-selected=true], [aria-current]))::before {
                    background-color: var(--color-field-surface, oklch(87% 0 0))
                }

                /* Track the tab rigidly during continuous reflow (drag-to-resize, window resize) */
                :where(.resizable-dragging) &,
                :where(.window-resizing) & {
                    --tab-slide-transition: none
                }
            }
        }
    }

    :where(form):not(.unstyle) {
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing, 0.25rem) * 4);
        width: 100%
    }

    /* Fieldset wrapper for checkboxes and radios */
    :where(fieldset):not(.unstyle) {
        display: flex;
        flex-direction: column;
        gap: 0.375ch calc(var(--spacing, 0.25rem) * 2);
        width: 100%;

        &:has([type=radio], [type=checkbox]) {
            gap: calc(var(--spacing, 0.25rem) * 2)
        }
    }

    :where(fieldset:has(legend)):not(.unstyle) {
        padding: 1ch 1.5ch 1.5ch 1.5ch;
        border-radius: var(--radius, 0.5rem);
        border-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
        border-style: solid;
        border-width: 1px;

        & :where(legend) {
            padding: 0 1.5ch;
            font-size: 0.875rem;
            color: var(--color-content-subtle, oklch(55.6% 0 0))
        }
    }

    /* Label wrapper for radios and checkboxes */
    :where(label, .label):has([type=radio], [type=checkbox]):not(.unstyle) {
        display: flex;
        flex-flow: row;
        align-items: center;
        gap: 1ch;
        outline: 0 none;
        cursor: pointer;

        &:focus-within {
            box-shadow: 0 0 0 0
        }
    }

    /* Label wrapper */
    :where(label:not(:has(.label)), .label):has(button, [role=button], [type=button], [type=submit], select, input:not([role=button], [type=checkbox], [type=radio], [type=file], [type=search]), textarea):not(:has(data)):not(:has(> button[command="--copy"])):not(.unstyle) {
        display: flex;
        flex-direction: column;
        gap: 0.2ch;
        width: 100%;
        text-indent: calc(var(--radius, 0.5rem) / 2);
        cursor: pointer;

        /* Prevent text indentation of bare label text nodes from being inherited */
        :where(*) {
            text-indent: 0
        }

        /* Indent label text in spans (direct child only — never reach into a nested field's content, e.g. combobox chips) */
        &>:where(span:first-of-type) {
            padding-inline-start: calc(var(--radius, 0.5rem) / 2)
        }

        &>:where(label, button, [role=button], [type=button], [type=submit], select, input:not([role=button], [type=checkbox], [type=radio], [type=file], [type=search]), textarea, .combobox, [role=group], [role=tablist]) {
            width: 100%;
            max-width: 100%
        }

        /* Group inputs flex to fill the label width */
        &>:where([role=group]) :where(input) {
            flex: 1;
            min-width: 0
        }

        /* Space out stacked labels for search and file inputs */
        :has([type=search], [type=file]) :where([type=search], [type=file]) {
            margin-top: 0.2ch
        }
    }

    /* Inline label wrapper */
    :where(label, .label):has(data):not(.unstyle) {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        width: 100%;

        &:focus-within {
            box-shadow: 0 0 0 0
        }

        /* Size buttons, inputs, and field wrappers */
        &>:where(label, .label, button, input:not([type=checkbox], [type=radio]), select, textarea, [role=group], [role=tablist], .combobox) {
            width: calc(var(--spacing-field-height, 2.25rem) * 8);
            max-width: 50%;
        }

        /* Group inputs flex to fit the sized group */
        &>:where([role=group]) :where(input) {
            flex: 1;
            min-width: 0
        }

        /* Focus state for nested field wrappers (search, file, copy) */
        & :where(label, .label):focus-within {
            box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-content-stark, oklch(43.9% 0 0)) 35%, transparent)
        }

        /* Align textarea label to top */
        &:has(textarea) {
            align-items: start;

            :where(data) {
                padding-top: calc(var(--spacing, 0.25rem))
            }
        }
    }

    /* Remove button (anchored to parent element) */
    :where(:has(> button[name=remove])):not(.unstyle) {
        position: relative;

        /* Button */
        > :where(button[name=remove]:not(.unstyle)) {
            position: absolute;
            inset-block-start: calc(var(--spacing-field-height, 2.5rem) / 2 * -0.5);
            inset-inline-end: calc(var(--spacing-field-height, 2.5rem) / 2 * -0.5);
            z-index: 1;
            min-width: 0;
            width: calc(var(--spacing-field-height, 2.5rem) / 2);
            height: calc(var(--spacing-field-height, 2.5rem) / 2);
            padding: 0;
            border-radius: var(--spacing-field-height, 2.5rem);
            box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
            opacity: 0;
            transition: var(--transition);

            /* Icon */
            &::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: 50%;
                height: 50%;
                background-color: var(--color-field-inverse, oklch(43.9% 0 0));
                mask-image: var(--icon-dismiss, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"));
                mask-repeat: no-repeat;
                mask-size: 100% 100%;
                transform-origin: center;
                transform: translateX(-50%) translateY(-50%)
            }
        }

        /* Reveal on parent hover/focus */
        &:is(:hover, :focus-within)> :where(button[name=remove]:not(.unstyle)) {
            opacity: 1
        }
    }

    /* Label wrappers for search and file inputs using .label utility */
    label:has(.label):not(.unstyle) {
        justify-content: space-between;
        background-color: transparent;
        cursor: default;

        /* Stack label text above the .label field when not inlined via <data> */
        &:not(:has(data)) {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 0.2ch;
            width: 100%;
            text-indent: calc(var(--radius, 0.5rem) / 2);

            & .label {
                text-indent: 0
            }
        }

        :where([type=search]) {
            width: 100%;
            max-width: 100%
        }
    }
}