@import url("/assets/iosevka/Iosevka.css");
@import url("/assets/iosevka_aile/IosevkaAile.css");

:root {
    color-scheme: light dark;

    /* Fonts */
    --f-mono: "Iosevka";
    --f-sans: "Iosevka Aile";

    /* Colours */
    --c-bg: light-dark(#fcf7f3, #262622);
    --c-bg--elevation-slight: color-mix(in oklch, var(--c-bg) 100%, contrast-color(var(--c-bg)) 15%);
    --c-bg--elevation-medium: color-mix(in oklch, var(--c-bg) 100%, contrast-color(var(--c-bg)) 20%);

    --c-fg: light-dark(#262622, #fcf7f3);
    --c-outline: light-dark(#23231f, #ece0d7);
    --c-emphasis: light-dark(#7c0b65, #f65fd6);
    --c-emphasis-fg: #fcf7f3;
    --c-danger: #3cbfe7;
    --c-danger-fg: #262622;

    /* Border radii*/
    --r-slight: 10px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    min-height: 100vh;
    display: grid;
    grid-template-areas: ". content .";
    grid-template-columns: 1fr 70ch  1fr;

    padding-bottom: 1.5rem;

    background-color: var(--c-bg);
    color: var(--c-fg);
    font-family: var(--f-sans), sans-serif;
}

@media screen and (width < 600px) {
    body { display: flex; flex-direction: column; }
    main { max-width: 100vw; margin-inline: 1rem; }
}

p {
    text-wrap: pretty;
    font-family: var(--f-sans), sans-serif;
}

main {
    z-index: 2;
    grid-area: content;
    max-width: min(60ch, 100vw);
}

ul {
    padding-left: 1rem;
}

li::marker {
    content: "* ";
    font-family: var(--f-mono), monospace;
}

h1 {
    font-weight: 800;
}

a:link {
    color: var(--c-emphasis);

    & h3 {
        color: var(--c-fg);
    }
}



div#atproto-leaflet {
    display: flex;
    flex-direction: column;
    container-type: inline-size;

    @container (width < 600px) {
        .entry {
            max-width: calc(100vw - 2rem);
        }
    }
}
.entry, .log {
    transition: width .1s linear;
    box-sizing: border-box;
    position: relative;

    padding: 5px 10px;
    outline: 2px solid var(--c-outline);
    &:not(:first-child) { margin-top: 1rem; }

    & .base-anchor {
        position: static;
        text-decoration: none;

        &::before {
            content: "";
            position: absolute;
            display: block;

            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        &::after {
            content: '🡕';
            position: absolute;
            display: block;
            bottom: 1rem;
            right: 1rem;
            width: 12px;
            height: 12px;

            color: var(--c-outline);
        }
    }

    & .title {
        margin-top: 5px;
    }

    & p {
        text-wrap: pretty;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    & a {
        max-width: 20ch;
        white-space: nowrap;
    }

    & img {
        max-width: 100%;
    }
}

.show-hover { opacity: .2; transition: opacity .2s; }
.log:hover .show-hover {
    opacity: 1;
}

footer:hover .show-hover {
    opacity: 1;
}

.log {
    display: flex;
    flex-direction: column;
    & button { margin-top: 1rem; &:last-child { margin-bottom: 1rem; }}
}

time {
    font-family: var(--f-mono), monospace;
}

footer { margin-top: 1rem; }

.unimportant {
    opacity: .3;
}

form {
    display: flex;
    flex-direction: column;
    & > *:not(:last-child, input.with-typeahead) {
        margin-bottom: 1rem;
    }

    & textarea {
        border-radius: var(--r-slight);
        resize: none;
        height: 5rem;

        padding: .6rem;
        font-size: 1.5em;

        border: none;

        &:focus, &:focus-visible {
            outline: 2px solid var(--c-emphasis);
        }
    }

    & > label {
        font-style: italic;
    }

    & input:not([type="submit"]) {
        background-color: var(--c-bg--elevation-medium);
        border: none;

        padding-inline: .6rem;
        padding-block: .9rem;

        font-family: var(--f-sans), sans-serif;

        &.with-typeahead {
            border: 1px solid var(--c-outline);
            outline: none;

            & + .typeahead-results {
                border: 1px solid var(--c-outline);
                border-top: none;
            }

            & + .typeahead-results:not(.show) {
                display: block;
                height: 0;
                overflow: clip;
                border: none;
                margin-bottom: 1rem;
            }
        }
    }
}

.dangerous {
    --emphasis: var(--c-danger);
    --emphasis-fg: var(--c-danger-fg);

    &:is(a.router-link, div, button, li) {
        background-color: var(--emphasis);
        color: var(--emphasis-fg);

        & * { color: var(--emphasis-fg); }

        font-weight: 600;
    }

    &:not(a.router-link, div, button) {
        color: var(--emphasis);
    }
}

nav ul { padding: 0; }

nav:has(li > a.router-link) ul {
    list-style-type: none;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    gap: 2rem;

    & li::marker {
        content: "";
    }
}


nav li:has(a.router-link) {
    display: inline-block;
    width: 100%;

    background-color: color-mix(in oklab, var(--c-emphasis) 100%, transparent 50%);
    & * { color: var(--c-emphasis-fg); }
}

:is(nav li:has(a.router-link), button) {
    &:is(button) {
        background-color: var(--c-bg--elevation-slight);
        border: 1px solid var(--c-outline);
    }

    font-family: var(--f-mono), monospace;
    border-radius: 0; /* webkit moment */
    color: var(--c-fg);

    padding-block: .2rem;
    padding-inline: .4rem;
    text-align: center;
}

.typeahead-results {
    display: none;

    &.show {
        display: flex;
        flex-direction: column;
    }

    & .result {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding-inline: .7rem;
        padding-block: .5rem;

        font-size: .85em;
    }
}

.result {
    &:hover {
        background-color: var(--c-bg--elevation-medium);
    }

    & img, & .placeholder {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;

        &:is(.placeholder){ background: var(--c-bg); }
    }

    & .info { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
    & .name {
        color: var(--c-fg);
        display: inline-block;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    & .handle { opacity: .5; font-size: 0.75rem; display: inline-block; }
}

/* hide elements that are interactively shown */
.hidden { display: none; }

.h-center {
    justify-content: center;
}