/*
Theme Name: Magnitka
Description: Тема для сайтов о геомагнитной обстановке и атмосферном давлении. Mobile-first, без внешних запросов, без jQuery. Работает в паре с плагином Magnetic Storms Core, но не падает без него.
Version: 1.1.0
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: magnitka
Tags: blog, news, one-column, custom-logo, accessibility-ready
*/

/*
 * Цвета заданы в OKLCH: светлота в нём перцептивно равномерна, поэтому
 * шаги шкалы бурь выглядят одинаково различимыми, а тон не уплывает при
 * смене светлоты, как это происходит в HSL.
 *
 * Контраст не подбирался на глаз: каждая пара измеряется по APCA в наборе
 * tests/checks/contrast-check.php, значения токенов читаются прямо отсюда.
 * Пороги: основной текст Lc 75 (фактически 104 в светлой теме и 93 в
 * тёмной), второстепенный и ссылки Lc 60, крупный вердикт Lc 45,
 * элементы интерфейса Lc 30, разделители Lc 15.
 *
 * Меняя любое значение ниже, прогоните набор заново: тёмная тема сидит
 * ближе к порогам, чем светлая.
 */

:root {
	color-scheme: light dark;

	--msc-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Роль = размер + межстрочный + насыщенность, одно решение вместо трёх. */
	--msc-text-caption: 0.8125rem;
	--msc-text-body: 1.0625rem;
	--msc-text-lead: 1.1875rem;
	--msc-text-heading: 1.3125rem;
	--msc-text-title: 1.625rem;
	--msc-text-display: 2.125rem;

	--msc-measure: 66ch;

	--msc-bg: oklch(0.985 0.002 250);
	--msc-surface: oklch(1 0 0);
	--msc-surface-sunk: oklch(0.968 0.003 250);
	--msc-text: oklch(0.22 0.012 260);
	--msc-text-muted: oklch(0.48 0.014 260);
	--msc-separator: oklch(0.885 0.006 260);
	--msc-accent: oklch(0.5 0.13 255);
	--msc-accent-text: oklch(1 0 0);
	--msc-focus: oklch(0.55 0.18 255);

	/*
	 * Шкала бурь. Тон меняется монотонно от зелёного к фиолетовому,
	 * светлота держится в узком коридоре, чтобы ни одна ступень не
	 * проваливалась и не выпрыгивала. Цвет здесь — вторая подсказка:
	 * рядом всегда есть число и слово.
	 */
	--msc-calm: oklch(0.52 0.13 152);
	--msc-watch: oklch(0.55 0.12 92);
	--msc-g1: oklch(0.58 0.14 74);
	--msc-g2: oklch(0.56 0.16 48);
	--msc-g3: oklch(0.53 0.19 28);
	--msc-g4: oklch(0.48 0.19 10);
	--msc-g5: oklch(0.45 0.17 320);

	--msc-calm-soft: oklch(0.95 0.03 152);
	--msc-watch-soft: oklch(0.95 0.04 92);
	--msc-g1-soft: oklch(0.95 0.04 74);
	--msc-g2-soft: oklch(0.95 0.04 48);
	--msc-g3-soft: oklch(0.95 0.04 28);
	--msc-g4-soft: oklch(0.94 0.04 10);
	--msc-g5-soft: oklch(0.95 0.03 320);

	/*
	 * Граница-тень вместо сплошной рамки: прозрачные слои ложатся на
	 * любую подложку, сплошная рамка — только на ту, под которую подобрана.
	 */
	--msc-shadow-border:
		0 0 0 1px oklch(0 0 0 / 0.06),
		0 1px 2px -1px oklch(0 0 0 / 0.06),
		0 2px 4px 0 oklch(0 0 0 / 0.04);
	--msc-shadow-border-hover:
		0 0 0 1px oklch(0 0 0 / 0.09),
		0 1px 2px -1px oklch(0 0 0 / 0.08),
		0 4px 10px 0 oklch(0 0 0 / 0.06);
	--msc-image-outline: oklch(0 0 0 / 0.1);

	--msc-radius: 14px;
	--msc-radius-inner: 8px;
	--msc-gap: 1rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		--msc-bg: oklch(0.17 0.008 260);
		--msc-surface: oklch(0.215 0.009 260);
		--msc-surface-sunk: oklch(0.19 0.008 260);
		--msc-text: oklch(0.94 0.005 260);
		--msc-text-muted: oklch(0.78 0.012 260);
		--msc-separator: oklch(0.46 0.011 260);
		--msc-accent: oklch(0.78 0.11 250);
		--msc-accent-text: oklch(0.18 0.01 260);
		--msc-focus: oklch(0.82 0.13 250);

		--msc-calm: oklch(0.78 0.15 152);
		--msc-watch: oklch(0.83 0.14 92);
		--msc-g1: oklch(0.81 0.15 74);
		--msc-g2: oklch(0.805 0.15 48);
		--msc-g3: oklch(0.835 0.16 28);
		--msc-g4: oklch(0.835 0.16 10);
		--msc-g5: oklch(0.795 0.14 320);

		--msc-calm-soft: oklch(0.29 0.05 152);
		--msc-watch-soft: oklch(0.29 0.05 92);
		--msc-g1-soft: oklch(0.29 0.05 74);
		--msc-g2-soft: oklch(0.29 0.05 48);
		--msc-g3-soft: oklch(0.29 0.06 28);
		--msc-g4-soft: oklch(0.29 0.06 10);
		--msc-g5-soft: oklch(0.29 0.05 320);

		/* На тёмном фоне многослойная тень не видна — остаётся один контур. */
		--msc-shadow-border: 0 0 0 1px oklch(1 0 0 / 0.08);
		--msc-shadow-border-hover: 0 0 0 1px oklch(1 0 0 / 0.14);
		--msc-image-outline: oklch(1 0 0 / 0.1);
	}
}

