/* Компоненты единого стиля: кнопки, карточки, чипсы, поля, таблицы,
 * плашки уровней, факты, шаги, тарифы, уведомления, карточки методик.
 *
 * Файл подключается раньше style.css и shop.css: правила темы, написанные
 * для конкретных мест (карточка статьи без внутренних полей, кнопка
 * в шапке), должны перебивать общий вид компонента, а не наоборот.
 * Значения — только из tokens.css. Образцы всех компонентов — страница
 * /stil (page-stil.php), правила — docs/Единый стиль.md. */

/* ——— Подписи ——————————————————————————————————————————————————————— */

/* Технические подписи: адрес площадки, раздел, единицы измерения */
.pedpsy-mono {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: .05em;
	color: var(--muted);
}

/* Надзаголовок раздела: зелёным, прописными — «о чём это» до заголовка */
.pedpsy-eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: .05em;
	color: var(--ok);
	text-transform: uppercase;
	margin-bottom: 10px;
}

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

/* Кнопка, поставленная в редакторе блоком WordPress, по умолчанию круглая
   и тёмно-серая — на странице она смотрится деталью с чужого сайта.
   Приводим её к тому же виду, что и кнопки шаблона. */
.pedpsy-btn,
.pedpsy-btn-ghost,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 12px 22px;
	border-radius: var(--radius-sm);
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: opacity .15s ease, border-color .15s ease;
}

.pedpsy-btn,
.wp-block-button__link { background: var(--primary); color: var(--primary-ink); }
.pedpsy-btn:hover,
.wp-block-button__link:hover { opacity: .9; }

.pedpsy-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.pedpsy-btn-ghost:hover { border-color: var(--muted); }

.pedpsy-btn-small { padding: 8px 14px; font-size: var(--fs-ui); }
.pedpsy-btn--block { display: flex; width: 100%; }

/* Недоступное действие: видно, что кнопка есть, но нажать её нельзя.
   Не прячем — человек должен понять, что покупка откроется позже. */
.pedpsy-btn[aria-disabled="true"],
.pedpsy-btn:disabled,
.pedpsy-btn-ghost[aria-disabled="true"],
.pedpsy-btn-ghost:disabled {
	opacity: .5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Кнопка, пока товар кладётся в корзину без перезагрузки */
.is-loading { opacity: .6; pointer-events: none; }

/* Ряд кнопок первого экрана и форм */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ——— Карточка и раздел ——————————————————————————————————————————— */

.pedpsy-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: var(--space-5);
}

.pedpsy-section { margin-block: var(--space-8); }
.pedpsy-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.pedpsy-section-head h2 { margin: 0; font-size: 22px; }
.pedpsy-section-head a { font-size: 13.5px; color: var(--muted); }
.pedpsy-section-head a:hover { color: var(--primary); }
.pedpsy-section-lead { color: var(--muted); max-width: 64ch; margin: -8px 0 18px; }

/* ——— Чипсы ———————————————————————————————————————————————————————

   Быстрые запросы, разделы, фильтры. Ряд прокручивается вбок на телефоне,
   а не переносится в пять строк, отталкивая выдачу вниз. */

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--surface);
	color: var(--ink);
	font-size: 13.5px;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .15s ease;
}
.chip:hover { border-color: var(--muted); }
.chip[aria-current="true"],
.chip[aria-current="page"],
.chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.chip small { font-family: var(--font-mono); font-size: var(--fs-mono); opacity: .75; }

@media (max-width: 640px) {
	.chips--scroll {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-inline: calc(var(--gutter) * -1);
		padding: 2px var(--gutter) 6px;
		scrollbar-width: none;
	}
	.chips--scroll::-webkit-scrollbar { display: none; }
}

/* ——— Метки статуса: «скоро», «первыми», «доступно» ——————————————— */

.badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 9px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--line);
	background: var(--surface-2);
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
}
.badge--ready { background: var(--ok-soft); border-color: transparent; color: var(--level-ok-ink); }
/* «Первыми» — подсказка, а не реклама: той же охрой, что «чаще выбирают» */
.badge--pilot { background: var(--accent); border-color: transparent; color: var(--accent-ink); }

