/* SPA editor — document (paper) styling, shared by index.html (editor) and
   document.html (read-only). Follows the deed-of-incorporation paper styling. */
:root { --ink: #1f2937; --muted: #6b7280; --line: #e5e7eb; --accent: #ea580c; }

.page {
  max-width: 820px; margin: 24px auto; background: white; padding: 56px 64px 48px;
  border: 1px solid var(--line); border-radius: 6px;
  font-family: "Times New Roman", Georgia, serif;
  font-size: 12.5px; line-height: 1.7; color: var(--ink);
}
.page p { margin: 6px 0; text-align: justify; }

/* Cover */
.cover-date { text-align: left; color: var(--muted); }
.cover-box { border: 1px solid var(--ink); padding: 18px 24px; margin: 18px 0 28px; text-align: center; }
.cover-box p { text-align: center; margin: 4px 0; }
.cover-title { font-size: 22px; text-align: center; margin: 24px 0 4px; font-weight: normal; letter-spacing: 0.03em; }
.cover-sub { text-align: center; margin-bottom: 28px; }

/* Table of contents */
.toc { margin: 28px 0; }
.toc-head { font-weight: bold; font-size: 14px; }
.toc-line { margin: 2px 0; text-align: left; }

/* Clauses */
.clause-title { font-size: 13.5px; margin: 22px 0 6px; }
.clause-title .num { display: inline-block; min-width: 28px; }
.sub { display: flex; gap: 10px; margin: 8px 0; }
.sub > .num { flex: 0 0 44px; }
.sub-body { flex: 1; text-align: justify; }
.sub-title { font-style: italic; font-weight: bold; margin: 14px 0 2px 44px; }

/* Lettered / roman lists */
ol.items, ol.subitems { list-style: none; margin: 6px 0; padding: 0; }
ol.items > li, ol.subitems > li { display: flex; gap: 10px; margin: 5px 0; }
ol.items > li > .num { flex: 0 0 30px; }
ol.subitems > li > .num { flex: 0 0 30px; }
ol.subitems { margin-left: 8px; }
.li-body { flex: 1; text-align: justify; }

/* Parties / recitals */
ol.parties, ol.recitals { list-style: none; margin: 8px 0; padding: 0; }
ol.parties > li, ol.recitals > li { display: flex; gap: 10px; margin: 8px 0; }
ol.parties > li > .num, ol.recitals > li > .num { flex: 0 0 34px; }
.parties-after { margin: 10px 0 10px 44px; }

/* Definitions */
.defs { margin-top: 8px; }
p.def { margin: 8px 0; }

/* Placeholders & filled values (same colors as the deed template) */
.placeholder { color: #cbd5e1; font-style: italic; }
.fill { color: #b45309; font-style: normal; }
.ph { border-radius: 3px; padding: 0 2px; }
.editable .ph { cursor: pointer; }
.editable .ph:hover { background: #fff7ed; outline: 1px dashed #fdba74; }
.ph[contenteditable="true"] { background: #fff; outline: 2px solid var(--accent); font-style: normal; color: var(--ink); min-width: 20px; display: inline-block; }
.ref-missing { color: #dc2626; font-weight: bold; }

/* Notices tables + allocation table */
.notice-head { font-weight: bold; margin-top: 10px; }
table.notice-table, table.alloc-table { border-collapse: collapse; margin: 8px 0 8px 0; font-size: 12px; width: 100%; }
table.notice-table td, table.alloc-table td, table.alloc-table th { border-bottom: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }
table.notice-table td.label { width: 90px; color: var(--muted); }
table.alloc-table th { color: var(--muted); font-weight: normal; }

/* Schedules */
.schedule { margin-top: 36px; }
.schedule-title { font-size: 15px; margin: 18px 0 10px; border-top: 2px solid var(--ink); padding-top: 14px; }
.schedule-intro { font-style: italic; margin-bottom: 10px; }
.schedule-plain { margin: 8px 0; }
.attachment-stub { color: var(--muted); }
.warrcat { margin-top: 16px; }
.warrcat-title { font-size: 13px; margin: 14px 0 4px; }
.warrcat-title .num { display: inline-block; min-width: 26px; }

/* Signatures */
.sig-follows { text-align: center; margin-top: 28px; }
.sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; margin-top: 24px; }
.sig-block p { text-align: left; margin: 4px 0; }
.sig-line { margin-top: 28px !important; }

/* Module-kleuren: fragmenten die door een module worden toegevoegd krijgen een subtiele
   tint + een gekleurde balk in de kantlijn (kleur per module, --mod-color gezet door de
   renderer). Alleen zichtbaar met body.show-mod-colors; print blijft schoon. */
.mod-block { position: relative; }
body.show-mod-colors .mod-block {
  background: color-mix(in srgb, var(--mod-color) 6%, transparent);
  border-radius: 4px;
}
body.show-mod-colors .mod-block::before {
  content: '';
  position: absolute; left: -18px; top: 2px; bottom: 2px; width: 4px;
  border-radius: 2px; background: var(--mod-color);
}
/* Geneste blokken (items binnen een module-sub): balk iets naar binnen, tint overslaan
   zodat het niet stapelt. */
body.show-mod-colors .mod-block .mod-block { background: transparent; }
body.show-mod-colors .mod-block .mod-block::before { left: -10px; }
/* Inline module-zinsdelen (bijv. "plus the Holdback" in de prijsformule). */
body.show-mod-colors .mod-inline {
  background: color-mix(in srgb, var(--mod-color) 14%, transparent);
  border-bottom: 1.5px solid var(--mod-color);
  border-radius: 2px; padding: 0 1px;
}
@media print {
  .mod-block, body.show-mod-colors .mod-block { background: transparent !important; }
  .mod-block::before, body.show-mod-colors .mod-block::before { display: none !important; }
  .mod-inline, body.show-mod-colors .mod-inline { background: transparent !important; border-bottom: none !important; }
}

/* Draft watermark */
.draft-stamp {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-22deg);
  font-size: 96px; color: rgba(234, 88, 12, 0.10); font-weight: bold; pointer-events: none;
  letter-spacing: 0.18em; user-select: none; z-index: 0;
}
body.spa-final .draft-stamp { display: none !important; }
.page > * { position: relative; }

/* Print: clean paper, page breaks before schedules and the signature page */
@media print {
  html, body { background: white !important; }
  .page { margin: 0; border: none; border-radius: 0; max-width: none; padding: 22mm 22mm 24mm; font-size: 11pt; }
  .page-break { page-break-before: always; }
  .schedule { page-break-before: always; margin-top: 0; }
  .schedule-title { border-top: none; padding-top: 0; }
  .draft-stamp { position: fixed; color: rgba(234, 88, 12, 0.06); }
  body.spa-final .draft-stamp { display: none !important; }
  .editable .ph:hover { background: transparent; outline: none; }
  .ph { padding: 0; }
}