/* Frontend Markdown editor (django-markdownx) — fit the admin widget into the
   terminal theme. markdownx renders:
     .markdownx > textarea.markdownx-editor + .markdownx-preview
   We stack them in a single column so the live preview sits directly *under* the
   editor, and theme the preview pane. */

.markdownx {
    display: grid;
    gap: 1rem;
    align-items: start;
}

/* The textarea keeps a fixed start height and is only manually resizable (taller
   or shorter, but never below the start height — native resize honours
   min-height). Auto-growing to fit content is disabled via
   MARKDOWNX_EDITOR_RESIZABLE = False so the preview below stays reachable. */
.markdownx-editor {
    min-height: 24rem;
    font-family: var(--app-font-mono);
    font-size: 0.92rem;
    line-height: 1.55;
    resize: vertical;
}

.markdownx-preview {
    min-height: 24rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-bg-soft);
    color: var(--app-text);
    overflow-wrap: anywhere;
}

/* Compact rhythm for the rendered preview so it reads like the published post
   without pulling in the full .app-prose rules. */
.markdownx-preview > :first-child {
    margin-top: 0;
}

.markdownx-preview img {
    max-width: 100%;
    height: auto;
}

.markdownx-preview pre {
    overflow-x: auto;
}