/* ============================================================
   Обсуждение под статьёй, записью видео и семинаром.
   Язык — docs/DESIGN_SYSTEM.md (§9.38): белый фон, линии 1px,
   скруглений нет (круглые только аватары), цвета — графит и его
   оттенки. Новых цветов, теней и радиусов здесь нет.
   Разметка — parts/comments.php, данные и лайк — inc/comments.php,
   скрипт — assets/js/comments.js.

   Выше списка — кнопки обсуждения во внешних сетях (Телеграм, ВКонтакте,
   YouTube): разметка `satway_club_theme_discussion_html()`
   (`inc/discussion.php`), общая у статьи и записи видео.
   ============================================================ */

/* --- Кнопки обсуждения во внешних сетях (§9.4) ---
   Ряд по центру колонки; кнопка сети показывается только тогда, когда
   у записи заполнен адрес обсуждения в этой сети. */
.discuss__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.discuss__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	font-family: var(--font-heading);
	font-size: 16px;
	color: var(--color-foreground);
	text-decoration: none;
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-none);
}

.discuss__btn:hover,
.discuss__btn:focus-visible {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.discuss__btn svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.discuss__likes {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--color-foreground-muted);
}

.discuss__likes svg {
	width: 14px;
	height: 14px;
	flex: none;
}

.comments {
	margin-top: 48px;
}

/* --- Шапка: число и сортировка (§9.4) --- */

.comments__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
}

.comments__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
	color: var(--color-foreground);
}

.comments__sort {
	display: flex;
	gap: 16px;
}

.comments__sort-link {
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 300;
	color: var(--color-foreground-muted);
	text-decoration: none;
	transition: color .2s ease;
}

.comments__sort-link:hover,
.comments__sort-link:focus-visible {
	color: var(--color-foreground);
}

.comments__sort-link.is-active {
	color: var(--color-primary);
}

/* --- Список --- */

.comments__list,
.comments__list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Без горизонтальной линейки: комментарии друг от друга отделяет воздух,
   вложенные — тон подложки (§9.38). Линия в блоке была третьим способом
   разделения сразу и только шумела. */
.comments__item {
	padding: 32px 0;
}

/* --- Вложенность: тон подложки (§9.38) ---
   Отступов и линий нет: блок ответа лежит внутри блока родителя и читается
   плотностью фона: белый → #FCFBFA → #F7F6F5. Глубже третьего уровня тон
   не темнеет — такие ответы ядро и так поднимает на третий уровень, и у них
   стоит знак «↳» (разметка — `inc/comments.php`, `is_extra`). */
.comments__list .children {
	margin-top: 10px;
	padding-left: 0;
	border-left: 0;
}

/* второй уровень — плашка */
.comments__list .children > .comments__item {
	padding: 20px;
	background: var(--color-background-muted);
}

.comments__list .children > .comments__item + .comments__item {
	margin-top: 10px;
}

/* третий уровень — на ступень темнее: лёгкая примесь графита к той же
   плашке (готовый токен языка, новых цветов не заводим) */
.comments__list .children .children {
	margin-top: 10px;
}

.comments__list .children .children > .comments__item {
	padding: 16px;
	background: var(--color-accent-light);
}

/* глубже третьего — своей плашки нет: ответ идёт в блоке третьего уровня,
   отделённый знаком «↳» */
.comments__list .children .children .children {
	margin-top: 0;
}

.comments__list .children .children .children > .comments__item {
	padding: 12px 0 0;
	background: none;
}

.comments__list .children .children .children > .comments__item + .comments__item {
	margin-top: 0;
}

.comments__body {
	display: flex;
	gap: 16px;
}

/* --- Аватар со значком сервиса --- */

.comments__avatar {
	position: relative;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
}

.comments__avatar-img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	object-fit: cover;
}

.comments__avatar-badge {
	position: absolute;
	right: -3px;
	bottom: -3px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-background);
	color: var(--color-primary);
}

.comments__avatar-badge svg {
	width: 11px;
	height: 11px;
}

/* --- Имя, метка, дата --- */

.comments__main {
	min-width: 0;
	flex: 1 1 auto;
}

.comments__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}

/* «↳» у ответа, поднятого на последний уровень: без него он читался бы как
   обычный сосед по ветке. */
.comments__up {
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 300;
	color: var(--color-foreground-muted);
}

.comments__author {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--color-foreground);
	text-decoration: none;
}

a.comments__author:hover,
a.comments__author:focus-visible {
	color: var(--color-primary);
}

.comments__label {
	padding: 2px 8px;
	background: var(--color-background-muted);
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--color-foreground-muted);
}

.comments__label--pending {
	color: var(--color-primary);
}

.comments__date {
	margin-left: auto;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--color-foreground-muted);
}

/* --- Текст --- */

.comments__text {
	margin-top: 8px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--color-foreground-alpha);
}

.comments__text > *:first-child {
	margin-top: 0;
}

.comments__text > *:last-child {
	margin-bottom: 0;
}

