/* ---- Editor surface (paged paper) -------------------------------- */
/* This is the SCROLL CONTAINER. It scrolls vertically (and horizontally
   if the page is wider than the viewport). It must NOT let its children
   push the parent — hence overflow: auto + min-height: 0. */
.docx-editor-surface {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  background: #f1f5f9;
  scrollbar-gutter: stable;
  /* Padding around the centered page (the "desk" surface) */
  padding: 32px 24px 80px; /* extra bottom padding for the add-page button */
  scroll-behavior: smooth;
}

/* "Add new page" button at the bottom of the surface */
.docx-editor-add-page {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: var(--de-page-width);
  max-width: 100%;
  margin: 8px auto 32px;
  padding: 12px 16px;
  border: 2px dashed #cbd5e1;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
  user-select: none;
}
.docx-editor-add-page:hover {
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.04);
  color: #2563eb;
}
.docx-editor-add-page:active {
  border-color: #1d4ed8;
  background: rgba(37, 99, 235, 0.08);
}
.docx-editor-add-page svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.docx-editor-page {
  background: var(--de-page-bg);
  width: var(--de-page-width);
  min-height: var(--de-page-height);
  margin: 0 auto var(--de-page-gap);
  box-shadow: var(--de-page-shadow);
  border-radius: 2px;
  overflow: hidden;
  /* Center the page horizontally within the scroll container */
  margin-left: auto;
  margin-right: auto;
}

.docx-editor-content {
  position: relative;
  padding: var(--de-page-margin-y) var(--de-page-margin-x);
  color: var(--de-text);
  font-family: var(--de-font-family);
  font-size: var(--de-font-size);
  line-height: var(--de-line-height);
  outline: none;
  min-height: calc(var(--de-page-height) - 2 * var(--de-page-margin-y));
  cursor: text;
}

/* TipTap appends a `.ProseMirror` child into `.docx-editor-content`.
   The ProseMirror element is the actual contenteditable. Make sure it
   inherits all our content typography and fills the page. */
