/* Shared markdown editor chrome: the CodeMirror pane, live-preview pane,
   and rendered Mermaid diagrams/errors. Used by both the real note editor
   (note.html) and the logged-out demo editors (landing.html); page-specific
   sizing (editor height, border-radius, font-size) is layered on top by
   each page's own <style> block, which is loaded after this stylesheet. */
.editor-container { display: flex; gap: 1em; }
.editor-pane { flex: 1; min-width: 0; }
.editor-pane .CodeMirror { border: 1px solid var(--border); background: var(--bg); color: var(--fg); }
.editor-pane .CodeMirror-gutters { background: var(--bg-secondary); border-right: 1px solid var(--border); }
.editor-pane .CodeMirror-linenumber { color: var(--muted); }
.editor-pane .CodeMirror-cursor { border-left-color: var(--fg); }
.editor-pane .CodeMirror-selected, .editor-pane .CodeMirror-focused .CodeMirror-selected { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.editor-pane .CodeMirror-activeline-background { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.editor-pane .cm-s-default .cm-header { color: var(--accent); }
.editor-pane .cm-s-default .cm-link, .editor-pane .cm-s-default .cm-def { color: var(--accent); }
.editor-pane .cm-s-default .cm-comment { color: var(--muted); }
/* CodeMirror's markdown mode reuses its generic programming-token classes
   for prose: list items are variable-2/variable-3/keyword (one per nesting
   level), blockquotes are quote, emoji are builtin. Its stock palette
   colors those blue/teal/purple/green, so ordinary sentences in a list or
   quote came out in colors no theme chose and the preview pane never
   shows. Inheriting keeps that text in the theme's --fg, matching the
   preview; link URLs and horizontal rules (syntax with no visible preview
   counterpart) get --muted instead of stock red/grey. */
.editor-pane .cm-s-default .cm-variable-2,
.editor-pane .cm-s-default .cm-variable-3,
.editor-pane .cm-s-default .cm-keyword,
.editor-pane .cm-s-default .cm-quote,
.editor-pane .cm-s-default .cm-builtin { color: inherit; }
.editor-pane .cm-s-default .cm-string,
.editor-pane .cm-s-default .cm-hr { color: var(--muted); }
.editor-pane div.CodeMirror span.CodeMirror-matchingbracket { color: var(--accent); }
.editor-pane div.CodeMirror span.CodeMirror-nonmatchingbracket { color: var(--danger); }
.editor-pane .cm-matchhighlight { background: color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 2px; }
.editor-pane .CodeMirror-placeholder { color: var(--muted); font-style: italic; }
/* Overrides matchesonscrollbar's own default (hardcoded gold/orange,
   readable on light backgrounds but not on a dark theme) with the same
   accent-based treatment .cm-matchhighlight above already gets, so a
   search's scrollbar markers stay legible in every theme. */
.editor-pane .CodeMirror-search-match { background: var(--accent); border-color: var(--accent); }
.preview-pane { border: 1px solid var(--border); padding: 0 1em; }
@media (max-width: 820px) {
	.editor-container { flex-direction: column; }
}