@charset "UTF-8";

/* ============================================================================
   JComments 5.0.3 — дочерний шаблон cassiopeia_lifesecrets
   Путь: /templates/cassiopeia_lifesecrets/html/com_jcomments/default/style.css

   Этот файл ПОЛНОСТЬЮ ЗАМЕНЯЕТ components/com_jcomments/tpl/default/style.css.
   JCommentsSystem::getCSS() сначала ищет файл здесь и подключает только его,
   штатный больше не грузится (helpers/system.php, строки 47–59).

   Что здесь сделано:
     - карточки убраны, список превращён в колонку писем на волосяной линейке;
     - цитата облегчена: она была тяжелее ответа, теперь легче;
     - GIF-спрайты 2009 года (jc_bbcodes, jc_busy, jc_resize) не используются;
     - всё заскоуплено в #jc — правила user.css не приходится ловить !important'ом.

   Порядок разделов:
     01. Токены
     02. Сброс наследия
     03. Заголовок блока
     04. Список и запись
     05. Шапка записи
     06. Текст записи
     07. Цитата
     08. Подвал записи (действия + оценка)
     08a. Сердечко
     09. Пагинация
     09a. Навигация по соседним статьям
     10. Форма
     11. Служебное: правка, жалоба, админ-панель
     12. Доступность, motion, печать
     13. Адаптив
     14. Тёмная тема (выключена, см. комментарий)
   ========================================================================== */


/* ==========================================================================
   01. ТОКЕНЫ
   Всё, что крутится, крутится здесь. Значения тянутся из user.css;
   fallback'и нужны, если блок комментариев окажется вне .item-page.
   --accent приходит от рубрики (.item-family, .item-success и т.д.),
   поэтому комментарии перекрашиваются вместе со статьёй сами.
   ========================================================================== */

#jc {
  --jc-ink:        var(--c-text, #3E230F);
  --jc-ink-soft:   var(--c-text-soft, #6B533F);
  --jc-paper:      var(--c-paper, #FCF8E7);
  --jc-accent:     var(--accent, #CEC5F0);

  /* Приглушённый серый.

     Сознательно НЕ берём var(--c-muted) сайта: там #8A8A8A, и на белой
     карточке это 3.5:1 — ниже нормы WCAG 4.5:1 для мелкого текста.
     А мелким тут набрано ровно то, что читают прищурившись: дата и
     служебные подписи. #6E6E6E даёт 5.1:1, на глаз почти не отличается.

     Если в user.css появится доступный --c-muted, замените строку на
     var(--c-muted, #6E6E6E) — здесь она намеренно жёсткая. */
  --jc-muted:      #6E6E6E;

  /* Оттенки монограмм.

     Пять приглушённых тонов одной светлоты. Не берутся из --accent:
     акцент рубрики бывает салатовым и жёлтым, и производные от него
     оттенки разъехались бы по статьям — один и тот же человек
     перекрашивался бы при переходе между рубриками, а это ровно то
     узнавание, ради которого цвет и вводится.

     Светлота выровнена так, чтобы тёмный текст --jc-ink читался
     на любом из пяти (контраст не ниже 7:1). */
  --jc-mono-1:     #CFC7EA;   /* лаванда */
  --jc-mono-2:     #C6D6C0;   /* шалфей */
  --jc-mono-3:     #E4CDBE;   /* глина */
  --jc-mono-4:     #C3D2DE;   /* пыльно-голубой */
  --jc-mono-5:     #E2D7B4;   /* охра */

  /* Линейка между записями: акцент рубрики, притушенный нейтралью */
  --jc-rule:       color-mix(in srgb, var(--jc-accent) 55%, var(--c-rule, #C4C6B3));

  /* Цитата */
  --jc-quote-bg:   color-mix(in srgb, var(--jc-accent) 14%, transparent);
  --jc-quote-rule: color-mix(in srgb, var(--jc-accent) 80%, var(--jc-ink));
  --jc-quote-ink:  color-mix(in srgb, var(--jc-ink) 76%, var(--jc-paper));

  /* Оценка. Не берём цвет рубрики: на жёлтой и салатовой он нечитаем */
  --jc-pos:        #3F7A34;
  --jc-neg:        #9A3B2E;

  /* Ритм внутри блока */
  --jc-gap:        var(--sp-5, 1.5rem);

  clear: both;
  margin-top: var(--sp-7, 3rem);
  color: var(--jc-ink);
}


/* ==========================================================================
   02. СБРОС НАСЛЕДИЯ
   Шаблон отдаёт разметку с классами Bootstrap, которые рисуют рамки
   вокруг каждой записи. Рамки на бумажной подложке дают коробку в коробке.
   ========================================================================== */

#jc .border,
#jc .rounded,
#jc .rbox {
  border: 0 !important;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}

/* Оценка. Штатный layout отдавал <span class="badge bg-success"> — зелёная
   плашка Bootstrap. Наш override классы bg-* больше не ставит, но сбрасываем
   их и здесь: старый кеш страницы или чужой шаблон могут вернуть плашку,
   а тёмно-зелёный текст на зелёном фоне не читается вообще. */
#jc .badge,
#jc .vote-value,
#jc .vote-value.bg-success,
#jc .vote-value.bg-danger,
#jc .vote-value.bg-secondary {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none !important;
  background-color: transparent !important;
  font-size: inherit;
}

/* Индикатор ожидания вместо jc_busy.gif */
#jc .busy {
  display: none;
  width: 1rem;
  height: 1rem;
  margin: 0.25rem auto;
  border: 2px solid var(--jc-rule);
  border-top-color: var(--jc-ink-soft);
  border-radius: 50%;
  background: none;
  animation: jc-spin 0.7s linear infinite;
}

@keyframes jc-spin { to { transform: rotate(360deg); } }

/* Внешние ссылки больше не помечаются картинкой jc_link.gif */
#jc #comments a[rel*="external"] {
  background: none;
  padding: 0;
  margin: 0;
}


/* ==========================================================================
   03. ЗАГОЛОВОК БЛОКА
   Разметку даёт layouts/comments-header.php (см. override).
   ========================================================================== */

#jc .comments-list-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3, 0.75rem);
  margin-bottom: var(--sp-5, 1.5rem);
  padding-bottom: var(--sp-2, 0.5rem);

  /* Была линейка в 2px чистым цветом рубрики. На странице, где ниже идут
     двадцать четыре карточки с рамкой того же цвета (притушенного), она
     оказывалась самым ярким пятном блока и спорила с ними — на это
     отдельно указал аудит.

     Стала волосяной и нейтральной: граница между статьёй и обсуждением
     нужна, а заявлять рубрику в полную силу здесь нечем — цвет и так
     живёт в монограммах, подложках навигации и рамках карточек. */
  border-bottom: 1px solid var(--jc-rule);
}

#jc .jc-title {
  margin: 0;
  font-family: var(--font-head, inherit);
  font-size: var(--fs-h3, 1.3125rem);
  font-weight: 700;
  line-height: var(--lh-tight, 1.25);
  color: var(--jc-ink);
}

/* Счётчик стоит внутри h2 (layouts/comments-header.php). Внутри заголовка
   он обязан быть заметно легче его самого, иначе строка читается как
   «Комментарии читателей 24» одним куском. Отсюда меньший кегль,
   обычное начертание и приглушённый цвет. */
#jc .jc-count {
  margin-left: 0.35em;
  font-family: var(--font-body, inherit);
  font-size: var(--fs-sm, 0.9375rem);
  font-weight: 400;
  color: var(--jc-muted);
  font-variant-numeric: tabular-nums;
}

/* Текст только для скринридера: слово «комментария» при числе.
   Своя реализация, а не .visually-hidden Bootstrap — блок не должен
   зависеть от того, подключён ли на странице фреймворк. */
#jc .jc-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Подпись «архив, комментирование закрыто» */
#jc .jc-note {
  margin: 0 0 var(--sp-5, 1.5rem);
  font-size: var(--fs-sm, 0.9375rem);
  color: var(--jc-ink-soft);
}

/* --- Переключатель порядка -----------------------------------------------

   «По порядку · Сначала лучшие». Выводится только при выключенной
   пагинации и от пяти записей (layouts/comments-header.php), работает
   на клиенте (js/jclike.js).

   Не сегментированная кнопка с рамкой и не выпадающий список: это
   второстепенный переключатель под заголовком, ему нельзя выглядеть
   весомее самого заголовка. Две текстовые кнопки, активная подчёркнута. */
