/* =============================================
   ДЕТСКИЙ ТЕСТ ВЕКСЛЕРА (/test-vekslera-detskiy) — классы wxk-* (тест) и wkl-* (лендинг): два своих виджета (js/wechslerkids-ui.js: выбор с
   кнопкой «Готово», лабиринт) и экраны раннера (js/wechslerkids-test.js). Подключается после test-wechsler.css: общие
   виджеты, блоки результата и заставки (wx-*) — оттуда; здесь только детское и поправки общих виджетов под .wxk-run
   (этот класс раннер ставит на контейнер теста; .wxk-young — возраст 6–8 лет, .wxk-heads — ключ шифровки из фигур).
   Цвета — токены style.css. Высоты на 375×667 (от верха теста до низа карточки, замеры K16 и K17): выбор из 6 картинок —
   494 (с двумя образцами «Сходства» — 580), из 4 текстов со строкой взрослому — до 565, лабиринт — 602, шифровка с пятью
   фигурами — 353, задача с рисунком-счётом в два ряда — 652; всё входит в экран. Цели нажатия у вариантов и стрелок —
   от 52 px. Страница результата (.wxk-result) собрана из общих блоков wx-* — своих правил у неё почти нет.
   В конце файла — лендинг /test-vekslera-detskiy (классы wkl-*).
   ============================================= */

