/*  Indux CSS
/*  By Andrew Matlock under MIT license
/*  https://indux.build
/*  Modify referenced variables in indux.theme.css
*/

/* Indux Reset - browser style normalizer */

@layer base {

    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: 0 solid
    }

    :where(:root) {
        -webkit-tap-highlight-color: transparent;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
        text-rendering: optimizeLegibility;
        overflow-wrap: break-word;
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4
    }

    :where(html),
    :host {
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
        line-height: 1.5;
        tab-size: 4;
        font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
        font-feature-settings: normal;
        font-variation-settings: normal;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
        scroll-behavior: smooth;
        -ms-overflow-style: none;
        scrollbar-width: none;

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

        &:has(dialog:popover-open) {
            overflow: hidden
        }
    }

    :where(body) {
        max-width: 100vw;
        min-height: 100vh;
        margin: 0;
        line-height: inherit
    }

    :where(a) {
        color: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit;
    }

    :where(abbr[title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    :where([aria-controls]) {
        cursor: pointer
    }

    :where([aria-hidden=false][hidden]) {
        display: initial
    }

    :where([aria-hidden=false][hidden]:not(:focus)) {
        clip: rect(0, 0, 0, 0);
        position: absolute
    }

    :where(audio:not([controls])) {
        display: none;
        height: 0
    }

    :where(b, strong) {
        font-weight: bolder
    }

    :where(button, input, optgroup, select, textarea) {
        margin: 0;
        padding: 0;
        font-family: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        font-size: 100%;
        font-weight: inherit;
        line-height: inherit;
        letter-spacing: inherit;
        color: inherit
    }

    :where(button, select) {
        text-transform: none
    }

    :where(button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button) {
        appearance: button;
        background-color: transparent;
        background-image: none
    }

    :where(::-webkit-file-upload-button) {
        -webkit-appearance: button;
        font: inherit
    }

    :where(::-webkit-inner-spin-button, ::-webkit-outer-spin-button) {
        height: auto
    }

    :where(::-webkit-search-decoration) {
        -webkit-appearance: none
    }

    :where(button, [role="button"]) {
        cursor: pointer
    }

    :where(code, samp, pre) {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 1em;
        font-feature-settings: normal;
        font-variation-settings: normal;
    }

    :where([dir=rtl]) {
        direction: rtl
    }

    :where([disabled], :disabled, [aria-disabled=true]) {
        opacity: .5;
        cursor: default;
        pointer-events: none
    }

    :where(figcaption) {
        font-size: 75%
    }

    :where(figure) {
        display: block;
        padding: 0
    }

    :where(::file-selector-button) {
        margin-inline-end: 4px
    }

    :where(h1, h2, h3, h4, h5, h6) {
        font-size: inherit;
        font-weight: inherit
    }

    :where(hr) {
        height: 1px;
        color: inherit;
        background-color: var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15));
        border: 0 none
    }

    :where(img, svg, video, canvas, audio, iframe, embed, object) {
        display: block
    }

    :where(img, video) {
        max-width: 100%;
        height: auto
    }

    :where(::-webkit-autofill, :-webkit-autofill:focus) {
        transition: background-color 0s 600000s, color 0s 600000s
    }

    :where(::-webkit-date-and-time-value) {
        min-height: 1lh;
        text-align: inherit
    }

    :where(::-webkit-datetime-edit) {
        display: inline-flex
    }

    :where(::-webkit-datetime-edit-fields-wrapper) {
        padding: 0
    }

    :where(::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field) {
        padding-block: 0
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder
    }

    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px
    }

    :where(small) {
        font-size: 80%
    }

    :where(span) {
        color: inherit
    }

    :where(sub, sup) {
        font-size: 50%;
        line-height: 0;
        position: relative;
        vertical-align: baseline
    }

    :where(sub) {
        bottom: -0.25em
    }

    :where(sup) {
        top: -0.5em
    }

    :where(svg):not([fill]) {
        fill: currentColor
    }

    :where(svg):not(:root) {
        overflow: hidden
    }

    :where(table) {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    :where(::placeholder) {
        opacity: 1;
        color: #9ca3af
    }

    @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
        :where(::placeholder) {
            color: color-mix(in oklab, currentcolor 50%, transparent)
        }
    }

    /* Base popover styles */
    :where([popover]) {
        display: none;
        transition: opacity .15s ease-in, scale .15s ease-in, display .15s ease-in;
        transition-behavior: allow-discrete;

        &:popover-open {
            display: flex
        }

        /* Opening state */
        @starting-style {
            scale: .9;
            opacity: 0;
        }

        /* Closing state */
        &:not(:popover-open) {
            display: none !important;
            scale: 1;
            opacity: 0;
            transition-duration: .15s;
            transition-timing-function: ease-out
        }
    }

    :where(progress) {
        vertical-align: baseline
    }

    :where([type='search']) {
        -webkit-appearance: textfield;
        appearance: textfield;
        outline-offset: -2px
    }

    :where(summary) {
        display: list-item
    }

    :where(textarea) {
        resize: vertical
    }

    [hidden],
    [un-cloak],
    [v-cloak],
    [x-cloak] {
        display: none !important
    }

    /* @ rule - font smoothing for iOS and Mac */
    @media (-webkit-min-device-pixel-ratio: 2) {
        :where(html) {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale
        }
    }

    /* @ rule - reduced motion */
    @media (prefers-reduced-motion:reduce) {

        :not([aria-busy=true]),
        :not([aria-busy=true])::after,
        :not([aria-busy=true])::before {
            background-attachment: initial !important;
            animation-duration: 1ms !important;
            animation-delay: -1ms !important;
            animation-iteration-count: 1 !important;
            scroll-behavior: auto !important;
            transition-delay: 0s !important;
            transition-duration: 0s !important
        }
    }

    /* @ rule - reverse animation direction for rtl mode */
    @media (prefers-reduced-motion:no-preference) {
        [dir=rtl] progress:indeterminate {
            animation-direction: reverse
        }
    }
}

/* Indux Accordions */