/* ——— Полоса фактов ——————————————————————————————————————————————

   Сетка из зазоров в цвет рамки рисует разделители без лишней разметки. */

.facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	margin-block: 34px;
}
@media (max-width: 700px) { .facts { grid-template-columns: 1fr; } }

.facts--flush { margin-block: 0; }

.fact { background: var(--surface); padding: var(--space-5) 22px; display: flex; flex-direction: column; gap: 6px; }
.fact b { font-family: var(--font-head); font-size: var(--fs-body); }
.fact span { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }

/* ——— Шаги «как это работает» ————————————————————————————————————

   Номер — моноширинным в кружке: порядок читается сразу, а сами шаги
   остаются короткими строками, без картинок. */

.steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

.step {
	counter-increment: step;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--space-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.step::before {
	content: counter(step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-bottom: 6px;
	border-radius: 50%;
	background: var(--primary);
	color: var(--primary-ink);
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	font-weight: 500;
}
.step b { font-family: var(--font-head); font-size: var(--fs-body); line-height: 1.35; }
.step span { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }

/* ——— Поля ввода ——————————————————————————————————————————————————

   Одинаковые для оформления заказа, ввода класса в расчётчике и форм
   кабинета. Подпись — над полем, подсказка — под ним и видна всегда:
   всплывающая подсказка наезжает на соседнее поле. */

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--space-4); min-width: 0; }
.field-label { font-size: var(--fs-sm); color: var(--muted); }
.field-label b { color: var(--danger); font-weight: 500; }
.field-hint { font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; margin: 0; }
.field-error { font-size: var(--fs-xs); color: var(--danger); line-height: 1.45; margin: 0; }

.pedpsy-input,
.pedpsy-select,
.pedpsy-textarea {
	width: 100%;
	min-height: 42px;
	padding: 10px 13px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--ink);
	font: var(--fs-body)/1.4 var(--font-body);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.pedpsy-textarea { min-height: 96px; resize: vertical; }
.pedpsy-select {
	padding-right: 34px;
	-webkit-appearance: none;
	appearance: none;
	background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235C6470' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center / 11px;
	cursor: pointer;
}
.pedpsy-input::placeholder,
.pedpsy-textarea::placeholder { color: var(--muted); opacity: 1; }
.pedpsy-input:focus-visible,
.pedpsy-select:focus-visible,
.pedpsy-textarea:focus-visible {
	outline: none;
	border-color: var(--primary);
	box-shadow: var(--focus-ring);
}
.pedpsy-input[aria-invalid="true"] { border-color: var(--danger); }

/* Поля в строку: класс, дата, психолог; на телефоне — столбиком */
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 var(--space-4); }

/* ——— Таблицы ————————————————————————————————————————————————————

   Таблица интерфейса: список класса, результаты, заказы. Широкая таблица
   прокручивается внутри обёртки, а не растягивает страницу. */

