/*
 * Чегать — основа дизайн-системы поверх tokens.css. Подключена и на сайте, и в редакторе (редактор = сайт).
 * Разделы: основа · типографика · сетки и контейнеры · видимость по ширине · утилиты · core-блоки · бейджи · скелетон.
 * Вид блоков темы и частей страницы (шапка, карточки, футер…) — blocks.css.
 *
 * Правила:
 *   - цвета, размеры и отступы — только переменные tokens.css; нового значения нет в токенах — сначала токен;
 *   - отступы между элементами задаёт сетка родителя (gap), у текстовых элементов внутри main — margin: 0;
 *   - брейкпоинты прототипа: 1365 (убирается левая колонка) и 1023 (одна колонка, мобильная шапка).
 *     Пишутся как max-width: 1365.98px / 1023.98px, чтобы на дробной ширине окна не было «дыры» в 1 px.
 */

/* ---------- Основа ---------- */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
html { scroll-padding-top: calc(var(--header-height) + var(--space-2)); -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg-page);
	color: var(--text-primary);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	overflow-wrap: break-word;
}
[hidden] { display: none !important; }
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: .15em; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
::placeholder { color: var(--border-strong); opacity: 1; } /* #64748B: 4,8:1 к белому — плейсхолдер читается */
::selection { background: var(--brand-soft); color: var(--text-primary); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Пресеты палитры WordPress следуют теме: классы has-*-color и has-*-background-color берут переменные токенов,
   иначе цвет, выбранный в редакторе, остался бы светлым в тёмной теме. Список = палитра theme.json. */
body {
	--wp--preset--color--bg-page: var(--bg-page);
	--wp--preset--color--bg-surface: var(--bg-surface);
	--wp--preset--color--bg-raised: var(--bg-raised);
	--wp--preset--color--text-primary: var(--text-primary);
	--wp--preset--color--text-secondary: var(--text-secondary);
	--wp--preset--color--brand-primary: var(--brand-primary);
	--wp--preset--color--brand-soft: var(--brand-soft);
	--wp--preset--color--on-brand: var(--on-brand);
	--wp--preset--color--link: var(--link);
	--wp--preset--color--brand-green: var(--brand-green);
	--wp--preset--color--green-soft: var(--green-soft);
	--wp--preset--color--border: var(--border);
	--wp--preset--color--border-strong: var(--border-strong);
	--wp--preset--color--success: var(--success);
	--wp--preset--color--warning: var(--warning);
	--wp--preset--color--warning-soft: var(--warning-soft);
	--wp--preset--color--danger: var(--danger);
}
/* Зелёный знака — только фон, текст на нём тёмный в обеих темах (DS01, DS07). */
.has-brand-green-background-color { color: var(--on-green); }
.has-brand-primary-background-color { color: var(--on-brand); }

/* ---------- Типографика (DS01: h1 40/48, h2 28/36, h3 22/30, lead 20/30, body 18/27, small 15/22, label 14/20) ---------- */
.chegat-main :where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, figure, blockquote, pre, table) { margin: 0; }
.chegat-main { display: block; outline: none; }
h1, h2, h3, h4 { color: var(--text-primary); text-wrap: balance; }
h1, .chegat-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 700; }
h2, .chegat-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700; }
h3, .chegat-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
h4 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; }
.chegat-lead, .is-style-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.chegat-small, .has-small-font-size { font-size: var(--fs-small); line-height: var(--lh-small); }
.chegat-meta { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); }
.chegat-label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; }
/* Размеры из панели «Типографика» редактора тянут и межстрочный — иначе 40 px шли бы с межстрочным 27. */
.has-h1-font-size { line-height: var(--lh-h1); }
.has-h2-font-size { line-height: var(--lh-h2); }
.has-h3-font-size { line-height: var(--lh-h3); }
.has-lead-font-size { line-height: var(--lh-lead); }
.has-label-font-size { line-height: var(--lh-label); }
.has-micro-font-size { line-height: var(--lh-micro); }
p, li { hyphens: auto; }
strong, b { font-weight: 700; }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: .9em; }
:not(pre) > code { padding: 0 var(--space-1); border-radius: var(--radius-sm); background: var(--bg-raised); }
kbd { display: inline-block; padding: 0 var(--space-2); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--bg-surface); font-size: .85em; line-height: 1.5; }