/* Ручной выбор темы должен побеждать системную настройку в обе стороны. */
:root[data-theme="dark"] {
	--msc-bg: oklch(0.17 0.008 260);
	--msc-surface: oklch(0.215 0.009 260);
	--msc-surface-sunk: oklch(0.19 0.008 260);
	--msc-text: oklch(0.94 0.005 260);
	--msc-text-muted: oklch(0.78 0.012 260);
	--msc-separator: oklch(0.46 0.011 260);
	--msc-accent: oklch(0.78 0.11 250);
	--msc-accent-text: oklch(0.18 0.01 260);
	--msc-focus: oklch(0.82 0.13 250);
	--msc-calm: oklch(0.78 0.15 152);
	--msc-watch: oklch(0.83 0.14 92);
	--msc-g1: oklch(0.81 0.15 74);
	--msc-g2: oklch(0.805 0.15 48);
	--msc-g3: oklch(0.835 0.16 28);
	--msc-g4: oklch(0.835 0.16 10);
	--msc-g5: oklch(0.795 0.14 320);
	--msc-calm-soft: oklch(0.29 0.05 152);
	--msc-watch-soft: oklch(0.29 0.05 92);
	--msc-g1-soft: oklch(0.29 0.05 74);
	--msc-g2-soft: oklch(0.29 0.05 48);
	--msc-g3-soft: oklch(0.29 0.06 28);
	--msc-g4-soft: oklch(0.29 0.06 10);
	--msc-g5-soft: oklch(0.29 0.05 320);
	--msc-shadow-border: 0 0 0 1px oklch(1 0 0 / 0.08);
	--msc-shadow-border-hover: 0 0 0 1px oklch(1 0 0 / 0.14);
	--msc-image-outline: oklch(1 0 0 / 0.1);
}

