html {
    --main-bg: #eee;
    --main-fg: #000;
    --muted-fg: #888;
    --input-bg: #fff;
    --input-bg-disabled: #ddd;
    --input-fg: #000;
    --input-fg-disabled: #666;
    --input-border: #ddd;
    --button-bg: #44e;
    --button-bg-hover: #55f;
    --button-bg-active: #aaf;
    --button-bg-disable: #339;
    --button-fg: #fff;
    --button-fg-disable: #bbb;
    --link-fg: #44e;
    --run-bg: #2c3;
    --run-bg-hover: #3d4;
    --warning-bg: #ee7;
    --well-bg: #ccc;
    --quickref-code-fg: #fbc;
    --quickref-code-border: #888;
    --quickref-border: #aaa;
    --quickref-alt-bg: #fff;
    --output-bg: #fff;
    --debug-pre-bg: #aac;
    --debug-post-fg: #888;
    --debug-omit-bg: #aac;
}
html.theme-dark {
    --main-bg: #222;
    --main-fg: #fff;
    --muted-fg: #888;
    --input-bg: #111;
    --input-bg-disabled: #222;
    --input-fg: #fff;
    --input-fg-disabled: #888;
    --input-border: #666;
    --button-bg: #339;
    --button-bg-hover: #44a;
    --button-bg-active: #77d;
    --button-bg-disable: #227;
    --button-fg: #fff;
    --button-fg-disable: #bbb;
    --link-fg: #99e;
    --run-bg: #2a3;
    --run-bg-hover: #3b4;
    --warning-bg: #412;
    --well-bg: #333;
    --quickref-code-fg: #713;
    --quickref-code-border: #888;
    --quickref-border: #aaa;
    --quickref-alt-bg: #333;
    --output-bg: #333;
    --debug-pre-bg: #557;
    --debug-post-fg: #888;
    --debug-omit-bg: #557;
}

* {
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    margin: 1em;
    background-color: var(--main-bg);
    color: var(--main-fg);
}

h1 {
    margin: 0;
}

textarea {
    font-family: monospace;
    width: 100%;
    resize: vertical;
    margin: 0.2em 0;
    font-size: 11pt;
    background-color: var(--input-bg);
    color: var(--input-fg);
    border-color: var(--input-border);
    border-style: inset;
}
textarea:disabled {
    background-color: var(--input-bg-disabled);
    color: var(--input-fg-disabled);
}
input {
    background-color: var(--input-bg);
    color: var(--input-fg);
    border-color: var(--input-border);
    font-family: monospace;
}
input:disabled {
    background-color: var(--input-bg-disabled);
    color: var(--input-fg-disabled);
}

.btn {
    display: inline-block;
}
button, .btn {
    background-color: var(--button-bg);
    color: var(--button-fg);
    cursor: pointer;
    padding: 0.5em;
    border-width: 0;
    font-size: 11pt;
}
button:hover, .btn:hover {
    background-color: var(--button-bg-hover);
}
#run {
    background-color: var(--run-bg);
    font-size: 12pt;
}
#run:hover {
    background-color: var(--run-bg-hover);
}

button:disabled {
    background-color: var(--button-bg-disable);
    color: var(--button-fg-disable);
    cursor: default;
}

h2 {
    margin: 0.5em 0 0 0;
    font-size: 13pt;
}

h3 {
    margin: 0.5em 0 0 0;
    font-size: 11pt;
}

ol {
    margin: 0;
}

#aboutInfo {
    float: right;
    max-width: calc(100vw - 9em);
    text-align: right;
    position: relative;
    white-space: nowrap;
}

#warnings {
    padding: 0.5em 1.5em;
    background-color: var(--warning-bg);
    position: relative;
    pointer-events: all;
}
#warnings::before{
    content: '✖';
    position: absolute;
    display: block;
    cursor: pointer;
    top: 0.3em;
    right: 1em;
}
#warnings:empty {
    display: none;
}

#status {
    white-space: nowrap;
}

input.wide {
    width: 100%;
}

#generatepost {
    transition-property: background-color;
    transition-duration: 200ms;
}
#generatepost:active:not([disabled]) {
    transition-duration: 50ms;
    background-color: var(--button-bg-active);
}