/* Правая группа шапки: переключатель порядка и ссылка «Написать
   комментарий». Обёртка появилась, когда их стало двое: раньше сортировка
   отодвигалась вправо сама, через margin-left: auto, и второй элемент рядом
   с ней встать уже не мог.

   flex-wrap обязателен. На узком экране заголовок со счётчиком занимает
   всю строку, и группа переезжает под него целиком — а не разрывается
   пополам, оставив кнопку висеть отдельно. */
#jc .jc-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3, 0.75rem) var(--sp-4, 1rem);
  margin-left: auto;
  align-self: center;
}

/* Когда в группе двое, она забирает вторую строку целиком: заголовок
   остаётся один в первой и перестаёт переноситься. Сортировка уходит
   к левому краю, кнопка — к правому. Класс ставит PHP, условие ему
   известно (layouts/comments-header.php). */
#jc .jc-tools.is-split {
  flex: 1 1 100%;
  justify-content: flex-end;
  margin-left: 0;
  margin-top: var(--sp-1, 0.25rem);
}

#jc .jc-tools.is-split .jc-sort { margin-right: auto; }

#jc .jc-sort {
  display: flex;
  gap: var(--sp-3, 0.75rem);
}

#jc .jc-sort-btn {
  padding: 0.15rem 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-size: var(--fs-sm, 0.9375rem);
  color: var(--jc-muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

#jc .jc-sort-btn:hover,
#jc .jc-sort-btn:focus-visible { color: var(--jc-ink); }

#jc .jc-sort-btn.is-active {
  color: var(--jc-ink);
  font-weight: 600;
  border-bottom-color: var(--jc-accent);
  cursor: default;
}

/* --- «Написать комментарий» -----------------------------------------------

   Якорь к форме внизу страницы. Оформлен плашкой, а не текстовой ссылкой:
   рядом стоят две текстовые кнопки сортировки, и третья такая же в строке
   потерялась бы среди них. Плашка приглушённая, цветом рубрики — она
   зовёт, но не спорит с заголовком блока.

   Высота 2.25rem на десктопе и 2.75rem на телефоне (раздел 13):
   на сенсорном экране это нижняя граница уверенного попадания пальцем. */
#jc .jc-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.9rem;
  border: 1px solid var(--jc-quote-rule);
  border-radius: var(--radius-sm, 0.375rem);
  background-color: color-mix(in srgb, var(--jc-accent) 30%, transparent);
  font-size: var(--fs-sm, 0.9375rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--jc-ink);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

#jc .jc-cta:hover,
#jc .jc-cta:focus-visible {
  background-color: color-mix(in srgb, var(--jc-accent) 55%, transparent);
  color: var(--jc-ink);
}

#jc .jc-cta-icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   04. СПИСОК И ЗАПИСЬ

   Было: волосяная линейка между записями, без карточек. Замысел — не делать
   коробку в коробке на бумажной подложке .item-page. На практике при быстрой
   прокрутке границы записей ловятся плохо: линейка тонкая, а метаданные,
   тема и текст выровнены по одному левому краю и сливаются в сплошной массив.

   Стало: карточка. Поверхность белая — она светлее кремовой бумаги статьи
   и потому читается как отдельный слой, а не как ещё одно пятно. Рамка
   в один пиксель цветом рубрики, скругление, увеличенный внешний отступ.
   Теней нет намеренно: тень вокруг каждой из 24 записей даёт ту самую рябь,
   от которой карточки и должны спасать.
   ========================================================================== */

/* Лента — <ol> (tpl_list.php). Маркеры и левый отступ, которые браузер
   даёт спискам по умолчанию, здесь не нужны: нумерация у записей своя,
   видимая, и стоит она в шапке карточки, а не на полях.

   Оговорка про Safari. При list-style: none он снимает со списка
   списочную семантику, и VoiceOver перестаёт объявлять «список,
   24 элемента» — ровно то, ради чего <ol> и вводился. Лечится атрибутом
   role="list" на самом <ol>; он проставлен в tpl_list.php. Убирать
   этот атрибут как «избыточный для <ol>» нельзя, он здесь по делу. */
#jc #comments,
#jc .comments-list {
  margin: 0;
  padding: 0;
  width: auto;
  list-style: none;
}

#jc .comments-list > li,
#jc .comments-list > .even,
#jc .comments-list > .odd {
  margin: 0;
  padding: 0;
  list-style: none;
}

#jc .jc-comment {
  display: block;
  margin-bottom: var(--jc-gap);
  padding: var(--sp-4, 1rem) var(--sp-5, 1.5rem);
  border: 1px solid var(--jc-rule);
  border-radius: var(--radius, 0.625rem);
  background-color: var(--c-white, #fff);

  /* Отступ при переходе по ссылке — см. ниже */
  scroll-margin-top: var(--jc-scroll-offset, 6rem);
}

#jc .comments-list > *:last-child .jc-comment { margin-bottom: 0; }

/* --- Переход по ссылке на комментарий ------------------------------------

   Задание, п. «При нажатии на ссылку комментария стоит сделать так, чтобы
   возврат был в самое начало сообщения».

   Было: якорь id="comment-ID" висел на строчной ссылке «#4» внутри шапки,
   и переход ставил под верхний край окна именно её. Липкая шапка сайта
   (логотип и поиск) накрывала первые полторы сотни пикселей, вместе с ними
   монограмму, имя автора и дату. От комментария оставался обрывок текста
   без подписи — по цитате не понять ни чей он, ни где начинается.

   Стало: якорь стоит на всей записи (tpl_comment.php), а scroll-margin-top
   отодвигает точку остановки вниз на высоту липкой шапки. Свойство
   уважают и браузер при обычном переходе по #hash, и scrollIntoView,
   которым мы заменили штатную прокрутку (js/jclike.js).

   Значение --jc-scroll-offset проставляет тот же скрипт, измерив шапку
   по факту. 6rem — запасное значение на случай, если JS не выполнился. */
#jc .comments-list > *:target .jc-comment,
#jc .jc-comment:target {
  border-color: var(--jc-quote-rule);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jc-accent) 35%, transparent);
}

/* Подсветка после перехода. :target гаснет только при следующем переходе,
   а этот класс живёт полторы секунды и снимается сам — ровно столько,
   чтобы глаз успел найти карточку и не успел устать от рамки. */
#jc .jc-comment.jc-flash {
  animation: jc-flash 1.8s ease-out 1;
}

@keyframes jc-flash {
  0%   { border-color: var(--jc-quote-rule);
         box-shadow: 0 0 0 4px color-mix(in srgb, var(--jc-accent) 55%, transparent); }
  70%  { border-color: var(--jc-quote-rule);
         box-shadow: 0 0 0 4px color-mix(in srgb, var(--jc-accent) 35%, transparent); }
  100% { border-color: var(--jc-rule);
         box-shadow: 0 0 0 0 transparent; }
}


/* ==========================================================================
   05. ШАПКА ЗАПИСИ

   Было: номер, имя, дата и оценка в одну строку. Четыре разнородные вещи
   на одной базовой линии конкурировали между собой, и глаз не находил,
   за что зацепиться.

   Стало: одна строка метаданных, под ней — содержание.

     [ М ]  Имя • 16 февраля 2013                            ⌗
     Тема реплики
     Текст…

   Слева монограмма — первая буква имени в кружке. Это не аватар: аватаров
   не будет, все авторы гости. Это якорь. Когда на статье 24 записи от
   двенадцати человек, повторяющаяся буква даёт узнать вернувшегося
   собеседника раньше, чем прочитано имя.

   ПРАВКА ВТОРОГО ЗАХОДА. Было: имя и дата в столбик, под ними линейка
   во всю ширину карточки. Стало: имя и дата в одну строку через точку,
   линейки нет.

   Почему так лучше. Дата в архиве 2010–2019 не работает: между «2011»
   и «2013» читателю нет никакой разницы, а занимала она целую строку
   наравне с именем. Приглушённая и приписанная к имени, она отвечает
   на вопрос «когда» тому, кто его задал, и не мешает остальным.

   Линейка убрана потому, что отделять стало нечего: служебная строка
   теперь одна, и вес шрифта с отступом справляются лучше, чем черта.
   Заодно это минус двадцать четыре горизонтальные линии на странице —
   ровно то, от чего в блоке становилось тесно.

   Справа номер — самое второстепенное, что есть в записи: иконка-звено,
   проявляется при наведении.
   ========================================================================== */

