/* Kelk — the preview pane.
   The document's own look comes from HtmlBuilder's stylesheet (lib/PreviewBuilder → <style id="kelk-doc-css">),
   the same one the .html export embeds. This file adds only what belongs to the pane: spacing, the
   empty hint, the copy buttons, the source view, and the dark theme of the app. */

.doc {
  padding: 18px 22px 28px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.doc:empty::before { content: attr(data-empty); color: var(--placeholder); font-family: var(--font-ui); }
.doc > :first-child { margin-top: 0; }

/* wide tables scroll inside the pane */
.doc table:not(.kelk-fit) { display: block; overflow-x: auto; }

/* code frame bar: the language on one side, the copy button on the other */
.doc .code-lang { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 1.6em; }
.code-copy-btn {
  display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: 12px; padding: 1px 6px; border-radius: 4px; font-family: var(--font-ui); margin-inline-start: auto;
}
.code-copy-btn:hover { background: var(--accent-soft); color: var(--accent-ink); }
.code-copy-btn svg { width: 14px; height: 14px; }
.code-copy-btn.copied { color: var(--accent); }
.doc .code-nested { position: relative; }
.code-nested-copy { position: absolute; top: 2px; right: 4px; padding: 1px 3px; opacity: .55; }
.code-nested:hover > .code-nested-copy { opacity: 1; }

/* Markdown shown as source (reverse view) */
.doc.source { font-family: var(--font-mono); font-size: 13px; white-space: pre-wrap; direction: ltr; text-align: left; unicode-bidi: plaintext; }

/* dark theme of the app. The document's own colors (tables, code, quotes, ToC) are translated
   for the dark page by scripts/preview.js (darkPaper) — the exports keep the chosen colors; here,
   only what the document stylesheet does not color: text on the page, code text and syntax colors. */
[data-theme="dark"] .doc h1, [data-theme="dark"] .doc h2, [data-theme="dark"] .doc h3,
[data-theme="dark"] .doc h4, [data-theme="dark"] .doc h5, [data-theme="dark"] .doc h6 { color: var(--accent-ink); }
[data-theme="dark"] .doc :not(pre) > code { background: var(--code-bg); color: var(--ink); }
[data-theme="dark"] .doc a { color: var(--accent-ink); }
[data-theme="dark"] .doc .code, [data-theme="dark"] .doc .code code.hljs { color: var(--ink); }
/* syntax colors for a dark box (GitHub dark) */
[data-theme="dark"] .doc .code .hljs-keyword, [data-theme="dark"] .doc .code .hljs-doctag, [data-theme="dark"] .doc .code .hljs-type,
[data-theme="dark"] .doc .code .hljs-meta .hljs-keyword, [data-theme="dark"] .doc .code .hljs-template-tag { color: #ff7b72; }
[data-theme="dark"] .doc .code .hljs-string, [data-theme="dark"] .doc .code .hljs-regexp, [data-theme="dark"] .doc .code .hljs-meta .hljs-string { color: #a5d6ff; }
[data-theme="dark"] .doc .code .hljs-title, [data-theme="dark"] .doc .code .hljs-title.function_, [data-theme="dark"] .doc .code .hljs-title.class_ { color: #d2a8ff; }
[data-theme="dark"] .doc .code .hljs-number, [data-theme="dark"] .doc .code .hljs-literal, [data-theme="dark"] .doc .code .hljs-attr,
[data-theme="dark"] .doc .code .hljs-attribute, [data-theme="dark"] .doc .code .hljs-variable, [data-theme="dark"] .doc .code .hljs-built_in,
[data-theme="dark"] .doc .code .hljs-selector-class, [data-theme="dark"] .doc .code .hljs-operator { color: #79c0ff; }
[data-theme="dark"] .doc .code .hljs-comment, [data-theme="dark"] .doc .code .hljs-quote { color: #8b949e; }
[data-theme="dark"] .doc .code .hljs-name, [data-theme="dark"] .doc .code .hljs-selector-tag, [data-theme="dark"] .doc .code .hljs-section { color: #7ee787; }
[data-theme="dark"] .doc .code .hljs-subst, [data-theme="dark"] .doc .code .hljs-params { color: var(--ink); }
/* the light theme's #24292e / #6a737d left on the dark box (1.03:1 / 3.1:1; WCAG AA needs 4.5:1 — tools/check-a11y.js) */
[data-theme="dark"] .doc .code .hljs-strong, [data-theme="dark"] .doc .code .hljs-emphasis { color: var(--ink); }
[data-theme="dark"] .doc .code .hljs-code, [data-theme="dark"] .doc .code .hljs-formula { color: #8b949e; }
/* light: GitHub's #d73a49 keyword red is 4.45:1 on the code box (#fcfcfc), just under AA; its current red, in the pane
   only (the exports keep HtmlBuilder's document colors) */
:root:not([data-theme="dark"]) .doc .code .hljs-keyword,
:root:not([data-theme="dark"]) .doc .code .hljs-doctag,
:root:not([data-theme="dark"]) .doc .code .hljs-type,
:root:not([data-theme="dark"]) .doc .code .hljs-meta .hljs-keyword,
:root:not([data-theme="dark"]) .doc .code .hljs-template-tag,
:root:not([data-theme="dark"]) .doc .code .hljs-template-variable,
:root:not([data-theme="dark"]) .doc .code .hljs-variable.language_ { color: #cf222e; }

/* highlight.js's page theme adds padding and a background to code.hljs: the frame has its own */
.doc pre code.hljs { padding: 0; background: none; }