/* ==========================================================================
   Дневник граней
   ==========================================================================
   Тот же язык, что у остальных страниц: чернильный фон, кремовый текст,
   золото только как акцент, серифные заголовки. Вопросы идут в две колонки —
   восемь пунктов не превращаются в простыню, а весь выпуск виден сразу.
   ========================================================================== */

/*
 * Полоса между меню и обложкой — не наш блок: 32 px даёт обёртка Kadence
 * `.entry-content-wrap`. На этой странице она не нужна — обложка начинается
 * сразу под шапкой сайта.
 */
.page-id-213 .entry-content-wrap { padding-top: 0; }

.mg-diary {
	padding: 0 0 clamp(2rem, 4vw, 3rem);
}

/*
 * Тема ставит `* { box-sizing: inherit }`, а `<details>` обрывает цепочку
 * наследования — и всё, что лежит внутри раскрытого месяца, начинало считать
 * ширину по content-box. Из-за этого значок уезжал за правый край карточки, а
 * поле ответа вылезало на 28 px. Возвращаем секции одну модель.
 */
.mg-diary,
.mg-diary *,
.mg-diary *::before,
.mg-diary *::after {
	box-sizing: border-box;
}

/* ---------- Шапка ---------- */

.mg-diary__head {
	position: relative;
	/* Свой контекст наложения: кадр живёт под текстом шапки. */
	z-index: 0;
	max-width: 62ch;
	margin: 0 auto clamp(1.1rem, 2.2vw, 1.6rem);
	padding: clamp(1.4rem, 2.8vw, 2rem) 0 clamp(1.2rem, 2.4vw, 1.7rem);
	text-align: center;
}

/*
 * Кадр — на самой шапке, а не на секции: так он заканчивается там же,
 * где кончается подзаголовок, и не оставляет ни полосы под меню, ни
 * обрезки посреди абзаца. Ширина — во весь экран, как у .mg-full.
 */
.mg-diary__head::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	z-index: -1;
	background-image:
		linear-gradient(
			180deg,
			rgba(10, 8, 6, .46) 0%,
			rgba(10, 8, 6, .62) 45%,
			rgba(10, 8, 6, .86) 76%,
			var(--mg-ink) 100%
		),
		url("../../uploads/2026/10/diary-bg.webp");
	background-size: cover, cover;
	background-position: center top, center 42%;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* Тема задаёт заголовкам свои отступы (`.entry-content h1`), и они
   перебивают класс: над названием висело 77 px пустоты. */
.mg-diary .mg-diary__title {
	margin: 0;
	font-family: var(--mg-serif);
	font-weight: 400;
	font-size: clamp(2.1rem, 4.4vw, 3.2rem);
	line-height: 1.1;
	color: var(--mg-cream);
}

/* ---------- Зачем это и как это устроено ----------
   Раньше здесь стояли три блока подряд: манифест по центру, три карточки
   механики и отдельная плашка «Восемь граней». По смыслу они повторяли друг
   друга и отодвигали первый вопрос на два экрана. Теперь манифест и механика
   стоят рядом: слева — зачем, справа — как. */

.mg-diary__about {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: clamp(1.8rem, 4vw, 3.4rem);
	align-items: start;
	margin: 0 0 clamp(1.4rem, 2.8vw, 2rem);
	padding-top: clamp(1rem, 2vw, 1.4rem);
	border-top: 1px solid var(--mg-line-gold);
	text-align: left;
}

.mg-diary .mg-diary__about-title {
	margin: 0 0 .8rem;
	font-family: var(--mg-serif);
	font-weight: 400;
	font-size: clamp(1.4rem, 2.4vw, 1.8rem);
	color: var(--mg-cream);
}

.mg-diary__about-lead {
	margin: 0 0 1rem;
	font-size: 1.04rem;
	line-height: 1.7;
	color: #d5cab6;
	text-wrap: pretty;
}

.mg-diary__about-text p {
	margin: 0 0 .85rem;
	font-size: .9rem;
	line-height: 1.72;
	color: var(--mg-muted);
	text-wrap: pretty;
}