:root[data-theme="light"] {
	--msc-bg: oklch(0.985 0.002 250);
	--msc-surface: oklch(1 0 0);
	--msc-surface-sunk: oklch(0.968 0.003 250);
	--msc-text: oklch(0.22 0.012 260);
	--msc-text-muted: oklch(0.48 0.014 260);
	--msc-separator: oklch(0.885 0.006 260);
	--msc-accent: oklch(0.5 0.13 255);
	--msc-accent-text: oklch(1 0 0);
	--msc-focus: oklch(0.55 0.18 255);
	--msc-calm: oklch(0.52 0.13 152);
	--msc-watch: oklch(0.55 0.12 92);
	--msc-g1: oklch(0.58 0.14 74);
	--msc-g2: oklch(0.56 0.16 48);
	--msc-g3: oklch(0.53 0.19 28);
	--msc-g4: oklch(0.48 0.19 10);
	--msc-g5: oklch(0.45 0.17 320);
	--msc-calm-soft: oklch(0.95 0.03 152);
	--msc-watch-soft: oklch(0.95 0.04 92);
	--msc-g1-soft: oklch(0.95 0.04 74);
	--msc-g2-soft: oklch(0.95 0.04 48);
	--msc-g3-soft: oklch(0.95 0.04 28);
	--msc-g4-soft: oklch(0.94 0.04 10);
	--msc-g5-soft: oklch(0.95 0.03 320);
	--msc-shadow-border:
		0 0 0 1px oklch(0 0 0 / 0.06),
		0 1px 2px -1px oklch(0 0 0 / 0.06),
		0 2px 4px 0 oklch(0 0 0 / 0.04);
	--msc-image-outline: oklch(0 0 0 / 0.1);
}

/* Читатели старше сорока часто увеличивают шрифт — три ступени. */
:root[data-font="l"] { --msc-text-body: 1.1875rem; --msc-text-lead: 1.3125rem; }
:root[data-font="xl"] { --msc-text-body: 1.3125rem; --msc-text-lead: 1.4375rem; }

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

html {
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	margin: 0;
	background: var(--msc-bg);
	color: var(--msc-text);
	font-family: var(--msc-font);
	font-size: var(--msc-text-body);
	line-height: 1.6;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	/* Контур нейтральный, а не из палитры: тонированный читается как грязь. */
	outline: 1px solid var(--msc-image-outline);
	outline-offset: -1px;
}

svg {
	max-width: 100%;
}

a {
	color: var(--msc-accent);
	text-underline-position: from-font;
	text-decoration-thickness: from-font;
	text-underline-offset: 0.12em;
}

:focus-visible {
	outline: 2px solid var(--msc-focus);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.msc-skip {
	position: absolute;
	inset-inline-start: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--msc-accent);
	color: var(--msc-accent-text);
	border-radius: 0 0 var(--msc-radius) 0;
}

.msc-skip:focus {
	inset-inline-start: 0;
}

:target {
	scroll-margin-top: 5rem;
}

.msc-container {
	width: 100%;
	max-width: 46rem;
	margin-inline: auto;
	padding-inline: 1rem;
}

/* Шапка */

.msc-header {
	background: var(--msc-surface);
	border-bottom: 1px solid var(--msc-separator);
}

.msc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--msc-gap);
	max-width: 46rem;
	margin-inline: auto;
	padding: 0.625rem 1rem;
}

.msc-logo {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	color: inherit;
	text-decoration: none;
	min-height: 44px;
}

.msc-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.msc-logo__title {
	font-weight: 650;
	font-size: 1rem;
	letter-spacing: -0.01em;
}

.msc-logo__city {
	font-size: var(--msc-text-caption);
	color: var(--msc-text-muted);
}

.msc-tools {
	display: flex;
	gap: 0.5rem;
}

.msc-tools button {
	min-width: 44px;
	min-height: 44px;
	display: inline-grid;
	place-items: center;
	border: 0;
	border-radius: var(--msc-radius-inner);
	background: var(--msc-surface-sunk);
	color: var(--msc-text);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
	.msc-tools button {
		transition-property: background-color, scale;
		transition-duration: 150ms;
		transition-timing-function: ease-out;
	}

	.msc-tools button:active {
		scale: 0.96;
	}
}

