/* Отзывы объекта: страница /{сегмент}/{категория}/{объект}/comments/
   и блок отзывов внутри карточки. Источник — design2/parts.html,
   образцы school-reviews и review-item. Поток C.

   ------------------------------------------------------------------
   Что здесь стилизуется и откуда берётся разметка

   Обе страницы — один и тот же single-messia_object и один и тот же
   скин объекта. Список отзывов на обеих печатает виджет tabs_pannel-7
   через templates/wp/comments.php родительской темы, а разметку
   каждого отзыва — плагин messia_redesign. Разметка на обеих страницах
   побайтово одинаковая, поэтому и правил здесь один комплект:

     .rev_items.append_respond          весь блок отзывов
       .all_comment_stat                сводка (её отдаёт наш фильтр
                                        из includes/pdd-reviews.php)
         .pdd-rev-summary               наше: кольцо, лента, полосы
         a.btn_red.submit               чужое: «Оставить отзыв»
         .buttons_rev                   чужое: ряд сортировок
         #respond                       чужое: форма отзыва — object.js
                                        переносит её сюда со стр. 25
       .items_comments
         .item.comment.rev_items        чужое: один отзыв
           .ava                         аватар
           .desk.comment > .name        автор, дата, звёзды, источник
           .text                        подпись и текст
           .likes_and_otvet             лайки и ссылка ответа
       .page_comment_bottom             «Показать ещё» / «Все отзывы»

   Ничего из чужого не переписывается PHP-ом: карточку отзыва плагин
   ПЕЧАТАЕТ, а не возвращает, и фильтром с приоритетом 20 её уже не
   поймать (разбор — в includes/pdd-reviews.php). Раскладка прототипа
   собирается из готовых узлов гридом.

   ------------------------------------------------------------------
   Токены

   Комплект --school-reviews-*, --school-score-*, --school-bar-*,
   --school-avatar-*, --school-review-* уже лежит в tokens.css —
   он писался ровно под этот блок (принятый вариант v6 от 06.08.2026).
   Здесь он только применяется. Свои токены заведены лишь на то,
   чего в нём нет, и все с приставкой --pdd-review-.

   ------------------------------------------------------------------
   Чего в базе нет и что поэтому спрятано

   Проверено запросами по всей базе (322 554 отзыва):

     messia_adv / messia_disadv   0 непустых → «Достоинства»,
                                  «Недостатки» скрыты и в карточке,
                                  и в форме
     comment_parent > 0           0 строк → ответов не существует,
                                  ссылка «Ответить» скрыта
     messia_karma                 4 строки на всю базу, три битые →
                                  счётчики нулевые, но сами кнопки
                                  живые и обработчик у них есть,
                                  поэтому оставлены
     messia_source                292 991 непустых → источник есть
                                  и выводится
     messia_attached_avatar       322 544 непустых, но всего 13
                                  разных картинок-заглушек по кругу →
                                  показываем букву, как в макете
   ------------------------------------------------------------------ */

body.pdd {
	/* Ссылка «Ответить» / «Войдите, чтобы ответить» под отзывом.
	   Ответов в базе нет ни одного, в макете их тоже нет. Вернуть —
	   поменять на inline здесь, разметку это не трогает. */
	--pdd-review-reply-display: none;

	/* Поля «Достоинства» и «Недостатки»: ни одного заполненного
	   на всю базу, в макете их нет. Скрываются и в отзыве, и в форме. */
	--pdd-review-advantages-display: none;

	--pdd-review-gap: var(--space-7);
	--pdd-review-pad: var(--space-7);
	--pdd-review-radius: var(--radius-xl);

	/* Боковое поле чужой обёртки .tab-content, которое приходится
	   компенсировать. Держится в одном месте — см. раздел 1. */
	--pdd-review-tab-pad-x: 35px;
}

/* ------------------------------------------------------------------
   1. Оболочка блока

   .rev_items.append_respond — общий контейнер и на странице отзывов,
   и во вкладке карточки. Делаем его белой панелью, как .section
   в макете. Заодно снимаем чужой order: frontend.css раздаёт его
   внутри .page-template-newlisting, и любой наш flex/grid обязан
   выставлять порядок сам.
   ------------------------------------------------------------------ */