#stringOutput, #debugCode, #debugState dl {
    font-family: monospace;
}
#debugState dd, #debugState li {
    font-family: monospace;
    white-space: pre-wrap;
}
#debugState {
    display: none;
    margin-left: 0;
    margin-right: 0;
}
html.debugging #debugState {
    display: block;
}

#stringInfo, #integerInfo {
    float: right;
}
#version {
    color: var(--muted-fg);
}

#debugCodePre {
    background-color: var(--debug-pre-bg);
}
#debugCodePost {
    color: var(--debug-post-fg);
}
.debug-omit {
    background-color: var(--debug-omit-bg);
}

html.show-quickref body {
    margin-right: calc(1em + 60vw);
}
html.show-quickref #quickref {
    display: block;
}
#quickref {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 60vw;
    overflow-y: scroll;
    background: var(--main-bg);
    padding: 0.5em;
    box-shadow: 0em 0em 0.5em 0em var(--main-fg);
}
#quickref table {
    border-left: solid var(--quickref-border) 1px;
    border-right: solid var(--quickref-border) 1px;
}
#quickref td {
    border-top: solid var(--quickref-border) 1px;
    padding: 0.2em 0.4em;
}
#quickref td:nth-child(even) {
    background-color: var(--quickref-alt-bg);
}
#quickref code {
    background-color: var(--quickref-code-fg);
    outline: solid var(--quickref-code-border) 1px;
    padding: 0 0.2em;
}

html {
    --tools-width: 400px;
}
@media (max-width: 800px) {
    html {
        --tools-width: 50vw;
    }
}
html.show-tools body {
    margin-right: calc(1em + var(--tools-width));
}
html.show-tools #tools {
    display: block;
}
#tools {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: var(--tools-width);
    overflow-y: scroll;
    background: var(--main-bg);
    padding: 0.5em;
    box-shadow: 0em 0em 0.5em 0em var(--main-fg);
}

dt {
    float: left;
    font-weight: bold;
}

a {
    text-decoration: none;
    color: var(--link-fg);
}

pre {
    background-color: var(--output-bg);
    padding: 0.5em;
}
pre:empty {
    display: none;
}

details {
    margin: 0.5em 0;
}
summary {
    cursor: pointer;
}
summary:hover .btn {
    background-color: var(--button-bg-hover);
}

.well {
    text-align: left;
    background-color: var(--well-bg);
    margin: 0.5em;
    padding: 0.5em;
}
.well button {
    margin: 0.3em 0;
}
.well > :first-child {
    margin-top: 0;
}
.well > :last-child {
    margin-bottom: 0;
}

.layout-diagram {
    display:inline-block;
    margin: 0;
    padding: 0;
    font-size: 70%;
    background: transparent;
}

.section-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-end;
}
#control-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    padding: 0.4em;
    margin-bottom: -0.4em;
    background: var(--main-bg);
}
#control-header > *:nth-child(n+2) {
    margin-left: 0.5em;
}
#control-header #size-info {
    flex-shrink: 0;
}
#control-header #controls {
    min-width: 160px;
}

#layout-grid {
    display: grid;
    grid-template-rows: max-content 1fr;
    grid-template-areas:
        "code"
        "in"
        "dbg";
    grid-auto-columns: 1fr;
    grid-column-gap: 1em;
}

html[data-layout=vertical] #layout-grid { }
html[data-layout=input-right] #layout-grid {
    grid-template-areas:
        "code in"
        "dbg  dbg";
}
html[data-layout=debug-right] #layout-grid {
    grid-template-areas:
        "code"
        "in  ";
}
html[data-layout=debug-right].debugging #layout-grid {
    grid-template-areas:
        "code dbg"
        "in   dbg";
}

#grid-code { grid-area: code; }
#grid-input { grid-area: in; }
#debugState { grid-area: dbg; }

@media (max-width: 600px) {
    .shortcut {
        display: none;
    }
}
@media screen and (max-width: 960px) {
    html.show-quickref .shortcut,
    html.show-tools .shortcut {
        display: none;
    }

    #quickref {
        width: 100%;
    }
    html.show-quickref body {
        overflow-y: hidden;
    }
}