#jc .jc-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3, 0.75rem);
  margin: 0 0 var(--sp-2, 0.5rem);
  font-size: var(--fs-sm, 0.9375rem);
  line-height: 1.4;
}

/* --- Монограмма ----------------------------------------------------------

   Пять оттенков вместо одного. Цвет назначается по crc32 имени
   (layouts/comment-info.php), поэтому один и тот же человек всюду
   одного цвета — в этом весь смысл: в обсуждении на двенадцать человек
   цвет узнаётся раньше буквы и раньше имени.

   Почему пять, а не двенадцать. Двенадцать цветов вернули бы ту самую
   рябь, ради устранения которой затевались карточки. Пять приглушённых
   тонов одной светлоты складываются в спокойную полосу, а различение
   даёт пара «цвет + буква», а не цвет сам по себе. */
#jc .jc-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--jc-mono-1);
  color: var(--jc-ink);
  font-size: var(--fs-base, 1rem);
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

#jc .jc-avatar-1 { background-color: var(--jc-mono-1); }
#jc .jc-avatar-2 { background-color: var(--jc-mono-2); }
#jc .jc-avatar-3 { background-color: var(--jc-mono-3); }
#jc .jc-avatar-4 { background-color: var(--jc-mono-4); }
#jc .jc-avatar-5 { background-color: var(--jc-mono-5); }

/* Имя, точка, дата — одной строкой. flex-wrap на случай длинного имени
   на узком экране: тогда дата уходит под него, а не выдавливает иконку
   постоянной ссылки за край.

   align-items: baseline, а не center: имя набрано крупнее даты, и по
   базовой линии они стоят ровно, а по центру — с заметным смещением. */
#jc .jc-identity {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4rem;
}

#jc .jc-dot {
  color: var(--jc-muted);
  font-size: var(--fs-sm, 0.9375rem);
  line-height: 1;
}

#jc .jc-author {
  font-size: var(--fs-base, 1rem);
  font-weight: 700;
  line-height: var(--lh-tight, 1.25);
  color: var(--jc-ink);
  overflow-wrap: break-word;
}

#jc .jc-author a { color: inherit; }

/* --- Номер и оценка ------------------------------------------------------ */
#jc .jc-marks {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2, 0.5rem);
  margin-left: auto;
}

/* --- Постоянная ссылка ---------------------------------------------------

   Было: текстовый «#4». Стало: иконка-звено, которая проявляется при
   наведении на карточку и копирует адрес в буфер (js/jclike.js).

   Место под неё держим всегда (visibility, а не display): если иконка
   будет появляться и исчезать из потока, шапка при наведении дёрнется. */
#jc .jc-num {
  position: relative;   /* якорь для подписи «Ссылка скопирована» */
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem;
  margin: -0.2rem;
  border-radius: var(--radius-sm, 0.375rem);
  color: var(--jc-muted);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

#jc .jc-comment:hover .jc-num,
#jc .jc-num:focus-visible,
#jc .jc-comment:focus-within .jc-num { opacity: 1; }

#jc .jc-num:hover,
#jc .jc-num:focus-visible {
  color: var(--c-link-hover, #C25400);
  background-color: color-mix(in srgb, var(--jc-accent) 22%, transparent);
}

#jc .jc-num-icon {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* Номер прячем: он живёт в подсказке и в aria-label. На экране от него
   было больше шума, чем пользы. Не display:none — экранные дикторы
   должны его читать, а из потока он убран у самой ссылки. */
#jc .jc-num-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Подтверждение копирования. Всплывающая подпись вместо смены иконки:
   иконка в этот момент под курсором и её всё равно не видно. */
#jc .jc-num.is-copied {
  opacity: 1;
  color: var(--jc-pos, #3F7A34);
}

#jc .jc-num.is-copied::after {
  content: "Ссылка скопирована";
  position: absolute;
  transform: translate(-100%, 1.6rem);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm, 0.375rem);
  background-color: var(--jc-ink);
  color: var(--c-white, #fff);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  animation: jc-fade-in 0.18s ease-out 1;
}

@keyframes jc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Сенсорный экран: наводить нечем, поэтому иконка видна всегда */
@media (hover: none) {
  #jc .jc-num { opacity: 0.7; }
}

/* Дата стоит под именем, вправо больше не уезжает */
#jc .jc-date {
  color: var(--jc-muted);
  font-size: var(--fs-sm, 0.9375rem);
  font-variant-numeric: tabular-nums;
}

/* Свежая запись с относительной датой («3 часа назад»). Числа в ней
   не выравниваются по колонке — tabular-nums только мешает. */
#jc .jc-date.is-relative { font-variant-numeric: normal; }

/* Оценки в шапке больше нет: она переехала в подвал записи (раздел 08).
   Правила ниже страхуют на случай, если старая разметка придёт из кеша
   страницы или из необновлённого layout — тогда пусть выглядит скромно,
   а не зелёной плашкой Bootstrap поверх цифры. */
#jc .jc-head .comments-vote,
#jc .jc-head .jc-score {
  width: auto;
  float: none;
  margin: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--jc-muted);
}

#jc .vote-value {
  float: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none !important;
  font-weight: 600;
  font-size: inherit;
  line-height: inherit;
}

/* Тема записи. Стоит ПОД шапкой, за отделяющей линейкой, и работает
   заголовком письма. Раньше она шла следом за именем тем же кеглем
   и почти тем же весом — глаз не находил границы между служебной
   строкой и текстом.

   Заглавными не набираем: ALL-CAPS замедляет чтение кириллицы,
   а в вашем списке «не делать» этот пункт стоял с самого начала. */
/* Тема реплики (h3).

   ПРАВКА ВТОРОГО ЗАХОДА. Было: Georgia кеглем --fs-h4, то есть крупнее
   основного текста и почти вровень с заголовком всего блока. Двадцать
   четыре таких строки читались как оглавление статьи, а не как темы
   отдельных реплик, и спорили с h2 над лентой.

   Стало: тот же кегль и та же гарнитура, что у текста записи, но вес 700.
   Роль заголовка держится весом и положением — этого достаточно, когда
   заголовок стоит первой строкой блока. Гарнитура основная, не заголовочная:
   Georgia в одну строку внутри карточки выглядит как цитата из другого
   документа.

   Ограничения длины нет намеренно. Тема — это содержание, а не подпись;
   обрезать её многоточием значит спрятать часть смысла ради ровной
   высоты. Длинная тема просто занимает две строки. */
#jc .jc-subject {
  margin: 0 0 var(--sp-2, 0.5rem);
  font-family: inherit;
  font-size: var(--fs-base, 1rem);
  font-weight: 700;
  line-height: var(--lh-tight, 1.25);
  color: var(--jc-ink);
  text-indent: 0;
}

/* Если тема осталась в старой позиции (необновлённый layout) — не даём ей
   слиться с текстом */
#jc .comment-title {
  display: block;
  width: 100%;
  order: 10;
  font-weight: 700;
  color: var(--jc-ink);
}


/* ==========================================================================
   06. ТЕКСТ ЗАПИСИ
   Тела комментариев — сплошной текст с <br><br> вместо абзацев
   (так их сохранил старый редактор). Абзацного отступа тут быть не должно.
   ========================================================================== */

#jc .comment-box { margin: 0; padding: 0; }

#jc .comment-body {
  clear: both;
  margin: 0;
  padding: 0;
  font-size: var(--fs-base, 1rem);
  line-height: var(--lh-body, 1.65);
  color: var(--jc-ink);
  text-indent: 0;
  overflow-wrap: break-word;
}

#jc .comment-body p {
  margin: 0 0 var(--sp-3, 0.75rem);
  text-indent: 0;
}

#jc .comment-body p:last-child { margin-bottom: 0; }

