@import url("fonts/fira-mono.css");

:root {
    --bg: #D6E8AE;
    
    --font: "Fira Mono", monospace;
    --fg: black;
    --fg-2nd: #665d54;
    --fg-accent: #2B8B13;
    --fg-disabled: #ccc;
    
    --card-bg: #F2FDD9;
    --card-padding: 24px;
    --card-radius: 8px;

    --book-cover-bg: #474039;

    --line-height: 1.4;

    --button-hover-bg: #E7F5BA;
    --button-active-bg: #D7EA98;

    --focus-outline-color: #2B8B1399; 

    --card-bg: #f4f4f4;
    --bg: #dadada;
    --bg-code: #dadada;

}
body {
    display: flex;
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font);
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
}

#print-space {
    --width: 920px;
    --height: 680px;

    display: grid;
    grid-template-areas: "welcome log"
    "picture log";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 24px 32px;
    max-width: var(--width);
    max-height: var(--height);
    height: min(100dvh, var(--height));
    /* margin: 16px; */
    line-height: var(--line-height);

    #welcome {
        grid-area: welcome;

        section {
            min-height: 90cqh;
        }
    }

    & > picture {
        grid-area: picture;

        img {
            display: block;
            width: 100%;
            height: 100%;
            max-height: 320px;
            object-fit: cover;
            border-radius: var(--card-radius);
        }
    }

    #log {
        grid-area: log;
    }
}

body:not(:focus-within) {
    #welcome h1 {
        color: var(--fg-accent);
    }
}

