/* ==========================================================================
   Школа PARFCLUB — стили, которых нет в макете дизайнера.

   Дизайн урока и кабинета приходит готовыми файлами (tokens.css, school.css,
   school-lessons.css) и при каждой новой итерации ЗАМЕНЯЕТСЯ целиком. Но часть
   платформы выросла уже после того, как макет был отрисован, и в design/ этих
   экранов попросту нет: сквозной аромат курса, история сдач и разница между
   заходами, комментарии куратора к полям, вложения, встроенный Формуляр, а из
   блоков урока — «текст + фото» (compare) и тёмная полоса (dark).

   Правила ниже перенесены один в один из прежней версии и живут отдельным
   файлом, подключаемым последним: так замена макета их не сносит, и сразу
   видно, что именно ещё не прошло через руки дизайнера.

   Когда очередная итерация макета закроет какой-то из этих кусков — удалить
   его отсюда, чтобы файл не разрастался и не переопределял новый дизайн.
   ========================================================================== */

:root {
	/* Затемнение под кнопкой увеличения в галерее — раньше жило в school-lessons.css. */
	--pf-lesson-overlay:       rgba(26, 36, 34, .62);
	--pf-lesson-overlay-hover: rgba(26, 36, 34, .82);
}

.pf-sch-scent-card {
	display: flex; align-items: center; gap: var(--pf-sp-4);
	margin-top: var(--pf-sp-3); margin-bottom: var(--pf-sp-6);
	padding: var(--pf-sp-4) var(--pf-sp-5);
	background: var(--pf-surface); border: 1px solid var(--pf-border);
	border-radius: var(--pf-radius-lg); box-shadow: var(--pf-shadow-xs);
	text-decoration: none; transition: border-color var(--pf-t) var(--pf-ease), box-shadow var(--pf-t) var(--pf-ease);
}
.pf-sch-scent-card:hover { border-color: var(--pf-border-hover); box-shadow: var(--pf-shadow-sm); }
.pf-sch-scent-card:hover .pf-sch-lesson-chev { color: var(--pf-green-700); }
.pf-sch-scent-card-icon {
	flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--pf-radius-md);
	background: var(--pf-green-050); border: 1px solid var(--pf-green-200); color: var(--pf-green-700);
	display: flex; align-items: center; justify-content: center;
}
.pf-sch-scent-card-body { flex: 1; min-width: 0; }
.pf-sch-scent-card-body strong { display: block; font-size: var(--pf-fs-15); font-weight: var(--pf-w-semi); letter-spacing: var(--pf-ls-flat); }
.pf-sch-scent-card-body span { font-size: var(--pf-fs-13); color: var(--pf-text-2); }
.pf-sch-scent-progress-line { font-size: var(--pf-fs-14); font-weight: var(--pf-w-semi); color: var(--pf-green-800); margin-top: var(--pf-sp-2); }
.pf-sch-scent-roadmap {
	display: flex; flex-wrap: wrap; gap: var(--pf-sp-3);
	list-style: none; margin: 0 0 var(--pf-sp-7); padding: 0;
}
.pf-sch-scent-stage { flex: 1 1 150px; min-width: 130px; }
.pf-sch-scent-stage-inner {
	display: flex; flex-direction: column; gap: var(--pf-sp-2); height: 100%;
	padding: var(--pf-sp-3) var(--pf-sp-4); border-radius: var(--pf-radius-md);
	background: var(--pf-surface); border: 1px solid var(--pf-border);
	text-decoration: none; color: inherit;
}
a.pf-sch-scent-stage-inner:hover { border-color: var(--pf-border-hover); box-shadow: var(--pf-shadow-sm); }
.pf-sch-scent-stage-num {
	display: flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
	background: var(--pf-muted-bg); color: var(--pf-muted-text);
	font-size: var(--pf-fs-13); font-weight: var(--pf-w-bold);
}
.pf-sch-scent-stage-body strong { display: block; font-size: var(--pf-fs-13); font-weight: var(--pf-w-semi); line-height: var(--pf-lh-snug); }
.pf-sch-scent-stage-body span { font-size: var(--pf-fs-12); color: var(--pf-text-3); text-transform: uppercase; letter-spacing: var(--pf-ls-caps); }
.pf-sch-scent-stage--done .pf-sch-scent-stage-num { background: var(--pf-green); color: var(--pf-text-on-green); }
.pf-sch-scent-stage--done .pf-sch-scent-stage-inner { border-color: var(--pf-green-200); }
.pf-sch-scent-stage--current .pf-sch-scent-stage-num { background: var(--pf-ink-700); color: var(--pf-n-0); }
.pf-sch-scent-stage--current .pf-sch-scent-stage-inner { border-color: var(--pf-border-strong); box-shadow: var(--pf-shadow-xs); }
.pf-sch-scent-stage--upcoming .pf-sch-scent-stage-body strong { color: var(--pf-text-3); }
.pf-sch-scent-section h2 { margin-bottom: var(--pf-sp-4); }
.pf-sch-scent-table { min-width: 620px; }
.pf-sch-scent-table thead th:nth-child(3),
.pf-sch-scent-table thead th:nth-child(4) { width: 116px; }
.pf-sch-scent-table thead th:nth-child(5) { width: 84px; }
.pf-sch-scent-table thead th:nth-child(6) { width: 96px; }
.pf-sch-scent-table thead th.pf-sch-col-del { width: 44px; }
.pf-sch-scent-percent { font-weight: var(--pf-w-semi); color: var(--pf-green-800); white-space: nowrap; }
.pf-sch-scent-empty-row td { text-align: center; padding: var(--pf-sp-5) var(--pf-sp-4); }
.pf-sch-scent-lesson-tag { font-size: var(--pf-fs-12); color: var(--pf-text-3); white-space: nowrap; }
.pf-sch-scent-add { margin-top: var(--pf-sp-4); }
.pf-sch-scent-add > summary { cursor: pointer; display: inline-flex; align-items: center; gap: var(--pf-sp-2); font-size: var(--pf-fs-14); font-weight: var(--pf-w-semi); color: var(--pf-green-700); }
.pf-sch-scent-add[open] > summary { margin-bottom: var(--pf-sp-3); }
.pf-sch-scent-add-row { display: flex; align-items: flex-start; gap: var(--pf-sp-3); flex-wrap: wrap; }
.pf-sch-scent-picker { flex: 1 1 220px; min-width: 180px; }
.pf-sch-scent-grams, .pf-sch-scent-dilution { flex: 0 1 130px; min-width: 96px; }
.pf-sch-scent-add-row .pf-sch-btn { flex: 0 0 auto; }
.pf-sch-scent-add > .pf-sch-field-hint { margin-top: var(--pf-sp-2); }
.pf-sch-scent-export {
	display: flex; align-items: center; gap: var(--pf-sp-3); flex-wrap: wrap;
	margin-top: var(--pf-sp-6); padding-top: var(--pf-sp-4); border-top: 1px solid var(--pf-border);
}
.pf-sch-scent-export .pf-sch-field-hint { flex: 1 1 220px; margin: 0; }
@media (max-width: 640px) {
	/* Название занимает всю первую строку, на второй — граммы, разведение и
	   крестик: ровно 50/50 отодвигало бы крестик на третью строку. */
	.pf-sch-scent-grams, .pf-sch-scent-dilution { flex: 1 1 0; min-width: 0; }
	.pf-sch-scent-dilution { flex-grow: 1.2; }   /* «Развед., %» длиннее, чем «Граммы» */
	.pf-sch-scent-add-row { gap: var(--pf-sp-2); }
	.pf-sch-scent-add-row .pf-sch-btn { width: 100%; }
}
.pf-sch-scent-task {
	margin: var(--pf-sp-4) 0 var(--pf-sp-6); padding: var(--pf-sp-5);
	background: var(--pf-surface-quiet); border: 1px solid var(--pf-border);
	border-radius: var(--pf-radius-lg);
}
.pf-sch-scent-task-head { display: flex; align-items: center; gap: var(--pf-sp-4); flex-wrap: wrap; }
.pf-sch-scent-task-head .pf-sch-formula-mark { width: 40px; height: 40px; background: var(--pf-surface); border-color: var(--pf-border-strong); }
.pf-sch-scent-task-lesson { margin-top: var(--pf-sp-4); padding-top: var(--pf-sp-4); border-top: 1px solid var(--pf-border); }
.pf-sch-scent-task-lesson-cap {
	display: block; font-size: var(--pf-fs-12); font-weight: var(--pf-w-bold);
	text-transform: uppercase; letter-spacing: var(--pf-ls-caps); color: var(--pf-text-3);
	margin-bottom: var(--pf-sp-2);
}
.pf-sch-scent-task-rows-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pf-sch-scent-task-rows-list li {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--pf-sp-3);
	font-size: var(--pf-fs-14); padding: 3px 0;
}
.pf-sch-scent-task-rows-list li span:last-child { color: var(--pf-text-2); white-space: nowrap; }
.pf-sch-scent-task .pf-sch-scent-add { margin-top: var(--pf-sp-4); padding-top: var(--pf-sp-4); border-top: 1px solid var(--pf-border); }
.pf-sch-scent-feed-section { margin-top: var(--pf-sp-8); }
.pf-sch-scent-feed-list { display: flex; flex-direction: column; gap: var(--pf-sp-3); }
.pf-sch-scent-feed-item {
	padding: var(--pf-sp-4) var(--pf-sp-5); background: var(--pf-surface);
	border: 1px solid var(--pf-border); border-radius: var(--pf-radius-md);
}
.pf-sch-scent-feed-item summary {
	cursor: pointer; display: flex; align-items: center; gap: var(--pf-sp-3); flex-wrap: wrap;
	list-style: none;
}
.pf-sch-scent-feed-item summary::-webkit-details-marker { display: none; }
.pf-sch-scent-feed-lesson {
	flex: 0 0 auto; font-size: var(--pf-fs-12); font-weight: var(--pf-w-bold); color: var(--pf-text-3);
	text-transform: uppercase; letter-spacing: var(--pf-ls-caps);
}
.pf-sch-scent-feed-title { flex: 1; min-width: 160px; font-weight: var(--pf-w-semi); font-size: var(--pf-fs-15); }
.pf-sch-scent-feed-date { flex: 0 0 auto; font-size: var(--pf-fs-13); color: var(--pf-text-3); }
.pf-sch-scent-feed-note { margin-top: var(--pf-sp-3); }
.pf-sch-scent-feed-item .pf-sch-table-scroll { margin-top: var(--pf-sp-3); }
.pf-sch-picker { position: relative; }
.pf-sch-pick-sug {
	position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
	margin: 0; padding: var(--pf-sp-2) 0; list-style: none;
	background: var(--pf-surface); border: 1px solid var(--pf-border-strong);
	border-radius: var(--pf-radius-md); box-shadow: var(--pf-shadow-lg);
	max-height: 240px; overflow-y: auto; display: none;
}
.pf-sch-pick-sug li { margin: 0; }
.pf-sch-pick-sug button {
	display: block; width: 100%; text-align: left; background: none; border: none;
	padding: var(--pf-sp-2) var(--pf-sp-4); font: inherit; font-size: var(--pf-fs-14); color: var(--pf-text);
	cursor: pointer;
}
.pf-sch-pick-sug button:hover, .pf-sch-pick-sug button:focus-visible { background: var(--pf-green-050); outline: none; }
.pf-sch-embed-head {
	display: flex; align-items: center; gap: var(--pf-sp-4); flex-wrap: wrap;
	margin-bottom: var(--pf-sp-4); padding: var(--pf-sp-4) var(--pf-sp-5);
	background: var(--pf-green-050); border: 1px solid var(--pf-green-200);
	border-radius: var(--pf-radius-lg);
}
.pf-sch-embed-head .pf-sch-formula-mark { width: 40px; height: 40px; }
.pf-sch-embed-frame {
	position: relative; border-radius: var(--pf-radius-lg); overflow: hidden;
	border: 1px solid var(--pf-border); background: var(--pf-surface);
	box-shadow: var(--pf-shadow-md);
	/* Спиннер и запасная ссылка позиционированы absolute (inset:0) и сами
	   не задают высоту рамки. Пока виден iframe — она и так есть (его высота),
	   но в data-state="failed" iframe скрыт через display:none и без своего
	   min-height рамка схлопнется в 0 — фраза «откройте в новой вкладке»
	   станет невидимой. */
	min-height: 320px;
}
.pf-sch-embed-iframe {
	display: block; width: 100%; height: 480px; border: 0;
	transition: height var(--pf-t-slow) var(--pf-ease);
}
.pf-sch-embed-frame[data-state="loading"] .pf-sch-embed-iframe { visibility: hidden; }
.pf-sch-embed-frame[data-state="failed"] .pf-sch-embed-iframe { display: none; }
.pf-sch-embed-loading {
	display: none; position: absolute; inset: 0; z-index: 1;
	align-items: center; justify-content: center; gap: var(--pf-sp-3);
	color: var(--pf-text-3); font-size: var(--pf-fs-14); font-weight: var(--pf-w-medium);
	background: var(--pf-surface);
}
.pf-sch-embed-frame[data-state="loading"] .pf-sch-embed-loading { display: flex; }
.pf-sch-embed-spinner {
	width: 20px; height: 20px; flex: 0 0 auto; background: currentColor;
	mask-image: var(--pf-ic-spinner); -webkit-mask-image: var(--pf-ic-spinner);
	mask-repeat: no-repeat; mask-position: center; mask-size: contain;
	-webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
	animation: pf-sch-spin 900ms linear infinite;
}
.pf-sch-embed-fallback {
	display: none; min-height: 320px; padding: var(--pf-sp-7) var(--pf-sp-6);
	flex-direction: column; align-items: center; justify-content: center; gap: var(--pf-sp-4);
	text-align: center;
}
.pf-sch-embed-frame[data-state="failed"] .pf-sch-embed-fallback { display: flex; }
.pf-sch-embed-fallback p { max-width: 46ch; color: var(--pf-text-2); font-size: var(--pf-fs-14); margin: 0; }
.pf-sch-embed-alt {
	display: inline-flex; align-items: center; gap: var(--pf-sp-2);
	margin-top: var(--pf-sp-3); font-size: var(--pf-fs-13); font-weight: var(--pf-w-medium);
	color: var(--pf-text-3); text-decoration: none;
}
.pf-sch-embed-alt:hover { color: var(--pf-green-700); text-decoration: underline; }
@media (max-width: 640px) {
	.pf-sch-embed-head { padding: var(--pf-sp-4); }
	.pf-sch-embed-iframe { height: 420px; }
	.pf-sch-scent-task { padding: var(--pf-sp-4); }
	.pf-sch-scent-roadmap { gap: var(--pf-sp-2); }
	.pf-sch-scent-stage { flex-basis: calc(50% - var(--pf-sp-2) / 2); }
	.pf-sch-scent-export { flex-direction: column; align-items: stretch; }
	.pf-sch-scent-export .pf-sch-btn { width: 100%; }
}
.pf-sch-course-what { display: flex; flex-direction: column; gap: var(--pf-sp-4); margin: var(--pf-sp-6) 0; text-align: left; }
.pf-sch-course-what > div { display: flex; gap: var(--pf-sp-4); align-items: flex-start; }
.pf-sch-course-what svg { color: var(--pf-green-700); margin-top: 2px; }
.pf-sch-course-what strong { display: block; font-size: var(--pf-fs-15); }
.pf-sch-course-what span { font-size: var(--pf-fs-14); color: var(--pf-text-2); }
.pf-sch-saved-cells,
.pf-sch-history { padding: var(--pf-sp-4) var(--pf-sp-5); margin-top: var(--pf-sp-5); margin-bottom: var(--pf-sp-5); }
.pf-sch-saved-cells > summary,
.pf-sch-history > summary {
	cursor: pointer; font-weight: 600; font-size: var(--pf-fs-14);
	color: var(--pf-ink-600); list-style-position: inside;
}
.pf-sch-saved-cells > summary:hover,
.pf-sch-history > summary:hover { color: var(--pf-green-800); }
.pf-sch-saved-cells > summary:focus-visible,
.pf-sch-history > summary:focus-visible { outline: 2px solid var(--pf-green); outline-offset: 2px; border-radius: var(--pf-radius-sm); }
.pf-sch-saved-cells[open] > summary,
.pf-sch-history[open] > summary { margin-bottom: var(--pf-sp-4); }
.pf-sch-saved-cells td { font-size: var(--pf-fs-14); }
.pf-sch-field--numbered > label {
	display: grid; grid-template-columns: auto 1fr; align-items: start;
	gap: var(--pf-sp-3);
}
.pf-sch-task-num {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 26px; height: 26px; padding: 0 var(--pf-sp-2);
	border-radius: 999px; background: var(--pf-green-100); color: var(--pf-green-800);
	font-size: var(--pf-fs-13); font-weight: 700; font-variant-numeric: tabular-nums;
}
.pf-sch-task-text { min-width: 0; }
.pf-sch-history-list { display: flex; flex-direction: column; gap: var(--pf-sp-5); }
.pf-sch-history-item { padding-top: var(--pf-sp-5); border-top: 1px solid var(--pf-border); }
.pf-sch-history-list > .pf-sch-history-item:first-child { padding-top: 0; border-top: none; }
.pf-sch-history-item-head {
	display: flex; align-items: center; gap: var(--pf-sp-3); flex-wrap: wrap;
	margin-bottom: var(--pf-sp-3);
}
.pf-sch-history-item-num { font-weight: var(--pf-w-bold); font-size: var(--pf-fs-14); color: var(--pf-text); }
.pf-sch-history-item-date { font-size: var(--pf-fs-13); color: var(--pf-text-3); }
.pf-sch-history-item-comment { margin-bottom: var(--pf-sp-4); }
.pf-sch-history-item-comment strong { display: block; font-size: var(--pf-fs-13); color: var(--pf-text-2); margin-bottom: var(--pf-sp-2); }
.pf-sch-history-item-answer > summary {
	cursor: pointer; font-size: var(--pf-fs-13); font-weight: var(--pf-w-semi); color: var(--pf-text-2);
}
.pf-sch-history-item-answer > summary:hover { color: var(--pf-green-800); }
.pf-sch-history-item-answer[open] > summary { margin-bottom: var(--pf-sp-4); }
.pf-sch-diff-was {
	font-size: var(--pf-fs-13); color: var(--pf-text-3);
	background: var(--pf-surface-quiet); border-radius: var(--pf-radius-xs);
	padding: var(--pf-sp-2) var(--pf-sp-3); margin: var(--pf-sp-2) 0;
}
.pf-sch-diff-was-label { font-weight: var(--pf-w-semi); color: var(--pf-text-2); }
.pf-sch-ing-row--added, .pf-sch-ing-row--changed { position: relative; }
.pf-sch-ing-row--added::before, .pf-sch-ing-row--changed::before {
	content: ''; position: absolute; left: -1px; top: var(--pf-sp-2); bottom: var(--pf-sp-2);
	width: 3px; border-radius: var(--pf-radius-pill);
}
.pf-sch-ing-row--added::before   { background: var(--pf-wait-border); }
.pf-sch-ing-row--changed::before { background: var(--pf-warn-border); }
.pf-sch-field--diff-added,
.pf-sch-field--diff-changed { padding-left: var(--pf-sp-4); border-left: 3px solid var(--pf-wait-border); }
.pf-sch-field--diff-changed { border-left-color: var(--pf-warn-border); }
.pf-sch-cell-diff { display: flex; flex-direction: column; gap: 2px; }
.pf-sch-cell-was {
	font-size: var(--pf-fs-11); color: var(--pf-text-3);
	text-decoration: line-through; text-decoration-color: var(--pf-n-400);
}
.pf-sch-cell-diff--added .pf-sch-cell-static   { color: var(--pf-wait-text); font-weight: var(--pf-w-semi); }
.pf-sch-cell-diff--changed .pf-sch-cell-static { color: var(--pf-warn-text); font-weight: var(--pf-w-semi); }
.pf-sch-diff-photos { margin-top: var(--pf-sp-4); display: flex; flex-direction: column; gap: var(--pf-sp-3); }
.pf-sch-diff-photos-label { margin: 0; }
.pf-sch-photos-grid--removed .pf-sch-photo { opacity: .5; }
.pf-sch-attachments { display: flex; flex-wrap: wrap; gap: var(--pf-sp-3); margin-top: var(--pf-sp-3); }
.pf-sch-attach--image {
	display: block; width: 84px; height: 84px; border-radius: var(--pf-radius-md);
	overflow: hidden; border: 1px solid var(--pf-border); background: var(--pf-surface-quiet);
	box-shadow: var(--pf-shadow-xs);
	transition: border-color var(--pf-t-fast) var(--pf-ease), box-shadow var(--pf-t-fast) var(--pf-ease);
}
.pf-sch-attach--image:hover { border-color: var(--pf-border-hover); box-shadow: var(--pf-shadow-sm); }
.pf-sch-attach--image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-sch-attach--doc {
	display: inline-flex; align-items: center; gap: var(--pf-sp-2);
	padding: var(--pf-sp-2) var(--pf-sp-4); border-radius: var(--pf-radius-sm);
	background: var(--pf-surface); border: 1px solid var(--pf-border);
	color: var(--pf-text); text-decoration: none; font-size: var(--pf-fs-13);
	box-shadow: var(--pf-shadow-xs);
	transition: border-color var(--pf-t-fast) var(--pf-ease), background var(--pf-t-fast) var(--pf-ease);
}
.pf-sch-attach--doc:hover { border-color: var(--pf-border-hover); background: var(--pf-green-050); color: var(--pf-text); }
.pf-sch-attach--doc svg { color: var(--pf-text-2); flex: 0 0 auto; }
.pf-sch-attach-name { font-weight: var(--pf-w-medium); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-sch-attach-size { color: var(--pf-text-3); white-space: nowrap; }
@media (max-width: 640px) {
	.pf-sch-history-item-head { gap: var(--pf-sp-2); }
	.pf-sch-attach--image { width: 72px; height: 72px; }
}
.pf-sch-field-comment {
	display: flex; align-items: flex-start; gap: var(--pf-sp-2);
	margin-top: var(--pf-sp-3); padding: var(--pf-sp-3) var(--pf-sp-4);
	background: var(--pf-surface-quiet); border-left: 3px solid var(--pf-ink-600);
	border-radius: var(--pf-radius-xs);
}
.pf-sch-field-comment-icon { flex: 0 0 auto; margin-top: 1px; color: var(--pf-ink-600); }
.pf-sch-field-comment-text {
	font-size: var(--pf-fs-13); line-height: var(--pf-lh-snug); color: var(--pf-text-2);
}
.pf-sch-field-comment-text strong { color: var(--pf-text); font-weight: var(--pf-w-semi); }
.pf-sch-field-comment-editor {
	margin-top: var(--pf-sp-3); padding: var(--pf-sp-3) var(--pf-sp-4);
	background: var(--pf-surface-quiet); border-radius: var(--pf-radius-sm);
}
.pf-sch-field-comment-editor > summary {
	display: flex; align-items: center; gap: var(--pf-sp-2); cursor: pointer;
	font-size: var(--pf-fs-13); font-weight: var(--pf-w-medium); color: var(--pf-text-2);
	list-style-position: inside;
}
.pf-sch-field-comment-editor > summary svg { flex: 0 0 auto; }
.pf-sch-field-comment-editor > summary:hover { color: var(--pf-green-800); }
.pf-sch-field-comment-editor > summary:focus-visible { outline: 2px solid var(--pf-green); outline-offset: 2px; border-radius: var(--pf-radius-sm); }
.pf-sch-field-comment-editor[open] > summary { margin-bottom: var(--pf-sp-3); color: var(--pf-text); }
.pf-sch-field-comment-editor textarea {
	display: block; width: 100%; font-family: inherit; font-size: var(--pf-fs-13);
	padding: var(--pf-sp-3); border: 1px solid var(--pf-border); border-radius: var(--pf-radius-field);
	background: var(--pf-surface); color: var(--pf-text); resize: vertical;
}
.pf-sch-field-comment-editor textarea:focus-visible {
	outline: none; border-color: var(--pf-green); box-shadow: var(--pf-focus-ring-flat);
}
.pf-sch-notify-block .pf-sch-notice-body p { max-width: none; }
.pf-sch-notify-actions { display: flex; gap: var(--pf-sp-3); flex-wrap: wrap; margin-top: var(--pf-sp-3); }
.pf-sch-notify-code {
	display: inline-block; padding: 2px 9px;
	background: var(--pf-surface); border: 1px dashed var(--pf-border-strong); border-radius: var(--pf-radius-xs);
	font-weight: var(--pf-w-bold); letter-spacing: .04em; font-size: var(--pf-fs-13); color: var(--pf-text);
}
.pf-sch-notice.pf-sch-notify-block { margin-top: 30px; }
.pf-sch-accord-topbar {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: var(--pf-sp-3); margin-bottom: var(--pf-sp-4);
}
.pf-sch-accord-topbar .pf-sch-accord-base { margin: 0; }
.pf-sch-accord-formula-link { flex: 0 0 auto; }
.pf-sch-twi-row--text-only { grid-template-columns: minmax(0, 1fr); }
.pf-sch-twi-row--text-only .pf-sch-twi-text { grid-column: 1; }
.pf-sch-itemlist-compare { display: flex; flex-direction: column; gap: var(--pf-sp-6); }
.pf-sch-itemlist-compare-row {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27%);
	gap: var(--pf-sp-6); align-items: center;
	padding-bottom: var(--pf-sp-6);
	border-bottom: 1px solid var(--pf-border);
}
.pf-sch-itemlist-compare-row:last-child { border-bottom: none; padding-bottom: 0; }
.pf-sch-itemlist-compare-row--text-only { grid-template-columns: minmax(0, 1fr); }
.pf-sch-itemlist-compare-text h4 {
	margin: 0 0 var(--pf-sp-2);
	font-size: var(--pf-fs-19); font-weight: var(--pf-w-semi);
	line-height: var(--pf-lh-snug); color: var(--pf-ink);
}
.pf-sch-itemlist-compare-text .pf-sch-block-text { font-size: var(--pf-lesson-small); }
.pf-sch-itemlist-compare-media img {
	display: block; width: 100%; height: auto;
	border-radius: var(--pf-radius-lg);
	background-color: var(--pf-surface-quiet);
	background-image: var(--pf-stripes);
}
.pf-sch-block--item-list .pf-sch-itemlist-dark {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--pf-sp-6);
	background: var(--pf-ink);
	border-radius: var(--pf-radius-lg);
	padding: var(--pf-sp-8) var(--pf-sp-7);
}
.pf-sch-itemlist-dark-col h4 {
	margin: 0 0 var(--pf-sp-3);
	font-size: var(--pf-fs-19); font-weight: var(--pf-w-semi);
	line-height: var(--pf-lh-snug); color: var(--pf-n-0);
}
.pf-sch-itemlist-dark-col .pf-sch-block-text {
	font-size: var(--pf-lesson-small); color: var(--pf-n-300);
}
.pf-sch-itemlist-dark-col .pf-sch-block-text a { color: var(--pf-green-300); }
.pf-sch-gallery-zoom {
	position: absolute; top: var(--pf-sp-2); right: var(--pf-sp-2);
	width: 32px; height: 32px; border-radius: var(--pf-radius-pill);
	display: flex; align-items: center; justify-content: center;
	background: var(--pf-lesson-overlay); color: var(--pf-n-0);
	opacity: 0;
	transition: opacity var(--pf-t-fast) var(--pf-ease), background var(--pf-t-fast) var(--pf-ease);
}
.pf-sch-gallery-item:hover .pf-sch-gallery-zoom,
.pf-sch-gallery-item:focus-visible .pf-sch-gallery-zoom { opacity: 1; }
.pf-sch-gallery-item:hover .pf-sch-gallery-zoom { background: var(--pf-lesson-overlay-hover); }
@media (prefers-reduced-motion: reduce) {
	.pf-sch-gallery-zoom { transition: none; }
}
/* ==========================================================================
   Правки, которые раньше лежали здесь и касались страницы урока (мелкие кадры,
   врезки, «текст с фотографией», сетка карточек, лента глав), удалены: урок
   переведён на Tailwind, вёрстка живёт в inc/class-blocks.php и собирается
   в assets/school-blocks.css. Здесь остаётся только то, чего нет в макете и
   что не относится к уроку.
   ========================================================================== */

