/* Compiled: 2026-07-24 03:13:54*/
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

/* ==== TOKENS ==== */
:root {
    --spacing: 16px;
    --header-height: 50px;
    --nav-item-height: 44px;
    --nav-max-width: 250px;
    --logo-height: 50px;
    --logo-svg-height: 30px;
    --font-size: 16px;
    --font-size-header: 23px;

    /* colors */
    --leap-blue-dark: #2c3340;
    --leap-blue: #178;
    --leap-blue-light: #0cb;
    --leap-grey: #d3d3d3;
    --leap-grey-light: #eee;
    --leap-red: #c84f48;
    --leap-red-bright: #e66;
    --leap-orange: #f0a61e;
    --leap-green: #289f42;

    /* semantic */
    --leap-login-background: var(--leap-blue-dark);
    --leap-login-dialog-background: var(--leap-blue);
    --leap-login-dialog-color: white;
    --leap-login-color-error: rgb(238 102 102 / .9);
    --leap-login-color-border-error: var(--leap-login-color-error);

    --leap-logo-background: var(--leap-blue-light);
    --leap-logo-color: white;

    --leap-color-error: var(--leap-red);
    --leap-color-border-error: var(--leap-color-error);

    --leap-button-hover-background: var(--leap-blue-light);

    --leap-nav-background: var(--leap-blue-dark);
    --leap-nav-color: rgb(255 255 255 / .6);
    --leap-nav-color-active: white;

    --leap-header-background: var(--leap-blue-dark);
    --leap-header-color: white;
    --leap-header-background-buttons: var(--leap-blue);

    --leap-main-background: var(--leap-grey);

    --leap-index-header: var(--leap-blue);
    --leap-index-header-color: white;
    --leap-index-row: var(--leap-grey-light);
    --leap-index-row-color: rgb(0 0 0 / .4);
    --leap-index-row-first-color: black;
    --leap-index-row-hover: white;
    --leap-index-row-selected: var(--leap-blue-light);

    /* shared primitives (dedupe repeated literals) */
    --leap-radius: 3px;
    --leap-radius-lg: 6px;
    --leap-border: 1px solid rgb(0 0 0 / .2);
    --leap-field-bg: rgb(255 255 255 / .5);
    --leap-tint-dark: rgb(0 0 0 / .05);
    --leap-line-light: rgb(255 255 255 / .2);

    /* responsive button/link text scale (separate from --font-size: different
       values and breakpoints), shared by .leap-button, the locale select and
       the login footer links */
    --font-size-button: 14px;
}

@media (max-width: 1440px) {
    :root {
        --font-size: 15px;
        --nav-item-height: 40px;
        --spacing: 10px;
        --nav-max-width: 220px;
    }
}

@media (max-width: 1024px) {
    :root {
        --nav-max-width: 200px;
        --font-size: 14px;
        --nav-item-height: 36px;
        --header-height: 40px;
        --logo-height: 40px;
        --font-size-header: 21px;
        --logo-svg-height: 26px;
        --font-size-button: 13px;
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-button: 12px;
    }
}