.table-scroll {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	-webkit-overflow-scrolling: touch;
}
.pedpsy-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-ui);
	font-variant-numeric: tabular-nums;
}
.pedpsy-table caption {
	caption-side: top;
	text-align: left;
	padding: 12px 14px 0;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-body);
}
.pedpsy-table th,
.pedpsy-table td {
	padding: 9px 14px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: middle;
}
.pedpsy-table thead th {
	font-family: var(--font-head);
	font-size: var(--fs-mono);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--muted);
	white-space: nowrap;
	border-bottom-width: 1.5px;
}
.pedpsy-table tbody tr:last-child > * { border-bottom: 0; }
.pedpsy-table tbody tr:hover > * { background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
.pedpsy-table .num { text-align: right; white-space: nowrap; }
.pedpsy-table tfoot td,
.pedpsy-table tfoot th { font-weight: 600; border-top: 1.5px solid var(--line); border-bottom: 0; }
/* Первый столбец (номер и имя) остаётся на месте при прокрутке вбок */
.pedpsy-table .is-sticky { position: sticky; left: 0; background: var(--surface); z-index: 1; }

/* Таблица ответов в расчётчике: клетки-поля, одна цифра или буква.
   Строка и столбец текущей клетки подсвечиваются — при вводе с клавиатуры
   глаз не теряет, в каком ребёнке и каком вопросе он находится. */
.answer-table { border-collapse: separate; border-spacing: 0; font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }
.answer-table th,
.answer-table td { padding: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.answer-table thead th {
	padding: 6px 4px;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	font-weight: 400;
	color: var(--muted);
	background: var(--surface-2);
	min-width: 34px;
}
.answer-table th[scope="row"] {
	padding: 0 12px;
	text-align: left;
	font-weight: 500;
	white-space: nowrap;
	background: var(--surface);
	position: sticky;
	left: 0;
	z-index: 1;
}
.answer-table input {
	width: 34px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	font: 500 var(--fs-ui)/1 var(--font-mono);
	text-align: center;
}
.answer-table input:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; background: var(--surface); }
/* Пояснение под подписью пункта в шапке («Лесенка»: «1 — верхняя ступенька») */
.answer-table thead .answer-hint { display: block; margin-top: 2px; font-family: var(--font-body); font-size: var(--fs-xs); white-space: nowrap; color: var(--muted); }
.answer-table tr:focus-within > th[scope="row"],
.answer-table td:focus-within { background: var(--info-soft); }
/* Столбец текущей клетки: номер вопроса и клетки столбца (класс ставит скрипт
   расчётчика), вся строка — чуть светлее самой клетки */
.answer-table thead th.is-col { background: var(--info-soft); color: var(--ink); font-weight: 500; }
.answer-table td.is-col,
.answer-table tr:focus-within > td { background: color-mix(in srgb, var(--info-soft) 55%, var(--surface)); }
.answer-table tr:focus-within > td:focus-within { background: var(--info-soft); }
.answer-table .is-empty input { background: var(--warn-soft); }
/* Длинный бланк: черта после каждого пятого пункта — ориентир при вводе */
.answer-table .is-grp-end { border-right: 2px solid var(--muted); }
/* Шапка с номерами вопросов остаётся на месте при прокрутке длинного класса
   (у обёртки .table-scroll тогда задана высота); угловая клетка — поверх всех */
.answer-table thead th { position: sticky; top: 0; z-index: 2; }
.answer-table thead th:first-child { left: 0; z-index: 3; }
/* Каждая клетка обязательна: пустая — охрой (.is-empty), после попытки
   расчёта с пропусками (.is-checked на таблице) — тоном ошибки */
.answer-table.is-checked .is-empty input { background: var(--danger-soft); }
/* Поля участника (Прихожан: нормы по возрасту и полу) — «Возраст» и «Пол»
   после имени: клетка шире ответа; возраст вне методики — тоном ошибки
   (.is-bad, подсказка — в title клетки), пустая — охрой, как ответ */
.answer-table .answer-field input { width: 40px; }
.answer-table thead th.answer-field { padding: 6px 6px; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .05em; }
.answer-table .is-bad input { background: var(--danger-soft); color: var(--danger); font-weight: 600; }
/* Пол подставлен по имени неуверенно (.is-guess) — охрой с рамкой, пока
   специалист не подтвердит его вводом М или Д */
.answer-table .is-guess input { background: var(--warn-soft); color: var(--warn); font-weight: 600; box-shadow: inset 0 0 0 2px var(--warn); }
.answer-name { display: block; }
/* Хвост строки, закреплён справа: счётчик «41/58» и кнопка «−» — «нет» во все
   пустые клетки строки. Виден при любой прокрутке вбок, как столбец имён слева */
.answer-table .answer-tail {
	position: sticky;
	right: 0;
	z-index: 1;
	padding: 0 6px 0 10px;
	background: var(--surface);
	border-left: 1px solid var(--line);
	white-space: nowrap;
	text-align: right;
}
.answer-table thead th.answer-tail { z-index: 3; background: var(--surface-2); font-family: var(--font-head); text-transform: uppercase; letter-spacing: .05em; }
.answer-count { display: inline-block; min-width: 5ch; font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--muted); }
.is-incomplete .answer-count { color: var(--level-watch-ink); font-weight: 600; }
.answer-row-no {
	width: 26px;
	height: 26px;
	margin-left: 6px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-xs);
	background: var(--surface);
	color: var(--ink);
	font: 600 var(--fs-ui)/1 var(--font-mono);
	cursor: pointer;
	vertical-align: middle;
}
.answer-row-no:hover:not(:disabled) { border-color: var(--muted); background: var(--surface-2); }
.answer-row-no:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.answer-row-no:disabled { opacity: .35; cursor: default; }
/* Телефон: длинное имя — многоточием (полностью — в подсказке), хвост строки
   не закреплён — иначе два закреплённых столбца не оставляют места клеткам */
