/**
 * InputfieldSimpleMDE
 *
 * EasyMDE wraps the editor in .EasyMDEContainer and scopes its own rules to it,
 * so overrides need that container in the selector too. Bare .CodeMirror rules
 * (0,1,0) lose to EasyMDE's .EasyMDEContainer .CodeMirror (0,2,0) regardless of
 * load order — the fullscreen z-index below is exactly that case.
 */

/**
 * Cap the editing area; the fields are markdown, not manuscripts.
 *
 * A variable rather than a constant because the field's Rows setting drives the
 * starting height, and a field asking for more rows than this would otherwise be
 * clipped below the size it was configured for. InputfieldSimpleMDE.js raises
 * the cap on those, and only those.
 */
.EasyMDEContainer .CodeMirror,
.EasyMDEContainer .CodeMirror-scroll {
	max-height: var(--mde-max-height, 300px);
}

.EasyMDEContainer .CodeMirror-fullscreen,
.EasyMDEContainer .CodeMirror-fullscreen .CodeMirror-scroll {
	max-height: none;
}

/**
 * Fullscreen and side-by-side have to clear the admin chrome.
 *
 * EasyMDE ships z-index 8 on the editor and 9 on the toolbar and preview pane.
 * This module previously raised those to 12 and 13, which was never enough:
 * AdminThemeUikit's sticky masthead is .uk-sticky at 980, so fullscreen always
 * opened underneath it. Sit above the masthead but below Uikit's modals (1010)
 * and notifications (1040), which should still be able to cover the editor.
 */
.EasyMDEContainer .CodeMirror-fullscreen {
	z-index: 1000;
}

.editor-toolbar.fullscreen,
.editor-preview-side {
	z-index: 1001;
}

/**
 * ...but z-index only competes within a stacking context, and a repeater item or
 * a positioned Inputfield creates one — the editor would be lifted to the top of
 * its own little box and no further. InputfieldSimpleMDE.js flags the ancestor
 * chain while fullscreen is active so each link gets out of the way in turn.
 *
 * These rules apply ONLY while fullscreen is open. Raising an ancestor is not
 * free — position + z-index creates a stacking context that then confines the
 * editor — so the lift has to clear the masthead on its own, and must not be
 * left in place the rest of the time.
 */
.Inputfield.has-simplemde-fullscreen,
.InputfieldRepeater.has-simplemde-fullscreen,
.InputfieldRepeaterItem.has-simplemde-fullscreen {
	position: relative;
	z-index: 1000 !important;
}

/* Image edit panels use a filter, which creates a stacking context of its own
   that a fixed-position child cannot escape. */
body.simplemde-fullscreen .InputfieldImageEdit__inner {
	filter: none !important;
	-webkit-filter: none !important;
}

/**
 * Heading scale — sane, and independent of the viewport.
 *
 * Headings should look like headings; that is Markdown convention and the
 * editor ought to reflect what you wrote. What EasyMDE ships is the problem:
 *
 *     .cm-s-easymde .cm-header-1 { font-size: calc(1.375rem + 1.5vw) }
 *
 * That is 33px against 13px body text at 1280px, over 40px on a wide monitor,
 * and it RESCALES as the window changes — a viewport-relative unit inside a
 * fixed-width admin field, where nothing else behaves that way. SimpleMDE
 * shipped no heading sizes at all, so upgrading turned a flat editor into one
 * where a single line could take up a quarter of the field.
 *
 * Fixed em multiples instead: proportional to the field's own text, stable at
 * every window size, and enough to read the structure at a glance.
 *
 * Worth knowing where this shows up unexpectedly. Field Descriptions Extended
 * separates the visible and hidden halves of a description with a line of
 * dashes:
 *
 *     Visible part of the description.
 *     -----
 *     Hidden extended part.
 *
 * By the CommonMark spec, text underlined with dashes is a setext heading, so
 * CodeMirror marks both lines cm-header-2 and the first line grows. That is
 * correct parsing and it always parsed this way — SimpleMDE just never styled
 * it. It affects the editor only: FDE splits on the literal `-----` before any
 * Markdown rendering, so the stored description still outputs as a paragraph.
 * Putting a blank line before the divider makes it a horizontal rule instead,
 * which is what it was always meant to be.
 *
 * Same specificity as EasyMDE's rules and loaded after them, which is what
 * decides it.
 */
.cm-s-easymde .cm-header-1 { font-size: 1.6em; }
.cm-s-easymde .cm-header-2 { font-size: 1.4em; }
.cm-s-easymde .cm-header-3 { font-size: 1.2em; }
.cm-s-easymde .cm-header-4 { font-size: 1.1em; }
.cm-s-easymde .cm-header-5,
.cm-s-easymde .cm-header-6 { font-size: 1em; }

.cm-s-easymde .cm-header-1,
.cm-s-easymde .cm-header-2,
.cm-s-easymde .cm-header-3,
.cm-s-easymde .cm-header-4,
.cm-s-easymde .cm-header-5,
.cm-s-easymde .cm-header-6 {
	line-height: 1.3;
	margin-bottom: 0;
}