#jc .comment-body a {
  color: var(--c-link, #6A5DF5);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

#jc .comment-body a:hover { color: var(--c-link-hover, #C25400); }

#jc .comment-body img { max-width: 100%; height: auto; border: 0; padding: 0; }

#jc .comment-body .img { max-width: 100%; padding: var(--sp-2, 0.5rem) 0; }

/* --- Смайлы в тексте комментария -----------------------------------------

   Набор — чёрные контурные OpenMoji 72×72 (CC BY-SA 4.0), путь задаётся
   параметром smilies_path, по умолчанию media/com_jcomments/images/smilies/.

   ВАЖНО ПРО СЕЛЕКТОР. Прежнее правило было написано на `img.smile` и
   не срабатывало никогда. Класс `smile` компонент ставит только картинкам
   в панели выбора, и делает это скриптом (jcomments-v4.0.js:413). А в текст
   комментария смайл подставляется на сервере, и там класса нет вообще:

       classes/smilies.php:61
       '\\1<img src="' . $path . $image . '" alt="' . htmlspecialchars($code) . '" />\\3'

   Поэтому в теле комментария цепляемся за путь в src. Он задан настройкой
   и содержит /smilies/ при любом её значении.

   Пока правило не срабатывало, картинки ловились общим `#jc .comment-body img`
   и выводились в натуральную величину. Старый набор был 18×18 и разницы
   почти не давал; OpenMoji — 72×72, и смайл становился больше строки.

   РАЗМЕР И МЕЖСТРОЧНЫЙ ИНТЕРВАЛ. Высота 1.15em при line-height 1.7 умещается
   в строку целиком и не раздвигает её. Проверено измерением: абзац со
   смайлами и такой же без них имеют одинаковую высоту (см. README, п. 7).
   Если поднимете кегль смайла выше 1.25em — строки начнут расходиться.

   opacity нужна не для красоты: OpenMoji нарисованы чистым #000, а текст
   вокруг — #3E230F. Без приглушения смайл выходит темнее и холоднее букв
   и выпрыгивает из строки. 0.82 уравнивает его с весом текста. */
#jc .comment-body img[src*="/smilies/"],
#jc .comment-body img.smile {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin: 0 0.12em;
  padding: 0;
  border: 0;
  vertical-align: -0.22em;
  opacity: 0.82;

  /* Страховка от собственных размеров файла (72×72) */
  max-width: 1.15em;
  max-height: 1.15em;
}

#jc .comment-body ul,
#jc .comment-body ol {
  margin: var(--sp-3, 0.75rem) 0;
  padding-left: var(--sp-5, 1.5rem);
}

#jc .comment-body li { margin-bottom: var(--sp-1, 0.25rem); }

/* [code] — моноширинный блок без рамки-коробки */
#jc .comment-body figure.jc-code,
#jc .comment-body .code {
  margin: var(--sp-3, 0.75rem) 0;
  padding: var(--sp-3, 0.75rem);
  border: 0;
  border-left: 2px solid var(--jc-rule);
  border-radius: 0;
  background-color: color-mix(in srgb, var(--jc-ink) 5%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  overflow-x: auto;
}

#jc .comment-body figcaption.code {
  margin-bottom: var(--sp-1, 0.25rem);
  font-family: var(--font-body, inherit);
  font-size: var(--fs-xs, 0.8125rem);
  text-align: left;
  color: var(--jc-muted);
}


/* ==========================================================================
   07. ЦИТАТА  ← сюда потрачен весь бюджет смелости
   Ответов в терминах компонента нет ни одного: parent пуст у всех 393
   записей. Диалог держится только на [quote name="..."], вложенность
   доходит до двух уровней. Значит цитата — единственный носитель структуры.

   Что было: Georgia, курсив, размер БОЛЬШЕ ответа (--fs-lg из user.css),
   рамка 5px, внутренняя тень, подпись «Цитирую X:» по центру мелким серым.
   Цитата весила больше ответа, читатель терял нить.

   Что стало: цитата легче ответа и явно вторична —
     - шрифт основной, не курсив, на ступень мельче;
     - подпись слева, тем же кеглем и весом, что имя автора записи;
       глаз связывает «Владимир пишет:» с записью Владимира выше;
     - слева планка 3px цветом рубрики, подложка едва заметна;
     - второй уровень меняет подложку на цвет бумаги и «пробивает»
       первый, глубина видна сразу, а вес не растёт.

   Разметка приходит из classes/bbcode.php и менять её нельзя:
     <figure>
       <figcaption class="quote">Цитирую Владимир:</figcaption>
       <blockquote class="text-muted"><div>текст</div></blockquote>
     </figure>
   Между тегами парсер оставляет мусорные <br> — гасим их.
   ========================================================================== */

#jc .comment-body figure {
  margin: var(--sp-4, 1rem) 0;
  padding: 0;
}

#jc .comment-body figure > br { display: none; }

#jc .comment-body figcaption.quote {
  margin: 0 0 var(--sp-1, 0.25rem);
  padding: 0;
  font-family: var(--font-body, inherit);
  font-size: var(--fs-sm, 0.9375rem);
  font-weight: 600;
  font-style: normal;
  line-height: 1.4;
  text-align: left;
  color: var(--jc-ink-soft);
}

/* Подпись — ссылка на исходный комментарий (см. linkQuotes в tpl_comment.php).
   Цвет не меняем: подпись должна рифмоваться с именем автора записи, а не
   выглядеть посторонней ссылкой. Пунктир под текстом говорит, что это
   переход, и не спорит со сплошным подчёркиванием ссылок в теле. */
#jc .comment-body a.jc-quote-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--jc-quote-rule) 70%, transparent);
  cursor: pointer;
}

#jc .comment-body a.jc-quote-link::after {
  content: " ↑";
  font-size: 0.85em;
  color: var(--jc-muted);
}

#jc .comment-body a.jc-quote-link:hover,
#jc .comment-body a.jc-quote-link:focus-visible {
  color: var(--c-link-hover, #C25400);
  border-bottom-color: currentColor;
}

#jc .comment-body blockquote {
  margin: 0;
  padding: var(--sp-2, 0.5rem) var(--sp-3, 0.75rem);
  border: 0;
  border-left: 4px solid var(--jc-quote-rule);
  border-radius: 0 var(--radius-sm, 0.375rem) var(--radius-sm, 0.375rem) 0;
  box-shadow: none;
  background-color: var(--jc-quote-bg);
  font-family: var(--font-body, inherit);
  font-size: var(--fs-sm, 0.9375rem);
  font-style: normal;
  line-height: 1.55;
  color: var(--jc-quote-ink);
  text-align: left;
  text-indent: 0;
}

#jc .comment-body blockquote > div { margin: 0; }

/* --- Длинная цитата сворачивается ----------------------------------------

   В архиве есть записи, где цитата занимает больше места, чем ответ
   на неё, да ещё и вложена в другую цитату. Читателю приходится
   пролистывать чужой текст, чтобы добраться до нового.

   Порог и кнопку ставит js/jclike.js: он меряет реальную высоту, потому
   что в узкой колонке телефона те же слова занимают втрое больше строк,
   чем на десктопе. Без JS цитата остаётся целиком — это не поломка,
   просто как было.

   Затухание сделано маской, а не градиентной накладкой: накладка
   пришлось бы красить в цвет фона цитаты, а он полупрозрачный
   и меняется вместе с акцентом рубрики. */
#jc .comment-body blockquote.is-clipped {
  max-height: 8.25rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

#jc .comment-body blockquote.is-clipped.is-open {
  max-height: none;
  overflow: visible;
  -webkit-mask-image: none;
          mask-image: none;
}

#jc .jc-quote-more {
  display: inline-block;
  margin: 0.35rem 0 var(--sp-3, 0.75rem);
  padding: 0.2rem 0;
  border: 0;
  border-bottom: 1px solid var(--jc-rule);
  background: none;
  font: inherit;
  font-size: var(--fs-sm, 0.9375rem);
  color: var(--jc-ink-soft);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

#jc .jc-quote-more:hover,
#jc .jc-quote-more:focus-visible {
  color: var(--c-link-hover, #C25400);
  border-bottom-color: currentColor;
}

/* --- Второй уровень вложенности ------------------------------------------
   Было: пунктирная планка. На экране она читалась как ряд зелёных точек,
   а не как граница цитаты, и второй уровень почти не отличался от первого.

   Стало: смена подложки вместо смены толщины линии. Первый уровень —
   подкрашенная плашка, второй — чистая бумага, тот же цвет, что у страницы.
   Внутренняя цитата буквально «пробивает» внешнюю, и глубина видна
   с одного взгляда, хотя вес обеих цитат остался прежним. */
#jc .comment-body blockquote figure {
  margin: var(--sp-3, 0.75rem) 0;
}

#jc .comment-body blockquote figcaption.quote {
  color: var(--jc-quote-ink);
}

