/* ============================================================================
   «Сборник» – внутренности редактора текста (перенесено из прежнего app.css).
   Здесь только то, что строит или переключает app.js: поле .editor с
   рисунками и таблицами, панель .editor-toolbar, всплывающая панель
   .floatbar / .fb-*, ручки ширины столбцов .tbl-grip*, выбор размера
   таблицы .tbl-grid, сообщение .ed-toast, проверка списка литературы
   конструктор записи .ref-kinds / .ref-fields.
   Владелец файла – этап «Редактор»; вид остальной формы – его же area-*.css.
   ========================================================================== */

/* ================================================= 12. РЕДАКТОР ТЕКСТА === */
.editor-toolbar {
  display: flex; gap: 2px; flex-wrap: wrap; min-width: 0; max-width: 100%; padding: 6px;
  border: 1px solid #d2d7dc; border-bottom: 0;
  border-radius: var(--sb-radius-lg) var(--sb-radius-lg) 0 0;
  background: #f1f3f5; position: sticky; top: 0; z-index: 5;
}
.editor-toolbar button {
  border: 1px solid transparent; background: transparent; padding: 0 8px;
  height: 36px; min-width: 36px; border-radius: var(--sb-radius); cursor: pointer;
  font: inherit; font-size: .8125rem; color: #4e5861; touch-action: manipulation;
  transition: background .1s ease, color .1s ease;
}
.editor-toolbar button:hover { background: #ffffff; border-color: #d2d7dc; color: #242c33; }
.editor-toolbar button.on { background: #edf7f7; border-color: #d3ebeb; color: #01555a; }
.editor-toolbar .sep { width: 1px; background: #d2d7dc; margin: 4px 2px; }

.ed-host { position: relative; }
.editor {
  min-height: 380px; counter-reset: fig tbl;
  border: 1px solid #d2d7dc; border-radius: 0 0 var(--sb-radius-lg) var(--sb-radius-lg);
  padding: 20px 24px; background: #ffffff; color: #242c33;
  font-family: "Times New Roman", Times, serif; font-size: 1.0625rem; line-height: 1.6;
}
.editor:focus { outline: none; border-color: #028c90; box-shadow: var(--sb-focus); }
.editor:empty::before { content: attr(data-placeholder); color: #626c76; font-family: var(--bs-font-sans-serif); font-size: .9375rem; }
.editor p { margin: 0 0 8px; text-indent: 1.25cm; text-align: justify; }
.editor h2 { font-family: inherit; font-size: 1.05em; text-align: center; font-weight: 700; margin: 16px 0 8px; }
.editor h3 { font-family: inherit; font-size: 1em; font-style: italic; font-weight: 700; margin: 12px 0 6px; }
.editor table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: .9em; table-layout: fixed; }
.editor td, .editor th { border: 1px solid #b6bec6; padding: 4px 8px; vertical-align: top; min-width: 28px; position: relative; }
.editor th { background: #f1f3f5; }
.editor td p, .editor th p { margin: 0; text-indent: 0; text-align: inherit; }
.editor td.is-cur, .editor th.is-cur { background: #edf7f7; box-shadow: inset 0 0 0 2px #028c90; }
.editor table.is-sel { outline: 2px solid #a9d7d8; outline-offset: 3px; }
.editor img { max-width: 100%; height: auto; display: block; margin: 8px auto; cursor: pointer; border-radius: 0; }
.editor img.is-sel { outline: 3px solid #028c90; outline-offset: 2px; }

/* рисунок с подписью: номер «Рисунок N – » рисует редактор, в тексте хранится только название */
.editor figure {
  margin: 16px 0; padding: 8px 8px 4px; text-align: center; counter-increment: fig;
  border-radius: var(--sb-radius-lg); transition: box-shadow .12s ease;
}
.editor figure:hover { box-shadow: 0 0 0 1px #d2d7dc; }
.editor figure.is-sel { box-shadow: 0 0 0 2px #028c90; }
.editor figure img { margin: 0 auto; }
.editor figcaption {
  margin-top: 8px; padding: 2px 8px; text-align: center; text-indent: 0;
  border-radius: var(--sb-radius); cursor: text; outline: none; min-height: 1.6em;
}
.editor figcaption:focus { background: #edf7f7; }
.editor figcaption::before { content: var(--fig-word, "Рисунок") " " counter(fig) " – "; color: #4e5861; }
.editor figcaption.is-empty::after { content: "впишите название рисунка"; color: #8e98a2; font-style: italic; }
.editor figure[data-wait]::before {
  content: "Рисунок не вставлен\A Нажмите, чтобы выбрать файл, или вставьте рисунок из Word (Ctrl+V)";
  white-space: pre-line; display: flex; align-items: center; justify-content: center; min-height: 128px; padding: 16px;
  border: 1.5px dashed #b6bec6; border-radius: var(--sb-radius-lg); background: #f1f3f5;
  color: #4e5861; font: .875rem/1.5 var(--bs-font-sans-serif); cursor: pointer;
}
.editor figure[data-wait]:hover::before { border-color: #028c90; color: #01555a; background: #edf7f7; }
.editor figure.is-loading::before { content: "Загружаем рисунок…"; cursor: progress; border-style: solid; }
/* подпись таблицы – над таблицей, слева, как в сборнике */
.editor caption {
  caption-side: top; text-align: left; text-indent: 0; padding: 2px 4px 4px; margin-bottom: 2px;
  counter-increment: tbl; outline: none; border-radius: var(--sb-radius); font-size: calc(1em / .9); color: inherit;
}
.editor caption::before { content: var(--tbl-word, "Таблица") " " counter(tbl) " – "; color: #4e5861; }
.editor caption.is-empty::after { content: "впишите название таблицы"; color: #8e98a2; font-style: italic; }
.editor blockquote { margin: 8px 0 8px 1cm; font-style: italic; }
.editor p[align=center] { text-align: center; text-indent: 0; }
.editor p[align=right]  { text-align: right;  text-indent: 0; }
.editor p[align=left]   { text-align: left; }
.editor ol, .editor ul { margin: 8px 0 8px 1.2cm; }
.editor li { margin-bottom: 3px; text-align: justify; }

/* всплывающая панель для рисунка и таблицы */
.floatbar {
  position: absolute; z-index: 30; display: flex; align-items: center;
  gap: 4px; flex-wrap: wrap;
  background: #ffffff; border: 1px solid #d2d7dc; border-radius: var(--sb-radius-lg);
  box-shadow: 0 8px 20px rgba(22, 29, 34, .10), 0 24px 56px rgba(22, 29, 34, .16); padding: 4px;
  font-size: .8125rem; max-width: min(560px, calc(100vw - 32px));
}
.floatbar[hidden] { display: none; }
.floatbar .btn { min-height: 36px; padding: 0 12px; font-size: .8125rem; }
.floatbar input[type=range] { width: 120px; margin: 0 4px 0 8px; min-height: 0; padding: 0; border: 0; background: none; accent-color: #028c90; }
.floatbar .fb-val { font-variant-numeric: tabular-nums; min-width: 42px; color: #626c76; font-weight: 600; }
.floatbar .fb-group { display: flex; gap: 2px; }
.floatbar .fb-sep { width: 1px; align-self: stretch; margin: 4px 2px; background: #d2d7dc; }
.floatbar .btn-ghost-danger { color: #8f1d17; }
.floatbar .btn-ghost-danger:hover { background: #fdecea; border-color: #f1c8c4; color: #8f1d17; }
.fb-menu { position: relative; display: inline-flex; }
.fb-drop::after { content: ""; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; opacity: .7; }
.fb-list {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 31; min-width: 260px;
  display: flex; flex-direction: column; padding: 4px;
  background: #ffffff; border: 1px solid #d2d7dc; border-radius: var(--sb-radius-lg); box-shadow: 0 8px 20px rgba(22, 29, 34, .10), 0 24px 56px rgba(22, 29, 34, .16);
}
.fb-list[hidden] { display: none; }
.fb-list.up { top: auto; bottom: calc(100% + 6px); }
.fb-list { max-width: calc(100vw - 32px); }
.fb-list.to-left { left: auto; right: 0; }
.fb-item { white-space: normal; text-align: left; }
.fb-item {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 28px;
  border: 0; border-radius: var(--sb-radius); background: none; color: #242c33;
  font: inherit; font-size: .8125rem; text-align: left; white-space: nowrap; cursor: pointer; position: relative;
}
.fb-item:hover:not(:disabled), .fb-item:focus-visible { background: #f1f3f5; outline: none; }
.fb-item:disabled { color: #8e98a2; cursor: default; }
.fb-item.is-on::before { content: "✓"; position: absolute; left: 10px; color: #016a6f; font-weight: 700; }
.fb-hr { height: 1px; margin: 4px 8px; background: #dde1e5; }
/* ширина столбцов: потянуть за границу между столбцами */
.tbl-grips { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 4; }
.tbl-grip { position: absolute; width: 9px; cursor: col-resize; }
.tbl-grip::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; }
.tbl-grip:hover::after { left: 3px; width: 3px; background: #028c90; border-radius: var(--sb-radius); }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none; }
/* короткое сообщение редактора (UI-KIT: светлое, тень, радиус 6, одна строка + одна кнопка) */
.ed-toast {
  position: fixed; left: 50%; bottom: calc(76px + 16px); transform: translateX(-50%); z-index: 1085;
  display: flex; align-items: center; gap: .625rem; width: max-content; max-width: min(640px, calc(100vw - 32px));
  padding: .375rem .375rem .375rem .875rem; border: 1px solid var(--sb-line); border-radius: var(--sb-radius-lg);
  background: #fff; color: var(--sb-ink); box-shadow: var(--sb-shadow-pop); font-size: .875rem; line-height: 1.45;
}
.ed-toast[hidden] { display: none; }
.ed-toast > .sb-ic { flex: none; width: 1.125rem; height: 1.125rem; color: var(--sb-ok-icon); }
.ed-toast[data-kind=warn] > .sb-ic { color: var(--sb-warn-icon); }
.ed-toast[data-kind=error] > .sb-ic { color: var(--sb-bad-icon); }
.ed-toast > span { flex: 1 1 auto; min-width: 0; padding: .3125rem 0; }
.ed-toast button {
  flex: none; height: 34px; padding: 0 .625rem; border: 0; border-radius: var(--sb-radius);
  background: none; color: var(--sb-brand-700); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.ed-toast button:hover { background: var(--sb-brand-50); color: var(--sb-brand-800); }


/* подсказка под редактором статьи и кнопки вставки */
.ed-help { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.ed-help li { padding-left: 2px; }
.editor-toolbar .tb-ins { color: #01555a; font-weight: 600; }
.editor-toolbar .tb-ins:hover { background: #edf7f7; border-color: #d3ebeb; }

/* рисунок в редакторе виден сразу, пока идёт загрузка */
.editor figure.is-loading { position: relative; }
.editor figure.is-loading:has(img)::before { content: none; }
.editor figure.is-loading img { opacity: .55; }
.editor figure.is-loading:has(img)::after { content: "Загружаем…"; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  padding: 4px 12px; border-radius: var(--sb-radius-lg); background: rgba(22, 29, 34, .75); color: #fff; font: 600 .8125rem/1.4 var(--bs-font-sans-serif); }
/* выбор размера таблицы */
.tbl-grid { position: absolute; z-index: 40; padding: 8px; background: #ffffff; border: 1px solid #d2d7dc; border-radius: var(--sb-radius-lg); box-shadow: 0 8px 20px rgba(22, 29, 34, .10), 0 24px 56px rgba(22, 29, 34, .16); }
.tbl-grid-cells { display: grid; grid-template-columns: repeat(8, 20px); gap: 3px; }
.tbl-grid-cells button { width: 20px; height: 20px; padding: 0; border: 1px solid #b6bec6; border-radius: var(--sb-radius); background: #ffffff; cursor: pointer; }
.tbl-grid-cells button.on { background: #d3ebeb; border-color: #028c90; }
.tbl-grid-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; font-size: .8125rem; color: #626c76; }
.tbl-grid-foot .sb-link-btn { font-size: .8125rem; min-height: 36px; }

/* конструктор записи */
.ref-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ref-kinds button { border: 1px solid #d2d7dc; background: #ffffff; border-radius: var(--sb-radius); padding: 5px 12px; font: inherit; font-size: .8125rem; cursor: pointer; color: inherit; }
.ref-kinds button.on { background: #edf7f7; border-color: #a9d7d8; color: #01555a; font-weight: 600; }
.ref-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; }
.ref-fields label { display: flex; flex-direction: column; gap: 4px; font-size: .8125rem; margin: 0; }
.ref-fields .rf-wide { grid-column: 1 / -1; }
.ref-result { margin-top: 10px; font-family: "Times New Roman", Times, serif; font-size: 14px; overflow-wrap: anywhere; }
@media (max-width: 560px) { .ref-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* состояние сохранения, счётчики и «как будет напечатано» – их переключает app.js */
.counter { font-size: .8125rem; color: #626c76; font-weight: 650; margin-left: 6px; font-variant-numeric: tabular-nums; }
.counter.bad { color: #8f1d17; }
.counter.ok  { color: #0b5d38; }

.as-printed {
  margin: 6px 0 0; font-size: .8125rem; color: #626c76;
  background: #f1f3f5; border: 1px solid #dde1e5;
  border-radius: var(--sb-radius-lg); padding: 6px 12px; line-height: 1.5;
}
.as-printed b { color: #242c33; font-weight: 600; }

.kw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kw-chip {
  font-size: .8125rem; padding: 2px 12px; border-radius: var(--sb-radius);
  background: #edf7f7; color: #01555a; border: 1px solid #d3ebeb;
}
.live-toggle { margin: 4px 0 12px; }
.live-preview { max-height: 62vh; overflow: auto; padding: 8px; margin-bottom: 12px; }
.autosave {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8125rem; color: #626c76; padding: 6px 0;
  font-weight: 500; max-width: 100%; white-space: normal; line-height: 1.35;
}
/* статус сохранения – просто строка текста, а не кнопка: нажимать на неё незачем */
.autosave.saving { color: #144a85; }
.autosave.saved  { color: #0b5d38; }
.autosave.error  { color: #8f1d17; font-weight: 600; }
.autosave svg { width: 15px; height: 15px; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .editor-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .editor-toolbar::-webkit-scrollbar { display: none; }
  .editor-toolbar button { height: 42px; min-width: 42px; flex: none; }
  .editor { padding: 16px; max-height: none; min-height: 300px; }
}
@media print { .editor-toolbar { display: none !important; } }

/* строка под таблицей: «Составлено автором», «Источник: …» – вплотную к таблице, без красной строки */
.editor p[data-note="src"] { text-indent: 0; text-align: left; margin-top: -.25rem; font-size: .9em; color: inherit; }
.editor p[data-note="src"]::before { content: "под таблицей: "; font-family: Helvetica, Arial, sans-serif; font-size: .8125rem; color: #6b7883; margin-right: .25rem; }

/* индексы в редакторе: Bootstrap поднимает их сдвигом (vertical-align: baseline + top),
   и браузер не понимает, что курсор уже в индексе – второе нажатие x² вкладывало новый.
   С настоящим vertical-align кнопка индекса включается и выключается как в Word. */
.editor sup, .editor sub { position: static; line-height: 1; }
.editor sup { vertical-align: super; }
.editor sub { vertical-align: sub; }

/* на телефоне и планшете сообщение редактора – сверху, под шапкой: внизу нижняя панель,
   а посреди экрана – панель только что вставленного рисунка или таблицы */
@media (max-width: 991.98px) {
  .ed-toast { top: calc(var(--sb-header-h, 60px) + env(safe-area-inset-top) + var(--ed-bar-h, 0px) + 8px); bottom: auto; }
}
@media (pointer: coarse) { .ed-toast button { height: 44px; } }

/* сенсорный экран: кнопки плавающих панелей рисунка и таблицы – под палец */
@media (pointer: coarse) {
  .floatbar .btn, .fb-item { min-height: 44px; }
  .floatbar input[type=range] { min-height: 32px; }
}