/* ------------------------------------------------------------------
   type-top.css — подборки и топ-10 («10 лучших воблеров на щуку»).

   Разметку собирает template-parts/type-top.php разбором готового HTML
   статьи: карточка модели, сводка, чипы перехода. Если разбор ничего не
   нашёл, ни одного из этих классов на странице не будет — стили просто
   не сработают, страница останется обычной статьёй.

   Три задачи типа:

   1. Длина. Десять карточек подряд — это одиннадцать тысяч пикселей на
      телефоне. Сверху страницы стоит сводка со списком всех моделей, над
      карточками — чипы перехода, а сами карточки умеют сворачиваться в
      компактный список.

   2. Компактный режим сделан чекбоксом, без JS, и выключен по умолчанию:
      в отданном HTML описания моделей видимы, поэтому запрет прятать
      текст (региональные и поисковые страницы) не нарушен. Раскрытие
      отдельной модели держится на :target — лишних элементов управления
      в порядке табуляции не появляется.

   3. Различимость. При десяти одинаковых карточках номера мало: граница
      держится тёмной шапкой карточки во всю ширину. Десять тёмных полос
      читаются как оглавление списка даже боковым зрением.

   Статусных цветов (--st-*) здесь нет и быть не может: оценка редакции
   и «плюсы/минусы» — это не «запрещено/разрешено». Оценка выведена
   шкалой --sc-1…--sc-5, минусы помечены нейтральным --ink-3.
   ------------------------------------------------------------------ */

/* ---------------------------------------------------------------- Сводка */

/* Стоит до первого экрана текста и отвечает на вопрос «что вообще в
   подборке», ради которого иначе пришлось бы пролистать десять экранов. */
.mr-top-sum {
	margin: 0 0 1.8rem;
	border: 1px solid var(--line);
	border-top: 3px solid var(--ink);
	border-radius: var(--r);
	background: var(--paper);
	overflow: hidden;
}

.mr-top-sum__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.8rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--line);
	background: var(--paper-2);
}

.mr-top-sum__title {
	margin: 0;
	font-size: 1rem;
	letter-spacing: -0.012em;
}

.mr-top-sum__note {
	margin-left: auto;
	font-size: 0.66rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
	white-space: nowrap;
}

/* ---- Цифры ---- */

.mr-top-sum__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	/* Правая граница последней ячейки в ряду уходит под рамку блока:
	   иначе на краю получается двойная линия. */
	margin-right: -1px;
}

/* Если списка моделей нет, нижняя граница ячеек тоже прячется под рамку. */
.mr-top-sum__facts:last-child {
	margin-bottom: -1px;
}

.mr-top-fact {
	position: relative;
	padding: 0.75rem 0.9rem 0.8rem 1.35rem;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	min-width: 0;
}

/* Вертикальная засечка — ритм, а не сигнал. Отсюда шкала одного тона. */
.mr-top-fact::before {
	content: "";
	position: absolute;
	left: 0.9rem;
	top: 0.8rem;
	bottom: 0.85rem;
	width: 3px;
	border-radius: 2px;
	background: var(--sc-3);
}

.mr-top-fact:nth-child(1)::before { background: var(--sc-5); }
.mr-top-fact:nth-child(2)::before { background: var(--sc-4); }
.mr-top-fact:nth-child(3)::before { background: var(--sc-3); }
.mr-top-fact:nth-child(4)::before { background: var(--sc-2); }

.mr-top-fact__l {
	display: block;
	margin-bottom: 0.3rem;
	font-family: var(--mono);
	font-size: 0.61rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.mr-top-fact__v {
	display: block;
	font-size: 1.12rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--ink);
}

/* ---- Список моделей ---- */

.mr-top-sum__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mr-top-sum__item {
	margin: 0;
	border-top: 1px solid var(--paper-3);
}

.mr-top-sum__item:first-child {
	border-top: 0;
}

.mr-top-sum__link {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	min-height: 2.5rem;
	padding: 0.55rem 1rem;
	color: var(--ink-2);
	text-decoration: none;
}

