/* Единый стиль ОФОРМЛЕНИЯ СТАТЬИ — один источник правды для редактора
   (#editor .ProseMirror.content), мобильной (.m-article-body.content) и экспорта
   (<div class="content">). Всё оформление — class-based: санитайзер (app/security.py) пропускает
   class, но режет inline list-style-type/text-indent, поэтому стили списков и красная строка —
   только классами. CSS-переменные берутся из темы (app.css :root) в редакторе/мобильной; экспорт
   задаёт их преамбулой (export.py) — здесь используем var() без фолбэков намеренно. */

.content {
  font-size: 18px;
  line-height: 1.5;
  font-family: var(--font-prose);
  /* pre-wrap: подряд идущие пробелы и табы не схлопываются (как в Word), но строки переносятся.
     Инлайн white-space вырезает санитайзер → правило класс-based (редактор+мобилка+экспорт). */
  white-space: pre-wrap;
  tab-size: 2.7em;  /* рывок Tab ≈ как в Word (таб-стоп ~0.5", при шрифте 18px ≈ 48px) */
}

/* Режим абзаца (галерея). Управляет ТОЛЬКО отступами (не межстрочным — он 1.5 в обоих режимах).
   «Без интервалов» (дефолт, без класса): margin:0 — плотно. «Обычный» (.ps-normal): отбивка после
   абзаца (Word Normal space-after). Подчинённая схема: blockStyle живёт и на заголовках (см. ниже),
   заголовок наследует режим базового абзаца при конверсии и подчиняется ему. */
.content p { margin: 0; }
.content p.ps-normal { margin-bottom: .7em; }
.content > :first-child { margin-top: 0; }

/* Заголовки подчиняются режиму абзаца (подчинённая схема). По умолчанию «Без интервалов»
   (без класса): margin:0 — плотно, без отступов. «Обычный» (.ps-normal): отступы сверху ~втрое
   больше, чем снизу (1.5em / .5em). Размер и цвет — всегда (режим их не трогает). break-after:avoid
   = Word «keep with next». Размеры px — как опции дропдауна «Размер». */
.content h1, .content h2, .content h3 {
  margin: 0; line-height: 1.3; color: var(--mt-heading); break-after: avoid;
}
.content h1.ps-normal, .content h2.ps-normal, .content h3.ps-normal { margin: 1.5em 0 .5em; }
.content h1 { font-size: 22px; }
.content h2 { font-size: 20px; }
.content h3 { font-size: 18px; }

/* Ссылки: рука-курсор; внутренняя — пунктир акцентом, битая — красное подчёркивание. */
/* Ссылки: внутренние и внешние выглядят одинаково (дефолтный вид браузера). Битая внутренняя
   (цель не импортирована) — красным подчёркиванием, чтобы отличить. */
