/* Markdown: the edit widget and the rendered document.

   One file rather than two because the editor's preview pane and the read-only
   surfaces render the same `.markdown-body` markup. Declared by
   WidgetEditMarkdown, WidgetViewMarkdown and WidgetViewRichText (the rich-text
   view renders into `.markdown-body` too), and by the hand-written profile page
   that embeds partials/markdown_editor.html. */

/* Markdown edit widget: toolbar + textarea + preview as one bordered
   surface, so the group reads as a single form control the way the Ace
   editor above does. The textarea itself drops its own border. */
.markdown-editor {
    border: 1px solid var(--tblr-border-color, #dadfe5);
    border-radius: var(--tblr-border-radius, 4px);
    overflow: hidden;
}
.markdown-editor:focus-within {
    border-color: var(--tblr-primary, #066fd1);
}
.markdown-editor:has(.is-invalid) {
    border-color: var(--tblr-danger, #d63939);
}
.markdown-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .375rem .5rem;
    border-bottom: 1px solid var(--tblr-border-color, #dadfe5);
    background-color: var(--tblr-bg-surface-secondary, #f8fafc);
}
/* Tabler's `.btn-icon` zeroes the button's horizontal padding and pulls the
   glyph in by the padding it just removed (`margin: calc(-1 * padding-x)`).
   At `.btn-sm` that negative margin is wider than the glyph, so a small
   icon-only button collapses to a couple of pixels with the icon spilling
   out of it. Give the glyph back its box and the button its padding. */
.markdown-editor-toolbar .btn-icon .icon {
    margin: 0;
}
.markdown-editor-toolbar .btn-icon {
    padding-left: .375rem;
    padding-right: .375rem;
}
.markdown-editor-input.form-control,
.markdown-editor-input.form-control:focus {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--tblr-font-monospace);
    resize: vertical;
}
.markdown-editor-preview {
    padding: .5rem .75rem;
    overflow: auto;
}
/* The preview is contenteditable (markdown_editor.js converts what is typed
   there back to Markdown). Without a caret cursor and a focus ring it reads
   as a read-only pane and nobody discovers they can type in it. The outline
   is suppressed because .markdown-editor already draws a ring on
   :focus-within, so the default one would double it. */
.markdown-editor-preview[contenteditable="true"] {
    cursor: text;
    outline: 0;
}
.markdown-editor-preview[contenteditable="true"]:empty::before {
    content: attr(data-placeholder);
    color: var(--tblr-secondary);
}
/* Rendered Markdown, in the editor preview and in the view modal alike.
   Tabler styles headings and tables globally; what is left is keeping a
   block of prose from running away vertically and long content scrollable
   inside the modal rather than stretching it. */
.markdown-body > :first-child {
    margin-top: 0;
}
.markdown-body > :last-child {
    margin-bottom: 0;
}
.markdown-body img {
    max-width: 100%;
}
.markdown-body pre {
    padding: .5rem .75rem;
    border-radius: var(--tblr-border-radius, 4px);
    background-color: var(--tblr-bg-surface-secondary, #f8fafc);
    overflow-x: auto;
}
.markdown-body blockquote {
    padding-left: .75rem;
    border-left: 3px solid var(--tblr-border-color, #dadfe5);
    color: var(--tblr-secondary, #667382);
}
.markdown-body table {
    width: auto;
    margin-bottom: 1rem;
    border-collapse: collapse;
}
.markdown-body table th,
.markdown-body table td {
    padding: .25rem .5rem;
    border: 1px solid var(--tblr-border-color, #dadfe5);
}
/* In the view modal the value shares the read-only rhythm of every other
   row, but unlike a one-line value it may be long. */
.markdown-body.form-control-plaintext {
    display: block;
    max-height: 24rem;
    overflow: auto;
}