body.pdd .rev_items.append_respond {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--pdd-review-gap);
	background: var(--color-surface);
	border-radius: var(--pdd-review-radius);
	padding: var(--pdd-review-pad);
	box-shadow: var(--shadow-card);
}

/* Страница отзывов целиком лежит во вкладке виджета tabs_pannel-7,
   а skin.css держит её обёртку на
   `.widgets-content .tab-content { padding: 27px 35px !important }`
   (messia_redesign/assets/skin.css, стр. 1164 и 5363). На 390px эти
   70px забирают пятую часть экрана: блоку остаётся 281.

   Перебить чужое правило нельзя — !important специфичностью не берётся,
   а своего !important в теме быть не должно. Поэтому не спорим с
   обёрткой, а компенсируем её отрицательным полем на своём блоке.
   Число названо токеном один раз, чтобы не разъезжалось с чужим.

   Только на самой странице отзывов (body.page_comment): там во вкладке
   ничего, кроме отзывов, нет. На карточке школы та же вкладка
   соседствует с ценами и принадлежит потоку B — там не трогаем.
   На широком экране компенсация снимается, см. раздел 8. */
body.pdd.page_comment .rev_items.append_respond {
	margin-left: calc(var(--pdd-review-tab-pad-x) * -1);
	margin-right: calc(var(--pdd-review-tab-pad-x) * -1);
}

body.pdd .rev_items.append_respond > * {
	order: 0;
	margin: 0;
}

/* ------------------------------------------------------------------
   2. Сводка рейтинга

   Разметку отдаёт наш фильтр: .pdd-rev-summary > .pdd-rev-summary__score
   (кольцо + лента звёзд) и .pdd-bars (пять полос). Дальше в том же
   .all_comment_stat лежат чужие кнопка и ряд сортировок.
   ------------------------------------------------------------------ */

/* skin.css держит .all_comment_stat на align-items: center, а
   .append_respond — на align-items: flex-start. В колоночном флексе
   это запрещает детям растянуться: сводка на 1280 выходила 264px
   вместо 634, и полосы схлопывались в чёрточку. Перенимая чужой
   контейнер, направление и выравнивание задаём явно. */
body.pdd .all_comment_stat {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--school-summary-gap);
}

body.pdd .all_comment_stat > * {
	order: 0;
}

body.pdd .pdd-rev-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--school-summary-gap);
}

/* Черта в эталоне идёт ПОД кнопкой (.rating-summary держит её у себя
   вместе с кнопкой внутри), у нас кнопка — соседний узел движка,
   поэтому черта переехала на ряд сортировки: кнопка, 16, черта, 16,
   список. У нас она стояла между полосами и кнопкой и резала сводку
   пополам. */
body.pdd .all_comment_stat .pdd-rev-tools {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	width: 100%;
	padding-top: var(--space-7);
	border-top: var(--border-width) solid var(--color-border);
}

/* Ширина столбца — по кольцу. Без неё столбец растягивала лента:
   её содержимое (96) плюс поля 20+20 дают 136 против 128 у кольца,
   и полосы начинались на 8px правее эталонных. */
body.pdd .pdd-rev-summary__score {
	flex: 0 0 auto;
	width: var(--school-score-ring-size);
	text-align: center;
}

/* 2.1 Кольцо со средним баллом.

   --score-arc фильтр проставляет инлайном на самом элементе —
   это единственное, что в блоке зависит от данных и не выражается
   классом. Сам фон кольца — токен из tokens.css. */
body.pdd .pdd-score-ring {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: var(--school-score-ring-size);
	height: var(--school-score-ring-size);
	border-radius: var(--radius-pill);
	background: var(--school-score-ring-bg);
	text-align: center;
}

body.pdd .pdd-score {
	margin: 0;
	font-size: var(--school-score-size);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-title);
	color: var(--color-text);
}

body.pdd .pdd-score__count {
	margin: 0;
	font-size: var(--font-size-micro);
	color: var(--color-text-muted);
}

/* 2.2 Лента звёзд под кольцом.

   Внутри — сниппет движка .rating > .stars > .mark(.nomark).
   Форму ленты задаёт clip-path из токена. */
body.pdd .pdd-score__ribbon {
	display: flex;
	align-self: stretch;
	justify-content: center;
	margin: var(--school-ribbon-margin);
	padding: var(--school-ribbon-pad);
	background: var(--school-ribbon-bg);
	clip-path: var(--school-ribbon-clip);
}

