label { display: block; margin-bottom: 1rem; }

wc-tab-panel {
    --tab-gap: 1rem;
}

#specification {
    width: 100%;
    height: 40ch;
}

#sample-output {
    width: 100%;
    height: 6em;
    overflow: hidden;
    word-break: break-all;
    white-space: normal;
}

.code-with-copy {
    display: grid;
    grid-template-columns: minmax(100px, auto) minmax(auto, 100px);
    flex-direction: column;
}
.code {
    overflow: auto;
    height: 20ch;
    grid-column: 1
} 
.copy-preceding-text {
    margin: 10px;
    height: 2em;
}
.code.compact {
    height: 5ch;
    word-wrap: break-word;
    white-space: normal;
}

.generator-settings {
    padding: 20px;
}


main {
    max-width: 1400px;
    margin: auto;
}
@media (min-width: 110ch) {
    main {
        display: grid;
        grid-template-columns: minmax(55ch,50%) minmax(55ch,50%);
        grid-gap: 1em;
    }
    main > header, main > footer {
        grid-column: 1 / 3; 
    }
}

@media (max-width: 110ch) {
    main {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 1em;
    }
    main > header, main > footer {
        grid-column: 1; 
    }
}

main > section {
}

main > section > wc-tab-panel {
    height: 100%;
}

main > section > wc-tab-panel > [slot="content"] {
    border: 1px solid #ccc;
    background: #fafafa;
    padding: 1em;
}


main > section > wc-tab-panel > [slot="content"] > wc-tab-panel > [slot="content"] {
    border: 1px solid #ddd;
    background: #f5f5f5;
    padding: 0.5em;
}


main > header {
    display: grid;
    grid-template-columns: minmax(100px, auto) 8ch;
}
main > header > h1 > .github-link {
    margin-left: auto;
}
main > header > h2 {
    color: #999;
    padding-left: 3em;
}
main > footer {
    margin: 5em;
    text-align: center;
}