@layer components {


    :where(details):not(.unset) {
        width: 100%;
        transition: var(--transition, all .05s ease-in-out);

        /* Rotate icon */
        &[open]>summary:before {
            transform: rotate(90deg)
        }

        /* Content spacing */
        & [open] summary {
            margin-bottom: calc(var(--spacing, 0.25rem) * 4)
        }

        &> :not(summary) {
            padding: var(--spacing-field-padding, 0.625rem) 0
        }

        /* Content */
        :where(summary) {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            color: var(--color-content-stark, oklch(16.6% 0.026 267));
            user-select: none;
            cursor: pointer;
            transition: var(--transition, all .05s ease-in-out);

            /* Hide default caret */
            &::marker,
            &::-webkit-details-marker {
                display: none;
                content: ""
            }

            &:hover {
                color: color-mix(in oklch, var(--color-surface-1, oklch(98.17% 0.0005 95.87)) 40%, var(--color-content-stark, oklch(16.6% 0.026 267)))
            }

            &:active {
                color: color-mix(in oklch, var(--color-surface-1, oklch(98.17% 0.0005 95.87)) 50%, var(--color-content-stark, oklch(16.6% 0.026 267)))
            }

            /* Add custom icon */
            &:before {
                content: "";
                order: 1;
                width: 1rem;
                height: 1rem;
                background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 50%, var(--color-field-inverse, oklch(16.6% 0.026 267)));
                -webkit-mask-image: var(--icon-accordion, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E"));
                mask-image: var(--icon-accordion, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E"));
                -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
                -webkit-mask-size: 100% 100%;
                mask-size: 100% 100%;
                transform: rotate(0);
                transition: 0.25s transform ease
            }
        }
    }

    /* RTL support */
    [dir="rtl"] :where(details):not(.unset) {
    
        & summary::before {
            transform: rotate(180deg)
        }

        &[open]>summary::before {
            transform: rotate(90deg)
        }
    }
}

/* Indux Avatars */

@layer utilities {

    :where(.avatar) {
        position: relative;
        display: flex;
        flex-flow: row wrap;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        width: var(--spacing-field-height, 2.25rem);
        height: var(--spacing-field-height, 2.25rem);
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
        color: var(--color-field-inverse, oklch(16.6% 0.026 267));
        background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
        background-clip: content-box;
        background-size: cover;
        background-position: center;
        border-radius: var(--radius, 0.5rem);

        /* Icon */
        &[x-icon] {
            color: var(--color-content-subtle, oklch(67.4% 0.0318 251.27))
        }

        /* Profile pic */
        :where(img) {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            border-radius: inherit;
            transition: var(--transition, all .05s ease-in-out)
        }

        /* Status indictor */
        :where(figure) {
            position: absolute;
            bottom: -3px;
            right: -3px;
            width: 9px;
            height: 9px;
            z-index: 1;
            background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
            border: 1px solid var(--color-page, oklch(100% 0 0));
            border-radius: 50%
        }
    }

    /* Button & label versions */
    :where(button.avatar, label.avatar) {
        padding: 0;
        background-blend-mode: normal;

        &:hover {
            background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48));
            background-blend-mode: multiply;

            & img {
                filter: brightness(0.9)
            }
        }
    }

    /* Wide version */
    :where(.avatar-wide) {
        display: flex;
        flex-flow: row;
        justify-content: start;
        align-items: center;
        gap: 1.5ch;
        width: 100%;
        max-width: 100%;
        overflow: hidden;

        & span {
            max-width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden
        }
    }

    /* Wide button version */
    :where(button.avatar-wide) {
        height: fit-content;
        padding: var(--spacing, 0.25rem);
        padding-inline-end: 1.5ch;

        &:hover .avatar {
            background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48));
            transition: var(--transition, all .05s ease-in-out)
        }
    }

    /* Group wrapper */
    :where([role=group]:has(.avatar, button.avatar)) {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;

        :where(.avatar) {
            margin-inline-end: calc(var(--spacing-field-height, 2.25rem) * -0.3);
            box-shadow: 0 0 0 3px var(--color-page, oklch(100% 0 0))
        }
    }
}

/* Indux Buttons */

@layer components {

    :where(button:not(.link), [role=button], [type=button], [type=reset], [type=submit], select) {
        display: inline-flex;
        flex-flow: row;
        justify-content: center;
        align-items: center;
        gap: 0.375rem;
        width: fit-content;
        min-width: var(--spacing-field-height, 2.25rem);
        max-width: 100%;
        height: var(--spacing-field-height, 2.25rem);
        margin: 0;
        padding: 0 var(--spacing-field-padding, 0.625rem);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--color-field-inverse, oklch(16.6% 0.026 267));
        background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
        border-width: 0;
        border-style: solid;
        border-color: transparent;
        border-radius: var(--radius, 0.5rem);
        outline-color: var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15));
        cursor: pointer;
        transition: var(--transition, all .05s ease-in-out);
        appearance: button;

        & span,
        & [x-icon] {
            color: inherit
        }

        & span {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        /* Remove padding around a solo icon */
        &:has(>svg:only-child) {
            padding: 0;
            font-size: 1rem
        }

        /* Center icons */
        & svg {
            margin-left: auto;
            margin-right: auto
        }

        &:hover {
            background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48))
        }

        &:active {
            background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48))
        }

        &:focus-visible {
            background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26))
        }
    }

    /* Selects */
    :where(select) {
        appearance: base-select;

        &::picker-icon {
            content: "⌄";
            height: calc(var(--spacing-field-height, 2.25rem) * 0.5);
            transform: scaleY(0.7);
            font-size: 20px;
            line-height: 0.4
        }
    }
}

/* Indux Checkboxes */

@layer components {

    input[type=checkbox]:not([role=switch]) {
        position: relative;
        min-width: calc(var(--spacing-field-height, 2.25rem) * 0.6);
        max-width: calc(var(--spacing-field-height, 2.25rem) * 0.6);
        width: calc(var(--spacing-field-height, 2.25rem) * 0.6);
        height: calc(var(--spacing-field-height, 2.25rem) * 0.6);
        padding: 0;
        border-radius: 0.4rem;
        cursor: pointer;

        /* Checked */
        &:checked {

            &:hover {
                background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48));
                border-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48))
            }

            &:active {
                background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48));
                border-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48))
            }
        }

        /* Icon */
        &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 60%;
            height: 60%;
            background-color: var(--color-field-inverse, oklch(16.6% 0.026 267));
            -webkit-mask-image: var(--icon-checkbox,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11l2-2l5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E"));
            mask-image: var(--icon-checkbox, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11l2-2l5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E"));
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
            transform-origin: center;
            transition: var(--transition, all .05s ease-in-out);

            /* Icon unchecked */
            opacity: 0;
            transform: translateX(-50%) translateY(-50%) scale(0)
        }

        /* Icon checked */
        &:checked::after {
            opacity: 1;
            transform: translateX(-50%) translateY(-50%) scale(1)
        }
    }
}

/* Indux Dialogs */

@layer components {

    :where(dialog[popover], .dialog) {
        position: fixed;
        left: 0;
        right: 0;
        width: 500px;
        flex-direction: column;
        max-width: 100%;
        min-height: 200px;
        max-height: 90vh;
        margin: auto;
        color: var(--color-content-stark, oklch(16.6% 0.026 267));
        background-color: var(--color-popover-surface, oklch(100% 0 0));
        border: 0 none;
        border-radius: calc(var(--radius, 0.5rem) * 2);
        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

        &::backdrop {
            background-color: rgba(0, 0, 0, 0.2);
        }

        /* Set layout for common children */
        & :where(header, main, footer) {
            padding: calc(var(--spacing, 0.25rem) * 4);
        }

        /* Push header content apart */
        & :where(header) {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: calc(var(--spacing, 0.25rem) * 4)
        }

        /* Push footer to bottom */
        & :where(main) {
            flex-grow: 1
        }

        /* Push footer content to end */
        & :where(footer) {
            display: flex;
            justify-content: end;
            align-items: center;
            gap: calc(var(--spacing, 0.25rem) * 2);
            margin-top: auto
        }

        /* Turn dialog into alert prompt on mobile */
        @media screen and (max-width: 768px) {
            width: calc(100vw - calc(var(--spacing, 0.25rem) * 4) - calc(var(--spacing, 0.25rem) * 4)) !important;
            max-height: calc(100vh - calc(var(--spacing, 0.25rem) * 4) - calc(var(--spacing, 0.25rem) * 4)) !important;
            margin: auto !important
        }
    }

    /* Utility class additions */
    :where(.dialog) {
        inset: 0;
        z-index: 10;
        height: fit-content
    }

    /* Dark mode override */
    .dark :where(dialog)::backdrop {
        background-color: rgba(0, 0, 0, 0.35)
    }

    /* Hide dropdowns when dialogs are open */
    html:has(dialog:popover-open) {

        /* Hide dropdowns outside of any dialog */
        & menu[popover]:not(dialog *) {
            opacity: 0;
            scale: .9;
            pointer-events: none;
            transition: opacity .15s ease-out, scale .15s ease-out;

            &:popover-open {
                display: flex !important;
            }
        }
    }

    /* When multiple dialogs are open, hide dropdowns in all but closest dialog */
    html:has(dialog:popover-open ~ dialog:popover-open) {
        & dialog:popover-open:not(:last-of-type) menu[popover] {
            opacity: 0;
            scale: .9;
            pointer-events: none;
            transition: opacity .15s ease-out, scale .15s ease-out;

            &:popover-open {
                display: flex !important;
            }
        }
    }
}

