/*
 * Стили блоков плагина gdz-core.
 *
 * Живут отдельно от CSS темы: обновление плагина не должно затирать вёрстку
 * темы, а обновление темы — вёрстку плагина. Все цвета, радиусы и шрифты
 * берутся из токенов темы, поэтому тёмная тема поддерживается сама собой.
 *
 * Бренд-гайд соблюдается буквально:
 *   — ни одного box-shadow и ни одного градиента, поверхности разделяет край;
 *   — радиусы только --r-sm / --r / --r-lg / --r-pill;
 *   — все отступы кратны 8;
 *   — киноварь не ставится под текст мельче 24px, для мелкого — --accent-text;
 *   — text-transform: uppercase не используется.
 *
 * Вёрстка mobile-first: основная часть трафика по запросам с номером задания
 * идёт с телефонов.
 */

/* --- Условие, решение, ответ -------------------------------------------------- */

.gdz-cond,
.gdz-solution,
.gdz-answer,
.gdz-oral {
	margin: 0 0 32px;
}

.gdz-cond .entry {
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--surface);
}

/* Ответ выделен фоном 8%, но текст остаётся цветом текста: киноварь под
   мелким шрифтом бренд-гайдом запрещена. */
.gdz-answer__box {
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--accent-soft);
	font-weight: 600;
}

.gdz-oral__hint {
	margin: 8px 0 0;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	color: var(--text-muted);
	font-size: 14px;
	line-height: 22px;
	letter-spacing: .01em;
}

/* --- Источник варианта -------------------------------------------------------- */

.gdz-source {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 32px;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	font-size: 14px;
	line-height: 20px;
	letter-spacing: .01em;
	color: var(--text-muted);
}

.gdz-source__value {
	font-weight: 600;
	color: var(--text);
}

a.gdz-source__value {
	color: var(--accent-text);
}

.gdz-source__note {
	flex-basis: 100%;
}

/* --- Предыдущее и следующее задание ------------------------------------------- */

.gdz-seq {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin: 0 0 32px;
}

.gdz-seq__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: var(--r);
	color: var(--text);
	transition: border-color .2s ease;
}

.gdz-seq__link:hover {
	border-color: var(--text-muted);
	text-decoration: none;
}

.gdz-seq__hint {
	color: var(--text-muted);
	font-size: 14px;
	line-height: 20px;
	letter-spacing: .01em;
}

.gdz-seq__no {
	font-weight: 600;
}

/* --- Сетка номеров заданий варианта ------------------------------------------- */

.gdz-tasks {
	margin: 0 0 32px;
}

.gdz-tasks__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.gdz-tasks__item {
	margin: 0;
}

/* Ячейка — цель для пальца: 48px по обеим осям, это минимум для касания. */
.gdz-tasks__cell {
	display: grid;
	place-items: center;
	min-height: 48px;
	padding: 8px;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	color: var(--text);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	transition: border-color .2s ease;
}

a.gdz-tasks__cell:hover {
	border-color: var(--text-muted);
	text-decoration: none;
}

.gdz-tasks__cell.is-current {
	border-color: var(--text);
	color: var(--text-muted);
	cursor: default;
}

.gdz-tasks__all {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: .01em;
}

/* --- Похожие задания ---------------------------------------------------------- */

.gdz-related {
	margin: 0 0 32px;
}

.gdz-related__list {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.gdz-related__item {
	padding: 8px 0;
	border-bottom: 1px solid var(--border);
}

.gdz-related__item:last-child {
	border-bottom: 0;
}

.gdz-related__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: .01em;
}

.gdz-related__tags-label {
	color: var(--text-muted);
}

.gdz-tag {
	display: inline-block;
	padding: 4px 8px;
	border: 1px solid var(--border);
	border-radius: var(--r-pill);
	color: var(--text-muted);
}

.gdz-tag:hover {
	border-color: var(--text-muted);
	color: var(--text);
	text-decoration: none;
}

/* --- Список вариантов на хабе ------------------------------------------------- */

.gdz-variants {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 16px;
	margin: 0 0 32px;
}

/* --- Экраны от планшета ------------------------------------------------------- */

@media (min-width: 768px) {
	.gdz-seq {
		grid-template-columns: 1fr 1fr;
	}

	.gdz-seq__link--next {
		text-align: right;
	}

	/* Одиночная ссылка «следующее» не должна прыгать в левую колонку. */
	.gdz-seq__link--next:only-child {
		grid-column: 2;
	}

	.gdz-tasks__grid {
		grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	}
}

/* --- Страница-агрегатор по тегу ------------------------------------------ */

.gdz-tag-list {
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.gdz-tag-list__item {
	padding: 16px 0;
	border-bottom: 1px solid var(--border);
}

.gdz-tag-list__item:last-child {
	border-bottom: 0;
}

.gdz-tag-list__link {
	font-weight: 600;
}

.gdz-tag-list__meta {
	display: block;
	margin-top: 4px;
	color: var(--text-muted);
	font-size: 14px;
	line-height: 20px;
	letter-spacing: .01em;
}

/* --- Оглавление ---------------------------------------------------------- */

.gdz-toc {
	margin: 0 0 32px;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--surface);
}

.gdz-toc__title {
	margin: 0 0 8px;
	font-size: 17px;
	line-height: 26px;
	font-weight: 600;
}

