:root {
    color-scheme: light dark;

    --button-primary-background: #007aff;
    --button-primary-gradient: linear-gradient(to bottom, #3696ff, #007aff);

    --button-destructive-background: #d60000;
    --button-destructive-gradient: linear-gradient(to bottom, #ff1c14, #d60000);

    --button-neutral-background: color-mix(in srgb, CanvasText 10%, transparent);
    --button-neutral-background-hover: color-mix(in srgb, CanvasText 16%, transparent);
    --button-neutral-background-active: color-mix(in srgb, CanvasText 22%, transparent);

    --input-background-hover: color-mix(in srgb, CanvasText 5%, transparent);

    --icon-button-overlay-background: rgba(255, 255, 255, 0.25);
}

@media (prefers-color-scheme: dark) {
    :root {
        --button-neutral-background: color-mix(in srgb, CanvasText 18%, transparent);
        --button-neutral-background-hover: color-mix(in srgb, CanvasText 26%, transparent);
        --button-neutral-background-active: color-mix(in srgb, CanvasText 34%, transparent);

        --input-background-hover: color-mix(in srgb, CanvasText 8%, transparent);

        --icon-button-overlay-background: rgba(0, 0, 0, 0.25);
    }
}

/*
 ------------------------------------------------
 Form & Inputs
 ------------------------------------------------
 */

main > form {
    display: flex;
    flex-direction: column;
    
    flex: 1 1 auto;
    min-height: 0;
    
    width: 100%;
    max-width: 600px;
}

form input.text-input {
    width: calc(100% + 16px);
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    line-height: normal;
    color: inherit;
    padding: 4px 8px;
    margin: 0 -8px;
    border-radius: 6px;
    transition: background-color 1s ease;
}

form section input.text-input {
    margin: 2px -8px;
}

form input.text-input:hover {
    background: var(--input-background-hover);
}

form textarea,
form label > textarea {
    width: calc(100% + 16px);
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    line-height: inherit;
    color: inherit;
    padding: 4px 8px;
    margin: 0 -8px;
    resize: none;
    border-radius: 6px;
    transition: background-color 1s ease;

    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
}

form textarea:hover,
form label > textarea:hover {
    background: var(--input-background-hover);
}

form input::placeholder,
form label > input::placeholder,
form textarea::placeholder,
form label > textarea::placeholder {
    color: currentColor;
    opacity: 0.35;
}

form .editor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0 32px 0;
    flex: 0 0 auto;
    font-size: 1.5rem;
}

form .editor-error {
    margin: 0.5em 0 0.75em 0;
    font-size: 1.4rem;
    color: var(--error-color);
    flex: 0 0 auto;
}

/*
 ------------------------------------------------
 Buttons
 ------------------------------------------------
 */

form button {
    font-weight: 500;
    font-size: 1.5rem;
    padding: 3px 8px 4px 8px;
    border: 0;
    border-radius: 5px;
    background-color: var(--button-neutral-background);
    color: inherit;
/*    transition: background-color 140ms ease, filter 140ms ease;*/
    cursor: pointer;
}

form button:hover {
    background-color: var(--button-neutral-background-hover);
    filter: brightness(1.1);
}

form button:active {
    background-color: var(--button-neutral-background-active);
    filter: brightness(0.9);
}

button.primary {
    background-color: var(--button-primary-background);
    background-image: var(--button-primary-gradient);
    color: #FFFFFF;
}

button.destructive {
    background-color: var(--button-destructive-background);
    background-image: var(--button-destructive-gradient);
    color: #FFFFFF;
}

button.link {
    background: none;
    border: none;
    color: inherit;
    text-decoration: underline;
    padding: 0;
    cursor: pointer;
}

/*
 ------------------------------------------------
 Section headers
 ------------------------------------------------
 */

form section > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/*
 ------------------------------------------------
 Details section
 ------------------------------------------------
 */

#details-section .details-content {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 16px;
}

#details-section .details-inputs {
    min-width: 0;
}

/*
 ------------------------------------------------
 Image picker
 ------------------------------------------------
 */

.image-picker {
    position: relative;
    width: 120px;
    aspect-ratio: 1;
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--input-background-hover);
    cursor: pointer;
    flex-shrink: 0;
}

.image-picker.portrait {
    aspect-ratio: 2 / 3;
    width: 90px;
}

.image-picker > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-picker.empty > img {
    display: none;
}

.image-picker > span {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
}

.image-picker > span > svg {
    width: 32px;
    height: 32px;
}

.image-picker.empty > span {
    display: flex;
}

.image-picker > button {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-button-overlay-background);
    border-radius: 50%;
}

.image-picker > button > svg {
    width: 16px;
    height: 16px;
}

.image-picker.empty > button {
    display: none;
}

/*
 ------------------------------------------------
 Gallery
 ------------------------------------------------
 */

#gallery-open {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1000;
}

#gallery-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

#gallery-header h4 {
    margin: 0;
    flex: 1;
}