/* ==== BASE ==== */
/* Global style for all Leap components */
.leap {
    display: flex;
    font-family: "Open Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: grayscale;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--font-size);
    position: relative;

    .tox-edit-focus,
    :focus {
        outline: 2px solid var(--leap-blue-light);
        outline-offset: 1px;
    }

    .button-link {
        font: inherit;
        border: 0 none;
        background: none;
        color: inherit;
        margin: 0;
        padding: 0;
        cursor: inherit;
    }

    /* utility: center content both ways (thumbnails, spinners, overlays) */
    .leap-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* utility: full-screen backdrop; z-index and background set per use */
    .leap-overlay {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.leap-main {
    flex: 1;
    background-color: var(--leap-main-background);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

/* ==== HEADER ==== */
.leap-header {
    position: sticky;
    white-space: nowrap;
    display: flex;
    align-items: center;
    top: 0;
    z-index: 10;
    background-color: var(--leap-header-background);
    color: var(--leap-header-color);
    overflow: hidden;
    width: 100%;

    H2 {
        font-weight: 300;
        font-size: var(--font-size-header);
        padding: 0 var(--spacing);
        line-height: var(--header-height);
        overflow: hidden;
    }

    .leap-button {
        margin-right: var(--spacing);
    }

    > * {
        margin-bottom: 0;
    }

    [role="group"] {
        padding: 0 var(--spacing);
        background-color: var(--leap-header-background-buttons);
    }

    .leap-search-input {
        margin-left: auto;
        margin-right: var(--spacing);
        border: 1px solid var(--leap-line-light);
        color: white;
        border-radius: var(--leap-radius);
        font: inherit;
        font-size: 16px;
        background-color: transparent;
        transition: 0.25s;
        width: 200px;
        padding: 4px 6px;
        @media (max-width: 1024px) {
            max-width: 80px;
            font-size: 14px;
            padding: 2px 4px;
        }

        &:focus {
            width: 400px;
            max-width: 40%;
        }

        &::placeholder {
            color: rgb(255 255 255 / .6);
        }
    }
}

/* ==== DASHBOARD ==== */
.leap-dashboard {
    article {
        padding: var(--spacing);

        h3 {
            font-size: var(--font-size-header);
            font-weight: 300;
        }
    }
}

/* ==== LOGO ==== */
.leap-logo {
    background-color: var(--leap-logo-background);
    font-size: var(--font-size-header);
    font-weight: 300;
    line-height: var(--logo-height);
    white-space: nowrap;

    .svg {
        height: var(--logo-svg-height);
        width: 50px;
        margin-top: calc((var(--logo-height) - var(--logo-svg-height)) / 2);
        float: left;
    }

    A {
        color: var(--leap-logo-color);
        padding-right: var(--spacing);
        display: block;
        align-items: center;
        text-decoration: none;

        &:hover {
            background-color: rgb(255 255 255 / .15);
        }
    }
}

/* ==== NAV ==== */
.leap-nav-aside {
    height: 100vh;
    max-width: var(--nav-max-width);
    z-index: 100;

    #leap-nav-toggle {
        display: none;
    }
    @media (max-width: 768px) {
        flex: 0 0 50px;
        order: 2;
        > LABEL[for="leap-nav-toggle"] {
            display: block;
            position: fixed;
            top: 0;
            right: 0;
            width: 50px;
            background-color: var(--leap-logo-background);
            > SPAN {
                display: block;
                height: 3px;
                background-color: white;
                width: 28px;
                position: absolute;
                top: calc(50% - 1.5px);
                left: 11px;
                transition: transform 0.4s;
                &:nth-child(1) {
                    transform: translateY(-8px);
                }
                &:nth-child(3) {
                    transform: translateY(8px);
                }
            }
            height: var(--logo-height);
            cursor: pointer;
            z-index: 100;
        }
        .leap-nav {
            position: fixed;
            transform: translateX(calc(100% - 50px));
            right: 0;
            width: 100%;
            transition: transform 0.4s;
        }
        #leap-nav-toggle:checked {
            ~ LABEL[for="leap-nav-toggle"] > SPAN {
                &:nth-child(1) {
                    transform: rotate(-45deg);
                }
                &:nth-child(2) {
                    transform: scale(0);
                }
                &:nth-child(3) {
                    transform: rotate(45deg);
                }
            }
            ~ .leap-nav {
                transform: translateX(0);
            }
        }
    }

    .leap-logo {
        position: sticky;
        z-index: 2;
        top: 0;
    }

    .leap-nav {
        overflow: auto;
        display: flex;
        flex-direction: column;
        background-color: var(--leap-nav-background);
        color: var(--leap-nav-color);
        height: 100%;

        .leap-nav-group {
            display: flex;
            flex-direction: column;
            height: 100%;
            line-height: var(--nav-item-height);
        }

        .leap-nav-item {
            position: relative;
            &.active {
                background-color: rgb(0 0 0 / .25);
                color: var(--leap-nav-color-active);
            }

            A,
            BUTTON {
                padding: 0 var(--spacing) 0 0;
                white-space: nowrap;
                overflow: hidden;
                text-decoration: none;
                text-overflow: ellipsis;
                color: inherit;
                display: block;
                cursor: pointer;
                &:focus {
                    border-radius: 6px;
                    outline-offset: -3px !important;
                }
            }

            BUTTON {
                font: inherit;
                border: 0 none;
                background: none;
                width: 100%;
                text-align: left;
                cursor: pointer;
            }

            &:not(.active) A:hover,
            BUTTON:hover {
                background-color: rgb(255 255 255 / .06);
            }

            HR {
                border: 0 none;
                border-bottom: 1px solid rgb(255 255 255 / .15);
            }
            &:first-child HR {
                display: none;
            }
        }

        .leap-svg-icon {
            height: 1em;
            vertical-align: -0.1em;
            width: 50px;
            margin-right: 0;
        }

        .leap-nav-collapsable {
            > A {
                padding-right: calc(var(--spacing) + 12px);
                &::after {
                    content: "";
                    display: inline-block;
                    position: absolute;
                    right: var(--spacing);
                    top: 50%;
                    width: 0.5em;
                    height: 0.5em;
                    border-top: 2px solid currentColor;
                    border-right: 2px solid currentColor;
                    transform: translateY(-35%) rotate(45deg);
                    transition: transform 0.3s;
                    @media (max-width: 768px) {
                        margin-left: 12px;
                        position: relative;
                        vertical-align: -2px;
                    }
                }
            }
            &.leap-nav-collapsable-open {
                > A::after {
                    transform: translate(2px, -4px) rotate(135deg);
                }
            }
            > UL {
                position: absolute;
                background-color: var(--leap-nav-background);
                z-index: 1;
                width: 100%;
                A {
                    line-height: 2.5;
                    font-size: 0.9em;
                    padding-left: 50px;
                    &:hover {
                        color: white;
                    }
                }
            }
        }
    }
}

/* ==== INDEX ==== */
.leap-index {
    overflow: auto;
    position: absolute;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    left: 0;

    .leap-index-table {
        border-collapse: collapse;
        border-spacing: 0;
        display: table;
        width: 100%;
        LI {
            display: table-row-group;
        }
        .leap-index-header {
            color: var(--leap-index-header-color);
            display: table-row;
            position: sticky;
            z-index: 2;
            top: 0;
            background-color: var(--leap-index-header);
            .leap-index-column,
            TH {
                background-color: var(--leap-index-header);
                text-align: left;
                font-weight: 600;
                font-size: 0.9em;
                line-height: var(--nav-item-height);
                .leap-buttons {
                    padding-left: 0;
                    padding-right: 0;
                }
                .button-link:hover {
                    opacity: 0.5;
                    cursor: pointer;
                }
                .button-link:focus {
                    padding-left: 6px;
                    padding-right: 6px;
                    margin-left: -6px;
                    margin-right: -6px;
                    border-radius: 6px;
                    outline-offset: -3px;
                }
                &.order-desc .button-link::after,
                &.order-asc .button-link::after {
                    content: "";
                    display: inline-block;
                    border: 5px solid transparent;
                    opacity: 0.5;
                    margin-left: 0.2em;
                }
                &.order-asc .button-link::after {
                    border-top-color: white;
                    transform: translateY(30%);
                }
                &.order-desc .button-link::after {
                    border-bottom-color: white;
                    transform: translateY(-25%);
                }
                &:first-child {
                    position: sticky;
                    left: 0;
                }
            }
        }

        .leap-row-checkbox {
            display: inline-block;
            height: 1em;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            text-align: center;
            width: 100%;
            max-width: 5em;
            &.leap-row-checkbox-checked {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0,0,0,0.3)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
            }
        }

        .leap-index-row {
            display: table-row;
            background-color: var(--leap-index-row);
            .leap-index-column,
            TD {
                background-color: var(--leap-index-row);
                display: table-cell;
                color: var(--leap-index-row-color);
                box-shadow: inset rgb(255 255 255 / .35) 0 1px 0, inset var(--leap-tint-dark) 0 -1px 0;
                padding-top: 6px;
                padding-bottom: 6px;
                max-width: 30vw;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
            .leap-index-column:not(:first-child),
            TD:not(:first-child) {
                font-size: 0.8em;
            }
            .leap-index-column:first-child,
            TD:first-child {
                font-size: 0.95em;
                color: var(--leap-index-row-first-color);
                position: sticky;
                left: 0;
                max-width: 40vw;
            }
            &.leap-index-row-selected,
            &:hover {
                .leap-index-column,
                TD {
                    box-shadow: inset var(--leap-tint-dark) 0 -1px 0;
                }
                cursor: pointer;
            }
            &.leap-index-row-selected {
                .leap-index-column,
                TD {
                    background-color: var(--leap-index-row-selected);
                    color: white;
                }
            }
            &.leap-index-group {
                position: sticky;
                top: var(--nav-item-height);
                font-weight: 700;
                z-index: 1;
                cursor: default;
                .leap-index-column,
                TD {
                    background-color: var(--leap-grey) !important;
                    font-size: 1em;
                    color: var(--leap-index-row-first-color);
                    box-shadow: inset var(--leap-tint-dark) 0 1px 0, inset var(--leap-tint-dark) 0 -1px 0;
                }
            }
        }

        .leap-index-column,
        TH,
        TD {
            display: table-cell;
            white-space: nowrap;
            padding-left: calc(var(--spacing) / 2);
            padding-right: calc(var(--spacing) / 2);

            &:first-child {
                padding-left: var(--spacing);
            }

            &:last-child {
                padding-right: var(--spacing);
                width: 100%;
                @media (max-width: 512px) {
                    width: auto;
                }
            }
        }
    }

    .leap-index-treeview {
        display: block;
        LI {
            display: block;
        }
        .leap-index-row,
        .leap-index-header {
            display: flex;
        }
        .leap-index-row {
            box-shadow: inset rgb(255 255 255 / .35) 0 1px 0, inset var(--leap-tint-dark) 0 -1px 0;
            &.leap-index-row-selected {
                box-shadow: inset var(--leap-tint-dark) 0 -1px 0;
                background-color: var(--leap-index-row-selected);
            }
        }
        .leap-index-column {
            flex: 0 0 auto;
            &:last-child {
                width: auto;
            }
        }
        .leap-index-sort-handle {
            display: inline-block;
            position: absolute;
            left: 0;
            width: var(--spacing);
            top: 0;
            bottom: 0;
            color: rgb(0 0 0 / .2);
            text-align: center;
            .svg-icon {
                width: calc(var(--spacing) / 1.5);
                height: 100%;
                visibility: hidden;
            }
        }
        UL {
            padding-left: var(--spacing);
        }
    }

    .leap-index-row-inactive * {
        text-decoration: line-through;
        color: rgb(0 0 0 / .3) !important;
    }

    .leap-index-table {
        .sortable-ghost {
            box-shadow: inset var(--leap-blue-light) 0 0 0 2px;
            background-color: white;
            .leap-index-row {
                .leap-index-column {
                    color: rgb(0 0 0 / .4);
                }
                background-color: transparent;
            }
        }
    }

    .leap-index-filter {
        appearance: none;
        max-width: 50%;
        color: inherit;
        font: inherit;
        border: 0 none;
        background: transparent;
        opacity: 0.6;
        line-height: 2;
        font-size: 0.8em;
        padding: 0 5px;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        &:hover {
            background-color: var(--leap-blue-light);
        }
    }
}
BODY.sorting .leap-index {
    overflow-x: hidden;
}
BODY:not(.sorting) .leap-index-table .leap-index-row:hover {
    .svg-icon {
        visibility: visible;
    }
    .leap-index-sort-handle-group {
        background-color: var(--leap-blue-light);
        cursor: grab;
        color: white;
    }
    &.leap-index-row-selected {
        .leap-index-sort-handle-group {
            background-color: var(--leap-blue);
        }
    }
    &:not(.leap-index-row-selected) {
        background-color: var(--leap-index-row-hover);
        .leap-index-column,
        TD {
            background-color: var(--leap-index-row-hover);
        }
    }
}

/* ==== FORMS ==== */
.leap {
    .leap-error {
        float: right;
        color: var(--leap-color-error);
        margin-top: 0.1em;
        font-size: 0.9em;
        font-weight: 600;
    }

    .leap-notice-danger {
        border: 2px solid var(--leap-color-border-error);
        background-color: color-mix(in srgb, var(--leap-red) 5%, transparent);
        color: var(--leap-color-error);
        border-radius: var(--leap-radius);
        padding: calc(var(--spacing) / 2) var(--spacing);
        font-weight: 600;
        margin-top: var(--spacing);
        margin-bottom: var(--spacing);
    }

    .leap-fieldset {
        border: 0 none;

        H3 {
            font-size: 1.2em;
            font-weight: 300;
        }

        /* :is(LABEL, DIV) — a field whose slot holds only buttons renders as a DIV,
           because a <label> forwards its hover to its first labelable descendant. */
        :is(LABEL, DIV).leap-label {
            display: block;

            &:not(:first-child) {
                margin-top: calc(var(--spacing) / 1.5);
            }

            .leap-label-sub {
                display: block;
                color: rgb(0 0 0 / .5);
                font-weight: 500;
            }
            SPAN.leap-label {
                color: rgb(0 0 0 / .5);
                display: inline-block;
                margin-bottom: calc(var(--spacing) / 4);
            }
            &:has([type="radio"]),
            &:has([type="checkbox"]) {
                display: flex;
                align-items: center;
                margin-bottom: calc(var(--spacing) / 4);
                INPUT {
                    flex-shrink: 0;
                }
                SPAN.leap-label {
                    order: 2;
                    margin-bottom: 0;
                }
                .leap-error {
                    flex-basis: 100%;
                    text-align: right;
                    order: 3;
                }
            }
        }

        .leap-fieldset:not(:first-child) {
            margin-top: 0;
        }

        .leap-fieldset[role="group"] {
            display: flex;
            flex-wrap: wrap;
            gap: 0 var(--spacing);
            > .leap-label {
                margin-top: 0;
            }
        }
    }

    .leap-fieldset:not(:first-child) {
        margin-top: var(--spacing);
    }

    .leap-fieldset-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: calc(var(--spacing) / 2);
        margin-top: calc(var(--spacing) / 2);
    }

    /* Outside the login dialog .leap-button relies on --leap-button-bg being
       swapped to a solid color, since the ambient background here is light. */
    .leap-editor .leap-fieldset-buttons {
        justify-content: flex-start;

        .leap-button {
            --leap-button-bg: var(--leap-header-background-buttons);
            --leap-button-bg-hover: var(--leap-button-hover-background);
        }
    }

    .leap-form {
        padding: calc(var(--spacing) / 2) var(--spacing);
    }

    .leap-passkeys {
        list-style: none;
        margin: calc(var(--spacing) / 2) 0 0;
        padding: 0;

        LI {
            display: flex;
            align-items: center;
            gap: calc(var(--spacing) / 2);
            padding: calc(var(--spacing) / 3) calc(var(--spacing) / 2);
            background-color: var(--leap-tint-dark);
            border-radius: var(--leap-radius);

            &:not(:first-child) {
                margin-top: calc(var(--spacing) / 4);
            }

            SPAN:nth-child(2) {
                margin-right: auto;
                color: rgb(0 0 0 / .5);
                font-size: 0.9em;
            }

            /* Same reasoning as .leap-editor .leap-fieldset-buttons above:
               this list sits on a light background, so .leap-button needs
               a solid bg via token swap instead of relying on the default. */
            .leap-button {
                flex-shrink: 0;
                --leap-button-bg: var(--leap-header-background-buttons);
                --leap-button-bg-hover: var(--leap-red);
            }
        }
    }

    .leap-buttons {
        background-color: var(--leap-header-background-buttons);
        height: var(--nav-item-height);
        display: flex;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 9;
        gap: calc(var(--spacing) / 2.5);
        padding: calc(var(--spacing) / 2.5) var(--spacing) calc(var(--spacing) / 2.5);

        .leap-editing-id {
            color: white;
            opacity: 0.6;
            flex-basis: 100%;
            text-align: right;
            @media (max-width: 512px) {
                flex-basis: auto;
            }
        }
    }

    .leap-button-add {
        display: inline-block;
        text-align: center;
        border-radius: var(--leap-radius);
        border: 0 none;
        background-color: transparent;
        opacity: 0.5;
        vertical-align: middle;
        .svg-icon {
            height: 16px;
            width: 16px;
        }
        &:hover {
            opacity: 1;
            cursor: pointer;
        }
        &:has(+ .leap-button-add) {
            padding-right: 0px;
        }
        + .leap-button-add {
            margin-left: -2px;
            padding-left: 0px;
        }
    }
    /* Two independent actions side by side (browse / generate). The rule above pulls
       adjacent buttons together with a negative margin so a pair reads as one control
       — right for the sections toggle, wrong for two unrelated actions. This spaces
       them on gap alone, with no collapsing whitespace in between. */
    .leap-button-add-group {
        display: inline-flex;
        align-items: center;
        gap: calc(var(--spacing) / 4);
        vertical-align: middle;
        .leap-button-add {
            padding-inline: 2px;
            &:has(+ .leap-button-add),
            + .leap-button-add {
                margin-left: 0;
                padding-inline: 2px;
            }
        }
    }
    .leap-files-sortable {
        cursor: grab;
    }
    .leap-files LI {
        border-radius: var(--leap-radius);
        padding: 1px 5px;
        &.sortable-ghost {
            color: rgb(0 0 0 / 0);
            background-color: white;
            outline: var(--leap-blue-light) solid 2px;
            IMG,
            VIDEO,
            AUDIO {
                opacity: 0;
            }
        }
        BUTTON,
        A {
            vertical-align: -1px;
            padding: 0;
            text-decoration: none;
            color: var(--leap-blue-light);
            opacity: 0;
            border: 0 none;
            background-color: transparent;
        }
        BUTTON {
            color: var(--leap-red);
        }
        .svg-icon {
            height: 16px;
        }
    }
    .leap-files-media {
        display: flex;
        gap: 5px;
        LI {
            padding: 0;
            position: relative;
            VIDEO,
            AUDIO,
            IMG {
                display: block;
                height: 75px;
                width: auto;
            }
            BUTTON {
                top: 5px;
                right: 5px;
                background-color: var(--leap-red);
            }
            A {
                font-size: 14px;
                bottom: 5px;
                left: 50%;
                transform: translateX(-50%);
                z-index: 10;
                white-space: nowrap;
                background-color: var(--leap-blue-dark);
                display: none;
                .svg-icon {
                    height: 12px;
                }
            }
            &:hover A {
                display: block;
            }
            A,
            BUTTON {
                position: absolute;
                color: white;
                padding: 2px 5px;
                border-radius: var(--leap-radius);
            }
        }
    }

    .leap-pivot {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--spacing) / 3);
        &[aria-invalid="true"] {
            border-width: 1px;
            border-style: solid;
            border-radius: var(--leap-radius);
            padding: 2px;
            margin: -3px;
        }
        LABEL {
            position: relative;
            border: 0 none;
            font: inherit;
            background-color: rgb(0 0 0 / .1);
            color: rgb(0 0 0 / .6);
            padding: calc(var(--spacing) / 4) calc(var(--spacing) / 2);
            border-radius: var(--leap-radius);
            font-size: 0.9em;
            &:hover {
                opacity: 0.8;
            }
            &:has(INPUT[type="checkbox"]:checked) {
                color: white;
                background-color: var(--leap-blue);
            }
            &:has(INPUT[type="checkbox"]) {
                INPUT[type="checkbox"] {
                    cursor: pointer;
                    appearance: none;
                    display: block;
                    border-radius: var(--leap-radius);
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    margin: 0;
                    padding: 0;
                }
            }
        }
    }

    .tox-tinymce {
        border: var(--leap-border);
        border-radius: var(--leap-radius);
        overflow: hidden;
        background: rgb(255 255 255 / .5);
        .tox-editor-container {
            .tox-editor-header {
                border-radius: 3px 3px 0 0;
                overflow: hidden;
                background-color: transparent;
                .tox-toolbar__primary {
                    background: var(--leap-grey-light);
                }
            }
        }
        .tox-toolbar-overlord {
            background-color: var(--leap-grey-light);
        }
        .tox-edit-area::before {
            outline: 1px solid rgb(0 0 0 / .4);
            border-style: none;
            border-radius: 0;
        }
    }
    .tox:not(.tox-tinymce-inline) .tox-editor-header {
        padding: 0 !important;
        border-bottom: 1px solid rgb(0 0 0 / .2);
        box-shadow: none;
    }
    .tox .tox-toolbar__group {
        padding: 0 5px;
    }

    .leap-button,
    .leap-input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
    .leap-select,
    .leap-textarea {
        font: inherit;
        display: block;
        border: var(--leap-border);
        color: black;
        font-weight: 400;
        background: none;
        border-radius: var(--leap-radius);
        padding: 4px 6px;
        background-color: var(--leap-field-bg);
        &[disabled] {
            opacity: 0.33;
        }
    }

    .leap-button {
        --leap-button-bg: transparent;
        --leap-button-bg-hover: var(--leap-line-light);
        line-height: 1.3;
        border-color: var(--leap-line-light);
        background-color: var(--leap-button-bg);
        font-size: var(--font-size-button);
        @media (max-width: 512px) {
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        color: white;
        padding-left: calc(var(--spacing) / 2);
        padding-right: calc(var(--spacing) / 2);
        text-decoration: none;
        white-space: nowrap;

        &.primary {
            --leap-button-bg: rgb(255 255 255 / .33);
            border-color: transparent;

            &:hover:not([disabled]) {
                background-color: var(--leap-green);
            }
        }

        &.secondary:hover:not([disabled]) {
            background-color: var(--leap-red);
            border-color: transparent;
        }

        &:hover:not([disabled]) {
            background-color: var(--leap-button-bg-hover);
            border-color: transparent;
            cursor: pointer;
        }

        .leap-svg-icon {
            margin-right: 0.25em;
            height: 1em;
            vertical-align: -0.15em;
        }
    }

    .leap-input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
    .leap-select,
    .leap-textarea {
        width: 100%;
    }

    .leap-select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        padding-left: 20px;
        background-repeat: no-repeat;
        background-position: 2px 55%;
        background-size: 18px;
    }

    .leap-input::-webkit-datetime-edit {
        line-height: 1;
        padding: 0;
        margin-bottom: -2px;
    }

    .leap-textarea {
        resize: vertical;
    }

    /* Checkbox / Switch related */
    .leap-label:has([type="checkbox"], [type="radio"]) {
        cursor: pointer;
    }

    .leap-input[type="radio"] {
        background: var(--leap-field-bg);
        height: 1em;
        width: 1em;
        border-radius: 1em;
        border: var(--leap-border);
        box-sizing: content-box;
        position: relative;
        margin-right: 5px;
        &::before {
            content: "";
            display: block;
            position: absolute;
            width: 1em;
            height: 1em;
            background-color: white;
            border-radius: 100%;
            transition: transform 0.2s;
            transform: scale(0);
        }
        &:checked {
            background-color: var(--leap-blue);
            border-color: transparent;
            &::before {
                transform: scale(0.5);
            }
        }
    }

    .leap-input[type="checkbox"]:not([role="switch"]) {
        background: var(--leap-field-bg);
        height: 1em;
        width: 1em;
        border-radius: var(--leap-radius);
        border: var(--leap-border);
        box-sizing: content-box;
        position: relative;
        margin-right: 5px;
        &:checked {
            background-color: var(--leap-blue);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: 60% 55%;
            background-size: calc(1em / 1.2);
            border-color: transparent;
        }
    }

    .leap-input[role="switch"] {
        background: rgb(0 0 0 / .2);
        height: 1em;
        width: 1.75em;
        border-radius: 1em;
        border: 2px solid transparent;
        box-sizing: content-box;
        display: inline-block;
        position: relative;
        margin-right: 5px;
        &::before {
            content: "";
            display: block;
            position: absolute;
            width: 1em;
            height: 1em;
            background-color: rgb(255 255 255 / 1);
            border-radius: 100%;
            margin: 0px;
            left: 0;
            transition: left 0.2s;
        }
        &:checked {
            background-color: var(--leap-blue);
            &::before {
                background: white;
                left: 0.75em;
            }
        }
    }

    .leap-input[type="checkbox"],
    .leap-input[type="radio"] {
        font-size: inherit;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        transition: background-color 0.2s;
        cursor: pointer;
        &[aria-invalid="true"] {
            background-color: var(--leap-color-border-error);
        }
    }

    .leap-textarea[aria-invalid="true"],
    .leap-select[aria-invalid="true"],
    .leap-pivot[aria-invalid="true"],
    .leap-input[aria-invalid="true"] {
        border-color: var(--leap-color-border-error);
        background-color: color-mix(in srgb, var(--leap-red) 5%, transparent);
    }

    .leap-input:not([type="checkbox"], [type="radio"])[aria-invalid="true"] {
        padding-right: 2em;
        background-size: 1.5em;
        background-position: right 0.5em center;
        background-repeat: no-repeat;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(200,79,72,.8)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); /* Credits to PicoCSS. */
    }

    .leap-json-readonly {
        font-size: 0.9em;
        .leap-json-readonly-depth-2 TD:first-child {
            padding-left: 1em;
        }
        .leap-json-readonly-depth-3 TD:first-child {
            padding-left: 2em;
        }
        TH {
            text-align: left;
            font-weight: 500;
            opacity: 0.5;
        }
        TD {
            opacity: 0.4;
            padding-right: 0.4em;
        }
        TD:last-child {
            opacity: 0.7;
        }
    }

    .leap-table {
        overflow: scroll;
        position: absolute;
        padding: calc(var(--spacing) / 2) var(--spacing);
        inset: var(--nav-item-height) 0 0;

        .leap-table-row-disabled {
            opacity: 0.4;
        }
        TD {
            border: 1px solid #ccc;
            padding: 0.05em 0.25em;
        }
        .error {
            background-color: var(--leap-red);
            color: white;
        }
    }
}