#jc .comment-body blockquote blockquote {
  margin-left: var(--sp-2, 0.5rem);
  padding: var(--sp-2, 0.5rem) var(--sp-3, 0.75rem);
  border-left: 4px solid color-mix(in srgb, var(--jc-quote-rule) 60%, var(--c-white, #fff));
  border-radius: 0 var(--radius-sm, 0.375rem) var(--radius-sm, 0.375rem) 0;
  background-color: var(--c-white, #fff);
  color: var(--jc-quote-ink);
}

/* Третий уровень в базе не встречается, но если появится — не даём
   лесенке уехать вправо и снова меняем подложку на подкрашенную */
#jc .comment-body blockquote blockquote blockquote {
  margin-left: 0;
  background-color: var(--jc-quote-bg);
}

/* Пустой абзац, который парсер иногда оставляет сразу после цитаты */
#jc .comment-body figure + br { display: none; }


/* ==========================================================================
   08. ПОДВАЛ ЗАПИСИ
   Разметку даёт layouts/comment-buttons.php.

   Задание, раздел «Оптимальная анатомия комментария»:

       Верх   — скромные имя и дата, дают контекст, но не перетягивают.
       Центр  — текст комментария, самое крупное и читаемое.
       Низ    — «Цитировать» и «Лайк». Дочитал и сразу отреагировал.

   Отсюда раскладка подвала: действия прижаты влево, оценка вправо,
   между ними воздух.

       ─────────────────────────────────────────────────
       Цитировать                                 ♡ 16

   Линейка сверху зеркалит линейку под шапкой: текст комментария оказывается
   зажат между двумя служебными полосами и читается как единый блок.
   ========================================================================== */

#jc .jc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3, 0.75rem);
  flex-wrap: wrap;
  margin: var(--sp-4, 1rem) 0 0;
  padding-top: var(--sp-3, 0.75rem);
  border-top: 1px solid color-mix(in srgb, var(--jc-rule) 60%, transparent);
  font-size: var(--fs-sm, 0.9375rem);
}

/* Подвал без действий (архив: цитировать нечего) — линейка не нужна,
   сердечко висит само по себе, и лишняя полоса режет запись зря. */
#jc .jc-foot:has(.jc-actions:empty) {
  border-top: 0;
  padding-top: 0;
  margin-top: var(--sp-2, 0.5rem);
  justify-content: flex-end;
}

#jc .jc-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4, 1rem);
  flex-wrap: wrap;
  min-width: 0;
}

#jc .jc-act {
  color: var(--jc-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--jc-rule);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

#jc .jc-act:hover,
#jc .jc-act:focus-visible {
  color: var(--c-link-hover, #C25400);
  border-bottom-color: currentColor;
}

#jc .jc-act-muted {
  color: var(--jc-muted);
  border-bottom-color: transparent;
}

/* Старая разметка из кеша: штатный .comments-buttons */
#jc .comments-buttons {
  float: none;
  margin: var(--sp-3, 0.75rem) 0 0 !important;
  font-size: var(--fs-sm, 0.9375rem);
  color: var(--jc-muted);
}

#jc .comments-buttons a {
  display: inline-block;
  padding: 0.25rem 0;
  margin-right: var(--sp-3, 0.75rem);
  color: var(--jc-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--jc-rule);
}

#jc .comments-buttons a:hover,
#jc .comments-buttons a:focus-visible {
  color: var(--c-link-hover, #C25400);
  border-bottom-color: currentColor;
}


/* ==========================================================================
   08a. СЕРДЕЧКО
   Разметку даёт layouts/comment-vote-value.php.

   Задание: «Голосование переносим вниз… оно будет в виде сердечка»,
   «При нажатии сделать анимацию», «на время активной сессии сердечко
   оставить красным», «нужно реализовать возможность отменить свой лайк».

   Почему контур, а не картинка. Задание, п. «Чёткость векторной графики»:
   вместо пиксельных спрайтов — SVG. Один контур служит и пустым сердцем,
   и залитым: fill и stroke переключаются классом, вторая иконка не нужна
   и подгружаться нечему.

   Цвет. --jc-like берётся не из акцента рубрики: акцент у статей бывает
   салатовым и жёлтым, а сердце такого цвета читается как что угодно,
   только не как отклик.
   ========================================================================== */

#jc .jc-score {
  flex: 0 0 auto;
  margin-left: auto;
}

#jc .jc-like {
  /* #CE3E3E, а не более яркий #D64545: рядом с сердцем стоит счётчик,
     а это мелкий полужирный текст, ему нужен контраст 4.5:1 на белом.
     У D64545 было 4.38:1, у CE3E3E — 4.79:1. На глаз оттенок тот же. */
  --jc-like: #CE3E3E;

  display: inline-flex;
  align-items: center;
  gap: 0.4rem;

  /* Тап-таргет: 2.75rem по высоте набирается за счёт полей */
  min-height: 2.25rem;
  padding: 0.25rem 0.6rem;
  margin: 0;

  border: 1px solid transparent;
  border-radius: 999px;
  background: none;

  font: inherit;
  font-size: var(--fs-sm, 0.9375rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--jc-muted);

  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

#jc .jc-like.is-locked {
  cursor: default;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

#jc .jc-like-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

#jc .jc-like-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  overflow: visible;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;

  transition: fill 0.18s ease, stroke 0.18s ease, transform 0.18s ease;
}

#jc .jc-like-count { color: inherit; }

/* --- Наведение ------------------------------------------------------------
   Задание, п. «Интерактивность»: кнопки плавно меняют цвет, подсказывая,
   что на них можно нажать. Только для кликабельных — на заблокированной
   кнопке подсказка была бы враньём. */
#jc .jc-like:not(.is-locked):hover,
#jc .jc-like:not(.is-locked):focus-visible {
  color: var(--jc-like);
  background-color: color-mix(in srgb, var(--jc-like) 8%, transparent);
}

#jc .jc-like:not(.is-locked):hover .jc-like-icon svg {
  transform: scale(1.12);
}

/* --- Поставленный лайк ----------------------------------------------------
   Сердце залито и остаётся таким: сервер помнит голос по IP, вкладка —
   в sessionStorage (js/jclike.js). Это и есть «на время активной сессии
   сердечко оставить красным» из задания. */
#jc .jc-like.is-liked {
  color: var(--jc-like);
}

#jc .jc-like.is-liked .jc-like-icon svg {
  fill: var(--jc-like);
  stroke: var(--jc-like);
}

/* Снять лайк можно — покажем это: при наведении сердце светлеет,
   как будто уже наполовину снято. */
#jc .jc-like.is-liked:not(.is-locked):hover .jc-like-icon svg,
#jc .jc-like.is-liked:not(.is-locked):focus-visible .jc-like-icon svg {
  fill: color-mix(in srgb, var(--jc-like) 35%, transparent);
}

/* --- Анимация нажатия -----------------------------------------------------
   Сердце коротко подпрыгивает, из-под него расходится кольцо. Полсекунды,
   без отскока в конце: отклик, а не фейерверк. */
#jc .jc-like.is-popping .jc-like-icon svg {
  animation: jc-like-pop 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) 1;
}

@keyframes jc-like-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.82); }
  70%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

#jc .jc-like-burst {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--jc-like);
  opacity: 0;
  pointer-events: none;
}

#jc .jc-like.is-popping .jc-like-burst {
  animation: jc-like-burst 0.55s ease-out 1;
}

@keyframes jc-like-burst {
  0%   { transform: scale(0.4); opacity: 0.75; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Нажали на залитое сердце, а снять лайк нечем: плагин plg_system_jclike
   не установлен. Короткое покачивание — «слышу, но не могу». */
#jc .jc-like.is-nudging {
  animation: jc-like-nudge 0.32s ease-in-out 1;
}

@keyframes jc-like-nudge {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}


/* ==========================================================================
   09. ПАГИНАЦИЯ
   Разметка совпадает с Joomla 5, значит раздел 16 user.css уже её оформил:
   плашка цветом рубрики, тап-таргет 2.75rem. Здесь только поля и то,
   что пагинация комментариев не должна выглядеть как пагинация сайта —
   она внутри статьи, а не под ней.
   ========================================================================== */

#jc .pagination {
  margin: var(--sp-5, 1.5rem) 0 0;
  padding: var(--sp-1, 0.25rem);
  border-radius: var(--radius-sm, 0.375rem);
  background-color: color-mix(in srgb, var(--jc-accent) 45%, transparent);
}

#jc .pagination .page-link {
  min-width: 2.5rem;
  min-height: 2.5rem;
  font-weight: 600;
}

#jc #nav-top { display: none; }   /* сортировка прямая: сверху навигация не нужна */