/* Текст материала: ритм между блоками задаёт сетка, а не поля элементов. */
.chegat-prose { display: grid; gap: var(--space-4); max-width: var(--measure); }
.chegat-prose > :where(h2) { margin-top: var(--space-8); }
.chegat-prose > :where(h3) { margin-top: var(--space-4); }
.chegat-prose > :first-child { margin-top: 0; }
/* Служебные страницы (шаблон page): H1, вступление крупным текстом, затем блоки с отступом. */
.chegat-content { display: flex; flex-direction: column; gap: var(--space-6); }
.chegat-content > h1 + p { margin-top: calc(-1 * var(--space-3)); font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-secondary); max-width: 760px; }
.chegat-content > p + p { margin-top: calc(-1 * var(--space-3)); }
.chegat-prose :where(ul, ol) { padding-left: var(--space-6); display: grid; gap: var(--space-2); }

/* ---------- Сетки и контейнеры (x-* прототипа → chegat-*; ТЗ, раздел 5) ----------
   Сетки страниц (частые задачи, карточки главной, профиль автора…) — у своих блоков в blocks.css. */
.chegat-wrap { box-sizing: border-box; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter-page); }
.chegat-wrap.is-narrow { max-width: var(--container-narrow); } /* P15, P16, P22, P23 */

/* Три колонки: разделы и оглавление 200 · контент · реклама 300. До 1365 — без левой, до 1023 — одна. */
.chegat-grid { display: grid; grid-template-columns: var(--col-left) minmax(0, 1fr) var(--col-right); gap: var(--gutter); align-items: start; }
.chegat-grid.is-main-aside { grid-template-columns: minmax(0, 1fr) var(--col-right); } /* P03, P04, D02 */
.chegat-grid.is-nav-main { grid-template-columns: var(--col-nav) minmax(0, 1fr); }      /* P10: фильтры · каталог */
.chegat-doc { display: grid; grid-template-columns: var(--col-nav) minmax(0, 1fr); gap: 40px; align-items: start; } /* 40 — как в прототипе: меню документов отделено сильнее колонок */
.chegat-g2 { display: grid; grid-template-columns: minmax(0, 1fr) var(--col-right); gap: var(--space-8); align-items: start; }
.chegat-g2e { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.chegat-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.chegat-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.chegat-text { max-width: var(--measure); }
/* Секция страницы: 48 между секциями (DS01, space-12) = по 24 сверху и снизу у соседних секций.
   Секция на подложке — по 48 внутри: у неё свой фон, текст не должен прилипать к его краю. */
.chegat-section { padding: var(--space-6) 0; }
.chegat-section.is-sunken { padding: var(--space-12) 0; background: var(--bg-raised); }
.chegat-section > .chegat-wrap { display: grid; align-content: start; gap: var(--space-6); }
.chegat-sticky { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--space-4)); }

@media (max-width: 1365.98px) {
	.chegat-grid { grid-template-columns: minmax(0, 1fr) var(--col-right); }
	.chegat-grid.is-nav-main { grid-template-columns: var(--col-nav) minmax(0, 1fr); }
	.chegat-doc { grid-template-columns: minmax(0, 1fr); }
	.chegat-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) {
	.chegat-grid, .chegat-grid.is-main-aside, .chegat-grid.is-nav-main, .chegat-g2 { grid-template-columns: minmax(0, 1fr); }
	.chegat-g2e, .chegat-g3, .chegat-g4 { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
	.chegat-sticky { position: static; }
}

/* ---------- Видимость по ширине ----------
   left — левая колонка (до 1365 скрыта, её место занимает свёрнутое оглавление .chegat-toc-inline);
   right — правая колонка (до 1023 скрыта); desk / mob — только компьютер / только телефон.
   Скрытие — с !important (класс компонента вроде .chegat-hicon { display: inline-flex } иначе его перебьёт),
   а показ не задаёт display: элемент остаётся таким, каким его сделал компонент (flex, inline-flex, block). */
.chegat-desk-flex { display: flex; }
@media (min-width: 1366px) {
	.chegat-toc-inline { display: none !important; }
}
@media (max-width: 1365.98px) {
	.chegat-left { display: none !important; }
}
@media (min-width: 1024px) {
	.chegat-mob { display: none !important; }
}
@media (max-width: 1023.98px) {
	.chegat-right, .chegat-desk, .chegat-desk-flex { display: none !important; }
}

/* ---------- Утилиты ---------- */
/* Одна колонка minmax(0, 1fr): широкий ребёнок (лента миниатюр, таблица) прокручивается сам, а не растягивает страницу. */
.chegat-stack-0, .chegat-stack-8, .chegat-stack-16, .chegat-stack-24, .chegat-stack-32 { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.chegat-stack-8 { gap: var(--space-2); }
.chegat-stack-16 { gap: var(--space-4); }
.chegat-stack-24 { gap: var(--space-6); }
.chegat-stack-32 { gap: var(--space-8); }
.chegat-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.chegat-scroll { overflow-x: auto; }
@media (max-width: 1023.98px) {
	/* Полоса чипов или вкладок: на телефоне прокручивается внутри себя до краёв экрана (x-hs). */
	.chegat-hscroll { display: flex; flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter-page)); padding: 0 var(--gutter-page) var(--space-1); scrollbar-width: none; }
	.chegat-hscroll::-webkit-scrollbar { display: none; }
	.chegat-hscroll > * { flex-shrink: 0; }
	.chegat-stack-m { flex-direction: column; align-items: stretch; } /* x-stack: ряд кнопок → столбец */
	.chegat-full-m { width: 100%; }                                       /* x-full */
}