/* Замыкающая строка — не абзац, а тихая цитата: золото и сериф. */
.mg-diary__about .mg-diary__about-note {
	margin: 1.3rem 0 0;
	padding-left: 1rem;
	border-left: 1px solid var(--mg-line-gold);
	font-family: var(--mg-serif);
	font-size: 1.08rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--mg-gold-soft);
}

/* Правая колонка: три правила одной плашкой вместо трёх отдельных карточек. */
.mg-diary__about .mg-diary__how {
	list-style: none;
	margin: 0;
	padding: clamp(1.05rem, 2vw, 1.45rem) clamp(1.1rem, 2.2vw, 1.55rem);
	display: grid;
	background: rgba(36, 29, 22, .42);
	border: 1px solid var(--mg-line);
	border-radius: 2px;
}

.mg-diary__about .mg-diary__how-item {
	display: grid;
	grid-template-columns: 1.7rem minmax(0, 1fr);
	column-gap: .8rem;
	row-gap: .25rem;
	padding: 0;
	border-top: 0;
}

.mg-diary__how-item + .mg-diary__how-item {
	margin-top: clamp(.9rem, 1.8vw, 1.2rem);
	padding-top: clamp(.9rem, 1.8vw, 1.2rem);
	border-top: 1px solid var(--mg-line);
}

.mg-diary__about .mg-diary__how-num {
	grid-column: 1;
	grid-row: 1;
	padding-top: .3rem;
	font-family: var(--mg-sans);
	font-size: .62rem;
	letter-spacing: .14em;
	color: var(--mg-gold);
	opacity: .85;
}

.mg-diary__about .mg-diary__how-title {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-family: var(--mg-serif);
	font-weight: 400;
	font-size: 1.1rem;
	line-height: 1.3;
	color: var(--mg-cream);
}

.mg-diary__about .mg-diary__how-text {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	font-size: .82rem;
	line-height: 1.6;
	color: var(--mg-muted);
	text-wrap: pretty;
}

/* ---------- Подзаголовок ---------- */

/* Заменяет плашку «Восемь граней»: тот же смысл, но одной строкой под
   заголовком, а не отдельным блоком перед вопросами. */
.mg-diary__lead {
	max-width: 52ch;
	margin: .75rem auto 0;
	font-size: .95rem;
	line-height: 1.6;
	color: var(--mg-muted);
	text-wrap: pretty;
}

/* ---------- Приглашение / ограничение ---------- */

/*
 * Замок вместо вопросов: описание раздела открыто всем, вопросы — подписке.
 * Оформление повторяет замки «Слушать/Смотреть», чтобы состояние читалось
 * одинаково на всех закрытых разделах.
 */
.mg-diary__locked {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .55rem;
	padding: 2.6rem 1.6rem;
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	background: rgba(255, 255, 255, .012);
	text-align: center;
}

.mg-diary__locked-icon .mg-lock { width: 24px; height: 24px; color: var(--mg-gold); }

.mg-diary__locked-title {
	margin: 0;
	font-family: var(--mg-serif);
	font-size: 1.3rem;
	color: var(--mg-cream);
}

.mg-diary__locked-text {
	max-width: 46ch;
	margin: 0 0 .8rem;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--mg-muted);
}

.mg-diary__gate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .6rem 1rem;
	margin: 0 0 clamp(1.6rem, 3vw, 2.2rem);
	padding: .9rem 1.2rem;
	font-size: .86rem;
	color: var(--mg-muted);
	background: rgba(36, 29, 22, .55);
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	text-align: center;
}

.mg-diary__gate-link {
	color: var(--mg-gold-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mg-diary__gate-link:hover { color: var(--mg-gold); }

.mg-diary__empty {
	margin: 0;
	padding: 1.2rem;
	text-align: center;
	color: var(--mg-muted);
	border: 1px dashed var(--mg-line);
	border-radius: 2px;
}

/* ---------- Выпуск ---------- */

.mg-diary__issue { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }

.mg-diary__issue-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.4rem;
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--mg-line);
}

/* Счётчик ответов справа от месяца — та же строка, что и в архиве. */
.mg-diary__issue-meta {
	font-family: var(--mg-sans);
	font-size: .62rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mg-muted);
	white-space: nowrap;
}

