/* ------------------------------------------------------------------
   base.css — сброс, типографика, ссылки, кнопки, формы, доступность.

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

   Цвета берутся только из tokens.css. Ни одного литерала.
   ------------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	color-scheme: light;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Переход по якорю не должен прятать заголовок под липкой панелью.
	   На мобильном --navbar равен нулю, останется только отбивка. */
	scroll-padding-top: calc(var(--navbar) + 0.75rem);
	/* Страховка от горизонтальной прокрутки на 320px.
	   Именно clip и именно на html: overflow-x:hidden на body делает его
	   контейнером прокрутки и ломает position:sticky у панели навигации
	   и оглавления, а clip на html уходит во вьюпорт и ни на sticky,
	   ни на fixed-кнопку «наверх» не влияет. */
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: 1.0625rem;                /* 17px — базовый размер на телефоне */
	line-height: 1.65;
	overflow-wrap: break-word;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media (min-width: 900px) {
	body {
		font-size: 1.125rem;             /* 18px на десктопе */
		line-height: 1.7;
	}
}

/* ---------------------------------------------------------------- Медиа */

img,
svg,
video,
canvas,
iframe {
	max-width: 100%;
	display: block;
}

img {
	height: auto;
	border: 0;
}

/* Картинки без явных размеров не должны дёргать вёрстку при загрузке. */
img[width][height] {
	height: auto;
}

svg {
	fill: currentColor;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.015em;
	color: var(--ink);
	overflow-wrap: break-word;
}

h1 { font-size: clamp(1.75rem, 4.2vw, 2.6rem); line-height: 1.15; letter-spacing: -0.028em; }
h2 { font-size: clamp(1.35rem, 2.7vw, 1.75rem); letter-spacing: -0.024em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.28rem); letter-spacing: -0.016em; }
h4 { font-size: 1rem; }
h5 { font-size: 0.94rem; }
h6 { font-size: 0.88rem; }

p {
	margin: 0 0 1.1em;
}

ul,
ol {
	margin: 0 0 1.2em;
	padding-left: 1.5em;
}

li {
	margin-bottom: 0.5em;
}

li > ul,
li > ol {
	margin-top: 0.5em;
	margin-bottom: 0;
}

dl { margin: 0 0 1.2em; }
dt { font-weight: 650; color: var(--ink); }
dd { margin: 0 0 0.7em; color: var(--ink-2); }

blockquote,
figure {
	margin: 0 0 1.4em;
}

hr {
	height: 0;
	margin: 2rem 0;
	border: 0;
	border-top: 1px solid var(--line);
}

small {
	font-size: 0.85em;
	color: var(--ink-3);
}

strong,
b {
	font-weight: 650;
	color: var(--ink);
}

em,
i {
	font-style: italic;
}

mark {
	background: var(--brand-soft);
	color: var(--ink);
	padding: 0 0.15em;
	border-radius: 2px;
}

abbr[title] {
	text-decoration: underline dotted;
	text-underline-offset: 3px;
	cursor: help;
}

/* Сноски и степени не должны раздвигать строку. */
sup,
sub {
	font-size: 0.72em;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup { top: -0.5em; }
sub { bottom: -0.25em; }

code,
kbd,
samp {
	font-family: var(--mono);
	font-size: 0.88em;
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 0.1em 0.34em;
}

/* Блок кода переносится, а не скроллится: горизонтальная прокрутка
   разрешена только таблицам в .mr-t-scroll. */
pre {
	margin: 0 0 1.4em;
	padding: 1rem;
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	font-family: var(--mono);
	font-size: 0.85rem;
	line-height: 1.55;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

pre code {
	padding: 0;
	border: 0;
	background: none;
	font-size: inherit;
}

address {
	font-style: normal;
}

/* Заготовка на случай таблицы вне статьи (виджет, служебная страница):
   разметку .mr-t ей никто не проставит. Полные стили — в article.css. */
table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

th {
	text-align: left;
}

::selection {
	background: var(--brand-soft);
	color: var(--ink);
}

/* ---------------------------------------------------------------- Ссылки */

a {
	color: var(--brand);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--line-strong);
	text-underline-offset: 3px;
}

a:hover {
	color: var(--brand-dark);
	text-decoration-color: currentColor;
}

a:active {
	color: var(--brand-dark);
}

/* Служебные ссылки (навигация, карточки, чипы) отменяют подчёркивание у
   себя сами — здесь их не перечисляем, чтобы не плодить зависимостей. */

/* ---------------------------------------------------------------- Кнопки */

button,
input,
select,
textarea,
optgroup {
	font: inherit;
	color: inherit;
	margin: 0;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-align: inherit;
}

.mr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;                 /* 44px — минимальная цель нажатия */
	padding: 0.4rem 1.1rem;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	background: var(--ink);
	color: var(--paper);
	font-size: 0.95rem;
	font-weight: 650;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.mr-btn:hover {
	background: var(--brand-dark);
	color: var(--paper);
}

.mr-btn:active {
	background: var(--brand);
}

.mr-btn--brand {
	background: var(--brand);
}

.mr-btn--brand:hover {
	background: var(--brand-dark);
}

.mr-btn--ghost {
	background: var(--paper);
	color: var(--brand);
	border-color: var(--line);
}

.mr-btn--ghost:hover {
	background: var(--brand-soft-2);
	color: var(--brand-dark);
	border-color: var(--brand);
}

.mr-btn--sm {
	min-height: 2.25rem;
	padding: 0.3rem 0.8rem;
	font-size: 0.85rem;
}

.mr-btn--block {
	display: flex;
	width: 100%;
}

.mr-btn[disabled],
.mr-btn[aria-disabled="true"] {
	opacity: 0.5;
	pointer-events: none;
}

/* ---------------------------------------------------------------- Формы */

fieldset {
	margin: 0 0 1.2rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
}

legend {
	padding: 0 0.4rem;
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--ink-3);
}

