/* ------------------------------------------------------------------
   type-legal.css — правовая справка: нерестовый запрет, правила, штрафы.

   Единственный модуль темы, где разрешены статусные цвета --st-no,
   --st-ok и --st-warn: здесь «запрещено» и «разрешено» действительно
   противопоставлены законом, а не оценкой автора. На календаре клёва
   тот же красный читался бы как запрет, поэтому во всех остальных
   модулях используется нейтральная шкала --sc-1..--sc-5.

   Здесь же живут обещанные components.css правовые варианты общих
   компонентов: .mr-pill--no/--ok/--warn и .mr-note--no/--ok/--warn.

   Разметку блоков собирает template-parts/type-legal.php разбором
   готового HTML статьи. Любой блок может отсутствовать.
   ------------------------------------------------------------------ */

/* ------------------------------------------------- Правовые метки и плашки */

/* Метка в ячейке таблицы: «запрещено», «разрешено», «частично».
   Проставляется разбором контента, ячейку с фразой не трогает. */
.mr-pill--no   { background: var(--st-no-soft);   color: var(--st-no); }
.mr-pill--ok   { background: var(--st-ok-soft);   color: var(--st-ok); }
.mr-pill--warn { background: var(--st-warn-soft); color: var(--st-warn); }

.mr-note--no {
	border-color: var(--line);
	border-left-color: var(--st-no);
	background: var(--st-no-soft);
}

.mr-note--ok {
	border-color: var(--line);
	border-left-color: var(--st-ok);
	background: var(--st-ok-soft);
}

.mr-note--warn {
	border-color: var(--line);
	border-left-color: var(--st-warn);
	background: var(--st-warn-soft);
}

.mr-note--no   .mr-note__title { color: var(--st-no); }
.mr-note--ok   .mr-note__title { color: var(--st-ok); }
.mr-note--warn .mr-note__title { color: var(--st-warn); }

/* ------------------------------------------------- Полоса ключевых цифр */

/* Стоит сразу под H1, выше лида и выше первой картинки. Человек приходит
   из Яндекса за сроками и штрафом — четыре цифры должны помещаться в
   первый экран телефона, до любой прокрутки. */
.mr-legal-facts {
	margin: 0 0 1.3rem;
	border: 1px solid var(--line);
	border-top: 3px solid var(--ink);
	border-radius: var(--r);
	background: var(--paper);
	overflow: hidden;
}

.mr-legal-facts__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.7rem;
	padding: 0.7rem 1rem;
	background: var(--paper-2);
}

.mr-legal-facts__title {
	margin: 0;
	font-size: 0.95rem;
	letter-spacing: -0.012em;
}

.mr-legal-facts__sub {
	font-family: var(--mono);
	font-size: 0.66rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.mr-legal-facts__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

/* Разделители рисует верхняя граница каждой клетки. Так линия сходится
   в одну независимо от того, сколько цифр нашлось в статье — две, три
   или четыре, — и в сетке не остаётся крашеных пустот. */
.mr-legal-fact {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 0.8rem 1rem 0.85rem;
	border-top: 1px solid var(--line);
	border-left: 3px solid var(--ink-4);
	background: var(--paper);
}

.mr-legal-fact--no   { border-left-color: var(--st-no); }
.mr-legal-fact--ok   { border-left-color: var(--st-ok); }
.mr-legal-fact--warn { border-left-color: var(--st-warn); }
.mr-legal-fact--info { border-left-color: var(--brand-mid); }

.mr-legal-fact__label {
	margin: 0 0 0.4rem;
	font-family: var(--mono);
	font-size: 0.63rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	line-height: 1.35;
	color: var(--ink-3);
}

.mr-legal-fact__value {
	margin: 0;
	font-size: 1.22rem;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.022em;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

.mr-legal-fact__value small {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--ink-2);
}

.mr-legal-fact__note {
	margin: 0.45rem 0 0;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--ink-3);
}

/* Источник прижат к низу: соседние клетки в строке разной высоты, а
   подписи должны стоять на одной линии. */
.mr-legal-fact__src {
	margin: auto 0 0;
	padding-top: 0.6rem;
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.04em;
	line-height: 1.4;
	color: var(--ink-4);
}

.mr-legal-facts__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);
}

@media (min-width: 34rem) {
	.mr-legal-facts__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* До 1100px правого рельса ещё нет и колонка статьи широкая — четыре
   цифры встают в одну строку. Дальше рельс появляется, колонка сужается
   примерно до 660px, и в строке снова помещаются только две. */
@media (min-width: 901px) and (max-width: 1100px) {
	.mr-legal-facts__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ------------------------------------------------- Строка «Сверено» */

/* Дата проверки и номер приказа — самый частый вопрос к правовой статье:
   «это ещё действует?». Зелёный здесь означает «проверено», а не
   «разрешено», но остаётся статусным по смыслу. */
.mr-legal-checked {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.6rem;
	margin: 0 0 1.4rem;
	padding: 0.55rem 0.85rem;
	border: 1px solid var(--line);
	border-left: 3px solid var(--st-ok);
	border-radius: var(--r-sm);
	background: var(--paper-2);
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--ink-2);
}

.mr-legal-checked__label {
	flex: 0 0 auto;
	font-family: var(--mono);
	font-size: 0.63rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--st-ok);
}