.mg-diary .mg-diary__issue-title {
	margin: 0;
	font-family: var(--mg-serif);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	color: var(--mg-cream);
}


.mg-diary__num { padding-top: .3rem; }
.mg-diary .mg-diary__chev { align-self: center; }
.mg-diary .mg-diary__mark { align-self: center; }

/* ---------- Пояснение под названием грани ---------- */

.mg-diary__titles {
	display: flex;
	flex-direction: column;
	gap: .18rem;
	min-width: 0;
}

.mg-diary__hint {
	font-family: var(--mg-sans);
	font-size: .72rem;
	line-height: 1.4;
	letter-spacing: .01em;
	color: #a8a294;
	text-transform: none;
}

/* ---------- Вопросы ---------- */

.mg-diary .mg-diary__list {
	list-style: none;
	margin: 0;
	/* Без этого тема подставляет свои 36 px и карточки стоят
	   правее названия месяца. */
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.6rem);
	/* Свёрнутая карточка не должна дотягиваться до высоты раскрытой соседки. */
	align-items: start;
}

.mg-diary__q {
	background: linear-gradient(180deg, rgba(36, 29, 22, .6), rgba(26, 21, 16, .6));
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	transition: border-color .2s ease;
}

.mg-diary__q:hover { border-color: rgba(242, 232, 213, .16); }

.mg-diary__q.is-open { border-color: var(--mg-line-gold); }

/* Заголовок — единственное, что видно в свёрнутом виде. */
/* Тема красит кнопки золотом — снимаем принудительно: это строка списка,
   а не действие. */
.mg-diary .mg-diary__q-head {
	display: flex;
	/* Две строки в заголовке: номер держим у первой, стрелку и отметку — по центру. */
	align-items: flex-start;
	gap: .6rem;
	width: 100%;
	padding: clamp(.9rem, 1.8vw, 1.15rem) clamp(1rem, 2vw, 1.4rem);
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit;
	font: inherit;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.mg-diary__q-head:focus-visible {
	outline: 1px solid var(--mg-line-gold);
	outline-offset: -2px;
}

.mg-diary__mark {
	margin-left: auto;
	font-family: var(--mg-sans);
	font-size: .58rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mg-gold-soft);
	opacity: 0;
	transition: opacity .2s ease;
}

.mg-diary__q.is-answered .mg-diary__mark { opacity: .9; }

.mg-diary__chev {
	flex: none;
	width: 12px;
	height: 8px;
	color: var(--mg-muted);
	transition: transform .25s ease, color .2s ease;
}

.mg-diary__q-head:hover .mg-diary__chev { color: var(--mg-gold-soft); }
.mg-diary__q.is-open .mg-diary__chev { transform: rotate(180deg); color: var(--mg-gold); }

/*
 * Раскрытие через grid-rows: 0fr → 1fr. В отличие от max-height, это не
 * требует угадывать высоту и не дёргается, когда поле растянули руками.
 * visibility убирает свёрнутое из обхода по Tab — иначе человек попадал бы
 * в невидимые поля.
 */
.mg-diary__q-body {
	display: grid;
	/* minmax(0, …) обязателен: без него 0fr уважает min-content и свёрнутая
	   карточка оставляет под заголовком полоску пустоты. */
	grid-template-rows: minmax(0, 0fr);
	visibility: hidden;
	transition: grid-template-rows .3s ease, visibility 0s linear .3s;
}

.mg-diary__q.is-open .mg-diary__q-body {
	grid-template-rows: minmax(0, 1fr);
	visibility: visible;
	transition: grid-template-rows .3s ease, visibility 0s;
}

.mg-diary__q-inner {
	overflow: hidden;
	min-height: 0;
	padding: 0 clamp(1rem, 2vw, 1.4rem) clamp(1rem, 2vw, 1.4rem);
}

@media (prefers-reduced-motion: reduce) {
	.mg-diary__q-body,
	.mg-diary__q.is-open .mg-diary__q-body { transition: none; }
	.mg-diary__chev { transition: none; }
	.mg-diary__summary { transition: none; }
}