BODY:not(.sorting) .leap-files LI {
    &:focus-within,
    &:hover {
        background-color: rgb(255 255 255 / .8);
        BUTTON,
        A {
            opacity: 0.6;
            &:hover {
                cursor: pointer;
                opacity: 1;
            }
        }
    }
}

/* ==== LOGIN ==== */
.leap > .leap-login {
    flex: 1 1 100%;
    background-color: var(--leap-login-background);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;

    .leap-login-dialog {
        width: 380px;
        max-width: 90%;
        &:has(.login-image) {
            width: 760px;
        }
    }

    .leap-error {
        color: var(--leap-login-color-error);
    }

    .leap-input:not([type="checkbox"], [type="radio"]) {
        background-color: transparent;
        color: white;
        border-color: rgb(255 255 255 / .25);
        &[aria-invalid="true"] {
            border-color: var(--leap-login-color-border-error);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,102,102,.8)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); /* Credits to PicoCSS. */
        }
    }
    .leap-input[role="switch"]:checked {
        background-color: var(--leap-blue-light);
    }
    .leap-form {
        padding: var(--spacing);
    }

    .leap-button {
        padding: calc(var(--spacing) / 2) var(--spacing);
    }

    .leap-fieldset-buttons {
        align-items: center;

        A {
            color: white;
            font-size: var(--font-size-button);
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    .leap-fieldset :is(LABEL, DIV).leap-label SPAN.leap-label {
        color: white;
    }

    .login-image {
        position: relative;
        overflow: hidden;

        img {
            transform: scale(1.001);
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform-origin: 50% 30%;
            animation: login-image-zoom 50s ease-out forwards;
        }
    }

    @media (max-width: 576px) {
        .login-image {
            display: none;
        }
    }
}

@keyframes login-image-zoom {
    0% {
        transform: scale(1.001);
    }

    100% {
        transform: scale(1.5);
    }
}

.leap-login-2fa .leap-login-dialog {
    width: 400px;
}

.leap-login-dialog {
    display: flex;
    background-color: var(--leap-login-dialog-background);
    padding: 0;
    color: var(--leap-login-dialog-color);

    > DIV {
        flex: 1 1 50%;
    }

    border: 0 none;

    .form-message {
        margin: 0 var(--spacing);
        padding: calc(var(--spacing) / 2) var(--spacing);
        border-radius: var(--leap-radius);
        background-color: var(--leap-line-light);
        font-size: var(--font-size-button);
    }
}

/* ==== TOASTS ==== */
.toasts {
    position: fixed;
    z-index: 200;
    right: 20px;
    top: var(--header-height);

    .toast {
        animation: toast 5s both;
        width: 200px;
        background-color: var(--leap-green);
        color: white;
        overflow: hidden;
        border-radius: 4px;
        box-shadow: rgb(0 0 0 / .2) 0 4px 6px;
        display: flex;
        align-items: center;
        font-size: 13px;
        font-weight: 500;
        margin-bottom: 0;
        position: relative;
        min-height: 60px;
        word-break: break-word;

        .svg {
            display: block;
            width: 40px;
            height: 40px;
            margin-right: 10px;
        }
    }

    .toast-error {
        background-color: var(--leap-red);
    }

    .toast-alert {
        background-color: var(--leap-orange);
    }

    .toast-close {
        position: absolute;
        right: 0;
        top: 0;
        padding: 3px 8px;
        cursor: pointer;
        font-size: 16px;
    }
}

@keyframes toast {
    0% {
        padding: 10px 15px;
        margin-top: 10px;
    }

    80% {
        opacity: 1;
    }

    90% {
        opacity: 0;
        margin-top: 10px;
        padding: 10px 15px;
        height: auto;
        min-height: 60px;
    }

    100% {
        opacity: 0;
        height: 0;
        margin-top: 0;
        padding: 0;
        min-height: 0;
    }
}
.leap {
    .leap-editor {
        background-color: var(--leap-grey-light);
        box-shadow: inset var(--leap-tint-dark) 1px 0 0;
        position: absolute;
        overflow: auto;
        width: 100%;
        top: var(--header-height);
        bottom: 0;
        right: 0;
        z-index: 10;
        transition: transform 0.4s;
    }

    .leap-index ~ .leap-editor {
        width: 60vw;
        transform: translateX(100%);
        @media (max-width: 1024px) {
            width: calc(100vw - 300px);
        }
        @media (max-width: 768px) {
            width: calc(100vw - 50px);
        }
    }

    .leap-editor-open {
        > .leap-index {
            transition: right 0.4s;
            right: 60vw;
            @media (max-width: 1024px) {
                right: calc(100vw - 300px);
            }
        }
        .leap-editor {
            transform: translateX(0);
        }
    }

    .leap-editor-sections {
        .leap-editor-section {
            background-color: rgb(0 0 0 / .025);
            border: 1px solid rgb(0 0 0 / .1);
            border-radius: var(--leap-radius);
            margin-bottom: var(--spacing);
            padding: calc(var(--spacing) / 2);
            position: relative;
            > BUTTON {
                position: absolute;
                background-color: rgb(0 0 0 / .15);
                border: 0 none;
                margin: 0;
                right: calc(var(--spacing) / 2);
                top: calc(var(--spacing) / 2);
                opacity: 0;
                &:focus {
                    opacity: 1;
                }
                cursor: pointer;
                .svg-icon {
                    color: white;
                    height: 16px;
                }
            }
            > LABEL.leap-label:first-child {
                > SPAN {
                    color: rgb(0 0 0 / .7);
                    font-weight: 600;
                }
                cursor: grab;
                .svg-icon {
                    height: 1em;
                    opacity: 0;
                    vertical-align: -0.1em;
                }
            }
            &.sortable-ghost {
                background: white;
                box-shadow: inset var(--leap-blue-light) 0 0 0 2px;
            }
        }
    }

    .leap-dialog {
        border: 0 none;
        box-shadow: rgb(0 0 0 / .5) 1px 0 10px;
        background-color: var(--leap-grey-light);
        padding: 0;
        &::backdrop {
            background-color: rgb(0 0 0 / .7);
        }
    }
}
BODY.sorting {
    .tox {
        pointer-events: none;
    }
}
BODY:not(.sorting) .leap-editor-sections .leap-editor-section {
    &:has(> LABEL.leap-label:first-child:hover) {
        background-color: var(--leap-tint-dark);
        LABEL.leap-label .svg-icon {
            opacity: 0.6;
        }
    }
    &:hover {
        > LABEL.leap-label:first-child .svg-icon {
            opacity: 0.2;
        }
        > BUTTON {
            opacity: 1;
        }
    }
}

/* Field hint: (i) icon after the label with a hover/focus tooltip
   Keep the label text and icon centred together, regardless of field type */
.leap .leap-fieldset :is(LABEL, DIV).leap-label SPAN.leap-label:has(> .leap-hint),
.leap .leap-fieldset :is(LABEL, DIV).leap-label SPAN.leap-label:has(> .leap-translatable) {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}
.leap-translatable {
    display: inline-flex;
    align-items: center;
    color: rgb(0 0 0 / .5);
    background: rgb(0 0 0 / .08);
    border-radius: var(--leap-radius);
    padding: 0.1em 0.4em;
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: help;
}
.leap-translatable.leap-hint:not(.leap-translate) {
    &:hover,
    &:focus,
    &:focus-visible {
        color: rgb(0 0 0 / .5); /* same as base .leap-translatable color — cancel .leap-hint's hover highlight */
        outline: none; /* cancel the global .leap :focus blue ring — this badge isn't interactive, tooltip is the only feedback */
    }
}
.leap-translatable.leap-translate {
    position: relative;
    cursor: pointer;
    &:hover,
    &:focus-visible {
        color: rgb(0 0 0 / .8);
        background: rgb(0 0 0 / .12);
    }
    &.leap-translating {
        animation: leap-translate-pulse 0.8s ease-in-out infinite;
    }
}
.leap-translate-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    min-width: 150px;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: normal;
    text-align: left;
    background: white;
    border: 1px solid rgb(0 0 0 / .15);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgb(0 0 0 / .18);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    .leap-translate-menu-title {
        font-weight: 600;
        opacity: 0.55;
        padding: 4px 8px 2px;
    }
    button {
        font: inherit;
        text-align: left;
        border: none;
        background: none;
        cursor: pointer;
        padding: 6px 8px;
        border-radius: 4px;
        color: var(--leap-blue-dark);
        &:hover:not([disabled]) {
            background: var(--leap-grey-light);
        }
        &[disabled] {
            opacity: 0.5;
            cursor: default;
        }
    }
}
.leap-translate-all {
    display: inline-flex;
}
.leap-translate-scope {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    cursor: pointer;
}
@keyframes leap-translate-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}
.leap-hint {
    position: relative;
    display: inline-flex;
    color: rgb(0 0 0 / .35);
    cursor: help;
    font-weight: 400;
    svg {
        display: block;
        width: 1em;
        height: 1em;
    }
    &:hover,
    &:focus-visible {
        color: rgb(0 0 0 / .6);
    }
    .leap-hint-tooltip {
        position: absolute;
        bottom: calc(100% + 8px);
        left: -0.35em;
        width: max-content;
        max-width: 260px;
        padding: 0.5em 0.7em;
        border-radius: 5px;
        background: #2b2b2b;
        color: #fff;
        font-size: 0.8rem;
        line-height: 1.4;
        white-space: normal;
        text-align: left;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s;
        z-index: 20;
        &::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 0.85em;
            transform: translateX(-50%);
            border: 5px solid transparent;
            border-top-color: #2b2b2b;
        }
    }
    &:hover .leap-hint-tooltip,
    &:focus-visible .leap-hint-tooltip {
        opacity: 1;
    }
}