@media (max-width: 600px) {
	.answer-name { max-width: 8.5em; overflow: hidden; text-overflow: ellipsis; }
	.answer-table .answer-tail { position: static; }
	.answer-table thead th.answer-tail { position: sticky; right: auto; }
}

/* ——— Вкладки экрана и колонка вкладок ————————————————————————————

   Вкладки расчётчика (cabinet/src/common/tabs.js), как в Социометрии:
   строка вкладок .tabbar над содержимым; ушла за верх экрана — слева
   плавающая колонка иконок .tab-rail (подпись .rail-tip — при наведении
   и фокусе). На узком экране колонка — строка внизу экрана с короткими
   подписями .rail-short. .rail-lens — действие текущей вкладки
   («Таблица ответов на весь экран»), охрой, над вкладками. */

.tabbar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.tabbtn {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 9px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--ink);
	font: 600 var(--fs-ui)/1.3 var(--font-head);
	cursor: pointer;
	transition: border-color .15s ease;
}
.tabbtn:hover:not(.is-active) { border-color: var(--muted); }
.tabbtn.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.tabbtn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tabbtn-count { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 400; letter-spacing: .03em; opacity: .85; }

.tab-rail {
	position: fixed;
	left: 12px;
	top: 50%;
	z-index: 45;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 6px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	transform: translate(-8px, -50%);
	visibility: hidden;
	opacity: 0;
	transition: opacity .18s, transform .18s, visibility 0s .18s;
}
.tab-rail.shown { visibility: visible; opacity: 1; transform: translate(0, -50%); transition: opacity .18s, transform .18s; }
.tab-rail button {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--ink);
	font-family: var(--font-head);
	cursor: pointer;
}
.tab-rail button:hover:not(.is-active) { background: var(--surface-2); border-color: var(--line); }
.tab-rail button.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.tab-rail button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tab-rail svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tab-rail .rail-tip {
	position: absolute;
	left: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%);
	padding: 5px 9px;
	border-radius: var(--radius-sm);
	background: var(--ink);
	color: var(--surface);
	font-size: var(--fs-xs);
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .12s;
}
.tab-rail button:hover .rail-tip,
.tab-rail button:focus-visible .rail-tip { opacity: 1; }
.tab-rail .rail-short { display: none; }
.tab-rail [hidden] { display: none !important; }
.tab-rail .rail-lens { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tab-rail .rail-lens:hover:not(.is-active) { background: var(--accent); border-color: var(--accent-ink); }
.tab-rail .rail-sep { display: block; height: 1px; margin: 0 4px; background: var(--line); }
@media (max-width: 820px) {
	.tab-rail {
		left: 0;
		right: 0;
		top: auto;
		bottom: 0;
		flex-direction: row;
		justify-content: space-around;
		gap: 2px;
		padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
		border-width: 1px 0 0;
		border-radius: 0;
		transform: translateY(8px);
	}
	.tab-rail.shown { transform: none; }
	.tab-rail button { flex: 1 1 0; width: auto; height: auto; min-width: 0; padding: 5px 2px; gap: 2px; grid-auto-flow: row; }
	.tab-rail .rail-tip { display: none; }
	.tab-rail .rail-sep { width: 1px; height: auto; margin: 4px 0; }
	.tab-rail .rail-short { display: block; font-size: var(--fs-mono); font-weight: 600; line-height: 1.2; }
}
@media print { .tab-rail, .tabbar { display: none !important; } }

/* ——— Список класса ——————————————————————————————————————————————

   Ввод списка в расчётчиках (cabinet/src/common/roster.js), как в Социометрии:
   одно поле и «Добавить», под ними — итог разбора и отложенные записи
   (уведомления), ниже — пронумерованный список. Номер — место ученика
   в таблице ответов и протоколе, код (Уч-01) — обезличенная подпись,
   карандаш (или двойной щелчок по имени) — исправить имя на месте,
   крестик — удалить. */

.roster-field { margin-bottom: 0; }
.roster-field .btn-row { margin-top: var(--space-1); }
.roster-result:not(:empty),
.roster-warn:not(:empty) { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
/* Отложенная запись: что похоже на что и два действия рядом */
.roster-twin { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding-top: var(--space-2); border-top: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.roster-twin > span { flex: 1 1 240px; min-width: 0; }

/* Порядок списка: по алфавиту или в порядке внесения — над списком */
.roster-order { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-4) 0 var(--space-2); }
.roster-order .field-label { margin: 0; }
.roster-order .pedpsy-select { width: auto; max-width: 100%; }
.roster-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 6px var(--space-3);
	margin: var(--space-4) 0 var(--space-2);
	padding: 0;
	list-style: none;
}
.roster-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
	min-height: 36px;
	padding: 2px 2px 2px 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface);
	font-size: var(--fs-ui);
}
.roster-item-no { flex: none; min-width: 2.2ch; text-align: right; font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--muted); }
.roster-item-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-item-code { flex: none; font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--muted); }
.roster-remove {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-xs);
	background: transparent;
	color: var(--muted);
	font: 400 20px/1 var(--font-body);
	cursor: pointer;
}
.roster-remove:hover { color: var(--danger); background: var(--danger-soft); }
.roster-remove:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* Карандаш — те же размеры, что у крестика, цвет действия — основной */
.roster-edit {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-right: -6px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-xs);
	background: transparent;
	color: var(--muted);
	font: 400 16px/1 var(--font-body);
	cursor: pointer;
}
.roster-edit:hover { color: var(--primary); background: var(--surface-2); }
.roster-edit:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.roster-item-name { cursor: text; }
/* Правка имени: поле встаёт на место имени, во всю свободную ширину */
.roster-item.is-editing { border-color: var(--primary); }
.roster-item-input.pedpsy-input { flex: 1 1 0; width: auto; min-width: 0; min-height: 30px; padding: 2px 8px; font-size: var(--fs-ui); }
/* Режим показа — под списком, узким полем */
.roster-mode { max-width: 420px; margin: var(--space-4) 0 0; }