/* Indux Dividers */

@layer utilities {

    :where(.divider) {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 1px;
        margin: var(--spacing-field-padding, 0.625rem) 0;
        white-space: nowrap;
        font-size: 0.875rem;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));

        /* Lines before and after content */
        &:before,
        &:after {
            content: "";
            display: inline-flex;
            flex: 1;
            width: auto;
            height: 1px;
            background-color: var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15))
        }

        /* Space between lines and content */
        &:not(:empty) {
            gap: var(--spacing-field-padding, 0.625rem)
        }
    }

    /* Start modifier */
    :where(.divider.start) {
        justify-content: flex-start;
        
        &:before {
            display: none
        }
    }

    /* End modifier */
    :where(.divider.end) {
        justify-content: flex-end;
        
        &:after {
            display: none
        }
    }

    /* Vertical modifier */
    .divider.vertical {
        align-self: stretch;
        flex-flow: column nowrap;
        width: fit-content;
        min-width: 1px;
        height: auto;
        min-height: 100%;
        margin: 0 var(--spacing-field-padding, 0.625rem);

        &:before,
        &:after {
            content: "";
            width: 1px;
            height: auto;
            min-height: 1px;
        }

        /* Icon */
        & [x-icon] {
            flex-shrink: 0;
            min-height: 0.875rem;
            font-size: 0.875rem
        }
    }
}

/* Indux Dropdowns */

