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

:root {
    --bg-color: light-dark(#e9e9e9, #020202);
    --fg-color: light-dark(#020202, #e9e9e9);
    --link-text-color: light-dark(#0921ea, #9fa1fc);
    color-scheme: dark;
}

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

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

a:any-link {
    color: var(--link-text-color);
}
button:not(:disabled) {
    cursor: pointer;
}
button:has(svg) {
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: 0 none;
}
button svg {
    display: block;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    padding: 0;
    margin: 0;
}

@scope (.page-header) {
    :scope {
        grid-area: 1 / 1 / 1 / -1;
        padding: 1rlh 1rlh 0 1rlh;
    }
    h1 {
        margin: 0;
        font-size: 2rem;
        font-weight: 600;
    }
    menu {
        list-style: inside none;
        padding: 0;
        margin: 0 auto;
        inline-size: clamp(375px, 70ch - 2rlh, 100% - 2rlh);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: end;
        gap: .5rlh;
        background-color: transparent;

        li {
            display: flex;
        }
    }
    a:any-link {
        text-decoration: none;
        color: var(--link-text-color);
    }
    button {

        svg {
            stroke: var(--link-text-color);
            vector-effect: non-scaling-stroke;
        }
    }
    .clear-button svg {
        stroke: indianred;
    }
}

@scope (.page-body) {
    :scope {
        anchor-name: --main-area;
        display: grid;
        grid-column: 2;
        grid-row: 2;
        grid-template-rows: subgrid;
    }
    textarea {
        display: block;
        margin-inline: auto;
        overflow-y: scroll;
        scrollbar-width: thin;
        scrollbar-color: ButtonFace transparent;
        resize: none;
        font-size: 1rem;
        line-height: 1.5;
        font-family: ui-sans-serif, sans-serif;
        inline-size: 100%;
        padding: 1rlh;
        background-color: #ffffff0e;
        outline: 1px solid #ffffff30;
        border: 0 none;

        background-image: linear-gradient(to bottom, transparent 0 calc(1rlh - 1px), #ffffff10 calc(1rlh - 1px) calc(1rlh));
        background-size: 100% 1rlh;
        background-origin: padding-box;
        background-attachment: local;

        &:focus-visible {
            outline: 1px solid #ffffff50;
        }
    }
}

@scope (.page-footer) {
    :scope {
        grid-area: 3 / 1 / 3 / -1;
        padding: .5rlh;
    }
    a:any-link {
        text-decoration: none;
    }

}

@scope (.help-popup) {
    :scope:popover-open {
        inline-size: clamp(375px, 40ch, 100% - 2rlh);
        block-size: 50dvb;
        overflow-y: scroll;
        scrollbar-width: thin;
        scrollbar-color: ButtonFace transparent;
        background-color: #212121;
        border: 1px solid;

        &::backdrop {
            background-color: #00000080;
        }
    }
    table {
        table-layout: fixed;
        inline-size: 100%;
        border-collapse: collapse;
    }
    td {
        padding: .25rlh;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #444;

        &:first-child {
            font-family: monospace;
        }
    }
}