#gallery {
    display: none;
    position: fixed;
    top: 1em;
    right: 1em;
    bottom: 1em;
    width: 33%;
    max-width: 640px;
    z-index: 1100;
    
    /* Translucent, blurred background */
    background: var(--panel-background-color);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    
    padding: 1em;
    overflow: hidden;
    flex-direction: column;
}

#gallery.open {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

#gallery-section {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    width: 100%;
}

#gallery-grid {
    display: block;
    columns: 140px 3;
    column-gap: 3px;
    line-height: 0;
}

#gallery-grid .gallery-item {
    display: inline-block;
    width: 100%;
    margin: 0 0 3px 0;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    
    border-radius: 5px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    background: var(--panel-item-background-color);
    
    aspect-ratio: auto;
    cursor: pointer;
}

#gallery-grid .gallery-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

#gallery-grid .gallery-item:hover img {
    filter: brightness(0.95);
}

/*
 ------------------------------------------------
 Note access
 ------------------------------------------------
 */

.note-wrapper {
    position: relative;
}

.note-wrapper textarea.note-body {
    padding-right: 152px;
}

.note-wrapper:hover textarea.note-body {
    background: var(--input-background-hover);
}

.note-controls {
    position: absolute;
    top: 4px;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.note-access {
    background: color-mix(in srgb, Canvas 90%, transparent);
    padding: 2px 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 1.2rem;
    font-family: system-ui, -apple-system, Helvetica, sans-serif;
    cursor: pointer;
}

.note-access:has(input[disabled]) {
    opacity: 0.4;
    pointer-events: none;
}

.language-picker {
    background: color-mix(in srgb, Canvas 90%, transparent);
    padding: 2px 6px 2px 4px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 1.2rem;
    font-family: system-ui, -apple-system, Helvetica, sans-serif;
    cursor: pointer;
}

.language-picker > svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.7;
}

.language-picker > select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    padding: 0;
    outline: none;
}

.note-toggle {
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 4px;
}

/* recycle hidden by default; trash hidden when deleted */
.note-toggle > svg:last-of-type { display: none; }
.note-wrapper.deleted .note-toggle > svg:first-of-type { display: none; }
.note-wrapper.deleted .note-toggle > svg:last-of-type { display: block; }

.note-wrapper.deleted textarea {
    opacity: 0.4;
    pointer-events: none;
    text-decoration: line-through;
}

.note-wrapper.deleted .note-access {
    opacity: 0.4;
    pointer-events: none;
}


/*
 ------------------------------------------------
 Control labels (functional, not content)
 ------------------------------------------------
 */

form label.access {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: system-ui, -apple-system, Helvetica, sans-serif;
}

/*
 ------------------------------------------------
 Post editor
 ------------------------------------------------
 */

main > form > input.title {
    font-size: 3.2rem;
    font-weight: 700;
    margin: 3.2rem -8px;
    flex: 0 0 auto;
}

main > form .editor-actions > div {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}


main > form#preview-form {
    display: none;
}

body.dragging-page:not(.dragging-target-details):not(.dragging-target-notes)::after {
    content: 'Drop images here';
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--drop-area-background-color);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: 0.2px;
    pointer-events: none;
    z-index: 9999;
}

form > section {
    position: relative;
}

body.dragging-target-details #details-section::after,
body.dragging-target-notes #notes-section::after {
    position: absolute;
    inset: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--drop-area-background-color);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: 0.2px;
    pointer-events: none;
    border-radius: 10px;
    z-index: 10;
}

body.dragging-target-details #details-section::after {
    content: 'Set as artwork';
}

body.dragging-target-notes #notes-section::after {
    content: 'Insert into note';
}

/*
 ------------------------------------------------
 Dialog
 ------------------------------------------------
 */

dialog {
    border: none;
    border-radius: 10px;
    padding: 20px 24px;
    max-width: 340px;
    width: calc(100% - 48px);
    background: Canvas;
    color: CanvasText;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

dialog p {
    margin: 0 0 16px;
    font-size: 1.5rem;
}

dialog > div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

dialog button,
dialog a {
    font-size: 1.5rem;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.25);
}

/*
 ------------------------------------------------
 Mobile adjustments
 ------------------------------------------------
 */

/*
 ------------------------------------------------
 Music type picker
 ------------------------------------------------
 */

.type-picker {
    display: flex;
    gap: 16px;
    align-items: center;
    margin: 8px 0 4px;
}

.type-picker label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 500;
    font-family: system-ui, -apple-system, Helvetica, sans-serif;
    opacity: 0.75;
    user-select: none;
}

@media screen and (max-width: 600px) {

    #details-section .details-content {
        display: flex;
        flex-direction: column-reverse;
        gap: 1em;
    }

    #details-section .details-content .image-picker {
        align-self: center;
    }

    #gallery {
        width: auto;
        max-width: initial;
        left: 1em;
        top: initial;
        max-height: 65%;
    }

    #gallery-grid {
        columns: 120px 4;
    }
}