/*
 * Темы. Сайт красит страницу сам: дизайн 3 — всегда тёмный (versions/v3.css в списке стилей), дизайн 4 — тёмный по
 * системной настройке (v3.css с media="(prefers-color-scheme: dark)", head.php), дизайны 1–2 — светлые. Панель задаёт
 * и фон, и цвет текста сама, иначе на тёмной странице текст body (hsl(0,0%,80%)) остаётся на светлом фоне панели.
 * Класс темы ставит LearnPage::themeClass(): learn-dark — всегда тёмная, learn-auto — по системной настройке.
 * Тёмные значения продублированы в двух правилах: условие «класс» и условие «класс + media» одним селектором не записать.
 * Фон, текст и рамка берутся из переменных v3.css (--bg3, --text-color, --border-color); запасные значения — на случай,
 * если файла нет. Все пары текст/фон проверены на контраст не ниже 4.5:1.
 */
.learn-page {
    --learn-panel-bg: #f7f7f5; --learn-panel-border: #e3e3df; --learn-panel-text: #222; --learn-panel-muted: #555;
    --learn-muted: #595959;
    --learn-error: #b42318; --learn-success: #2f7a25; --learn-hint: #8a5a00;
    --learn-star-on: #a87d00;   /* звезда и отметки уроков — крупные знаки, нужно 3:1: к светлой панели 3.5:1 */
    --learn-btn-bg: #fff; --learn-btn-border: #8c8c85; --learn-btn-text: #222;
    --learn-primary-bg: #2f6fae; --learn-primary-text: #fff;
    --learn-step: #d6d6d0; --learn-step-done: #4a9b3d; --learn-step-current: #2f6fae;
    --learn-done-bg: #e6f2e2; --learn-test-bg: #e9f0f8;   /* плитки: пройден/зачтён, тест модуля */
    --learn-stage-bg-opacity: .6;   /* акварельный фон карточки ступени */
    --learn-skel-light: #ecebe6; --learn-skel-dark: #dcdad3;   /* скелетон доски до монтирования (решение 129) */
}
.learn-page.learn-dark {
    --learn-panel-bg: var(--bg3, #2d2d2d); --learn-panel-border: var(--border-color, #424242);
    --learn-panel-text: var(--text-color, #ccc); --learn-panel-muted: #b0b0b0;
    --learn-muted: #aaa;
    --learn-error: #f08080; --learn-success: #7bd36f; --learn-hint: #e6b450;
    --learn-star-on: #f5b301;
    --learn-btn-bg: var(--bg1, #333); --learn-btn-border: #7a7a7a; --learn-btn-text: var(--text-color, #ccc);
    --learn-primary-bg: #5aa0e0; --learn-primary-text: #0f1b2a;
    --learn-step: #555; --learn-step-done: #4ea84a; --learn-step-current: #5aa0e0;
    --learn-done-bg: #253a22; --learn-test-bg: #22303f;
    --learn-stage-bg-opacity: .3;
    --learn-skel-light: #3a3a3a; --learn-skel-dark: #323232;
}
@media (prefers-color-scheme: dark) {
    .learn-page.learn-auto {
        --learn-panel-bg: var(--bg3, #2d2d2d); --learn-panel-border: var(--border-color, #424242);
        --learn-panel-text: var(--text-color, #ccc); --learn-panel-muted: #b0b0b0;
        --learn-muted: #aaa;
        --learn-error: #f08080; --learn-success: #7bd36f; --learn-hint: #e6b450;
        --learn-star-on: #f5b301;
        --learn-btn-bg: var(--bg1, #333); --learn-btn-border: #7a7a7a; --learn-btn-text: var(--text-color, #ccc);
        --learn-primary-bg: #5aa0e0; --learn-primary-text: #0f1b2a;
        --learn-step: #555; --learn-step-done: #4ea84a; --learn-step-current: #5aa0e0;
        --learn-done-bg: #253a22; --learn-test-bg: #22303f;
        --learn-stage-bg-opacity: .3;
    --learn-skel-light: #3a3a3a; --learn-skel-dark: #323232;
    }
}
.learn-page { max-width: 1100px; margin: 0 auto; padding: 0 16px 32px; }
.learn-crumbs { font-size: 14px; margin: 8px 0; color: var(--learn-muted); }
.learn-page h1 { font-size: 28px; line-height: 1.25; margin: 8px 0; }
.learn-answer { font-size: 18px; line-height: 1.5; margin: 0 0 16px; }
.learn-zone { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.learn-board-wrap { position: relative; width: 100%; max-width: 640px; }
.learn-board { width: 100%; aspect-ratio: 1 / 1; }
/* Картинка первой позиции (spec §4.5) — для посетителей без JS, поисковиков и og:image: она нарисована в стандартном стиле и
   с JS мелькала бы чужой доской перед доской в стиле ученика (решение 129). С JS (ранний learn-js) её не видно; страховка
   шаблона снимает learn-js через 8 с без монтирования — тогда картинка снова видна. */
.learn-board-start { position: absolute; inset: 0; z-index: 1; }
.learn-board-start img { display: block; width: 100%; height: 100%; }
.learn-js .learn-board-start, [data-learn-mounted] .learn-board-start { visibility: hidden; }
/* Скелетон доски (решение 129): пока JS не нарисовал доску (класс learn-board-ready, L.boardReady) — серая клетчатая заготовка
   в квадрат доски с мягким переливом. */
.learn-js:not(.learn-board-ready) .learn-board-wrap::before,
.learn-js:not(.learn-board-ready) .learn-board-wrap::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 4px; pointer-events: none; }
.learn-js:not(.learn-board-ready) .learn-board-wrap::before {
    background: repeating-conic-gradient(var(--learn-skel-dark) 0 25%, var(--learn-skel-light) 0 50%) 0 0 / 25% 25%; }
.learn-js:not(.learn-board-ready) .learn-board-wrap::after {
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%) 0 0 / 250% 100% no-repeat;
    animation: learn-skel 1.4s ease-in-out infinite; }
@keyframes learn-skel { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.learn-task-top { display: none; }
.learn-panel { background: var(--learn-panel-bg); color: var(--learn-panel-text); border: 1px solid var(--learn-panel-border); border-radius: 8px; padding: 16px; }
.learn-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; color: var(--learn-panel-muted); }
.learn-steps { display: flex; gap: 4px; }
.learn-step { width: 18px; height: 6px; border-radius: 3px; background: var(--learn-step); }
.learn-step.is-done { background: var(--learn-step-done); }
.learn-step.is-current { background: var(--learn-step-current); }
.learn-theory p { margin: 0 0 8px; line-height: 1.5; }
.learn-tasks { margin: 12px 0; padding-left: 20px; }
.learn-js .learn-tasks { list-style: none; padding: 0; }
/* is-current у первого задания ставит сервер (lesson.php): до монтирования JS задание видно, дальше его ведёт lesson.js */
.learn-js .learn-tasks li { display: none; font-weight: 600; font-size: 17px; }
.learn-js .learn-tasks li.is-current { display: block; }
/* «Ещё практика»: задание доски — в панели, как у обычных заданий (li.learn-task-practice), над доской только на телефоне */
.learn-tasks li.learn-task-practice:empty { display: none; }   /* пустой li (без JS и вне практики) не рисует пустой номер */
.learn-practice-note { margin: 4px 0 8px; line-height: 1.45; color: var(--learn-muted); }
.learn-practice-note[hidden], .learn-next-lesson[hidden] { display: none; }
.learn-next-lesson { text-decoration: none; display: inline-block; }
.learn-choice { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.learn-choice[hidden] { display: none; }
.learn-choice p { width: 100%; margin: 0; }
/* Соперник партии (урок 22): состояние «Компьютера» и «Другой соперник» */
.learn-opponent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.learn-opponent[hidden] { display: none; }
.learn-opponent-status { font-size: 14px; opacity: .8; }
.learn-opponent-status:empty { display: none; }
.learn-feedback { min-height: 48px; margin: 8px 0; line-height: 1.4; }
/* Пустая строка обратной связи (доска без действий, ещё нет ответа) не держит место между шапкой и кнопками; живая область остаётся в DOM */
.learn-feedback:empty { min-height: 0; margin: 0 0 15px; }
.learn-feedback.is-error { color: var(--learn-error); }
.learn-feedback.is-success { color: var(--learn-success); font-weight: 600; }
.learn-feedback.is-hint { color: var(--learn-hint); }
.learn-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.learn-btn { font: inherit; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--learn-btn-border); background: var(--learn-btn-bg); color: var(--learn-btn-text); cursor: pointer; }
.learn-btn:disabled { opacity: .45; cursor: default; }
.learn-btn-primary { background: var(--learn-primary-bg); border-color: var(--learn-primary-bg); color: var(--learn-primary-text); }
.learn-reference, .learn-faq, .learn-related, .learn-further { max-width: 760px; margin-top: 32px; line-height: 1.6; }
.learn-related ul { margin: 8px 0 0; padding-left: 20px; }
/* Схема в справке и хабе */
.learn-figure { max-width: 400px; margin: 16px 0; }
.learn-figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
.learn-figure figcaption { margin-top: 6px; font-size: 14px; color: var(--learn-muted); }
/* Хаб «Как ходят фигуры» */
.learn-hub-toc { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 24px; }
.learn-hub-piece { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px 24px; align-items: start; max-width: 960px; margin: 32px 0; }
.learn-hub-piece h2 { grid-column: 1 / -1; margin: 0; }
.learn-hub-piece .learn-figure { margin: 0; }
.learn-hub-text p { line-height: 1.6; margin: 0 0 10px; }
.learn-soon { color: var(--learn-muted); }
@media (max-width: 767px) {
    .learn-hub-piece { grid-template-columns: minmax(0, 1fr); }
}
/* Страница «Правила шахмат кратко»: карточки по сетке, на телефоне в столбец */
.learn-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px 24px; max-width: 960px; margin-top: 32px; }
.learn-rule h2 { margin: 0 0 8px; font-size: 1.17em; }
.learn-rule .learn-figure { margin: 0 0 8px; max-width: none; }
.learn-rule p { margin: 0 0 6px; line-height: 1.5; }
.learn-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin: 32px 0 8px; }
.learn-trust { font-size: 13px; color: var(--learn-muted); }
.learn-module { margin: 24px 0; }
/* Плавная прокрутка страниц обучения (решение 128): автопрокрутка к «Дальше» и к заданию, кнопка «?» к теории. Плавная и при
   «Уменьшении движения» в системе (решение владельца): резкий скачок страницы сбивает сильнее; выключается пунктом «Автопрокрутка». */
html { scroll-behavior: smooth; }
/* Галочка верного решения (решение 128): 2 с, рост 1 → 2 клетки, непрозрачность 0 → 0,85 (ease-in) → 0 (ease-out); и при «Уменьшении движения» */
.learn-check { position: absolute; left: 50%; top: 50%; width: 12.5%; height: 12.5%; z-index: 15; pointer-events: none; opacity: 0;
    transform: translate(-50%, -50%) scale(1); animation: learn-check-grow 2s linear forwards, learn-check-fade 2s linear forwards; }
.learn-check svg { display: block; width: 100%; height: 100%; }
@keyframes learn-check-grow { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -50%) scale(2); } }
@keyframes learn-check-fade { 0% { opacity: 0; animation-timing-function: ease-in; } 50% { opacity: .85; animation-timing-function: ease-out; } 100% { opacity: 0; } }
.learn-promotion { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(0, 0, 0, .35); }
.learn-promotion-panel { padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
.learn-promotion-title { margin: 4px 0 6px; font-size: 17px; font-weight: 600; text-align: center; color: #222; }
.learn-promotion .learn-promotion-pieces { display: flex; gap: 4px; }
.learn-promotion-piece { width: min(72px, 18vw); height: min(72px, 18vw); padding: 4px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.learn-promotion-piece:hover, .learn-promotion-piece:focus-visible { background: #e8eef5; outline: none; }
.learn-promotion .learn-promotion-pieces piece { position: static; display: block; width: 100%; height: 100%; transform: none; pointer-events: none; }
@media (max-width: 767px) {
    .learn-zone { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .learn-page h1 { font-size: 24px; }
    .learn-answer { font-size: 16px; }
    /* задание над доской на телефоне (текст выводит сервер, JS ставит learn-js до первой отрисовки); без JS задание —
       в списке, блок не нужен: не дублирует его у урока и не даёт пустой отступ у теста */
    .learn-js .learn-task-top { display: block; font-weight: 600; margin: 0 0 8px; }
    .learn-js .learn-tasks { display: none; }   /* задание уже над доской; без JS список остаётся */
    /* Кнопки компактнее: «?», «Подсказка», «Заново» и «Дальше (5)» в одну строку и на 320 px (внутри панели ~270 px),
       «Дальше» — у правого края (решение 113). Лишние кнопки («Ещё практика», «Следующий урок») переносятся на следующую строку. */
    .learn-panel { padding: 12px 8px; }
    .learn-actions { gap: 3px; }
    .learn-actions .learn-btn { padding: 9px 5px; font-size: 13px; white-space: nowrap; }
    .learn-actions .learn-btn-theory { min-width: 30px; padding-left: 0; padding-right: 0; }
    .learn-page:not(.learn-quiz) .learn-actions [data-learn-action="next"] { margin-left: auto; }
}
@media (min-width: 360px) and (max-width: 767px) {
    .learn-actions { gap: 6px; }
    .learn-actions .learn-btn { padding: 9px 9px; font-size: 14px; }
    .learn-actions .learn-btn-theory { min-width: 34px; }
}
/* Запас фигур (setup): под доской; фигуры рисует all_figures.css внутри .figures_* .cg-wrap */
.learn-spare { margin-top: 8px; }
.learn-spare[hidden] { display: none; }
.learn-spare .cg-wrap { display: flex; flex-wrap: wrap; gap: 6px; width: auto; height: auto; }
/* Плитка — светлая в обеих темах, как поле доски: на тёмной кнопке чёрные фигуры сливаются с фоном, видна только обводка. */
.learn-spare-piece { position: relative; width: 48px; height: 48px; padding: 2px; border: 1px solid var(--learn-btn-border); border-radius: 6px; background: #f0ede6; cursor: pointer; }
.learn-spare-piece.is-selected { outline: 3px solid var(--learn-primary-bg); outline-offset: 1px; }
.learn-spare-piece:disabled { opacity: .35; cursor: default; }
.learn-spare .cg-wrap piece { position: static; display: block; width: 100%; height: 100%; transform: none; pointer-events: none; }
.learn-spare-count { position: absolute; right: 3px; bottom: 1px; font-size: 12px; font-weight: 700; color: #222; }
/* Таймер доски на время */
.learn-timer { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--learn-panel-text); }
.learn-timer[hidden] { display: none; }
.learn-move-count { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--learn-panel-text); }
.learn-move-count[hidden] { display: none; }
.learn-timer.is-low { color: var(--learn-error); }
/* Шестерёнка настроек в шапке панели (решение 113) и меню под ней: «Звук», «Автопереход дальше» */
.learn-settings { position: relative; flex-shrink: 0; }
.learn-gear { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--learn-btn-border); border-radius: 6px; background: var(--learn-btn-bg); color: var(--learn-btn-text); cursor: pointer; }
.learn-gear[hidden], .learn-menu[hidden] { display: none; }
.learn-gear[aria-expanded="true"] { border-color: var(--learn-primary-bg); }
.learn-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 25; min-width: 220px; padding: 4px; border: 1px solid var(--learn-btn-border); border-radius: 8px; background: var(--learn-panel-bg); color: var(--learn-panel-text); box-shadow: 0 4px 14px rgba(0, 0, 0, .22); }
.learn-menu-item { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; font-size: 15px; text-align: left; white-space: nowrap; cursor: pointer; }
.learn-menu-item:hover, .learn-menu-item:focus-visible { background: var(--learn-step); outline: none; }
.learn-menu-item[aria-checked="true"]::before { content: '\2713'; display: inline-block; width: 1.3em; color: var(--learn-step-done); font-weight: 700; }
.learn-menu-item[aria-checked="false"]::before { content: ''; display: inline-block; width: 1.3em; }
/* Тесная шапка (телефон, доска на время, шестерёнка): подпись и таймер не переносятся — сжимается полоска шагов */
.learn-number, .learn-timer { white-space: nowrap; }
.learn-steps { min-width: 0; }
.learn-step { flex: 0 1 18px; min-width: 4px; }
/* Зелёный шаг урока — кнопка перехода к доске (решение 109): полоска та же, зона нажатия выше её на 9 px с каждой стороны */
button.learn-step { position: relative; padding: 0; border: 0; cursor: pointer; font: inherit; }
button.learn-step::before { content: ''; position: absolute; left: -2px; right: -2px; top: -9px; bottom: -9px; }
button.learn-step:hover { filter: brightness(1.15); }
button.learn-step:focus-visible { outline: 2px solid var(--learn-step-current); outline-offset: 2px; }
/* Звёзды доски и урока */
/* звёзды — с новой строки под текстом итога (решение 113) */
.learn-stars { display: flex; gap: 2px; margin-top: 4px; }
.learn-star { display: inline-block; color: var(--learn-muted); font-size: 22px; line-height: 1; }
.learn-star.is-on { color: var(--learn-star-on); animation: learn-star-pop .45s ease-out both; }
@keyframes learn-star-pop { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
/* Ошибка — короткая тряска строки */
.learn-feedback.is-shake { animation: learn-shake .35s ease-in-out; }
@keyframes learn-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
/* Конфетти поверх доски и панели */
.learn-zone { position: relative; }
.learn-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }
@media (prefers-reduced-motion: reduce) {
    .learn-star.is-on, .learn-feedback.is-shake { animation: none; }
}
/* «?» — подсветка карточки теории */
.learn-theory.is-flash { animation: learn-flash 1.2s ease-out; border-radius: 6px; }
@keyframes learn-flash { 0% { background: rgba(245, 179, 1, .35); } 100% { background: transparent; } }
.learn-btn-theory { min-width: 40px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
    .learn-theory.is-flash { animation: none; outline: 3px solid var(--learn-star-on); outline-offset: 4px; }
}
/* Телефон: вопрос/«Старт», обратная связь и кнопки — сразу под доской, теория и список заданий — ниже */
@media (max-width: 767px) {
    .learn-panel { display: flex; flex-direction: column; }
    .learn-panel-head { order: 0; }
    .learn-choice, .learn-opponent { order: 1; }
    .learn-feedback, .learn-result { order: 2; }   /* итог урока — сразу под строкой обратной связи */
    .learn-actions, .learn-plaque { order: 3; }   /* плашка — сразу под кнопками (порядок в разметке), до теории */
    .learn-theory { order: 4; margin-top: 12px; }
    .learn-tasks { order: 5; }
}
/* Итог урока: звание, серия, цель дня, предложение регистрации */
.learn-result { margin: 4px 0 12px; line-height: 1.45; }
/* Пустая живая область не прячется (её бы не зачитали), а просто не занимает места */
.learn-result:empty { margin: 0; }
/* Ссылки-кнопки (регистрация, вход, «Пройти с начала»): без подчёркивания и без цвета ссылок сайта при наведении */
a.learn-btn, a.learn-btn:hover, a.learn-btn:focus { display: inline-block; text-decoration: none; color: var(--learn-btn-text); }
a.learn-btn-primary, a.learn-btn-primary:hover, a.learn-btn-primary:focus { color: var(--learn-primary-text); }
.learn-result p { margin: 0 0 6px; }
/* Заголовок итога, переехавший из строки обратной связи после «Заново» (решение 73), — тем же видом «успеха» */
.learn-result-headline { color: var(--learn-success); font-weight: 600; }
.learn-rank.is-new { font-weight: 700; animation: learn-rank-pop .6s ease-out both; }
@keyframes learn-rank-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.learn-nudge { position: relative; margin-top: 8px; padding: 10px 48px 10px 12px; border: 1px solid var(--learn-panel-border); border-radius: 8px; }
.learn-nudge[hidden] { display: none; }
.learn-nudge-close, .learn-plaque-close { position: absolute; top: 0; right: 0; width: 44px; height: 44px; border: 0; background: transparent; color: inherit; font-size: 22px; cursor: pointer; }
/* Плашка прямого захода: тихая строка в панели под кнопками (решение 74) — ничего не закрывает, крестик справа */
.learn-plaque { position: relative; margin-top: 12px; padding: 8px 48px 0 0; border-top: 1px solid var(--learn-panel-border);
    font-size: 14px; line-height: 1.5; color: var(--learn-panel-text); }
.learn-plaque[hidden] { display: none; }
.learn-plaque .learn-plaque-close { right: 0; }
@media (prefers-reduced-motion: reduce) {
    .learn-rank.is-new { animation: none; }
}
/* Карта: карточка прогресса, статусы уроков, диалог пропуска */
.learn-progress { display: grid; gap: 6px 16px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; max-width: 760px;
    margin: 16px 0 8px; padding: 14px 16px; border-radius: 8px; background: var(--learn-panel-bg); color: var(--learn-panel-text);
    border: 1px solid var(--learn-panel-border); min-height: 96px; box-sizing: border-box; }
.learn-progress-main, .learn-progress-day { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.learn-progress-day { grid-column: 1; color: var(--learn-panel-muted); }
/* Текст и его «?»: текст переносится внутри группы, «?» не уходит на отдельную строку */
.learn-help-group { display: inline-flex; align-items: center; min-width: 0; }
.learn-help-group > .learn-help { flex: none; }
.learn-progress { align-content: center; }   /* строки по содержимому и по центру карточки: у новичка одна строка текста — по центру высоты */
/* Кнопка рядом с текстом — не шире 280px, длинное «Продолжить: ступень N, урок M «…»» переносится и стоит по центру */
.learn-progress .learn-continue { grid-column: 2; grid-row: 1 / span 2; text-decoration: none; }
.learn-progress a.learn-continue { max-width: 280px; text-align: center; }
.learn-progress:not(:has(.learn-progress-day)) .learn-continue { grid-row: 1; }   /* без строки серии (новичок) — одна строка сетки */
.learn-continue.is-done { color: var(--learn-success); font-weight: 600; }
.learn-progress div.learn-continue { white-space: normal; }   /* блок сертификата гостя — текст, а не кнопка: переносится */
/* Только в карточке: строка звания в итоге урока (lesson.js) остаётся обычной */
.learn-progress .learn-rank { font-weight: 600; }
.learn-lesson-status { margin-left: 8px; color: var(--learn-star-on, #a87d00); letter-spacing: 1px; }
.learn-dialog { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(0, 0, 0, .4); }
.learn-dialog[hidden] { display: none; }
.learn-dialog-box { max-width: 420px; width: 100%; padding: 18px; border-radius: 10px; background: var(--learn-panel-bg);
    color: var(--learn-panel-text); box-sizing: border-box; }
.learn-dialog-box p { margin: 0 0 14px; font-size: 17px; }
.learn-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 767px) {
    .learn-progress { grid-template-columns: minmax(0, 1fr); }
    .learn-progress .learn-continue { grid-column: 1; grid-row: auto; }
    .learn-progress a.learn-continue { max-width: none; }
}

/* Сертификат ступени (spec §7.5): картинка ступени, под ней логин, ступень и дата; «Поделиться» — владельцу */
.learn-cert { max-width: 800px; margin: 16px 0; }
.learn-cert img { display: block; width: 100%; height: auto; border-radius: 8px; }
.learn-cert figcaption { margin-top: 12px; line-height: 1.5; }
.learn-cert figcaption p { margin: 0 0 4px; }
.learn-cert-name { font-size: 24px; font-weight: 700; }
.learn-cert-date { color: var(--learn-muted); }
.learn-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.learn-share-done { color: var(--learn-success); }
.learn-cert-cta { margin: 16px 0; }

/* Тест (spec §6): вступление и развилка до начала, доска и панель — как у урока, итог с разбором ошибок */
.learn-quiz .learn-zone[hidden] { display: none; }
.learn-quiz-intro { max-width: 760px; line-height: 1.5; }
.learn-quiz-question { font-weight: 600; margin-top: 16px; }
.learn-quiz-fork { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.learn-quiz-task { font-weight: 600; font-size: 17px; margin: 12px 0; }
.learn-step.is-wrong { background: var(--learn-error); }
.learn-quiz-headline { font-weight: 700; }
.learn-quiz-headline.is-passed { color: var(--learn-success); }
.learn-quiz-review-title { font-size: 18px; margin: 16px 0 8px; }
.learn-quiz-review { padding-left: 20px; }
.learn-quiz-review li { margin-bottom: 10px; }
.learn-quiz-review p { margin: 0 0 4px; }
.learn-quiz-review .learn-quiz-core { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 700;
    background: var(--learn-hint); color: var(--learn-panel-bg); }
@media (max-width: 767px) {
    .learn-quiz-task { display: none; }   /* на телефоне задание над доской (.learn-task-top) */
}
/* Ссылки на тесты и сертификат (план 3б): кнопка-ссылка со скрытием — a.learn-btn задаёт display, hidden его не перебивает */
a.learn-btn[hidden] { display: none; }
.learn-test-link, .learn-module-test { margin: 4px 0 12px; }
.learn-stage-done { font-weight: 600; }
.learn-continue.is-done p { margin: 0 0 6px; }

/* Доска без подписей a–h и 1–8 («найди поле» в уроке 1 — не чтение подписи) */
/* .cg-wrap в селекторе обязателен: chessground.base.css подключается после learn.css, и его «.cg-wrap coords { display: flex }»
   иначе перебивает правило той же силы */
.learn-no-coords .cg-wrap coords { display: none; }
/* Вертикали строчными, как в Правилах (C.5) и в записи ходов: chessground.base.css пишет их заглавными */
.learn-board-wrap .cg-wrap coords.files, .learn-board-wrap .cg-wrap coords.ranks, .learn-board-wrap .cg-wrap coords.squares { text-transform: none; }

/* Посадочная: ступени карточками (spec-navigation §3.2) */
.learn-stages { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 16px; max-width: 960px; margin: 24px 0; }
.learn-stage-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--learn-panel-border);
    background: var(--learn-panel-bg); color: var(--learn-panel-text); text-decoration: none; }
/* Карточка и плитка — ссылки целиком: при наведении меняется только рамка, без подчёркивания и цвета ссылок сайта */
.learn-stage-card.is-open, .learn-stage-card.is-open:hover, .learn-stage-card.is-open:visited,
.learn-tile, .learn-tile:hover, .learn-tile:visited { text-decoration: none; color: var(--learn-panel-text); }
.learn-stage-card.is-open:hover, .learn-stage-card.is-open:focus-visible { border-color: var(--learn-success); box-shadow: 0 0 0 1px var(--learn-success); }
/* Доступная ступень — зелёная рамка (кликабельна), при наведении рамка утолщается; «Скоро» — серая и приглушена. */
.learn-stage-card.is-open { border-color: var(--learn-success); }
.learn-stage-card.is-soon { opacity: .7; }
.learn-stage-n { font-size: 13px; color: var(--learn-panel-muted); }
.learn-stage-title { font-size: 18px; font-weight: 700; }
.learn-stage-level, .learn-stage-count { font-size: 14px; color: var(--learn-panel-muted); }
.learn-stage-progress progress { width: 100%; height: 8px; }
/* Текст карточки ступени — в левой половине, правая отдана акварельному фону; заголовок на всю ширину. */
.learn-stage-level, .learn-stage-text, .learn-stage-count { max-width: 50%; }
.learn-stage-progress[hidden] { display: none; }
/* Карточка пройденной ступени: бейдж «Пройдена» (map.js) */
.learn-stage-card.is-done { border-color: var(--learn-success); }
.learn-stage-rank { position: relative; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 8px; font-weight: 600; }
.learn-stage-rank .learn-tip { font-weight: 400; }   /* всплывает под строкой звания, поверх соседних карточек */
.learn-stage-card.has-tip { z-index: 5; }   /* карточка с открытой подсказкой — над следующими карточками сетки (map.js) */
.learn-stage-done { align-self: flex-start; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: var(--learn-success); color: var(--learn-panel-bg); }

/* Акварельный фон ступени: прижат вправо, слева растворяется, текст поверх. */
.learn-stage-card { position: relative; isolation: isolate; }   /* без overflow: hidden — подсказка звания выходит за карточку */
.learn-stage-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
    background-repeat: no-repeat; background-position: right bottom; background-size: auto 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 15%, #000 60%); mask-image: linear-gradient(to right, transparent 15%, #000 60%);
    opacity: var(--learn-stage-bg-opacity); }
.learn-stage-bg-1::before { background-image: url("/i/learn-bg/stage-1.webp?v=1"); }
.learn-stage-bg-2::before { background-image: url("/i/learn-bg/stage-2.webp?v=1"); }
.learn-stage-bg-3::before { background-image: url("/i/learn-bg/stage-3.webp?v=1"); }
.learn-stage-bg-4::before { background-image: url("/i/learn-bg/stage-4.webp?v=1"); }
.learn-stage-bg-5::before { background-image: url("/i/learn-bg/stage-5.webp?v=1"); }
.learn-stage-bg-6::before { background-image: url("/i/learn-bg/stage-6.webp?v=1"); }
.learn-stage-bg-7::before { background-image: url("/i/learn-bg/stage-7.webp?v=1"); }
.learn-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: var(--learn-panel-muted); color: var(--learn-panel-bg); }
.learn-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 8px 0 24px; }
/* Ступень: плитки уроков (spec-navigation §3.3) */
.learn-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.learn-tile { display: flex; flex-direction: column; gap: 6px; min-height: 96px; padding: 12px; border-radius: 10px; border: 1px solid var(--learn-panel-border);
    background: var(--learn-panel-bg); color: var(--learn-panel-text); text-decoration: none; position: relative; box-sizing: border-box; }
.learn-tile:hover, .learn-tile:focus-visible { border-color: var(--learn-success); box-shadow: 0 0 0 1px var(--learn-success); }
.learn-tile.is-passed, .learn-tile.is-credited { background: var(--learn-done-bg); }
/* Пройденный или зачтённый урок — зелёная галочка у номера (доступное имя плитки уже говорит об этом — aria-label) */
.learn-tile.is-passed .learn-tile-n::after, .learn-tile.is-credited .learn-tile-n::after { content: "✓"; margin-left: 6px; color: var(--learn-success); font-weight: 700; font-size: 15px; }
/* Акварельный фон плитки урока (LearnImages::tileBackground): справа, слева растворяется, текст поверх. */
.learn-tile-bg, .learn-tile-test { position: relative; overflow: hidden; isolation: isolate; }
.learn-tile-bg::before, .learn-tile-test::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--learn-tile-bg) no-repeat right center / auto 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 25%, #000 65%); mask-image: linear-gradient(to right, transparent 25%, #000 65%);
    opacity: var(--learn-stage-bg-opacity); }