paged-view {
    display: block;
    background: var(--card-bg);
    border-radius: var(--card-radius);
    scrollbar-color: var(--fg-2nd) transparent;
    padding: 0;
    box-sizing: border-box;

    &:focus-within {
        outline: 6px solid var(--focus-outline-color);

        h1 {
            color: var(--fg-accent);
        }
    }

    &:not(:defined) {
        padding: 24px;
        overflow: auto;
        
        /*
         * Hides page controls
         * when not defined
         */
        [slot^="edge"] {
            display: none;
        }
    }

    &::part(body) {
        padding: 24px;
    }

    .buttons {
        display: grid;
        inline-size: 100%;
        grid-template-columns: 1fr 1fr;

        button {
            display: block;
            flex-grow: 1;
            background: transparent;
            border: 0;
            font: inherit;
            padding-block: 0.75em;
            padding-inline: 1em;
            font-weight: 500;
            
            &:hover {
                background: var(--button-hover-bg);
            }
            
            &:active {
                background: var(--button-active-bg);
            }
            
            &:focus-visible {
                border-radius: 8px;
                outline-offset: -3px;
                outline: 1px solid var(--focus-outline-color);
                background: none !important;
            }

            &[aria-disabled="true"] {
                color: var(--fg-disabled);

                &:hover, &:active {
                    background: none;
                }
            }
            

            &:first-child {
                text-align: start;
            }

            &:last-child {
                text-align: end;
            }
        }
    }

    &#welcome {
        &::part(header) {
            margin-block-end: 1em;
        }

        &::part(edge-inline-end) {
            writing-mode: vertical-rl;
            margin-block-end: 1em;
        }
        
        section {
            break-before: column;
        }

        &:not(:defined) {
            hgroup {
                margin-block-end: 1em;
            }
        }

        .buttons:has([aria-disabled="true"] + [aria-disabled="true"]) {
            visibility: hidden;
        }
    }

    &#log {
        container-type: size;
        container-name: log;

        &::part(header) {
            margin-block-end: 0.5em;
        }

        &::part(edge-block-end) {
            /* margin-block-start: 1em; */
        }

        .page-status {
            color: var(--fg-2nd);
        }

        .eof {
            display: none;
        }

        &:not(:defined) {
            .page-status {
                display: none;
            }

            h1 {
                margin-block-end: 1em;
            }
        }
    }

    article {
        min-height: 100cqh;
    }
    
    hgroup {
        p {
            color: var(--fg-2nd);
            margin: 0;
            margin-block-start: 0.5em;
        }
    }

    h1 {
        text-transform: uppercase;
        color: var(--fg-2nd);
        font-size: larger;
        font-weight: normal;
        margin: 0;
    }

    h2 {
        color: var(--fg);
        font-weight: bold;
        font-size: inherit;
        break-before: column;
        margin: 0;
        
        .date {
            color: var(--fg-2nd);
            font-weight: normal;
            display: block;
        }

        & + p {
            margin-block-start: 1em;
        }

    }

    p {
        margin-block-start: 0;
    }

    figure {
        /*
        Image
        ===== 
        
        Available classes: full | vertical | cover | separate-caption

        full
        : Makes the <figure> take an entire page.

        vertical
        : when displaying vertical images (?)

        cover
        : Makes the image cover the entire page, cropping if necessary.

        separate-caption
        : Places the <figcaption> on its own page.
        : (The <figcaption> may be placed before or after the <img>)

        */
        &:has(img) {
            display: block;
            margin: 0;

            & a:has(img) {
                display: block;
                width: 100%;
                cursor: zoom-in;
            }

            & :is(p, div) {
                display: flex;
                flex: 1 1 auto;
                height: auto;

                img {
                    display: block;
                    width: 100%;
                    height: auto;
                }
            }

            & figcaption {
                margin-block: 0.5em 1em;
                min-height: 1lh;
                display: block;
                color: var(--fg-2nd);

                &&:not(:first-child):before {
                    display: inline;
                    content: "↑ ";
                    color: var(--fg-accent);
                }

                &:first-child:after {
                    display: inline;
                    content: " ↓";
                    color: var(--fg-accent);
                }
            }

            &.full, &.vertical, &.separate-caption {
                display: flex;
                flex-direction: column;
                break-before: column;
                height: 100cqh;
                flex: 1 1 auto;
                gap: 1em;

                & div {
                    height: 50%;
                    img {
                        height: 100%;
                        object-fit: contain;
                        object-position: middle;
                    }
                }

                & figcaption {
                    color: var(--fg);
                    flex: 1 0 auto;
                    margin-block: 0;
                }
                &:has(figcaption) {
                    & img {
                        object-position: bottom;
                    }
                }
            }

            &.vertical {
                & div img {
                    object-position: center;
                }
                & figcaption {
                    flex-grow: 0;
                }
            }

            &.cover div img {
                object-fit: cover;
                object-position: center;
            }

            &.separate-caption {
                display: block;
                height: auto;

                div, figcaption {
                    display: block;
                    height: auto;
                }
                
                div img {
                    display: block;
                    height: 100cqh;
                    object-position: center;
                }

                figcaption {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    min-height: 100cqh;
                    break-before: column;
                    color: var(--fg);
                    text-align: start;
                    margin-inline: 0 3lh;
                    text-wrap: balance;

                    &:first-child {
                        margin-inline: 3lh 0;
                        text-align: end;

                        &:after {
                            display: block;
                            margin-block-start: 0.5em;
                            content: "->";
                            color: var(--fg-accent);
                        }
                    }

                    &:not(:first-child):before {
                        display: block;
                        content: "<-";
                        color: var(--fg-accent);
                    }
                }
            }

            &:not(.full, .vertical, .separate-caption) + figure:not(.full, .vertical, .separate-caption) {
                margin-block-start: 1em;
            }
        }

        /* Blockquote */
        &:has(blockquote) {
            margin-inline-start: 2ch;
            &::before {
                content: "«";
                position: absolute;
                margin-inline-start: -2ch;
            }
            blockquote {
                margin-inline: 0;

                p:last-child::after {
                    display: inline;
                    content: " »";
                }
            }
            figcaption {
                color: var(--fg-accent);
                text-wrap: balance;
                text-align: end;
            }
        }
    }

    .comment {
        break-before: column;
        width: 100%;
        height: 100cqh;
        padding: 0;
        margin: 0;
        border: none;
        position: relative;
        color: var(--fg-2nd);
        text-align: center;
        text-wrap: balance;
    }

    hr.blank-page {
        break-before: column;
        width: 100%;
        height: 100cqh;
        padding: 0;
        margin: 0;
        border: none;
        position: relative;

        &::before {
            line-height: 1;
            position: absolute;
            display: block;
            content: "(blank)";
            color: var(--fg-2nd);
            /* font-size: 2em; */
            width: 6em;
            height: 1lh;
            left: calc(50% - 3em);
            top: calc(50% - 0.5lh);
            text-align: center;
        }

        &[data-message]::before {
            content: attr(data-message);
        }
    }
}

#welcome dl {
    columns: 2;

    dt {
        color: var(--fg-2nd);
    }

    dd {
        margin-inline-start: 2ch;
        margin-block-end: 0.3em;
    }
}

a {
    color: inherit;
}
code {
    font-family: var(--font);
    background: var(--bg-code);
}

.no-ai {
    display: flex;
    text-wrap: balance;
    height: 100cqh;
    align-items: end;

    paged-view:not(:defined) & {
        height: auto;
        margin-block-start: 6em;
    }
}

.multiply {
    mix-blend-mode: multiply;
}

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