/* The manuscript pane (ADR 0016): a paper-like page inside the dark builder. No external fonts (works offline). */

/* ── Builder side: grips ── */
.wf-grip { cursor: grab; color: var(--text-dim); user-select: none; -webkit-user-drag: element; align-self: center; font-size: 1.1rem; padding: 0 .15rem; }
.wf-grip:hover { color: var(--accent-h); }
.node-grip { cursor: grab; user-select: none; }
.canvas-wrapper { min-width: 220px; }
.ms-drag-chip { position: fixed; top: -100px; left: -100px; padding: .3rem .6rem; border-radius: 6px; background: #f1efe8; color: #1d1f24; font: 600 12px/1.3 system-ui, sans-serif; box-shadow: var(--shadow); }


/* ── A document tab (.doc-editor.manuscript, a .ws-pane of the workspace) ── */
.manuscript {
  --paper: #fdfdfb; --ink: #1d1f24; --ink-dim: #5f6470; --rule: #d9dbe0; --link: #2f5aa8; --soft: #f1f3f7;
  display: flex; flex-direction: column; background: #2b2d33; min-width: 0;
}
.ms-bar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .5rem .6rem; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.ms-bar select, .ms-bar button, .ms-save-form input, .ms-save-form select, .ms-save-form button {
  font: inherit; font-size: .8rem; color: var(--text); background: var(--bg-hover); border: 1px solid var(--border); border-radius: 6px; padding: .3rem .55rem;
}
.ms-bar .ms-article { flex: 1 1 10rem; min-width: 8rem; }
/* the writer menu and the preview toggle (ADR 0020) */
.ms-writer { display: inline-flex; gap: .35rem; align-items: center; font-size: .8rem; color: var(--text-dim); }
.ms-preview-toggle { cursor: pointer; }
.ms-preview-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.ms-tools:empty, .ms-tools[hidden] { display: none; }
.ms-save { cursor: pointer; border-color: var(--green) !important; color: var(--green) !important; }
.ms-save:hover { background: var(--green) !important; color: #000 !important; }

.ms-save-form { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: end; padding: .6rem; background: var(--bg-card); border-bottom: 1px solid var(--border); font-size: .78rem; color: var(--text-dim); }
.ms-save-form[hidden] { display: none; }
.ms-save-form label { display: flex; flex-direction: column; gap: .2rem; }
.ms-save-form label.wide { flex: 1 1 100%; }
.ms-save-form button { cursor: pointer; }
.ms-save-form .ms-save-submit { border-color: var(--green); color: var(--green); }

.ms-toolbar { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; padding: .35rem .6rem; background: #23252b; border-bottom: 1px solid var(--border); }
.ms-toolbar[hidden] { display: none; }
.ms-toolbar button { min-width: 1.9rem; padding: .25rem .45rem; font: 600 .78rem/1.2 system-ui, sans-serif; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 5px; cursor: pointer; }
.ms-toolbar button:hover { background: var(--bg-hover); border-color: var(--border); }
.ms-toolbar code { font: 600 .72rem ui-monospace, Menlo, Consolas, monospace; }
.ms-sep { width: 1px; height: 1.2rem; margin: 0 .3rem; background: var(--border); }

.ms-meta { padding: .25rem .7rem; font-size: .72rem; color: var(--text-dim); background: #1d1f25; border-bottom: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-meta a { color: var(--accent); text-decoration: none; margin-left: .5rem; }
.ms-meta a:hover { text-decoration: underline; }
.ms-meta code { font: 11px ui-monospace, Menlo, Consolas, monospace; }
.ms-status { min-height: 1.6rem; padding: .3rem .7rem; font-size: .75rem; color: var(--text-dim); background: #23252b; border-bottom: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-status[data-state="busy"] { color: var(--cyan); }
.ms-status[data-state="busy"]::before { content: '⏳ '; }
.ms-status[data-state="error"] { color: var(--red); white-space: normal; }
.ms-status[data-state="ok"] { color: var(--green); }

/* ── The page ── */
.ms-scroll { flex: 1; overflow: auto; padding: 1.25rem 1rem 3rem; display: flex; flex-direction: column; align-items: center; }
.ms-page {
  flex: 0 0 auto; width: 100%; max-width: 760px; min-height: 100%; padding: 2.2rem 2.6rem 3rem; background: var(--paper); color: var(--ink);
  border-radius: 3px; box-shadow: 0 2px 18px rgba(0,0,0,.45); font: 17px/1.6 Georgia, 'Times New Roman', serif;
}
.ms-title { display: block; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 700 1.9rem/1.25 system-ui, sans-serif; margin-bottom: 1rem; padding: 0; resize: none; overflow: hidden; field-sizing: content; }
.ms-title::placeholder { color: #b5b8c0; }
.ms-editor { outline: 0; min-height: 50vh; caret-color: var(--link); }
.ms-editor:empty::before { content: attr(data-placeholder); color: #a3a7b0; font-style: italic; }
.ms-editor.ms-dragover, .ms-markdown.ms-dragover { box-shadow: inset 0 0 0 2px #6c7fea; border-radius: 3px; background: #f4f6ff; }
.ms-editor h1, .ms-editor h2, .ms-editor h3, .ms-editor h4 { font-family: system-ui, sans-serif; line-height: 1.25; margin: 1.4rem 0 .6rem; color: var(--ink); }
.ms-editor h1 { font-size: 1.6rem; } .ms-editor h2 { font-size: 1.3rem; } .ms-editor h3 { font-size: 1.1rem; }
.ms-editor p, .ms-editor ul, .ms-editor ol, .ms-editor blockquote, .ms-editor pre { margin: 0 0 .9rem; }
.ms-editor ul, .ms-editor ol { padding-left: 1.5rem; }
.ms-editor a { color: var(--link); }
.ms-editor code, .ms-editor pre { font: 14px/1.45 ui-monospace, Menlo, Consolas, monospace; }
.ms-editor code { background: var(--soft); padding: 0 .2rem; border-radius: 3px; }
.ms-editor pre { background: var(--soft); padding: .75rem; overflow-x: auto; white-space: pre-wrap; }
.ms-editor pre code { background: none; padding: 0; }
.ms-editor blockquote { padding-left: 1rem; border-left: 3px solid var(--rule); color: var(--ink-dim); }
.ms-editor hr { border: 0; border-top: 1px solid var(--rule); margin: 1.5rem 0; }

/* figures: the artefact (not editable) with an editable caption */
figure.ms-embed { margin: 1.4rem 0; padding: .6rem .75rem .5rem; border: 1px solid var(--rule); border-radius: 4px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); user-select: none; }
figure.ms-embed:hover { border-color: #b9bdc7; }
figure.ms-embed.ms-new { animation: ms-arrive 1.6s ease-out; }
@keyframes ms-arrive { from { box-shadow: 0 0 0 4px rgba(108,127,234,.55); } to { box-shadow: 0 1px 3px rgba(0,0,0,.06); } }
figure.ms-embed.ms-stale { border-color: #d9822b; border-style: dashed; }
.ms-embed-head { display: flex; gap: .5rem; align-items: baseline; font: 12px/1.4 system-ui, sans-serif; color: var(--ink-dim); margin-bottom: .4rem; }
.ms-embed-title { font-weight: 600; color: var(--ink); flex: 1; }
.ms-embed-head a { color: var(--link); }
.ms-embed-head button { font: 600 11px/1.2 system-ui, sans-serif; padding: .15rem .4rem; border: 1px solid var(--rule); border-radius: 4px; background: #fff; color: var(--ink-dim); cursor: pointer; }
.ms-embed-head button:hover { border-color: var(--ink-dim); color: var(--ink); }
.ms-embed-head .ms-refresh { border-color: #d9822b; color: #b0601a; }
.ms-embed-head button[hidden] { display: none; }
.ms-embed-body { overflow-x: auto; }
.ms-embed-body svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.ms-embed-body img { max-width: 100%; }
.ms-embed-body table { border-collapse: collapse; font: 13px/1.4 system-ui, sans-serif; }
.ms-embed-body th, .ms-embed-body td { border-bottom: 1px solid var(--rule); padding: .2rem .55rem; text-align: left; }
.ms-embed-body td.num, .ms-embed-body th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ms-embed-body .number { font: 600 1.4rem/1.2 system-ui, sans-serif; }
.ms-embed-error, .ms-raw .ms-embed-error { color: #a12a2a; font: 13px/1.4 system-ui, sans-serif; }
.ms-raw { border: 1px dashed #a12a2a; padding: .5rem; margin: 1rem 0; }
.ms-caption { display: block; margin-top: .45rem; padding: .15rem .25rem; font: 14px/1.45 system-ui, sans-serif; color: var(--ink); border-radius: 3px; outline: 0; user-select: text; cursor: text; }
.ms-caption:focus { background: #f6f7fb; box-shadow: inset 0 0 0 1px #c9cde0; }
.ms-caption:empty::before { content: attr(data-placeholder); color: #a3a7b0; font-style: italic; }

/* the Markdown processor and the preview */
.ms-markdown { width: 100%; min-height: 60vh; border: 0; outline: 0; resize: vertical; background: transparent; color: var(--ink); font: 14px/1.55 ui-monospace, Menlo, Consolas, monospace; }
.ms-preview { width: 100%; max-width: 860px; flex: 1; min-height: 70vh; border: 0; background: var(--paper); border-radius: 3px; box-shadow: 0 2px 18px rgba(0,0,0,.45); }
.ms-page[hidden], .ms-preview[hidden] { display: none; }
/* figure inspector in the pane (ADR 0018 decision 7; the publisher's public/figure.js) */
.ms-embed-head .ms-inspect[aria-pressed="true"] { border-color: var(--ink-dim); color: var(--ink); }
figure.ms-embed .fig-toolbar { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: center; margin-bottom: .4rem; padding: .3rem .45rem; border: 1px solid var(--rule); border-radius: 4px; font: 12px/1.4 system-ui, sans-serif; color: var(--ink-dim); user-select: none; }
figure.ms-embed .fig-toolbar select, figure.ms-embed .fig-toolbar button { font: inherit; }
figure.ms-embed .fig-toolbar .fig-series { display: inline-flex; gap: .45rem; }
figure.ms-embed .fig-toolbar .fig-message { flex-basis: 100%; }
figure.ms-embed .fig-toolbar .fig-message[data-state="error"] { color: #a12a2a; }
figure.ms-embed .fig-toolbar .fig-keep { font-weight: 600; }
figure.ms-embed .ms-embed-body svg { cursor: crosshair; }