.mr-top-sum__link:hover {
	background: var(--brand-soft-2);
	color: var(--brand-dark);
}

.mr-top-sum__link:hover .mr-top-sum__name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mr-top-sum__n {
	flex: 0 0 auto;
	font-size: 0.7rem;
	color: var(--ink-4);
}

.mr-top-sum__link:hover .mr-top-sum__n {
	color: var(--brand-mid);
}

.mr-top-sum__name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.95rem;
	line-height: 1.35;
	overflow-wrap: break-word;
}

.mr-top-sum__price {
	flex: 0 0 auto;
	font-size: 0.74rem;
	color: var(--ink-3);
	white-space: nowrap;
}

.mr-top-sum__foot {
	margin: 0;
	padding: 0.7rem 1rem;
	border-top: 1px solid var(--line);
	background: var(--paper-2);
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--ink-3);
}

/* ------------------------------------------------- Чипы быстрого перехода */

/* Ссылки внутри .mr-article__body перекрашивает article.css (селектор
   `.mr-article__body a` — класс плюс тег), поэтому все правила для
   служебных ссылок этого модуля пишутся с тем же префиксом: без него
   чипы и кнопки карточек получают брендовый цвет и подчёркивание. */

.mr-top-jump {
	margin: 0 0 1.4rem;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--paper-2);
	overflow: hidden;
}

.mr-top-jump__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.8rem;
	padding: 0.55rem 0.8rem;
	border-bottom: 1px solid var(--line);
	background: var(--paper);
}

.mr-top-jump__t {
	font-family: var(--mono);
	font-size: 0.64rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.mr-top-jump__list {
	margin: 0;
	padding: 0.65rem 0.8rem;
	gap: 0.4rem;
}

/* Чип берётся штатный (.mr-chip--out), но моноширинный верхний регистр
   для названий моделей не годится: «Kosadaka Cord-R XS 110F» капслоком
   не читается и занимает полторы строки. */
.mr-article__body .mr-top-jump__link {
	max-width: 100%;
	min-height: 2.25rem;
	padding: 0.3rem 0.6rem;
	font-family: var(--font);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
	white-space: normal;
	color: var(--ink-2);
	text-decoration: none;
	background: var(--paper);
}

.mr-article__body .mr-top-jump__link:hover {
	border-color: var(--brand);
	background: var(--brand-soft-2);
	color: var(--brand-dark);
}

.mr-top-jump__n {
	flex: 0 0 auto;
	font-family: var(--mono);
	font-size: 0.68rem;
	color: var(--ink-4);
}

.mr-article__body .mr-top-jump__link:hover .mr-top-jump__n {
	color: var(--brand-mid);
}

/* ------------------------------------------- Переключатель компактного режима */

/* Чекбокс скрыт классом .mr-sr, то есть остаётся фокусируемым: режим
   переключается с клавиатуры пробелом, скрипт для этого не нужен. */
.mr-top-jump__switch {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-left: auto;
	min-height: 2.1rem;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--paper);
	cursor: pointer;
	font-family: var(--mono);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ink-2);
}

.mr-top-jump__switch::before {
	content: "";
	flex: 0 0 auto;
	width: 0.85rem;
	height: 0.85rem;
	border: 1px solid var(--line-strong);
	border-radius: 2px;
	background: var(--paper);
}

.mr-top-jump__switch:hover {
	border-color: var(--brand-mid);
	color: var(--brand-dark);
}

.mr-top-switch:focus-visible ~ .mr-top-jump .mr-top-jump__switch {
	outline: 2px solid var(--brand-mid);
	outline-offset: 2px;
}

.mr-top-switch:checked ~ .mr-top-jump .mr-top-jump__switch {
	border-color: var(--brand);
	background: var(--brand-soft-2);
	color: var(--brand-dark);
}

.mr-top-switch:checked ~ .mr-top-jump .mr-top-jump__switch::before {
	border-color: var(--brand);
	background: var(--brand);
	box-shadow: inset 0 0 0 2px var(--paper);
}