.msc-nav ul {
	display: flex;
	gap: 0.25rem;
	margin: 0;
	/*
	 * Отступ в конце не даёт последнему пункту упереться в край: полоса
	 * читается как прокручиваемая, а не как обрезанная.
	 */
	padding: 0 1.5rem 0.5rem 0;
	list-style: none;
	overflow-x: auto;
	scroll-padding-inline: 1rem;
	scrollbar-width: none;
}

/* Затухание у края — подсказка, что дальше есть пункты. */
@supports (mask-image: linear-gradient(#000, #000)) {
	.msc-nav ul {
		mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%);
	}
}

.msc-nav ul::-webkit-scrollbar {
	display: none;
}

.msc-nav a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	white-space: nowrap;
	border-radius: var(--msc-radius-inner);
	color: var(--msc-text-muted);
	text-decoration: none;
	font-size: 0.9375rem;
}

.msc-nav .current-menu-item a {
	background: var(--msc-surface-sunk);
	color: var(--msc-text);
	font-weight: 600;
}

/* Первый экран */

.msc-hero {
	margin: var(--msc-gap) 0 1.5rem;
	padding: 1.25rem 1.25rem 1.5rem;
	background: var(--msc-surface);
	border-radius: var(--msc-radius);
	box-shadow: var(--msc-shadow-border);
	/* Место под содержимое зарезервировано: вёрстка не прыгает при обновлении. */
	min-height: 30rem;
	text-align: center;
}