#jc .comments-list-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4, 1rem);
  margin: var(--sp-4, 1rem) 0 0;
  font-size: var(--fs-sm, 0.9375rem);
}

#jc .comments-list-footer a {
  color: var(--jc-muted);
  text-decoration: none;
}

#jc .comments-list-footer a:hover { color: var(--c-link-hover, #C25400); }


/* ==========================================================================
   09a. НАВИГАЦИЯ ПО СОСЕДНИМ СТАТЬЯМ
   Разметку даёт layouts/post-nav.php. Блок стоит между концом обсуждения
   и формой ответа — обоснование места в шапке того файла.
   ========================================================================== */

/* Линеек нет. Первая версия обводила блок сверху и снизу — на странице,
   где уже есть рамка у каждой из двадцати четырёх карточек и черта под
   заголовком, это ещё две горизонтали подряд. Разделяет здесь пустое
   место, а сами ссылки видно по подложке.

   Отступ сверху больше, чем снизу: блок принадлежит скорее тому, что
   после него, — это выход со страницы, а не хвост обсуждения. */
#jc .jc-postnav {
  display: grid;
  gap: var(--sp-3, 0.75rem);
  margin: var(--sp-7, 3rem) 0 var(--sp-6, 2rem);
}

/* Каждая ссылка — карточка целиком, а не строчка текста.

   Подложка решает сразу две задачи: показывает границы того, во что можно
   ткнуть (раньше об этом говорило только подчёркивание), и заменяет собой
   разделительные линии. Цвет — акцент рубрики, разведённый до 12%:
   на кремовой бумаге это едва заметный оттенок, но край читается.

   Подчёркивание снимается тремя способами разом: text-decoration,
   border-bottom и background-image. У сайта ссылки в тексте статьи
   подчёркнуты пунктиром, и делается это в разных местах по-разному —
   гасим все варианты, не прибегая к !important (селектор с #jc
   специфичнее любого правила user.css на классах). */
#jc .jc-postnav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3, 0.75rem);
  min-height: 2.75rem;
  padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem);
  border: 0;
  border-radius: var(--radius, 0.625rem);
  background-color: color-mix(in srgb, var(--jc-accent) 12%, transparent);
  background-image: none;
  color: var(--jc-ink);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

#jc .jc-postnav-item:hover,
#jc .jc-postnav-item:focus-visible {
  background-color: color-mix(in srgb, var(--jc-accent) 34%, transparent);
  background-image: none;
  color: var(--jc-ink);
  text-decoration: none;
}

/* Ход вперёд — основной, и подложка у него плотнее. Не другого цвета
   и не с рамкой: разница в одну ступень насыщенности подсказывает
   направление, но не превращает вторую ссылку в отключённую. */
#jc .jc-postnav-next {
  background-color: color-mix(in srgb, var(--jc-accent) 26%, transparent);
}

#jc .jc-postnav-next:hover,
#jc .jc-postnav-next:focus-visible {
  background-color: color-mix(in srgb, var(--jc-accent) 45%, transparent);
}

/* «Следующая» прижата к правому краю и выровнена по нему же: направление
   движения читается раскладкой раньше, чем стрелкой. */
#jc .jc-postnav-next {
  justify-content: flex-end;
  text-align: right;
}

#jc .jc-postnav-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

/* Подпись направления. Мелкая: она служебная, работает заголовок
   соседней статьи.

   Цвет --jc-ink-soft, а не --jc-muted. Проверено расчётом: серый #6E6E6E
   на подложке «следующей» (акцент 26% поверх бумаги) даёт 4,31:1 при норме
   4,5:1 для мелкого текста — то есть подложка съедает ровно тот запас,
   на который серый и был рассчитан. Тёплый --jc-ink-soft держит 6:1
   и остаётся заметно легче заголовка: он мельче и без веса. */
#jc .jc-postnav-dir {
  font-size: var(--fs-xs, 0.8125rem);
  color: var(--jc-ink-soft);
}

/* Заголовок соседней статьи — то, ради чего блок и переписан: раньше
   здесь стояли «Назад» и «Вперёд», две внутренние ссылки с пустым
   анкорным текстом.

   Две строки максимум. Заголовки на этом сайте бывают в шестьдесят
   знаков, и без ограничения одна ссылка вырастает вчетверо выше другой,
   а полоса перестаёт быть полосой. Где -webkit-line-clamp не поддержан,
   текст просто покажется целиком — это не поломка. */
#jc .jc-postnav-title {
  font-weight: 600;
  line-height: var(--lh-tight, 1.25);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#jc .jc-postnav-item:hover .jc-postnav-title { color: var(--c-link-hover, #C25400); }

#jc .jc-postnav-icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--jc-muted);
}

#jc .jc-postnav-item:hover .jc-postnav-icon { color: var(--c-link-hover, #C25400); }

/* Стрелка «вперёд» в полный цвет текста: вместе с плотной подложкой
   это и есть весь акцент на движении дальше. */
#jc .jc-postnav-next .jc-postnav-icon { color: var(--jc-ink); }


/* ==========================================================================
   10. ФОРМА
   Размечена на Bootstrap 5, ломать её не нужно — нужно вписать.
   ========================================================================== */

/* Якорь формы. Компонент ставит пустой <a id="addcomments"> перед формой
   сам — на него ведёт ссылка «Написать комментарий» из шапки блока
   (layouts/comments-header.php).

   scroll-margin-top тот же, что у карточек: без него браузер поставит
   якорь под липкую шапку сайта, и первое, что увидит перешедший, — это
   середина формы. Значение --jc-scroll-offset считает js/jclike.js
   по настоящей высоте шапки, 6rem — запасное на случай без JS. */
#jc #addcomments {
  display: block;
  scroll-margin-top: var(--jc-scroll-offset, 6rem);
}

/* Подпись поля текста. В штатном layout она есть, но спрятана классом
   visually-hidden; tpl_form.php класс снимает и ставит свой. Плейсхолдер
   подписью не работает: он исчезает при первом нажатии клавиши. */
#jc #comments-form .jc-form-label {
  display: block;
  margin: 0 0 var(--sp-1, 0.25rem);
}

#jc .h6 {
  margin: var(--sp-6, 2rem) 0 var(--sp-3, 0.75rem);
  font-family: var(--font-head, inherit);
  font-size: var(--fs-h4, 1.125rem);
  font-weight: 700;
  color: var(--jc-ink);
}

#jc #comments-form {
  max-width: 40rem;
  gap: var(--sp-3, 0.75rem);
}

/* Метка справа от поля — наследие старой вёрстки. Ставим метку над полем:
   так форма переживает узкий экран и читается скринридером в нужном порядке */
#jc #comments-form .row {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: var(--sp-1, 0.25rem);
  margin: 0;
}

#jc #comments-form .row > [class^="col"] {
  flex: 1 1 auto;
  max-width: none;
  width: 100%;
  padding: 0;
}

#jc #comments-form .form-label {
  margin: 0;
  font-size: var(--fs-sm, 0.9375rem);
  color: var(--jc-ink-soft);
}

#jc #comments-form .form-control {
  border: 1px solid var(--jc-rule);
  border-radius: var(--radius-sm, 0.375rem);
  background-color: var(--c-white, #fff);
  color: var(--jc-ink);
  font-family: inherit;
  font-size: var(--fs-base, 1rem);
  min-height: 2.75rem;
}

#jc #comments-form .form-control:focus {
  border-color: var(--jc-quote-rule);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jc-accent) 45%, transparent);
  outline: 0;
}

#jc #comments-form textarea {
  min-width: 0 !important;
  min-height: 10rem;
  resize: vertical;
  line-height: var(--lh-body, 1.65);
}

#jc #comments-form input.captcha { width: 8rem; }

#jc .captcha-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3, 0.75rem);
}

#jc .captcha-container br { display: none; }

#jc #comments-form img.captcha {
  border: 1px solid var(--jc-rule);
  border-radius: var(--radius-sm, 0.375rem);
  margin: 0;
}

#jc .captcha-reload a {
  font-size: var(--fs-sm, 0.9375rem);
  color: var(--jc-ink-soft);
  text-decoration: none;
  cursor: pointer;
}

/* Счётчик символов. Раньше это была полоска с jc_resize.gif */
#jc #comments-form .grippie,
#jc #comments-form .counterpanel {
  height: auto;
  width: auto;
  max-width: none !important;
  min-width: 0 !important;
  margin: calc(var(--sp-2, 0.5rem) * -1) 0 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: auto;
  text-align: right;
  overflow: visible;
}

