*, *::before, *::after {
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
}
textarea {
    height: 10em;
    resize: vertical;
}
abbr {
    cursor: help;
}
hr {
    width: calc(100% - 1em);
}
main {
    display: grid;
    grid-template-columns: 20em 1fr;
    gap: 1em;
}
.combinator-controls {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: .5em;
}
.combinator-controls > label {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
}
.combinator-details-wrapper {
    overflow: scroll;
    height: 100%;
}
.combinator-btns {
    display: flex;
    gap: 0.5em;
    width: 100%;
    height: 1.5em;
}
.combinator-btns > button {
    flex: 1 1 100%;
}
.combinator-preview {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content 1fr 2fr;
    height: 100vh;
    overflow: hidden;
    gap: 0;
}
.combinator-preview-wrapper {
    overflow: hidden;
    display: flex;
    flex-flow: column nowrap;
}
.combinator-preview-wrapper h2 {
    margin: 0;
    padding: .15em 0 .15em 1em;
}
.combinator-preview table {
    align-self: flex-start;
    border-collapse: collapse;
}
.combinator-preview table th {
    text-align: end;
}
.combinator-preview table th,
.combinator-preview table td {
    padding: 0.15em 0.5em;
}
#combinator-state.state-stopped {
    color: orange;
}
#combinator-state.state-running {
    color: lime;
}
#combinator-error {
    background-color: rgba(192,0,0,0.75);
    padding: 0.5em 1em;
    width: calc(100% - 1em);
    margin: 1em 0;
    text-align: center;
}
#combinator-error:empty {
    display: none;
}
@media screen and (width < 50em) {
    main {
        grid-template-columns: calc(100vw - 1em);
        justify-content: center;
    }
    .combinator-preview {
        height: unset;
        grid-template-rows: unset;
    }
    .combinator-details-wrapper {
        height: unset;
    }
    @media (hover: none), (hover: on-demand), (-moz-touch-enabled: 1), (pointer:coarse) {
        html, body {
            height: 100%;
        }    
        h1 {
            margin: 0;
            padding: 0;
        }
        textarea {
            height: 5em;
        }
    }
}