/* ---------- общее ---------- */
/* быстрые нажатия не масштабируют страницу и не выделяют текст */
.wxk-pickopt, .wxk-arrow, .wxk-agebtn, .wxk-pause, .wxk-link, .wxk-reader button, .wxk-cover .play-btn { touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
/* стрелки лабиринта срабатывают по касанию (pointerdown): касание стрелки не должно стать прокруткой — отменить ход нельзя */
.wxk-arrow { touch-action: none; }
.wxk-nb { white-space: nowrap; }
@media (max-width: 767px) {
    #wechslerkidstest.lt-mount { scroll-margin-top: 6px; }
}

/* ---------- выбор с кнопкой «Готово» (WXUI.pick) ---------- */
.wxk-opts { display: grid; gap: 8px; margin-top: 14px; }
.wxk-pickopt { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 4px 12px; min-width: 0; min-height: 52px; padding: 9px 14px; border: 2px solid var(--line-strong); border-radius: 14px; background: #fff; color: var(--dark); font: 600 15.5px/1.3 var(--font-body); text-align: left; cursor: pointer; }
/* цветная фигура слева: ребёнок показывает на неё, если не нажимает сам */
.wxk-opts--marks .wxk-pickopt { grid-template-columns: 26px minmax(0, 1fr); }
.wxk-mark { display: block; width: 26px; height: 26px; }
.wxk-pickopt[aria-pressed="true"] { border-color: var(--dark); background: rgba(32, 33, 63, .08); box-shadow: 0 0 0 2px var(--dark); }
/* варианты-картинки: шесть — 3×2, четыре — 2×2; подписей нет (в «Словарном» название и есть ответ) */
.wxk-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 400px; margin: 12px auto 0; }
.wxk-pics--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 250px; }
.wxk-pics .wxk-pickopt { position: relative; display: block; min-height: 0; padding: 4px; aspect-ratio: 1; }
.wxk-pic { display: block; width: 100%; height: 100%; pointer-events: none; }
/* две картинки-образца «Сходства» над вариантами */
.wxk-stim { display: flex; justify-content: center; gap: 12px; }
.wxk-stim .wxk-pic { width: 76px; height: 76px; padding: 4px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line-strong); }
/* пробное: верный вариант — пунктирной рамкой с подписью (data-key), выбранный без баллов — коралловым */
.wxk-pickopt.is-key { border-style: dashed; border-color: var(--dark); }
.wxk-pickopt.is-key::after { content: attr(data-key); grid-column: 1 / -1; justify-self: start; padding: 2px 8px; border-radius: 999px; background: var(--dark); color: var(--cream); font: 700 10.5px/1.5 var(--font-head); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
/* у картинки вместо подписи — галочка в кружке на углу рамки: подпись шире картинки на узком экране (78 px) и закрывала
   бы её; кружок наполовину снаружи, чтобы не закрывать рисунок */
.wxk-pics .wxk-pickopt.is-key::after { content: ''; position: absolute; z-index: 1; right: -7px; top: -7px; width: 22px; height: 22px; padding: 0; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.wxk-pics .wxk-pickopt.is-key::before { content: ''; position: absolute; z-index: 2; right: 0; top: -4px; width: 6px; height: 11px; border: solid var(--cream); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.wxk-pickopt.bad { border-color: var(--coral); background: rgba(251, 114, 95, .22); }
/* пробное закончено: мёртвые кнопки убраны — задание с показанным решением и оценка под ним видны на одном экране */
.wxk-run .wx-task.is-practice.is-done .wx-acts, .wxk-run .wx-task.is-practice.is-done .wx-skip, .wxk-run .wx-task.is-practice.is-done .wx-pad,
.wxk-run .wx-task.is-practice.is-done .wx-kpal, .wxk-run .wx-task.is-practice.is-done .wxk-arrows { display: none; }
/* кнопка под пробным («Попробовать ещё раз», «Начать задания»): страница сама прокручивается к ней (scrollIntoView в
   раннере) — запас снизу, чтобы кнопка не вставала вплотную к краю экрана и не пряталась под панель браузера */
.wxk-run .wx-after { scroll-margin-bottom: 16px; }

/* ---------- лабиринт (WXUI.maze) ---------- */
.wxk-maze { width: min(320px, 100%); margin: 0 auto; }
.wxk-maze__svg { display: block; width: 100%; height: auto; }
/* стрелки — как на клавиатуре: «вверх» над «вниз», по бокам «влево» и «вправо» (крест в три ряда не помещался бы по высоте) */
.wxk-arrows { display: grid; grid-template-columns: repeat(3, 64px); grid-template-areas: ". u ." "l d r"; justify-content: center; gap: 6px; margin-top: 10px; }
.wxk-arrow { display: grid; place-items: center; width: 64px; height: 56px; padding: 0; border: 2px solid var(--dark); border-radius: 16px; background: #fff; color: var(--dark); cursor: pointer; }
.wxk-arrow--u { grid-area: u; }
.wxk-arrow--l { grid-area: l; }
.wxk-arrow--d { grid-area: d; }
.wxk-arrow--r { grid-area: r; }
.wxk-arrow svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.wxk-arrow:active { background: var(--bg-alt); }
/* стрелка в стену: туда из этой клетки хода нет */
.wxk-arrow:disabled { border-color: var(--line-strong); color: var(--line-strong); cursor: default; }
/* первые 0,6 с нового лабиринта стрелки молчат: привычное нажатие «по инерции» не становится ходом */
.wxk-arrows { transition: opacity .15s; }
.wxk-arrows.is-wait { opacity: .4; }

/* ---------- общие виджеты в детском тесте ---------- */
/* слово после числа («груш», «звёздочек») стоит в форме для знака вопроса и с набранным числом не согласуется
   («3 груш») — рядом с числом его нет */
.wxk-run .wx-num:not(.is-empty) span { display: none; }
/* рисунок-счёт к задаче: один ряд — 300×74, два ряда — 300×140 */
.wxk-run .wx-stim--num { margin-top: 8px; }
.wxk-count { display: block; width: min(100%, 300px); height: auto; margin: 0 auto; }
/* фигуры ключа младшей шифровки — 28 px (общее правило .wx-ckey span svg сжимало их до 20) */
.wxk-heads .wx-ckey span, .wxk-heads .wx-cstream span { height: 28px; }
.wxk-heads .wx-ckey span svg, .wxk-heads .wx-cstream span svg { width: 28px; height: 28px; }
/* 6–8 лет: главные кнопки заданий и заставок — от 52 px */
.wxk-young .wx-acts .play-btn, .wxk-young .wx-gate .play-btn, .wxk-young .wx-intro .play-btn, .wxk-young .wx-after .play-btn { min-height: 52px; }

/* ---------- раннер: шапка ---------- */
.wxk-top #wxkTick.is-paused { color: var(--muted); }
.wxk-top #wxkTick:not(.is-paused) + .wx-top__p { display: none; }
.wxk-part { font-variant-numeric: tabular-nums; }
/* «Пауза»: невысокая кнопка в строке шапки, зона нажатия шире неё (псевдоэлемент) — не меньше 44 px */
.wxk-pause { position: relative; flex: none; min-height: 30px; margin-left: 6px; padding: 4px 10px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: none; color: var(--dark); font: 700 12px/1.15 var(--font-head); white-space: nowrap; cursor: pointer; }
.wxk-pause::after { content: ''; position: absolute; inset: -8px -4px; }
/* пауза отложена до конца задания со сроком: подпись длинная — в две строки мельче, чтобы кнопка осталась той же
   высоты (шапка не растёт, и задание под пальцем ребёнка не сдвигается) */
.wxk-pause.is-due { max-width: 104px; padding-top: 2px; padding-bottom: 2px; border-color: var(--dark); background: var(--dark); color: var(--cream); font-size: 10.5px; line-height: 1.1; white-space: normal; text-align: center; }
.wxk-pause i { font-style: normal; }

/* ---------- раннер: возраст и «Перед началом» ---------- */
/* 11 кнопок по --n в ряд: 6 + 5, на телефоне 4 + 4 + 3; неполный ряд стоит по центру (с пустым местом справа он
   выглядел как пропавшая кнопка). Ширина кнопки — доля ряда без промежутков (сотая пикселя — запас на округление) */
.wxk-age__grid { --n: 6; --w: calc((100% - (var(--n) - 1) * 8px) / var(--n) - .01px); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 440px; margin: 16px auto 0; }
.wxk-age__grid > .wxk-agebtn { flex: 0 0 var(--w); }
/* 13–14 и 15–16 лет — одни и те же задания: пара стоит рядом под общей подписью (когда возраст пары готов) */
.wxk-agepair { flex: 0 0 calc(var(--w) * 2 + 8px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
.wxk-agepair i { grid-column: 1 / -1; color: var(--muted); font: 600 11.5px/1.2 var(--font-body); font-style: normal; text-align: center; }
.wxk-agebtn { display: grid; place-content: center; justify-items: center; gap: 2px; min-width: 0; min-height: 60px; padding: 4px 2px; border: 2px solid var(--line-strong); border-radius: 14px; background: #fff; color: var(--dark); cursor: pointer; }
.wxk-agebtn b { font: 700 22px/1 var(--font-head); }
.wxk-agebtn small { color: var(--muted); font: 600 11px/1.2 var(--font-body); }
.wxk-agebtn[aria-pressed="true"] { border-color: var(--dark); background: var(--dark); color: var(--cream); }
.wxk-agebtn[aria-pressed="true"] small { color: var(--cream); }
/* возраст ещё не готов: кнопка выключена, подпись «скоро» */
.wxk-agebtn:disabled { border-style: dashed; background: none; color: var(--muted); cursor: default; }
.wxk-age .wxk-age__hint { min-height: 22px; margin-top: 14px; color: var(--dark); font-weight: 600; }
.wxk-age .play-btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.wxk-ready .wxk-agepick { margin-top: 4px; }
.wxk-link { min-width: 44px; min-height: 44px; padding: 8px 6px; border: 0; background: none; color: var(--teal-deep); font: 600 14px var(--font-body); text-decoration: underline; cursor: pointer; }
.wxk-run .wxk-nokeep { max-width: 520px; margin: 12px auto 0; padding: 8px 12px; border-radius: 10px; background: rgba(251, 114, 95, .12); color: var(--dark); font: 600 14px/1.4 var(--font-body); }
.wxk-reader { max-width: 520px; margin: 16px auto 0; text-align: left; }
.wxk-reader b { display: block; color: var(--dark); font: 700 15px var(--font-head); }
.wxk-reader > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.wxk-reader button { min-width: 0; min-height: 48px; padding: 8px 10px; border: 2px solid var(--line-strong); border-radius: 14px; background: #fff; color: var(--dark); font: 600 14.5px/1.25 var(--font-body); cursor: pointer; }
.wxk-reader button[aria-pressed="true"] { border-color: var(--dark); background: var(--dark); color: var(--cream); }
.wxk-grown { max-width: 520px; margin: 16px auto 0; padding: 12px 16px; border-radius: 16px; background: var(--bg-alt); text-align: left; }
.wxk-grown:empty { display: none; }
.wxk-grown h3 { margin: 0; color: var(--dark); font: 700 16px var(--font-head); letter-spacing: 0; }
.wxk-grown ol { margin: 8px 0 0; padding-left: 20px; color: var(--dark); font-size: 14.5px; line-height: 1.45; }
.wxk-grown li + li { margin-top: 6px; }

/* ---------- раннер: заставка части, строка взрослому, пауза ---------- */
/* фраза для ребёнка, которую взрослый читает вслух */
.wxk-run .wxk-say { max-width: 520px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--dark); font-size: 16px; line-height: 1.45; text-align: left; }
.wxk-say b { display: block; margin-bottom: 3px; color: var(--teal-deep); font: 700 12px var(--font-head); letter-spacing: .05em; text-transform: uppercase; }
/* подсказка взрослому: на заставке и над каждым словесным заданием */
.wxk-run .wxk-adult { max-width: 520px; margin: 12px auto 0; padding: 8px 12px; border-left: 4px solid var(--teal); border-radius: 0 10px 10px 0; background: rgba(45, 178, 188, .1); color: var(--dark); font: 500 13.5px/1.4 var(--font-body); text-align: left; }
.wxk-run .wxk-adult--task { max-width: none; margin: 6px 0 0; padding: 6px 10px; font-size: 12.5px; line-height: 1.35; }
.wxk-task { position: relative; }
/* плашка паузы закрывает задание целиком: пока часы стоят, вопрос не виден */
.wxk-cover { position: absolute; inset: 6px 0 0; z-index: 6; display: grid; place-items: center; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); text-align: center; }
.wxk-cover b { display: block; color: var(--dark); font: 700 clamp(22px, 4vw, 30px) var(--font-head); letter-spacing: -.02em; }
.wxk-cover p { max-width: 360px; margin: 10px auto 0; color: var(--ink-soft); line-height: 1.5; }
.wxk-cover .play-btn { min-height: 52px; margin-top: 16px; }

/* ---------- раннер: перемена ---------- */
.wxk-break.iq-interstitial h2 { margin-top: 0; }
.wxk-break .wx-gate__num + h2 { margin-top: 14px; }
.wxk-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.wxk-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--line-strong); }
.wxk-dots i.on { background: var(--teal); }
.wxk-break .wxk-left { color: var(--dark); font-weight: 700; }
/* середина теста: две равные кнопки */
.wxk-break .wxk-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 480px; margin-left: auto; margin-right: auto; }
.wxk-break .wxk-two .play-btn { box-sizing: border-box; min-width: 0; height: 54px; padding: 0 10px; }   /* с рамкой и без — одной высоты */
.wxk-break .wxk-link { display: block; margin: 6px auto 0; color: var(--muted); text-decoration: none; }

/* ---------- страница результата: строка под плитками ---------- */
.wxk-meta { max-width: 580px; margin: 12px auto 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.45; text-align: center; }

/* 320 px, возраст с 9 лет: в шапке часы и кнопка «Пауза» — слово «пауза» у стоящих часов убрано (они и так приглушены),
   иначе на 12 сегментов не остаётся места */
@media (max-width: 359px) {
    .wxk-top .wx-top__p { display: none; }
    /* отложенная пауза — короткая подпись «после задания»: длинная сжимала 12 делений прогресса до волосков */
    .wxk-pause.is-due { max-width: 72px; }
    .wxk-pause i { display: none; }
}
@media (max-width: 480px) {
    .wxk-age__grid { --n: 4; }
    .wxk-break .wxk-two { grid-template-columns: minmax(0, 1fr); }
    .wxk-run .wxk-say { font-size: 15.5px; }
}

/* Невысокий экран (320×568): клавиатура задачи — в четыре столбца (1–4, 5–8, 9, «Стереть», 0, «Готово»), на ряд ниже:
   рисунок-счёт в два ряда, условие в три строки и клавиатура видны вместе, без прокрутки. Раскладка зависит только от
   экрана, поэтому на одном устройстве она одна у всех задач части */
@media (max-height: 640px) {
    .wxk-run .wx-task--num .wx-pad { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 400px; }
    .wxk-run .wx-task--num .wx-pad .wx-pad__f { font-size: 12.5px; }   /* «Стереть» и «Готово» в кнопке шириной 58 px */
    .wxk-count { width: min(100%, 216px); }
    /* там же: картинки-варианты 2×2 и образцы «Сходства» чуть меньше, кубики плотнее — задание входит в экран целиком */
    .wxk-pics--4 { max-width: 210px; }
    .wxk-stim .wxk-pic { width: 64px; height: 64px; }
    .wxk-run .wx-kohs__grid, .wxk-run .wx-kpal { margin-top: 6px; }
    .wxk-run .wx-task--kohs .wx-acts { margin-top: 8px; }
    /* оценка пробного и кнопка под ней плотнее: после ошибки в пробных кубиках и лабиринте решение, объяснение и кнопка
       «Попробовать ещё раз» видны вместе, без ручной прокрутки */
    .wxk-run .wx-fb { margin-top: 8px; padding: 8px 12px; font-size: 14px; line-height: 1.4; }
    .wxk-run .wx-after { margin-top: 8px; }
    .wxk-run .wx-after .play-actions { margin-top: 6px; }
}

/* =============================================
   ЛЕНДИНГ /test-vekslera-detskiy (views/content/test_wechslerkids.php) — классы wkl-*. Каркас — общие .tl-* (style.css)
   и секция «ЛЕНДИНГ» test-wechsler.css (wxl-*): хиро той же разметки (.wxl-hero — «больше текста, когда экран
   позволяет»), переключатель на взрослый тест, группы субтестов. Здесь — свои блоки детской страницы и пороги
   дополнительного текста первого экрана, перемеренные для её текстов. Классы kdl-* (детский тест на IQ) не берутся:
   на них в style.css завязаны исключения первого экрана той страницы.
   ============================================= */
/* ---------- первый экран: «больше текста, когда экран позволяет» — пороги для детских текстов ----------
   Приём и общие правила — секция «ЛЕНДИНГ» test-wechsler.css; у детской страницы заголовок в две строки, а лид длиннее
   (в нём строка об открытых возрастах), поэтому пороги по высоте окна свои. Общие пороги здесь сбрасываются и
   задаются заново. Широкий экран (замер 14.10.2026, гость, кнопка «Начать тест» — низ при ширине 1000–1440 px): без
   добавок 502–556, с тремя фактами 622–653, плюс абзац 685–720, плюс ещё два факта 744–780; пороги — с запасом 67–70 px,
   как у взрослой страницы: от 720 px высоты окна — три факта, от 790 — абзац, от 850 — ещё два факта (1280×720 и
   1366×768 — три факта, от 1440×900 — всё). До 999 px факты в блоке картинки подчиняются его высоте (общие запросы
   @container tlart), а абзац — высоте окна: порог свой для каждой ширины, чтобы блок картинки вместе с абзацем
   оставался не ниже 340 px и факты не пропадали. Замер — высота окна, с которой блок с абзацем не ниже 340 px: 1020 на
   ширине 298–314, 996 на 315–323, 967 на 324–382, 945 на 383–415, 899 на 416–434, 876 на 435–448, 839 на 449–526,
   816 на 527–767, 873–886 на 768–999; пороги — с запасом 12 px по высоте и 8 px по ширине (на 768–999 — 900, как у
   взрослой страницы); уже 312 px абзаца нет. Сменился текст лида, абзаца, фактов или плашек — перемерить
   (стенд _dev_wx_fold.php из «ТЗ Векслер/_dev_stands», способ — памятка testiq-wechsler, пункт «Лендинг»). */
.wkl-hero .wxl-more, .wkl-hero .tl-hero__text > .wxl-points, .wkl-hero .tl-hero__text > .wxl-points .wxl-x { display: none; }
@media not all and (max-width: 999px) {
    @media (min-height: 720px) { .wkl-hero .tl-hero__text > .wxl-points { display: grid; } }
    @media (min-height: 790px) { .wkl-hero .wxl-more { display: block; } }
    @media (min-height: 850px) { .wkl-hero .tl-hero__text > .wxl-points .wxl-x { display: flex; } }
}
@media (min-width: 312px) and (max-width: 331px) and (min-height: 1032px), (min-width: 332px) and (max-width: 390px) and (min-height: 979px),
    (min-width: 391px) and (max-width: 423px) and (min-height: 957px), (min-width: 424px) and (max-width: 442px) and (min-height: 911px),
    (min-width: 443px) and (max-width: 456px) and (min-height: 888px), (min-width: 457px) and (max-width: 534px) and (min-height: 851px),
    (min-width: 535px) and (max-width: 767px) and (min-height: 828px), (min-width: 768px) and (max-width: 999px) and (min-height: 900px) { .wkl-hero .wxl-more { display: block; } }

/* карточки возрастов: три в ряд, на планшете две, на телефоне одна; неготовый возраст — приглушён, с пометкой «скоро» */
.wkl-ages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.wkl-age { min-width: 0; padding: 16px 18px 18px; border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: var(--radius-md); background: #fff; }
.wkl-age__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wkl-age__head b { color: var(--dark); font: 700 21px/1.1 var(--font-head); }
.wkl-age__pill { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--teal-deep); color: #fff; font: 700 11px/1.2 var(--font-head); letter-spacing: .08em; text-transform: uppercase; }
.wkl-age--soon { border-top-color: var(--line-strong); background: rgba(255, 255, 255, .55); }
.wkl-age--soon .wkl-age__pill { background: var(--bg-alt); color: var(--ink-soft); }
.wkl-age__nums { margin: 10px 0 0; color: var(--dark); font: 600 13.5px/1.45 var(--font-body); }
.wkl-age__who { margin: 6px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.wkl-age--soon .wkl-age__nums, .wkl-age--soon .wkl-age__who { color: var(--muted); }

/* «как пройти вместе с ребёнком»: четыре шага с номерами; ниже — плашки с короткими фактами */
.wkl-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; counter-reset: wkls; }
.wkl-steps li { counter-increment: wkls; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.wkl-steps li::before { content: counter(wkls); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--dark); color: var(--cream); font: 700 16px/1 var(--font-head); }
.wkl-steps b { display: block; margin-top: 12px; color: var(--dark); font: 700 17px/1.25 var(--font-head); }
.wkl-steps span { display: block; margin-top: 6px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.wkl-safe { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.wkl-safe li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .8); color: var(--dark); font: 600 14px/1.3 var(--font-body); }
.wkl-safe .iq-ic { flex: none; color: var(--teal-deep); }

/* пример задания: справа — НАСТОЯЩИЙ виджет «Кубиков» (карточка .wx-card из test-wechsler.css); без виджета — статичный
   образец с подписью. Пояснение после «Готово» (.wkl-demo__out) стоит в разметке после виджета: на широком экране —
   в левой колонке под текстом, до 999 px — прямо под виджетом (иначе на телефоне оно появлялось бы выше экрана) */
.wkl-demo { grid-template-areas: "text task" "out task"; grid-template-rows: auto 1fr; align-items: start; row-gap: 0; }
.wkl-demo > .tl-demo__text { grid-area: text; }
.wkl-demo__task { grid-area: task; min-width: 0; }
.wkl-demo__out { grid-area: out; min-width: 0; }
.wkl-demo__task > .wx-card { margin: 0; }
/* Место под виджет: скрипты страницы стоят в конце и весят много, поэтому сначала виден образец, а потом его заменяет
   виджет. Образец той же высоты, что виджет, — подмена не сдвигает страницу (в iOS Safari нет scroll anchoring). Замер
   14.10.2026 (высота виджета): 488 px на ширине 320–359, 467 на 360–480, 479 на 481–639 (пороги 359 и 480 — у
   виджетов в test-wechsler.css), дальше растёт с шириной —
   480 на 640, 491 на 800, 505 на 1000, 512 на 1100, 515 от 1200 (формула ниже не выше замера, недобор до 3 px). Сменится
   вид «Кубиков» в wechsler-ui.js или текст над виджетом — перемерить */
.wkl-demo__static { display: flex; flex-direction: column; justify-content: center; min-height: 500px; min-height: min(515px, calc(440px + 6.25vw)); padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; text-align: center; }
.wkl-demo__static svg { display: block; width: 150px; height: auto; margin: 0 auto; }
.wkl-demo__static p { margin: 10px 0 0; color: var(--ink-soft); font-size: 14.5px; }
.wkl-demo .tl-demo__res { min-height: 0; }
.wkl-demo .tl-demo__res:empty { margin: 0; }
.wkl-demo .wkl-demo__again { margin-top: 12px; }
/* после «Готово» виджет замирает (общее правило test-wechsler.css снимает нажатия): кнопки и грани приглушены, как у
   пробных заданий, — иначе тёмная «Готово» выглядела бы рабочей. Действует «Попробовать ещё раз»; сетка с ответом яркая */
.wkl-demo .wx-task.is-done .wx-acts, .wkl-demo .wx-task.is-done .wx-kpal { opacity: .45; }

@media (max-width: 999px) {
    .wkl-ages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wkl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wkl-demo { grid-template-areas: "text" "task" "out"; grid-template-rows: none; row-gap: 18px; }
}
@media (max-width: 639px) { .wkl-demo__static { min-height: 479px; } }
@media (max-width: 480px) { .wkl-demo__static { min-height: 467px; } }
@media (max-width: 359px) { .wkl-demo__static { min-height: 488px; } }
@media (max-width: 520px) {
    .wkl-ages, .wkl-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .wkl-age { padding: 14px 16px 16px; }
    .wkl-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; }
    .wkl-steps li::before { grid-row: 1 / span 2; }
    .wkl-steps b { margin-top: 6px; }
    .wkl-steps span { grid-column: 2; margin-top: 0; }
}