#jc #comments-form .counter {
  display: block;
  font-size: var(--fs-xs, 0.8125rem);
  color: var(--jc-muted);
  text-align: right;   /* глобальный .counter в user.css центрует — отменяем */
}

#jc #comments-form .grippie span { display: inline; float: none; }

#jc #comments-form-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2, 0.5rem);
  margin-top: var(--sp-2, 0.5rem);
}

#jc #comments-form-buttons > div[style] { display: none !important; }

#jc #comments-form-buttons .btn {
  min-height: 2.75rem;
  padding-inline: var(--sp-4, 1rem);
  border-radius: var(--radius-sm, 0.375rem);
  font-size: var(--fs-base, 1rem);
  font-weight: 600;
}

#jc #comments-form-send.btn {
  border: 0;
  background-color: var(--jc-quote-rule);
  color: var(--c-paper, #FCF8E7);
}

#jc #comments-form-reset.btn,
#jc #comments-form-cancel.btn {
  border: 1px solid var(--jc-rule);
  background: none;
  color: var(--jc-ink-soft);
}

#jc .comments-policy {
  padding: var(--sp-3, 0.75rem);
  margin: 0 0 var(--sp-3, 0.75rem);
  border: 0 !important;
  border-left: 3px solid var(--jc-quote-rule) !important;
  border-radius: 0;
  background-color: var(--jc-quote-bg);
  font-size: var(--fs-sm, 0.9375rem);
  color: var(--jc-ink-soft);
}

#jc p.message,
#jc #comments-form-message {
  margin: 0;
  padding: var(--sp-3, 0.75rem) 0;
  border: 0;
  border-top: 1px solid var(--jc-rule);
  background: none;
  text-align: left;
  font-size: var(--fs-sm, 0.9375rem);
  color: var(--jc-ink-soft);
}

#jc #comments-form-link .showform {
  margin: 0;
  font-weight: 600;
}

/* --- Панель выбора смайлов ------------------------------------------------

   ВНИМАНИЕ: селекторы здесь БЕЗ #jc, и это не оплошность.

   Панель создаёт скрипт, и когда рядом есть панель BBCode, он вешает её
   на <body>, а не внутрь формы (jcomments-v4.0.js:374):

       document.body.appendChild(this.smilesPanel);
       this.smilesPanel.id = 'comments-form-smilespanel';

   То есть панель физически лежит ВНЕ контейнера #jc, и ни одно правило,
   заскоупленное в #jc, до неё не достаёт. Именно поэтому смайлы вылезали
   поверх поля ввода в натуральные 72 пикселя: до них не доходил ни один
   стиль шаблона. Идентификатор уникальный, компонентный — глобальный
   селектор здесь безопасен.

   display: block, а НЕ flex. Скрипт при открытии панели ставит инлайновый
   style="display:block" (jcomments-v4.0.js:384), а инлайн сильнее файла.
   Flex-раскладка просто не дожила бы до первого открытия. Картинки —
   inline-block, переносятся сами. */
#comments-form-smilespanel,
#jc .smiles {
  box-sizing: border-box;
  max-width: 17rem;
  padding: 0.35rem;
  border: 1px solid var(--jc-rule, #C4C6B3);
  border-radius: var(--radius-sm, 0.375rem);
  background-color: var(--c-white, #fff);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  line-height: 0;   /* убирает щели между строками картинок */
  z-index: 100;
}

/* Вариант без панели BBCode: скрипт вставляет блок перед полем ввода
   и даёт ему класс smiles. Он внутри #jc, всплывать ему некуда —
   значит ни рамки, ни тени. */
#jc .smiles {
  max-width: none;
  padding: var(--sp-2, 0.5rem) 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* В панели смайл крупнее, чем в тексте: это кнопка, по ней надо попасть
   пальцем. 1.5rem + padding 0.3rem даёт тап-таргет ~35px. */
#comments-form-smilespanel img.smile,
#jc .smiles img.smile,
#jc #comments-form img.smile {
  display: inline-block;
  float: none;
  box-sizing: content-box;
  width: 1.5rem;
  height: 1.5rem;
  max-width: 1.5rem;
  max-height: 1.5rem;
  margin: 0;
  padding: 0.3rem;
  border: 0;
  border-radius: var(--radius-sm, 0.375rem);
  vertical-align: middle;
  opacity: 0.82;
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

#comments-form-smilespanel img.smile:hover,
#comments-form-smilespanel img.smile:focus-visible,
#jc .smiles img.smile:hover,
#jc #comments-form img.smile:hover,
#jc #comments-form img.smile:focus-visible { opacity: 1; }

#comments-form-smilespanel img.smile:hover,
#jc .smiles img.smile:hover,
#jc #comments-form img.smile:hover {
  background-color: color-mix(in srgb, var(--accent, #CEC5F0) 22%, transparent);
}

/* --- Кнопки BBCode --------------------------------------------------------
   Спрайт jc_bbcodes.gif выброшен: кнопки скрипт строит пустыми
   (<a class="bbcode-b"> без текста), подпись даём через content.

   Две ловушки, из-за которых кнопки выводились криво.

   1. jcomments-v4.0.js:300 ставит каждой кнопке ИНЛАЙНОВЫЙ style="display:block",
      а инлайновый стиль сильнее любого правила из файла. Кнопки становились
      блоками во всю ширину формы и вставали столбиком. Лечится только
      !important — других рычагов у CSS против инлайна нет.

   2. Пустые кнопки без подписи — это НЕ b/i/u. Установщик заводит пять
      пользовательских BBCode с button_enabled = 1: YouTube, Facebook Video,
      Instagram, Vimeo и Wikipedia (install/sql/mysql/default.custom_bbcodes.sql).
      Их классы — bbcode-youtube, bbcode-facebook и так далее, и рисовались
      они тем же покойным спрайтом. Подписи для них ниже, но правильнее
      выключить их совсем: см. README, раздел «Редактор». */
#jc .bbcode {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: var(--sp-2, 0.5rem);
}

#jc .bbcode a {
  display: inline-flex !important;   /* бьём style="display:block" из скрипта */
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 2.25rem;
  min-height: 2.25rem;
  float: none;
  margin: 0;
  padding-inline: 0.5rem;
  border: 1px solid var(--jc-rule) !important;
  border-radius: var(--radius-sm, 0.375rem);
  background: none !important;
  font-size: var(--fs-sm, 0.9375rem);
  line-height: 1;
  color: var(--jc-ink-soft);
  text-decoration: none;
}

#jc .bbcode a:hover { background-color: var(--jc-quote-bg) !important; }

#jc a.bbcode-b::after      { content: "Ж"; font-weight: 700; }
#jc a.bbcode-i::after      { content: "К"; font-style: italic; }
#jc a.bbcode-u::after      { content: "Ч"; text-decoration: underline; }
#jc a.bbcode-s::after      { content: "З"; text-decoration: line-through; }
#jc a.bbcode-url::after    { content: "ссылка"; }
#jc a.bbcode-img::after    { content: "рисунок"; }
#jc a.bbcode-list::after   { content: "список"; }
#jc a.bbcode-quote::after  { content: "цитата"; }
#jc a.bbcode-hide::after   { content: "скрыть"; }
#jc a.bbcode-smile::after  { content: "смайл"; }

/* Пользовательские BBCode из поставки. Если оставляете их включёнными —
   пусть у кнопок будет хотя бы подпись. */
#jc a.bbcode-youtube::after   { content: "видео"; }
#jc a.bbcode-vimeo::after     { content: "Vimeo"; }
#jc a.bbcode-facebook::after  { content: "Facebook"; }
#jc a.bbcode-instagram::after { content: "Instagram"; }
#jc a.bbcode-wiki::after      { content: "Википедия"; }
#jc a.bbcode-google::after    { content: "Google"; }
#jc a.bbcode-flickr::after    { content: "Flickr"; }

/* Кнопка без подписи означает пользовательский BBCode, о котором этот файл
   не знает. Дописать строку выше проще, чем городить универсальную заглушку:
   селектор :empty оказался бы специфичнее именных правил и погасил бы их все. */


/* ==========================================================================
   11. СЛУЖЕБНОЕ: ПРАВКА, ЖАЛОБА, АДМИН-ПАНЕЛЬ
   Видно только модератору, поэтому — минимум усилий, максимум читаемости.
   ========================================================================== */

