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

    --editor-size: 50%;
}

* {
    box-sizing: border-box;
}

body {
    color-scheme: light dark;
    font-family: sans-serif;
    
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    margin: 0;
    padding: var(--half-spacing);
    
    & > header {
        padding: var(--spacing);
        & h1 {
            margin: 0;
        }
    }

}

@media (prefers-color-scheme: dark) {
  body {
    background: black;
    color: white;
  }
}

header {
  & #think-controls {
    display: flex;
    gap: var(--spacing);
    margin: 0;
  }
}

#editor-size-input + output {
  width: 5em;
}

.file-path {
  font-family: monospace;
}


.think-editor {
    display: grid;
    gap: var(--spacing);
    height: 100%;
    overflow: hidden;
    --col-1-width: auto;
    grid-template: 
        "nav editor preview" min-content 
        "log editor preview" 1fr
        / var(--col-1-width) var(--editor-size) var(--preview-size)
    ;
    
    &:has(#main-nav[open], #log[open]) {
        --col-1-width: 20em;
    }
    
    & > #main-nav {
        grid-area: nav;
    }
    & > #log {
        grid-area: log;
        width: 100%;
        overflow: auto;
    }

    & .dragging {
      background: red;
    }

    & summary {
      background: #eee;
    }
    
    & > #main-nav > nav {
        display: flex;
        flex-direction: column;
        gap: var(--spacing);

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

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

                & > a {
                    text-decoration: none;
                }
            }

            & .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 {
        overflow-x: hidden;
        flex-grow: 1;
        flex-basis: var(--editor-size);
        max-height: 85vh;
        grid-area: editor;
        
        & #editor-controls {
            position: sticky;
            top: 0;
            display: flex;
            gap: var(--spacing);
            justify-content: space-between;

            & > details {
                text-align: right;

                & > summary {
                    user-select: none;
                }

                & button {
                    margin: var(--half-spacing) 0;
                }
            }
            background: white;
            z-index: 1;
        }

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

    & #preview {
        display: flex;
        flex-direction: column;
        grid-area: preview;

        &[open] {
          flex-grow: 1;
          flex-shrink: 1;
          flex-basis: calc(100% - var(--editor-size));
        }

        & > summary {
          text-align: right;
        }
        
        & > iframe {
            width: 100%;
            height: calc(100% - 3em);
            border: none;
        }
        
        &[closed] > iframe {
            display: none;
        }
    }
}

#file-form {
    overflow: auto;
    max-width: 100%;
}
@media (max-width: 100ch) {
    html {
        font-size: min(3vw, 16px);
    }
    body {
      grid-template-columns: calc(100svw - var(--spacing));
    }
    .think-editor {
        overflow: visible;
        grid-template:
          "nav"
          "log"
          "editor"
          "preview"
        ;

        & > * ~ * {
            border-top: medium solid #888;
            margin-top: var(--spacing);
        }

        & 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;
        }
    }
}