.msc-hero__where {
	margin: 0;
	color: var(--msc-text-muted);
	font-size: var(--msc-text-caption);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.msc-hero__verdict {
	margin: 0.35rem 0 0;
	font-size: var(--msc-text-display);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.msc-hero--calm .msc-hero__verdict { color: var(--msc-calm); }
.msc-hero--g1 .msc-hero__verdict { color: var(--msc-g1); }
.msc-hero--g2 .msc-hero__verdict { color: var(--msc-g2); }
.msc-hero--g3 .msc-hero__verdict { color: var(--msc-g3); }
.msc-hero--g4 .msc-hero__verdict { color: var(--msc-g4); }
.msc-hero--g5 .msc-hero__verdict { color: var(--msc-g5); }

.msc-hero__explain {
	margin: 0.5rem auto 0;
	max-width: 34rem;
	color: var(--msc-text-muted);
	text-wrap: pretty;
}

.msc-hero__gauge {
	margin: 0.5rem auto 0;
	max-width: 20rem;
}

.msc-gauge {
	display: block;
	width: 100%;
	height: auto;
}

.msc-gauge__zone {
	fill: none;
	stroke-width: 15;
	stroke-linecap: butt;
}

.msc-gauge__zone--calm { stroke: var(--msc-calm); }
.msc-gauge__zone--watch { stroke: var(--msc-watch); }
.msc-gauge__zone--g1 { stroke: var(--msc-g1); }
.msc-gauge__zone--g2 { stroke: var(--msc-g2); }
.msc-gauge__zone--g3 { stroke: var(--msc-g3); }
.msc-gauge__zone--g4 { stroke: var(--msc-g4); }

/*
 * Размеры внутри шкалы даны в единицах viewBox шириной 320. На узком
 * экране блок сжимается примерно до 288 пикселей, поэтому 13 единиц
 * превратились бы в 11,7 пикселя — ниже нижней границы читаемости.
 */
.msc-gauge__tick {
	fill: var(--msc-text-muted);
	font-size: 15px;
	font-family: var(--msc-font);
	font-variant-numeric: tabular-nums;
}

.msc-gauge__threshold {
	stroke: var(--msc-text);
	stroke-width: 2.5;
}

.msc-gauge__legend {
	fill: var(--msc-text);
	font-size: 14px;
	font-weight: 600;
	font-family: var(--msc-font);
}

.msc-gauge__needle {
	stroke: var(--msc-text);
	stroke-width: 5;
	stroke-linecap: round;
}

.msc-gauge__pivot {
	fill: var(--msc-text);
}

.msc-gauge__value {
	fill: var(--msc-text);
	font-size: 46px;
	font-weight: 700;
	font-family: var(--msc-font);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.msc-gauge__unit {
	fill: var(--msc-text-muted);
	font-size: 15px;
	font-weight: 600;
	font-family: var(--msc-font);
}

.msc-hero__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	text-align: start;
}

.msc-hero__fact {
	padding: 0.75rem;
	background: var(--msc-surface-sunk);
	/* Вложенный радиус меньше внешнего на величину отступа. */
	border-radius: var(--msc-radius-inner);
}

.msc-hero__fact dt {
	color: var(--msc-text-muted);
	font-size: var(--msc-text-caption);
}

.msc-hero__fact dd {
	margin: 0.15rem 0 0;
}

.msc-hero__figure {
	display: block;
	font-size: var(--msc-text-title);
	font-weight: 700;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

.msc-hero__figure small {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--msc-text-muted);
}

.msc-hero__note {
	display: block;
	margin-top: 0.15rem;
	font-size: var(--msc-text-caption);
	color: var(--msc-text-muted);
	line-height: 1.4;
}

.msc-hero__updated {
	margin: 1rem 0 0;
	color: var(--msc-text-muted);
	font-size: var(--msc-text-caption);
}

/* Компактная карточка на внутренних страницах */

.msc-now {
	margin: var(--msc-gap) 0;
	padding: 1.25rem;
	background: var(--msc-surface);
	border-radius: var(--msc-radius);
	box-shadow: var(--msc-shadow-border);
	border-inline-start: 6px solid var(--msc-calm);
	min-height: 11rem;
}

.msc-now--calm { border-inline-start-color: var(--msc-calm); }
.msc-now--g1 { border-inline-start-color: var(--msc-g1); }
.msc-now--g2 { border-inline-start-color: var(--msc-g2); }
.msc-now--g3 { border-inline-start-color: var(--msc-g3); }
.msc-now--g4 { border-inline-start-color: var(--msc-g4); }
.msc-now--g5 { border-inline-start-color: var(--msc-g5); }

.msc-now__value {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	font-size: 3rem;
	line-height: 1.1;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.msc-now__label {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--msc-text-muted);
}

.msc-now__state {
	margin: 0.25rem 0 0.75rem;
	font-size: var(--msc-text-lead);
	font-weight: 600;
}

.msc-now__place,
.msc-now__pressure {
	margin: 0.25rem 0;
}

.msc-now__updated {
	margin: 0.75rem 0 0;
	color: var(--msc-text-muted);
	font-size: var(--msc-text-caption);
}

/* Прогноз */

.msc-forecast {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	margin: var(--msc-gap) 0;
	padding: 0;
	list-style: none;
}

.msc-forecast__day {
	padding: 0.75rem 0.5rem;
	background: var(--msc-surface);
	border-radius: var(--msc-radius-inner);
	box-shadow: var(--msc-shadow-border);
	border-top: 4px solid var(--msc-calm);
	text-align: center;
	min-height: 6.5rem;
}

.msc-forecast__day--calm { border-top-color: var(--msc-calm); }
.msc-forecast__day--g1 { border-top-color: var(--msc-g1); }
.msc-forecast__day--g2 { border-top-color: var(--msc-g2); }
.msc-forecast__day--g3 { border-top-color: var(--msc-g3); }
.msc-forecast__day--g4 { border-top-color: var(--msc-g4); }
.msc-forecast__day--g5 { border-top-color: var(--msc-g5); }

.msc-forecast__date,
.msc-forecast__kp,
.msc-forecast__label {
	display: block;
}

.msc-forecast__kp {
	font-size: var(--msc-text-heading);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.msc-forecast__label {
	font-size: var(--msc-text-caption);
	color: var(--msc-text-muted);
	line-height: 1.4;
}

/* Таблицы */

.msc-table-wrap {
	overflow-x: auto;
	margin: var(--msc-gap) 0;
	background: var(--msc-surface);
	border-radius: var(--msc-radius);
	box-shadow: var(--msc-shadow-border);
}

.msc-table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.msc-table th,
.msc-table td {
	padding: 0.65rem 0.85rem;
	text-align: start;
	border-bottom: 1px solid var(--msc-separator);
	white-space: nowrap;
}

.msc-table thead th {
	position: sticky;
	top: 0;
	background: var(--msc-surface);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--msc-text-muted);
}

.msc-table tbody tr:last-child td {
	border-bottom: 0;
}

/* Графики */

.msc-chart {
	display: block;
	width: 100%;
	height: auto;
	margin: var(--msc-gap) 0;
}

.msc-chart__grid {
	stroke: var(--msc-separator);
	stroke-width: 1;
}

.msc-chart__threshold {
	stroke: var(--msc-g3);
	stroke-width: 1.5;
	stroke-dasharray: 5 4;
}

.msc-chart__axis {
	fill: var(--msc-text-muted);
	font-size: 11px;
	font-family: var(--msc-font);
	font-variant-numeric: tabular-nums;
}

.msc-chart__bar--calm { fill: var(--msc-calm); }
.msc-chart__bar--g1 { fill: var(--msc-g1); }
.msc-chart__bar--g2 { fill: var(--msc-g2); }
.msc-chart__bar--g3 { fill: var(--msc-g3); }
.msc-chart__bar--g4 { fill: var(--msc-g4); }
.msc-chart__bar--g5 { fill: var(--msc-g5); }

/* Прогнозные столбцы штрихуются: отличие видно и без цвета. */
.msc-chart__bar--forecast {
	opacity: 0.5;
}

.msc-chart__line {
	fill: none;
	stroke: var(--msc-accent);
	stroke-width: 2;
	stroke-linejoin: round;
}

.msc-chart__area {
	fill: var(--msc-accent);
	opacity: 0.12;
}

.msc-chart--strip {
	height: 44px;
	border-radius: var(--msc-radius-inner);
}

/* Ячейка дня в полосе месяца: тонкий зазор, чтобы дни читались отдельно. */
.msc-chart__cell {
	stroke: var(--msc-surface);
	stroke-width: 1;
}

/* Справочная таблица уровней: цветная метка слева от значения Kp. */
.msc-scale td:first-child,
.msc-scale th:first-child {
	border-inline-start: 5px solid transparent;
}

.msc-scale__row--calm td:first-child { border-inline-start-color: var(--msc-calm); }
.msc-scale__row--g1 td:first-child { border-inline-start-color: var(--msc-g1); }
.msc-scale__row--g2 td:first-child { border-inline-start-color: var(--msc-g2); }
.msc-scale__row--g3 td:first-child { border-inline-start-color: var(--msc-g3); }
.msc-scale__row--g4 td:first-child { border-inline-start-color: var(--msc-g4); }
.msc-scale__row--g5 td:first-child { border-inline-start-color: var(--msc-g5); }

/* Календарь */

.msc-calendar__days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.msc-calendar__day a,
.msc-calendar__day span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border-radius: 6px;
	background: var(--msc-surface);
	box-shadow: var(--msc-shadow-border);
	text-decoration: none;
	color: var(--msc-text);
	font-variant-numeric: tabular-nums;
	touch-action: manipulation;
}

.msc-calendar__day--calm a { border-bottom: 4px solid var(--msc-calm); }
.msc-calendar__day--g1 a { border-bottom: 4px solid var(--msc-g1); }
.msc-calendar__day--g2 a { border-bottom: 4px solid var(--msc-g2); }
.msc-calendar__day--g3 a { border-bottom: 4px solid var(--msc-g3); }
.msc-calendar__day--g4 a { border-bottom: 4px solid var(--msc-g4); }
.msc-calendar__day--g5 a { border-bottom: 4px solid var(--msc-g5); }

/* Текст */

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

.msc-content h1 {
	font-size: var(--msc-text-display);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 1rem 0;
	text-wrap: balance;
}

.msc-content h2 {
	font-size: var(--msc-text-heading);
	line-height: 1.25;
	margin: 2.25rem 0 0.75rem;
	text-wrap: balance;
}

.msc-content h3 {
	font-size: var(--msc-text-lead);
	line-height: 1.3;
	margin: 1.75rem 0 0.5rem;
}

.msc-content p {
	text-wrap: pretty;
}

.msc-lead {
	font-size: var(--msc-text-lead);
	font-weight: 500;
}

.msc-facts {
	margin: var(--msc-gap) 0;
	padding: 0.25rem 1rem;
	background: var(--msc-surface);
	border-radius: var(--msc-radius);
	box-shadow: var(--msc-shadow-border);
}

.msc-facts__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: space-between;
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--msc-separator);
}