/* Multilingual editor: locale tabs
   Locale switcher inside the sticky button bar */
.leap-buttons {
    .leap-locale-tabs {
        display: inline-flex;
        gap: 2px;

        /* Active tab keeps the same look as hover (no separate "selected" color),
           so hovering it is a no-op instead of implying something new happens. */
        .leap-editor & .leap-button.active,
        .leap-editor & .leap-button.active:hover:not([disabled]) {
            background-color: var(--leap-line-light);
            border-color: transparent;
            cursor: default;
        }
    }
    select.leap-locale-select {
        width: auto;
        min-width: 110px;
        line-height: 1.3;
        border-color: var(--leap-line-light);
        background-color: transparent;
        color: white;
        font-size: var(--font-size-button);
        padding: 4px 6px 4px 20px;
        white-space: nowrap;
        OPTION {
            color: black;
        }
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        &:hover:not([disabled]) {
            background-color: var(--leap-line-light);
            border-color: transparent;
            cursor: pointer;
        }
    }
}

/* Lazy rich-text: rendered-HTML preview shown until clicked to edit (config
   leap.tinymce.lazy / lazy_sections). Styled like a .leap-textarea so it reads
   as an editable field, with a pencil affordance on hover/focus. */
.leap .leap-richtext-preview {
    position: relative;
    font: inherit;
    color: black;
    border: var(--leap-border);
    border-radius: var(--leap-radius);
    padding: 4px 6px;
    min-height: 4em;
    background-color: var(--leap-field-bg);
    cursor: pointer;
    transition: border-color 0.15s;

    /* Rendered HTML readability */
    > * + * {
        margin-top: 0.5em;
    }
    h2,
    h3,
    h4 {
        font-weight: 600;
        line-height: 1.2;
    }
    ul {
        list-style: disc;
        padding-left: 1.4em;
    }
    ol {
        list-style: decimal;
        padding-left: 1.4em;
    }

    /* Pencil affordance, revealed on hover/focus */
    &::after {
        content: "";
        position: absolute;
        top: 6px;
        right: 6px;
        width: 16px;
        height: 16px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s;
        background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E");
    }

    &:hover,
    &:focus-visible {
        border-color: var(--leap-blue-light);
        &::after {
            opacity: 0.6;
        }
    }

    /* Empty field: show the "click to edit" hint */
    &:empty::before {
        content: attr(data-empty-hint);
        color: rgb(0 0 0 / .4);
    }
}