/* ── Точечные правки по замечаниям заказчика ──────────────────────────────
   Блок «Что в этом уроке» стоит вне листа урока, поэтому утилиты Tailwind
   (они привязаны к .pf-sch-lesson-layout) до него не достают — задаём здесь. */
#zadaniya { margin-top: 30px; }

/* Подписи полей в формах заданий не должны обрезаться по ширине. */
label { max-width: unset !important; }

/* Ссылка «В Формуляре» в шапке колонки версии аккорда: открывает именно эту
   версию (см. PF_School_Front::open_accord_version()). */
.pf-sch-accord-version-link {
	display: inline-flex; align-items: center; gap: 4px;
	margin-top: var(--pf-sp-2);
	font-size: var(--pf-fs-12); font-weight: var(--pf-w-semi);
	color: var(--pf-green-700); text-decoration: none; white-space: nowrap;
}
.pf-sch-accord-version-link:hover { color: var(--pf-green-800); text-decoration: underline; }

/* Форма добавления вещества теперь всегда развёрнута (раньше пряталась в
   раскрывающийся блок, и добавить получалось только с двух нажатий). */
.pf-sch-scent-add--open { display: block; }
.pf-sch-scent-add-cap {
	display: inline-flex; align-items: center; gap: var(--pf-sp-2);
	margin-bottom: var(--pf-sp-3);
	font-size: var(--pf-fs-14); font-weight: var(--pf-w-semi); color: var(--pf-green-700);
}