body.pdd .pdd-score__ribbon .rating,
body.pdd .pdd-score__ribbon .stars {
	display: flex;
	flex-direction: row;
	flex: 0 0 auto;
	width: auto;
	align-items: center;
	justify-content: center;
	/* 79px на пять звёзд, как .score-ribbon .stars эталона:
	   5 x 15 + 4 x 1. При зазоре 4 лента шла 96. */
	gap: 1px;
	margin: 0;
	padding: 0;
	min-height: 0;
}

/* Цвет звезды не трогаем: .mark — это фоновая картинка движка
   (frontend.css, стр. 12361: icon.svg, у .nomark — nopoint.svg),
   background-color под ней не виден. Общий вид рейтинга живёт
   в main.css, он один на все четыре типа страниц. */

/* 2.3 Полосы распределения 5…1 */
body.pdd .pdd-bars {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Кегль и цвета — как у .bar эталона (main.css, стр. 2005):
   micro и приглушённый, а не caption и вторичный. Разница
   в один шаг шкалы делала строку распределения тяжелее
   заголовков соседних блоков. */
body.pdd .pdd-bar {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--font-size-micro);
	color: var(--color-text-muted);
}

body.pdd .pdd-bar::before,
body.pdd .pdd-bar::marker {
	content: none;
}

body.pdd .pdd-bar__label {
	flex: 0 0 auto;
	width: 8px;
	text-align: right;
	font-weight: var(--font-weight-regular);
	color: var(--color-text-secondary);
}

body.pdd .pdd-bar__star {
	display: var(--school-bar-star-display);
	flex: 0 0 auto;
	line-height: 0;
	color: var(--school-reviews-accent);
}

body.pdd .pdd-bar__track {
	flex: 1 1 auto;
	height: var(--school-bar-height);
	border-radius: var(--radius-pill);
	background: var(--color-track);
	overflow: hidden;
}

body.pdd .pdd-bar__fill {
	display: block;
	height: 100%;
	border-radius: var(--radius-pill);
	background: var(--school-bar-fill);
}

body.pdd .pdd-bar__count {
	display: var(--school-bar-count-display);
	min-width: 3ch;
	text-align: right;
}

body.pdd .pdd-bar__percent {
	display: var(--school-bar-percent-display);
	min-width: 4ch;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
   3. Кнопка «Оставить отзыв»

   Приезжает из чужого вывода как a.btn_red.submit(.submitform).
   Заливку и наведение .btn_red задаёт main.css один раз на всю тему —
   здесь только размеры и раскладка. Соседний span.line_review —
   декоративная полоска движка, в макете её нет.
   ------------------------------------------------------------------ */

body.pdd .all_comment_stat > .btn_red.submit {
	display: var(--school-reviews-add-display);
	flex-direction: row;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	min-height: var(--control-height-button);
	padding: 0 var(--space-8);
	/* Рамки в эталоне нет вовсе (.reviews-add, main.css 2059) —
	   у кнопки движка она своя, 1px. Наведение поэтому рисуется
	   внутренней тенью, а не рамкой: иначе на hover уезжала
	   бы вся коробка. */
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--school-reviews-add-bg);
	color: var(--color-text-inverse);
	font-size: var(--font-size-button);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
}

body.pdd .all_comment_stat > .btn_red.submit:hover {
	background: var(--color-surface);
	box-shadow: inset 0 0 0 var(--border-width) var(--school-reviews-add-bg);
	color: var(--school-reviews-add-bg);
}

body.pdd .all_comment_stat > .line_review {
	display: none;
}

/* ------------------------------------------------------------------
   4. Ряд сортировок

   Чужой .buttons_rev с четырьмя button, у каждой inline-onclick
   на messia_sort_reviews(). Разметку не трогаем — превращаем кнопки
   в чипы. Активную помечает сам движок классом .active (и inline-обработчик,
   и делегированный Messia.pozi_nega из object.js).

   Фильтра по источнику отзыва, который есть в макете, здесь нет
   и быть не может: обработчик messia_comments_pagination такого
   параметра не принимает — фильтровать нечем.

   На узком экране ряд не ломается в столбец, а прокручивается вбок:
   четыре подписи вида «Сначала положительные» в 390px не поместятся
   никак, а вертикальный столбец из четырёх кнопок съедает пол-экрана.
   ------------------------------------------------------------------ */

