/* ==========================================================================
   Markdown Studio — Markdown → beautiful rendered output you can copy as rich
   text into Microsoft Teams, Confluence or Outlook (or export HTML / PDF / .md).
   Layout mirrors Mermaid Studio: a toolbar, a split body (editor | preview)
   with a drag grip, and a status footer. Uses the shared tokens from
   protium-ui.css. The MD_CSS typography block (shared with Code Genie) styles
   the rendered article so the preview — and the copied rich text — looks great.
   ========================================================================== */

.md-title { font-weight: 600; color: var(--text); letter-spacing: .2px; }

.md-main {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--nav-h) - var(--status-h));
  min-height: 0;
}

/* ---- toolbar ----------------------------------------------------------- */
.md-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.md-toolbar .sep { width: 1px; height: 22px; background: var(--border); margin: 0 2px; }
.md-toolbar .spacer { flex: 1 1 auto; }

/* file-open is a <label> styled as a button; hide the native input */
#btn-open { cursor: pointer; }

.md-status { display: flex; align-items: center; gap: 10px; }
.md-meta { color: var(--text-faint); font: 500 12px/1 var(--font-mono); white-space: nowrap; }

/* ---- body: editor | grip | preview ------------------------------------ */
.md-body { flex: 1 1 auto; display: flex; min-height: 0; }

.md-cm { flex: 1 1 0; min-width: 280px; overflow: hidden; position: relative; }
.md-cm .CodeMirror { height: 100%; font: 13px/1.6 var(--font-mono); }

.md-grip {
  flex: 0 0 6px; cursor: col-resize; background: var(--border-faint);
  transition: background .15s var(--ease);
}
.md-grip:hover, .md-grip.is-active { background: var(--accent); }

.md-preview {
  flex: 1 1 0; min-width: 320px; display: flex; flex-direction: column;
  background: var(--surface-2); border-left: 1px solid var(--border);
}
.md-preview-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.md-preview-title { font: 600 12px/1 var(--font-sans); letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); }
.md-preview-head .spacer { flex: 1 1 auto; }
.md-preview-hint { color: var(--text-faint); font: 500 11.5px/1.3 var(--font-sans); text-align: right; }
.md-preview-hint b { color: var(--text-muted); font-weight: 600; }

/* the doc is a scrollable reading surface holding the rendered article.
   Kept LIGHT in both themes (a document is a white "page"): in dark mode a
   themed surface bled dark into the reading area and the exported/copied image.
   Light-grey canvas + white page = consistent, and matches Copy image / export. */
.md-doc {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  padding: 28px 32px; background: #eef2f6;
  display: flex; justify-content: center; align-items: flex-start;
}
.md-doc .md {
  /* Fill the preview width so the page grows left/right as you drag the
     splitter wider — wider lines, shorter document. (PDF export keeps a
     print-friendly page width via DOC_FRAME in studio.js.) */
  max-width: none; width: 100%;
  background: #ffffff; color: #1e293b;
  padding: 36px 44px; border-radius: var(--r-lg, 12px);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 8px 28px rgba(15, 23, 42, .06);
}
.md-doc .md:empty::after {
  content: "Your rendered document will appear here.";
  color: #94a3b8; font: 500 14px/1 var(--font-sans);
}

/* ---- MD_CSS: rendered-article typography (shared with Code Genie) ------ */
/* This is the same look that rides along on the clipboard, so a paste into
   Teams / Confluence / Outlook keeps the formatting. */
.md { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.7; color: #1e293b; word-wrap: break-word; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3, .md h4 { font-weight: 700; line-height: 1.25; margin: 1.4em 0 .6em; color: #0f172a; }
.md h1 { font-size: 1.7em; border-bottom: 1px solid #e2e8f0; padding-bottom: .3em; }
.md h2 { font-size: 1.35em; border-bottom: 1px solid #eef2f7; padding-bottom: .25em; }
.md h3 { font-size: 1.12em; }
.md h4 { font-size: 1em; }
.md p { margin: .7em 0; }
.md a { color: #2563eb; text-decoration: none; }
.md a:hover { text-decoration: underline; }
.md strong { font-weight: 700; }
.md em { font-style: italic; }
.md ul, .md ol { margin: .6em 0; padding-left: 1.6em; }
.md li { margin: .25em 0; }
.md blockquote { margin: .9em 0; padding: .3em 1em; color: #475569; border-left: 4px solid #cbd5e1; background: #f8fafc; }
.md code { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: #f1f5f9; color: #0f172a; padding: .15em .4em; border-radius: 5px; }
.md pre { background: #0f172a; color: #e2e8f0; padding: 14px 16px; border-radius: 10px; overflow: auto; margin: .9em 0; }
.md pre code { background: none; color: inherit; padding: 0; font-size: .86em; }
.md table { border-collapse: collapse; margin: .9em 0; font-size: .95em; }
.md th, .md td { border: 1px solid #e2e8f0; padding: 7px 12px; text-align: left; }
.md th { background: #f1f5f9; font-weight: 600; }
.md tr:nth-child(even) td { background: #f8fafc; }
.md hr { border: 0; border-top: 1px solid #e2e8f0; margin: 1.4em 0; }
.md img { max-width: 100%; }

/* ---- CodeMirror theme: .cm-s-protium (shared with the other studios) --- */
.cm-s-protium.CodeMirror { background: var(--field); color: #d4d4d4; }
.cm-s-protium .CodeMirror-gutters { background: var(--field); border-right: 1px solid var(--border); }
.cm-s-protium .CodeMirror-linenumber { color: var(--text-faint); }
.cm-s-protium .CodeMirror-cursor { border-left: 1.5px solid #aed6ff; }
.cm-s-protium .CodeMirror-activeline-background { background: rgba(255,255,255,0.03); }
.cm-s-protium .CodeMirror-selected { background: var(--accent-soft) !important; }
.cm-s-protium .CodeMirror-focused .CodeMirror-selected { background: var(--accent-soft) !important; }
.cm-s-protium .cm-string { color: #ce9178; }
.cm-s-protium .cm-keyword { color: #c586c0; }
.cm-s-protium .cm-atom { color: #569cd6; }
.cm-s-protium .cm-number { color: #b5cea8; }
.cm-s-protium .cm-operator { color: #4ec9b0; }
.cm-s-protium .cm-variable-2 { color: #9cdcfe; }
.cm-s-protium .cm-comment { color: #6a9955; }
.cm-s-protium .cm-error { color: var(--bad); }
/* markdown-specific tokens for a readable editor */
.cm-s-protium .cm-header { color: #569cd6; font-weight: 600; }
.cm-s-protium .cm-quote { color: #6a9955; }
.cm-s-protium .cm-link { color: #4ec9b0; }
.cm-s-protium .cm-url { color: #ce9178; }
.cm-s-protium .cm-strong { color: #dcdcaa; font-weight: 700; }
.cm-s-protium .cm-em { color: #c586c0; font-style: italic; }

@media (max-width: 760px) {
  .md-body { flex-direction: column; }
  .md-grip { display: none; }
  .md-cm, .md-preview { min-width: 0; }
  .md-preview { border-left: none; border-top: 1px solid var(--border); }
  .md-preview-hint { display: none; }
  .md-doc { padding: 16px; }
  .md-doc .md { padding: 22px 20px; }
}