.msc-facts__row:last-child {
	border-bottom: 0;
}

.msc-facts dt {
	color: var(--msc-text-muted);
}

.msc-facts dd {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.msc-faq dt {
	margin-top: 1.25rem;
	font-weight: 650;
}

.msc-faq dd {
	margin: 0.35rem 0 0;
}

.msc-sources {
	padding-inline-start: 1.25rem;
	color: var(--msc-text-muted);
	font-size: 0.9375rem;
}

.msc-disclaimer,
.msc-updated {
	padding: 0.75rem 1rem;
	border-inline-start: 3px solid var(--msc-separator);
	color: var(--msc-text-muted);
	font-size: 0.9375rem;
}

.msc-notice {
	padding: 1rem;
	background: var(--msc-surface-sunk);
	border-radius: var(--msc-radius);
	color: var(--msc-text-muted);
}

.msc-archive {
	margin: var(--msc-gap) 0;
	padding: 0;
	list-style: none;
}

.msc-archive li {
	border-bottom: 1px solid var(--msc-separator);
}

.msc-archive a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 0;
	text-decoration: none;
}

.msc-archive a:hover {
	text-decoration: underline;
}

/* Контакты */

.msc-contacts {
	display: grid;
	gap: 0.5rem;
	margin: var(--msc-gap) 0;
	padding: 1rem;
	background: var(--msc-surface);
	border-radius: var(--msc-radius);
	box-shadow: var(--msc-shadow-border);
}

