/* ============================================================================
   «Сборник» – лист статьи и сборника (предпросмотр «как в книге»).
   Перенесено из прежнего app.css без изменения вида: .doc-wrap – серая
   подложка, .doc-page – лист А4, .doc-table, .doc-toc-*, .doc-pagebreak.
   Разметку листа строит сервер (src/Layout.php), поэтому классы не менять.
   ========================================================================== */

.doc-wrap {
  background: #e7eaed; border: 1px solid #dde1e5;
  border-radius: 8px; padding: 20px; overflow: auto;
  container-type: inline-size;
}
/* узкая колонка: лист уменьшается, на телефоне – во всю ширину крупным текстом.
   Образец служебной страницы (.is-true) всегда в натуральных пропорциях – его масштаб ставит app.js */
@container (max-width: 860px) { .doc-wrap:not(.is-true) .doc-page { zoom: .86; } }
@container (max-width: 740px) { .doc-wrap:not(.is-true) .doc-page { zoom: .74; } }
@container (max-width: 560px) { .doc-wrap:not(.is-true) .doc-page { zoom: .62; } }
@container (max-width: 480px) {
  .doc-wrap:not(.is-true) .doc-page { zoom: 1; width: 100% !important; min-height: 0 !important; height: auto !important; padding: 16px !important; font-size: 13pt !important; }
}
.doc-page {
  width: 210mm; min-height: 297mm; margin: 0 auto; background: #fff; color: #000;
  word-wrap: break-word; box-shadow: 0 2px 4px rgba(22, 29, 34, .05), 0 6px 16px rgba(22, 29, 34, .06); border: 1px solid #d2d7dc;
}
.doc-page p { margin: 0; }
.doc-page sup { vertical-align: super; font-size: .75em; }
.doc-page sub { vertical-align: sub; font-size: .75em; }
/* Bootstrap поднимает индексы ещё и сдвигом (position + top) – на листе это
   давало двойной подъём. Как в Word: только vertical-align. */
