@property --index {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --bg-color: light-dark(#e7e7e7, #121212);
    --fg-color: light-dark(#121212, #e7e7e7);
    --outline-color: light-dark(#808080, #505050);
    --link-color: light-dark(hsl(from royalblue h s calc(l * .7)), hsl(from royalblue h s calc(l * 1.3)));
    --focus-color: light-dark(seagreen, hsl(from var(--link-color) calc(h + 180) s l));
}

:root.theme-dark {
    color-scheme: dark;
}

:root.theme-light {
    color-scheme: light;
}

html {
    margin: 0;
    line-height: 1.5;
}

body {
    display: grid;
    grid-template-columns: 1fr clamp(375px, 80ch, 100% - 2rlh) 1fr;
    grid-template-rows: repeat(3, auto) 1fr auto;
    gap: 1rlh 0;
    margin: 0;
    block-size: 100dvb;
    font-family: ui-sans-serif, sans-serif;
    background-color: var(--bg-color);
    color: var(--fg-color);
    transition: background-color .3s;
}

a:any-link {
    color: var(--link-color);
}

main {
    display: grid;
    grid-row: span 4;
    grid-column: 2 / span 1;
    grid-template-rows: subgrid;
}

@scope (.page-header) {

    :scope {
        padding: .5rlh;
        grid-area: 1 / 1 / 1 / -1;
    }

    h1 {
        font-size: 1.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03125em;
        margin: 0;
        text-align: start;
        /* -webkit-text-stroke: .25ch #121212; */
        color: var(--fg-color);
        /* paint-order: stroke fill; */
    }

    a:any-link {
        color: inherit;
        text-decoration: none;

    }
}

@scope (.theme-menu) {

    :scope {
        position: fixed;
        top: .5rlh;
        right: 1rlh;
        margin: 0;
        padding: 0;
        list-style: inside none;
        font-size: 1.5rem;
    }

    label {
        display: grid;
        grid-template-columns: 1fr;
        cursor: pointer;

        input,
        span {
            grid-area: 1 / 1 / 1 / 1;
        }

        input {
            clip-path: rect(0 0 0 0);
        }
    }
}

@scope (#range-inputs) {
    :scope {
        inline-size: 100%;
        display: grid;
        grid-template-columns: max-content repeat(3, max-content min-content);
        grid-auto-columns: max-content;
        align-items: baseline;
        gap: .5rlh 1rlh;
    }

    .field-set {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        align-items: baseline;
        text-box-trim: trim-both;
    }

    .field-set-legend {
        font-size: inherit;
        text-transform: uppercase;
        margin: 0;
        color: var(--outline-color);
    }

    label {
        display: grid;
        grid-column: span 2;
        grid-template-columns: subgrid;
        align-items: baseline;
        gap: .5rlh;

        span {
            text-align: end;
        }
    }

    input,
    button {
        padding: .25em .5em;
        font-size: .85rem;
        line-height: inherit;
        background-color: transparent;
        border: 0 none;
        outline: 1px solid var(--outline-color);
        border-radius: .125em;

        &:focus-visible {
            outline: 2px solid var(--focus-color);
        }
    }

    button {
        text-transform: uppercase;
        font-weight: 600;
        padding: .25em 1.5em;
        outline: 1px solid;
        color: oklch(from var(--style-color) calc(l * 2) c h);

        &:not(:disabled) {
            cursor: pointer;
        }
    }

    button[type="submit"] {
        --style-color: light-dark(hsl(from seagreen h s calc(l * .4)), hsl(from seagreen h s calc(l * .5)));
    }
    button[type="reset"] {
        --style-color: hsl(from var(--link-color) h s calc(l * .5));
    }

    .field-set:has(button) {
        grid-column: 8 / span 2;
        grid-row: 2;
        gap: .5rlh;
    }
}

@scope (.page-nav) {
    ul {
        margin: 0;
        padding: 0;
        list-style: inside none;
        display: flex;
        flex-wrap: wrap;
        gap: 1rlh;
    }

    a:any-link:is(:target-current, .target-current) {
        color: var(--focus-color);
    }
}

@scope (.contents) {
    :scope {
        inline-size: 100%;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--outline-color) transparent;
        outline: 1px solid var(--outline-color);
    }

    h2 {
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0 0 .5rlh 0;
        opacity: 0;
        transition: opacity .4s;
    }

    article {
        --index: sibling-index();
        container-type: scroll-state;
        container-name: snapper;
        inline-size: 100%;
        flex: 0 0 100%;
        padding: 1rlh;
        scroll-snap-align: start;
    }

    output {
        font-family: monospace;
        display: block;
        padding: .5rlh 1rlh;
        inline-size: max-content;
        max-inline-size: 100%;
        border: 1px solid var(--outline-color);
        border-radius: .5rlh;
        opacity: 1;
        transition: opacity .4s;

        @starting-style {
            opacity: 0;
        }

        &::selection {
            background-color: var(--focus-color);
            color: var(--bg-color);
        }
    }

    /* @container snapper scroll-state(snapped: x) {

        h2 {
            opacity: 1;
        }
    } */
}