.msc-contacts__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
}

.msc-contacts dt {
	min-width: 9rem;
	color: var(--msc-text-muted);
}

.msc-contacts dd {
	margin: 0;
	font-weight: 500;
}

/* Авторы */

.msc-authors {
	display: grid;
	gap: var(--msc-gap);
	margin: var(--msc-gap) 0;
	padding: 0;
	list-style: none;
}

.msc-authors__item {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}

.msc-avatar {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 50%;
}

.msc-authors__item img.msc-avatar {
	object-fit: cover;
}

.msc-authors__name {
	font-weight: 650;
	text-decoration: none;
}

.msc-authors__role,
.msc-authors__exp {
	margin: 0.15rem 0 0;
	color: var(--msc-text-muted);
	font-size: 0.9375rem;
}

/* Комментарии */

.msc-comments {
	margin: 2.5rem 0;
}

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

.msc-comments__list ol {
	margin-inline-start: 1.25rem;
	padding-inline-start: 0.75rem;
	border-inline-start: 2px solid var(--msc-separator);
}

.msc-comment {
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--msc-separator);
}

.msc-comment__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	color: var(--msc-text-muted);
	font-size: 0.875rem;
}

.msc-comment__author {
	font-weight: 600;
	color: var(--msc-text);
}

.msc-comment__text {
	margin: 0.35rem 0 0;
}

.msc-comment-form input,
.msc-comment-form textarea {
	width: 100%;
	padding: 0.65rem 0.75rem;
	/* На мобильном шрифт ввода не меньше 16px, иначе iOS зумит страницу. */
	font-size: 1rem;
	font-family: inherit;
	color: var(--msc-text);
	background: var(--msc-surface);
	border: 1px solid var(--msc-separator);
	border-radius: var(--msc-radius-inner);
}