.doc-page sup, .doc-page sub { position: static; line-height: inherit; }
.doc-table { width: 100%; border-collapse: collapse; margin: 4pt 0 6pt; }
.doc-table td, .doc-table th { border: 1px solid #000; padding: 2pt 5pt; vertical-align: middle; line-height: 1.15; }
.doc-table th { font-weight: 700; text-align: center; }
.doc-table p { text-indent: 0 !important; }
.doc-pagebreak { border-top: 1px dashed #b9c4bd; margin: 16pt 0; text-align: center; position: relative; height: 0; }
.doc-pagebreak span { position: relative; top: -9px; background: #fff; color: #5f6a62; font-size: 10px; padding: 0 8px; font-family: var(--bs-font-sans-serif); }
/* содержание: отточие фоном по нижней строке записи, текст закрывает его белым фоном;
   номер – у правого края полосы на последней строке, текст переносится за 1 см до него, как в Word */
.doc-toc-entry {
  position: relative; background-image: radial-gradient(circle, #000 .55px, transparent .75px);
  background-size: .3em 2px; background-repeat: repeat-x; background-position: left calc(100% - .28em);
  background-origin: content-box; background-clip: content-box;
}
.doc-toc-txt { background: #fff; padding-right: .25em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.doc-toc-page { position: absolute; right: 0; bottom: 0; background: #fff; padding-left: .25em; min-width: 1.6em; text-align: right; }
.doc-toc-section { background: none; font-weight: 700; }
.doc-toc-entry:not(:has(.doc-toc-page)) { background: none; }
.doc-pref.is-est, .doc-page [data-var].is-est { color: #7a858e; }
.doc-toc-title, .doc-toc-entry, .doc-zones p { hyphens: manual; -webkit-hyphens: manual; }

/* титул, оборот, последняя страница: зоны во всю высоту полосы – как невидимая таблица в Word */
.doc-zones { display: flex; flex-direction: column; }
.doc-zone { display: flex; flex-direction: column; }
.doc-zone-center { justify-content: center; }
.doc-zone-bottom { justify-content: flex-end; }
.doc-tiny { height: 0; margin: 0 !important; overflow: hidden; line-height: 0; }

/* номер страницы и колонтитул на листе – там же, где их ставит Word (app.js) */
.doc-sheet .doc-folio { position: absolute; line-height: 1.2; color: #000; }
.doc-sheet .doc-runhead { position: absolute; line-height: 1.2; font-style: italic; text-align: center; border-bottom: .5px solid #808080; padding-bottom: 1pt; }
.doc-missing { color: #8f1d17; font-style: italic; text-align: center; }
.scaled .doc-page { zoom: .62; }

/* живой макет в боковой колонке редактора – уменьшенный лист */
.live-preview .doc-page { width: 210mm; zoom: .42; }

/* лист в окне Bootstrap (#preview-modal) – подложка во всю ширину окна */
.modal-body.doc-wrap { padding: 20px; border: 0; border-radius: 0; }

/* внутри карточки подложку рисует сама карточка */
.card > .doc-wrap,
.card > form > .doc-wrap { border: 0; background: none; padding: 0; }

@media (max-width: 1199.98px) {
  .scaled .doc-page { zoom: .8; }
}
@media (max-width: 900px) {
  .doc-wrap:not(.is-true) { padding: 0; border: 0; background: transparent; }
  .doc-wrap:not(.is-true) .doc-page { width: 100% !important; min-height: 0 !important; height: auto !important; padding: 16px !important; font-size: 13pt !important; box-shadow: 0 1px 2px rgba(22, 29, 34, .05), 0 1px 1px rgba(22, 29, 34, .03); }
  .doc-wrap:not(.is-true) .doc-table { font-size: 10pt !important; }
  .modal-body.doc-wrap:not(.is-true) { padding: 6px; }
  /* лист «во всю ширину»: зоны титула – друг за другом, номер и колонтитул – не поверх текста */
  .doc-wrap:not(.is-true) .doc-zone { min-height: 0 !important; }
  .doc-wrap:not(.is-true) .doc-zone + .doc-zone { margin-top: 2em; }
  .doc-wrap:not(.is-true) .doc-sheet .doc-folio { position: static; margin-top: 1em; }
  .doc-wrap:not(.is-true) .doc-sheet .doc-runhead { position: static; margin-bottom: 1em; }
  .scaled .doc-page, .live-preview .doc-page { zoom: 1; width: 100% !important; }
}
/* ---- листы (app.js, paginate): статья разложена по страницам, как в Word ---- */
.doc-lab { position: absolute; left: -12000px; top: 0; width: 600mm; visibility: hidden; pointer-events: none; contain: layout style; }
.doc-lab .doc-page { box-shadow: none; }
.doc-flow { display: flow-root; }
.doc-sheet { position: relative; }
.doc-page-no { margin: 20px 0 8px; text-align: center; font: 500 .875rem/1.3 var(--bs-font-sans-serif); color: #56666f; }
.doc-page-no:first-child { margin-top: 0; }
.doc-page-no.is-over { color: #9f1d17; font-weight: 600; }
.doc-sheet.is-over { border-color: #e2a29c; box-shadow: 0 0 0 3px #fbe1de; }
.doc-paging-note { margin: 0 0 12px; text-align: center; color: #56666f; font-size: .9375rem; }
@media (max-width: 900px) {
  .doc-page-no { margin-top: 14px; }
  /* узкая колонка: переносы по слогам, иначе выключка по ширине даёт дыры между словами */
  .doc-wrap:not(.is-true) .doc-page { hyphens: auto; -webkit-hyphens: auto; }
  /* заголовки и строки по центру и справа (название, авторы, подписи) – без переносов по слогам */
  .doc-wrap:not(.is-true) .doc-page p[style*="text-align:center"], .doc-wrap:not(.is-true) .doc-page p[style*="text-align:right"] { hyphens: manual; -webkit-hyphens: manual; }
}

@media print {
  .doc-page-no { display: none; }
  .doc-sheet { break-after: page; }
  .doc-wrap { background: #fff; padding: 0; border: 0; }
  .doc-page { box-shadow: none; border: 0; margin: 0; width: auto !important; min-height: 0 !important; }
}

/* ---- образец в натуральных пропорциях (экран «Титул и служебные страницы») ----
   Лист не растягивается на узком экране: app.js уменьшает его целиком (zoom) по ширине.
   Переносов по слогам нет – как в Word и PDF. */
.doc-wrap.is-true { overflow: hidden; }
.doc-wrap.is-true .doc-page { hyphens: manual; -webkit-hyphens: manual; margin: 0 auto; }
.doc-wrap.is-true.is-big { overflow: auto; }
.doc-wrap.is-true .doc-page-no { margin-top: 12px; }
.doc-wrap.is-true .doc-page-no:first-child { margin-top: 0; }