@layer components {

    :where(menu[popover]) {
        position-try-fallbacks: flip-inline, flip-block, flip-start;
        position-area: end span-end;
        inset: auto;
        flex-flow: column nowrap;
        gap: 0;
        width: fit-content;
        min-width: 160px;
        height: fit-content;
        max-height: 90vh;
        margin: var(--spacing-popover-offset, 0.5rem) 0;
        padding: 0.25rem;
        z-index: 50;
        list-style: none;
        background: var(--color-popover-surface, oklch(100% 0 0));
        border: 0 none;
        border-radius: 8px;
        box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
        transform-origin: top center;
        overflow-x: hidden;

        /* Options */
        & :where(li, a, button, label) {
            display: inline-flex;
            justify-content: start;
            align-items: center;
            width: 100%;
            max-width: 100%;
            min-height: 2rem;
            padding-inline-start: 0.5rem;
            padding-inline-end: 0.5rem;
            font-weight: normal;
            color: var(--color-content-stark, oklch(16.6% 0.026 267));
            text-align: start;
            text-decoration: none;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            background-color: transparent;
            border-radius: 6px;
            cursor: pointer;
            user-select: none;

            &:hover {
                color: var(--color-field-inverse, oklch(16.6% 0.026 267));
                text-decoration: inherit;
                background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
            }

            &:active {
                color: var(--color-field-inverse, oklch(16.6% 0.026 267));
                background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
            }

            & span,
            & [x-icon] {
                color: inherit
            }

            /* Leading icons */
            & [x-icon]:first-child:not(:only-child) {
                margin-inline-end: 0.375rem
            }
        }

        /* Titles */
        & small {
            padding: 0.25rem 0.5rem;
            color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
        }

        /* Horizontal rules (offset to ignore menu padding) */
        & hr {
            flex-shrink: 0;
            width: calc(100% + 0.25rem * 2);
            margin-inline-start: calc(0.25rem * -1);
            margin-top: 0.25rem;
            margin-bottom: 0.25rem;
            background-color: var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15));
        }

        /* Labels */
        & label {
            padding-inline-start: 0.5rem;
            padding-inline-end: 0.5rem;
            cursor: default;

            &:hover {
                background-color: transparent
            }

            &:has( input[role="switch"]) {
                justify-content: space-between
            }
        }

        /* Inputs and textareas */
        & :where(input, textarea) {
            flex-shrink: 0;

            &:not(:first-child) {
                margin-top: var(--spacing, 0.25rem)
            }
        }

        /* Spans */
        & span {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap
        }
    }

    /* Dark theme */
    :where(.dark menu[popover]) :where(li, a, button, label):hover {
        background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48));
    }

    /* Nested menu alignment */
    :where(menu menu) {
        position-area: span-end end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Center alignment */
    :where(menu.center) {
        position-area: center;
    }

    /* Top alignment */
    :where(menu.top) {
        position-area: top;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Bottom alignment */
    :where(menu.bottom) {
        position-area: bottom;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Start alignment */
    :where(menu.start) {
        position-area: center start;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* End alignment */
    :where(menu.end) {
        position-area: center end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Top start alignment */
    :where(menu.top-start) {
        position-area: start span-end;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Top end alignment */
    :where(menu.top-end) {
        position-area: start span-start;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Bottom start alignment */
    :where(menu.bottom-start) {
        position-area: end span-end;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Bottom end alignment */
    :where(menu.bottom-end) {
        position-area: end span-start;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Start top alignment */
    :where(menu.start-top) {
        position-area: span-end start;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Start bottom alignment */
    :where(menu.start-bottom) {
        position-area: span-start start;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }
    

    /* End top alignment */
    :where(menu.end-top) {
        position-area: span-end end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }
    
    /* End bottom alignment */
    :where(menu.end-bottom) {
        position-area: span-start end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Top start corner alignment */
    :where(menu.top-start-corner, menu.start-top-corner) {
        position-area: start start;
        margin: var(--spacing-popover-offset, 0.5rem)
    }
    
    /* Top end corner alignment */
    :where(menu.top-end-corner, menu.end-top-corner) {
        position-area: start end;
        margin: var(--spacing-popover-offset, 0.5rem)
    }
    
    /* Bottom start corner alignment */
    :where(menu.bottom-start-corner, menu.start-bottom-corner) {
        position-area: end start;
        margin: var(--spacing-popover-offset, 0.5rem)
    }
    
    /* Bottom end corner alignment */
    :where(menu.bottom-end-corner, menu.end-bottom-corner) {
        position-area: end end;
        margin: var(--spacing-popover-offset, 0.5rem)
    }

    /* Touchscreen version */
    @media (pointer: coarse) {
        menu[popover] {
            position: fixed;
            position-area: none;
            top: auto;
            left: 1rem;
            bottom: 1rem;
            width: calc(100% - 2rem);
            margin: 0;

             /* Leading icons */
             & :where(li, a, button, label) [x-icon]:first-child:not(:only-child) {
                margin-inline-end: 0.8125rem
            }
        }
    }
}

/* Indux Forms */

@layer components {

    :where(form) {
        display: flex;
        flex-direction: column;
        gap: 1.5ch;
        width: 100%;
    }

    /* Form element wrapper */
    :where(fieldset) {
        display: flex;
        flex-direction: column;
        gap: 1.5ch;
        width: 100%;
        padding: 1.5ch;
    }

    :where(fieldset:has(legend)) {
        border-radius: var(--radius, 0.5rem);
        border-color: var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15));
        border-style: solid;
        border-width: 1px;

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

    /* Label wrapper */
    :where(label:has(input:not([role=button], [type=checkbox], [type=radio], [type=file]), textarea)) {
        display: flex;
        flex-direction: column;
        gap: 0.2ch;
        width: 100%;
        text-indent: 1ch;

        & :where(*) {
            text-indent: 0
        }
    }

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

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

    /* Group wrapper */
    :where([role=group]:has(button, input, select)) {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: 0;
        width: fit-content;
        max-width: 100%;

        &>* {
            flex-basis: auto;

            &:focus {
                z-index: 1
            }
        }

        &>*:first-child {
            border-start-end-radius: 0;
            border-end-end-radius: 0
        }

        &>*:not(:first-child):not(:last-child) {
            border-radius: 0
        }

        &>*:last-child {
            border-start-start-radius: 0;
            border-end-start-radius: 0
        }

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

/* Indux Inputs */

@layer components {

    :where(input, textarea, label:has(input:not([role=button], [type=checkbox], [type=radio], [type=file]))) {
        width: 100%;
        max-width: 100%;
        color: var(--color-field-inverse, oklch(16.6% 0.026 267));
        background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
        border-width: 0;
        border-style: solid;
        border-color: transparent;
        border-radius: var(--radius, 0.5rem);
        transition: var(--transition, all .05s ease-in-out);
        cursor: text;
        appearance: none;

        &:hover {
            background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48))
        }

        &:active {
            background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48))
        }

        &:focus-visible {
            background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26))
        }

        &::placeholder {
            color: color-mix(in oklch, var(--color-field-inverse, oklch(16.6% 0.026 267)) 65%, transparent)
        }

        &::selection {
            background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 80%, var(--color-field-inverse, oklch(16.6% 0.026 267)))
        }

        &[type="file"] {
            display: none
        }
    }

    /* Input-specific styles */
    :where(input) {
        height: var(--spacing-field-height, 2.25rem);
        padding-left: var(--spacing-field-padding, 0.625rem);
        padding-right: var(--spacing-field-padding, 0.625rem)
    }

    /* Label wrapper for search input */
    :where(label:has(input[type="search"])) {
        display: flex;
        flex-flow: row;
        justify-content: start;
        align-items: center;
        padding-inline-start: 0;

        /* Search icon */
        & [x-icon] {
            display: flex;
            justify-content: center;
            align-items: center;
            width: var(--spacing-field-height, 2.25rem);
            height: 100%;
            margin-inline-end: 0;
            color: var(--color-content-subtle, oklch(67.4% 0.0318 251.27))
        }

        /* Input element overrides */
        & :where(input) {
            padding-inline-start: 0;
            padding-inline-end: 0;
            background: transparent;

            &:hover,
            &:focus-visible {
                background: transparent
            }

            &:focus-visible {
                box-shadow: 0 0 0 0 transparent
            }
        }

        /* Spacing for trailing siblings */
        &:has(input + *) {
            padding-inline-end: 0.375rem;
        }
    }

    /* Hide search input cancel button */
    :where(input[type="search"])::-webkit-search-cancel-button {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

    /* Textarea-specific styles */
    :where(textarea) {
        display: block;
        height: auto;
        padding: var(--spacing-field-padding, 0.625rem) calc(var(--spacing-field-padding, 0.625rem) * 1.3)
    }
}

/* Indux Radios */

@layer components {

    input[type=radio] {
        position: relative;
        min-width: calc(var(--spacing-field-height, 2.25rem) * 0.625);
        width: calc(var(--spacing-field-height, 2.25rem) * 0.625);
        height: calc(var(--spacing-field-height, 2.25rem) * 0.625);
        padding: 5px;
        border-radius: 50%;
        cursor: pointer;

        /* Notch */
        &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 60%;
            height: 60%;
            background-color: var(--color-field-inverse, oklch(16.6% 0.026 267));
            border-radius: 50%;
            transform-origin: center;
            transition: var(--transition, all .05s ease-in-out);

            /* Notch unchecked */
            opacity: 0;
            transform: translateX(-50%) translateY(-50%) scale(0)
        }

        /* Notch checked */
        &:checked::after {
            opacity: 1;
            transform: translateX(-50%) translateY(-50%) scale(1)
        }
    }
}

/* Indux Resize Handles */

@layer utilities {

    :where([x-resize]) {
        position: relative;

        /* Resize handle area */
        .resize-handle {
            position: absolute;
            display: block;
            width: var(--spacing-resize-handle, 1rem);
            height: var(--spacing-resize-handle, 1rem);
            z-index: 100;
            background: transparent;
            border: none;
            outline: none;

            /* Visible handle */
            &::before {    
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 1px;
                height: 1px;
                background: transparent;
                transition: background-color 0.2s ease;
                pointer-events: none
            }

            &:hover::before, &:active::before {
                background-color: var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15));
            }
        }

        /* Edge handles */
        .resize-handle-top,
        .resize-handle-bottom {
            width: 100%;
            left: 0;
            cursor: ns-resize;

            &::before {
                width: 100%;
            }
        }

        .resize-handle-left,
        .resize-handle-right,
        .resize-handle-start,
        .resize-handle-end {
            height: 100%;
            top: 0;
            cursor: ew-resize;

            &::before {
                height: 100%;
            }
        }

        .resize-handle-top {
            top: calc(var(--spacing-resize-handle, 1rem) * -0.5);
        }

        .resize-handle-bottom {
            top: auto;
            bottom: calc(var(--spacing-resize-handle, 1rem) * -0.5);
        }

        .resize-handle-left,
        .resize-handle-start {
            left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
        }

        .resize-handle-right,
        .resize-handle-end {
            right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
        }

        /* Corner handles */
        .resize-handle-top-left {
            width: var(--spacing-resize-handle, 1rem);
            height: var(--spacing-resize-handle, 1rem);
            top: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            cursor: nw-resize;
        }

        .resize-handle-top-right {
            width: var(--spacing-resize-handle, 1rem);
            height: var(--spacing-resize-handle, 1rem);
            top: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            cursor: ne-resize;
        }

        .resize-handle-bottom-left {
            width: var(--spacing-resize-handle, 1rem);
            height: var(--spacing-resize-handle, 1rem);
            bottom: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            cursor: sw-resize;
        }

        .resize-handle-bottom-right {
            width: var(--spacing-resize-handle, 1rem);
            height: var(--spacing-resize-handle, 1rem);
            bottom: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            cursor: se-resize;
        }

        /* Logical direction handles */
        .resize-handle-top-start {
            width: var(--spacing-resize-handle, 1rem);
            height: var(--spacing-resize-handle, 1rem);
            top: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            cursor: nw-resize;
        }

        .resize-handle-top-end {
            width: var(--spacing-resize-handle, 1rem);
            height: var(--spacing-resize-handle, 1rem);
            top: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            cursor: ne-resize;
        }

        .resize-handle-bottom-start {
            width: var(--spacing-resize-handle, 1rem);
            height: var(--spacing-resize-handle, 1rem);
            bottom: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            cursor: sw-resize;
        }

        .resize-handle-bottom-end {
            width: var(--spacing-resize-handle, 1rem);
            height: var(--spacing-resize-handle, 1rem);
            bottom: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
            cursor: se-resize;
        }

        /* Screen overlay to get mouse coordinates */
        .resize-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 9999;
            display: none;
            background: transparent
        }

        /* Resize states */
        .resizable-closing {
            opacity: 0.5;
            transition: opacity 0.2s ease
        }

        .resizable-closed {
            display: none !important
        }

        /* Focus states for accessibility */
        .resize-handle:focus {
            outline: 2px solid rgba(59, 130, 246, 0.5);
            outline-offset: 2px
        }

        /* High contrast mode support */
        @media (prefers-contrast: high) {
            :where(.resize-handle:hover .resize-handle-inner) {
                background: rgba(0, 0, 0, 0.3)
            }
            
            :where(.resize-handle:active .resize-handle-inner) {
                background: rgba(0, 0, 0, 0.5)
            }
        }

        /* Reduced motion support */
        @media (prefers-reduced-motion: reduce) {
            :where(.resize-handle-inner,
            .resizable-closing,
            .resize-handle) {
                transition: none
            }
        }
    }

    /* RTL overrides - more specific than :where([x-resize]) */
    [dir="rtl"] :where([x-resize]) .resize-handle-start {
        left: auto;
        right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
    }

    [dir="rtl"] :where([x-resize]) .resize-handle-end {
        right: auto;
        left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
    }

    [dir="rtl"] :where([x-resize]) .resize-handle-top-start {
        left: auto;
        right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
        cursor: ne-resize;
    }

    [dir="rtl"] :where([x-resize]) .resize-handle-top-end {
        right: auto;
        left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
        cursor: nw-resize;
    }

    [dir="rtl"] :where([x-resize]) .resize-handle-bottom-start {
        left: auto;
        right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
        cursor: se-resize;
    }

    [dir="rtl"] :where([x-resize]) .resize-handle-bottom-end {
        right: auto;
        left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
        cursor: sw-resize;
    }
}

/* Indux Sidebars */

@layer components {

    :where(aside[popover]) {
        inset-inline-start: auto;
        inset-inline-end: 0;
        width: fit-content;
        min-width: 20vw;
        max-width: 80vw;
        max-width: 100%;
        height: 100%;
        overflow-y: auto;
        z-index: 200;
        background-color: var(--color-popover-surface, oklch(100% 0 0));
        transition: opacity .15s ease-in, transform .15s ease-in, display .15s ease-in;
        transition-behavior: allow-discrete;

        /* Opening state - slide in from inline-end */
        @starting-style {
            transform: translateX(100%);
            opacity: 1;
            scale: 1;
        }

        /* Closing state - slide out to inline-end */
        &:not(:popover-open) {
            transform: translateX(100%);
            opacity: 1;
            scale: 1;
        }

        /* RTL overrides - slide in from left in RTL context */
        [dir="rtl"] & {
            @starting-style {
                transform: translateX(-100%);
            }

            &:not(:popover-open) {
                transform: translateX(-100%);
            }
        }

        /* Modifier class to originate sidebar from inline-start (left in LTR, right in RTL) */
        &.start {
            inset-inline-start: 0;
            inset-inline-end: auto;

            @starting-style {
                transform: translateX(-100%);
            }

            &:not(:popover-open) {
                transform: translateX(-100%);
            }

            /* RTL overrides */
            [dir="rtl"] & {
                @starting-style {
                    transform: translateX(100%);
                }

                &:not(:popover-open) {
                    transform: translateX(100%);
                }
            }
        }
    }

    /* Dark mode override */
    .dark :where(aside[popover]) {
        background-color: var(--color-surface-1, oklch(98.17% 0.0005 95.87))
    }
}

/* Indux Slides */

@layer components {

    [x-carousel] {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow: hidden;

        /* Slides container */
        .carousel-slides {
            display: flex;
            transition: transform 300ms ease-in-out;
            width: 100%;
            aspect-ratio: 16 / 9
        }

        /* Previous & next buttons */
        & button[\@click="prev()"],
        & button[\@click="next()"] {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: oklch(100% 0 0 / 0.15);

            &:hover {
                background-color: oklch(100% 0 0 / 0.3)
            }
        }

        & button[\@click="prev()"] {
            left: calc(var(--spacing) * 4)
        }

        & button[\@click="next()"] {
            left: auto;
            right: calc(var(--spacing) * 4)
        }

        /* Dots container */
        .carousel-dots {
            position: absolute;
            bottom: calc(var(--spacing) * 4);
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: calc(var(--spacing) * 2);
            max-width: 100%;
            padding: 0 calc(var(--spacing) * 4);
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;

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

            /* Dot button */
            & span {
                flex-shrink: 0;
                width: 0.625rem;
                height: 0.625rem;
                border-radius: 50%;
                background-color: oklch(100% 0 0 / 0.15);
                cursor: pointer;
                transition: background-color 300ms ease-in-out;

                &:hover {
                    background-color: oklch(100% 0 0 / 0.3)
                }

                &.active {
                    background-color: white
                }
            }
        }
    }
}

/* Indux Switches */

@layer components {

    :where(input[role=switch]) {
        position: relative;
        min-width: calc(var(--spacing-field-height, 2.25rem) * 0.65 * 2);
        width: calc(var(--spacing-field-height, 2.25rem) * 0.65 * 2);
        height: calc(var(--spacing-field-height, 2.25rem) * 0.65);
        padding: 0;
        box-sizing: content-box;
        border-radius: calc(var(--spacing-field-height, 2.25rem) * 0.65);
        cursor: pointer;

        /* Marker */
        &::before {
            content: "";
            position: absolute;
            top: 0.125rem;
            left: 0.125rem;
            width: calc(var(--spacing-field-height, 2.25rem) * 0.65 - 0.125rem * 2);
            height: calc(var(--spacing-field-height, 2.25rem) * 0.65 - 0.125rem * 2);
            border-radius: 50%;
            background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 60%, var(--color-field-inverse, oklch(16.6% 0.026 267)));
            box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
            transition: var(--transition, all .05s ease-in-out)
        }

        /* Checked */
        &:checked {
            background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));

            /* Marker */
            &::before {
                left: calc(100% - (var(--spacing-field-height, 2.25rem) * 0.65) + 0.125rem);
                background-color: var(--color-field-inverse, oklch(16.6% 0.026 267))
            }

            &:hover {
                background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48))
            }
        }
    }
}