/* ---------------------------------------------------------------- Карточка */

.mr-top-models {
	margin: 0 0 1.6rem;
	scroll-margin-top: calc(var(--navbar) + 1rem);
}

.mr-top-model {
	margin: 0 0 1.5rem;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--paper);
	overflow: hidden;
	scroll-margin-top: calc(var(--navbar) + 1rem);
}

.mr-top-model:last-child {
	margin-bottom: 0;
}

/* Куда перешли по чипу — видно и в обычном режиме. */
.mr-top-model:target {
	border-color: var(--brand-mid);
	box-shadow: 0 0 0 2px var(--brand-soft);
}

/* Сильный разделитель. Номер в углу светлой карточки на десятом повторе
   перестаёт читаться как граница; тёмная полоса во всю ширину — нет. */
.mr-top-model__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem 0.7rem;
	padding: 0.6rem 0.8rem;
	background: var(--ink);
	color: var(--paper);
}

.mr-top-model--pick .mr-top-model__head {
	background: var(--brand-dark);
}

.mr-top-model__n {
	flex: 0 0 auto;
	min-width: 2rem;
	padding: 0.2rem 0.35rem;
	border-radius: 2px;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--mono);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.04em;
	text-align: center;
}

/* Заголовок остаётся тем же h2/h3, что был в тексте: его правила из
   article.css (рамка слева, счётчик разделов, отбивка) здесь снимаются.
   counter-increment важнее прочего — иначе десять моделей-h2 сдвинут
   нумерацию оставшихся разделов статьи. */
.mr-article__body .mr-top-model__name {
	flex: 1 1 11rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	counter-increment: none;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.016em;
	color: var(--paper);
	overflow-wrap: break-word;
	scroll-margin-top: 0;
}

.mr-article__body .mr-top-model__name::before {
	content: none;
}

.mr-top-model__price {
	flex: 0 0 auto;
	margin-left: auto;
	font-family: var(--mono);
	font-size: 0.88rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--paper);
	white-space: nowrap;
}

/* ---- Ссылки раскрытия: видны только в компактном режиме ---- */

.mr-article__body .mr-top-model__more,
.mr-article__body .mr-top-model__back {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	/* В компактном режиме это единственный способ открыть модель, поэтому
	   цель нажатия не меньше 36 пикселей даже в плотной шапке. */
	min-height: 2.25rem;
	padding: 0.3rem 0.6rem;
	border: 1px solid var(--ink-2);
	border-radius: var(--r-sm);
	background: none;
	color: var(--paper-3);
	font-family: var(--mono);
	font-size: 0.63rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.mr-article__body .mr-top-model__more:hover,
.mr-article__body .mr-top-model__back:hover {
	background: var(--ink-2);
	color: var(--paper);
}

/* ---- Собственно компактный режим ---- */

/* По умолчанию выключен: в отданном HTML описания видимы, прятать текст
   от поиска нечем. Включает его читатель, которому нужно сравнить
   десять моделей, а не читать их подряд. */
.mr-top-switch:checked ~ .mr-top-model {
	margin-bottom: 0.5rem;
}

.mr-top-switch:checked ~ .mr-top-model .mr-top-model__body {
	display: none;
}

.mr-top-switch:checked ~ .mr-top-model .mr-top-model__more {
	display: inline-flex;
}

/* Раскрытие одной модели держится на :target, а не на десяти чекбоксах:
   те попали бы в порядок табуляции и в обычном режиме, где они не нужны
   вовсе. Ссылка «подробнее» ведёт на саму карточку, поэтому работает и
   как обычный якорь, которым можно поделиться. */
.mr-top-switch:checked ~ .mr-top-model:target .mr-top-model__body {
	display: block;
}

.mr-top-switch:checked ~ .mr-top-model:target .mr-top-model__more {
	display: none;
}

.mr-top-switch:checked ~ .mr-top-model:target .mr-top-model__back {
	display: inline-flex;
}

/* ------------------------------------------------- Характеристики и оценка */

/* Полоса под шапкой остаётся видимой и в компактном режиме: именно она
   делает свёрнутый список сравнимым — иначе от карточки остаётся одно
   название. */
.mr-top-model__strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	padding: 0.55rem 0.8rem;
	border-bottom: 1px solid var(--line);
	background: var(--paper-2);
}