#jc .comments-inline-edit,
#jc #comments-inline-edit,
#jc .comments-inline-report {
  margin-top: var(--sp-3, 0.75rem);
  padding: var(--sp-3, 0.75rem);
  border: 1px dashed var(--jc-rule);
  border-radius: var(--radius-sm, 0.375rem);
}

#jc .toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3, 0.75rem);
  clear: both;
  margin: var(--sp-3, 0.75rem) 0 0;
  padding: var(--sp-2, 0.5rem) 0 0;
  border-top: 1px dashed var(--jc-rule);
  font-size: var(--fs-sm, 0.9375rem);
}

#jc .toolbar .main-actions,
#jc .toolbar .user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3, 0.75rem);
  float: none;
}

#jc .toolbar .user-actions { margin-left: auto; }
#jc .toolbar a { padding: 0; color: var(--jc-ink-soft); }

/* Подпись «JComments» в подвале блока */
#jc #comments-footer {
  display: block;
  height: auto;
  margin-top: var(--sp-4, 1rem);
  padding-top: var(--sp-1, 0.25rem);
  border-top: 1px solid var(--jc-rule);
  text-align: right;
}

#jc #comments-footer,
#jc #comments-footer a {
  font: inherit !important;
  font-size: var(--fs-xs, 0.8125rem) !important;
  color: var(--jc-muted) !important;
}


/* ==========================================================================
   12. ДОСТУПНОСТЬ, MOTION, ПЕЧАТЬ
   ========================================================================== */

/* Штатный style.css гасил обводку фокуса. Возвращаем: без неё нельзя
   пройти блок с клавиатуры. */
#jc a:focus-visible,
#jc button:focus-visible,
#jc [tabindex]:focus-visible {
  outline: 2px solid var(--c-link-hover, #C25400);
  outline-offset: 2px;
  border-radius: 2px;
}

#jc a:link,
#jc a:visited,
#jc a:hover { outline: revert; }

@media (prefers-reduced-motion: reduce) {
  #jc .busy { animation: none; }

  /* Анимации сердечка и подсветки выключаются целиком, а не замедляются:
     смысл они несут декоративный, состояние читается по цвету и заливке.
     JS проверяет тот же запрос и не вешает классы (js/jclike.js). */
  #jc .jc-like.is-popping .jc-like-icon svg,
  #jc .jc-like.is-popping .jc-like-burst,
  #jc .jc-like.is-nudging,
  #jc .jc-comment.jc-flash {
    animation: none;
  }

  #jc .jc-like:not(.is-locked):hover .jc-like-icon svg {
    transform: none;
  }

  #jc .jc-like,
  #jc .jc-like-icon svg,
  #jc .jc-act,
  #jc .jc-num,
  #jc .jc-sort-btn,
  #jc .jc-quote-more,
  #jc .jc-cta,
  #jc .jc-postnav-item,
  #comments-form-smilespanel img.smile {
    transition: none;
  }

  #jc .jc-num.is-copied::after { animation: none; }

  /* Иконка постоянной ссылки без плавного проявления показывается всегда:
     мигание «то есть, то нет» при отключённой анимации раздражает сильнее,
     чем постоянно видимая бледная иконка. */
  #jc .jc-num { opacity: 0.7; }

  /* Плавную прокрутку scrollIntoView тоже гасим — js/jclike.js передаёт
     behavior: 'auto', но правило страхует нативные переходы по #hash. */
  html:focus-within { scroll-behavior: auto; }
}

@media print {
  #jc #comments-form,
  #jc #comments-form-link,
  #jc .pagination__wrapper,
  #jc .comments-list-footer,
  #jc .comments-buttons,
  #jc .jc-foot,
  #jc .jc-sort,
  #jc .jc-cta,
  #jc .jc-num,
  #jc .jc-quote-more,
  #jc .jc-postnav,
  #jc .toolbar,
  #jc #comments-footer { display: none !important; }

  #jc .jc-comment { break-inside: avoid; }

  /* На бумаге свёрнутая цитата должна печататься целиком: кнопки
     «показать» там нет, а обрезанный текст выглядит как брак печати. */
  #jc .comment-body blockquote.is-clipped {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }

  #jc .comment-body blockquote {
    background: none;
    border-left: 2px solid #999;
  }
}


/* ==========================================================================
   13. АДАПТИВ
   База выше написана под узкий экран. Здесь только расширения.
   Нижняя панель мобильного меню (--mmx-bar-h) уже учтена padding-bottom
   у body в mobile-menu.css — дополнительных отступов не нужно.
   ========================================================================== */

/* --- До 576px: телефон ---
   Карточка остаётся, но поля ужимаются: на экране 360px рамка с отступом
   в 1.5rem с каждой стороны съедает шестую часть ширины строки. */
@media (max-width: 35.999rem) {
  #jc {
    --jc-gap: var(--sp-3, 0.75rem);
  }

  #jc .jc-comment {
    padding: var(--sp-3, 0.75rem);
    border-radius: var(--radius-sm, 0.375rem);
  }

  /* Монограмма мельче: она подсказка, а не главный элемент строки */
  #jc .jc-avatar {
    width: 2rem;
    height: 2rem;
    font-size: var(--fs-sm, 0.9375rem);
  }

  #jc .jc-head {
    gap: var(--sp-2, 0.5rem);
    margin-bottom: var(--sp-2, 0.5rem);
  }

  /* В шапке остался один номер — колонка больше не нужна */
  #jc .jc-marks {
    align-items: flex-start;
    gap: 0.15rem;
  }

  /* Сердечко на телефоне: тап-таргет не меньше 44px по обеим сторонам,
     иначе в него не попасть большим пальцем. */
  #jc .jc-like {
    min-height: 2.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  #jc .jc-foot {
    margin-top: var(--sp-3, 0.75rem);
    padding-top: var(--sp-2, 0.5rem);
  }

  #jc .comment-body blockquote {
    padding-inline: var(--sp-2, 0.5rem);
  }

  #jc .pagination .page-link { min-width: 2.75rem; min-height: 2.75rem; }

  /* Кнопка «Написать комментарий»: тап-таргет как у сердечка */
  #jc .jc-cta { min-height: 2.75rem; }

  /* Навигация по соседям на телефоне идёт в столбик — она так и задана
     в базе. Выравнивание «следующей» по правому краю здесь только мешает:
     в одну колонку обе ссылки должны начинаться от одного левого края,
     иначе строки скачут.

     row-reverse переставляет стрелку вперёд текста, чтобы обе ссылки
     начинались одинаково. Осторожно: при обратном направлении главной оси
     flex-end — это ЛЕВЫЙ край, а flex-start прижал бы содержимое вправо. */
  #jc .jc-postnav-next {
    flex-direction: row-reverse;
    justify-content: flex-end;
    text-align: left;
  }
}

/* --- От 768px: планшет и шире ---
   Соседние статьи встают в две колонки. Раньше этого места не хватает:
   два заголовка по 60 знаков рядом дают по четыре строки каждый. */
@media (min-width: 48rem) {
  #jc .jc-postnav {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4, 1rem);
  }

  /* Когда сосед один, он не должен растягиваться на всю полосу:
     «следующая» остаётся справа, «предыдущая» слева. */
  #jc .jc-postnav-next:first-child { grid-column: 2; }
}

/* --- От 992px: десктоп --- */
@media (min-width: 62rem) {
  #jc { --jc-gap: var(--sp-6, 2rem); }
}


/* ==========================================================================
   14. ТЁМНАЯ ТЕМА
   Оставлена выключенной намеренно. У сайта тёмной темы нет: статья
   останется на бумаге #FCF8E7, и тёмный блок комментариев под ней будет
   выглядеть поломкой, а не темой. Раскомментировать вместе с тёмной темой
   всего user.css — тогда --c-paper и --c-text уже придут перекрашенными
   и правил ниже почти не понадобится.
   ========================================================================== */

/*
@media (prefers-color-scheme: dark) {
  #jc {
    --jc-ink:       #E9E2D5;
    --jc-ink-soft:  #C3B8A6;
    --jc-muted:     #948A7C;
    --jc-paper:     #221B14;
    --jc-rule:      color-mix(in srgb, var(--jc-accent) 35%, #4A4038);
    --jc-quote-bg:  color-mix(in srgb, var(--jc-accent) 10%, transparent);
    --jc-quote-ink: #CFC5B6;
    --jc-pos:       #7FBF6E;
    --jc-neg:       #E08375;
  }

  #jc #comments-form .form-control {
    background-color: #2B231B;
    color: var(--jc-ink);
  }
}
*/