/* Исходный ряд кнопок прячется, когда над ним построен список:
   класс вешает pdd-reviews.js. Не удаляется — на кнопках висят
   обработчики движка, и список дёргает их click(). */
body.pdd .all_comment_stat .buttons_rev.pdd-rev-sort-source {
	display: none;
}

/* Ряд прячется сразу, а не после того, как скрипт построит список:
   иначе кнопки успевали отрисоваться и на глазах сменялись
   выпадающим списком. Класс pdd-js ставит встроенный скрипт
   в header.php раньше самой разметки; скрипты не доехали —
   класса нет, и ряд остаётся видимым и рабочим.

   Место ряд не занимает и до подмены: у списка своя коробка
   (.pdd-rev-tools__group), она встаёт перед рядом. */
html.pdd-js body.pdd .all_comment_stat .buttons_rev {
	display: none;
}

/* Скрипт решил список не строить — ряд возвращается на место
   (класс вешает pdd-reviews.js, buildSort). */
html.pdd-js body.pdd .all_comment_stat .buttons_rev.pdd-rev-sort-kept {
	display: flex;
}

/* Выпадающий список сортировки — .review-select эталона. */
/* Ряд инструментов эталона — две группы по половине ширины
   (.reviews-tools, 717 = 353 + 11 + 353). Группа источников
   у нас не собирается: фильтра по источнику в движке нет,
   поэтому половину занимает одна сортировка. */
body.pdd .all_comment_stat .pdd-rev-tools__group {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	width: calc(50% - var(--space-3) / 2);
	min-width: 0;
}

body.pdd .all_comment_stat .pdd-rev-tools__title {
	margin: 0;
	font-size: var(--font-size-control);
	/* 1.45, как у .reviews-tools__title эталона: движок держал 1.5,
	   и подпись «Источник отзывов:» шла 20px при эталонных 19. */
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

body.pdd .all_comment_stat .pdd-rev-select {
	display: var(--school-reviews-select-display);
	position: relative;
	width: 100%;
	min-width: 0;
}

/* Кнопка списка — .review-select__button эталона (main.css, 2111):
   во всю ширину группы, скругление 8, обычное начертание.
   Пилюля с полужирным на 140px читалась чипом, а не полем выбора. */
body.pdd .all_comment_stat .pdd-rev-select__button {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	width: 100%;
	height: var(--control-height-chip);
	padding: 0 var(--space-5);
	font-size: var(--font-size-control);
	font-weight: var(--font-weight-regular);
	color: var(--color-text);
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	cursor: pointer;
	white-space: nowrap;
}

body.pdd .all_comment_stat .pdd-rev-select__button:hover {
	border-color: var(--school-reviews-active-fg);
}

body.pdd .all_comment_stat .pdd-rev-select__value {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

body.pdd .all_comment_stat .pdd-rev-select__chevron {
	display: inline-flex;
	margin-left: auto;
	color: var(--color-icon);
}

body.pdd .all_comment_stat .pdd-rev-select__menu {
	position: absolute;
	z-index: 5;
	top: calc(100% + var(--space-2));
	left: 0;
	min-width: 100%;
	margin: 0;
	padding: var(--space-2);
	list-style: none;
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

body.pdd .all_comment_stat .pdd-rev-select__menu[hidden] {
	display: none;
}

body.pdd .all_comment_stat .pdd-rev-select__option {
	display: block;
	width: 100%;
	padding: var(--space-3) var(--space-5);
	font-size: var(--font-size-control);
	color: var(--color-text-secondary);
	text-align: left;
	background: none;
	border: 0;
	border-radius: var(--radius-sm);
	cursor: pointer;
	white-space: nowrap;
}

body.pdd .all_comment_stat .pdd-rev-select__option:hover {
	color: var(--color-text);
	background: var(--color-surface-muted);
}

body.pdd .all_comment_stat .buttons_rev {
	display: var(--school-reviews-tools-display);
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-4);
	margin: 0;
	padding: 0 0 var(--space-2);
	overflow-x: auto;
	scrollbar-width: none;
}

body.pdd .all_comment_stat .buttons_rev::-webkit-scrollbar {
	display: none;
}

body.pdd .all_comment_stat .buttons_rev .title_sort {
	order: 0;
	flex: 0 0 auto;
	font-size: var(--font-size-control);
	color: var(--color-text-secondary);
}

body.pdd .all_comment_stat .buttons_rev button {
	order: 0;
	flex: 0 0 auto;
	min-height: var(--control-height-chip);
	padding: 0 var(--space-6);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text-secondary);
	font-size: var(--font-size-control);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
	cursor: pointer;
}

body.pdd .all_comment_stat .buttons_rev button:hover {
	border-color: var(--school-reviews-active-fg);
	color: var(--school-reviews-active-fg);
}

body.pdd .all_comment_stat .buttons_rev button.active {
	background: var(--school-reviews-add-bg);
	border-color: var(--school-reviews-add-bg);
	color: var(--color-text-inverse);
}

/* ------------------------------------------------------------------
   5. Карточка одного отзыва

   Чужая разметка, четыре узла первого уровня. Гридом раскладываем их
   в порядке макета: шапка (аватар + автор/дата + звёзды + источник),
   подпись, текст, реакции.
   ------------------------------------------------------------------ */

body.pdd .items_comments {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--pdd-review-gap);
}