.mr-top-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
	gap: 0.45rem 0.9rem;
	flex: 1 1 14rem;
	min-width: 0;
	margin: 0;
}

.mr-top-specs > div {
	min-width: 0;
}

.mr-top-specs dt {
	font-family: var(--mono);
	font-size: 0.6rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	line-height: 1.35;
	color: var(--ink-3);
}

.mr-top-specs dd {
	margin: 0.12rem 0 0;
	font-size: 0.9rem;
	font-weight: 650;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	overflow-wrap: break-word;
}

/* ---- Оценка редакции ---- */

/* Шкала --sc-*, а не «светофор»: 3 из 5 у приманки — это не нарушение
   и не тревога, красным и янтарным здесь означать нечего. */
.mr-top-rate {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex: 0 0 auto;
}

.mr-top-rate__v {
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--ink);
}

.mr-top-rate__bar {
	display: flex;
	gap: 2px;
}

.mr-top-rate__i {
	display: block;
	width: 0.6rem;
	height: 0.45rem;
	border: 1px solid var(--sc-1);
	border-radius: 1px;
	background: var(--sc-track);
}

.mr-top-rate__i.is-on {
	border-color: var(--sc-5);
	background: var(--sc-5);
}

.mr-top-rate__i.is-half {
	border-color: var(--sc-3);
	background: linear-gradient(90deg, var(--sc-5) 50%, var(--sc-track) 50%);
}

/* ---------------------------------------------------------------- Тело */

.mr-top-model__body {
	padding: 0.85rem 0.9rem 0.95rem;
}

.mr-top-model__body > *:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------- Плюсы и минусы */

/* auto-fit, а не две жёстких колонки: в статье может оказаться только
   список плюсов — одиночная колонка в половину ширины выглядела бы как
   недогруженный блок. */
.mr-top-pc {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0.8rem;
	margin: 0 0 1.3rem;
}

.mr-top-pc__col {
	min-width: 0;
	padding: 0.65rem 0.8rem 0.7rem;
	border: 1px solid var(--line);
	border-left: 3px solid var(--ink-4);
	border-radius: var(--r-sm);
	background: var(--paper-2);
}

/* Плюс — насыщенный конец шкалы, минус — серый. Зелёный и красный тут
   означали бы «разрешено» и «запрещено», а речь о свойствах приманки. */
.mr-top-pc__col--pro {
	border-left-color: var(--sc-5);
}

.mr-top-pc__col--con {
	border-left-color: var(--ink-4);
}

.mr-top-pc__t {
	margin: 0 0 0.4rem;
	font-family: var(--mono);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-2);
}

/* Список приходит из текста как ul или ol: маркеры и отбивку из
   article.css снимаем, знак ставим сами. */
.mr-article__body .mr-top-pc__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mr-article__body .mr-top-pc__list > li {
	position: relative;
	margin: 0 0 0.4em;
	padding-left: 1.15em;
	font-size: 0.94rem;
	line-height: 1.5;
}

.mr-article__body .mr-top-pc__list > li:last-child {
	margin-bottom: 0;
}

.mr-article__body .mr-top-pc__list > li::before {
	content: "+";
	position: absolute;
	left: 0;
	top: 0;
	width: auto;
	height: auto;
	background: none;
	font-family: var(--mono);
	font-weight: 700;
	line-height: 1.5;
	color: var(--sc-5);
}

.mr-article__body .mr-top-pc__col--con .mr-top-pc__list > li::before {
	content: "\2212";                    /* минус, а не дефис */
	color: var(--ink-3);
}

/* ---------------------------------------------------------------- Сводная таблица */

/* Десять строк на шесть колонок остаются .mr-t--wide: карточный режим
   развернул бы их в простыню, где две модели физически не видны
   одновременно и сравнивать нечего. Здесь только уплотнение и связь
   первой колонки с карточками. */