/* "The title changed, update the slug?" prompt, inline on the slug label row */
.leap-slug-suggestion {
    display: inline-flex;
    align-items: center;
    padding-left: calc(var(--spacing) / 3);
    border-radius: var(--leap-radius);
    background: rgb(76 175 80 / .15);
    font-size: 0.8em;
    font-weight: 400;
    color: rgb(0 0 0 / .65);
    white-space: nowrap;

    [role="button"] {
        cursor: pointer;
        border-radius: var(--leap-radius);
    }

    .leap-slug-suggestion-apply {
        padding: 2px 8px;
        font-weight: 500;
        color: white;
        margin-left: calc(var(--spacing) / 3);
        background: var(--leap-blue-light);
        transition: background 0.15s;

        &:hover,
        &:focus-visible {
            background: var(--leap-blue);
        }
    }

    .leap-slug-suggestion-dismiss {
        padding: 0 calc(var(--spacing) / 2);
        font-size: 1.3em;
        line-height: 1;
        color: rgb(0 0 0 / .4);

        &:hover,
        &:focus-visible {
            color: rgb(0 0 0 / .75);
        }
    }
}
/* Top level on purpose: CSS nesting only allows conditional at-rules (@media,
   @supports, @container, …) inside a style rule, so a nested @keyframes is
   dropped and every animation naming it silently does nothing. */