body.pdd .items_comments > * {
	order: 0;
}

/* Отзыв в эталоне — не плашка, а строка списка: поле 12 сверху
   и снизу, разделительная линия внизу, фон общий (main.css, 2204).
   Серая плашка со скруглением спорила с плашкой самого блока
   и съедала ширину полем в 16. */
body.pdd .item.comment.rev_items {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	/* 8 между аватаром и текстом — .review__head эталона держит gap: 8,
	   и содержимое шапки начинается на 52, а не на 56. По вертикали
	   зазора нет вовсе: расстояния между шапкой, подписью, текстом
	   и реакциями держат их собственные margin (10, 6, 10). */
	gap: 0 var(--space-4);
	margin: 0;
	padding: var(--space-6) 0;
	border-radius: 0;
	border-bottom: var(--border-width) solid var(--color-border);
	background: none;
	list-style: none;
}

body.pdd .item.comment.rev_items > * {
	order: 0;
	min-width: 0;
}

/* 5.1 Аватар.

   В базе у отзывов проставлена мета messia_attached_avatar, но
   значений там всего 13 на 322 544 отзыва — это стоковые картинки
   по кругу, а не лица авторов. Принятый макет показывает букву,
   и токен --school-avatar-photo-display: none говорит ровно об этом.
   Букву в .ava дописывает assets/js/pdd-reviews.js, когда движок
   отдал картинку вместо span.first_letter. */
body.pdd .item.comment.rev_items > .ava {
	grid-column: 1;
	grid-row: 1;
	flex: 0 0 auto;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--school-avatar-size);
	height: var(--school-avatar-size);
	border-radius: var(--radius-pill);
	background: var(--school-avatar-letter-bg);
	overflow: hidden;
	color: var(--color-primary);
	font-size: var(--font-size-section);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
}