.mr-article__body .mr-top-cmp {
	font-size: 0.86rem;
}

.mr-article__body .mr-top-cmp thead th,
.mr-article__body .mr-top-cmp tbody td {
	padding: 0.5rem 0.6rem;
}

/* Примороженная колонка должна отделяться от прокручиваемой части
   заметнее, чем обычной линией: иначе при сдвиге вбок кажется, что
   таблица разорвалась. */
.mr-article__body .mr-top-cmp tbody td:first-child,
.mr-article__body .mr-top-cmp thead th:first-child {
	border-right: 2px solid var(--line-strong);
}

.mr-article__body .mr-top-cmp__link {
	display: block;
	color: var(--ink);
	text-decoration: none;
}

.mr-article__body .mr-top-cmp__link:hover {
	background: none;
	color: var(--brand-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mr-top-cmp__n {
	margin-right: 0.35rem;
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--ink-4);
}

/* ---------------------------------------------------------------- Рельс */

/* Внутри .mr-w список ссылок делает блочным правило `.mr-w > ol a`
   (класс плюс тег) — возвращаем строку с ценой справа. */
.mr-top-rail__list .mr-list__link {
	display: flex;
	padding: 0.5rem 0;
}

.mr-top-rail__list .mr-list__note {
	font-size: 0.68rem;
}

/* ---------------------------------------------------------------- Адаптив */

@media (max-width: 700px) {
	.mr-top-sum {
		margin-bottom: 1.4rem;
	}

	.mr-top-sum__head {
		padding: 0.65rem 0.8rem;
	}

	.mr-top-sum__note {
		margin-left: 0;
		flex-basis: 100%;
	}

	/* Две колонки вместо auto-fit: на 320px четыре ячейки в ряд дают
	   по 70px, в которые не помещается ни «1 500 ₽», ни подпись. */
	.mr-top-sum__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mr-top-fact {
		padding: 0.6rem 0.7rem 0.65rem 1.2rem;
	}

	.mr-top-fact::before {
		left: 0.7rem;
	}

	.mr-top-fact__v {
		font-size: 1rem;
	}

	.mr-top-sum__link,
	.mr-top-sum__foot {
		padding-inline: 0.8rem;
	}

	.mr-top-jump__list {
		padding: 0.55rem 0.6rem;
	}

	.mr-article__body .mr-top-jump__link {
		font-size: 0.88rem;
	}

	.mr-top-model {
		margin-bottom: 1.1rem;
	}

	.mr-top-model__head {
		padding: 0.55rem 0.7rem;
	}

	.mr-article__body .mr-top-model__name {
		flex-basis: 60%;
		font-size: 1rem;
	}

	/* Цена уезжает во вторую строку шапки: рядом с названием на 320px
	   ей остаётся полсотни пикселей. */
	.mr-top-model__price {
		font-size: 0.84rem;
	}

	.mr-top-model__strip,
	.mr-top-model__body {
		padding-inline: 0.7rem;
	}

	.mr-top-specs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		flex-basis: 100%;
	}

	.mr-top-pc {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.6rem;
	}
}

/* ---------------------------------------------------------------- Печать */

@media print {
	.mr-top-jump,
	.mr-top-sum__foot,
	.mr-article__body .mr-top-model__more,
	.mr-article__body .mr-top-model__back {
		display: none !important;
	}

	/* На бумаге компактного режима нет: описания должны быть целиком. */
	.mr-top-model__body {
		display: block !important;
	}

	.mr-top-model,
	.mr-top-sum {
		break-inside: avoid;
		border-color: var(--line-strong);
	}

	.mr-top-model__head {
		background: none;
		color: var(--ink);
		border-bottom: 2px solid var(--ink);
	}

	.mr-article__body .mr-top-model__name,
	.mr-top-model__price {
		color: var(--ink);
	}

	.mr-top-model__n {
		background: none;
		border: 1px solid var(--ink);
	}
}