/* ——— Плашки уровней ——————————————————————————————————————————————

   Уровень всегда пишется словами; цвет и значок формы — подсказки.
   Значок нужен для чёрно-белой печати и для тех, кто плохо различает
   цвета: круг — благоприятный, полукруг — средний, треугольник-контур —
   обратить внимание, закрашенный треугольник — требует внимания.
   Какой уровень методики какому тону соответствует, задаёт методика. */

.lvl {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 8px 2px 7px;
	border-radius: var(--radius-xs);
	border: 1px solid transparent;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.45;
	white-space: nowrap;
}
.lvl::before { font-size: 10px; line-height: 1; }
.lvl--ok      { background: var(--level-ok-soft);      color: var(--level-ok-ink); }
.lvl--neutral { background: var(--level-neutral-soft); color: var(--level-neutral-ink); }
.lvl--watch   { background: var(--level-watch-soft);   color: var(--level-watch-ink); }
.lvl--alert   { background: var(--level-alert-soft);   color: var(--level-alert-ink); font-weight: 600; }
.lvl--none    { background: var(--level-none-soft);    color: var(--level-none-ink); }
.lvl--ok::before      { content: "○"; }
.lvl--neutral::before { content: "◐"; }
.lvl--watch::before   { content: "△"; }
.lvl--alert::before   { content: "▲"; }
.lvl--none::before    { content: "–"; }

/* Легенда уровней под таблицей или диаграммой */
.lvl-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 0; list-style: none; font-size: var(--fs-xs); color: var(--muted); }
.lvl-legend li { display: inline-flex; align-items: center; gap: 6px; }