/* Indux Tables */

@layer components {

    :where(table, .grid-table) {
        table-layout: auto;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        border-spacing: 0;
        border-radius: var(--radius, 0.5rem);

        /* Grid utility classes */
        :where(.grid-header, .grid-row, .grid-footer) {
            display: contents
        }

        /* Header row */
        :where(thead, .grid-header > *) {
            background-color: var(--color-surface-1, oklch(98.17% 0.0005 95.87));
            border-bottom: 1px solid var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15))
        }

        /* Header cell */
        :where(th,.grid-header > *) {
            font-weight: bold
        }

        /* Row */
        :where(tr, .grid-row > *) {
            border-bottom: 1px solid var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15))
        }

        /* Cell */
        :where(td, th, .grid-header > *, .grid-row > *, .grid-footer > *) {
            padding: calc(var(--spacing, 0.25rem) * 2.5) calc(var(--spacing, 0.25rem) * 4);
            font-size: 0.875rem;
            text-align: left;
            text-align: start;
            overflow: hidden;

            /* Make elements within cell inline */
            &>*:not(template) {
                display: inline-flex;
                vertical-align: middle;

                /* Add space between them */
                &:not(:last-child) {
                    margin-right: 4px
                }
            }
        }
        
        /* Footer row */
        :where(:not(:has(tfoot)) tbody tr:last-child, tfoot tr:last-child, .grid-footer > *) {
            border-bottom: 0
        }

        /* Striped utility class */
        &.striped {
            :where(tr:nth-child(even), .grid-row:nth-child(even)) {
                background-color: var(--color-surface-1, oklch(98.17% 0.0005 95.87))
            }

            :where(tr:nth-child(odd), .grid-row:nth-child(odd)) {
                background-color: transparent
            }

            :where(tr, .grid-row) {
                border-bottom: 0 none
            }
        }
    }
}

