/* ============================================================ nmt-quiz.css — стилі тренажера НМТ з англійської. Розмітка: new/partials/nmt-quiz-render.php · Двигун: /new/js/nmt-quiz.js Винесено з інлайнового блоку партіала 27.07.2026: тег стилів у невалідний за HTML (дозволений лише як метадані в ), і валідатор W3C давав на сторінці помилку «Element style not allowed as child of element div». КОНТРАКТ: сторінка, яка включає nmt-quiz-render.php, мусить сама підключити цей файл через $extraHead, як це вже робиться з quiz.css. Версію ?v= підіймати вручну при кожній зміні: склейки combined*.php цей файл НЕ збирають. База — /ukr/css/quiz.css (.quiz-app, .quiz-card, .quiz-btn, .quiz-topbar, .quiz-score-ring, .quiz-result-*, .quiz-lead--result). Тут лише те, чого в quiz.css немає. Значення — з токенів СІТКА.md. ============================================================ */ .nmtq-start,.nmtq-stage,.nmtq-result,.nmtq-after{display:none} .nmtq.is-idle .nmtq-start{display:block} .nmtq.is-running .nmtq-stage{display:block} .nmtq.is-done .nmtq-stage,.nmtq.is-done .nmtq-result,.nmtq.is-done .nmtq-after{display:block} .nmtq.is-done .nmtq-bar,.nmtq.is-done .nmtq-nav{display:none} /* КРИТИЧНО: у легасі-нормалізаторі сайту є `section{display:block}`, а авторське правило сильніше за UA-стиль `[hidden]{display:none}`. Без явного правила нижче атрибут hidden на секціях завдань не діє, і всі шість завдань видно одночасно (знайдено живою перевіркою 26.07.2026). Той самий запобіжник стоїть у micro-test.php. */ .nmtq .nmtq-task[hidden]{display:none} .nmtq-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* --- верхня панель: лічильник, таймер, прогрес --- */ .nmtq-bar{position:sticky;top:calc(var(--nav-h,64px) + var(--bl-space-8,8px));z-index:20; margin:0 0 var(--bl-space-16,16px);padding:var(--bl-space-12,12px) var(--bl-space-16,16px); background:var(--q-card,#fff);border:1px solid var(--q-line,rgba(20,35,60,.08)); border-radius:var(--bl-radius-md,18px);box-shadow:var(--q-shadow-sm,0 4px 16px rgba(20,35,60,.06))} .nmtq-bar .quiz-topbar{margin:0 0 var(--bl-space-12,12px);flex-wrap:wrap} .nmtq-timer{font-size:var(--t-secondary,18px);font-weight:700;line-height:1.2; font-variant-numeric:tabular-nums;color:var(--q-blue,#2F6075);white-space:nowrap} /* П7: сегменти прогресу за завданнями */ .nmtq-segs{display:flex;gap:var(--bl-space-4,4px);margin:0} .nmtq-seg{flex:1 1 0;height:var(--bl-space-8,8px);border-radius:999px;overflow:hidden; background:#e7e3db} .nmtq-seg i{display:block;width:0;height:100%;border-radius:999px; background:linear-gradient(90deg,#2F6075,#3D7E99);transition:width .3s ease} .nmtq-seg.is-here{box-shadow:0 0 0 2px rgba(47,96,117,.35)} /* П6: скільки без відповіді в цьому завданні */ .nmtq-left{margin:var(--bl-space-8,8px) 0 0;font-size:var(--t-label,14px);font-weight:600; line-height:1.2;color:var(--q-muted,#5b6b80)} .nmtq-left.is-warn{color:#8A5E00} .nmtq-timer.is-warn{color:#8A5E00} .nmtq-timer.is-over{color:var(--q-err-ink,#b42318)} .nmtq-warn{margin:var(--bl-space-12,12px) 0 0;padding:var(--bl-space-8,8px) var(--bl-space-12,12px); font-size:var(--t-small,16px);font-weight:600;line-height:1.4;color:#8A5E00; background:rgba(255,176,32,.13);border-radius:var(--bl-radius-sm,14px)} .nmtq-warn[hidden]{display:none} /* --- умова завдання --- */ .nmtq-instr{margin:0 0 var(--bl-space-8,8px);font-size:var(--t-small,16px);font-weight:600; line-height:1.5;color:var(--q-ink,#14233c)} .nmtq-instr b{font-weight:700} /* Українська підказка це не caption, а друга половина інструкції: саме вона пояснює, що робити, тим, хто гірше читає англійську умову вище. Була 14px/400 приглушеним кольором, тобто дрібніша, легша й світліша за все навколо одночасно (рішення Di 26.07.2026). Тепер кегль body і основне чорнило: пара читається як англійський оригінал напівжирним і український переклад звичайним. */ .nmtq-hint{margin:0 0 var(--bl-space-20,20px);font-size:var(--t-small,16px);font-weight:400; line-height:1.45;color:var(--q-ink,#14233c)} /* --- банк варіантів (Task 1, Task 3) --- */ .nmtq-bank{margin:0 0 var(--bl-space-20,20px);padding:var(--bl-space-16,16px); background:var(--q-blue-soft,#EAF1F3);border-radius:var(--bl-radius-sm,14px)} .nmtq-bank__t{margin:0 0 var(--bl-space-8,8px);font-size:var(--t-micro,12px);font-weight:800; line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--q-blue,#2F6075)} .nmtq-bank__l{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--bl-space-8,8px)} .nmtq-bank__l li{display:flex;gap:var(--bl-space-12,12px);font-size:var(--t-small,16px); font-weight:400;line-height:1.45;color:var(--q-ink,#14233c)} .nmtq-bank__l li > span:last-child{min-width:0;overflow-wrap:anywhere} .nmtq-key{flex:0 0 auto;min-width:var(--bl-space-24,24px);font-weight:700;color:var(--q-blue,#2F6075)} /* --- текст для читання --- `!important` тут ОБОВʼЯЗКОВИЙ, а не про запас. Два легасі-правила зі склейки перебивають звичайний селектор партіала (знайдено живою перевіркою 26.07.2026): h4{font-size:22px!important} і h3{font-size:20px} → заголовок тексту body.home-v2 .main-section p:not(…):not(…){font-weight:520} → вага абзаців Без оверрайду тексти завдань рендерилися як лід (24px/520), а h4 виходив дрібнішим за власний абзац. Кеглі лишаються з токенів СІТКА §9. Тег заголовка тексту h3, а не h4: над ним стоїть прихована h2 завдання, і h4 давав пропуск рівня (помилка валідатора W3C, виправлено 27.07.2026). */ .nmtq-text{margin:0 0 var(--bl-space-20,20px);font-size:var(--t-small,16px);font-weight:400; line-height:1.55;color:var(--q-ink,#14233c)} .quiz-app.nmtq .nmtq-text h3{margin:0 0 var(--bl-space-12,12px); font-size:var(--t-secondary,18px)!important;font-weight:700!important; line-height:1.25!important;color:var(--q-ink,#14233c);text-align:left} .quiz-app.nmtq .nmtq-text p, .quiz-app.nmtq .nmtq-text li{margin:0 0 var(--bl-space-12,12px); font-size:var(--t-small,16px)!important;font-weight:400!important; line-height:1.55!important;color:var(--q-ink,#14233c);text-align:left} /* П3: чип пропуску це кнопка. Після відповіді показує обрану літеру, тап веде до варіантів саме цього пропуску. */ .nmtq-gapmark{display:inline-block;min-width:var(--bl-space-32,32px); padding:0 var(--bl-space-8,8px);font-family:inherit;font-size:inherit;font-weight:700; color:var(--q-blue,#2F6075);background:var(--q-blue-soft,#EAF1F3);border:1px solid transparent; border-radius:var(--bl-radius-sm,14px);text-align:center;cursor:pointer; -webkit-appearance:none;appearance:none;line-height:inherit} .nmtq-gapmark:hover{border-color:var(--q-blue,#2F6075)} .nmtq-gapmark:focus-visible{outline:3px solid var(--q-blue,#2F6075);outline-offset:2px} .nmtq-gapmark.is-set{background:#cdeed9;color:var(--q-ok-ink,#137a3d)} /* --- запитання --- */ .nmtq-items{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--bl-space-16,16px)} .nmtq-item{margin:0;padding:var(--bl-space-16,16px);background:var(--q-card,#fff); border:1px solid var(--q-line-2,rgba(20,35,60,.14));border-radius:var(--bl-radius-sm,14px)} .nmtq-item.is-ok{background:var(--q-ok-bg,#e8f7ee);border-color:var(--q-ok-bd,#a6dcbb)} .nmtq-item.is-no{background:var(--q-err-bg,#fdecec);border-color:var(--q-err-bd,#f0b3ad)} .nmtq-num{display:inline-block;margin:0 0 var(--bl-space-8,8px);padding:0 var(--bl-space-12,12px); font-size:var(--t-small,16px);font-weight:700;line-height:1.4;color:#fff; background:var(--q-blue,#2F6075);border-radius:999px} .nmtq-body{margin:0 0 var(--bl-space-12,12px);font-size:var(--t-small,16px);font-weight:400; line-height:1.5;color:var(--q-ink,#14233c)} .nmtq-stem{margin:0 0 var(--bl-space-12,12px);font-size:var(--t-small,16px);font-weight:700; line-height:1.45;color:var(--q-ink,#14233c)} /* --- селект відповідності (П2: на всю ширину картки, з текстом варіанта) --- */ .nmtq-sel{display:flex;flex-direction:column;gap:var(--bl-space-4,4px)} .nmtq-sel__l{font-size:var(--t-label,14px);font-weight:600;line-height:1.2; color:var(--q-muted,#5b6b80)} /* padding-right із запасом: власна стрілка нативного селекта інакше зрізає останнє слово довгих підписів (перевірено наживо на «C. Second Language Sundays») */ .nmtq-sel select{-webkit-appearance:menulist;appearance:menulist;font-family:inherit; width:100%;min-width:0;min-height:var(--bl-space-48,48px); padding:var(--bl-space-8,8px) var(--bl-space-32,32px) var(--bl-space-8,8px) var(--bl-space-12,12px); font-size:var(--t-small,16px);font-weight:600;line-height:1.4;color:var(--q-ink,#14233c); background:#fff;border:1px solid var(--q-line-2,rgba(20,35,60,.14));border-radius:var(--bl-radius-sm,14px)} .nmtq-sel select:focus-visible{outline:3px solid var(--q-blue,#2F6075);outline-offset:2px} .nmtq-item.is-set .nmtq-sel select{border-color:rgba(47,96,117,.45);background:var(--q-blue-soft,#EAF1F3)} /* --- варіанти відповіді (choice, gap) --- */ /* fieldset за замовчуванням має min-width:min-content і на вузькому мобайлі виносить довгий варіант за межі екрана, тому min-width:0 тут обовʼязковий */ .nmtq-opts{display:flex;flex-direction:column;gap:var(--bl-space-8,8px);margin:0;padding:0;border:0;min-width:0} .nmtq-opt{display:flex;align-items:flex-start;gap:var(--bl-space-12,12px); min-height:var(--bl-space-48,48px);padding:var(--bl-space-12,12px) var(--bl-space-16,16px); font-size:var(--t-small,16px);font-weight:600;line-height:1.4;color:var(--q-ink,#14233c); background:#fff;border:1px solid var(--q-line-2,rgba(20,35,60,.14)); border-radius:var(--bl-radius-sm,14px);cursor:pointer} .nmtq-opt > span:last-child{min-width:0;overflow-wrap:anywhere} .nmtq-opt:hover{border-color:var(--q-blue,#2F6075)} .nmtq-opt input{flex:0 0 auto;margin:0;width:var(--bl-space-20,20px);height:var(--bl-space-20,20px); accent-color:var(--q-blue,#2F6075)} .nmtq-opt input:focus-visible{outline:3px solid var(--q-blue,#2F6075);outline-offset:2px} .nmtq-opt__k{flex:0 0 auto;font-weight:700;color:var(--q-blue,#2F6075)} .nmtq-opt.is-key{background:var(--q-ok-bg,#e8f7ee);border-color:var(--q-ok-bd,#a6dcbb)} .nmtq-opt.is-picked-no{background:var(--q-err-bg,#fdecec);border-color:var(--q-err-bd,#f0b3ad)} /* --- розбір --- */ .nmtq-rev{margin:var(--bl-space-12,12px) 0 0;padding:var(--bl-space-12,12px) var(--bl-space-16,16px); background:#fff;border-left:4px solid var(--q-blue,#2F6075);border-radius:var(--bl-radius-sm,14px); font-size:var(--t-small,16px);font-weight:400;line-height:1.5;color:var(--q-ink,#14233c)} .nmtq-rev[hidden]{display:none} .nmtq-rev__a{display:block;margin:0 0 var(--bl-space-4,4px);font-weight:700} .nmtq-rev__you{display:block;margin:0 0 var(--bl-space-4,4px);font-weight:600;color:var(--q-err-ink,#b42318)} .nmtq-rev__you[hidden]{display:none} /* --- П4: попередження про порожні запитання перед завершенням --- */ .nmtq-empty{display:flex;flex-wrap:wrap;align-items:center;gap:var(--bl-space-12,12px); margin:var(--bl-space-20,20px) 0 0;padding:var(--bl-space-12,12px) var(--bl-space-16,16px); background:rgba(255,176,32,.13);border-radius:var(--bl-radius-sm,14px); font-size:var(--t-small,16px);font-weight:600;line-height:1.4;color:#8A5E00} .nmtq-empty[hidden]{display:none} .nmtq-empty__go{-webkit-appearance:none;appearance:none;cursor:pointer;font-family:inherit; padding:var(--bl-space-8,8px) var(--bl-space-16,16px);font-size:var(--t-label,14px); font-weight:700;line-height:1.2;color:#8A5E00;background:#fff; border:1px solid rgba(138,94,0,.35);border-radius:999px} .nmtq-empty__go:hover{background:#FFF7E6} .nmtq-empty__go:focus-visible{outline:3px solid #8A5E00;outline-offset:2px} /* підсвітка запитання, до якого щойно перейшли */ .nmtq-item.is-target{box-shadow:0 0 0 3px rgba(255,176,32,.55)} /* --- П10: банер відновлення прогону --- */ .nmtq-resume{display:flex;flex-direction:column;gap:var(--bl-space-12,12px); margin:0 0 var(--bl-space-20,20px);padding:var(--bl-space-16,16px); background:var(--q-blue-soft,#EAF1F3);border-radius:var(--bl-radius-sm,14px)} .nmtq-resume[hidden]{display:none} .nmtq-resume__t{font-size:var(--t-small,16px);font-weight:600;line-height:1.45; color:var(--q-ink,#14233c)} .nmtq-resume__acts{display:flex;flex-wrap:wrap;gap:var(--bl-space-8,8px)} .nmtq-resume__go,.nmtq-resume__no{-webkit-appearance:none;appearance:none;cursor:pointer; font-family:inherit;padding:var(--bl-space-8,8px) var(--bl-space-20,20px); font-size:var(--t-label,14px);font-weight:700;line-height:1.2; border-radius:999px;border:1px solid var(--q-blue,#2F6075)} .nmtq-resume__go{color:#fff;background:var(--q-blue,#2F6075)} .nmtq-resume__no{color:var(--q-blue,#2F6075);background:#fff} .nmtq-resume__go:focus-visible,.nmtq-resume__no:focus-visible{outline:3px solid var(--q-blue,#2F6075);outline-offset:2px} /* --- навігація завданнями --- */ .nmtq-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--bl-space-12,12px); margin:var(--bl-space-20,20px) 0 0} .nmtq-nav .quiz-btn{width:auto;min-width:var(--bl-space-40,40px);flex:1 1 auto} .nmtq-nav .quiz-skip{flex:0 0 auto} .nmtq-nav [hidden]{display:none} /* --- результат --- */ .nmtq-result{margin:0 0 var(--bl-space-20,20px);padding:var(--bl-space-24,24px) var(--bl-space-20,20px); background:var(--q-card,#fff);border:1px solid var(--q-line,rgba(20,35,60,.08)); border-radius:var(--bl-radius-lg,24px);box-shadow:var(--q-shadow,0 14px 44px rgba(20,35,60,.10)); text-align:center} .nmtq-time{margin:0 0 var(--bl-space-16,16px);font-size:var(--t-small,16px);font-weight:600; line-height:1.45;color:var(--q-muted,#5b6b80)} .nmtq-forms{margin:var(--bl-space-16,16px) 0 0;padding:0;list-style:none;display:flex; flex-direction:column;gap:var(--bl-space-8,8px);text-align:left} .nmtq-forms li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--bl-space-8,8px) var(--bl-space-12,12px); padding:var(--bl-space-12,12px) var(--bl-space-16,16px);background:var(--q-blue-soft,#EAF1F3); border-radius:var(--bl-radius-sm,14px);font-size:var(--t-small,16px);font-weight:600; line-height:1.4;color:var(--q-ink,#14233c)} .nmtq-forms b{font-size:var(--t-secondary,18px);font-weight:700;color:var(--q-blue,#2F6075);white-space:nowrap} .nmtq-tosee{margin:var(--bl-space-16,16px) 0 0;font-size:var(--t-small,16px);font-weight:400; line-height:1.5;color:var(--q-muted,#5b6b80);text-align:left} /* П1: CTA у панелі результату */ .nmtq-res-cta{margin:var(--bl-space-24,24px) 0 0} .nmtq-res-cta .quiz-btn{width:100%;max-width:var(--cta-form-w,520px);margin-inline:auto} /* Список помилок із переходами */ .nmtq-errs{margin:var(--bl-space-20,20px) 0 0;padding:var(--bl-space-16,16px); background:var(--q-err-bg,#fdecec);border-radius:var(--bl-radius-sm,14px);text-align:left} .nmtq-errs[hidden]{display:none} .nmtq-errs__t{margin:0 0 var(--bl-space-12,12px);font-size:var(--t-small,16px);font-weight:700; line-height:1.4;color:var(--q-err-ink,#b42318)} .nmtq-errs__l{display:flex;flex-wrap:wrap;gap:var(--bl-space-8,8px);margin:0;padding:0;list-style:none} .nmtq-errs__l button{-webkit-appearance:none;appearance:none;cursor:pointer;font-family:inherit; min-width:var(--bl-space-48,48px);min-height:var(--bl-space-40,40px); padding:var(--bl-space-8,8px) var(--bl-space-12,12px); font-size:var(--t-small,16px);font-weight:700;line-height:1.2;color:var(--q-err-ink,#b42318); background:#fff;border:1px solid var(--q-err-bd,#f0b3ad);border-radius:var(--bl-radius-sm,14px)} .nmtq-errs__l button:hover{background:#fff5f5} .nmtq-errs__l button:focus-visible{outline:3px solid var(--q-err-ink,#b42318);outline-offset:2px} /* --- фінальний блок --- */ .nmtq-after{margin:var(--bl-space-24,24px) 0 0} .nmtq-next{margin:0 0 var(--bl-space-20,20px);font-size:var(--t-small,16px);font-weight:400; line-height:1.55;color:var(--q-ink,#14233c)} .nmtq-next a{color:var(--q-blue,#2F6075);font-weight:700;text-decoration:underline;text-underline-offset:3px} .nmtq-after .quiz-lead--result{padding:var(--bl-space-24,24px) var(--bl-space-20,20px)} .nmtq-after .cta-lead{margin:0} /* --- Розворот на десктопі (≥992px) --------------------------------------- На іспиті текст і запитання лежать поруч на розвороті буклета. До цієї правки на Task 2 перше запитання було за 1429px від початку тексту, тобто півтора екрана прокрутки на кожну звірку з текстом, а по боках 640-піксельного додатка простоювало по 400px (виміряно 26.07.2026). Тепер під час проходження й розбору додаток займає всю ширину контейнера, ліва колонка (банк або текст) стає липкою і лишається перед очима, поки гортаєш запитання. Мобільна розкладка не змінюється: правило під 992px. */ @media (min-width:992px){ .quiz-app.nmtq.is-running, .quiz-app.nmtq.is-done{max-width:100%} /* точка прилипання: під нав-пігулкою і липкою панеллю прогресу */ .nmtq{--nmtq-stick:calc(var(--nav-h,64px) + 124px)} .nmtq.is-running .quiz-card, .nmtq.is-done .quiz-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:var(--bl-space-32,32px);align-items:start} .nmtq .quiz-card > .nmtq-vh, .nmtq .quiz-card > .nmtq-instr, .nmtq .quiz-card > .nmtq-hint{grid-column:1 / -1} .nmtq-side{grid-column:1;min-width:0;position:sticky;top:var(--nmtq-stick); max-height:calc(100vh - var(--nmtq-stick) - var(--bl-space-32,32px));overflow-y:auto} .nmtq-items{grid-column:2;min-width:0} .nmtq-bank,.nmtq-text{margin-bottom:0} /* у розборі липкість не потрібна: там читають усе підряд */ .nmtq.is-done .nmtq-side{position:static;max-height:none;overflow:visible} /* панель результату й капсула лишаються читабельною колонкою по центру */ .nmtq-result,.nmtq-after{max-width:var(--nmtq-col,640px);margin-inline:auto} .nmtq-nav{max-width:var(--nmtq-col,640px);margin-inline:auto} } @media (max-width:768px){ /* Пігулки фактів у два стовпці й кеглем підпису: у стовпчик по 16px вони займали 277px, тобто третину екрана на чотири короткі факти, і відсували «Почати тест» на 907px при висоті вікна 844. Тепер 187px і кнопка на 818, тобто в першому екрані на головному для цієї сторінки запиті. Підписи та іконки не змінені; кегль 14px з вагою 600 у межах стель СІТКА §9б. Скоуп .nmtq: у тестів рівня та сама розмітка, їх не чіпаємо. */ .nmtq .quiz-meta{grid-template-columns:1fr 1fr;gap:var(--bl-space-8,8px); margin-bottom:var(--bl-space-16,16px)} .nmtq .quiz-meta li{align-items:flex-start;gap:var(--bl-space-8,8px); padding:var(--bl-space-12,12px);font-size:var(--t-label,14px);line-height:1.3} .nmtq .quiz-meta li svg{flex:0 0 18px;width:18px;height:18px;margin-top:var(--bl-space-2,2px)} .nmtq-bar{padding:var(--bl-space-8,8px) var(--bl-space-12,12px)} .nmtq-item{padding:var(--bl-space-12,12px)} .nmtq-nav .quiz-btn{width:100%;flex:1 1 100%} .nmtq-nav .quiz-skip{width:100%} .nmtq-result{padding:var(--bl-space-20,20px) var(--bl-space-16,16px)} /* Капсула заявки стоїть у вкладеній картці всередині .quiz-app, тож на мобільному їй бракує ширини: колонка пігулки сайзиться по min-content кнопки (nowrap) і разом із полем вилазила за білу картку на 34px. Той самий фікс, що в micro-test.php. Селектори з body.theme-2026, бо базові правила капсули мають ту саму вагу. */ .nmtq-after .quiz-lead--result{padding:var(--bl-space-20,20px) var(--bl-space-12,12px)} body.theme-2026 .nmtq-after .cta-lead-card{padding:var(--bl-space-24,24px) var(--bl-space-16,16px)} body.theme-2026 .nmtq-after .cta-lead-pill{grid-template-columns:minmax(0,1fr)} body.theme-2026 .nmtq-after .cta-lf-go{padding:var(--bl-space-12,12px) var(--bl-space-16,16px)} } @media (max-width:380px){ body.theme-2026 .nmtq-after .cta-lf-go{white-space:normal} }