.mg-diary__num {
	font-family: var(--mg-sans);
	font-size: .62rem;
	letter-spacing: .12em;
	color: var(--mg-gold);
	opacity: .85;
}

.mg-diary__facet {
	margin: 0;
	font-family: var(--mg-serif);
	font-weight: 400;
	font-size: 1.16rem;
	color: var(--mg-cream);
}

.mg-diary__ask {
	margin: .15rem 0 .85rem;
	font-size: .95rem;
	line-height: 1.55;
	color: #d5cab6;
	text-wrap: pretty;
}

.mg-diary__need {
	margin: 0;
	font-size: .78rem;
	line-height: 1.5;
	color: var(--mg-muted);
	opacity: .8;
}

/* ---------- Поле ответа ---------- */

.mg-diary__field {
	display: block;
	width: 100%;
	min-height: 76px;
	padding: .7rem .8rem;
	background: rgba(10, 8, 6, .55);
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	color: var(--mg-cream);
	font-family: inherit;
	font-size: .92rem;
	line-height: 1.6;
	resize: vertical;
	transition: border-color .2s ease;
}

.mg-diary__field::placeholder { color: rgba(138, 129, 117, .8); }

.mg-diary__field:focus {
	outline: none;
	border-color: var(--mg-line-gold);
}

.mg-diary__row {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin-top: .6rem;
}