.docx-editor-content .ProseMirror {
  outline: none;
  min-height: calc(var(--de-page-height) - 2 * var(--de-page-margin-y));
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.docx-editor-content .ProseMirror:focus { outline: none; }

/* All the typography rules below target selectors inside .docx-editor-content,
   which catches both the wrapper and the inner .ProseMirror. */
.docx-editor-content p,
.docx-editor-content .ProseMirror p {
  margin: 0 0 0.6em 0;
  font-size: 11pt;
  line-height: 1.5;
}

/* LegalBlock (extensions/builtins/legal-block.ts) — visual treatment for
   paragraphs tagged with `data-legal-block`, applied to legal-template
   content (Sri Lankan deeds/PoAs/pleadings) so witness lines, notarial
   attestation, case captions, signature lines, and numbered pleading
   paragraphs read as structured elements instead of plain body text, while
   remaining fully editable (unlike an atom node). Purely visual — the
   underlying node is still a plain `paragraph`, so it round-trips through
   .docx save/load like any other paragraph. */
.docx-editor-content [data-legal-block='case-caption'],
.docx-editor-content .ProseMirror [data-legal-block='case-caption'] {
  letter-spacing: 0.03em;
  font-weight: 600;
}

.docx-editor-content [data-legal-block='witness-line'],
.docx-editor-content .ProseMirror [data-legal-block='witness-line'] {
  margin-left: 1.5em;
  color: #1f2328;
}

.docx-editor-content [data-legal-block='attestation'],
.docx-editor-content .ProseMirror [data-legal-block='attestation'] {
  font-style: italic;
  border-top: 1px solid #d0d7de;
  padding-top: 0.4em;
  margin-top: 0.6em;
}

.docx-editor-content [data-legal-block='signature-line'],
.docx-editor-content .ProseMirror [data-legal-block='signature-line'] {
  margin-top: 1em;
  font-family: 'Courier New', Courier, monospace;
}

.docx-editor-content [data-legal-block='numbered-clause'],
.docx-editor-content .ProseMirror [data-legal-block='numbered-clause'] {
  margin-left: 1.5em;
  text-indent: -1.5em;
}

.docx-editor-content h1,
.docx-editor-content h2,
.docx-editor-content h3,
.docx-editor-content h4,
.docx-editor-content h5,
.docx-editor-content h6,
.docx-editor-content .ProseMirror h1,
.docx-editor-content .ProseMirror h2,
.docx-editor-content .ProseMirror h3,
.docx-editor-content .ProseMirror h4,
.docx-editor-content .ProseMirror h5,
.docx-editor-content .ProseMirror h6 {
  margin: 1em 0 0.4em 0;
  line-height: 1.25;
  font-weight: 600;
  color: #1f2328;
  page-break-after: avoid;
}
.docx-editor-content h1, .docx-editor-content .ProseMirror h1 { font-size: 24pt; }
.docx-editor-content h2, .docx-editor-content .ProseMirror h2 { font-size: 18pt; }
.docx-editor-content h3, .docx-editor-content .ProseMirror h3 { font-size: 14pt; }
.docx-editor-content h4, .docx-editor-content .ProseMirror h4 { font-size: 12pt; }
.docx-editor-content h5, .docx-editor-content .ProseMirror h5 { font-size: 11pt; font-style: italic; }
.docx-editor-content h6, .docx-editor-content .ProseMirror h6 { font-size: 11pt; color: #57606a; }

.docx-editor-content h1.docx-title, .docx-editor-content .ProseMirror h1.docx-title { font-size: 28pt; font-weight: 300; }
.docx-editor-content h2.docx-subtitle, .docx-editor-content .ProseMirror h2.docx-subtitle { font-size: 16pt; font-weight: 300; color: #57606a; }

.docx-editor-content ul,
.docx-editor-content ol,
.docx-editor-content .ProseMirror ul,
.docx-editor-content .ProseMirror ol {
  margin: 0 0 0.6em 0;
  padding-left: 1.5em;
}
.docx-editor-content ul, .docx-editor-content .ProseMirror ul { list-style: disc; }
.docx-editor-content ol, .docx-editor-content .ProseMirror ol { list-style: decimal; }
.docx-editor-content li, .docx-editor-content .ProseMirror li { margin: 0.15em 0; }
.docx-editor-content li > p, .docx-editor-content .ProseMirror li > p { margin: 0; }

.docx-editor-content blockquote,
.docx-editor-content .ProseMirror blockquote {
  margin: 0 0 0.6em 0;
  padding: 0.5em 1em;
  border-left: 3px solid #d0d7de;
  color: #57606a;
  font-style: italic;
}
.docx-editor-content blockquote.intense, .docx-editor-content .ProseMirror blockquote.intense {
  border-left-color: #2563eb;
  background: #eff6ff;
  color: #1f2328;
}

.docx-editor-content pre,
.docx-editor-content .ProseMirror pre {
  background: #f6f8fa;
  border-radius: 6px;
  padding: 12px 16px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 10pt;
  line-height: 1.4;
  overflow-x: auto;
  margin: 0 0 0.6em 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.docx-editor-content code, .docx-editor-content .ProseMirror code {
  background: #f6f8fa;
  border-radius: 3px;
  padding: 0.1em 0.3em;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
}
.docx-editor-content pre code, .docx-editor-content .ProseMirror pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

.docx-editor-content a, .docx-editor-content .ProseMirror a {
  color: #2563eb;
  text-decoration: underline;
  cursor: pointer;
}

.docx-editor-content img, .docx-editor-content .ProseMirror img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
  display: block;
  margin: 0.4em auto;
}

.docx-editor-content mark,
.docx-editor-content [data-highlight],
.docx-editor-content .ProseMirror mark {
  background: #fff3a0;
  padding: 0.05em 0;
  border-radius: 1px;
}

.docx-editor-content table,
.docx-editor-content .ProseMirror table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.4em 0 0.6em 0;
  font-size: 10pt;
}