:is(.project-editor, .cms-sign-in) ::selection {
    background-color: Highlight;
    color: HighlightText;
}

.cms-bar {
    position: sticky;
    bottom: 2.5rem;
    z-index: 20;
    width: fit-content;
    margin: 3rem auto 0;
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 2rem;
    background-color: var(--white-background);
    border: var(--border-grey-dashed);
    backdrop-filter: blur(50px);
}

.button-form {
    display: contents;
}

.button.is-primary {
    background-color: rgb(0 0 0 / 0.85);
    color: white;
}

.flash {
    margin-bottom: 2rem;
}

.flash-alert {
    color: #E24227;
}

/* Text inputs that look like the text they edit. */
.inline-field {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--light-grey);
    border-radius: 2rem;
    border: var(--border);

    /* The native arrow ignores padding, so draw our own inset from the edge */
    &:is(select) {
        appearance: none;
        padding-right: 2.5rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 0.75rem;
        cursor: pointer;
    }

    &:focus {
        outline: none;
        border-color: rgb(0 0 0 / 0.6);
    }

    &.align-end {
        text-align: end;
    }
}

.offering-toggle,
.remove-toggle {
    cursor: pointer;

    input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    &:has(:focus-visible) {
        outline: 2px solid black;
        outline-offset: 2px;
    }
}

.offering-toggle:has(:checked) {
    background-color: var(--color);
}

/* Lexxy, restyled to sit in the page like the text it edits (project and offering forms). */
lexxy-editor {
    --lexxy-font-base: inherit;
    --lexxy-color-canvas: transparent;
    --lexxy-color-text: inherit;
    border: 0;
    background: var(--light-grey);
    border-radius: 2rem;
    border: var(--border);
    padding: 1rem 1rem 0.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

lexxy-toolbar {
    position: sticky;
    top: 4rem;
    z-index: 1;
    border-radius: 25rem;
    padding: 0.25rem;
    background-color: var(--white-background);
    border: var(--border-grey-dashed);
    backdrop-filter: blur(50px);
    width: fit-content;

    & .lexxy-editor__toolbar-button {
        border-radius: 25rem;

        &.lexxy-editor__toolbar-group-end {
            margin-inline-end: 0;

            &:after {
                display: none;
            }
        }
    }
}

.project-editor {
    .project-images {
        .remove-toggle:has(:checked) {
            background-color: #E24227;
            color: white;
        }

        .is-sortable {
            cursor: grab;
        }

        .sortable-ghost {
            opacity: 0.3;
        }

        /* Images marked for removal fade back. */
        .project-image:has(.remove-toggle :checked) :is(img, video) {
            opacity: 0.3;
        }

        .add-images {
            position: relative;
            place-items: center;
            aspect-ratio: 3 / 4;
            border: 1px dashed rgb(0 0 0 / 0.3);
            cursor: pointer;

            input {
                position: absolute;
                opacity: 0;
                pointer-events: none;
            }

            &:has(:focus-visible) {
                outline: 2px solid black;
            }
        }
    }

    /* Match the paragraph and approach styles of the project page. */
    /*.paragraph .lexxy-editor__content p:not(:first-of-type) {*/
    /*    text-indent: 5rem;*/
    /*}*/

    .approach .lexxy-editor__content p {
        font-family: 'Originale', sans-serif;
        font-size: 0.8rem;
        letter-spacing: 4%;
    }

    .approaches-editor,
    .references-editor,
    .attachments-editor {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 0.5rem;

        .approaches,
        .references,
        .attachments {
            align-self: stretch;
        }
    }

    .attachments,
    .attachment {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 1rem;
    }

    .attachments {
        gap: 2rem;
    }

    .attachment .inline-field {
        width: 100%;
    }

    /* Approaches are dragged by their controls bar (sortable controller). */
    .approach-controls {
        cursor: grab;
    }

    :is(.approach, .reference).sortable-ghost {
        opacity: 0.3;
    }

    :is(.approach, .reference, .attachment) .remove-toggle {
        &:has(:checked) {
            background-color: #E24227;
            color: white;
        }
    }

    /* Approaches marked for removal fade back. */
    :is(.approach, .reference):has(.remove-toggle :checked) > :not(.approach-controls),
    .attachment:has(.remove-toggle :checked) > :not(.remove-toggle) {
        opacity: 0.3;
    }

    /* Reference fields: the note grows with its text. */
    .file-field {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;

        input {
            font: inherit;
        }
    }

    .reference textarea {
        field-sizing: content;
        resize: none;
    }

    .dial-number {
        display: flex;
        gap: 1rem;
        align-items: baseline;

        .inline-field {
            width: 4rem;
        }
    }
}

/* Projects list */
.cms-index {
    h1 {
        margin-bottom: 3rem;
    }

    .cms-list {
        display: flex;
        flex-direction: column;
        max-width: 50rem;

        li {
            display: grid;
            grid-template-columns: 3rem 1fr auto auto;
            gap: 1rem;
            align-items: center;
            padding: 0.75rem 0;
            border-bottom: var(--border-grey-dashed);

            &:first-of-type {
                border-top: var(--border-grey-dashed);
            }
        }
    }
}

/* Offerings list: grouped by category, each with its colour. */
.cms-group {
    max-width: 50rem;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    .cms-list li {
        grid-template-columns: 1.5rem 1fr auto auto;
    }
}

.swatch {
    width: 1.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--color);
}

/* Small CMS forms (sign in, offerings). */
.cms-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: min(44rem, 100%);
}

.cms-input {
    font: inherit;
    padding: 0.75rem 1rem;
    border-radius: 2rem;
    background-color: var(--white-background);
    border: var(--border);
}

/* The native colour input, shown as a round swatch. */
.color-field {
    display: flex;
    gap: 1rem;
    align-items: center;
    cursor: pointer;

    input {
        width: 3rem;
        height: 3rem;
        padding: 0;
        border: var(--border);
        border-radius: 50%;
        background: none;
        cursor: pointer;

        &::-webkit-color-swatch-wrapper { padding: 0; }
        &::-webkit-color-swatch { border: 0; border-radius: 50%; }
        &::-moz-color-swatch { border: 0; border-radius: 50%; }
    }
}

/* Sign in */
.cms-sign-in {
    display: grid;
    place-items: center;

    .cms-card {
        text-align: center;
    }

}