/* --- Действия: лайк, ответ, ответ в сервисе ---
   Один кегль и один цвет у всех трёх: это один ряд действий. */

.comments__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	margin-top: 16px;
}

.comments__like {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 300;
	color: var(--color-foreground-muted);
	cursor: pointer;
	transition: color .2s ease;
}

.comments__like-icon {
	width: 18px;
	height: 18px;
}

.comments__like:hover,
.comments__like:focus-visible {
	color: var(--color-foreground);
}

.comments__like.is-liked {
	color: var(--color-primary);
}

.comments__like.is-liked .comments__like-icon {
	fill: currentColor;
}

.comments__like--static {
	cursor: default;
}

/* Место «Ответить» держит постоянную ширину: на нём же показывается
   «Отменить» (подпись чуть длиннее), и без этого соседняя ссылка сдвигалась бы
   вправо при открытии формы. Обёртка у отмены та же, поэтому и типографика,
   и высота строки у неё те же — «Отменить» выглядит как соседняя ссылка. */
.comments__reply {
	min-width: 3.3em;
}

/* Ядровая ссылка отмены остаётся в разметке — её ждёт ядровой скрипт, без неё
   он не включает ответы вовсе, — но показывает отмену своя кнопка в строке
   действий. */
.comment-reply-title small {
	display: none;
}

.comments__reply a,
.comments__source {
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 300;
	color: var(--color-foreground-muted);
	text-decoration: none;
	transition: color .2s ease;
}

.comments__reply a:hover,
.comments__reply a:focus-visible,
.comments__source:hover,
.comments__source:focus-visible {
	color: var(--color-primary);
}

.comments__source {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.comments__source-icon {
	width: 18px;
	height: 18px;
	fill: currentColor;
	opacity: .7;
	transform: rotate(180deg);
}

.comments__source:hover .comments__source-icon,
.comments__source:focus-visible .comments__source-icon {
	opacity: 1;
}

/* --- Пусто и «показать ещё» --- */

.comments__empty {
	margin: 24px 0 0;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-foreground-muted);
}

.comments__more-wrap {
	margin-top: 24px;
	text-align: center;
}

/* Пока сортировка грузится, список притухает — смена заметна, но список
   не исчезает и не прыгает. */
.comments__block {
	transition: opacity .15s ease;
}

.comments__block[aria-busy="true"] {
	opacity: .55;
}

/* Форма — без рамки и без плашки: обычный блок в колонке, по левой оси
   с комментариями. Отделяет её только воздух и заголовок. */
.comment-respond {
	margin: 48px 0 0;
}

/* Когда нажали «Ответить», форма встаёт внутри того же комментария — сразу
   под его текстом и выше его ответов (ядро вставляет её за <article>, а не за
   весь <li>). Уровень ей даёт блок родителя: у второго уровня плашка светлая,
   у третьего темнее, у корневого фона нет. Своей плашки форме не нужно. */
.comments__item > .comment-respond {
	margin: 24px 0 0;
}

/* Заголовок формы и «Отменить ответ» — по разным краям одной строки.
   Раньше ссылка отмены шла вподбор заголовку и сливалась с именем. */
.comment-respond .comment-reply-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 16px;
	margin: 0 0 20px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
	color: var(--color-foreground);
}

/* «Вы вошли как …» — справа в той же строке, что и заголовок формы: заголовок
   прижат влево, подпись отправляется вправо `margin-left: auto`, а «Отменить
   ответ» встаёт следом за ней. Своя типографика — кегль заголовка здесь велик. */
.comments__form-who {
	margin-left: auto;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-foreground-muted);
}

.comment-respond .comment-reply-title small {
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.4;
}

#cancel-comment-reply-link {
	color: var(--color-foreground-muted);
	text-decoration: none;
	transition: color .2s ease;
}

#cancel-comment-reply-link:hover,
#cancel-comment-reply-link:focus-visible {
	color: var(--color-primary);
}

.comment-respond .comments__form-note {
	margin: 0 0 20px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-foreground-muted);
}

/* Кнопка формы — у правого края. В языке кнопки формы прижаты к левой оси
   вместе с полями (§9.20), здесь по просьбе владельца исключение (§15):
   кнопка закрывает колонку справа. */
.comment-respond .form-submit {
	margin: 24px 0 0;
	text-align: right;
}

@media (max-width: 960px) {
	.comments__list .children > .comments__item {
		padding: 16px;
	}

	.comments__list .children .children > .comments__item {
		padding: 12px;
	}

	.comments__item > .comment-respond {
		margin: 20px 0 0;
	}

	.comments__date {
		margin-left: 0;
	}

	.comment-respond {
		margin: 40px 0 0;
	}

	/* на узком экране заголовок и «Вы вошли как …» в строку не встают */
	.comments__form-who {
		flex-basis: 100%;
		margin-left: 0;
	}

	.comment-respond .comment-reply-title {
		font-size: 28px;
	}
}