body.pdd .item.comment.rev_items > .ava img {
	display: var(--school-avatar-photo-display);
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.pdd .item.comment.rev_items > .ava .first_letter,
body.pdd .item.comment.rev_items > .ava .pdd-ava-letter {
	display: var(--school-avatar-letter-display);
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: none;
	color: inherit;
	font-size: inherit;
	line-height: 1;
}

/* 5.2 Шапка: автор и дата слева, звёзды и источник справа */
/* skin.css (стр. 3007) держит .desk на width: calc(100% - 88px) —
   в гриде это оставляет колонке 143px из 231 и загоняет дату,
   звёзды и источник каждого в свою строку. */
body.pdd .item.comment.rev_items > .desk.comment {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	/* Шапка ровно в рост аватара (44), как .review__head эталона:
	   имя с датой, звёзды и источник центрируются по ней. */
	min-height: var(--school-avatar-size);
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* skin.css (стр. 3047) раскладывает .name гридом в две равные
   колонки и центрирует содержимое. Нам нужна строка слева направо:
   имя во всю ширину, под ним дата, звёзды и источник. */
body.pdd .item.comment.rev_items > .desk.comment > .name {
	/* Сетка эталонной шапки: слева имя и под ним дата, справа звёзды,
	   за ними источник. Звёзды стояли третьей строкой слева, под датой —
	   это и было главное расхождение с макетом. */
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	column-gap: var(--space-4);
	row-gap: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: left;
}

body.pdd .item.comment.rev_items > .desk.comment > .name > * {
	order: 0;
}

/* Кегль имени — caption, как .review__author эталона (main.css, 2294):
   17px card-title перевешивали заголовок самого блока. */
body.pdd .item.comment.rev_items .desk.comment .name b {
	grid-column: 1;
	grid-row: 1;
	align-self: end;
	min-width: 0;
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-base);
	color: var(--color-text);
	overflow-wrap: anywhere;
}

/* Имя занимает всю строку, дата со звёздами и источником —
   следующую, слева направо и по мере влезания. */
body.pdd .item.comment.rev_items .desk.comment .name .date {
	grid-column: 1;
	grid-row: 2;
	align-self: start;
	/* 2 сверху и межстрочный 1.45 — .review__date эталона (17px строка). */
	margin: var(--space-1) 0 0;
	font-size: var(--font-size-micro);
	line-height: var(--line-height-base);
	color: var(--color-text-muted);
	text-align: left;
}

body.pdd .item.comment.rev_items .desk.comment .name .rating {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	margin: 0;
	padding: 0;
	min-height: 0;
}

/* Движок держит .stars на flex-basis: 81px, а сама звезда на широком
   экране вырастает до 20px: пять штук требуют 115px и вылезают за свой
   бокс — «Источник» ложится поверх них. Размер берём по содержимому. */
body.pdd .item.comment.rev_items .desk.comment .name .rating .stars {
	display: flex;
	flex-direction: row;
	flex: 0 0 auto;
	width: auto;
	align-items: center;
	/* 69x13 на пять звёзд: 5 x 13 + 4 x 1, как .review__head .stars
	   эталона. Звезда движка на широком экране раздувалась до 15. */
	gap: 1px;
	margin: 0;
	padding: 0;
}

body.pdd .item.comment.rev_items .desk.comment .name .rating .stars .mark,
body.pdd .item.comment.rev_items .desk.comment .name .rating .stars .nomark {
	width: 13px;
	height: 13px;
	margin: 0;
	background-size: contain;
	background-repeat: no-repeat;
}


/* 5.3 Источник отзыва — единственное поле карточки, которое в базе
       действительно есть: 292 991 непустых messia_source из 322 553.

       skin.css ставит .source в position: absolute с top: 21px, и она
       ложится поверх имени автора. Возвращаем в поток — это и есть
       причина наложения, а не отступы. */
body.pdd .item.comment.rev_items .desk.comment .name .source {
	display: var(--school-review-source-display);
	/* Столбцом, а не строкой: в эталоне .review__source — две строки,
	   подпись «Источник:» 12px и под ней название 13px semibold
	   (parts.html, review-item; замер 56x38 против нашей строки 124x26). */
	flex-direction: column;
	position: static;
	grid-column: 3;
	grid-row: 1 / span 2;
	align-self: center;
	min-width: 0;
	align-items: flex-end;
	gap: var(--space-1);
	font-size: var(--font-size-micro);
	line-height: var(--line-height-base);
	color: var(--color-text-muted);
	/* Правый край источника совпадает с правым краем отзыва —
	   .review__source эталона. Раньше это делалось margin-left: auto,
	   теперь это просто последняя колонка сетки шапки. */
	margin: 0;
	text-align: right;
}

/* Название источника — .review__source-name эталона: 13px semibold
   основным цветом ссылки (#2f80ed). Кегль задан числом от токена
   блока: без него чужое правило поднимало ссылку до 18px, и строка
   источника была выше самого отзыва. */
body.pdd .item.comment.rev_items .desk.comment .name .source a {
	display: block;
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-base);
	color: var(--school-reviews-active-fg);
	text-decoration: none;
}

body.pdd .item.comment.rev_items .desk.comment .name .source a:hover {
	text-decoration: underline;
}

/* 5.4 Подпись «Комментарий:» и текст */
body.pdd .item.comment.rev_items > .text {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: var(--space-5) 0 0;
	padding: 0;
	min-width: 0;
}

/* Подпись «Комментарий:» и сам текст — .review__label и .review__text
   эталона (main.css, 2258 и 2308): подпись полужирная основным цветом,
   текст — caption вторичным. У нас было наоборот: бледная подпись
   и текст на два шага крупнее подписи. */