.msc-comment-form label {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--msc-text-muted);
	font-size: 0.9375rem;
}

.msc-form-note {
	display: block;
	margin-top: 0.25rem;
	color: var(--msc-text-muted);
	font-size: var(--msc-text-caption);
}

/* Поле с ошибкой различимо не только цветом: рядом стоит текст. */
.msc-comment-form input[aria-invalid="true"],
.msc-comment-form textarea[aria-invalid="true"] {
	border-color: var(--msc-g3);
	border-width: 2px;
}

.msc-comment-form .submit {
	min-height: 44px;
	padding-inline: 1.25rem;
	background: var(--msc-accent);
	color: var(--msc-accent-text);
	border: 0;
	border-radius: var(--msc-radius-inner);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	touch-action: manipulation;
}

/* Навигация и подвал */

.msc-post-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: space-between;
	margin: 2.5rem 0;
}

.msc-post-nav a {
	flex: 1 1 45%;
	min-height: 44px;
	display: flex;
	align-items: center;
	padding: 0.65rem 0.85rem;
	background: var(--msc-surface);
	border-radius: var(--msc-radius-inner);
	box-shadow: var(--msc-shadow-border);
	text-decoration: none;
}

.msc-footer {
	margin-top: 3rem;
	padding: 1.75rem 0 2rem;
	background: var(--msc-surface);
	border-top: 1px solid var(--msc-separator);
	color: var(--msc-text-muted);
	font-size: 0.9375rem;
	padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}

.msc-footer__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

/* Планшет и шире */

@media (min-width: 34rem) {
	.msc-hero__verdict {
		font-size: 2.625rem;
	}
}

@media (min-width: 48rem) {
	:root {
		--msc-text-body: 1.125rem;
	}

	.msc-content h1 {
		font-size: 2.5rem;
	}

	.msc-hero {
		padding: 1.75rem 2rem 2rem;
	}

	.msc-forecast {
		grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	}
}

/*
 * Повышенный контраст: разрыв по светлоте расширяется минимум на 0.15
 * относительно обычной темы — по всем ролям, а не только у текста.
 * Иначе цветные метки шкалы остаются такими же, как были, и режим
 * выполняется наполовину.
 */
@media (prefers-contrast: more) {
	:root {
		--msc-text: oklch(0.12 0.01 260);
		--msc-text-muted: oklch(0.3 0.014 260);
		--msc-separator: oklch(0.72 0.01 260);
		--msc-accent: oklch(0.36 0.15 255);
		--msc-focus: oklch(0.36 0.19 255);

		--msc-calm: oklch(0.37 0.13 152);
		--msc-watch: oklch(0.4 0.12 92);
		--msc-g1: oklch(0.42 0.14 74);
		--msc-g2: oklch(0.4 0.16 48);
		--msc-g3: oklch(0.38 0.19 28);
		--msc-g4: oklch(0.33 0.19 10);
		--msc-g5: oklch(0.3 0.17 320);
	}

	/* В тёмной теме разрыв расширяется в другую сторону — к светлому. */
	@media (prefers-color-scheme: dark) {
		:root {
			--msc-text: oklch(1 0 0);
			--msc-text-muted: oklch(0.93 0.012 260);
			--msc-separator: oklch(0.61 0.011 260);
			--msc-accent: oklch(0.93 0.09 250);
			--msc-focus: oklch(0.95 0.11 250);

			--msc-calm: oklch(0.93 0.13 152);
			--msc-watch: oklch(0.95 0.11 92);
			--msc-g1: oklch(0.94 0.12 74);
			--msc-g2: oklch(0.94 0.12 48);
			--msc-g3: oklch(0.95 0.11 28);
			--msc-g4: oklch(0.95 0.1 10);
			--msc-g5: oklch(0.93 0.11 320);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.msc-tools,
	.msc-nav,
	.msc-comments,
	.msc-post-nav {
		display: none;
	}
}