@charset "UTF-8";

:root {
    --p-main: 1rem;
    --grid-size: 12;
    --v-spacing: 0;
    --grid-gap-h: 4px;
    --frame-aspect: 1;
    --frame-width: calc((100vw - ((var(--grid-size) - 1) * var(--grid-gap-h))) / var(--grid-size));
    --frame-height: calc(var(--frame-width) / var(--frame-aspect));
    --grid-gap-v: calc(4px + var(--v-spacing) * var(--frame-height));
    --height-controls: 1.8rem;
    --f-s-timestamp: max(0.5vw, calc(10vw / var(--grid-size)));
    --p-timestamp: 3px;
    --height-timestamp: calc(1.0 * var(--f-s-timestamp) + var(--p-timestamp));
    --frame-opacity: 1.0;
}

html {
    padding: 0;
    font-size: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #FFF;
    line-height: 1;
    padding-bottom: 8rem;
}

#controls {
    padding: 0.85rem var(--p-main);
    background: #333;
    color: #CCC;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1;
    box-shadow: 0 0 0.5rem rgba(0,0,0,0.3);
    font-size: 0.9rem;

    & > div {
        display: flex;
        gap: 1.5rem;

        & > div {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }
    }

    & #controls-right {
        justify-content: flex-end;
    }
}

#fileInput {
    display: none;
}

button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: 0.4em;
    padding: 0em 0.65em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: inherit;
    border: 1px solid currentColor;
    cursor: pointer;
    height: var(--height-controls);
    white-space: nowrap;
    
    &:hover {
        background-color: #555;
        color: #EEE;
    }
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: var(--height-controls);
    color: #000;
    line-height: 1.5;
    border: none;
    border-radius: 0.4em;
    padding: 0 0.65em;
    background: #EEE;
    box-shadow: 0.1em 0.1em 0.25em rgba(0,0,0,0.3) inset;
}

#sizeSliderLabel {
    width: 2ch;
}
#updateBtn, #cancelBtn {
    width: 11ch;
}
#cancelBtn {
    display: none;
    color: gold;
    &:hover {
        background-color: #5C5116;
    }
}

body.is-updating {
    & #cancelBtn {
        display: block;
    }
    & #updateBtn {
        display: none;
    }
    & #fileBtn, & #intervalInput, & #exportBtn {
        pointer-events: none;
        opacity: 0.3;
    }
}

input[type=range] {
    --slider-width: 8rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: var(--slider-width);
    background: transparent;
    
    &::-webkit-slider-thumb {
        -webkit-appearance: none;
        background-color: #FFF;
        height: 1rem;
        width: 2rem;
        border-radius: 1rem;
        margin-top: -0.4rem;
        border: none;
        cursor: pointer;
    }
    &::-moz-range-thumb {
        background-color: #FFF;
        height: 1rem;
        width: 2rem;
        border-radius: 1rem;
        margin-top: -0.4rem;
        border: none;
        cursor: pointer;
    }
    
    &::-webkit-slider-runnable-track {
        width: 100%;
        height: 0.2rem;
        cursor: pointer;
        background: #CCC;
        border-radius: 1rem;
        border: none;
    }
    &::-moz-range-track {
        width: 100%;
        height: 0.2rem;
        cursor: pointer;
        background: #CCC;
        border-radius: 1rem;
        border: none;
    }
}
#vSpacingSlider, #opacitySlider {
    --slider-width: 4rem;
}