/* Строки ввода веществ: одна изначально, кнопка ниже добавляет ещё.
   Сохраняется только заполненная строка (school.js, bindScentRows()). */
.pf-sch-scent-rows { display: flex; flex-direction: column; gap: var(--pf-sp-2); }
.pf-sch-scent-rows .pf-sch-scent-add-row { align-items: center; }
.pf-sch-scent-add-row[data-saving] { opacity: .6; pointer-events: none; }
.pf-sch-scent-row-del {
	flex: 0 0 auto; width: 32px; height: 32px; line-height: 1;
	border: 1px solid var(--pf-border); border-radius: var(--pf-radius-md);
	background: var(--pf-surface); color: var(--pf-text-3);
	font-size: 18px; cursor: pointer;
}
.pf-sch-scent-row-del:hover { border-color: var(--pf-border-strong); color: var(--pf-text); }
.pf-sch-scent-row-add { margin-top: var(--pf-sp-3); }

/* ── Правки по замечаниям заказчика ──────────────────────────────────────── */
.pf-sch-scent-task-head { margin-bottom: 10px; }
p.pf-sch-field-hint { margin-top: 10px; }

/* Белый текст на зелёной кнопке. Двумя селекторами, потому что кнопка бывает
   и ссылкой: `.pf-sch-body a` (0,1,1) перебивает `.pf-sch-btn--primary` (0,1,0),
   и у ссылок-кнопок текст красился цветом ссылки, а не кнопки. */
