nav {
    div {
        white-space: nowrap; 
        text-align: right;

        &:first-of-type {
            grid-area: 1/4;
            align-self: center;
        }
        &:last-of-type {
            grid-area: 2/4;
        }
    }
    small {color: var(--on);}
    input {
        width: 5em; height: 1.3rem;
        margin: 0 .2em 0 .3em;
        vertical-align: middle;
    }
    button,label {
        background: var(--theme); color: black;
        border-radius: 8em;
        padding: 0 .5em;
        font-size: .9em;
        display: inline-block; line-height: 1.3rem;
    }
}
main {
    max-width: 30em;
    margin: 4.15rem auto 0 auto;
    display: grid; grid-template-columns: auto 1fr;
    user-select: none; -webkit-user-select: none;
    position: relative;

    db-state {display: none;}
    canvas {
        height: min(35em,100svh - 4.15rem);
        position: sticky; top: 4.15rem;
    }
    .message {
        position: absolute; width: 100%; top: 50%; transform: translateY(-50%);
        z-index: 5;
        background: rgba(255,255,255,.8); color: black;
        padding: 1em;
    
        &:not(.active) {display: none;}
        small {display: block;}
    }
}
continuous-knob:nth-child(n+4) {margin-top: .25em;}
continuous-knob::part(output) {font-size: .65em;}
details {
    summary {
        &::before {content: '▶';}
        &::after  {content: '◀';}
        &.loading span,&.loading::before {display: none;}
    }
    &[open] summary::before,&[open] summary::after {content: '▼';}

    ul {
        text-align: left; font-size: .8em;
        padding: 0 0.5em 0 2em;
        line-height: 1.4;
    }
}
fieldset {
    padding: 0; margin: 0; border: none;
    font-size: .95em;
    
    &:not(#layer) {
        align-self: start;

        label:not(.toggle),continuous-knob::before {font-size: .9em;}
    }
}
form {
    display: grid; grid-template: repeat(3,auto) 1fr / 1fr auto;
    margin: 0 .2em;

    >:not(#control-image) {padding-top: .5rem;}
    #type {
        display: flex; justify-content: center; align-items: center; gap: 1em;
        
        button {
            font-size: 2em; color: var(--theme);
            width: 1em;
        }
    }
    #layer {
        grid-area: 1/2/-1/3;
        padding-top: .25rem;
        font-size: 1.1em;
        max-height: calc(100svh - 4.15rem); overflow-y: scroll;

        div {
            display: flex; flex-direction: column;

            &:has(button) {
                position: sticky; top: 0;
                background: var(--backdrop);
                z-index: 1;
            }
        }
        &.solo label:not(:has(:checked)) {filter: saturate(0) brightness(.7);}
        label {
            border: .1em solid gray; border-radius: .3em;
            width: 1.8em; min-height: 1.8em; max-height: 1.8em;
            margin: .2em 0;
            filter: none;

            &::before {
                all: unset; line-height: 1.8em;
            }
            &[data-type=image]:not(:has(img[src]))::before {content: '';}
            &[data-type=color]:not([style])::before {content: '';}

            &:has(img[src]) {display: flex;}
            &:has(input:checked) {
                background: var(--theme); color: black;
                border-color: var(--theme);
            }
            img {
                width: 100%; max-height: 100%; object-fit: contain;
                pointer-events: none;

                &:not([src]) {display: none;}
            }
        }
        button {
            font-size: 1.5em; color: var(--theme);
            height: 1.33333em;

            &[disabled] {
                filter: saturate(0);
                pointer-events: none;
            }
        }
    }
    #control-image {
        justify-self: center;
        border-radius: .5rem; border: .15rem solid;
        color: var(--theme);
        display: flex;
        padding: 1em 0; margin-top: .5em;

        :not(input) {
            width: 6em; height: 4em;
            font-size: 1rem !important;
            display: flex; align-items: center; justify-content: center;
        }
        label {border-right: .05em solid;}
        button {border-left: .05em solid;}
    }
    #control-color {
        justify-self: center;
        border-bottom: .2em solid; padding-bottom: .75em;
        display: grid; grid-template-columns: repeat(3,auto); gap: .3em .5em; justify-content: center;

        div {
            grid-area: 1/1/2/4;
            border-bottom: .2em solid; padding-bottom: .5em;

            label {
                display: inline-block;
                margin: 0 .2em;
            }
        }
        label {
            display: flex; flex-direction: column; align-items: center;
            margin-top: .25em;
        }
        label:has(input[value])::after {
            content: '';
            display: block; width: 1.5em; height: 1.5em;
            margin: auto;
        }
        label:has(input[value=Linear])::after {
            background: linear-gradient(var(--theme),var(--theme-dark));
        }
        label:has(input[value=Radial])::after {
            background: radial-gradient(var(--theme),var(--theme-dark));
        }
        label:has(input[value=Conic])::after {
            background: conic-gradient(var(--theme),var(--theme-dark),var(--theme));
        }
    }
    #control {
        display: grid; grid-template-columns: repeat(3,auto); gap: .5em; justify-content: center;

        div {
            grid-area: 3/1/4/3; place-self: center end;
            margin: .5em -.5em 0 0;
            line-height: 1.2;

            small {display: block;}
        }
        label {
            width: auto;
            margin-top: .5em;
        }
    }
    #control-image[hidden]~#control .image,
    #control-color[hidden]~#control .color {display: none;}
}

dialog {
    padding: 1em .5em;

    * {width: 100%;}
    em {
        margin: 0 auto 2em auto;

        small {
            display: block;
            margin-top: .5em;
        }
    }
    img {width: 6em;}
}
/* 
@media (orientation: landscape) {
    main {
        display: block; position: relative;
    }
    canvas {
        position: absolute; left: calc(50% - 1.25em); transform: translate(-50%,-35%) rotate(-90deg);
        height: calc(min(100vw,30em) - 2.5em) !important;
    }
    details {margin-top: 9em;}

} */