body.pdd .item.comment.rev_items > .text .titlecomment {
	display: var(--school-review-label-display);
	margin: 0 0 var(--school-review-text-margin);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-semibold);
	/* 1.45 — строка .review__label эталона 19px; движок держал 1.3
	   и подпись шла 17. */
	line-height: var(--line-height-base);
	color: var(--color-text);
}

body.pdd .item.comment.rev_items > .text p {
	margin: 0;
	font-size: var(--font-size-caption);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
	overflow-wrap: anywhere;
}

/* Достоинства и недостатки: ни одного заполненного на всю базу */
body.pdd .item.comment.rev_items > .text .adv_and_disadv {
	display: var(--pdd-review-advantages-display);
}

/* 5.5 Реакции.

   Счётчики нулевые — messia_karma заполнена у четырёх комментариев
   на всю базу. Но кнопки рабочие: обработчик висит в frontend.js
   (стр. 307) на '.rev_items .like, .rev_items .dislike', так что это
   действующая возможность движка, а не выдуманное поле. Оставляем.

   Ссылка «Ответить» рядом — наоборот, скрыта: комментариев с
   comment_parent > 0 в базе ноль, и в макете ответа пользователя нет. */
body.pdd .item.comment.rev_items > .likes_and_otvet {
	grid-column: 1 / -1;
	grid-row: 3;
	display: var(--school-review-reactions-display);
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin: var(--space-5) 0 0;
	padding: 0;
}

body.pdd .item.comment.rev_items > .likes_and_otvet > * {
	order: 0;
}

body.pdd .item.comment.rev_items .likes_and_otvet .like,
body.pdd .item.comment.rev_items .likes_and_otvet .dislike {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--control-height-chip);
	margin: 0;
	padding: 0 var(--space-6);
	border-radius: var(--radius-pill);
	background: var(--school-reaction-bg);
	color: var(--color-text-secondary);
	font-size: var(--font-size-caption);
	cursor: pointer;
}

body.pdd .item.comment.rev_items .likes_and_otvet .like:hover,
body.pdd .item.comment.rev_items .likes_and_otvet .dislike:hover {
	color: var(--school-reviews-active-fg);
}

body.pdd .item.comment.rev_items .likes_and_otvet .like.active,
body.pdd .item.comment.rev_items .likes_and_otvet .dislike.active {
	color: var(--school-reviews-active-fg);
	font-weight: var(--font-weight-semibold);
}

body.pdd .item.comment.rev_items .likes_and_otvet .like svg,
body.pdd .item.comment.rev_items .likes_and_otvet .dislike svg {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

body.pdd .item.comment.rev_items .likes_and_otvet > a {
	display: var(--pdd-review-reply-display);
}

/* ------------------------------------------------------------------
   6. Низ блока: «Показать ещё» и «Все отзывы»

   Печатает templates/wp/comments.php, оба — a.btn_red.all_rev_btn.
   Контурная кнопка во всю ширину, как «Показать все отзывы» в макете.
   ------------------------------------------------------------------ */

body.pdd .page_comment_bottom {
	display: flex;
	flex-direction: row;
	margin: 0;
	padding: 0;
}

body.pdd .page_comment_bottom:empty {
	display: none;
}

/* skin.css держит кнопку на max-width: 145px — «Показать ещё»
   в неё не влезает и рвётся на две строки. */
body.pdd .page_comment_bottom .btn_red.all_rev_btn {
	order: 0;
	display: inline-flex;
	flex: 1 1 auto;
	max-width: none;
	align-items: center;
	justify-content: center;
	min-height: var(--control-height-button);
	padding: 0 var(--space-8);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface-muted);
	color: var(--color-text);
	font-size: var(--font-size-button);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
}

body.pdd .page_comment_bottom .btn_red.all_rev_btn:hover {
	border-color: var(--school-reviews-add-bg);
	background: var(--color-surface);
	color: var(--school-reviews-add-bg);
}

/* ------------------------------------------------------------------
   7. Форма отзыва

   Чужая, из messia_new_comment_form. Разметку не трогаем совсем:
   в ней nonce и скрытые поля, а object.js (стр. 25) вдобавок
   переносит #respond внутрь .all_comment_stat, так что любая наша
   обёртка всё равно осталась бы снаружи. Только вид.

   Форма приходит лишь авторизованному: гостю плагин возвращает null,
   а кнопка «Оставить отзыв» открывает модалку входа.
   ------------------------------------------------------------------ */