/* Плитка теста: одна картинка на все модули, надпись по центру — фон проявляется только у правого края. */
.learn-tile-test { --learn-tile-bg: url("/i/learn-bg/module-test.webp?v=1"); }
.learn-tile-test::before { -webkit-mask-image: linear-gradient(to right, transparent 45%, #000 80%); mask-image: linear-gradient(to right, transparent 45%, #000 80%); }
.learn-tile-n { font-size: 13px; color: var(--learn-panel-muted); }
.learn-tile-title { font-weight: 600; line-height: 1.3; }
.learn-tile-status { margin-top: auto; font-size: 15px; color: var(--learn-success); }
.learn-tile.is-recommended { border: 2px solid var(--learn-success); }
.learn-tile-next { font-size: 12px; font-weight: 700; color: var(--learn-success); }
.learn-tile-test { border-style: dashed; background: var(--learn-test-bg); align-items: start; justify-content: center; text-align: left; }
/* Плитка экзамена ступени (spec-stages-2-3-engine.md §9): общая акварель ступеней 2–3 (backgrounds-prompts.md §3.7). */
.learn-tile-exam { --learn-tile-bg: url("/i/learn-bg/exam-stage.webp?v=1"); }
.learn-tile-exam .learn-tile-title { font-weight: 700; }
.learn-tile-test.is-passed { background: var(--learn-done-bg); }
@media (max-width: 767px) {
    .learn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Подсказка «?» у звания и серии (spec-navigation §3.1) */
.learn-help { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 4px; padding: 0;
    border-radius: 50%; border: 1px solid currentColor; background: none; color: inherit; font-size: 12px; line-height: 1; cursor: pointer; }
/* Подсказка всплывает поверх страницы у своей строки и не сдвигает вёрстку. */
.learn-progress-main, .learn-progress-day { position: relative; }
.learn-tip { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: max-content; max-width: min(360px, calc(100vw - 32px)); padding: 10px 12px;
    border-radius: 8px; border: 1px solid var(--learn-panel-border); background: var(--learn-panel-bg); color: var(--learn-panel-text); box-shadow: 0 4px 16px rgba(0, 0, 0, .18); font-size: 14px; font-weight: 400; line-height: 1.4; }
/* Подсказка первой строки (звание) открывается вверх, чтобы не закрывать «?» серии во второй строке. */
.learn-progress-main .learn-tip { top: auto; bottom: calc(100% + 6px); }
.learn-tip[hidden] { display: none; }
@media (max-width: 767px) {
    .learn-tip { width: 100%; max-width: none; box-sizing: border-box; }
}