/* Тест контрастной чувствительности: стили теста. Только классы .zs-contrast-… внутри .zs-tool[data-tool="contrast"]; общее — core.css.
   Белое поле — та же «таблица» аппарата Рота; текущая буква отмечена красной указкой снизу, как у окулиста. */

/* сцена теста: подпись и кнопка «На весь экран», белое поле, кнопки-буквы */
.zs-contrast-stage{display:flex;flex-direction:column;gap:12px;min-width:0}
.zs-contrast-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.zs-panel .zs-contrast-cap{margin:0;font:400 12.5px/1.35 var(--f-mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.zs-screen.zs-contrast-screen{min-height:0;padding:22px 12px 16px;overflow:hidden}
.zs-contrast-row{display:flex;align-items:flex-start;justify-content:center;max-width:100%}
.zs-contrast-cell{display:flex;flex-direction:column;align-items:center;flex:none}
.zs-contrast-letter{display:block;image-rendering:pixelated}
.zs-contrast-ptr{display:block;width:56%;height:4px;margin-top:12px;background:var(--red);visibility:hidden}
.zs-contrast-cell.is-cur .zs-contrast-ptr{visibility:visible}

/* кнопки ответа: семь букв тем же рисунком и «Не вижу» */
.zs-answers.zs-contrast-ans{grid-template-columns:repeat(8,minmax(0,1fr));max-width:780px;margin-top:4px}
.zs-contrast-ans .zs-ans svg{width:30px;height:30px}
.zs-contrast-ans .zs-ans[data-v="none"]{padding:6px 4px;font-size:15px;line-height:1.15}
.zs-panel .zs-contrast-keys{margin:0;font:400 13.5px/1.45 var(--f-ui);color:var(--ink-3)}
/* «Исправить» — отмена последнего ответа; рядом подсказка о клавишах */
.zs-contrast-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.zs-tool .zs-contrast-undo{min-height:48px;padding-top:6px;padding-bottom:6px}   /* как остальные кнопки тестов: от 48 px под палец */
.zs-tool .zs-contrast-undo:disabled{opacity:.45;cursor:default}
.zs-tool .zs-contrast-undo:disabled:hover{background:transparent;color:var(--ink)}
/* вопрос о повторе яркой тройки стоит на месте кнопок ответа */
.zs-contrast-offer{margin-top:0}
.zs-contrast-offer .zs-actions{margin:4px 0 12px}
@media (max-width:720px){.zs-answers.zs-contrast-ans{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* на весь экран: белый фон вокруг, поле с буквами растягивается */
.zs-contrast-stage:fullscreen{box-sizing:border-box;width:100%;height:100%;padding:16px;background:#fff;overflow:auto}
.zs-contrast-stage:-webkit-full-screen{box-sizing:border-box;width:100%;height:100%;padding:16px;background:#fff;overflow:auto}
.zs-contrast-stage.is-pseudo-full{padding:16px;background:#fff}
.zs-contrast-stage:fullscreen .zs-contrast-screen{flex:1 0 auto;box-shadow:none}
.zs-contrast-stage:-webkit-full-screen .zs-contrast-screen{flex:1 0 auto;box-shadow:none}
.zs-contrast-stage.is-pseudo-full .zs-contrast-screen{flex:1 0 auto;box-shadow:none}

/* проверка экрана: четыре светлых квадрата на белом */
.zs-screen.zs-contrast-check{flex-direction:row;align-items:flex-start;justify-content:center;gap:12px;min-height:0;padding:26px 12px 18px;overflow:hidden}
.zs-contrast-patch{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none}
.zs-contrast-swatch{display:block}
.zs-contrast-num{font:400 13px/1 var(--f-mono);color:var(--ink-3)}
.zs-answers.zs-contrast-scr-ans{grid-template-columns:repeat(5,minmax(0,1fr));max-width:620px}
.zs-contrast-scr-ans .zs-ans[data-v="0"]{padding:6px 4px;font-size:15px;line-height:1.15}
@media (max-width:560px){
  .zs-answers.zs-contrast-scr-ans{grid-template-columns:repeat(4,minmax(0,1fr))}
  .zs-contrast-scr-ans .zs-ans[data-v="0"]{grid-column:1/-1;min-height:52px;font-size:17px}
}
.zs-contrast-warn{max-width:var(--measure);margin-top:18px;padding:14px 16px 4px;background:#fff;border-top:3px solid var(--red);box-shadow:0 0 0 1px var(--rule-2)}
.zs-contrast-warn p{font:400 16px/1.55 var(--f-ui)}

/* сцена получает фокус программно (tabindex=-1), чтобы Enter и пробел не отвечали буквой «Б»: рамка не нужна */
.zs-contrast-stage:focus{outline:none}
/* на сенсорных экранах :hover залипает на последней нажатой кнопке — будто ответ на новую букву уже выбран */
@media (hover:none){
  .zs-contrast-ans .zs-ans:hover,.zs-contrast-scr-ans .zs-ans:hover{background:#fff}
  .zs-contrast-ans .zs-ans:active,.zs-contrast-scr-ans .zs-ans:active{background:var(--ink);color:#fff}
  .zs-tool .zs-contrast-undo:hover{background:transparent;color:var(--ink)}
  .zs-tool .zs-contrast-undo:active{background:var(--ink);color:var(--paper)}
}