.gdz-toc__list {
	margin: 0;
	padding: 0 0 0 24px;
}

.gdz-toc__item {
	padding: 4px 0;
}

/* Вложенность показываем отступом, а не вторым списком: так проще
   поддерживать любую глубину и не ломается нумерация. */
.gdz-toc__item--3 {
	padding-left: 16px;
}

.gdz-toc__item--4 {
	padding-left: 32px;
}

.gdz-toc a {
	color: var(--accent-text);
}

/* Отступ под липкую шапку: без него якорь уводит заголовок под неё. */
.entry h2[id],
.entry h3[id],
.entry h4[id],
.gdz-cond,
.gdz-solution,
.gdz-answer,
.gdz-oral {
	scroll-margin-top: 24px;
}

/* ═══════════════════════════════════════════════════════════════
   Отклик на нажатие, тач-цели, доступность
   ═══════════════════════════════════════════════════════════════

   Обратная связь должна появляться в момент нажатия, а не по
   отпусканию: пока палец на ссылке и страница ещё грузится, экран
   обязан показать, что касание принято. Без этого интерфейс
   ощущается мёртвым — особенно на телефоне, где переход занимает
   секунду и всё это время ничего не происходит.
   ─────────────────────────────────────────────────────────────── */

a,
button,
.gdz-card,
.meta-line__item,
[role="button"] {
	-webkit-tap-highlight-color: transparent;
}

a:active,
button:active,
[role="button"]:active,
.gdz-card:active,
.gdz-tag-list a:active,
.gdz-related a:active {
	transform: scale(.97);
	opacity: .82;
	transition: transform 90ms ease-out, opacity 90ms ease-out;
}

/* Крупные блоки при нажатии сжимаются меньше: одинаковый масштаб
   для строки и для карточки выглядит по-разному. */
.gdz-card:active,
.gdz-related:active {
	transform: scale(.99);
}

/* Кнопки отправки — заметнее, это осмысленное действие. */
button[type="submit"]:active,
.gdz-btn:active {
	transform: scale(.96);
	opacity: .9;
}

/* ─── Тач-цели ───
   Хлебные крошки и мелкие ссылки были 18–22px в высоту. На телефоне
   в такую цель попасть трудно; минимум — 44px. Расширяем область
   нажатия отступами, не трогая видимый размер текста. */

@media (max-width: 768px) {

	.breadcrumbs a,
	.breadcrumb a,
	nav[aria-label*="лебн"] a,
	.gdz-byline a {
		display: inline-block;
		padding-block: 11px;
		min-height: 44px;
		box-sizing: border-box;
	}

	.gdz-tag-list a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* ─── Уважение к настройкам системы ─── */

@media (prefers-reduced-motion: reduce) {

	a:active,
	button:active,
	[role="button"]:active,
	.gdz-card:active,
	.gdz-btn:active,
	.gdz-related a:active,
	.gdz-tag-list a:active {
		transform: none;
		transition: opacity 90ms ease-out;
	}
}

@media (prefers-contrast: more) {

	.gdz-card,
	.gdz-related,
	.meta-line__item {
		border: 1px solid currentColor;
	}

	a {
		text-decoration: underline;
	}
}

/* ─── Блок «Смотрите также» ───
   Появился вместе с перелинковкой и до сих пор наследовал стили темы
   случайным образом. */

.gdz-related {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid rgba(128, 128, 128, .22);
}

.gdz-related h2 {
	margin: 0 0 12px;
	font-size: 20px;
	line-height: 26px;
	letter-spacing: -.01em;
}

.gdz-related ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gdz-related li + li {
	margin-top: 4px;
}

.gdz-related a {
	display: block;
	padding: 10px 0;
	min-height: 44px;
	box-sizing: border-box;
}

/* Призыв ответить вместо счётчика нуля. */

.meta-line__item--cta {
	display: flex;
	align-items: center;
}

.meta-line__cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 10px;
	font-weight: 600;
	text-decoration: none;
	color: #fff;
	background: var(--accent, #e04a2f);
}

.meta-line__cta:hover {
	filter: brightness(1.06);
}

/* Кнопка не должна сидеть в рамке соседних карточек: она не карточка,
   а действие. Снимаем у её обёртки границу и внутренние отступы. */

.meta-line__item--cta {
	padding: 0;
	border: 0;
	background: none;
}

/* Плейсхолдер поиска длиннее, чем поле на телефоне (177px против
   23 знаков при кегле 17px). Уменьшаем только подсказку — вводимый
   текст остаётся прежнего размера. */

@media (max-width: 768px) {

	[data-search-input]::placeholder {
		font-size: 13px;
	}
}

/* Блок со ссылкой на канал. Заметный, но не кричащий: это предложение,
   а не баннер. Слева акцентная полоса вместо рамки — так он читается
   как врезка в тексте, а не как вставленная реклама. */

.gdz-channel {
	margin: 24px 0;
	padding: 14px 16px;
	border-left: 3px solid var(--accent, #e04a2f);
	background: rgba(224, 74, 47, .06);
	border-radius: 0 10px 10px 0;
}

.gdz-channel p {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
}

.gdz-channel__link {
	display: inline-block;
	min-height: 44px;
	padding: 10px 0 10px 4px;
	font-weight: 600;
	white-space: nowrap;
}