.mr-legal-checked__doc {
	min-width: 0;
	color: var(--ink);
}

.mr-legal-checked__date {
	margin-left: auto;
	font-family: var(--mono);
	font-size: 0.7rem;
	white-space: nowrap;
	color: var(--ink-3);
}

/* ------------------------------------------------- Списки «можно / нельзя» */

/* Списки остаются на своих местах в тексте и получают цветовое
   кодирование прямо там: переносить их в шапку статьи нельзя — раздел
   «Что запрещено» опустеет, а по нему приходят из поиска. */
.mr-legal-rules {
	margin: 0 0 1.4rem;
	border: 1px solid var(--line);
	border-left: 3px solid var(--ink-4);
	border-radius: var(--r);
	background: var(--paper);
	overflow: hidden;
}

.mr-legal-rules__head {
	margin: 0;
	padding: 0.6rem 0.9rem;
	background: var(--paper-2);
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--ink-2);
}

.mr-legal-rules--ok { border-left-color: var(--st-ok); }
.mr-legal-rules--no { border-left-color: var(--st-no); }

.mr-legal-rules--ok .mr-legal-rules__head {
	background: var(--st-ok-soft);
	color: var(--st-ok);
}

.mr-legal-rules--no .mr-legal-rules__head {
	background: var(--st-no-soft);
	color: var(--st-no);
}

/* Отступ у списка задаёт коробка, а не сам ul: маркеры из article.css
   должны съехать вместе с текстом. */
.mr-article__body .mr-legal-rules > ul {
	margin: 0;
	padding: 0.7rem 0.9rem 0.75rem;
}

.mr-article__body .mr-legal-rules > ul > li:last-child {
	margin-bottom: 0;
}

.mr-article__body .mr-legal-rules--ok > ul > li::before { background: var(--st-ok); }
.mr-article__body .mr-legal-rules--no > ul > li::before { background: var(--st-no); }

/* ------------------------------------------------- Блок штрафов */

/* Живёт в правом рельсе: на десктопе стоит рядом с текстом, на телефоне
   уезжает под статью. Цифра штрафа при этом не теряется — она же стоит
   четвёртой в полосе ключевых фактов. */
.mr-legal-fines {
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--paper);
	overflow: hidden;
}

.mr-legal-fines__title {
	margin: 0;
	padding: 0.7rem 1rem;
	background: var(--st-no);
	color: var(--paper);
	font-family: var(--mono);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* Страховка: если тип статьи переопределили вручную и статусные цвета
   на странице запрещены, блок остаётся нейтральным. */
.mr-legal-fines--plain .mr-legal-fines__title { background: var(--ink); }

.mr-legal-fines__list {
	list-style: none;
	margin: 0;
	padding: 0.25rem 1rem 0.5rem;
}

.mr-legal-fines__item {
	margin: 0;
	padding: 0.5rem 0;
	border-top: 1px solid var(--paper-3);
}

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

.mr-legal-fines__who {
	display: block;
	font-family: var(--mono);
	font-size: 0.63rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.35;
	color: var(--ink-3);
}

.mr-legal-fines__sum {
	display: block;
	margin-top: 0.15rem;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
	color: var(--st-no);
}

.mr-legal-fines--plain .mr-legal-fines__sum { color: var(--ink); }

.mr-legal-fines__more {
	display: block;
	padding: 0.6rem 1rem;
	border-top: 1px solid var(--paper-3);
	background: var(--paper-2);
	color: var(--brand);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.mr-legal-fines__more:hover {
	background: var(--brand-soft);
	color: var(--brand-dark);
}

/* ------------------------------------------------- Правки общих блоков */

/* Список регионов в виджете остаётся строкой «название — дата»: общая
   заготовка .mr-w > ul a делает ссылку блочной, и дата падает вниз. */
.mr-w > .mr-list .mr-list__link {
	display: flex;
	padding: 0.55rem 0;
}

/* Таблица сроков: даты и суммы получают класс num при разборе контента,
   но первая колонка — название водоёма — переносится по словам. */
.mr-article__body .mr-t td:first-child.num {
	white-space: normal;
}

/* На телефоне ячейка таблицы становится grid-контейнером, и метка
   растянулась бы на всю колонку. Пилюля должна обнимать слово. */
.mr-t td > .mr-pill {
	justify-self: start;
}

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

@media print {
	.mr-legal-facts,
	.mr-legal-rules {
		break-inside: avoid;
	}

	/* Полоса цифр и строка проверки — главное, ради чего страницу печатают
	   или сохраняют в PDF перед выездом. */
	.mr-legal-facts__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mr-legal-checked {
		background: none;
	}
}