/* defaults */

* {
    box-sizing: border-box;
    font-family: inherit;
}

button,
input {
    font-size: inherit;
    font-family: inherit;
}

html,
body {
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

body {
    display: flex;
    font-size: 1.6rem;
    line-height: 1.4;
}

/* user settings */
:root {
    --accent-a: #6655d9;
    --accent-b: #b72525;
    --palette-contrast: 1;

    --font-body: sans-serif;
    --font-mono: monospace;
}

/* procedural palette; kind of a lot of copy-pasting, but there isn't really a
   better way to do this... */
/* prettier-ignore */
:root {
    /* palette colours; these have a short naming scheme to reduce annoyance
       when using them */
    --p1a: color-mix(in oklch, var(--accent-a), var(--accent-b) 0%);
    --p2a: color-mix(in oklch, var(--accent-a), var(--accent-b) 50%);
    --p3a: color-mix(in oklch, var(--accent-a), var(--accent-b) 100%);
    --palette-l1: calc(1 + var(--palette-contrast) * 0.8);
    --palette-l2: calc(1 + var(--palette-contrast) * 0.6);
    --palette-l3: calc(1 + var(--palette-contrast) * 0.4);
    --palette-l4: calc(1 + var(--palette-contrast) * 0.2);
    --palette-l5: calc(1 + var(--palette-contrast) * 0.0);
    --palette-l6: calc(1 + var(--palette-contrast) * -0.2);
    --palette-l7: calc(1 + var(--palette-contrast) * -0.4);
    --palette-l8: calc(1 + var(--palette-contrast) * -0.6);
    --palette-l9: calc(1 + var(--palette-contrast) * -0.8);
    --palette-c1: calc(1 + var(--palette-contrast) * -0.8);
    --palette-c2: calc(1 + var(--palette-contrast) * -0.6);
    --palette-c3: calc(1 + var(--palette-contrast) * -0.4);
    --palette-c4: calc(1 + var(--palette-contrast) * -0.2);
    --palette-c5: calc(1 + var(--palette-contrast) * 0);
    --palette-c6: calc(1 + var(--palette-contrast) * 0.2);
    --palette-c7: calc(1 + var(--palette-contrast) * 0.4);
    --palette-c8: calc(1 + var(--palette-contrast) * 0.6);
    --palette-c9: calc(1 + var(--palette-contrast) * 0.8);
    --p11: oklch(from var(--p1a) calc(l * var(--palette-l1)) calc(c * var(--palette-c1)) h);
    --p12: oklch(from var(--p1a) calc(l * var(--palette-l2)) calc(c * var(--palette-c2)) h);
    --p13: oklch(from var(--p1a) calc(l * var(--palette-l3)) calc(c * var(--palette-c3)) h);
    --p14: oklch(from var(--p1a) calc(l * var(--palette-l4)) calc(c * var(--palette-c4)) h);
    --p15: oklch(from var(--p1a) calc(l * var(--palette-l5)) calc(c * var(--palette-c5)) h);
    --p16: oklch(from var(--p1a) calc(l * var(--palette-l6)) calc(c * var(--palette-c6)) h);
    --p17: oklch(from var(--p1a) calc(l * var(--palette-l7)) calc(c * var(--palette-c7)) h);
    --p18: oklch(from var(--p1a) calc(l * var(--palette-l8)) calc(c * var(--palette-c8)) h);
    --p19: oklch(from var(--p1a) calc(l * var(--palette-l9)) calc(c * var(--palette-c9)) h);
    --p21: oklch(from var(--p2a) calc(l * var(--palette-l1)) calc(c * var(--palette-c1)) h);
    --p22: oklch(from var(--p2a) calc(l * var(--palette-l2)) calc(c * var(--palette-c2)) h);
    --p23: oklch(from var(--p2a) calc(l * var(--palette-l3)) calc(c * var(--palette-c3)) h);
    --p24: oklch(from var(--p2a) calc(l * var(--palette-l4)) calc(c * var(--palette-c4)) h);
    --p25: oklch(from var(--p2a) calc(l * var(--palette-l5)) calc(c * var(--palette-c5)) h);
    --p26: oklch(from var(--p2a) calc(l * var(--palette-l6)) calc(c * var(--palette-c6)) h);
    --p27: oklch(from var(--p2a) calc(l * var(--palette-l7)) calc(c * var(--palette-c7)) h);
    --p28: oklch(from var(--p2a) calc(l * var(--palette-l8)) calc(c * var(--palette-c8)) h);
    --p29: oklch(from var(--p2a) calc(l * var(--palette-l9)) calc(c * var(--palette-c9)) h);
    --p31: oklch(from var(--p3a) calc(l * var(--palette-l1)) calc(c * var(--palette-c1)) h);
    --p32: oklch(from var(--p3a) calc(l * var(--palette-l2)) calc(c * var(--palette-c2)) h);
    --p33: oklch(from var(--p3a) calc(l * var(--palette-l3)) calc(c * var(--palette-c3)) h);
    --p34: oklch(from var(--p3a) calc(l * var(--palette-l4)) calc(c * var(--palette-c4)) h);
    --p35: oklch(from var(--p3a) calc(l * var(--palette-l5)) calc(c * var(--palette-c5)) h);
    --p36: oklch(from var(--p3a) calc(l * var(--palette-l6)) calc(c * var(--palette-c6)) h);
    --p37: oklch(from var(--p3a) calc(l * var(--palette-l7)) calc(c * var(--palette-c7)) h);
    --p38: oklch(from var(--p3a) calc(l * var(--palette-l8)) calc(c * var(--palette-c8)) h);
    --p39: oklch(from var(--p3a) calc(l * var(--palette-l9)) calc(c * var(--palette-c9)) h);
}

.palette-preview {
    td {
        width: 6.4rem;
        height: 3.2rem;
    }
}

:root {
    background-color: var(--p11);
    color: var(--p19);
    --ui-border: 0.1rem solid var(--p13);

    font-family: var(--font-body);
}

/* layouts */

.fullscreen {
    width: 100vw;
    height: 100vh;
}

.center-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.room {
    width: 100%;
    height: 100%;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

    .room-content {
        max-width: 100%;
        max-height: 100%;
        overflow: hidden;
    }
}

mofu-room-chat {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    > ol.messages {
        flex-grow: 1;

        overflow-y: auto;

        list-style: none;
        padding: 0.5lh 0;
        margin: 0;

        > li {
            display: flex;

            padding: 0 3ch;

            > .nickname {
                font-weight: 800;
                padding-right: 1ch;
            }
        }
    }

    > .controls {
        flex-shrink: 0;

        display: flex;
        flex-direction: row;

        border-top: var(--ui-border);

        > input {
            flex-grow: 1;
        }
    }
}

/* broom closet pages... stuff where you do administrative actions and not actually chat.
   those have a well-defined layout featuring a sidebar */
.backrooms {
    --content-width: 80ch;

    display: grid;
    gap: 1.6rem;
    grid-template-columns:
        1fr minmax(0, 30ch) minmax(0, var(--content-width))
        1fr;

    &.compact {
        --content-width: 40ch;
    }

    > .sidebar {
        grid-column: 2;
    }

    > main {
        grid-column: 3;
    }
}

/* markup elements */

h1,
h2,
h3 {
    margin: 0;
    padding: 0.25lh 0;
}

h1 {
    font-weight: 850;
}

h2,
h3 {
    font-weight: 800;
}

p {
    margin: 0;
    padding: 0.5lh 0;
}

a {
    color: var(--p27);

    &:visited {
        color: var(--p25);
    }
}

hr {
    border: none; /* reset */
    border-bottom: var(--ui-border);
    margin: 0.5lh 0;
}

table {
    border-collapse: collapse;
    margin: 0.5lh 0;
}

td,
th {
    padding: 0.8rem 1.2rem;
    border: var(--ui-border);
}

/* navigation */

.backrooms nav {
    padding: 0.5lh 0;

    ul {
        list-style: none;
        padding: 0;
        margin: 0;

        display: flex;
        flex-direction: column;
    }
}