/* ============================================================================
   «Сборник» – конструктор шаблона статьи (views/admin/template.php, корень .sb-tpl)
   и титул со служебными страницами (views/admin/collection_pages.php, корень .sb-pg).
   Владелец – этап «Настройки администратора». Файл подключается на всех
   страницах, поэтому каждое правило начинается с .sb-tpl / .sb-pg или со своей
   приставки sb-tpl- / sb-pg-. Классы, которые ищет app.js (.block, .block-move,
   .block-body, .cf-row, .cf-del, .page-card, .page-editor, .card-head, .tag,
   code.ph, .ph-list, .ph-ul), – только внутри этих корней.
   Строки-переключатели .sb-as-switch – в area-admin-settings.css.
   ========================================================================== */

/* ------------------------------------------------- общие кусочки -- */
.sb-tpl-grid, .sb-pg-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr));
  gap: 1rem 1.25rem; align-items: end;
}
.sb-tpl-grid > .sb-tpl-wide2, .sb-pg-grid > .sb-pg-wide { grid-column: span 2; }
.sb-tpl-grid .form-label, .sb-pg-grid .form-label { line-height: 1.35; }
:is(.sb-tpl, .sb-pg) legend.form-label { float: none; width: auto; font-size: .875rem; line-height: 1.35; margin-bottom: .5rem; }
.sb-tpl-check, .sb-pg-check { margin-top: 1rem; }
.sb-tpl-check + .sb-tpl-grid { margin-top: 1rem; }
.sb-tpl-check .form-text { margin-top: .25rem; }
.sb-tpl-checks { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin-top: .75rem; }
.sb-tpl-checks .form-check, .sb-tpl-cf-end .form-check { display: flex; align-items: center; gap: .625rem; min-height: 44px; padding-left: 0; }
.sb-tpl-checks .form-check .form-check-input, .sb-tpl-cf-end .form-check .form-check-input { float: none; margin: 0; flex: none; }
.sb-tpl-field { margin-top: 1.25rem; }
.sb-tpl-half { max-width: 24rem; }
.sb-tpl-gapline { margin-top: 1rem; }
.sb-tpl-lead { color: var(--sb-ink-2); max-width: 46rem; margin-bottom: 1.25rem; }
.sb-tpl-after { color: var(--sb-ink-2); margin: 1.25rem 0 0; font-size: .875rem; }
.sb-tpl-sub { font-size: .9375rem; font-weight: 600; letter-spacing: 0; margin: 1.75rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--sb-line); }
.sb-fold-body > .sb-tpl-sub:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sb-tpl-fieldset { margin-top: 1.25rem; }
.sb-tpl-gap-top { margin-top: 1.25rem; }
.sb-tpl-sets { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--sb-line); }
/* строка шаблона с подстановками: {fio_short}, {group} – моноширинно */
.sb-tpl-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875rem; }

/* панель «Сохранить» на компьютере: липнет к низу экрана, пока форма длинная */
.sb-tpl-savebar {
  position: sticky; bottom: .75rem; z-index: 3; align-items: center; flex-wrap: wrap; gap: .75rem 1.25rem;
  margin-top: var(--sb-gap); padding: 1rem 1.25rem; background: #fff;
  border: 1px solid var(--sb-line-2); border-radius: var(--sb-radius-lg); box-shadow: var(--sb-shadow-bar);
}
.sb-tpl-savebar > span { flex: 1 1 16rem; min-width: 0; color: var(--sb-ink-2); font-size: .875rem; }

/* «Другие действия» / «Готовые варианты и сброс» (свёрнуты): что это, пояснение, кнопка */
.sb-tpl-act { padding: 1.25rem 0; border-top: 1px solid var(--sb-line); }
.sb-tpl-act:last-child { padding-bottom: 0; }
.sb-card-title + .sb-tpl-act, .sb-fold-body > .sb-tpl-act:first-child { border-top: 0; padding-top: 0; }
.sb-tpl-act > b { display: block; font-weight: 600; }
.sb-tpl-act > p { color: var(--sb-ink-2); margin: .125rem 0 .875rem; max-width: 42rem; }
/* научный руководитель в статье – выбор вверху «Частей статьи» */
.sb-tpl-sup { margin: 0 0 1.25rem; }
.sb-tpl-blk-hint { margin: 0 0 1rem; }
.sb-tpl-check-first { margin-top: 0; }

