/* Тест уровня (21.10.2026, разбор разделов, пп. 20, 26): вопрос — лист со скотчем на поле цвета страницы, за ним
   ещё два листа, вещь страницы — вырезкой в углу поля (как тест на главной). На компьютере поле — справа от заголовка.
   Выбранный вариант — обводка и закрашенная буква, «Check» засчитывает. Под результатом — тексты и выпуск уровня. */
/* 22.10 (вечер, design 7): отступы и скругления — токены шкалы из site.css (--tw-s1…s9, --tw-r-s/l/pill), верх липких
   блоков — --tw-stick (inner.css); значения вне таблицы, 1–3 px, отрицательные и места, где сдвиг вышел бы больше 4 px, — числами */
.tq-grid{display:grid;gap:clamp(26px,3vw,40px)}
.tq-grid>.tw-head{max-width:none;margin:0;padding-left:0;padding-right:0}
@media (min-width:1000px){
  .tq-grid{grid-template-columns:minmax(0,1fr) minmax(0,560px);align-items:start;column-gap:clamp(40px,5vw,84px)}
  .tq-field{margin-top:clamp(44px,7vh,76px)}
}
.tq-field{position:relative;isolation:isolate;padding:clamp(44px,4vw,58px) clamp(18px,2.6vw,40px) clamp(34px,3.4vw,48px);border-radius:var(--tw-r-l);background:color-mix(in srgb,var(--tc) 15%,var(--tw-paper))}
.tq-th{position:absolute;z-index:0;top:-50px;right:-34px;width:132px;height:auto;transform:rotate(-16deg);filter:drop-shadow(0 12px 14px rgba(40,50,20,.28));pointer-events:none}
.tq-stack{position:relative;z-index:1;max-width:540px;margin:0 auto}
.tq-back{position:absolute;inset:0;background:var(--tw-sheet-2);box-shadow:0 0 0 1px rgba(23,20,15,.06),0 14px 26px -22px rgba(60,40,20,.55)}
.tq-back.b1{transform:translate(12px,-12px) rotate(2.2deg)}
.tq-back.b2{background:#F6F1E6;transform:translate(-10px,-22px) rotate(-3deg)}
.tq-back{display:none}

.tw-quiz{position:relative}
.tw-quiz>p:first-child{margin-bottom:var(--tw-s4)}
.tw-quiz-qs{list-style:none;margin:0;padding:0;display:grid;gap:var(--tw-s5)}
.tw-quiz-q,.tw-res{position:relative;padding:0}
.tw-quiz fieldset{border:0;margin:0;padding:0;min-width:0;counter-reset:opt}
.tw-quiz legend{float:left;width:100%;display:grid;gap:var(--tw-s3);margin-bottom:var(--tw-s4);padding:0}
.tw-quiz legend+*{clear:both}
.tq-top{display:flex;align-items:center;justify-content:space-between;gap:var(--tw-s3);font-size:var(--tw-fs-label);font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--tw-ink-3)}
.tq-tp{display:inline-flex;align-items:center;gap:var(--tw-s2)}
.tq-tp i{width:10px;height:10px;border-radius:50%;background:var(--lvc,var(--tc,#6E8B3D))}
.tq-n{font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--tw-ink-2)}
.tw-quiz legend .tw-es{margin-top:var(--tw-s1);font-size:var(--tw-fs-title);font-weight:750;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.tw-quiz-ask{font-size:var(--tw-fs-body);color:var(--tw-ink-2)}
.tw-opt{counter-increment:opt;position:relative;display:flex;align-items:center;gap:var(--tw-s3);min-height:var(--tw-btn-h);margin-top:2px;padding:var(--tw-s2) var(--tw-s3) var(--tw-s2) var(--tw-s1);border-radius:var(--tw-r-s);background:none;font-size:var(--tw-fs-body);font-weight:550;cursor:pointer;transition:background .2s}
.tw-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.tw-opt::before{content:counter(opt,lower-alpha);flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(27,38,56,.45);font-size:var(--tw-fs-small);font-weight:650;color:var(--tw-ink-2)}
.tw-opt:hover{background:rgba(255,253,248,.55)}
.tw-opt:has(input:checked){background:rgba(255,253,248,.7);font-weight:650}
.tw-opt:has(input:checked)::before{background:var(--tw-ink);color:var(--tw-sheet);box-shadow:none}
.tw-opt:has(input:focus-visible){outline:2.5px solid var(--tw-ink);outline-offset:2px}
.tw-opt:has(input:disabled){cursor:default}
.tw-quiz .tw-opt.is-right{background:var(--tw-ok);color:#fff;box-shadow:none;transition:none}
.tw-quiz .tw-opt.is-right::before{content:"✓";background:#fff;color:var(--tw-ok);box-shadow:none}
.tw-quiz .tw-opt.is-wrong{background:none;color:var(--tw-no);text-decoration:line-through;text-decoration-thickness:1px;transition:none}
.tw-quiz .tw-opt.is-wrong::before{content:"✕";background:none;color:var(--tw-no);box-shadow:inset 0 0 0 1.5px var(--tw-no)}
.tq-fb{min-height:1.4em;margin-top:var(--tw-s3);font-size:var(--tw-fs-ui);font-weight:600;color:var(--tw-ink)}
.tw-quiz-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--tw-s3);margin-top:var(--tw-s2)}
.tw-quiz-nav .tw-btn{margin-left:auto;min-height:48px}
.tw-quiz-nav[hidden],.tw-quiz-nav [hidden]{display:none}
/* 22.10 (C1): «Next» после ответа докручивается целиком, с полем снизу */
.tw-quiz-nav .tw-btn{scroll-margin-bottom:28px}
.tq-skip{min-height:44px;padding:0 var(--tw-s1);border:0;background:none;font:inherit;font-weight:600;color:var(--tw-ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
/* 22.10 (вечер, qa 7): со скриптом — один вопрос сразу, до загрузки quiz.js; «тексты уровня» — только открытые скриптом
   (is-open); иначе на компьютере при загрузке мигали все 12 вопросов и четыре блока, страница прыгала (CLS 0,12) */
.tw-js .tw-quiz:not(.is-on) .tw-quiz-q:not(:first-child),.tw-js .tw-quiz:not(.is-on) .tw-res,.tw-js .tq-more:not(.is-open){display:none}
.tw-quiz.is-on .tw-quiz-q{display:none}
.tw-quiz.is-on .tw-quiz-q.is-cur{display:block}
.tw-quiz.is-on .tw-res{display:none}
.tw-quiz.is-on .tw-res.is-shown{display:block}
.tw-quiz.is-done .tw-quiz-qs{display:none}
.tw-quiz-res{margin-top:var(--tw-s6)}
.tw-quiz.is-done .tw-quiz-res{margin-top:0}
.tw-res+.tw-res{margin-top:var(--tw-s5)}
.tw-res h2{margin-top:var(--tw-s2);font-weight:780;font-size:var(--tw-fs-display);letter-spacing:-.04em;line-height:1}
.tw-res p{margin-top:var(--tw-s3)}
.tw-res:focus{outline:none}
.tw-quiz-again{margin-top:var(--tw-s2)}
.tw-quiz-again[hidden]{display:none}

/* под результатом: три текста уровня и выпуск */
.tq-more[hidden]{display:none}
.tq-ep{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--tw-s4);row-gap:2px;align-items:center;max-width:620px;margin-top:var(--tw-s5);padding:var(--tw-s3) 0;color:var(--tw-ink);text-decoration:none}
.tq-ep-p{grid-row:1/4;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--tw-ink);color:var(--tw-sheet)}
.tq-ep-p svg{width:22px;height:22px;margin-left:2px}
.tq-ep-m{font-size:var(--tw-fs-label);font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--tw-ink-3)}
.tq-ep-t{font-size:var(--tw-fs-lead);font-weight:700;line-height:1.25}
.tq-ep-es{font-size:var(--tw-fs-ui);color:var(--tw-ink-2)}
@media (hover:hover){.tq-ep:hover .tq-ep-t{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--tw-pen);text-underline-offset:5px}}
.tq-all{margin-top:var(--tw-s4)}
@media (max-width:760px){
  .tq-field{margin:0 -6px;padding:var(--tw-s6) var(--tw-s4) var(--tw-s5)}
  .tq-th{top:-34px;right:-4px;width:86px}
  .tq-top{font-size:var(--tw-fs-label);letter-spacing:.05em;gap:var(--tw-s2)}
  .tq-back.b1{transform:translate(8px,-10px) rotate(2deg)}
  .tq-back.b2{transform:translate(-6px,-17px) rotate(-2.6deg)}
}
@media (prefers-reduced-motion:reduce){.tq-ep,.tw-opt{transition:none}}
/* 22.10 (ux 7): высокий контраст Windows убирает тени — рамки и выбор настоящими линиями */
@media (forced-colors:active){
  .tw-opt,.tw-opt::before{border:1px solid CanvasText}
  .tw-opt:has(input:checked){outline:3px solid Highlight;outline-offset:-3px}
  .tw-opt:has(input:checked)::before{background:Highlight;color:HighlightText;forced-color-adjust:none}
  .tw-quiz .tw-opt.is-right{outline:3px solid CanvasText}
}

/* 22.10: без скрипта — подсказка над вопросами не уходит под вещицу и скотч */
.tq-nojs{position:relative;z-index:3;max-width:34em;margin:0 0 var(--tw-s6);padding:var(--tw-s3) var(--tw-s4);border-radius:10px;background:var(--tw-sheet);box-shadow:0 1px 2px rgba(23,20,15,.12)}
/* 22.10 (без листа): вещь в углу поля больше не прикрыта листом вопроса — счётчик вопросов не уходит под неё */
.tw-quiz-q .tq-top,.tw-res .tq-top{padding-right:clamp(76px,7vw,100px)}