/* Тест на дальтонизм: стили теста. Только классы .zs-color-… внутри .zs-tool[data-tool="color"]; общее — core.css.
   Префикс [data-tool=color] нужен для веса: правила core.css вида .zs-panel p иначе перебивают свои. */

/* шаг «Экран» */
[data-tool=color] .zs-color-size p{max-width:var(--measure);font:400 17px/1.55 var(--f-ui)}
[data-tool=color] .zs-color-dist{margin-top:6px}

/* шаг «Картинки»: слева лист с картинкой, справа вопрос и кнопки */
[data-tool=color] .zs-color-run{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
[data-tool=color] .zs-color-stage{min-width:0}
[data-tool=color] .zs-color-page{display:flex;align-items:center;justify-content:center;padding:12px;background:#fff;box-shadow:0 0 0 1px var(--rule-2)}
[data-tool=color] .zs-color-plate{display:block;flex:none;max-width:100%;height:auto}
[data-tool=color] .zs-color-hint{margin:10px 0 0;font:400 14.5px/1.45 var(--f-ui);color:var(--ink-2)}
[data-tool=color] .zs-color-side{min-width:0}
[data-tool=color] .zs-color-no{margin:0;font:400 12.5px/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
[data-tool=color] .zs-color-bar{display:block;height:3px;margin:8px 0 14px;background:var(--rule)}
[data-tool=color] .zs-color-bar__fill{display:block;width:0;height:100%;background:var(--red);transition:width .2s}
[data-tool=color] .zs-color-q{margin:0;min-height:2.6em;font:700 clamp(18px,1.5vw,22px)/1.3 var(--f-ui);color:var(--ink)}
[data-tool=color] .zs-answers.zs-color-keys{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:12px;touch-action:manipulation}
[data-tool=color] .zs-color-keys .zs-ans{min-width:0;touch-action:manipulation}
[data-tool=color] .zs-color-keys .zs-ans[data-v="0"]{padding:4px;font:600 15px/1.15 var(--f-ui)}
[data-tool=color] .zs-color-kbd{margin:10px 0 0;font:400 13px/1.4 var(--f-mono);color:var(--ink-3)}
[data-tool=color] .zs-color-prev{display:inline-block;min-height:48px;margin-top:6px;padding:12px 0;background:none;border:0;color:var(--link);font:600 15px/1.2 var(--f-ui);cursor:pointer}
[data-tool=color] .zs-color-prev:hover{color:var(--link-hover)}
[data-tool=color] .zs-color-prev:disabled{color:var(--ink-3);opacity:.45;cursor:default}
@media (hover:none){[data-tool=color] .zs-color-kbd{display:none}}
@media (min-width:860px){
  [data-tool=color] .zs-color-run{grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:24px 36px;align-items:center}
  [data-tool=color] .zs-color-page{padding:20px}
}

/* результат: итог — заголовок карточки; четыре счётчика на узком экране — сеткой 2 × 2, а не столбиком, чтобы текст итога
   был на первом экране; дальше «Ответы к картинкам» — альбом таблиц с подписями */
@media (max-width:520px){
  [data-tool=color] .zs-result__rx{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-tool=color] .zs-result__rx>div{padding:8px 10px 10px;border-top:0;border-left:1px solid var(--rule-2)}
  [data-tool=color] .zs-result__rx>div:nth-child(odd){padding-left:0;border-left:0}
  [data-tool=color] .zs-result__rx>div:nth-child(n+3){border-top:1px solid var(--rule-2)}
  [data-tool=color] .zs-result__rx dt{font-size:11px;letter-spacing:.04em}
  [data-tool=color] .zs-result__rx dd{font-size:24px}
  [data-tool=color] .zs-result__rx .zs-result__sub{margin-top:2px;font-size:12px}
}
[data-tool=color] .zs-color-answers{margin-top:30px;padding-top:20px;border-top:1px solid var(--ink)}
[data-tool=color] .zs-color-warn{margin:0 0 14px;max-width:var(--measure);font:400 15.5px/1.5 var(--f-ui);color:var(--ink-2)}
[data-tool=color] .zs-color-answers__body[hidden],[data-tool=color] .zs-color-open[hidden]{display:none}
[data-tool=color] .zs-color-open{margin-bottom:6px}
[data-tool=color] .zs-color-modes__l{margin:0 0 8px;font:400 15px/1.4 var(--f-ui);color:var(--ink-2)}
[data-tool=color] .zs-color-modes{display:grid;grid-template-columns:repeat(4,auto);width:max-content;max-width:100%;margin-bottom:10px;border:1.5px solid var(--ink);overflow:hidden}
[data-tool=color] .zs-color-mode{min-height:48px;padding:10px 18px;background:transparent;border:0;box-shadow:0 0 0 .75px var(--ink);color:var(--ink);font:600 15px/1.2 var(--f-ui);cursor:pointer}
[data-tool=color] .zs-color-mode:hover{background:var(--paper-2)}
[data-tool=color] .zs-color-mode[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
@media (max-width:560px){[data-tool=color] .zs-color-modes{grid-template-columns:1fr 1fr;width:auto}[data-tool=color] .zs-color-mode{padding:10px 8px}}
[data-tool=color] .zs-color-simnote{margin:0 0 16px;max-width:var(--measure);font:400 14px/1.5 var(--f-ui);color:var(--ink-3)}
[data-tool=color] .zs-color-album{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:14px}
[data-tool=color] .zs-color-ans{display:flex;flex-direction:column;align-items:center;min-width:0;padding:8px 8px 10px;background:#fff;box-shadow:0 0 0 1px var(--rule-2)}
[data-tool=color] .zs-color-ans.is-err{box-shadow:0 0 0 1px var(--rule-2),inset 0 3px 0 var(--red)}
[data-tool=color] .zs-color-thumb{display:block;max-width:100%;height:auto}
[data-tool=color] .zs-color-ans p{width:100%;margin:0}
[data-tool=color] .zs-color-ans .zs-color-ans__d{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;padding-top:6px;border-top:1px solid var(--rule);font:400 12.5px/1.3 var(--f-mono);color:var(--ink-3)}
[data-tool=color] .zs-color-ans__d strong{font:700 19px/1 var(--f-ui);color:var(--ink)}
[data-tool=color] .zs-color-ans .zs-color-ans__a{margin-top:4px;font:400 13.5px/1.35 var(--f-ui);color:var(--ink-2)}
[data-tool=color] .zs-color-ans.is-err .zs-color-ans__a{color:var(--red)}
[data-tool=color] .zs-color-ans .zs-color-ans__k{margin-top:2px;font:400 11.5px/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}