:root {
    --font-ui: 'Source Sans 3', system-ui, sans-serif;
    --font-text: 'Source Serif 4', Georgia, serif;
    font-family: var(--font-text), sans-serif;
    font-synthesis: none;
    scrollbar-gutter: stable;

    --inner-width-normal: 48rem;
    --inner-padding-normal: max(calc((100% - var(--inner-width-normal)) / 2), 1rem);
}

body {
    margin: 0;
    min-height: 100dvh;
}

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

.prose {
    margin: 1rem 0;
    color: oklch(.4 0 0);

    pre {
        white-space: pre-wrap;
    }

    table {
        border: 1px solid oklch(.4 0 0);
        border-radius: 4px;
        border-spacing: 0;

        margin-left: -2rem;
        width: calc(100% + (2rem * 2));

        :first-child th {
            border-bottom: 1px solid oklch(.8 0 0);
        }

        td,
        th {
            padding: .1rem .5rem;
            border-right: 1px solid oklch(.8 0 0);

            &:last-of-type {
                border-right: 0;
            }
        }

        th {
            font-family: var(--font-ui);
            text-transform: uppercase;
            text-align: left;
            background: oklch(.95 0 0);
            color: oklch(.4 0 0);
            font-size: .9rem;
            padding-top: .25rem;
            font-weight: 500;
        }
    }

    > :is(ul, ol) {
        padding: 0;
    }

    ol {
        counter-reset: list 0;
        list-style: none;
        margin-bottom: 1.5rem;
    }

    ol li {
        counter-increment: list;
        position: relative;
        margin-bottom: .5rem;
    }

    ol li::before {
        content: counter(list);
        position: absolute;
        right: calc(100% + .5rem);
        border: 1px solid currentcolor;
        border-radius: 2px;
        font-size: .85em;
        line-height: 1;

        display: flex;
        align-items: center;
        justify-content: center;
        height: 1.1rem;
        min-width: 1.1rem;
        margin-top: .15rem;
        font-family: var(--font-ui);
        font-weight: 550;

        --padding: .25rem;
        --letter-spacing: .1em;
        letter-spacing: var(--letter-spacing);
        padding: 0 var(--padding);
        padding-right: calc(var(--padding) - var(--letter-spacing));
    }

    h2 {
        margin-bottom: .5rem;
        font-size: 1.25rem;
        font-weight: 600;
        color: black;

        display: flex;
        align-items: baseline;
        gap: .5rem;

        white-space: nowrap;

        &::after {
            content: '';
            display: block;
            width: 100%;
            height: 2px;
            background: lightgray;
        }

        + :is(p, ol, ul) {
            margin-top: 0;
        }
    }
}

nav.actions, .site-nav {
    display: flex;
    gap: .25rem;
    --background: oklch(.9 0 0);
}

:is(nav.actions, .site-nav) :is(a, button), :is(a, button).action {
    --background: oklch(.9 0 0);
    display: flex;
    gap: .25rem;
    align-items: center;
    font-family: 'Arial', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    font-size: 1.1rem;
    width: max-content;
    border: none;
    cursor: pointer;
    border-bottom: 1px transparent solid;
    padding: .1rem .25rem;
    background-color: transparent;
}

:is(nav.actions, .site-nav) :is(a, button):hover, :is(a, button).action:hover {
    background: var(--background);
    border-color: black;
}

:is(nav.actions, .site-nav) :is(a, button):active, :is(a, button).action:active {
    background: black;
    border-color: var(--background);
    color: white;
}


.site-nav {
    display: flex;
    gap: .25rem;

    [aria-selected] {
        background: var(--background);
    }

    .understand:is([aria-selected], :hover) {
        --background: yellow;
    }

    .converse:is([aria-selected], :hover) {
        --background: magenta;
    }

    .manage:is([aria-selected], :hover) {
        --background: cyan;
    }

    .oversee:is([aria-selected], :hover) {
        --background: lime;
    }
}

.auth {
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 600;

    display: flex;
    align-items: baseline;
    align-self: end;

    span {
        margin-right: auto;
    }

    a:first-of-type {
        margin-left: .5rem;
    }

    a {
        text-transform: uppercase;
        text-decoration: none;
        color: inherit;
        padding: .1rem .5rem;
        font-weight: 400;
        border-bottom: 1px transparent solid;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;


        &:hover {
            background: oklch(.9 0 0);
            border-color: black;
        }

        &:active {
            background: black;
            color: oklch(.9 0 0);;
        }
    }
}

.big {
    font-size: clamp(12rem, 40vw, 35rem);
    font-family: var(--font-text);
    line-height: 1;
    margin: 0;
    letter-spacing: -.05em;
    font-weight: 400;
    user-select: none;
    color: oklch(.3 0 0);
    width: 100vw;
    overflow: hidden;
    font-style: italic;
    margin-bottom: -0.35em;
}

form.fancy {
    display: flex;
    flex-direction: column;
    gap: 1rem;

}

form.fancy label, label.fancy {
    display: flex;
    flex-direction: column;
    gap: .25rem;

    span:not(.subtitle) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row-reverse;

        gap: .25rem;
        font-family: var(--font-ui);
        font-weight: 500;
        text-transform: uppercase;
        font-size: .9rem;
        padding: 0 .25rem;
    }

    span.subtitle {
        font-size: .8rem;
        margin-top: .1rem;
        margin-left: .1rem;
        color: oklch(.5 0 0);
    }

    input {
        padding: .25rem .5rem;
        font-family: var(--font-text);
        font-size: 1rem;
        border: 1px solid lightgray;

        &:focus-visible {
            outline: 4px solid oklch(.9 0 0);
            border-color: oklch(.6 0 0);
        }
    }
}

.buttons {
    display: flex;
    gap: .25rem;
    justify-content: space-between;
}

.infobox {
    margin: 0;
    font-family: var(--font-ui);
    font-weight: 500;
    background: wheat;
    padding: .25rem .5rem;
    font-size: .9rem;

    display: flex;
    align-items: center;
    gap: .25rem;

    &.error {
        background: lightpink;
    }
}

.site-header {
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: space-between;
    border-bottom: 1px oklch(.9 0 0) solid;

    .auth {
        height: 100%;

        a {
            height: 100%;
        }
    }
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    max-width: 48rem;
    margin: 2rem auto;
}

hgroup {
    display: flex;
    flex-direction: column;
    font-family: var(--font-ui);

    h1 {
        font-size: 1.15rem;
        margin: 0;
    }

    p {
        margin: 0;
        font-size: .9rem;
    }
}