/* Тест на астигматизм: стили теста. Только классы .zs-astig-… внутри .zs-tool[data-tool="astig"]; общее — core.css.
   Белое поле .zs-astig-stage: заголовок, фигура, вопрос и кнопки. Уже 900px вопрос стоит под фигурой, шире (.is-row) —
   колонкой 340px справа. Отступы поля (12px по бокам, 16 + 20 по высоте), зазоры и ширина колонки учтены в astig.js
   (STAGE_PAD, STAGE_PAD_V, ROW_GAP, SIDE_W, COL_GAP) при расчёте размера фигуры. .zs-astig-panel — панель мастера,
   на ней включается полноэкранный режим. */
.zs-astig-panel:fullscreen{overflow:auto}
.zs-astig-panel:-webkit-full-screen{overflow:auto}

.zs-astig-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "fig" "q" "foot";row-gap:14px;justify-items:center;padding:16px 12px 20px;background:#fff;color:#000;box-shadow:0 0 0 1px var(--rule-2)}
.zs-astig-stage.is-row{grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto auto 1fr;grid-template-areas:"fig head" "fig q" "fig foot";column-gap:24px;align-items:start}
.zs-astig-head{grid-area:head;width:100%;max-width:760px}
.zs-panel .zs-astig-head h2{margin:0 0 6px}
.zs-panel .zs-astig-head p{margin:0;font:400 16px/1.45 var(--f-ui)}
.zs-astig-fig{grid-area:fig;display:flex;justify-content:center;max-width:100%}
/* фигура прижата к верху: колонка вопроса растёт (выбор линий, наклон головы), а фигура стоит на месте */
.zs-astig-stage.is-row .zs-astig-fig{align-self:start}
.zs-astig-svg{display:block;flex:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.zs-astig-lab circle{fill:transparent}
.zs-astig-lab text{fill:#000;font-family:var(--f-mono);font-weight:700}
.zs-astig-lab.is-on circle{fill:var(--ink)}
.zs-astig-lab.is-on text{fill:#fff}

.zs-astig-q{grid-area:q;width:100%;max-width:760px;font:400 16px/1.45 var(--f-ui);color:var(--ink)}
.zs-panel .zs-astig-ask{margin:0 0 4px;font:700 clamp(19px,1.6vw,22px)/1.3 var(--f-ui);text-align:center}
.zs-panel .zs-astig-hint{margin:6px 0 0;text-align:center;color:var(--ink-2)}
.zs-panel .zs-astig-hint.is-warn{color:var(--red);font-weight:600}
.zs-astig-ans{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-top:12px}
.zs-astig-ans .zs-ans{font-size:18px}
.zs-astig-q .zs-actions{justify-content:center;margin-top:16px}
.zs-astig-foot{grid-area:foot;width:100%;max-width:760px}
/* служебные кнопки («На весь экран», «Назад», «Пропустить…») — по левому краю, как ряд .zs-actions у остальных тестов */
.zs-astig-acts{justify-content:flex-start}
.zs-panel .zs-astig-acts{margin-top:4px}

.zs-astig-stage.is-row .zs-astig-ask,.zs-astig-stage.is-row .zs-astig-hint{text-align:left}
.zs-astig-stage.is-row .zs-astig-ans{grid-template-columns:minmax(0,1fr)}
.zs-astig-stage.is-row .zs-astig-q .zs-actions,.zs-astig-stage.is-row .zs-astig-acts{justify-content:flex-start}
.zs-astig-stage.is-row .zs-astig-mers{grid-template-columns:repeat(3,minmax(0,1fr))}

.zs-astig-mers{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:14px}
.zs-astig-mer{min-height:64px;padding:6px 4px;background:#fff;border:2px solid var(--ink);color:#000;font:700 19px/1 var(--f-mono);cursor:pointer;touch-action:manipulation}
.zs-astig-mer:hover{background:var(--paper-2)}
.zs-astig-mer[aria-pressed="true"]{background:var(--ink);color:#fff}

.zs-panel .zs-astig-lbl{margin:18px 0 8px;font:600 15px/1.3 var(--f-ui)}
.zs-panel .zs-astig-meta{margin:10px 0 0;font:400 13px/1.45 var(--f-mono);color:var(--ink-3)}
.zs-panel .zs-astig-warn{margin:12px 0 0;padding:10px 14px;border-left:3px solid var(--red);background:#fff;font:400 15px/1.45 var(--f-ui)}
.zs-astig-warn[hidden]{display:none}
.zs-astig-link{padding:0;background:none;border:0;color:var(--link);font:inherit;font-weight:600;cursor:pointer}

@media (max-width:600px){
  .zs-astig-mers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .zs-astig-ans{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .zs-astig-ans .zs-ans{padding:6px 2px;font-size:15px;word-break:normal;overflow-wrap:normal;-webkit-hyphens:manual;hyphens:manual}
}
@media (max-width:420px){
  .zs-astig-ans .zs-ans{font-size:14px}
}
/* три ответа всегда в ряд и одного размера: ни один вариант не выделен. Самые длинные слова — «Вытянутое», «понять» */
@media (max-width:359px){
  .zs-astig-ans .zs-ans{font-size:13px}
}
/* невысокий телефон: заголовок, вопрос и кнопки компактнее, чтобы фигура и ответы помещались в одном экране */
@media (max-width:600px) and (max-height:740px){
  .zs-panel .zs-astig-head h2{margin-bottom:4px;font-size:19px}
  .zs-panel .zs-astig-head p{font-size:14px;line-height:1.35}
  .zs-panel .zs-astig-ask{font-size:17px}
  .zs-panel .zs-astig-hint{margin-top:4px;font-size:14px;line-height:1.35}
  .zs-astig-ans{margin-top:10px}
  .zs-astig-ans .zs-ans,.zs-astig-mer{min-height:52px}
}