.content a { cursor: pointer; }
.content a[data-broken] { color: #e03131; text-decoration-color: #e03131; }

/* Красная строка (Tab → indent.js: class indent-1..20): отступ ПЕРВОЙ строки абзаца, шаг 2em,
   до края строки при ширине по умолчанию (~40em). */
.content .indent-1 { text-indent: 2em; }
.content .indent-2 { text-indent: 4em; }
.content .indent-3 { text-indent: 6em; }
.content .indent-4 { text-indent: 8em; }
.content .indent-5 { text-indent: 10em; }
.content .indent-6 { text-indent: 12em; }
.content .indent-7 { text-indent: 14em; }
.content .indent-8 { text-indent: 16em; }
.content .indent-9 { text-indent: 18em; }
.content .indent-10 { text-indent: 20em; }
.content .indent-11 { text-indent: 22em; }
.content .indent-12 { text-indent: 24em; }
.content .indent-13 { text-indent: 26em; }
.content .indent-14 { text-indent: 28em; }
.content .indent-15 { text-indent: 30em; }
.content .indent-16 { text-indent: 32em; }
.content .indent-17 { text-indent: 34em; }
.content .indent-18 { text-indent: 36em; }
.content .indent-19 { text-indent: 38em; }
.content .indent-20 { text-indent: 40em; }

/* Списки + стиль маркера/нумерации (list-style.js: class .list-*, как в Word). */
/* Без собственного внешнего отступа: зазор вокруг списка задаётся так же, как у абзацев (режим
   «Без интервалов» — пустой строкой-разделителем), иначе у импорта получался двойной отступ. */
.content ul, .content ol { margin: 0; padding-left: 1.6em; }
.content li { margin: .15em 0; }
.content .list-disc { list-style-type: disc; }
.content .list-circle { list-style-type: circle; }
.content .list-square { list-style-type: square; }
.content .list-decimal { list-style-type: decimal; }
.content .list-lower-alpha { list-style-type: lower-alpha; }
.content .list-upper-alpha { list-style-type: upper-alpha; }
.content .list-lower-roman { list-style-type: lower-roman; }
.content .list-upper-roman { list-style-type: upper-roman; }

/* Цитата */
.content blockquote { border-left: 3px solid var(--border); margin: .8em 0; padding: .3em .8em; color: var(--fg-dim); }

/* Код (моноширинный; блок кода — см. .block-code ниже). */
.content pre { background: var(--bg-alt); padding: 10px; border-radius: 6px; font-family: var(--font-mono); overflow: auto; }
.content code { font-family: var(--font-mono); }

/* Таблицы (раздел 11): рамки, обтекание (data-float рендерится и в экспорте). */
.content table { border-collapse: collapse; margin: 10px 0; width: auto; }
.content td, .content th { border: 1px solid var(--border); padding: 5px 8px; min-width: 36px; vertical-align: top; }
/* th без дефолтной заливки/жирного — как td: пользователь красит таблицу сам (заливка ячейки — 🎨). */
.content th { font-weight: inherit; text-align: inherit; }
.content .tableWrapper { margin: 6px 0; }
.content .tableWrapper:has(table[data-float="left"]) { float: left; width: 46%; margin: 0 16px 8px 0; }
.content .tableWrapper:has(table[data-float="right"]) { float: right; width: 46%; margin: 0 0 8px 16px; }
.content .tableWrapper:has(table[data-float]) table { width: 100%; }

/* Картинки: выравнивание сохранённого/экспортного вида (на самом <img>). */
.content img { max-width: 100%; height: auto; }
/* Индексы на шаг мельче браузерного дефолта (smaller ≈0.83em) — по просьбе. */
.content sub, .content sup { font-size: .7em; }
.content img.img-align-left { float: left; margin: 0 1em .5em 0; }
.content img.img-align-right { float: right; margin: 0 0 .5em 1em; }
.content img.img-align-center { display: block; margin: .6em auto; }

/* Контентные блоки-callout (раздел 12). Кнопки в шапке кода добавляет редактор (NodeView) —
   в экспорте/мобильной их нет; здесь — только оформление самих блоков. */
/* Блоки подчиняются режиму абзаца (как заголовки): «Без интервалов» (без класса) — margin:0,
   следующая строка сразу; «Обычный» (.ps-normal) — внешние отступы сверху/снизу. */
.content .block { border-radius: 8px; margin: 0; border: 1px solid var(--border); overflow: hidden; }
.content .block.ps-normal { margin: 10px 0; }
.content .block-header { display: flex; justify-content: space-between; align-items: center;
  padding: 5px 10px; font-weight: 600; font-size: 13px; background: var(--bg-alt); user-select: none; }
/* pre-wrap: подряд идущие пробелы/табы в info-врезках не схлопываются (выравнивание столбцов),
   но длинные строки переносятся. Инлайн white-space вырезает санитайзер → правило класс-based. */
.content .block-body { padding: 8px 12px; white-space: pre-wrap; }
.content .block.collapsed .block-body { display: none; }
.content .block-info { border-left: 4px solid #2f9e44; background: rgba(47,158,68,.09); }
.content .block-info .block-header { background: rgba(47,158,68,.16); color: #2f9e44; }
.content .block-attention { border-left: 4px solid #e03131; background: rgba(224,49,49,.08); }
.content .block-attention .block-header { background: rgba(224,49,49,.15); color: #c92a2a; }
/* Метка «!» attention → ОДИН «!» в красном треугольнике тонким контуром (без заливки). Родной текст
   метки прячем (font-size:0 + color:transparent — надёжно), сам «!» рисует SVG внутри треугольника. */
.content .block-attention .block-header > span {
  font-size: 0; color: transparent; position: relative; padding-left: 22px;
}
.content .block-attention .block-header > span::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 19px; height: 17px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 17'><path d='M9.5 1.5 18 15.5 1 15.5 Z' fill='none' stroke='%23e03131' stroke-width='1.4' stroke-linejoin='round'/><text x='9.5' y='13.7' font-size='9' font-weight='700' text-anchor='middle' fill='%23e03131'>!</text></svg>") no-repeat center / contain;
}
.content .block-tip { border-left: 4px solid #f2b705; background: rgba(242,183,5,.10); }
.content .block-tip .block-header { background: rgba(242,183,5,.20); color: #8a6d00; }
.content .block-danger { border-left: 4px solid #e03131; }
.content .block-highlight { border-left: 4px solid #f08c00; background: rgba(240,140,0,.06); }
.content .block-quote { border-left: 4px solid var(--fg-dim); font-style: italic; }
.content .block-ref { border-left: 4px solid var(--fg-dim); background: var(--bg-alt); }
.content .block-details { border-left: 4px solid var(--accent); }
.content .block-code { border-left: 3px solid var(--accent); background: var(--code-bg); }
.content .block-code pre { margin: 0; padding: 4px 14px 12px; overflow: auto; background: transparent; }
.content .block-code pre, .content .block-code code { font-family: var(--font-mono); font-size: 16px; }

/* Highlight.js — палитра GitHub (Light/Dark через переменные темы). */
.content .hljs-keyword, .content .hljs-selector-tag, .content .hljs-literal, .content .hljs-name { color: var(--hl-keyword); }
.content .hljs-string, .content .hljs-attr, .content .hljs-symbol, .content .hljs-bullet { color: var(--hl-string); }
.content .hljs-number, .content .hljs-built_in, .content .hljs-meta { color: var(--hl-number); }
.content .hljs-comment, .content .hljs-quote { color: var(--hl-comment); font-style: italic; }
.content .hljs-title, .content .hljs-section, .content .hljs-selector-id { color: var(--hl-title); }
.content .hljs-type, .content .hljs-class .hljs-title { color: var(--hl-type); }

/* Заливка текста (mark + импортированный inline background-color): вертикальный padding +
   box-decoration-break заполняют «протекание» line-height — без белых полос между строками. */
.content mark, .content span[style*="background-color"] {
  padding: 0.18em 2px; border-radius: 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.content mark { background: #fff3a0; }
.dark .content mark { background: #5c5320; color: #fff; }