.editor-wrapper {
    display: flex;
    overflow-x: clip;       /* Clip the raw HTML to avoid sideways scroll when hidden */
    overflow-y: hidden;     /* Hide the raw HTML when it extends beyond the editor */
    margin: -8px;           /* Set so that the .ProseMirror padding starts from edges */
    padding: 8px;
    background: white;
    color: black;
}
@media (prefers-color-scheme: dark) {
    .editor-wrapper {
        background: black;
        color: white;
    }
}

.editor {
    min-width: 50%;         /* Keep the editor half the screen when the raw HTML shows up */
}

.htmldiv {
    display: block;
    flex: min-content;
    min-width: 0;           /* When we flex to zero, this will be the width */
    max-width: 50%;         /* When we flex to 1, this will be the width */
    max-height: 100vh;      /* Even when we flex to 0 to hide, keep height limited to avoid a scroll mess */
}

.htmldiv-body {
    background-color: #F8F8F8;
    padding: 8px;
    margin: 30px 0 0 16px;
    white-space: pre-wrap;
    font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace;
    font-size: inherit;
    overflow: hidden;       /* Text will likely extend below the editor, but we can scroll to see it */
}
@media (prefers-color-scheme: dark) {
    .htmldiv-body {
        background-color: #808080;
    }
}