.pf-sch-body .pf-sch-btn--primary,
.pf-sch-body a.pf-sch-btn--primary,
.pf-sch-body .pf-sch-btn--primary:hover,
.pf-sch-body .pf-sch-btn--primary:active { color: #fff; }

/* ── Урок ещё не открыт ───────────────────────────────────────────────────
   Закрытый урок остаётся в программе, чтобы виден был весь путь курса, но
   выглядит и ведёт себя иначе: без наведения, без стрелки, не нажимается. */
.pf-sch-lesson-card--locked { opacity: .62; cursor: default; }
.pf-sch-lesson-card--locked:hover { border-color: var(--pf-border); box-shadow: none; }
.pf-sch-lesson-card--locked .pf-sch-lesson-num { background: var(--pf-muted-bg); color: var(--pf-muted-text); }
.pf-sch-lock-mark {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; margin-bottom: var(--pf-sp-4);
	border-radius: 50%; background: var(--pf-muted-bg); color: var(--pf-muted-text);
}
.pf-sch-nav-lesson.is-locked { opacity: .55; cursor: default; }
.pf-sch-nav-lesson.is-locked:hover { background: none; color: inherit; }
.pf-sch-nav-lock { display: inline-flex; color: var(--pf-muted-text); }

/* ── Обложка урока: фотографии одной высоты на всех уроках ────────────────
   Высоту задавало содержимое: где вводный текст длиннее, там блок выше и
   фотография вытягивалась. Фиксировать высоту всего блока нельзя — на узком
   экране текст в тёмной панели не помещается (проверено: на 860 px не хватало
   до 104 px, и он обрезался). Поэтому фиксируется только сама фотография, а
   панель рядом растёт свободно; пустое место под фото — того же тёмного цвета,
   что и панель, поэтому читается как одно целое. */
.pf-sch-cover-img { height: 260px; }
.pf-sch-cover-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 640px) {
	.pf-sch-cover-img { height: 400px; align-self: start; }
}

