:root {
    --spacing: 1em;
    --half-spacing: calc(0.5 * var(--spacing));
    --double-spacing: calc(2 * var(--spacing));

    --background: hsl(70,100%,95%);
    --color: black;
}

@media (prefers-color-scheme: dark) {
  body {
    --background: hsl(70,100%,8%);
    --default-background: black;
    --color: white;
    --button-bg: #333;
  }
}

* {
    box-sizing: border-box;
}

body {
    color-scheme: light dark;

    background: var(--background);
    color: var(--color);

    font-family: sans-serif;

    & > header {
        padding: var(--spacing);
        & h1 {
            margin: 0;
        }
    }
}

input {
    font-size: inherit;
}


body.login {
    display: grid;
    align-content: center;
    justify-content: center;
    height: 100svh;
    margin: 0;
    padding: var(--spacing);

    & header {
        text-align: center;
    }

    & form {
        display: grid;
        gap: var(--spacing);

        & div {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-flow: row;
            gap: var(--spacing);
            align-items: center;

            & label {
                grid-column: 1;
                justify-self: end;
            }

            & input {
                grid-column: 2;
            }
        }

        grid-template-rows: 2em 2em 2em;
    }
}

body.index {
    font-size: 20px;

    & main {
        padding: 0 var(--spacing);

        & #templates-list {
            list-style: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: var(--double-spacing);
            font-size: 1.5em;

            & .think {
                display: grid;
                gap: 0.5lh;
                border: thin solid;
                padding: var(--half-spacing) var(--spacing);
            }
        }

        & .thinks-list {
            display: flex;
            flex-direction: column;
            gap: var(--double-spacing);
            list-style: none;
            padding: 0;

            & details {
                &[open] > summary {
                    margin-bottom: var(--spacing);
                }
                & ul {
                    display: flex;
                    flex-direction: column;
                    gap: var(--spacing);
                }
            }

            & .think {
                & time {
                    font-size: smaller;
                }

                & .readme {
                    max-width: 80ch;
                    white-space: pre-wrap;
                }

                & .jj {
                    writing-mode: vertical-lr;
                    vertical-align: middle;
                    font-size: 0.5em;
                    color: white;
                    background: black;
                    padding: 0.2em;
                    border-radius: 0.5em;

                    &.has {
                        font-weight: bold;
                        color: lightgreen;
                    }
                }
            }
        }
    }


    & .pagination {
        display: flex;
        justify-content: space-between;
        margin-top: 2lh;

        & [rel="prev"]::before {
            content: '←';
        }
        & [rel="next"]::after {
            content: '→';
        }
    }
}

body.thing-editor {
    margin: 0;
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template:
        "header" auto
        "main" 1fr
    ;
    gap: var(--spacing);

    & main {
        display: grid;
        gap: var(--spacing);
        grid-template: "nav editor preview" / auto 3fr 2fr;
        height: 100%;

        & > nav {
            display: flex;
            flex-direction: column;
            gap: var(--spacing);

            & #file-tree {
                margin: 0;
                overflow: auto;
                flex-grow: 1;

                & > li {
                    margin-top: var(--half-spacing);
                }

                & .dir {
                    font-weight: bold;
                }

                & .dir + .file {
                    margin-top: var(--spacing);
                }
            }

            & form {
                display: grid;
                grid-template-columns: 1fr 6em;
                align-content: start;
                align-items: start;
            }

            & #make-log {
                & > pre {
                    max-width: 20em;
                    overflow: auto;
                }
            }
        }

        & #editor {
            & #editor-controls {
                display: flex;
                gap: var(--spacing);
                justify-content: space-between;

                & > details {
                    text-align: right;

                    & > summary {
                        user-select: none;
                    }

                    & button {
                        margin: var(--half-spacing) 0;
                    }
                }
            }

            & #code-editor {
                display: block;
                max-width: 50vw;
                padding-bottom: 10em;
            }
    overflow: hidden;
        }

        & #preview {
            display: flex;
            flex-direction: column;
            & > iframe {
                width: 100%;
                height: 100%;
                border: none;
            }
        }
        overflow: hidden;
    }
}

#file-form {
    overflow: auto;
    max-height: 100%;
    max-width: 100%;
}
@media (max-width: 100ch) {
    html {
        font-size: min(3vw, 16px);
    }
    body.thing-editor {
        & main {
            grid-template:
                "nav" min-content "editor" 40vh "preview"
            ;
            overflow: visible;

            & nav {
                flex-direction: row;
                flex-wrap: wrap;

                & form {
                    flex-grow: 1;
                }

                & #file-tree {
                    max-height: 7em;
                }
            }

            & #editor {
                overflow: auto;
                & #code-editor {
                    max-width: none;
                }
            }

            & #preview {
                height: 100vh;
            }
        }
    }
}