@keyframes leap-alt-spin {
    to {
        transform: rotate(360deg);
    }
}

/* The enlarged AI preview. Top level, not nested under .leap-modal: it sits outside
   the dialog so it can cover the whole screen, above the modal's own z-index. */
.leap-ai-image-zoom {
    position: fixed;
    inset: 0;
    z-index: 1700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing);
    background-color: rgb(0 0 0 / .85);
    cursor: zoom-out;
    img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 6px;
    }
}

@keyframes uploadingdone {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        display: none;
    }
}

.leap-filemanager {
    .leap-header {
        H2 {
            width: 100%;
        }
    }
    .leap-index {
        display: flex;
        .leap-index-table {
            flex: 0 0 auto;
            overflow-x: visible;
            overflow-y: auto;
            display: flex;
            background-color: var(--leap-grey-light);
            position: relative;
            &::after {
                content: "";
                position: absolute;
                inset: 0 0 0 auto;
                width: 1px;
                background-color: var(--leap-tint-dark);
            }
            align-items: start;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
            width: auto;
            TH:first-child,
            TD:first-child {
                width: 100%;
            }
            &:not(:last-child) {
                TD:not(:first-child) {
                    display: none;
                }
                TD:first-child {
                    padding-right: var(--spacing);
                }
            }
            .leap-index-header {
                width: 100%;
                line-height: var(--nav-item-height);
                .svg-icon {
                    color: white;
                }
            }
            .leap-filemanager-parent {
                display: none;
            }
            .leap-index-row:not(.leap-index-row-selected) {
                TD {
                    background-color: transparent;
                }
            }
            &:not(:last-of-type) {
                .leap-button {
                    SPAN {
                        display: none;
                    }
                }
            }
            INPUT[type="file"] {
                display: none;
            }
        }
        @media (max-width: 512px) {
            .leap-index-table {
                flex-basis: 100%;
                > * {
                    flex-basis: 100%;
                }
                .leap-filemanager-parent {
                    display: table-row;
                }
                &:not(:last-child) {
                    display: none;
                }
            }
        }
        IMG[loading="lazy"] {
            position: absolute;
            display: inline-block;
            object-fit: contain;
            height: 80%;
            top: 10%;
            width: 1.5em;
            margin-left: -0.25em;
        }
        IMG + .svg-icon {
            visibility: hidden;
        }
        .svg-icon {
            height: 1em;
            width: 1.3em;
            margin-left: -0.15em;
            color: var(--leap-blue);
            vertical-align: -1px;
        }
        &.leap-index-dropzone .leap-index-table:last-child,
        &.leap-index-dropzone .leap-index-table:last-child TR {
            background-color: color-mix(in srgb, var(--leap-blue-light) 40%, transparent);
        }
    }
    .leap-filemanager-uploading {
        position: relative;
        cursor: default !important;
        PROGRESS {
            display: block;
            width: 100%;
        }
    }
    .leap-filemanager-uploading-error {
        cursor: pointer !important;
        TD {
            background-color: color-mix(in srgb, var(--leap-red) 50%, transparent) !important;
        }
        PROGRESS {
            display: none;
        }
    }
    .leap-filemanager-uploading-progress {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        background-color: color-mix(in srgb, var(--leap-green) 40%, transparent);
    }
    .leap-filemanager-uploading-done:not(.leap-filemanager-uploading-error) {
        animation: uploadingdone 0.5s forwards 1s;
        TD {
            background-color: color-mix(in srgb, var(--leap-green) 50%, transparent) !important;
        }
    }
    .leap-index-table.leap-index-gridview {
        flex: 1 0 auto;
        max-width: min(500px, calc(100vw - 50px));
        .leap-index-grid-row {
            width: 100%;
            TD {
                padding: 0;
                width: 100%;
            }
        }
        .leap-index-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--spacing);
            padding: var(--spacing);
            width: 100%;
            .leap-index-grid-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: calc(var(--spacing) / 2);
                padding: calc(var(--spacing) / 2);
                border-radius: 6px;
                cursor: pointer;
                overflow: hidden;
                text-align: center;
                &:hover {
                    background-color: var(--leap-tint-dark);
                }
                &.leap-index-row-selected {
                    background-color: color-mix(in srgb, var(--leap-blue-light) 25%, transparent);
                }
                .leap-index-grid-thumbnail {
                    width: 100%;
                    aspect-ratio: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    position: relative;
                    IMG {
                        position: static;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        display: block;
                        border-radius: var(--leap-radius);
                        margin: 0;
                    }
                    .svg-icon {
                        width: 3em;
                        height: 3em;
                        color: var(--leap-blue);
                    }
                }
                SPAN {
                    font-size: 0.75em;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 100%;
                    display: block;
                }
                &.leap-index-grid-folder .leap-index-grid-thumbnail .svg-icon {
                    color: var(--leap-blue-light);
                }
            }
        }
    }
    .leap-filemanager-selected {
        flex: 1 1 100%;
        min-width: 50%;
        padding-bottom: var(--spacing);
        gap: var(--spacing);
        background-color: white;
        display: flex;
        flex-direction: column;
        position: relative;
        .leap-buttons {
            flex: 0 0 auto;
        }
        .leap-filemanager-preview {
            margin: 0 var(--spacing);
            flex: 1 1 100%;
            position: relative;
            order: 2;
            .leap-filemanager-preview-items {
                position: absolute;
                width: 100%;
                height: 100%;
                display: grid;
                row-gap: var(--spacing);
                column-gap: var(--spacing);
                .leap-filemanager-preview-item {
                    position: relative;
                    flex: 1 1 auto;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    VIDEO,
                    IMG {
                        max-width: 100%;
                        max-height: 100%;
                        display: block;
                        border: 1px solid white;
                        &:hover {
                            background: repeating-conic-gradient(#bbb 0 25%, #888 0 50%) 50% / 20px 20px;
                            background-position: 0 0;
                            border-color: #ccc;
                        }
                    }
                    A {
                        text-decoration: none;
                        color: inherit;
                        display: block;
                        max-width: 100%;
                        SPAN {
                            font-size: 0.85em;
                            overflow: hidden;
                            max-width: 100%;
                            max-height: 100%;
                            display: block;
                            padding: var(--spacing);
                            background-color: var(--leap-grey-light);
                            border-radius: 8px;
                            position: absolute;
                            text-align: center;
                            word-wrap: break-word;
                            left: 50%;
                            top: 60%;
                            transform: translate(-50%, -50%);
                            .svg-icon {
                                height: 1.5em;
                                width: 1.5em;
                                vertical-align: -0.35em;
                                margin-right: 0.5em;
                            }
                            &:hover {
                                color: white;
                                background-color: var(--leap-blue-light);
                                opacity: 1 !important;
                                .svg-icon {
                                    color: inherit;
                                }
                            }
                        }
                    }
                    &:not(:hover) VIDEO + A,
                    &:not(:hover) IMG + A,
                    &:not(:hover) .leap-image-edit-container + A {
                        opacity: 0;
                    }
                    .leap-image-edit-container {
                        position: relative;
                        display: inline-flex;
                        flex-direction: column;
                        align-items: flex-start;
                        align-self: center;
                        .leap-focus-action-btn {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 26px;
                            height: 26px;
                            background: rgb(0 0 0 / .55);
                            border: none;
                            border-radius: 4px;
                            cursor: pointer;
                            padding: 0;
                            .svg-icon {
                                width: 14px;
                                height: 14px;
                                color: white;
                                margin: 0;
                                vertical-align: middle;
                            }
                            &.leap-focus-clear-btn {
                                position: relative;
                                &::after {
                                    content: "";
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    width: 18px;
                                    height: 2px;
                                    background: #ff4444;
                                    transform: translate(-50%, -50%) rotate(-45deg);
                                    border-radius: 1px;
                                    pointer-events: none;
                                }
                            }
                            .leap-icon-stack {
                                position: relative;
                                display: inline-block;
                                width: 14px;
                                height: 14px;
                                line-height: 0;
                                vertical-align: middle;
                                SVG {
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    width: 14px;
                                    height: 14px;
                                    color: white;
                                }
                            }
                            &:hover,
                            &.active {
                                background: rgb(0 170 0 / .8);
                            }
                        }
                        &:hover .leap-focus-actions,
                        &:focus-within .leap-focus-actions {
                            opacity: 1;
                        }
                        .leap-focus-actions {
                            position: absolute;
                            top: 6px;
                            left: 6px;
                            display: flex;
                            flex-wrap: wrap;
                            gap: 4px;
                            opacity: 0;
                            transition: opacity 0.15s;
                            pointer-events: none;
                            .leap-focus-action-btn {
                                pointer-events: auto;
                            }
                        }
                    }
                    .leap-focus-wrapper {
                        position: relative;
                        display: inline-block;
                        line-height: 0;
                        max-width: 100%;
                        IMG {
                            max-height: 65vh;
                        }
                        &.leap-focus-selecting {
                            cursor: crosshair;
                        }
                        &.leap-crop-mode {
                            cursor: crosshair;
                            user-select: none;
                        }
                        .leap-crop-rect {
                            position: absolute;
                            border: 2px dashed white;
                            outline: 1px solid rgb(0 0 0 / .5);
                            pointer-events: none;
                            box-sizing: border-box;
                        }
                        .leap-focus-point {
                            position: absolute;
                            transform: translate(-50%, -50%);
                            pointer-events: none;
                            line-height: 0;
                            .svg-icon {
                                width: 20px;
                                height: 20px;
                                color: #00dd00;
                                filter: drop-shadow(0 0 4px rgb(255 255 255 / .6));
                            }
                        }
                    }
                }
            }
        }
        .leap-filemanager-stats {
            display: flex;
            align-items: center;
            flex-direction: column;
            H3 {
                font-size: 1.1em;
                font-weight: bold;
                padding: 0 var(--spacing);
                width: 100%;
                text-align: center;
                .leap-input {
                    text-align: center;
                }
            }
            .leap-buttons {
                background: none;
                padding: 0;
                justify-content: center;
                /* On a white ambient background: give .leap-button a solid bg
                   via token swap, same reasoning as forms.css. */
                .leap-button {
                    --leap-button-bg: var(--leap-blue-light);
                    --leap-button-bg-hover: var(--leap-blue);
                }
            }
            TABLE {
                font-size: 0.85em;
                line-height: 1.5;
                border-spacing: 0.5em 0;
                border-collapse: separate;
                TD[align="right"] {
                    font-weight: 600;
                }
            }
        }
    }
}