.mg-diary__mic {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .38rem .7rem;
	background: none;
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	color: var(--mg-muted);
	font-family: var(--mg-sans);
	font-size: .62rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.mg-diary__mic svg { width: 14px; height: 14px; }

.mg-diary__mic:hover {
	color: var(--mg-gold-soft);
	border-color: var(--mg-line-gold);
}

.mg-diary__mic.is-rec {
	color: #e0917e;
	border-color: rgba(217, 122, 102, .6);
	background: rgba(217, 122, 102, .1);
}

.mg-diary__state {
	font-family: var(--mg-sans);
	font-size: .64rem;
	letter-spacing: .08em;
	color: var(--mg-muted);
}

.mg-diary__state.is-ok { color: #9ccf8f; }
.mg-diary__state.is-err { color: #e0917e; }
.mg-diary__state.is-rec { color: #e0917e; }

.mg-diary__audio {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin-top: .7rem;
}

.mg-diary__audio[hidden] { display: none; }

.mg-diary__audio audio {
	flex: 1 1 200px;
	min-width: 0;
	height: 34px;
}

.mg-diary__drop {
	padding: .3rem .6rem;
	background: none;
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	color: var(--mg-muted);
	font-family: var(--mg-sans);
	font-size: .58rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
}

.mg-diary__drop:hover { color: #e0917e; border-color: rgba(217, 122, 102, .5); }

/* ---------- Архив ---------- */

.mg-diary__details {
	margin-bottom: 1rem;
	border-top: 1px solid var(--mg-line);
}

.mg-diary__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .95rem .2rem;
	border-radius: 2px;
	cursor: pointer;
	list-style: none;
	transition: background-color .2s ease;
}

.mg-diary__summary::-webkit-details-marker { display: none; }

.mg-diary__summary-title {
	font-family: var(--mg-serif);
	font-size: 1.2rem;
	color: var(--mg-cream);
}

.mg-diary__summary-meta {
	font-family: var(--mg-sans);
	font-size: .62rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

/*
 * Значок раскрытия: без него строка архива читается как подпись, а не как
 * кнопка. Шеврон тот же, что у карточек, — поворачивается при раскрытии.
 */
.mg-diary__summary-side {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	flex: none;
}

.mg-diary__details .mg-diary__summary-chev {
	flex: none;
	width: 16px;
	height: 10px;
	color: var(--mg-muted);
	transition: transform .25s ease, color .2s ease;
}

.mg-diary__summary:hover { background: rgba(242, 232, 213, .035); }
.mg-diary__summary:hover .mg-diary__summary-chev { color: var(--mg-gold-soft); }

.mg-diary__details[open] .mg-diary__summary-chev {
	transform: rotate(180deg);
	color: var(--mg-gold);
}

.mg-diary__summary:focus-visible {
	outline: 1px solid var(--mg-line-gold);
	outline-offset: -2px;
}

.mg-diary__details[open] .mg-diary__summary { border-bottom: 1px solid var(--mg-line); }
.mg-diary__details[open] .mg-diary__list { margin-top: 1.2rem; }

/* ---------- Узкие экраны ---------- */

@media (max-width: 900px) {
	.mg-diary__about { grid-template-columns: 1fr; gap: 1.6rem; }
	.mg-diary .mg-diary__list { grid-template-columns: 1fr; }
}

/* ---------- Служебное ---------- */

/*
 * Класс скрытого текста живёт в других файлах (street, views), а они на этой
 * странице не подключены — без правила подписи к полям были видны.
 */
.mg-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Кнопки темы задают свои размеры для иконок, поэтому микрофон поднимаем
 * по специфичности — иначе значок схлопывался в точку.
 */
.mg-diary .mg-diary__mic svg {
	display: block;
	width: 14px;
	height: 14px;
	flex: none;
}

.mg-diary .mg-diary__mic {
	padding: .38rem .7rem;
	line-height: 1.2;
}

/* ==========================================================================
   История ответа
   ==========================================================================
   Ответы меняются — и это видно. Под полем стоит тихая ссылка, она открывает
   хронологию версий: дата, время и сам текст.
   ========================================================================== */

.mg-diary__history {
	display: inline-block;
	margin-top: .55rem;
	padding: 0;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--mg-muted);
	font-family: var(--mg-sans);
	font-size: .64rem;
	letter-spacing: .06em;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.mg-diary__history:hover { color: var(--mg-gold-soft); }
.mg-diary__history[hidden] { display: none; }

/* ---------- Окно ---------- */

.mg-diary-hist {
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.mg-diary-hist[hidden] { display: none; }

.mg-diary-hist__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 5, 4, .76);
}

.mg-diary-hist__box {
	position: relative;
	width: min(520px, 100%);
	max-height: 84vh;
	overflow-y: auto;
	padding: clamp(1.2rem, 3vw, 1.8rem);
	background: linear-gradient(180deg, #241d16 0%, #1f1913 100%);
	border: 1px solid var(--mg-line);
	border-radius: 3px;
	box-shadow: 0 40px 120px rgba(0, 0, 0, .6);
}

.mg-diary-hist__close {
	position: absolute;
	top: .7rem;
	right: .7rem;
	width: 32px;
	height: 32px;
	padding: 0;
	line-height: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none !important;
	border: 1px solid var(--mg-line) !important;
	border-radius: 2px;
	color: var(--mg-muted);
	cursor: pointer;
}

.mg-diary-hist__close:hover { color: var(--mg-cream); border-color: var(--mg-line-gold) !important; }

.mg-diary-hist .mg-diary-hist__close svg { display: block; width: 14px; height: 14px; }

.mg-diary-hist__eyebrow {
	margin: 0 0 .3rem;
	font-family: var(--mg-sans);
	font-size: .6rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mg-gold);
}

.mg-diary-hist__title {
	margin: 0 0 1rem;
	font-family: var(--mg-serif);
	font-weight: 400;
	font-size: clamp(1.25rem, 2.2vw, 1.55rem);
	color: var(--mg-cream);
}

.mg-diary-hist__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .5rem;
}

.mg-diary-hist__item {
	padding: .7rem .8rem;
	background: rgba(10, 8, 6, .35);
	border: 1px solid var(--mg-line);
	border-left: 2px solid rgba(138, 129, 117, .35);
	border-radius: 2px;
}

.mg-diary-hist__item.is-now {
	border-left-color: var(--mg-gold);
	background: rgba(212, 162, 78, .06);
}

.mg-diary-hist__date {
	margin: 0 0 .25rem;
	font-family: var(--mg-sans);
	font-size: .6rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

.mg-diary-hist__now {
	margin-left: .4rem;
	color: var(--mg-gold);
}

.mg-diary-hist__text {
	font-size: .88rem;
	line-height: 1.55;
	color: #d5cab6;
	overflow-wrap: anywhere;
}

.mg-diary-hist__blank { color: var(--mg-muted); }

.mg-diary-hist__empty {
	margin: 0;
	font-size: .85rem;
	color: var(--mg-muted);
}