/* InduxToasts */

@layer utilities {

    :where(.toast-container) {
        position: fixed;
        bottom: 3vw;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: calc(var(--spacing, 0.25rem) * 2);
        z-index: 100;
    }

    :where(.toast) {
        display: flex;
        max-width: 90vw;
        background-color: var(--color-popover-surface, oklch(100% 0 0));
        border: 1px solid var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15));
        border-radius: calc(var(--radius, 0.5rem) * 2);
        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        overflow: hidden;
        opacity: 0;
        transform: translateY(1rem);
        transition:
            opacity 0.2s ease-out,
            transform 0.2s ease-out,
            height 0.2s ease-out,
            margin 0.2s ease-out,
            padding 0.2s ease-out;
    
        /* Content */
        :where(.toast-content) {
            display: flex;
            align-items: center;
            padding: 0.375rem 0.75rem;
            color: inherit;

            :where([x-icon]:first-child) {
                margin-right: 1ch
            }
        }
    
        /* Dismiss button */
        :where(.toast-dismiss-button) {
            position: relative;
            border-inline-start: 1px solid color-mix(in oklch, var(--color-content-stark, oklch(16.6% 0.026 267)) 20%, transparent);
            border-radius: 0;

            /* Icon */
            &::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: 50%;
                height: 50%;
                background-color: var(--color-field-inverse, oklch(16.6% 0.026 267));
                mask-image: var(--icon-toast-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%)
            }
        }
    }

    /* Brand, accent, positive, negative utility class overrides (see Utilities) */
    :where(.toast.brand, .toast.accent, .toast.positive, .toast.negative) {
        color: var(--color-field-inverse, oklch(16.6% 0.026 267));
        background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));

        :where(.toast-dismiss-button) {
            border-inline-start: 1px solid color-mix(in oklch, var(--color-field-inverse, oklch(16.6% 0.026 267)) 20%, transparent);
        }
    }

    /* Entry animation */
    :where(.toast-entry) {
        opacity: 1;
        transform: translateY(0);
    }

    /* Exit animation */
    :where(.toast-exit) {
        opacity: 0;
        transform: translateY(1rem)
    }
}

/* Indux Tooltips */