#output {
    padding: var(--p-main);
    background: transparent;
    position: relative;
    
    & #info {
        color: #999;
        
        & h1 {
            font-size: 2rem;
            margin-bottom: 0.75rem;
        }
        & p {
            max-width: 50ch;
            line-height: 1.4;
        }
        & p + p {
            margin-top: 0.75em;
        }
        & p.small {
            font-size: 85%;
        }
    }
    .has-loaded-video & #info {
        display: none;
    }
    
    & #specs {
        margin-bottom: 1rem;
        display: none;
        
        & #filename {
            font-size: 2rem;
            margin-bottom: 0.75rem;
        }
        
        & #metadata {
            display: flex;
            font-size: 1rem;
            gap: 1em;
            color: #666;
        }
    }
    .has-loaded-video & #specs {
        display: block;
    }
    
    & #frames {
        display: grid;
        grid-template-columns: repeat(var(--grid-size), 1fr);
        gap: var(--grid-gap-v) var(--grid-gap-h);
        counter-reset: dividerCounter 0;
        padding-bottom: var(--grid-gap-v);
        
        .frame {
            & img {
                display: block;
                width: 100%;
                height: auto;
                background: black;
                object-fit: cover;
                border-radius: 0;
                cursor: pointer;
                border: 1px solid #999;
                line-height: 0;
                opacity: var(--frame-opacity);
            }
            
            & .label {
                font-size: var(--f-s-timestamp);
                padding-top: var(--p-timestamp);
                height: var(--height-timestamp);
                color: #666;
                font-feature-settings: "tnum";
                
                & span {
                    color: #BBB;
                    display: none;
                }
            }
            
            body[data-timestamp="none"] & {
                & .label {
                    display: none;
                }
            }
            body[data-timestamp="marks"] & {
                &:not(.second-mark) .label {
                    visibility: hidden;
                }
            }
            body[data-timestamp="full"] & {
                & .label span {
                    display: inline;
                }
            }
            
            body:where(.is-updating, .was-cancelled) &:last-child {
                opacity: 0.3;
            }
        }
        
        
        & .divider {
            font-size: max(0.85rem, calc(10vw / var(--grid-size)));
            color: #999;
            padding-bottom: var(--height-timestamp);
            
            & .inner {
                height: 100%;
                border-top: max(2px, calc(2rem / var(--grid-size))) solid currentColor;
                padding: 0.35em 0.35em;
                cursor: pointer;
                position: relative;
            }
            
            & .label {
                counter-increment: dividerCounter;
                width: 100%;
                text-align: right;
                
                &::before {
                    content: counter(dividerCounter);
                }
            }
            
            & .indicator {
                display: none;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                font-size: 1.5em;
                font-weight: 200;
                
                &::before {
                    content: "⏎";
                }
            }
            
            & .inner:hover {
                background-color: #EEE;
                
                & .indicator {
                    display: block;
                }
            }
            
            &.wrap {
                grid-column-start: 1;
                
                &:hover {
                    & .indicator::before {
                        content: "⤴";
                    } 
                }
            }
        }
        
        & .divider:has(+ .frame img:hover) {
            color: #F00;
            
            & .inner {
                background-color: lightsalmon;
                
                & .indicator {
                    display: block;

                    &::before {
                        content: "╳";
                    }
                }
            }
        }
    }
}

.template {
    display: none;
}

#tooltip {
    position: fixed;
    padding: 0.3em 0.6em;
    background: rgba(0,0,0,0.8);
    color: white;
    border-radius: 0.3em;
    font-size: 0.85rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease;
    z-index: 999;
    transform: translate(-50%, calc(-100% - 0.5rem));
}

@media only screen and (max-width: 768px) {
    html {
        
    }
    
    #controls {
        grid-template-columns: 1fr 1fr;
        font-size: 0.85rem;
        position: static;
        
        & #controls-center {
            grid-column: 1 / span 2;
            flex-wrap: wrap;
            justify-content: center;
            border-top: 1px solid #666;
            padding-top: 1rem;
        }
        & #controls-right {
            grid-column: 2;
            grid-row: 1;
        }
    }
    
    #output {
        & #specs {
            #filename {
                font-size: 1.2rem;
                margin-bottom: 0.5rem
            }
            #metadata {
                font-size: 0.85rem;
            }
        }
    }
    
}

@media print {
    :root {
        --p-main: 0;
    }
    #controls {
        display: none;
    }
}

@page {
    margin: 1cm;
}