label {
	display: inline-block;
}

.mr-field {
	display: grid;
	gap: 0.35rem;
	margin-bottom: 0.9rem;
}

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

.mr-field__hint {
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--ink-3);
}

.mr-input,
.mr-textarea,
.mr-select,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
textarea,
select {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--paper-2);
	color: var(--ink);
	font-size: 0.95rem;
	line-height: 1.4;
	appearance: none;
	-webkit-appearance: none;
}

textarea,
.mr-textarea {
	min-height: 8rem;
	resize: vertical;
	line-height: 1.55;
}

input::placeholder,
textarea::placeholder {
	color: var(--ink-4);
	opacity: 1;
}

input:hover,
textarea:hover,
select:hover {
	border-color: var(--line-strong);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--brand-mid);
	background: var(--paper);
	box-shadow: 0 0 0 3px var(--brand-soft);
}

/* Стрелка селекта нарисована фоном: внешних картинок и шрифтов нет. */
select,
.mr-select {
	padding-right: 2.2rem;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
		linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
	background-position: calc(100% - 1.1rem) 50%, calc(100% - 0.78rem) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

select:focus,
.mr-select:focus {
	background-image:
		linear-gradient(45deg, transparent 50%, var(--brand) 50%),
		linear-gradient(135deg, var(--brand) 50%, transparent 50%);
}

input[type="checkbox"],
input[type="radio"] {
	width: 1.1rem;
	height: 1.1rem;
	min-height: 0;
	padding: 0;
	accent-color: var(--brand);
	appearance: auto;
	-webkit-appearance: auto;
	vertical-align: -2px;
}

input[type="search"] {
	-webkit-appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* Поле в ошибочном состоянии. Красный здесь — про валидацию формы, а не
   про запрет рыбалки, поэтому статусный токен уместен. */
.mr-field--error .mr-input,
.mr-field--error input,
.mr-field--error textarea {
	border-color: var(--st-no);
	background: var(--st-no-soft);
}

.mr-field__error {
	font-size: 0.82rem;
	color: var(--st-no);
}

/* ---------------------------------------------------------------- Фокус */

:focus-visible {
	outline: 2px solid var(--brand-mid);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Мышь не должна получать рамку там, где её ждёт только клавиатура. */
:focus:not(:focus-visible) {
	outline: none;
}

/* Заголовки получают tabindex="-1" в content-filters.php, чтобы после
   перехода по оглавлению фокус уезжал в раздел. Рамку вокруг них не
   рисуем — раздел и так подсвечен прокруткой. */
[tabindex="-1"]:focus {
	outline: none;
}

/* --------------------------------------------------- Доступность и утилиты */

/* Ссылка «Перейти к содержанию»: видима только при фокусе с клавиатуры. */
.mr-skip {
	position: absolute;
	left: 0.75rem;
	top: -4rem;
	z-index: 99;
	padding: 0.65rem 1rem;
	background: var(--ink);
	color: var(--paper);
	border-radius: var(--r-sm);
	font-size: 0.88rem;
	text-decoration: none;
}

.mr-skip:focus {
	top: 0.75rem;
	color: var(--paper);
}

/* Только для скринридера. */
.mr-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Тот же приём, но элемент проявляется при получении фокуса. */
.mr-sr--focusable:focus,
.mr-sr--focusable:focus-within {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

.mr-mono {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
}

/* Цифры в таблицах и карточках должны стоять столбиком. */
.mr-nums {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mr-nowrap { white-space: nowrap; }

.mr-muted { color: var(--ink-3); }

.mr-measure { max-width: var(--measure); }

/* Списки без маркеров — базовая заготовка для навигационных списков. */
.mr-bare {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mr-bare > li {
	margin: 0;
}

@media (max-width: 700px) {
	.mr-hide--m { display: none !important; }
}

@media (min-width: 701px) {
	.mr-hide--d { display: none !important; }
}

/* ---------------------------------------------------------------- Движение */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

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

@media print {
	body {
		font-size: 11pt;
		line-height: 1.4;
		color: var(--ink);
		background: var(--paper);
	}

	a {
		text-decoration: underline;
	}

	.mr-skip {
		display: none;
	}
}