/*
 * Оформление тела статьи — Cryptium.
 *
 * ПОВОД
 * Компоненты cryLead/cryDef/cryNum/cryWarn/cryDoc/cryEnd/cryFaq/cryByline
 * использовались в 2 000+ записей, но ни одного правила для них в теме не было:
 * блоки выводились голым текстом. Из-за этого каждая статья тащила собственный
 * <style> в post_content — 524 штуки по базе. Здесь описаны все компоненты,
 * чтобы inline-стили из записей можно было вычистить.
 *
 * Всё заскоплено на .post-content: правила не должны протекать в карточки
 * листингов, виджеты и служебные шаблоны.
 *
 * Палитра взята из темы: синий #2563EB (ссылки), #0066FF (шапка таблиц),
 * пастельные подложки в духе .text-block, радиус 12px.
 */

.post-content {
	--cry-ink:        #0F172A;
	--cry-text:       #263449;
	--cry-muted:      #64748B;
	--cry-line:       #E2E8F0;
	--cry-accent:     #2563EB;

	--cry-def-bg:     #EEF4FF;
	--cry-def-bd:     #2563EB;
	--cry-num-bg:     #F4F6FA;
	--cry-num-bd:     #64748B;
	--cry-warn-bg:    #FFF4F0;
	--cry-warn-bd:    #E12149;
	--cry-doc-bg:     #FBFAF5;
	--cry-doc-bd:     #B9924A;
	--cry-ok-bg:      #EFFFF9;
	--cry-ok-bd:      #34C891;

	--cry-radius:     12px;
	--cry-gap:        28px;
}

/* ——— Вводка —————————————————————————————————————————————————————————— */

.post-content .cryLead,
.post-content .cm-post__lead {
	font-size: 1.1em;
	line-height: 1.62;
	font-weight: 500;
	color: var(--cry-ink);
	margin: 0 0 var(--cry-gap);
	padding-bottom: 18px;
	border-bottom: 1px solid var(--cry-line);
}

.post-content .cm-post__lead strong {
	font-weight: 500;
}

/* ——— Выносные блоки ——————————————————————————————————————————————————
 * Общая механика: подложка, линейка слева, надстрочная метка через ::before.
 * Метка — часть оформления, а не текста: в записях её нет, дублирования не будет.
 */

.post-content .cryDef,
.post-content .cryNum,
.post-content .cryWarn,
.post-content .cryDoc {
	position: relative;
	margin: var(--cry-gap) 0;
	padding: 20px 24px;
	border-left: 3px solid;
	border-radius: 0 var(--cry-radius) var(--cry-radius) 0;
	color: var(--cry-text);
}