/* ---------- Core-блоки в стиле дизайн-системы (стили выбираются в панели «Стили» → is-style-*) ---------- */

/* Кнопки (DS02, P11): основная 48 — главное действие страницы; вторичная 44 — остальные; подпись в одну строку.
   Основная продублирована в theme.json → styles.elements.button: в редакторе глобальные стили WordPress подключаются
   ПОСЛЕ стилей темы и с той же специфичностью перебили бы её стандартной серой кнопкой (#32373c). */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.wp-block-button__link, .chegat-btn {
	box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	min-height: var(--button-primary); padding: 0 var(--space-6); border: 1px solid transparent; border-radius: var(--radius-sm);
	background: var(--brand-primary); color: var(--on-brand);
	font-family: inherit; font-size: var(--fs-button); line-height: 1.5; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer;
}
.wp-block-button__link:hover, .chegat-btn:hover { background: var(--brand-hover); color: var(--on-brand); }
.wp-block-button__link:active, .chegat-btn:active { background: var(--brand-pressed); }
.wp-block-button.is-style-secondary .wp-block-button__link, .chegat-btn.is-secondary {
	min-height: var(--button-default); padding: 0 var(--space-4); background: var(--bg-surface); color: var(--text-primary);
	border-color: var(--border-strong); font-size: var(--fs-small); /* 15 — по рабочему экрану P11 (в справочнике DS02 16) */
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover, .chegat-btn.is-secondary:hover { background: var(--bg-raised); border-color: var(--text-primary); color: var(--text-primary); }
.wp-block-button.is-style-secondary .wp-block-button__link:active, .chegat-btn.is-secondary:active { background: var(--border); }
/* Внешний переход: как основная, со стрелкой «откроется другой сайт». */
.wp-block-button.is-style-external .wp-block-button__link::after, .chegat-btn.is-external::after { content: "↗"; font-weight: 400; }
/* Текстовая ссылка-действие: 44 по высоте ради зоны нажатия, без фона. */
.wp-block-button.is-style-text .wp-block-button__link, .chegat-btn.is-text {
	min-height: var(--touch-min); padding: 0; background: none; border: 0; color: var(--link); font-weight: 400; text-decoration: underline;
}
.wp-block-button.is-style-text .wp-block-button__link:hover, .chegat-btn.is-text:hover { background: none; color: var(--link-hover); }
/* Недоступная (D01: «Ссылка через 6 с»): серая подложка, не прозрачность — текст остаётся читаемым (7:1).
   Причина всегда пишется текстом рядом. */
.chegat-btn[disabled], .chegat-btn[aria-disabled="true"], .chegat-btn[disabled]:hover { background: var(--border); color: var(--text-secondary); border-color: transparent; cursor: not-allowed; }
/* Узкий телефон: длинная надпись («Подробнее о Malwarebytes Free») переносится, а не торчит из карточки за край. */
@media (max-width: 479.98px) {
	.wp-block-button__link, .chegat-btn { max-width: 100%; padding-block: var(--space-2); white-space: normal; text-align: center; }
}
@media (max-width: 1023.98px) {
	.wp-block-buttons.is-style-stack-mobile { flex-direction: column; align-items: stretch; }
}

/* Списки */
.wp-block-list.is-style-facts { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.wp-block-list.is-style-facts li { position: relative; padding-left: 28px; }
.wp-block-list.is-style-facts li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 14px; height: 8px; border: solid var(--success); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.wp-block-list.is-style-steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.wp-block-list.is-style-steps > li { counter-increment: step; position: relative; padding-left: 48px; min-height: 32px; }
.wp-block-list.is-style-steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-primary); color: var(--on-brand); font-size: var(--fs-small); font-weight: 700; }

/* Группы: карточка (радиус 10, рамка) и «Коротко» (зелёная подложка — ответ в двух строках перед текстом). */
.wp-block-group.is-style-card { display: grid; gap: var(--space-3); padding: var(--space-6); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.wp-block-group.is-style-short { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-6); background: var(--green-soft); border-radius: var(--radius-md); color: var(--text-primary); }
@media (max-width: 1023.98px) {
	.wp-block-group.is-style-card { padding: var(--space-4); }
	.wp-block-group.is-style-short { padding: var(--space-4); }
}