body.pdd .all_comment_stat #respond {
	order: 0;
	margin: 0;
	padding: 0;
}

body.pdd #respond .messia-comment-form.add_rev {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

body.pdd #respond .messia-comment-form.add_rev > * {
	order: 0;
	margin: 0;
}

body.pdd #respond .title_new_rev {
	font-size: var(--font-size-section);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
}

body.pdd #respond .ocen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-6);
}

body.pdd #respond .ocen .title {
	font-size: var(--font-size-subtitle);
	color: var(--color-text-secondary);
}

body.pdd #respond .textarea {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/* Достоинства и недостатки: на всю базу ни одного заполненного,
   в макете формы их тоже нет. Скрываем поля, а не удаляем —
   object.js сам показывает и прячет .adv_fields при ответе. */
body.pdd #respond .messia-comment-form.add_rev .adv_fields {
	display: var(--pdd-review-advantages-display);
}

body.pdd #respond textarea,
body.pdd #respond input[type="text"],
body.pdd #respond input[type="email"] {
	width: 100%;
	padding: var(--space-5) var(--space-6);
	border: var(--border-width) solid var(--color-border-strong);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	color: var(--color-text);
	font-family: var(--font-family-base);
	font-size: var(--font-size-input);
}

body.pdd #respond textarea:focus,
body.pdd #respond input[type="text"]:focus,
body.pdd #respond input[type="email"]:focus {
	border-color: var(--color-primary);
	outline: none;
}

body.pdd #respond .form-submit {
	display: flex;
	margin: 0;
}

body.pdd #respond .form-submit input[type="submit"] {
	flex: 1 1 auto;
	min-height: var(--control-height-button);
	padding: 0 var(--space-8);
	border-radius: var(--radius-lg);
	background: var(--school-reviews-add-bg);
	border-color: var(--school-reviews-add-bg);
	color: var(--color-text-inverse);
	font-size: var(--font-size-button);
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
}

/* ------------------------------------------------------------------
   8. Широкий экран

   По правилу потока — весь @media (min-width: 1024px) в конце файла.

   Сводка из столбца становится строкой: слева кольцо с лентой,
   справа полосы, под ними кнопка. Ровно как в макете rating-summary.
   ------------------------------------------------------------------ */

/* «Оставить отзыв» — .reviews-add эталона (main.css 2059):
   во всю ширину сводки, ровно 46px, поля внутри нет, межстрочный
   1.45 как у остального текста блока. Кнопка движка шла по
   содержимому (145x50) и висела огрызком слева, а на широком
   экране правило стояло только в @media 1024 — на телефоне
   ширина оставалась чужой. */
body.pdd .all_comment_stat > .btn_red.submit {
	align-self: stretch;
	flex: 1 0 100%;
	width: 100%;
	height: var(--control-height-button);
	min-height: var(--control-height-button);
	margin: 0;
	padding: 0;
	line-height: var(--line-height-base);
}

@media (min-width: 1024px) {

	body.pdd .rev_items.append_respond {
		padding: var(--space-9);
	}

	/* На широком экране 35px чужой обёртки уже не мешают —
	   компенсацию из раздела 1 снимаем. */
	body.pdd.page_comment .rev_items.append_respond {
		margin-left: 0;
		margin-right: 0;
	}


	/* Блок отзывов лежит во вкладке виджета, а она уже плашка
	   (.tab-pane: 761 с полем 20/22 — ровно коробка .block--reviews
	   эталона). Своя плашка внутри чужой давала двойное поле:
	   содержимое шло 667 от 191 вместо 717 от 166. */
	body.pdd .rev_items.append_respond {
		padding: 0;
		background: none;
		box-shadow: none;
		border-radius: 0;
	}

	/* Подпись, текст и реакции идут от левого края карточки, под
	   аватаром: .review__label / .review__text / .review__reactions
	   эталона все шириной 717 от x0. Отбивка под колонку аватара
	   (grid-column: 2) уводила их на 56px вправо. */
	body.pdd .item.comment.rev_items > .text,
	body.pdd .item.comment.rev_items > .likes_and_otvet {
		grid-column: 1 / -1;
	}

	body.pdd .page_comment_bottom .btn_red.all_rev_btn {
		flex: 0 0 auto;
		margin: 0 auto;
		padding: 0 var(--space-9);
	}
}