/* ——— Уведомления ————————————————————————————————————————————————

   Полоса слева по смыслу: сведения, успех, предупреждение, ошибка.
   Цвет подтверждается первым словом текста («Готово», «Проверьте»),
   а не только полосой. */

.notice {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 18px;
	border: 1px solid var(--line);
	border-left: 3px solid var(--info);
	border-radius: var(--radius-md);
	background: var(--surface);
	font-size: var(--fs-ui);
	line-height: 1.55;
}
.notice b { font-family: var(--font-head); }
.notice p { margin: 0; }
.notice--info  { border-left-color: var(--info);   background: var(--info-soft); }
.notice--ok    { border-left-color: var(--ok);     background: var(--ok-soft); }
.notice--warn  { border-left-color: var(--accent); background: var(--warn-soft); }
.notice--error { border-left-color: var(--danger); background: var(--danger-soft); }

/* Пометка демонстрационных данных: заметная, но не кричащая */
.demo-note {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 3px 9px;
	border: 1px dashed var(--muted);
	border-radius: var(--radius-xs);
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: .04em;
	color: var(--muted);
	text-transform: uppercase;
}

/* ——— Первый экран лендинга ——————————————————————————————————————

   Текст слева, карточка с живым результатом справа — как у Социометрии:
   человек видит, что получит, раньше, чем дочитает, что это. */

.lp-hero {
	padding-block: 52px 34px;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 36px;
	align-items: center;
	border-bottom: 1px solid var(--line);
}
@media (max-width: 860px) {
	.lp-hero { grid-template-columns: 1fr; padding-block: 30px 26px; gap: 26px; }
}
.lp-hero h1 { font-size: var(--fs-hero); font-weight: 800; letter-spacing: -.01em; max-width: 20ch; }
.lp-hero-lead { color: var(--muted); font-size: 15.5px; max-width: 60ch; margin-bottom: 22px; }
.lp-hero-lead p:last-child { margin-bottom: 0; }
.lp-hero-more { margin: var(--space-4) 0 0; font-size: 14.5px; }
.lp-hero-more a { color: var(--primary); font-weight: 600; }
@media (max-width: 480px) {
	.lp-hero .btn-row > * { flex: 1 1 100%; }
}

/* ——— Главная «две двери»: магазин материалов и кабинет диагностики ———

   Два равных входа с одним действием в каждом. Вся карточка — ссылка,
   кнопка внутри — только видимая цель, поэтому она span, а не вложенная
   ссылка. */

.home-hero { padding-block: 40px 8px; }
.home-hero h1 { font-size: var(--fs-hero); font-weight: 800; letter-spacing: -.01em; max-width: 24ch; }
.home-hero-lead { color: var(--muted); font-size: var(--fs-lead); max-width: 60ch; margin-bottom: 26px; }

.home-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.home-door {
	display: flex; flex-direction: column; gap: var(--space-2);
	padding: var(--space-6) var(--space-6) var(--space-5);
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	color: var(--ink); text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.home-door:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.home-door:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.home-door .pedpsy-eyebrow { margin: 0 0 4px; }
.home-door h2 { font-size: var(--fs-h2); margin: 0 0 4px; }
.home-door > p:not(.pedpsy-eyebrow) { color: var(--muted); margin: 0 0 var(--space-3); max-width: 46ch; }
.home-door-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.home-door-foot .pedpsy-mono { color: var(--muted); font-size: var(--fs-mono); }
.home-door--cabinet { border-top: 3px solid var(--accent); }
.home-door:hover .pedpsy-btn { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
@media (max-width: 760px) {
	.home-hero { padding-block: 26px 4px; }
	.home-doors { grid-template-columns: 1fr; }
	.home-door { padding: var(--space-5); }
	.home-door-foot .pedpsy-btn { width: 100%; justify-content: center; }
}

.home-path { margin: var(--space-4) 0 0; font-size: var(--fs-ui); color: var(--muted); max-width: 80ch; line-height: 1.6; }
.home-path b { color: var(--ink); font-family: var(--font-head); font-weight: 600; }
.home-path a { color: var(--primary); }

.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .steps--3 { grid-template-columns: 1fr; } }
.home-how-actions { margin-top: var(--space-4); }

/* ——— Главная-витрина: первый экран, разделы, плашка кабинета ——————— */

.store-hero { padding-block: 44px 30px; border-bottom: 1px solid var(--line); }
.store-hero h1 { font-size: var(--fs-hero); font-weight: 800; letter-spacing: -.01em; max-width: 24ch; }
.store-hero-lead { color: var(--muted); font-size: var(--fs-lead); max-width: 62ch; margin-bottom: 22px; }
@media (max-width: 480px) {
	.store-hero { padding-block: 28px 22px; }
	.store-hero .btn-row > * { flex: 1 1 100%; }
}

.section-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.section-card {
	display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2);
	height: 100%; min-height: 92px; padding: var(--space-4) var(--space-5);
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	color: var(--ink); text-decoration: none;
}
.section-card b { font-family: var(--font-head); font-size: var(--fs-h3); line-height: 1.3; }
.section-card span { color: var(--muted); font-size: var(--fs-mono); }
.section-card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.section-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 480px) {
	.section-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
	.section-card { min-height: 80px; padding: var(--space-3); }
}

