/* Thin scrollbars in the text areas and the preview, as in every tool */
.tool-code textarea,
.md-preview {
    scrollbar-width: thin;
}

#markdown_input, #markdown_output, #html_output {
    height: 300px;
}

@media (max-width: 768px) {
    #markdown_input, #markdown_output, #html_output {
        height: 200px;
    }
}

/* The textareas are form-control-sm; the preview keeps the full text size, so it takes only their radius */
.md-preview {
    overflow: auto;
    border-radius: var(--bs-border-radius-sm);
}

/* showdown writes a plain <table>, without the bordered classes a tool description's tables get */
.md-preview table {
    margin-bottom: 1rem;
}
.md-preview th,
.md-preview td {
    border: var(--bs-border-width) solid var(--ck-border);
}

/* The preview has the non-editable fill, nearly the card's colour, where the description's white chips
   would vanish; these are the fills that stand out most on it in each theme */
.md-preview code,
.md-preview pre {
    background-color: var(--ck-bg);
}
[data-bs-theme="dark"] .md-preview code,
[data-bs-theme="dark"] .md-preview pre {
    background-color: var(--ck-surface-2);
}