@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');
:root {
    --margin: 5rem;
    --dark: black;
    --light: white;
    --fg: var(--dark);
    --bg: var(--light);
    --accent-dark: darkgrey;
    --accent-light: lightgrey;
    --focus-width: 2px;
    --transition: 0;
}
.dark .invert {
    --bg: var(--light);
    --fg: var(--dark);
}

.invert, .dark {
    --fg: var(--light);
    --bg: var(--dark);
    background-color: var(--bg);
    color: var(--fg);
}
body {
    background-color: var(--bg);
    color: var(--fg);
    font-family: "Atkinson Hyperlegible", serif;
    padding-left: var(--margin);
    --margin-count: 2;
    &.wide {
        width: max-content;
        --margin-count: 1;
    }
    &:not(.wide) {
        padding-right: var(--margin);
    }
}

body {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: calc(100% - var(--margin-count) * var(--margin));
    header{
        display: flex;
        flex-direction: column;
        align-items: center;
        &>nav{
            width: 100%;
            ol {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                align-items: center;
                &>li {
                    position: relative;
                    &:first-child>a:not(.brand){
                        position: absolute;
                        top: 50%;
                    }
                    list-style: none; 
                }
            }
        }
    }
    main {
        --entries-col: 1;
        overflow-x: visible;
        ol.entries {
            display: flex;
            flex-direction: column;
            padding-left: 0;
            &>li.entry {
                list-style: none;
                width: calc(100% / var(--entries-col));
                padding-left: unset;
                border-style: solid;
                border-width: 2px;
                border-color: transparent;
                box-sizing: border-box;
                &:focus-within {border-color: unset;}
                ol.items {
                    padding-left: 0;
                    display: flex;
                    flex-wrap: wrap;
                    &>li.item {
                        border-width: 2px;
                        border-style: solid;
                        border-color: transparent;
                        box-sizing: border-box;
                        width: calc(100%/var(--items-columns, 1));
                        &:focus-within {border-color: unset;}
                    }
                }
            }
        }
    }
    footer {
        section.links {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
    }
}

.toolbar, ol[role=toolbar], ul[role=toolbar] {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    &:first-child {
        &>li {
            padding-top: .5em;
            padding-bottom: .5em;
        }
    }
    &>li {
        list-style-type: none;
        padding-left: 1ch;
        padding-right: 1ch;
        
    }
}

.sticky-toolbar {
    form#entries {
        
        /* box-sizing: border-box; */
        width: 100%;
        padding-left: 1em;
        padding-right: 1em;
        
        display: flex;
        align-items: center;
        background: var(--bg);
        position: sticky;
        bottom: 0;
        &>ol {
            justify-content: space-around;
            width: 100%;
        }
    }
}

a.brand>img {
    height: 2rem;
}

.jp-Cell a.brand img {filter: invert(100%);}



.nv:not(:focus):not(:focus-within):not(:active) {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
li.search, input[name=q] {
    width: 100%;
}
ol.tags {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    &>li {
        background-color: var(--fg);
        color: var(--bg);
        border-radius: 50px;
        list-style: none;
        padding-left: 1ch;
        padding-right: 1ch;
    }
}

.bg {
    background: var(--bg);
}

form.item {
    input, textarea {
        width: 100%;
    }
}
section.paginate {
    display: flex;
    align-items: center;
    &>dl {
        display: flex;
        &>dt, &>dd {
            margin-left: 1em;
            margin-right: 1em;
            display: inline;
        }
    }
}
li.selected {display: none;}
a[tabindex="-1"] {
    display: flex;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    &::after {
        margin-top: .5em;
        content: "coming soon!";
        display: inline-block;
        transform-origin: 50% 50%;
        transform: rotateZ(10deg);
    }
}
span.service{
    text-decoration: none;
    font-size: 250%;
    display: inline-block;
    width: 1em;
    height: 1em;
    text-align: center;
    border-radius: 50%;
    text-transform: uppercase;
}
/* a.id{
    &>
    display: flex;
    flex-direction: row;
    align-items: center;
} */
a[target='_blank']::after {content: '\29C9';}

li.item {
    form.item {
        display: none;
    }
    &.edit {
        section.output {
            display: none;
        }
        .read-only {
            display: non;
        }
        form.item {
            display: unset;
        }
        .edit-only {
            display: unset;
        }
    }

}