/* Вводный текст задания: у авторских описаний по несколько абзацев,
   и колонка в 46 знаков делала из них узкий столбик. */
p.pf-sch-a-intro { max-width: unset; }

/* ── Материалы к заданию ──────────────────────────────────────────────────
   Файлы, которые студент скачивает: бланк домашнего задания, таблица аккорда,
   список веществ. На прежней платформе это был блок «ФАЙЛЫ». */
.pf-sch-materials {
	margin: var(--pf-sp-5) 0 var(--pf-sp-6); padding: var(--pf-sp-4) var(--pf-sp-5);
	background: var(--pf-surface-quiet); border: 1px solid var(--pf-border);
	border-radius: var(--pf-radius-lg);
}
.pf-sch-materials-cap {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: var(--pf-fs-12); font-weight: var(--pf-w-bold);
	text-transform: uppercase; letter-spacing: var(--pf-ls-caps); color: var(--pf-text-3);
	margin-bottom: var(--pf-sp-3);
}
.pf-sch-materials ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pf-sp-2); }
.pf-sch-materials li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pf-sp-3); }
.pf-sch-materials a { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--pf-w-semi); }
.pf-sch-materials a svg { flex: 0 0 auto; }
.pf-sch-materials-meta { font-size: var(--pf-fs-12); color: var(--pf-text-3); white-space: nowrap; }

/* ── Аккорд: база и доработки (встреча 13.09.2026) ────────────────────────
   Таблицы берут вёрстку дизайнера (.pf-sch-table-scroll + .pf-sch-accord-table),
   здесь только то, чего в макете ещё нет: карточка шага, ширины колонок под
   пять столбцов вместо версий и пометка происхождения строки.

   Единственное, что кодирует оформление, — кто поставил строку: зелёная полоса
   слева и подложка = рецепт преподавателя, обычная строка = добавил студент. */

.pf-sch-acc {
	background: var(--pf-surface); border: 1px solid var(--pf-border);
	border-radius: var(--pf-radius-lg); padding: var(--pf-sp-6);
	box-shadow: var(--pf-shadow-sm);
}
.pf-sch-acc + .pf-sch-acc { margin-top: var(--pf-sp-5); }
.pf-sch-acc-head { margin-bottom: var(--pf-sp-4); }
.pf-sch-acc-head h3 { margin-bottom: var(--pf-sp-2); }
.pf-sch-acc-lead {
	margin: var(--pf-sp-2) 0 0; color: var(--pf-text-2);
	font-size: var(--pf-fs-15); line-height: var(--pf-lh-body);
	text-wrap: pretty;   /* без ограничения по ширине — так просил заказчик */
}
/* Сводка для куратора: что именно сделала студентка, одной строкой. */
.pf-sch-acc-tally {
	margin: var(--pf-sp-2) 0 0; font-size: var(--pf-fs-13); color: var(--pf-text-2);
	font-variant-numeric: tabular-nums;
}
.pf-sch-acc-dot { color: var(--pf-n-400); margin: 0 var(--pf-sp-2); }

/* Пять колонок вместо версий — sticky и min-width из макета тут только мешают. */
.pf-sch-acc-table { min-width: 0; }
.pf-sch-acc-table tr > :first-child,
.pf-sch-acc-table tr > :nth-child(2) { position: static; box-shadow: none; }
.pf-sch-acc-table thead th { min-width: 0; vertical-align: bottom; white-space: normal; line-height: var(--pf-lh-snug); }
.pf-sch-acc-table thead th.pf-sch-col-n { width: 44px; }
.pf-sch-acc-table .pf-sch-acc-col-dil { width: 112px; }
.pf-sch-acc-table .pf-sch-acc-col-num { width: 142px; }
/* Граммы — вправо, там разряды должны стоять столбиком. Разведение прижато
   влево, к названию вещества: это не расчётная величина, а свойство сырья. */
.pf-sch-acc-table .pf-sch-acc-col-num,
.pf-sch-acc-table td.pf-sch-accord-grams,
.pf-sch-acc-table tbody td:last-child:not(.pf-sch-col-del) { text-align: right; }
.pf-sch-acc-table .pf-sch-acc-col-dil,
.pf-sch-acc-table td.pf-sch-acc-dil { text-align: left; }

/* Граница между рецептом преподавателя и работой студента — последняя колонка
   всегда «его». Это единственная вертикальная линия в таблице, и она означает
   ровно это. */