.store-cabinet { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: center; }
.store-cabinet h2 { font-size: var(--fs-h2); margin-bottom: var(--space-2); }
.store-cabinet p:last-child { color: var(--muted); margin: 0; max-width: 62ch; }
@media (max-width: 760px) {
	.store-cabinet { grid-template-columns: 1fr; }
	.store-cabinet .btn-row > * { flex: 1 1 100%; }
}

/* Карточка с демонстрационным результатом */
.graph-card { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.graph-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.graph-title { font-size: 18px; margin: 0 0 2px; }
.graph-note { color: var(--muted); font-size: var(--fs-xs); margin: 0; }

/* ——— Тарифы ——————————————————————————————————————————————————————

   Гибкий ряд, а не сетка: в сетке карточка, которой не хватило места
   в строке, прижимается к левому краю и оставляет справа дыру. Здесь
   неполный ряд встаёт по центру — при любом числе тарифов. */

.tariffs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin: 0 0 var(--space-6);
	padding: 0;
	list-style: none;
}
.tariffs > * { flex: 1 1 240px; max-width: 352px; }
@media (max-width: 640px) { .tariffs > * { max-width: none; } }

.tariff { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tariff-name {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-body);
	margin: 0;
}
/* Какой пакет берут чаще: подсказка, а не реклама — потому мелко и без восклицаний */
.tariff-badge {
	font-family: var(--font-body);
	font-size: var(--fs-mono);
	font-weight: 500;
	line-height: 1.4;
	color: var(--accent-ink);
	background: var(--accent);
	border-radius: var(--radius-pill);
	padding: 3px 9px;
	white-space: nowrap;
}
.tariff-featured { border-color: var(--accent); }

/* Знак рубля в Sora не нарисован — его даёт Inter, и он выходит ниже цифр.
   Этим и держится вид из макета. */
.tariff-price {
	font-family: var(--font-num);
	font-size: var(--fs-price);
	font-weight: 600;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	margin: 0;
}
.tariff-price .woocommerce-Price-currencySymbol,
.tariff-price .rub { font-family: var(--font-body); font-weight: 500; }
.tariff-price del { font-size: 16px; color: var(--muted); font-weight: 400; }
.tariff-desc { font-size: var(--fs-sm); color: var(--muted); }
.tariffs .tariff-facts { list-style: none; margin: 0; padding: 0; font-size: 13.5px; color: var(--muted); }
.tariff-facts li { margin-bottom: 3px; }
.tariff-facts b { color: var(--ink); font-family: var(--font-head); }
.tariff .pedpsy-btn,
.tariff .pedpsy-btn-ghost { margin-top: auto; }
.tariff-used { margin-top: auto; font-size: var(--fs-sm); color: var(--muted); }
.tariff-more { margin: 0; font-size: 13.5px; }
.tariff-more a { color: var(--muted); }
.tariff-more a:hover { color: var(--primary); }

/* Строка под пакетами: путь к пробе и пометка о ценах */
.tariffs-note { margin: 0 0 var(--space-7); text-align: center; font-size: 14.5px; color: var(--muted); }
.tariffs-note a { color: var(--primary); font-weight: 600; }