.leap-filebrowser {
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0 0 0 / .7);
    z-index: 1500;
    align-items: center;
    justify-content: center;
    .leap-filebrowser-dialog {
        height: 80%;
        width: 80%;
        .leap-main {
            min-height: 100%;
            box-shadow: rgb(0 0 0 / .5) 1px 0 10px;
        }
    }
}

.leap-modal {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing);
    background-color: rgb(0 0 0 / .6);
    .leap-modal-dialog {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 100%;
        max-width: 520px;
        max-height: calc(100vh - 2 * var(--spacing));
        overflow-y: auto;
        box-sizing: border-box;
        padding: 20px;
        background: white;
        color: var(--leap-blue-dark);
        border-radius: 8px;
        box-shadow: 0 10px 40px rgb(0 0 0 / .4);
    }
    .leap-modal-header {
        font-size: 1.15em;
        font-weight: 600;
    }
    .leap-modal-field {
        display: flex;
        flex-direction: column;
        gap: 4px;
        label {
            font-size: 0.7em;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            opacity: 0.55;
        }
        textarea,
        input[type="text"] {
            width: 100%;
            box-sizing: border-box;
            resize: none;
            overflow: hidden;
            font: inherit;
            line-height: 1.4;
            padding: 8px 10px;
            color: inherit;
            border: 1px solid color-mix(in srgb, var(--leap-blue-dark) 25%, transparent);
            border-radius: 6px;
            &::placeholder {
                color: color-mix(in srgb, var(--leap-blue-dark) 40%, transparent);
            }
            &:focus {
                outline: none;
                border-color: var(--leap-blue-light);
                box-shadow: 0 0 0 2px color-mix(in srgb, var(--leap-blue-light) 30%, transparent);
            }
        }
    }
    .leap-modal-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        .leap-modal-spacer {
            flex: 1;
        }
    }
    .leap-modal-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font: inherit;
        cursor: pointer;
        padding: 8px 14px;
        border-radius: 6px;
        border: 1px solid color-mix(in srgb, var(--leap-blue-dark) 25%, transparent);
        background: white;
        color: var(--leap-blue-dark);
        transition: 0.2s;
        &:hover:not([disabled]) {
            background: var(--leap-grey-light);
        }
        &[disabled] {
            opacity: 0.6;
            cursor: default;
        }
        .svg-icon {
            width: 1em;
            height: 1em;
        }
    }
    /* The busy class alone is enough: the translate-all button in the editor sets it
       without .leap-alt-generate-btn, so requiring both left that one never spinning. */
    .leap-alt-generating .svg-icon {
        animation: leap-alt-spin 0.8s linear infinite;
    }
    .leap-ai-image-estimate {
        font-size: 0.8em;
        opacity: 0.6;
    }
    /* The provider takes tens of seconds; a placeholder the size of a preview keeps
       the dialog from looking stalled and stops it jumping when the image lands. */
    .leap-ai-image-busy {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 120px;
        border-radius: 6px;
        background: var(--leap-grey-light);
        opacity: 0.7;
    }
    .leap-ai-image-spinner {
        width: 1em;
        height: 1em;
        border: 2px solid color-mix(in srgb, var(--leap-blue-dark) 25%, transparent);
        border-top-color: var(--leap-blue-dark);
        border-radius: 50%;
        animation: leap-alt-spin 0.8s linear infinite;
    }
    .leap-ai-image-preview {
        position: relative;
        img {
            display: block;
            width: 100%;
            border-radius: 6px;
            cursor: zoom-in;
        }
        .leap-ai-image-cost {
            position: absolute;
            right: 6px;
            bottom: 6px;
            font-size: 0.75em;
            padding: 2px 6px;
            border-radius: 4px;
            background: rgb(0 0 0 / .55);
            color: white;
        }
    }
    .leap-modal-save {
        background: var(--leap-blue-light);
        border-color: var(--leap-blue-light);
        color: white;
        &:hover:not([disabled]) {
            background: var(--leap-blue);
            border-color: var(--leap-blue);
        }
    }
}