/* ================================================= ШАБЛОН СТАТЬИ === */
.sb-tpl .tpl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 27rem; gap: var(--sb-gap); align-items: start; margin-bottom: var(--sb-gap); }
.sb-tpl .tpl-main, .sb-tpl .tpl-side { min-width: 0; }

/* объём статьи – главная норма, всегда на виду */
.sb-tpl-volume .sb-card-title { margin-bottom: 1rem; }
.sb-tpl-range { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; font-size: .9375rem; font-weight: 500; }
.sb-tpl-range > label { margin: 0; }
.sb-tpl-range .sb-tpl-n { width: 6rem; text-align: center; font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sb-tpl-range-sm { font-size: .875rem; }
.sb-tpl-range-sm .sb-tpl-n { font-size: .875rem; font-weight: 500; }
.sb-tpl-volume-note { margin: 1rem 0 0; color: var(--sb-ink-2); max-width: 42rem; }
.sb-tpl-chars { margin-top: .5rem; }
.sb-tpl-chars .sb-more-body > p { font-size: .875rem; }
.sb-tpl-pairs { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; }

/* разделы шаблона: свёрнуты, в заголовке – что сейчас выбрано */
.sb-tpl-fold > summary .sb-fold-title { flex: 1; }
.sb-tpl-fold > summary .sb-fold-note { flex-basis: 100%; line-height: 1.4; }

/* части статьи: флажок «печатать» – имя и вид – стрелки */
.sb-tpl-blocks { display: flex; flex-direction: column; gap: .5rem; }
.sb-tpl .block { border: 1px solid var(--sb-line-2); border-radius: var(--sb-radius-lg); background: #fff; }
.sb-tpl .block > summary { display: flex; align-items: center; gap: .5rem; min-height: 60px; padding: .5rem .75rem .5rem .25rem; border-radius: var(--sb-radius-lg); }
.sb-tpl .block > summary:hover { background: var(--sb-surface-2); }
.sb-tpl .block > summary:focus-visible { outline-offset: -3px; }
.sb-tpl .block[open] > summary { border-bottom: 1px solid var(--sb-line); border-radius: var(--sb-radius-lg) var(--sb-radius-lg) 0 0; }
.sb-tpl-blk-on { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; margin: 0; cursor: pointer; }
.sb-tpl-blk-on .form-check-input { margin: 0; float: none; cursor: pointer; }
.sb-tpl-blk-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.sb-tpl-blk-name b { font-weight: 600; }
.sb-tpl-blk-name small { font-size: .8125rem; color: var(--sb-muted); }
.sb-tpl .block[data-disabled] .sb-tpl-blk-name b { color: var(--sb-ink-2); font-weight: 500; }
.sb-tpl .block[data-disabled] .sb-tpl-blk-name small::before { content: "не печатается · "; }
.sb-tpl .block-move { display: flex; gap: .25rem; flex: none; }
.sb-tpl-mv, .sb-pg-mv { width: 44px; min-height: 44px; padding: 0; --bs-btn-padding-x: 0; }
.sb-tpl-mv > .sb-ic, .sb-pg-mv > .sb-ic { margin: 0; }
.sb-tpl .block > summary > .sb-chev { flex: none; color: var(--sb-muted); }
.sb-tpl .block-body { padding: 1.25rem; background: var(--sb-surface-2); border-radius: 0 0 var(--sb-radius-lg) var(--sb-radius-lg); }
.sb-tpl .block-body > :first-child { margin-top: 0; }
.sb-tpl .block-body .sb-tpl-grid + .sb-tpl-grid { margin-top: 1rem; }
.sb-tpl .block-body .sb-tpl-checks + .sb-tpl-field, .sb-tpl .block-body .sb-tpl-field + .sb-tpl-grid,
.sb-tpl .block-body .sb-tpl-checks + .sb-tpl-grid, .sb-tpl .block-body .sb-tpl-check + .sb-tpl-grid { margin-top: 1.25rem; }
.sb-tpl .block-body .sb-tpl-check:first-child { margin-top: 0; margin-bottom: 1.25rem; }
.sb-tpl-eg { display: block; margin: .375rem 0; padding: .5rem .75rem; background: #fff; border: 1px solid var(--sb-line); border-radius: var(--sb-radius-lg); font-family: var(--sb-paper-font); font-size: .875rem; color: var(--sb-ink); text-align: right; }

/* дополнительные поля статьи */
.sb-tpl-cf { display: flex; flex-direction: column; gap: 1rem; }
.sb-tpl-cf:has(.cf-row) { margin-bottom: 1.25rem; }
.sb-tpl .cf-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 1rem 1.25rem; align-items: end;
  padding: 1.25rem; border: 1px solid var(--sb-line-2); border-radius: var(--sb-radius-lg); background: var(--sb-surface-2);
}
.sb-tpl .cf-row .sb-tpl-cf-key .form-text { margin-top: .25rem; }
.sb-tpl .cf-row .sb-tpl-cf-key { align-self: start; }
.sb-tpl-cf-end { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
/* строка, которую добавляет app.js: голые поля без классов – вид как у .form-control */
.sb-tpl .cf-row > input, .sb-tpl .cf-row > select {
  width: 100%; min-height: 52px; padding: .75rem 1rem; font-size: .875rem; line-height: 1.5; color: var(--sb-ink);
  background-color: #fff; border: 1px solid var(--sb-field); border-radius: var(--sb-radius);
}
.sb-tpl .cf-row > input::placeholder { color: #64737d; }
.sb-tpl .cf-row > input:focus, .sb-tpl .cf-row > select:focus { outline: 0; border-color: var(--sb-brand); box-shadow: var(--sb-focus); }
.sb-tpl .cf-row > label.check { display: flex; align-items: center; gap: .625rem; min-height: 52px; margin: 0; cursor: pointer; }
.sb-tpl .cf-row > label.check > input { width: 1.375rem; height: 1.375rem; accent-color: #016a6f; }
.sb-tpl .cf-row > button.cf-del {
  justify-self: start; min-width: 52px; min-height: 52px; padding: 0 1rem; border: 1px solid #c4342b; border-radius: var(--sb-radius);
  background: #fff; color: var(--sb-bad-ink); font-size: 1.0625rem; font-weight: 600; line-height: 1;
}
.sb-tpl .cf-row > button.cf-del:hover { background: var(--sb-bad-bg); }
.sb-tpl-cf-empty { color: var(--sb-muted); margin-bottom: 1rem; }
#cf-list:has(.cf-row) + .sb-tpl-cf-empty { display: none; }

/* образец статьи */
.sb-tpl-sample { overflow: hidden; }
.sb-tpl-sample-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .125rem 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--sb-line); }
.sb-tpl-sample-head h2 { font-size: .9375rem; margin: 0; }
.sb-tpl-sample-head span { font-size: .8125rem; color: var(--sb-muted); }
.sb-tpl .sb-tpl-sample > .doc-wrap { background: var(--sb-surface-2); padding: 1rem; border: 0; border-radius: 0; }

/* «Другие действия»: готовые шаблоны строками */
.sb-tpl-presets { list-style: none; margin: 0; padding: 0; border: 1px solid var(--sb-line); border-radius: var(--sb-radius-lg); }
.sb-tpl-presets > li { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding: 1rem 1.25rem; }
.sb-tpl-presets > li + li { border-top: 1px solid var(--sb-line); }
.sb-tpl-preset-txt { flex: 1; min-width: 0; }
.sb-tpl-preset-txt b { display: block; font-weight: 600; }
.sb-tpl-preset-txt span { display: block; margin-top: .125rem; color: var(--sb-ink-2); font-size: .875rem; line-height: 1.45; }
.sb-tpl-presets form { flex: none; }

/* широкий экран: образец справа – липкий, лист целиком в уменьшенном виде */
@media (min-width: 1200px) {
  .sb-tpl .tpl-side { position: sticky; top: 1rem; }
  .sb-tpl-more { max-width: calc(100% - 27rem - var(--sb-gap)); }   /* под левой колонкой, а не на всю ширину */
  .sb-tpl .sb-tpl-sample > .doc-wrap { max-height: calc(100vh - 6.5rem); overflow: auto; container-type: normal; }
  .sb-tpl .sb-tpl-sample > .doc-wrap .doc-page { zoom: .5; }
}
@media (max-width: 1199.98px) {
  .sb-tpl .tpl-layout { grid-template-columns: minmax(0, 1fr); }
  .sb-tpl .tpl-side { scroll-margin-top: 1rem; }
}

/* ============================================ ТИТУЛ И СТРАНИЦЫ === */
.sb-pg-form { margin-bottom: var(--sb-gap); }
.sb-pg-gap { margin-top: .25rem; }
.sb-pg .sb-pg-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.sb-pg-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem 1.25rem; align-items: end; }

/* порядок в книге и подстановки */
.sb-pg-order .ph-list { margin-top: .25rem; }
.sb-pg .ph-ul { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .5rem 1.5rem; }
.sb-pg .ph-ul li { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.sb-pg .ph-ul li > span { color: var(--sb-ink-2); font-size: .875rem; line-height: 1.35; min-width: 0; }
.sb-pg code.ph {
  display: inline-flex; align-items: center; flex: none; min-height: 40px; padding: .25rem .625rem; border-radius: var(--sb-radius);
  background: #fff; border: 1px solid var(--sb-brand-200); color: var(--sb-brand-800);
  font-size: .875rem; font-weight: 600; white-space: nowrap; cursor: copy;
}
.sb-pg code.ph:hover { background: var(--sb-brand-50); border-color: var(--sb-brand-600); }

/* редактор страницы: панель + поле в одной рамке */
.sb-pg-ed { border: 1px solid var(--sb-field); border-radius: var(--sb-radius); background: #fff; }
.sb-pg-ed:focus-within { border-color: var(--sb-brand); box-shadow: var(--sb-focus); }
.sb-pg-ed .editor-toolbar.sb-pg-toolbar {
  gap: .25rem .75rem; padding: .375rem; border: 0; border-bottom: 1px solid var(--sb-line);
  border-radius: calc(var(--sb-radius) - 1px) calc(var(--sb-radius) - 1px) 0 0; background: var(--sb-surface-2); z-index: 4;
}
.sb-pg-toolbar .sb-tb-group { gap: .125rem; }
.sb-pg-toolbar .sb-tb-btn {
  min-width: 40px; height: 40px; padding: 0 .5rem; border: 1px solid transparent; border-radius: var(--sb-radius);
  background: transparent; color: var(--sb-ink); font-size: .875rem; font-weight: 500;
}
.sb-pg-toolbar .sb-tb-btn:hover { background: #fff; border-color: var(--sb-line-2); color: var(--sb-ink); }
.sb-pg-toolbar .sb-tb-btn.on, .sb-pg-toolbar .sb-tb-btn[aria-pressed=true] { background: var(--sb-brand-50); border-color: var(--sb-brand-200); color: var(--sb-brand-800); }
.sb-pg-toolbar .sb-tb-btn.sb-tb-letter { font-family: var(--sb-paper-font); font-size: 1.0625rem; }
.sb-pg-ed .editor { min-height: 11rem; border: 0; border-radius: 0 0 calc(var(--sb-radius) - 1px) calc(var(--sb-radius) - 1px); padding: 1.25rem 1.5rem; box-shadow: none; }
.sb-pg-ed .editor:focus { box-shadow: none; }
.sb-pg .page-editor .editor p { text-indent: 0; text-align: left; }
.sb-pg .page-editor .editor p[align=center] { text-align: center; }
.sb-pg .page-editor .editor p[align=right] { text-align: right; }
.sb-pg .page-editor .editor p[align=justify] { text-align: justify; }
#tp-editor[hidden] { display: none; }
.sb-pg-editor-box { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--sb-line); }
.sb-pg-fill { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.sb-pg-fill > span { color: var(--sb-muted); font-size: .875rem; flex: 1 1 16rem; }

/* служебные страницы */
.sb-pg-list-head { margin: calc(var(--sb-gap) + .75rem) 0 1rem; }
.sb-pg-list-head h2 { font-size: 1.0625rem; margin: 0 0 .25rem; }
.sb-pg-list-head p { color: var(--sb-ink-2); margin: 0; max-width: 46rem; }
.sb-pg .page-card .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; }
.sb-pg-title { flex: 1; min-width: 0; }
.sb-pg-title h3 { font-size: 1.0625rem; line-height: 1.3; margin: .375rem 0 .125rem; }
.sb-pg .page-card .tag { color: var(--sb-muted); font-size: .875rem; }
.sb-pg .page-card[data-off] .tag::after { content: " · не печатается"; color: var(--sb-warn-ink); font-weight: 500; }
.sb-pg .page-card[data-off] .sb-pg-ed { opacity: .6; }
.sb-pg .page-card[data-off] .sb-pg-ed:focus-within { opacity: 1; }
.sb-pg-tools { display: flex; gap: .375rem; flex: none; }
.sb-pg-del { --bs-btn-color: var(--sb-bad-ink); --bs-btn-hover-color: var(--sb-bad-ink); --bs-btn-hover-bg: var(--sb-bad-bg); --bs-btn-hover-border-color: #c4342b; }
.sb-pg-hint { color: var(--sb-ink-2); margin: .5rem 0 0; max-width: 46rem; }
.sb-pg-on { margin: 1rem 0; }
.sb-pg-on .form-check-label { font-weight: 500; }
.sb-pg .page-setup { margin-top: .5rem; }
.sb-pg-setup { padding: .5rem 0 .25rem; }
.sb-pg-setup .sb-pg-grid > .sb-pg-wide { grid-column: 1 / -1; max-width: 36rem; }
.sb-pg-add { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: var(--sb-gap); }
.sb-pg-add > span { color: var(--sb-muted); font-size: .875rem; flex: 1 1 18rem; }

/* ------------------------------------------------------- телефон -- */
@media (max-width: 767.98px) {
  .sb-tpl-grid > .sb-tpl-wide2, .sb-pg-grid > .sb-pg-wide { grid-column: 1 / -1; }
  .sb-tpl-grid, .sb-pg-grid { column-gap: 1rem; }
  .sb-pg .sb-pg-setup .sb-pg-grid { grid-template-columns: minmax(0, 1fr); }
  .sb-tpl-range { gap: .5rem .625rem; }
  .sb-tpl-range .sb-tpl-n { width: 4.5rem; padding-left: .5rem; padding-right: .5rem; }
  .sb-tpl .block > summary { gap: .25rem; padding-right: .5rem; }
  .sb-tpl .block-body { padding: 1rem; }
  .sb-tpl .cf-row { padding: 1rem; }
  .sb-tpl-cf-end > .btn, #cf-add, .sb-tpl-presets form, .sb-tpl-presets .btn, .sb-tpl-act form > .btn { width: 100%; }
  .sb-tpl-presets > li { flex-direction: column; align-items: stretch; padding: 1rem; }
  .sb-tpl .sb-tpl-sample > .doc-wrap { padding: .75rem; }
  /* на телефоне – две строки: отмена, начертание, вставка / абзацы, выравнивание */
  .sb-pg-ed .editor-toolbar.sb-pg-toolbar { gap: .25rem .5rem; }
  .sb-pg-toolbar .sb-tb-btn { width: 44px; min-width: 44px; height: 44px; padding: 0; }
  .sb-pg-toolbar .sb-pg-tb-rare { display: none; }
  .sb-pg-toolbar .sb-pg-tb-ins { order: 1; }
  .sb-pg-toolbar .sb-tb-group:nth-child(n+3):not(.sb-pg-tb-ins) { order: 2; }
  .sb-pg-ed .editor { padding: 1rem; }
  /* узкая колонка: «по ширине» даёт дыры между словами – на телефоне показываем по левому краю (в книге останется по ширине) */
  .sb-pg .page-editor .editor p[align=justify] { text-align: left; }
  .sb-pg-fill > .btn, .sb-pg-add > .btn { width: 100%; }
  .sb-pg .ph-ul li { flex-wrap: wrap; gap: .125rem .625rem; }
  .sb-pg code.ph { min-height: 36px; }
}
@media print { .sb-tpl-savebar, .sb-tpl-more, .sb-pg-more { display: none !important; } }