/* Цитата */
.wp-block-quote { margin: 0; padding: var(--space-2) 0 var(--space-2) var(--space-6); border-left: 4px solid var(--brand-primary); display: grid; gap: var(--space-2); }
.wp-block-quote cite { font-size: var(--fs-small); color: var(--text-secondary); font-style: normal; }

/* Код: кнопку «Копировать» добавит site.js (этап 4). */
.wp-block-code { margin: 0; padding: var(--space-4); overflow-x: auto; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-small); line-height: var(--lh-small); }
.wp-block-code code { font-size: inherit; }

/* Таблица. Стиль «Карточками на телефоне»: до 600 px строка — карточка, подпись колонки перед значением
   (data-label ставит render_block в inc/blocks.php; Техдокументация, раздел 06). */
.wp-block-table { margin: 0; overflow-x: auto; }
/* Карточка таблицы как в P05, P08: рамка и скругление у таблицы, линии только между строками. Селекторы сильнее
   стилей core/table (у них рамка 1px вокруг каждой ячейки и 3px под шапкой). */
.wp-block-table table { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-md); border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--bg-surface); font-size: var(--fs-small); line-height: var(--lh-small); }
.wp-block-table th, .wp-block-table td { padding: var(--space-3) var(--space-4); border: 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.wp-block-table tr:last-child > td { border-bottom: 0; }
.wp-block-table thead, .wp-block-table tfoot { border: 0; }
.wp-block-table thead th { background: var(--bg-raised); font-weight: 600; }
.wp-block-table figcaption { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--text-secondary); }
@media (max-width: 599.98px) {
	.wp-block-table.is-style-cards table, .wp-block-table.is-style-cards tbody { display: block; }
	.wp-block-table.is-style-cards thead { display: none; }
	.wp-block-table.is-style-cards tr { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); padding: var(--space-3); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
	.wp-block-table.is-style-cards td { display: block; padding: 0; border: 0; }
	.wp-block-table.is-style-cards td[data-label]::before { content: attr(data-label) ": "; color: var(--text-secondary); }
}

/* Изображение и подпись */
.wp-block-image { margin: 0; }
.wp-block-image img { border-radius: var(--radius-md); }
.wp-block-image figcaption, .wp-element-caption { margin-top: var(--space-2); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); text-align: left; }

/* Вопросы и ответы (core/details; FAQPage собирает плагин из группы .chegat-faq). */
/* Аккордеон P05, P17: каждый вопрос — карточка со значком «+ / −». */
.wp-block-details { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface); }
.wp-block-details + .wp-block-details { margin-top: var(--space-2); }
.wp-block-details summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--touch-min); padding: var(--space-2) var(--space-4); font-weight: 600; cursor: pointer; list-style: none; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; flex: none; font-size: 20px; font-weight: 400; color: var(--text-secondary); }
.wp-block-details[open] summary::after { content: "−"; }
.wp-block-details > :not(summary) { padding: 0 var(--space-4) var(--space-3); }
.chegat-faq { display: flex; flex-direction: column; gap: var(--space-2); }
.chegat-faq > .wp-block-details + .wp-block-details { margin-top: 0; }

/* Разделитель */
.wp-block-separator, .wp-block-separator:not(.is-style-wide):not(.is-style-dots) { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--border); } /* у WordPress по умолчанию 100 px */

/* ---------- Бейджи программ (badges.js прототипа: подпись + значок, цвет — не единственный признак) ---------- */
.chegat-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border: 1px solid; border-radius: var(--radius-sm); font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: 600; white-space: nowrap; }
.chegat-badge.is-top100, .chegat-badge.is-best { background: var(--badge-gold-bg); color: var(--badge-gold-fg); border-color: var(--badge-gold-bd); }
.chegat-badge.is-top50 { background: var(--badge-users-bg); color: var(--badge-users-fg); border-color: var(--badge-users-bd); }
.chegat-badge.is-top10 { background: var(--badge-high-bg); color: var(--badge-high-fg); border-color: var(--badge-high-bd); }
.chegat-badge.is-editor { background: var(--badge-editor-bg); color: var(--badge-editor-fg); border-color: var(--badge-editor-bd); }
.chegat-badge.is-dev { background: var(--badge-dev-bg); color: var(--badge-dev-fg); border-color: var(--badge-dev-bd); }

/* ---------- Скелетон: размеры как у настоящего содержимого (без сдвига вёрстки); контейнеру — aria-busy ---------- */
.chegat-skeleton { display: block; border-radius: var(--radius-sm); background: var(--skeleton); }
@media (prefers-reduced-motion: no-preference) {
	.chegat-skeleton { animation: chegat-pulse 1.4s ease-in-out infinite; }
}
@keyframes chegat-pulse { 50% { opacity: .55; } }