@layer utilities {

    :where(.tooltip[popover]) {
        position: absolute;
        position-try-fallbacks: flip-inline, flip-block, flip-start;
        position-area: bottom;
        inset: auto;
        display: block;
        width: fit-content;
        max-width: 200px;
        margin: var(--spacing-popover-offset, 0.5rem) 0;
        padding: calc(var(--spacing, 0.25rem) * .5) calc(var(--spacing, 0.25rem) * 2);
        font-size: 0.875rem;
        color: var(--color-page, oklch(100% 0 0));
        background-color: var(--color-content-stark, oklch(16.6% 0.026 267));
        border: 0 none;
        border-radius: var(--radius, 0.5rem);
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

        &:hover {
            transition-delay: var(--tooltip-hover-delay, 1s)
        }

        /* Leading icon */
        & [x-icon]:first-child {
            margin-inline-end: 0.25rem
        }
    }

    /* Top alignment */
    :where(.tooltip.top) {
        position-area: top;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Bottom alignment */
    :where(.tooltip.bottom) {
        position-area: bottom;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Start alignment */
    :where(.tooltip.start) {
        position-area: center start;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* End alignment */
    :where(.tooltip.end) {
        position-area: center end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Top start alignment */
    :where(.tooltip.top-start) {
        position-area: start span-end;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Top end alignment */
    :where(.tooltip.top-end) {
        position-area: start span-start;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Bottom start alignment */
    :where(.tooltip.bottom-start) {
        position-area: end span-end;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Bottom end alignment */
    :where(.tooltip.bottom-end) {
        position-area: end span-start;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Start top alignment */
    :where(.tooltip.start-top) {
        position-area: span-end start;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Start bottom alignment */
    :where(.tooltip.start-bottom) {
        position-area: span-start start;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* End top alignment */
    :where(.tooltip.end-top) {
        position-area: span-end end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }
    
    /* End bottom alignment */
    :where(.tooltip.end-bottom) {
        position-area: span-start end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Top start corner alignment */
    :where(.tooltip.top-start-corner, .tooltip.start-top-corner) {
        position-area: start start;
        margin: var(--spacing-popover-offset, 0.5rem)
    }
    
    /* Top end corner alignment */
    :where(.tooltip.top-end-corner, .tooltip.end-top-corner) {
        position-area: start end;
        margin: var(--spacing-popover-offset, 0.5rem)
    }
    
    /* Bottom start corner alignment */
    :where(.tooltip.bottom-start-corner, .tooltip.start-bottom-corner) {
        position-area: end start;
        margin: var(--spacing-popover-offset, 0.5rem)
    }
    
    /* Bottom end corner alignment */
    :where(.tooltip.bottom-end-corner, .tooltip.end-bottom-corner) {
        position-area: end end;
        margin: var(--spacing-popover-offset, 0.5rem)
    }
}

/* Indux Typography */

@layer base {

    /* All text elements */
    :where(a, abbr, address, blockquote, code, del, figcaption, h1, h2, h3, h4, h5, h6, ins, label:not(.avatar), legend, p, small, cite, q), .h1, .h2, .h3, .h4, .h5, .h6, .paragraph, .small, .caption {
        color: var(--color-content-stark, oklch(16.6% 0.026 267));

        /* Support inline icons */
        &:where(:has( [x-icon])) {
            display: inline-flex;
            align-items: center;
            
            /* Inline icon spacing */
            & [x-icon] {
                margin-inline-end: 0.5ch;
            }
        }

        /* Inline span alignment */
        & span {
            vertical-align: inherit
        }
    }

    /* Headings */
    :where(h1, h2, h3, h4, h5, h6), .h1, .h2, .h3, .h4, .h5, .h6 {
        font-weight: bolder;
        word-wrap: break-word
    }

    :where(h1, h2, h3, h4), .h1, .h2, .h3, .h4 {
        font-weight: 700;
    }

    :where(h1, h2, h3), .h1, .h2, .h3 {
        letter-spacing: -0.025em
    }

    :where(h1), .h1 {
        font-size: 2.25rem;
        line-height: 1.25
    }

    :where(h2), .h2 {
        font-size: 1.5rem
    }

    :where(h3), .h3 {
        font-size: 1.25rem;
        line-height: 1.4
    }

    :where(h4), .h4 {
        font-size: 1rem
    }

    :where(h5), .h5 {
        font-weight: 600;
        font-size: .875rem;
        line-height: 1rem;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
    }

    :where(h6), .h6 {
        font-weight: 600;
        font-size: 0.8125rem;
        line-height: 1.4;
        text-transform: uppercase;
    }

    /* Paragraphs */
    :where(p), .paragraph {
        line-height: 1.6;
    }

    /* Links */
    :where(a:not([role=button]), button.link) {
        text-decoration: underline;
        text-underline-offset: 2px;
        cursor: pointer;
        transition: var(--transition, all .05s ease-in-out);

        &:hover {
            color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
        }

        &:active {
            color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
        }
    }

    /* Blockquotes */
    :where(blockquote) {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: calc(var(--spacing, 0.25rem) * 4) 0;
        padding: 0 calc(var(--spacing, 0.25rem) * 4);
        color: var(--color-content-stark, oklch(16.6% 0.026 267));
        border-inline-start: 0.25rem solid color-mix(in oklch, var(--color-content-stark, oklch(16.6% 0.026 267)) 25%, transparent);
        border-inline-end: none;

        & * {
            color: inherit
        }
    }

    /* Inline code */
    :where(code) {
        display: inline-block;
        width: fit-content;
        height: fit-content;
        padding: 0.1ch 0.5ch;
        font-size: 75%;
        font-weight: 600;
        word-wrap: break-word;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
        background-color: color-mix(in oklch, var(--color-content-neutral, oklch(48.26% 0.0365 255.09)) 10%, transparent);
        border-radius: calc(var(--radius, 0.5rem) / 1.5)
    }

    /* Captions */
    :where(figcaption), .caption {
        font-size: 0.8125rem;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));

        & a {
            font-weight: inherit;
            color: inherit
        }
    }

    :where(figure figcaption) {
        margin: calc(var(--spacing, 0.25rem) * 2) auto;
        text-align: center
    }

    /* Small text */
    :where(small), .small {
        font-size: 0.875rem;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
    }

    /* Icons */
    :where([x-icon]) {
        display: inline-flex
    }

    /* Inserted text */
    :where(ins) {
        text-decoration: none
    }

    /* Keyboard text */
    :where(kbd) {
        display: inline-block;
        vertical-align: baseline;
        width: fit-content;
        min-width: 1.4rem;
        padding: 0.3rem;
        font-family: inherit;
        font-size: 75%;
        font-weight: 600;
        line-height: 1;
        text-align: center;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
        background-color: color-mix(in oklch, var(--color-content-neutral, oklch(48.26% 0.0365 255.09)) 10%, transparent);
        border-radius: calc(var(--radius, 0.5rem) / 1.5);

        &:not(:last-of-type) {
            margin-inline-end: 1px
        }
    }

    /* RTL keyboard overrides */
    [dir="rtl"] :where(kbd:not(:last-of-type)) {
        margin-inline-start: 1px;
        margin-inline-end: 0
    }

    /* Labels */
    :where(label) {
        width: -moz-fit-content;
        width: fit-content;
        user-select: none
    }

    /* Legends */
    :where(legend) {
        display: block;
        max-width: 100%;
        white-space: normal
    }

    /* Badges */
    :where(mark) {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 0.25rem;
        width: fit-content;
        height: fit-content;
        padding: var(--spacing, 0.25rem) calc(var(--spacing, 0.25rem) * 1.5);
        font-weight: 500;
        font-size: 0.75rem;
        line-height: 1;
        color: var(--color-field-inverse, oklch(16.6% 0.026 267));
        background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
        border-radius: 100px;

        /* Solo icons */
        &:has(svg:only-child) {
            padding: var(--spacing, 0.25rem) calc(var(--spacing, 0.25rem) * 1);
        }
    }

    /* Lists */
    :where(ol):not(nav ol):not(menu ol) {
        list-style-type: decimal;
    }

    :where(ul):not(nav ul):not(menu ul) {
        list-style-type: disc;
    }

    :where(ol):not(nav ol):not(menu ol),
    :where(ul):not(nav ul):not(menu ul) {

        &:not(:has(input[type="checkbox"])) {
            padding-inline-start: 1.75ch;
        }

        /* Offset items so markers align inside the element frame  */
        & li {
            padding-inline-start: 1ch;

            /* Space out items */
            &:not(:last-of-type) {
                margin-bottom: 1.25ch
            }

            /* Allow icons to replace markers */
            &:has([x-icon]) {
                position: relative;
                display: inherit;
                list-style: none;

                & [x-icon] {
                    position: absolute;
                    top: 0.45ch;
                    left: -1.75ch
                }
            }

            /* Checklist items */
            &:has(input[type="checkbox"]) {
                position: relative;
                display: inherit;
                list-style: none;

                & input[type="checkbox"] {
                    position: absolute;
                    top: 0.45ch;
                    left: -1ch
                }
            }
        }
    }

    /* RTL list overrides */
    [dir="rtl"] :where(ol):not(nav ol):not(menu ol),
    [dir="rtl"] :where(ul):not(nav ul):not(menu ul) {
        & li:has([x-icon]) {
            & [x-icon] {
                left: auto;
                right: -1.75ch
            }
        }

        & li:has(input[type="checkbox"]) {
            & input[type="checkbox"] {
                left: auto;
                right: -1.25ch
            }
        }
    }

    /* Nested list spacing */
    :where(ol, ul):not(nav ol):not(menu ol) ul,
    :where(ol, ul):not(nav ul):not(menu ul) ol {
        margin-top: 1ch;
        padding-inline-start: 2.75ch;

        & + li {
            margin-top: 1.5ch
        }
    }

    /* Spans */
    :where(span) {
        vertical-align: middle
    }
}

/* Indux Utilities */

@layer utilities {

    /* Center in flex parent */
    :where(.center) {
        justify-content: center;
        align-items: center
    }

    /* Flex utilities */
    :where(.row, .row-wrap, .col, .col-wrap) {
        display: flex
    }

    /* Flex column */
    :where(.col) {
        flex-flow: column nowrap
    }

    /* Wrapping flex column */
    :where(.col-wrap) {
        flex-flow: column wrap
    }

    /* Flex row */
    :where(.row) {
        flex-flow: row nowrap
    }

    /* Wrapping flex row */
    :where(.row-wrap) {
        flex-flow: row wrap
    }

    /* Content width & horizontal centering */
    :where(.content) {
        width: var(--spacing-content-width, 68.75rem);
        max-width: 100%;
        margin-inline-start: auto;
        margin-inline-end: auto
    }

    /* Ghost */
    :where(.ghost) {
        color: var(--color-content-stark, oklch(16.6% 0.026 267));
        background-color: transparent;

        &:hover {
            background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26))
        }

        &.brand:hover {
            color: var(--color-brand-inverse, #763518)
        }

        &.accent:hover {
            color: var(--color-accent-inverse, oklch(100% 0 0))
        }

        &.negative:hover {
            color: var(--color-negative-inverse, white)
        }
    }

    /* Hug */
    :where(.hug) {
        min-width: 0;
        width: fit-content;
        height: fit-content;
        padding: 0
    }

    /* Outlined */
    :where(.outlined) {
        border-width: 1px;
        border-style: solid;
        border-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 90%, var(--color-field-inverse, oklch(16.6% 0.026 267)))
    }

    /* Dark theme override */
    .dark :where(.outlined) {
        border-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 80%, var(--color-field-inverse, oklch(16.6% 0.026 267)))
    }

    /* Selected */
    :where(.selected) {
        background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 25%, transparent);
    }

    /* Transparent */
    :where(.transparent) {
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
        background-color: transparent !important;

        &:hover {
            color: var(--color-content-stark, oklch(16.6% 0.026 267))
        }
    }

    /* Large */
    :where(.lg) {
        --spacing-field-height: 2.5rem;
        --spacing-field-padding: 0.78rem;
        font-size: 125%
    }

    /* Small */
    :where(.sm) {
        --spacing-field-height: 1.5rem;
        --spacing-field-padding: 0.49rem;
        font-size: 75%;

        /* Reposition select picker icon */
        &::picker-icon {
            line-height: 0.2
        }
    }

    /* Page content layout */
    :where(body.page) {
        display: flex;
        flex-direction: column;
        min-height: 100vh
    }

    .page {

        /* Overlay header & footer if fixed */
        & > header, & > footer {
            z-index: 30
        }

        /* Page margins */
        & > header, & > footer, & > main {
            padding-inline-start: var(--spacing-viewport-padding, 5vw);
            padding-inline-end: var(--spacing-viewport-padding, 5vw);
        }

        /* Width and horizontal centering for content wrappers */
        & > header nav, & > footer nav, & > main > section:not(.banner, .overlay-dark, .overlay-light) {
            width: var(--spacing-content-width, 68.75rem);
            max-width: 100%;
            margin-inline-start: auto;
            margin-inline-end: auto
        }

        /* Push footer down */
        & > footer {
            margin-top: auto
        }
    }

    /* No focus */
    .no-focus:focus, .no-focus:focus-visible, .no-focus:focus-within {
        box-shadow: 0 0 0 0 transparent
    }

    /* No scrollbar */
    :where(.no-scrollbar) {
        -ms-overflow-style: none;
        scrollbar-width: none;

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

    /* Banner overlays */
    :where(.overlay-dark, .overlay-light) {
        position: relative;

        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            width: 100%;
            height: 100%
        }

        >* {
            position: relative;
            z-index: 1
        }
    }

    /* Dark overlay */
    :where(.overlay-dark) {
        color: white !important;

        &::after {
            background: oklch(0% 0 0 / 50%)
        }
    }

    /* Light overlay */
    :where(.overlay-light) {
        color: black !important;

        &::after {
            background: oklch(100% 0 0 / 75%)
        }
    }

    /* Prose styles for long-form content */
    :where(.prose) {
        width: 65ch;
        max-width: 100%;

        /* Asides inside a prose element are used as callouts */
        & aside:not([popover]) {
            margin-top: calc(1rem * 1.4);
            padding: 1rem;
            border-radius: calc(var(--radius, 0.5rem) * 2);
            color: var(--color-content-stark, oklch(16.6% 0.026 267));
            background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 20%, transparent);
            border: 1px solid color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 30%, transparent);

            &:not(.frame) * {
                color: inherit
            }

            &:has([x-icon]):not(.frame) {
                display: flex;
                flex-direction: row;
                gap: 1rem;

                & [x-icon] {
                    padding-top: 0.25rem;
                    font-size: 1.25rem
                }
            }
        }

        & > a:not(:where(h1, h2, h3, h4, h5, h6, p, small, figcaption, label, li, blockquote, pre code, code, kbd, span, mark, [role=button]) a) {
            margin-top: calc(1rem * 1.4);
        }

        & > blockquote {
            margin-top: calc(1rem * 2);

            & * {
                margin: 0
            }
        }

        & > figcaption {
            margin-top: 1rem
        }

        & > figure {
            margin-top: calc(1rem * 1.4);

            & img {
                margin: 0
            }
        }

        & > h1+p {
            margin-top: 0.625rem;
            font-size: 1.125rem;
            color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
        }

        & > h2 {
            margin-top: 1rem;
            margin-bottom: calc(1rem * 0.6667)
        }

        & > h3 {
            margin-top: calc(1rem * 2.4)
        }

        & > h4 {
            margin-top: calc(1rem * 3)
        }

        & > h5 {
            margin-top: 1rem;
            margin-bottom: 1rem
        }

        & > h6 {
            margin-top: calc(1rem * 2);
            margin-bottom: 1rem
        }

        & > hr {
            margin-top: calc(1rem * 3);
            margin-bottom: calc(1rem * 3)
        }

        & > img,
        & > p {
            margin-top: calc(1rem * 1.4)
        }

        & > ol,
        & > ul,
        & > small {
            margin-top: 1rem
        }

        & > table {
            margin-top: calc(1rem * 2);
            margin-bottom: calc(1rem * 2)
        }

        & > x-code-group, & > x-code, & > pre {
            margin-top: 2rem;
            margin-bottom: 2rem
        }

        & > x-code-group x-code {
            margin-top: 0;
            margin-bottom: 0
        }

        & > x-code pre {
            margin-top: 0;
            margin-bottom: 0
        }
    }

    /* Inline trailing content */
    :where(.trailing) {
        display: inline-block;
        margin-inline-start: auto;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
    }

    /* Brand colors */
    :where(.brand) {
        --color-field-surface: var(--color-brand-surface, #f6c07b);
        --color-field-surface-hover: var(--color-brand-surface-hover, #f19b46);
        --color-field-inverse: var(--color-brand-inverse, #763518);
        --color-content-stark: var(--color-brand-content, #de6618);
        --color-content-neutral: color-mix(in oklch, var(--color-brand-content, #de6618) 85%, transparent);
        --color-content-subtle: color-mix(in oklch, var(--color-brand-content, #de6618) 70%, transparent);
    }

    /* Accent colors */
    :where(.accent) {
        --color-field-surface: var(--color-accent-surface, oklch(16.6% 0.026 267));
        --color-field-surface-hover: var(--color-accent-surface-hover, oklch(28.7% 0.030787 270.1));
        --color-field-inverse: var(--color-accent-inverse, oklch(100% 0 0));
        --color-content-stark: var(--color-accent-content, oklch(16.6% 0.026 267));
        --color-content-neutral: color-mix(in oklch, var(--color-accent-content, oklch(16.6% 0.026 267)) 85%, transparent);
        --color-content-subtle: color-mix(in oklch, var(--color-accent-content, oklch(16.6% 0.026 267)) 70%, transparent);
    }

    /* Negative colors */
    :where(.negative) {
        --color-field-surface: var(--color-negative-surface, #ef4444);
        --color-field-surface-hover: var(--color-negative-surface-hover, #dc2626);
        --color-field-inverse: var(--color-negative-inverse, white);
        --color-content-stark: var(--color-negative-content, #ef4444);
        --color-content-neutral: color-mix(in oklch, var(--color-negative-content, #ef4444) 85%, transparent);
        --color-content-subtle: color-mix(in oklch, var(--color-negative-content, #ef4444) 70%, transparent);
    }

    /* Positive colors */
    :where(.positive) {
        --color-field-surface: var(--color-positive-surface, #16a34a);
        --color-field-surface-hover: var(--color-positive-surface-hover, #166534);
        --color-field-inverse: var(--color-positive-inverse, white);
        --color-content-stark: var(--color-positive-content, #16a34a);
        --color-content-neutral: color-mix(in oklch, var(--color-positive-content, #16a34a) 85%, transparent);
        --color-content-subtle: color-mix(in oklch, var(--color-positive-content, #16a34a) 70%, transparent);
    }
}