nav {
    column-gap: 0;

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

        .right & {
            margin-right: .3rem;
        }
        &:first-of-type {
            grid-area: 1/4;
            align-self: center;
        }
        &:last-of-type {
            grid-area: 2/4;
        }
    }
    small {color: var(--on);}
    input {
        width: 4.6em; height: 1.3rem;
        margin: 0 .2em 0 .3em; padding: .1em;
        vertical-align: middle;
    }
    continuous-knob {
        grid-area: 1/3/3/4; place-self: center end;
        margin-right: .4em; 
        font-size: .8em;
    }
    #print.accent {background: var(--accent);}
    a[href^='?'] {
        position: relative;
        
        &::before {
            content: '';
            border-radius: 9em;
            position: absolute; inset: 0;
        }
        &[href='?sheet']::before {
            background: url(./sheet.png) center bottom / cover no-repeat;
        }
        &[href='?emblem']::before {
            background: url(./emblem-base.webp) center / cover no-repeat;
        }
    }
    &.sheet li:has(a[href='?sheet']),
    &.emblem li:has(a[href='?emblem']) {display: none;}
}
main {
    max-width: 30em;
    margin: 4.15rem auto 0 auto;
    display: grid; gap: .5em 0;
    grid-template: repeat(11,auto) / auto 1fr repeat(3,auto) 1fr auto;
    user-select: none; -webkit-user-select: none;
    touch-action: manipulation;
    position: relative;

    db-state,canvas:not([width])~* {display: none;}
    details {margin-top: .5em !important;}
    canvas {
        height: min(35em,100svh - 4.15rem);
        position: sticky; top: 4.15rem;

        nav.emblem+main & {height: 9em; border-radius: 9em;}
        &:not([width]) {width: 5em;}
    }
    b {
        position: fixed; top: 16em;
        width: 9rem;
        padding: 0 .5em;
        font-size: .9em;
        display: none;

        strong {
            display: block;
            border-bottom: .1em solid;
            padding-bottom: .5em; margin-bottom: .5em;
        }
        nav.emblem+main & {display: initial;}
    }
    .message {
        position: absolute; width: 100%; top: 10%; transform: translateY(-50%);
        z-index: 5;
        background: rgba(255,255,255,.8); color: black;
        padding: 1em;
    
        &:not(.active) {display: none;}
        small {display: block;}
    }
}
canvas {grid-area: 1/1/-1/2;}
#layer {grid-area: 1/7/-1/8;}
main::before {content: ''; grid-area: 1/2/-1/3;}
main::after {content: ''; grid-area: 1/6/-1/7; z-index: -9;}
details {grid-area: 1/2/2/7;}
.dual {grid-area: 2/2/3/7;}
hr {grid-column: 3/6;}
#control div {grid-column: 4/5;}
.toggle {grid-column: 5/6;}

main form,fieldset:not(#layer) {display: contents;}
form.image :is(#type,#control-color,#control .color),
form.color :is(#type,#control-image,#control .image),
form[class=''] fieldset[id|=control] {display: none !important;}

main form {
    * {justify-self: center;}
    .dual {
        color: var(--theme);
        display: flex;
        padding: 1rem 0;
        
        :not(input) {
            width: 6rem; height: 4rem;
            display: flex; align-items: center; justify-content: center;
        }
        &#type button {font-size: 2em;}
        #control-image & :is(label,button) {font-size: 1em !important;}
        :first-child {border-right: .05rem solid;}
        :last-child {border-left: .05rem solid;}
    }
}
fieldset:not(#layer) {
    font-size: .9em;
    
    label,continuous-knob::before {font-size: .9em;}
    continuous-knob::part(output) {font-size: .65em;}
    continuous-knob {margin: 0 .25em .3em .25em;}

    hr {
        border-bottom: .1em solid var(--on);
        width: 100%; height: 0;
        margin: .1em auto;
    }
    &#control-color {
        label:has(input[name=gradient])::after {
            content: '';
            display: block; width: 1.5em; height: 1.5em;
            margin: .1em auto 0 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));
        }
        input[type=color] {
            display: block;
        }
        label:has(input[name=shape]) {align-self: center;}
    }
    &#control {
        div {
            justify-self: end;
            margin-right: -.5em;

            small {display: block;}
        }
        div,label {margin-top: .5rem;}
    }
}
#layer {
    width: 2em; height: min(35em,100svh - 4.15rem); 
    overflow-y: scroll; padding-bottom: 1rem;
    mask-image: linear-gradient(to bottom,black 0 90%,transparent);

    div {
        display: flex; flex-direction: column; gap: .4em;
        width: 100%;

        &:has(button) {
            width: 100%;
            padding: .3em 0;
            position: sticky; top: 0;
            background: var(--backdrop);
            z-index: 1;
        }
    }
    button {
        font-size: 1.5em; color: var(--theme);
        line-height: 1.1;

        &[disabled] {
            filter: saturate(0);
            pointer-events: none;
        }
    }
    &.solo label:not(:has(:checked)) {filter: saturate(0) brightness(.7);}
    label {
        border: .1em solid gray; border-radius: .3em;
        width: 100%; aspect-ratio: 1;
        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: '';}
        &[data-path]::before {content: '';}
        &:has(input:checked) {
            background: var(--theme); color: black;
            border-color: var(--theme);
        }
        img {
            display: block; 
            max-width: 100%; aspect-ratio: 1; object-fit: contain;
            pointer-events: none;

            &:not([src]) {display: none;}
        }
    }
}
dialog {
    padding: 1em .5em;

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

        small {
            display: block;
            margin-top: .5em;
        }
    }
    img {width: 6em;}
}