/* ——— Карточки методик ——————————————————————————————————————————— */

.method-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 900px) { .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .method-grid { grid-template-columns: 1fr; } }

.method-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 18px var(--space-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.method-card:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); box-shadow: var(--shadow); }
.method-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.method-card-age { margin: 0; }
.method-card-title { font-size: 16px; margin: 0; line-height: 1.3; }
.method-card-title a { text-decoration: none; }
/* Вся карточка кликабельна через ссылку заголовка: одна ссылка — одна остановка Tab */
.method-card-title a::after { content: ""; position: absolute; inset: 0; }
.method-card-title a:focus-visible { outline: none; }
.method-card:has(.method-card-title a:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.method-card-author { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.method-card-what { margin: 0; font-size: 13.5px; line-height: 1.55; }

/* ——— Вопросы и ответы ——————————————————————————————————————————

   Раскрывающиеся строки на <details>: работают без скрипта, с клавиатуры
   и в читалке, а длинная страница не превращается в стену текста. */

.faq { max-width: 72ch; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4) 2px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 15.5px;
	cursor: pointer;
	list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "+";
	flex: none;
	font-family: var(--font-mono);
	font-weight: 400;
	color: var(--muted);
}
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 2px var(--space-4); color: var(--muted); line-height: 1.7; }
.faq details > div p { margin: 0 0 8px; }
.faq details > div p:last-child { margin-bottom: 0; }

/* ——— Образцы на странице стиля ——————————————————————————————— */

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.swatch { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-xs); }
.swatch i { display: block; height: 52px; border-radius: var(--radius-md); border: 1px solid var(--line); }
.swatch b { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-mono); color: var(--muted); }

/* ——— Меню кнопки («Скачать ▾») —————————————————————————————————————
   На <details>: открывается с клавиатуры и без скрипта; пункт — кнопка
   с подсказкой второй строкой. Как меню «Скачать» в Социометрии. */
.pedpsy-menu { position: relative; display: inline-block; }
.pedpsy-menu > summary { list-style: none; cursor: pointer; }
.pedpsy-menu > summary::-webkit-details-marker { display: none; }
.pedpsy-menu > summary::after { content: " ▾"; }
.pedpsy-menu-list {
	position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 260px;
	display: grid; gap: 2px; padding: 6px;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.pedpsy-menu-list button {
	display: grid; gap: 2px; text-align: left; padding: 8px 10px; border: 0; border-radius: 6px;
	background: none; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
}
.pedpsy-menu-list button:hover, .pedpsy-menu-list button:focus-visible { background: var(--surface-2); }
.pedpsy-menu-list .hint { font-weight: 400; font-size: 12.5px; color: var(--muted); }
@media print { .pedpsy-menu { display: none; } }
.report-note { max-width: 72ch; margin: 6px 0 14px; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* ——— Просмотр вебинара ———————————————————————————————————————————
   Почта зрителя медленно ходит по кадру (HLS, mu-плагин pedpsy-store-video). */
.video-watch { padding-block: var(--space-6); }
.video-frame { position: relative; overflow: hidden; background: #000; border-radius: var(--radius-md); }
.video-frame video { display: block; width: 100%; }
.video-tools { margin: 12px 0 0; }
.webinar-files-title { margin: var(--space-6) 0 var(--space-3); }
.video-frame:fullscreen { display: flex; align-items: center; border-radius: 0; }
.video-frame:-webkit-full-screen { display: flex; align-items: center; border-radius: 0; }
.video-mark {
	position: absolute; top: 10%; left: 10%; pointer-events: none; opacity: .35;
	font-size: var(--fs-ui); color: #fff; text-shadow: 0 0 2px #000;
	animation: pedpsy-mark 40s linear infinite alternate;
}
@keyframes pedpsy-mark {
	0%   { top: 10%; left: 10%; }
	33%  { top: 20%; left: 70%; }
	66%  { top: 75%; left: 20%; }
	100% { top: 80%; left: 65%; }
}
@media (prefers-reduced-motion: reduce) { .video-mark { animation: none; } }
.webinars-title { margin-top: var(--space-6); }
.webinar-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }