/* ── Pages Container ── */
#pages-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--page-gap);
  padding: 0 var(--page-gap);
  min-width: calc(var(--page-w) + 48px);
}

/* ── Single Page ── */
.page {
  background: var(--bg-page);
  width: var(--page-w);
  min-height: 297mm;
  box-shadow: var(--shadow-page);
  position: relative;
  flex-shrink: 0;
}

/* ── Editor Content Area ── */
#editor {
  min-height: 247mm;
  padding: 25mm 20mm 25mm 30mm; /* top right bottom left (default margins) */
  font-family: var(--font-doc);
  font-size: 12pt;
  line-height: 1.5;
  color: var(--text-primary);
  outline: none;
  word-wrap: break-word;
  overflow-wrap: break-word;
  tab-size: 4;
  -webkit-user-modify: read-write;
  white-space: pre-wrap;
}

#editor:empty::before {
  content: attr(placeholder);
  color: #AAAAAA;
  pointer-events: none;
}

/* ── Editor Element Styles ── */
#editor h1 { font-size: 24pt; font-weight: bold; margin: 12pt 0 6pt; }
#editor h2 { font-size: 18pt; font-weight: bold; margin: 10pt 0 5pt; color: #1F497D; }
#editor h3 { font-size: 14pt; font-weight: bold; margin: 8pt 0 4pt; color: #243F60; }
#editor h4 { font-size: 12pt; font-weight: bold; font-style: italic; margin: 6pt 0 3pt; }
#editor h5 { font-size: 11pt; font-weight: bold; margin: 4pt 0 2pt; }
#editor h6 { font-size: 10pt; font-weight: bold; font-style: italic; margin: 4pt 0 2pt; }

#editor p  { margin: 0 0 8pt; }
#editor blockquote {
  border-left: 3px solid var(--accent);
  margin: 8pt 0 8pt 16pt;
  padding-left: 12pt;
  color: #555;
  font-style: italic;
}
#editor pre {
  background: #F5F5F5;
  border: 1px solid var(--border);
  padding: 8pt 10pt;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10pt;
  white-space: pre;
  overflow-x: auto;
  margin: 6pt 0;
}
#editor code {
  font-family: var(--font-mono);
  background: #F0F0F0;
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 10pt;
}

#editor ul { list-style: disc; margin: 4pt 0 4pt 24pt; }
#editor ol { list-style: decimal; margin: 4pt 0 4pt 24pt; }
#editor li { margin: 2pt 0; }

#editor a { color: var(--accent); text-decoration: underline; }

/* ── Tables ── */
#editor table {
  border-collapse: collapse;
  width: 100%;
  margin: 8pt 0;
}
#editor th, #editor td {
  border: 1px solid #AAAAAA;
  padding: 4pt 6pt;
  vertical-align: top;
  min-width: 30px;
  min-height: 20px;
}
#editor th {
  background: #EEF2FA;
  font-weight: 600;
  text-align: left;
}
#editor tr:nth-child(even) td { background: #FAFBFF; }

/* Table selection highlight */
#editor td.selected, #editor th.selected {
  background: #C5D5F5 !important;
}
#editor td:focus, #editor th:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ── Images ── */
#editor img {
  max-width: 100%;
  display: inline-block;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--tr);
}
#editor img.selected { border-color: var(--accent); }

/* ── Horizontal Rule ── */
#editor hr { border: none; border-top: 2px solid var(--border); margin: 12pt 0; }

/* ── Find highlight ── */
.find-highlight {
  background: #FFEE77;
  border-radius: 2px;
}
.find-highlight.current {
  background: #FFA500;
  color: #fff;
}

/* ── Spellcheck ── */
#editor [spellcheck] { outline: none; }

/* ── Print ── */
@media print {
  body { background: none !important; }
  #title-bar, #ribbon, #ruler-wrapper,
  #sidebar-left, #sidebar-right,
  #status-bar, #dialog-overlay,
  .dialog, #context-menu { display: none !important; }
  #workspace { overflow: visible !important; }
  #page-area { padding: 0 !important; overflow: visible !important; background: none !important; }
  #pages-container { gap: 0 !important; padding: 0 !important; }
  .page { box-shadow: none !important; page-break-after: always; }
}