.pf-sch-acc-table--base tr > :nth-child(5),
.pf-sch-acc-table--step tr > :nth-child(3) { border-left: 1px solid var(--pf-border); }
.pf-sch-acc-table--base { min-width: 680px; }
.pf-sch-acc-table--step { min-width: 560px; }
.pf-sch-acc-table--step thead th:first-child { width: 46%; }
/* Поле названия не тянем на всю колонку: длинная пустая рамка читается как
   ошибка вёрстки, а имена веществ короткие. */
.pf-sch-acc-picker { max-width: 340px; }
.pf-sch-acc-dil { color: var(--pf-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-sch-acc-table .pf-sch-accord-name { white-space: normal; }
.pf-sch-acc-sub {
	display: block; margin-top: 2px; font-size: var(--pf-fs-12);
	font-weight: var(--pf-w-normal); color: var(--pf-text-3);
}

/* Строка от преподавателя. Полоса слева — на первой ячейке, чтобы не ломать
   скругления таблицы и не спорить со sticky-тенями макета. */
.pf-sch-acc-given > td { background: var(--pf-green-050); }
.pf-sch-acc-table tbody tr.pf-sch-acc-given:hover > td { background: var(--pf-green-100); }
.pf-sch-acc-given > td:first-child { box-shadow: inset 3px 0 0 var(--pf-green-300); }
.pf-sch-acc-solvent > td { border-top: 1px solid var(--pf-border-strong); }
.pf-sch-acc-empty td { color: var(--pf-text-3); font-size: var(--pf-fs-14); }

/* Поля внутри ячеек: числа прижаты вправо, названию нужна вся ширина. */
.pf-sch-acc-table .pf-sch-acc-g { text-align: right; max-width: 108px; margin-left: auto; }
.pf-sch-acc-table .pf-sch-acc-dil-in { max-width: 92px; text-align: left; margin-left: 0; }
.pf-sch-acc-picker { min-width: 180px; }
.pf-sch-acc-picker .pf-sch-pick-q { width: 100%; }
.pf-sch-acc-table--step tbody td:first-child { padding-right: var(--pf-sp-5); }

.pf-sch-acc-add { margin-top: var(--pf-sp-4); }
.pf-sch-acc-note { margin: var(--pf-sp-5) 0 0; }
.pf-sch-acc-note:last-child { margin-bottom: 0; }
.pf-sch-acc .pf-sch-table-scroll { margin-bottom: 0; box-shadow: var(--pf-shadow-xs); }

.pf-sch-sr {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 640px) {
	.pf-sch-acc { padding: var(--pf-sp-5) var(--pf-sp-4); }
	.pf-sch-acc-add { width: 100%; justify-content: center; }

	/* Таблица шире экрана и прокручивается вбок. Чтобы поле навески не уезжало
	   от своего вещества, закрепляем колонку с названием (механика из макета,
	   на широком экране она не нужна). Номер строки при этом убираем: порядок
	   и так виден, а 44 пикселя на узком экране дороже. */
	.pf-sch-acc-table .pf-sch-col-n { display: none; }
	.pf-sch-acc-table tr > :nth-child(2),
	.pf-sch-acc-table--step tr > :first-child {
		position: sticky; left: 0; z-index: 2; box-shadow: var(--pf-sticky-edge);
	}
	.pf-sch-acc-table thead tr > :nth-child(2),
	.pf-sch-acc-table--step thead tr > :first-child { z-index: 3; }
	.pf-sch-acc-table--base { min-width: 540px; }
	.pf-sch-acc-table--step { min-width: 470px; }
	.pf-sch-acc-table--base thead th:nth-child(2) { width: 150px; }
	.pf-sch-acc-table--step thead th:first-child { width: 150px; }
	/* У закреплённой ячейки две тени сразу: полоса происхождения и край скролла. */
	.pf-sch-acc-given > :nth-child(2),
	.pf-sch-acc-table--step .pf-sch-acc-given > :first-child {
		box-shadow: inset 3px 0 0 var(--pf-green-300), var(--pf-sticky-edge);
	}
	.pf-sch-acc-table .pf-sch-acc-col-dil { width: 104px; }
	.pf-sch-acc-table .pf-sch-acc-col-num { width: 116px; }
	.pf-sch-acc-table th, .pf-sch-acc-table td { padding: var(--pf-sp-3); }
	.pf-sch-acc-picker { min-width: 130px; }
}

/* Ссылка «В Формуляре» в шапке карточки аккорда — тот же приём, что у колонок
   версий в старой схеме (.pf-sch-accord-version-link из макета). */
.pf-sch-acc-head-row {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: var(--pf-sp-4); flex-wrap: wrap;
}
.pf-sch-acc-head-row h3 { margin-bottom: 0; }
.pf-sch-acc-formula-link {
	display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
	font-size: var(--pf-fs-13); font-weight: var(--pf-w-semi);
	color: var(--pf-green-700); text-decoration: none;
	border-bottom: 1px solid transparent;
}
.pf-sch-acc-formula-link:hover { color: var(--pf-green-800); border-bottom-color: var(--pf-green); }
.pf-sch-acc-formula-link svg { flex: 0 0 auto; }
.pf-sch-acc-head-row + .pf-sch-acc-tally,
.pf-sch-acc-head-row + .pf-sch-acc-lead { margin-top: var(--pf-sp-2); }

/* ── Ингредиенты открытых уроков ──────────────────────────────────────────
   Список того, что нужно закупить к занятиям. Купленное в PARFCLUB отмечено
   само, остальное студент отмечает руками. */
.pf-sch-stock-sum {
	display: flex; gap: var(--pf-sp-8); flex-wrap: wrap;
	margin-bottom: var(--pf-sp-5); padding: var(--pf-sp-5) var(--pf-sp-6);
}
.pf-sch-stock-sum strong {
	display: block; font-size: var(--pf-fs-24); font-weight: var(--pf-w-bold);
	letter-spacing: var(--pf-ls-tight); font-variant-numeric: tabular-nums;
}
.pf-sch-stock-sum span { font-size: var(--pf-fs-13); color: var(--pf-text-2); }
.pf-sch-stock-lesson + .pf-sch-stock-lesson { margin-top: var(--pf-sp-5); }
.pf-sch-stock-lesson .pf-sch-table-scroll { margin-bottom: 0; box-shadow: var(--pf-shadow-xs); }
.pf-sch-stock-table { min-width: 520px; }
.pf-sch-stock-table tr > :first-child,
.pf-sch-stock-table tr > :nth-child(2) { position: static; box-shadow: none; }
.pf-sch-stock-table thead th { min-width: 0; vertical-align: middle; }
.pf-sch-stock-col-have { width: 58px; text-align: center !important; }
.pf-sch-stock-col-pack { width: 110px; text-align: right !important; font-variant-numeric: tabular-nums; }
.pf-sch-stock-col-price { width: 120px; text-align: right !important; font-variant-numeric: tabular-nums; }
.pf-sch-stock-check { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pf-sch-stock-check input { width: 18px; height: 18px; accent-color: var(--pf-green); cursor: pointer; }
.pf-sch-stock-check input:disabled { cursor: default; }
/* Отмеченное приглушаем: взгляд должен цепляться за то, чего ещё нет. */
.pf-sch-stock-row--have .pf-sch-accord-name,
.pf-sch-stock-row--have .pf-sch-stock-col-pack,
.pf-sch-stock-row--have .pf-sch-stock-col-price { color: var(--pf-text-3); }
.pf-sch-stock-row--have .pf-sch-accord-name a { color: var(--pf-text-3); }
/* Названия сырья длинные и с двойным написанием — рвём по словам, не режем. */
.pf-sch-stock-table .pf-sch-accord-name { white-space: normal; overflow: visible; text-overflow: clip; }
.pf-sch-stock-cart {
	display: flex; align-items: center; gap: var(--pf-sp-5); flex-wrap: wrap;
	margin-top: var(--pf-sp-6); padding: var(--pf-sp-5) var(--pf-sp-6);
	background: var(--pf-green-050); border: 1px solid var(--pf-green-200);
	border-radius: var(--pf-radius-lg); box-shadow: var(--pf-inset-top), var(--pf-shadow-sm);
}
.pf-sch-stock-cart-text { flex: 1; min-width: 220px; }
.pf-sch-stock-cart-text strong { display: block; font-size: var(--pf-fs-16); letter-spacing: var(--pf-ls-flat); }
.pf-sch-stock-cart-text span { font-size: var(--pf-fs-14); color: var(--pf-text-2); }

/* Вводный урок: без номера, помечен словом — чтобы было видно, с чего начинать. */
.pf-sch-lesson-badge {
	display: inline-flex; align-items: center; margin-left: var(--pf-sp-3);
	padding: 2px 8px; border-radius: var(--pf-radius-pill);
	background: var(--pf-green-100); border: 1px solid var(--pf-green-200);
	color: var(--pf-green-800); font-size: var(--pf-fs-11); font-weight: var(--pf-w-bold);
	text-transform: uppercase; letter-spacing: var(--pf-ls-caps); white-space: nowrap;
}
.pf-sch-lesson-num svg { color: var(--pf-green-700); }
/* Бланк для печати — вспомогательное действие, слева от главной кнопки. */
.pf-sch-print-link { margin-right: auto; }

/* ── Переписка с куратором ────────────────────────────────────────────────
   Лента одна на курс: вопрос задаётся из урока, а история видна целиком. */
.pf-sch-chat { margin-top: var(--pf-sp-6); }
.pf-sch-chat > h3 { margin-bottom: var(--pf-sp-2); }
.pf-sch-msg-list {
	display: flex; flex-direction: column; gap: var(--pf-sp-3);
	margin: var(--pf-sp-5) 0; max-height: 420px; overflow-y: auto;
}
.pf-sch-msg {
	align-self: flex-start; max-width: 80%;
	padding: var(--pf-sp-3) var(--pf-sp-4);
	background: var(--pf-surface-quiet); border: 1px solid var(--pf-border);
	border-radius: var(--pf-radius-md);
}
/* Свои письма справа и зелёные — как в любом мессенджере, узнаётся без подписи. */
.pf-sch-msg--mine {
	align-self: flex-end; background: var(--pf-green-050); border-color: var(--pf-green-200);
}
.pf-sch-msg-head {
	display: flex; align-items: baseline; gap: var(--pf-sp-3);
	font-size: var(--pf-fs-12); margin-bottom: 2px;
}
.pf-sch-msg-head strong { font-weight: var(--pf-w-semi); }
.pf-sch-msg-head span { color: var(--pf-text-3); }
.pf-sch-msg-body { font-size: var(--pf-fs-14); line-height: var(--pf-lh-body); }
.pf-sch-msg-tag {
	align-self: flex-start; margin-top: -6px;
	font-size: var(--pf-fs-11); color: var(--pf-text-3);
	text-transform: uppercase; letter-spacing: var(--pf-ls-caps);
}
.pf-sch-msg--mine + .pf-sch-msg-tag { align-self: flex-end; }
.pf-sch-chat-form { margin-bottom: var(--pf-sp-3); }

/* Покупка по одному уроку — под кнопкой «весь курс». */
.pf-sch-offers { margin-top: var(--pf-sp-6); text-align: left; }
.pf-sch-offers-cap {
	display: block; font-size: var(--pf-fs-12); font-weight: var(--pf-w-bold);
	text-transform: uppercase; letter-spacing: var(--pf-ls-caps);
	color: var(--pf-text-3); margin-bottom: var(--pf-sp-3);
}
.pf-sch-offers ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-sch-offers a {
	display: flex; align-items: center; justify-content: space-between; gap: var(--pf-sp-3);
	padding: var(--pf-sp-3) var(--pf-sp-4); border-radius: var(--pf-radius-md);
	border: 1px solid transparent; font-size: var(--pf-fs-14); text-decoration: none;
}
.pf-sch-offers a:hover { background: var(--pf-surface-quiet); border-color: var(--pf-border); }

/* Чат отдельным разделом: лента во всю карточку, под ней поле с вложениями. */
.pf-sch-chat--page .pf-sch-msg-list { max-height: 60vh; margin-top: 0; }
.pf-sch-chat-empty { text-align: center; padding: var(--pf-sp-7) 0; }
.pf-sch-chat-compose { display: flex; flex-direction: column; gap: var(--pf-sp-3); }
.pf-sch-chat-compose textarea { width: 100%; }
.pf-sch-chat-actions { display: flex; align-items: center; gap: var(--pf-sp-3); }
.pf-sch-chat-attach { cursor: pointer; }
.pf-sch-chat-actions .pf-sch-btn--primary { margin-left: auto; }
.pf-sch-chat-files { display: flex; flex-wrap: wrap; gap: var(--pf-sp-2); }
.pf-sch-chat-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 6px 4px 10px; border-radius: var(--pf-radius-pill);
	background: var(--pf-surface-quiet); border: 1px solid var(--pf-border);
	font-size: var(--pf-fs-13);
}
.pf-sch-chat-chip button {
	border: 0; background: none; cursor: pointer; color: var(--pf-text-3);
	font-size: var(--pf-fs-16); line-height: 1; padding: 0 2px;
}
.pf-sch-chat-chip button:hover { color: var(--pf-err-text); }
/* Вложения в сообщении: фото превью, документы строкой. */
.pf-sch-msg-files { display: flex; flex-wrap: wrap; gap: var(--pf-sp-2); margin-top: var(--pf-sp-2); }
.pf-sch-msg-img img {
	display: block; max-width: 180px; max-height: 180px; border-radius: var(--pf-radius-sm);
	border: 1px solid var(--pf-border);
}
.pf-sch-msg-file {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px; border-radius: var(--pf-radius-pill);
	background: var(--pf-surface); border: 1px solid var(--pf-border);
	font-size: var(--pf-fs-13); text-decoration: none;
}
.pf-sch-msg-file:hover { border-color: var(--pf-border-hover); }
/* Даты прохождения урока — справочная строка под статусом карточки. */
.pf-sch-lesson-dates { color: var(--pf-text-3); font-size: var(--pf-fs-12); white-space: nowrap; }

/* Поиск по курсу. */
.pf-sch-search { display: flex; gap: var(--pf-sp-3); margin-bottom: var(--pf-sp-5); }
.pf-sch-search input { flex: 1; }
.pf-sch-search-results { display: flex; flex-direction: column; gap: var(--pf-sp-3); }
.pf-sch-search-hit {
	display: block; padding: var(--pf-sp-4) var(--pf-sp-5);
	background: var(--pf-surface); border: 1px solid var(--pf-border);
	border-radius: var(--pf-radius-lg); text-decoration: none; color: inherit;
}
.pf-sch-search-hit:hover { border-color: var(--pf-border-hover); box-shadow: var(--pf-shadow-sm); }
.pf-sch-search-lesson {
	display: block; font-size: var(--pf-fs-12); font-weight: var(--pf-w-bold);
	text-transform: uppercase; letter-spacing: var(--pf-ls-caps);
	color: var(--pf-green-700); margin-bottom: var(--pf-sp-2);
}
.pf-sch-search-text { display: block; font-size: var(--pf-fs-14); line-height: var(--pf-lh-body); color: var(--pf-text-2); }
.pf-sch-search-text mark { background: var(--pf-green-100); color: var(--pf-text); padding: 0 2px; border-radius: 3px; }
/* Свой логотип школы: пропорции чужие, поэтому ограничиваем только высотой. */
/* Логотип школы вытянутый (PARFSCHOOL.ONLINE) — ведём по ширине, не по высоте. */
.pf-sch-brand-mark--own { width: 100%; max-width: 190px; height: auto; object-fit: contain; }
.pf-sch-brand:has(.pf-sch-brand-mark--own) .pf-sch-brand-school { display: none; }

/* Шапке нужен воздух: логотип школы вытянутый и в притык к краям смотрелся тесно. */
.pf-sch-header-inner {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* ── Якоря глав ───────────────────────────────────────────────────────────
   Оглавление липнет к верху, и переход по ссылке прятал заголовок под ним.
   Отступ равен высоте панели с запасом на воздух. */
.pf-sch-blocks [id^="gl-"] { scroll-margin-top: 96px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Знак PARFCLUB: связь школы с магазином ───────────────────────────────
   Правый верхний угол страницы, на одной линии с хлебными крошками: пометка
   о среде, в которой идёт работа. Светлая плашка с обводкой — чтобы не
   спорила с логотипом школы в колонке слева. Не липкая: увидели один раз
   наверху и дальше она не мешает читать. */
.pf-sch-partner {
	/* Правый край — не края экрана, а колонки с текстом: иначе на широком
	   мониторе знак уезжает далеко в сторону и читается как чужой элемент.
	   Высота — строка хлебных крошек, чтобы стоял с ними заподлицо. */
	/* Стоит в самой строке крошек (переносит туда placePartnerMark() в school.js):
	   отступ сверху не вычисляем — у куратора над страницей админ-панель, и любой
	   расчёт от края уезжал. До переноса знак скрыт, чтобы не мелькал. */
	visibility: hidden;
	margin-left: auto;
	display: inline-flex; align-items: center;
	padding: 5px 10px;
	background: var(--pf-surface); border: 1px solid var(--pf-border);
	border-radius: 10px;
	opacity: .85; transition: opacity var(--pf-t) var(--pf-ease), border-color var(--pf-t) var(--pf-ease);
}
.pf-sch-partner.is-placed { visibility: visible; }
.pf-sch-partner:hover { opacity: 1; border-color: var(--pf-border-hover); }
.pf-sch-partner img { width: auto; height: 20px; display: block; }
.pf-sch-partner-tip {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
	width: max-content; max-width: 280px;
	padding: var(--pf-sp-3) var(--pf-sp-4);
	background: var(--pf-ink); color: var(--pf-n-0);
	border-radius: var(--pf-radius-md); box-shadow: var(--pf-shadow-md);
	font-size: var(--pf-fs-13); line-height: var(--pf-lh-snug);
	opacity: 0; visibility: hidden; transition: opacity var(--pf-t) var(--pf-ease);
}
.pf-sch-partner:hover .pf-sch-partner-tip,
.pf-sch-partner:focus-visible .pf-sch-partner-tip { opacity: 1; visibility: visible; }
@media (max-width: 900px) {
	/* В узкой шапке подсказке негде раскрыться, а знак встаёт в строку. */
	.pf-sch-partner-tip { display: none; }
	.pf-sch-partner { margin-left: auto; }
	.pf-sch-partner img { height: 14px; }
}
}
}
/* Знак позиционируется от области контента — ей нужна точка отсчёта. */
.pf-sch-main { position: relative; }

/* ── Кадры в блоках «текст + фото» ────────────────────────────────────────
   Фотографии курса сняты в разных пропорциях: портрет, квадрат, широкий
   кадр. В ленте они прыгали по высоте, и колонка текста рядом съезжала.
   Один кадр 4:3 для всех — картинка подрезается по центру, пропорции целы. */
.pf-sch-twi-fig img {
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	object-position: center;
}
@media (max-width: 640px) {
	/* На узком экране кадр и так во всю ширину — лишняя подрезка ни к чему. */
	.pf-sch-twi-fig img { aspect-ratio: 3 / 2; }
}
/* Автоссылка на вещество в тексте урока: заметна, но не рвёт чтение. */
.pf-sch-ing-link {
	color: inherit; text-decoration: none;
	border-bottom: 1px dashed var(--pf-green-300);
}
.pf-sch-ing-link:hover { color: var(--pf-green-800); border-bottom-color: var(--pf-green); }

/* Фото в блоках «текст + фото» крупнее: 300 px на широком экране мало —
   детали сырья и этикеток на них не разглядеть. Колонка шире, кадр 4:3
   растёт вместе с ней. */
@media (min-width: 768px) {
	.pf-sch-twi:has(.pf-sch-twi-fig) {
		grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	}
}

/* ── Ориентация кадра ─────────────────────────────────────────────────────
   Фотографии в курсе сняты и вдоль, и поперёк. «Как есть» оставляет
   пропорции файла; выбор в админке задаёт кадр принудительно. */
.pf-sch-fig--land img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
.pf-sch-fig--port img { aspect-ratio: 3 / 4; object-fit: cover; width: auto; max-height: 560px; }

/* Широкое фото-перебивка: во всю ширину листа, высота — примерно треть. */
.pf-sch-wide-fig img {
	width: 100%; height: auto; aspect-ratio: 16 / 6; object-fit: cover;
	border-radius: var(--pf-radius-lg); display: block;
}
@media (max-width: 640px) { .pf-sch-wide-fig img { aspect-ratio: 16 / 9; } }
/* Подложки врезок: в собранном Tailwind этих оттенков нет — задаём здесь. */
.pf-sch-blocks .bg-\[\#fdf6e3\] { background-color: #fdf6e3; }
.pf-sch-blocks .border-\[\#f0e2bd\] { border-color: #f0e2bd; }
.pf-sch-blocks .bg-\[\#fdf1f2\] { background-color: #fdf1f2; }
.pf-sch-blocks .border-\[\#f2d6d9\] { border-color: #f2d6d9; }

/* ── Чтение во всю ширину ─────────────────────────────────────────────────
   Кнопка живёт в строке крошек рядом со знаком партнёра; до установки на
   место скрыта, чтобы не мелькала. */
.pf-sch-wide-toggle {
	visibility: hidden; margin-left: auto;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 10px; border-radius: 10px;
	background: var(--pf-surface); border: 1px solid var(--pf-border);
	color: var(--pf-text-2); font-size: var(--pf-fs-13); cursor: pointer;
	transition: border-color var(--pf-t) var(--pf-ease), color var(--pf-t) var(--pf-ease);
}
.pf-sch-wide-toggle.is-placed { visibility: visible; }
.pf-sch-wide-toggle:hover { border-color: var(--pf-border-hover); color: var(--pf-text); }
.pf-sch-wide-toggle + .pf-sch-partner { margin-left: var(--pf-sp-3); }
/* Сама колонка: прячем, а лист текста занимает освободившееся место. */
body.pf-sch-wide .pf-sch-header { display: none; }
body.pf-sch-wide .pf-sch-main,
body.pf-sch-wide .pf-sch-footer { grid-column: 1 / -1 !important; }
@media (max-width: 900px) { .pf-sch-wide-toggle { display: none; } }
/* Метка блока для меню урока: невидима, нужна только как цель перехода. */
.pf-sch-blk-anchor { display: block; height: 0; scroll-margin-top: 96px; }