.post-content .cryDef::before,
.post-content .cryNum::before,
.post-content .cryWarn::before,
.post-content .cryDoc::before {
	display: block;
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.post-content .cryDef  > :first-of-type,
.post-content .cryNum  > :first-of-type,
.post-content .cryWarn > :first-of-type,
.post-content .cryDoc  > :first-of-type { margin-top: 0; }

.post-content .cryDef  > :last-child,
.post-content .cryNum  > :last-child,
.post-content .cryWarn > :last-child,
.post-content .cryDoc  > :last-child { margin-bottom: 0; }

.post-content .cryDef {
	background: var(--cry-def-bg);
	border-left-color: var(--cry-def-bd);
}
.post-content .cryDef::before {
	content: "Определение";
	color: var(--cry-def-bd);
}

/* Цифры выравниваем по разрядам: в блоке почти всегда столбец значений. */
.post-content .cryNum {
	background: var(--cry-num-bg);
	border-left-color: var(--cry-num-bd);
	font-variant-numeric: tabular-nums;
}
.post-content .cryNum::before {
	content: "Цифры";
	color: #475569;
}
.post-content .cryNum b,
.post-content .cryNum strong {
	color: var(--cry-ink);
	font-weight: 700;
}

.post-content .cryWarn {
	background: var(--cry-warn-bg);
	border-left-color: var(--cry-warn-bd);
}
.post-content .cryWarn::before {
	content: "Важно";
	color: var(--cry-warn-bd);
}

/* Образец документа: бумага, моноширинный набор, пунктир по краю. */
.post-content .cryDoc {
	background: var(--cry-doc-bg);
	border-left-color: var(--cry-doc-bd);
	border-top: 1px dashed #E4DCC6;
	border-right: 1px dashed #E4DCC6;
	border-bottom: 1px dashed #E4DCC6;
}
.post-content .cryDoc::before {
	content: "Образец";
	color: #8A6D2F;
}
.post-content .cryDoc p + p {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: .92em;
	line-height: 1.7;
}

/* ——— Вердикт ————————————————————————————————————————————————————————— */

.post-content .cryEnd {
	margin: 40px 0 var(--cry-gap);
	padding: 28px 30px;
	background: var(--cry-ink);
	border-radius: var(--cry-radius);
	color: #CBD5E1;
}
.post-content .cryEnd h2 {
	margin: 0 0 14px;
	font-size: 1.22em;
	color: #FFFFFF;
}
.post-content .cryEnd h2::after { display: none; }
.post-content .cryEnd p:last-child { margin-bottom: 0; }
.post-content .cryEnd a {
	color: #93C5FD;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.post-content .cryEnd a:hover { color: #FFFFFF; }

/* ——— Частые вопросы ——————————————————————————————————————————————————
 * Разметка приходит с микроданными schema.org: div[itemprop=mainEntity] > h3 + ответ.
 * Стили вешаем на атрибуты, чтобы не зависеть от классов, которых в разметке нет.
 */

.post-content .cryFaq {
	margin: 40px 0 var(--cry-gap);
	padding: 26px 28px;
	background: #F8FAFC;
	border: 1px solid var(--cry-line);
	border-radius: var(--cry-radius);
}
.post-content .cryFaq > h2 {
	margin: 0 0 6px;
	font-size: 1.3em;
}
/* Два варианта разметки: в статьях — div с микроданными, в новостях — просто
 * пары H3/абзац под общим H2. Разделитель вешаем на H3, он есть в обоих случаях. */
.post-content .cryFaq [itemprop="mainEntity"] {
	padding: 4px 0 2px;
}
.post-content .cryFaq h3 {
	margin: 18px 0 8px;
	padding-top: 18px;
	border-top: 1px solid var(--cry-line);
	font-size: 1.02em;
	font-weight: 700;
	color: var(--cry-ink);
	line-height: 1.45;
}
.post-content .cryFaq h3::after { display: none; }
.post-content .cryFaq p {
	margin: 0 0 10px;
	color: var(--cry-text);
}
.post-content .cryFaq > :last-child { margin-bottom: 0; }

/* Аккордеон: та же рубрика, но на details/summary. */
.post-content details {
	margin: 0 0 8px;
	background: #FFFFFF;
	border: 1px solid var(--cry-line);
	border-radius: 8px;
	overflow: hidden;
}
.post-content details[open] { border-color: #C7D6EE; }
.post-content summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 17px;
	font-size: .95em;
	font-weight: 600;
	color: #1E293B;
	cursor: pointer;
	list-style: none;
	transition: background .15s ease-in-out;
}
.post-content summary::-webkit-details-marker { display: none; }
.post-content summary:hover { background: #F5F8FD; }
/* В разметке внутри summary лежит span с плюсом — он и есть указатель. */
.post-content summary > span:last-child {
	flex-shrink: 0;
	color: var(--cry-accent);
	font-size: 20px;
	font-weight: 300;
	line-height: 1;
}
.post-content details[open] summary > span:last-child { transform: rotate(45deg); }
.post-content details > :not(summary) {
	padding: 0 17px 15px;
	margin: 0;
	color: var(--cry-text);
}

/* ——— Таблицы ——————————————————————————————————————————————————————————
 * Обёртку .cryTableWrap навешивает фильтр темы: таблица на узком экране
 * должна прокручиваться внутри себя, а не растягивать страницу вбок.
 */

.post-content .cryTableWrap {
	margin: var(--cry-gap) 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.post-content .cryTableWrap > table { margin: 0; min-width: 100%; }

.post-content .cryptium-table,
.post-content .idea-tbl,
.post-content .cryTableWrap > table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--cry-line);
	border-radius: var(--cry-radius);
	overflow: hidden;
	font-size: .95em;
	font-variant-numeric: tabular-nums;
}
.post-content .cryptium-table th,
.post-content .idea-tbl th,
.post-content .cryTableWrap > table th {
	padding: 12px 14px;
	background: #0066FF;
	color: #FFFFFF;
	font-weight: 600;
	text-align: left;
	white-space: nowrap;
}
.post-content .cryptium-table td,
.post-content .idea-tbl td,
.post-content .cryTableWrap > table td {
	padding: 11px 14px;
	border-top: 1px solid #EDF1F7;
	vertical-align: top;
}
.post-content .cryptium-table tbody tr:nth-child(even) td,
.post-content .idea-tbl tbody tr:nth-child(even) td,
.post-content .cryTableWrap > table tbody tr:nth-child(even) td {
	background: #FAFBFD;
}
/* Первая колонка почти всегда «показатель» — она несёт смысл строки. */
.post-content .cryptium-table td:first-child,
.post-content .idea-tbl td:first-child {
	font-weight: 600;
	color: var(--cry-ink);
}
.post-content .cryptium-table tr:last-child td,
.post-content .idea-tbl tr:last-child td { border-bottom: none; }

/* ——— Цитата ——————————————————————————————————————————————————————————— */

.post-content blockquote {
	margin: var(--cry-gap) 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--cry-accent);
	color: var(--cry-ink);
	font-size: 1.04em;
	font-style: normal;
}
.post-content blockquote p:last-child { margin-bottom: 0; }
.post-content blockquote cite {
	display: block;
	margin-top: 10px;
	font-size: .85em;
	font-style: normal;
	color: var(--cry-muted);
}

/* ——— Подпись и источники ————————————————————————————————————————————— */

.post-content .cryByline,
.post-content .cm-post__source {
	margin-top: 32px;
	padding-top: 14px;
	border-top: 1px solid var(--cry-line);
	font-size: .86em;
	color: var(--cry-muted);
}
.post-content .cryByline a,
.post-content .cm-post__source a { color: var(--cry-muted); }

/* ——— Изображения ——————————————————————————————————————————————————— */

.post-content figure { margin: var(--cry-gap) 0; }
.post-content figure img { display: block; border-radius: var(--cry-radius); }
.post-content figcaption {
	margin-top: 10px;
	font-size: .84em;
	color: var(--cry-muted);
	text-align: center;
}

/* ——— Списки ——————————————————————————————————————————————————————————— */

.post-content ol,
.post-content ul { margin: 0 0 var(--cry-gap); padding-left: 22px; }
.post-content li { margin-bottom: 8px; line-height: 1.65; }
.post-content li > b:first-child,
.post-content li > strong:first-child { color: var(--cry-ink); }

/* ——— Узкий экран ————————————————————————————————————————————————————— */

@media (max-width: 767px) {
	.post-content { --cry-gap: 22px; }
	.post-content .cryDef,
	.post-content .cryNum,
	.post-content .cryWarn,
	.post-content .cryDoc { padding: 16px 18px; }
	.post-content .cryEnd,
	.post-content .cryFaq { padding: 20px 18px; }
	.post-content .cryptium-table th,
	.post-content .cryptium-table td,
	.post-content .idea-tbl th,
	.post-content .idea-tbl td { padding: 9px 11px; }
}

/* ——— Карточка автора ——————————————————————————————————————————————————
 * Разметка: .cryAuthor > .cryAuthorTop > (.cryAuthorAva + .cryAuthorName/.cryAuthorRole),
 * ниже .cryAuthorBio и .cryAuthorMeta. Встречается в 224 статьях и до сих пор
 * оформлялась блоком <style> внутри каждой записи.
 */

.post-content .cryAuthor {
	margin: 36px 0 0;
	padding: 18px 20px;
	background: #FBFCFE;
	border: 1px solid var(--cry-line);
	border-radius: 14px;
}
.post-content .cryAuthorTop {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 10px;
}
/* Аватар — инициалы на тёмном круге: фотографий у авторов нет. */
.post-content .cryAuthorAva {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--cry-ink);
	color: #7FB3FF;
	font-size: 16px;
	font-weight: 800;
	line-height: 48px;
	text-align: center;
}
.post-content .cryAuthorName { font-size: 16px; font-weight: 800; color: var(--cry-ink); }
.post-content .cryAuthorRole { font-size: 13.5px; color: #5B6B83; }
.post-content .cryAuthorBio  { font-size: 14px; color: #41506A; }
.post-content .cryAuthorBio p:last-child { margin-bottom: 0; }
.post-content .cryAuthorMeta {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #E8EDF5;
	font-size: 12.5px;
	color: #7B8BA3;
}

/* ——— Редкие компоненты ————————————————————————————————————————————————
 * Встречаются в единицах статей, но без правил в теме выглядят голым текстом.
 */

/* Чек-лист: галочка вместо маркера. */
.post-content .cryChecklist {
	margin: var(--cry-gap) 0;
	padding-left: 0;
	list-style: none;
}
.post-content .cryChecklist li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 10px;
}
.post-content .cryChecklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--cry-ok-bd);
	font-weight: 700;
}

/* Отдельный заголовок вопроса вне обёртки cryFaq. */
.post-content .cryFaqQ {
	margin: 22px 0 8px;
	font-size: 1.02em;
	font-weight: 700;
	color: var(--cry-ink);
}

/* Вердикт в лёгком исполнении — там, где тёмный блок был бы перебором. */
.post-content .cryVerdict {
	margin: var(--cry-gap) 0;
	padding: 18px 22px;
	background: var(--cry-ok-bg);
	border-left: 3px solid var(--cry-ok-bd);
	border-radius: 0 var(--cry-radius) var(--cry-radius) 0;
}
.post-content .cryVerdict p:last-child { margin-bottom: 0; }