/* Тесты зрения zorsokol.ru — общий CSS страниц тестов и встроенных тестов. Подключается только там (tool_assets()).
   Метафора та же, что у сайта: кабинет окулиста. Панель теста — световой короб аппарата Рота (рамка --case),
   шкала шагов — подписи D/V таблицы (моноширинные), результат — бланк рецепта (.rx), «к врачу» — талон с линией отрыва.
   Токены — из site.css (:root). Классы тестов: .zs-<key>-… в своих <key>.css. Правит только интегратор. */

/* ---------- страница теста: шапка, сцена, текст с колонкой «к врачу» ---------- */
.tool-head{padding:20px 0 22px;max-width:1120px}
.tool-lead{margin:14px 0 0;max-width:var(--measure);font:400 19px/1.6 var(--f-text);color:var(--ink-2)}
.tool-note{margin:16px 0 0;max-width:var(--measure);padding:10px 14px;background:var(--mint);border-top:1px solid var(--mint-rule);border-bottom:1px solid var(--mint-rule);font:400 15px/1.5 var(--f-ui);color:var(--ink)}
.tool-stage{max-width:1180px}
.tool-text{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;margin-top:var(--sec)}
.tool-body{max-width:var(--measure);min-width:0}
.tool-side{display:grid;gap:24px;align-content:start;min-width:0}
.tool-text--after{margin-top:var(--sec)}
.tool-after{min-width:0;max-width:var(--measure)}
.tool-after .tool-faq{margin-top:0}
@media (min-width:1080px){
  .tool-text{grid-template-columns:minmax(0,var(--measure)) minmax(320px,440px);column-gap:clamp(40px,4.5vw,88px)}
  .tool-text .tool-side{grid-column:2;grid-row:1}
  .tool-text .tool-body,.tool-text .tool-after{grid-column:1;grid-row:1}
}

/* ---------- корень теста и панель (световой короб) ---------- */
.zs-tool{position:relative;min-height:120px;font-family:var(--f-ui)}
.prose .zs-tool{margin:28px 0 34px;font-size:16px;line-height:1.5}
/* статья, переписанная под встроенный тест (page.php: 'replace'): вводный абзац над виджетом */
.prose>.lead{margin-top:0;font-size:1.06em;color:var(--ink-2)}
/* встроенный тест: списки .prose (отступы, маркеры) не трогают шкалу шагов */
.prose .zs-steps{margin:0;padding:0 0 10px}
.prose .zs-steps>li{padding-left:0;margin:0}
.prose .zs-steps>li::before{content:none}
.zs-wait{margin:0;padding:22px 0;font:400 15px/1.5 var(--f-ui);color:var(--ink-3)}
/* без JavaScript «Загружаем тест…» не показываем: тест не загрузится, видна только строка из noscript */
html:not(.js) .zs-tool>.zs-wait{display:none}
.zs-panel{padding:clamp(16px,2.4vw,32px);background:var(--box);border:clamp(6px,.7vw,10px) solid var(--case);box-shadow:0 24px 46px -34px rgba(20,30,25,.55)}
/* шаги без рисунка (подготовка, калибровка, расстояние): короб по ширине текста, без пустой полосы справа на широком экране.
   Шаги со знаками и итог — во всю ширину сцены. У теста на цвет калибровка и расстояние — один шаг «screen».
   Расстояние в тесте на астигматизм не сужаем: список расстояний там считается по ширине панели (astig.js: maxDist) */
.zs-panel[data-step="prep"],.zs-panel[data-step="calib"],.zs-tool:not([data-tool="astig"]) .zs-panel[data-step="distance"],
.zs-tool[data-tool="color"] .zs-panel[data-step="screen"]{max-width:944px}
.zs-panel h2,.zs-panel h3{margin:0 0 12px;font:700 clamp(21px,1.7vw,26px)/1.25 var(--f-ui)}
.zs-panel p{margin:0 0 12px}
.zs-prep.prose{font-size:17px;max-width:var(--measure)}
.zs-prep.prose ul,.zs-prep.prose ol{margin:0 0 4px}

/* шкала шагов: как строка подписей таблицы — номер моно, текущий шаг подчёркнут красной «указкой» */
.zs-steps{list-style:none;display:flex;margin:0;padding:0 0 10px;gap:6px 22px;flex-wrap:wrap;font:400 12.5px/1.3 var(--f-mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.zs-steps li{position:relative;display:flex;align-items:baseline;gap:8px;padding-bottom:6px}
.zs-steps__n{font-variant-numeric:tabular-nums}
.zs-steps .is-done{color:var(--ink-2)}
.zs-steps .is-current{color:var(--ink)}
.zs-steps .is-current::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red)}
@media (max-width:640px){
  .zs-steps{gap:6px 14px}
  .zs-steps li:not(.is-current) .zs-steps__t{display:none}
}

/* кнопки: от 48 px по высоте, под палец */
.zs-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.zs-actions .btn{min-height:48px}
.zs-go{min-width:160px;justify-content:center}
.zs-switch{display:flex;flex-wrap:wrap;gap:0;margin:0 0 14px;box-shadow:inset 0 0 0 1.5px var(--ink);width:max-content;max-width:100%}
.zs-switch--wrap{width:auto}
.zs-switch__btn{min-height:48px;padding:10px 18px;background:transparent;border:0;border-right:1.5px solid var(--ink);color:var(--ink);font:600 15px/1.2 var(--f-ui);cursor:pointer}
.zs-switch__btn:last-child{border-right:0}
.zs-switch__btn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.zs-switch--wrap .zs-switch__btn{flex:1 0 auto;min-width:72px;border-bottom:0}
/* выбор расстояния: сетка-таблица, рамка не ломается при переносе на узком экране */
.zs-switch--wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));width:100%;max-width:640px;box-shadow:none;border-top:1.5px solid var(--ink);border-left:1.5px solid var(--ink)}
.zs-switch--wrap .zs-switch__btn,.zs-switch--wrap .zs-switch__btn:last-child{min-width:0;padding:10px 6px;border:0;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);white-space:nowrap}
/* итог с блоком «к врачу» на экране — такой же блок в боковой колонке не дублируется */
.zs-has-result .tool-side>.referral{display:none}
.zs-step,.zs-fs{min-width:48px;min-height:48px;padding:8px 12px;background:var(--box);border:1.5px solid var(--ink);color:var(--ink);font:600 16px/1 var(--f-mono);cursor:pointer}
/* подсветка наведения только там, где есть мышь: на телефоне :hover «залипает» после касания */
@media (hover:hover){
  .zs-step:hover,.zs-fs:hover,.zs-switch__btn:hover{background:var(--paper-2)}
  .zs-switch__btn[aria-pressed="true"]:hover{background:var(--ink)}
  .zs-ans:hover{background:var(--paper-2)}
}
.zs-fs{font:600 14px/1.2 var(--f-ui)}
/* без синей вспышки при касании: нажатие и так видно по :active и aria-pressed */
.zs-switch__btn,.zs-step,.zs-fs,.zs-ans,.zs-tool .btn{-webkit-tap-highlight-color:transparent}

/* кнопки ответа: крупные, высокий контраст */
.zs-answers{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:10px;margin-top:18px}
.zs-ans{min-height:64px;padding:8px;background:#fff;border:2px solid var(--ink);color:#000;font:700 22px/1.1 var(--f-ui);cursor:pointer;touch-action:manipulation}
.zs-ans:active{background:var(--ink);color:#fff}
.zs-ans svg{display:block;width:32px;height:32px;margin:auto}

/* «экран-таблица»: белое поле с чёрными знаками; на весь экран — Fullscreen API или растяжка на окно */
.zs-screen{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:clamp(240px,40vh,520px);padding:24px;background:#fff;color:#000;box-shadow:0 0 0 1px var(--rule-2)}
.zs-screen:fullscreen{min-height:100vh;box-shadow:none}
.zs-screen:-webkit-full-screen{min-height:100vh;box-shadow:none}
.is-pseudo-full{position:fixed!important;top:0;right:0;bottom:0;left:0;z-index:1000;min-height:0!important;margin:0!important;overflow:auto}
.zs-noscroll,.zs-noscroll body{overflow:hidden}
.zs-mirror{transform:scaleX(-1)}

/* ---------- калибровка: карта ID-1 или линейка в натуральную величину ---------- */
.zs-calib__how{max-width:var(--measure);font:400 16px/1.55 var(--f-ui);color:var(--ink)}
.zs-calib__stage{--mm:3.78px;display:flex;align-items:center;justify-content:center;min-height:calc(var(--mm) * 62);padding:16px 0;overflow:hidden;
  background-color:#fff;background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:calc(var(--mm) * 10) calc(var(--mm) * 10);box-shadow:0 0 0 1px var(--rule-2)}
.zs-calib__stage.is-vertical{min-height:calc(var(--mm) * 92)}
.zs-card{position:relative;flex:none;width:calc(var(--mm) * 85.6);height:calc(var(--mm) * 53.98);border-radius:calc(var(--mm) * 3.18);background:#e9ede8;box-shadow:inset 0 0 0 2px var(--ink)}
.is-vertical .zs-card{width:calc(var(--mm) * 53.98);height:calc(var(--mm) * 85.6)}
.zs-card__chip{position:absolute;left:calc(var(--mm) * 9);top:calc(var(--mm) * 19);width:calc(var(--mm) * 11);height:calc(var(--mm) * 8.5);border-radius:calc(var(--mm) * 1.2);background:#c9b47c;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.is-vertical .zs-card__chip{left:calc(var(--mm) * 19);top:calc(var(--mm) * 9);width:calc(var(--mm) * 8.5);height:calc(var(--mm) * 11)}
.zs-card__dim{position:absolute;left:0;right:0;bottom:calc(var(--mm) * 6);height:0;border-top:1.5px solid var(--red)}
.zs-card__dim::before,.zs-card__dim::after{content:"";position:absolute;top:-6px;width:1.5px;height:11px;background:var(--red)}
.zs-card__dim::before{left:0}
.zs-card__dim::after{right:0}
.is-vertical .zs-card__dim{left:auto;top:0;bottom:0;right:calc(var(--mm) * 6);width:0;height:auto;border-top:0;border-left:1.5px solid var(--red)}
.is-vertical .zs-card__dim::before,.is-vertical .zs-card__dim::after{left:-6px;width:11px;height:1.5px}
.is-vertical .zs-card__dim::before{top:0}
.is-vertical .zs-card__dim::after{top:auto;bottom:0;right:auto}
.zs-ruler{--len:100;position:relative;flex:none;width:calc(var(--mm) * var(--len));height:44px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink);
  background-image:linear-gradient(90deg,var(--ink) 1.5px,transparent 1.5px),linear-gradient(90deg,var(--ink) 1px,transparent 1px);
  background-size:calc(var(--mm) * 10) 22px,var(--mm) 10px;background-repeat:repeat-x;background-position:0 0,0 0}
.is-vertical .zs-ruler{width:44px;height:calc(var(--mm) * var(--len));
  background-image:linear-gradient(var(--ink) 1.5px,transparent 1.5px),linear-gradient(var(--ink) 1px,transparent 1px);
  background-size:22px calc(var(--mm) * 10),10px var(--mm);background-repeat:repeat-y}
.zs-calib__stage--card .zs-ruler,.zs-calib__stage--ruler .zs-card{display:none}
.zs-calib__ctrl{display:flex;align-items:center;gap:8px;margin-top:14px}
.zs-range{flex:1;min-width:0;height:48px;margin:0;accent-color:var(--ink);cursor:pointer}
.zs-calib__read{margin:10px 0 0;font:400 13px/1.4 var(--f-mono);color:var(--ink-3)}
.zs-calib__hint{margin:10px 0 0;max-width:var(--measure);font:400 14.5px/1.5 var(--f-ui);color:var(--ink-3)}
.zs-calib-ok p{font:400 17px/1.55 var(--f-ui)}
.zs-calib-ok .zs-calib__read{margin-top:-6px;font:400 13px/1.4 var(--f-mono);color:var(--ink-3)}
@media (max-width:480px){.zs-calib__ctrl .zs-step:nth-child(1),.zs-calib__ctrl .zs-step:nth-child(5){display:none}}

/* расстояние */
.zs-dist__own{display:flex;align-items:center;gap:8px;font:400 16px/1.4 var(--f-ui)}
.zs-num{width:96px;min-height:48px;padding:8px 10px;border:1.5px solid var(--ink);background:#fff;font:600 18px/1 var(--f-mono)}
.zs-num[aria-invalid="true"]{border-color:var(--red);outline:2px solid var(--red);outline-offset:1px}
.zs-dist__err{margin:8px 0 0;font:600 15px/1.45 var(--f-ui);color:var(--red)}
.zs-dist__err:empty{display:none}

/* ---------- результат: бланк рецепта ---------- */
.zs-result{padding:clamp(16px,2.4vw,32px);background:var(--box);border-top:2px solid var(--ink);box-shadow:0 0 0 1px var(--rule-2)}
.zs-result:focus{outline:0}
.zs-result__title{margin:0;font:700 clamp(22px,1.9vw,28px)/1.2 var(--f-ui)}
.zs-result__rx dd{font-size:clamp(28px,3vw,40px)}
.zs-result__rx .zs-result__sub{margin-top:4px;font:400 13px/1.35 var(--f-mono);color:var(--ink-3)}
.zs-result__text{margin-top:16px;max-width:var(--measure);font:400 17px/1.6 var(--f-text)}
.zs-result__note{margin:14px 0 0;max-width:var(--measure);font:400 14.5px/1.5 var(--f-ui);color:var(--ink-3)}
.zs-panel .zs-result{padding:0;background:none;border-top:0;box-shadow:none}
@media (max-width:520px){.zs-result__rx{grid-template-columns:minmax(0,1fr)}.zs-result__rx>div{border-left:0;padding-left:0;border-top:1px solid var(--rule-2)}.zs-result__rx>div:first-child{border-top:0}}
/* «к врачу» и другие тесты под итогом; на странице теста шире 1100 px — колонкой справа от пояснения, как корешок талона.
   Во встроенном тесте (таблица в колонке статьи) места на вторую колонку нет — всегда друг под другом */
.zs-result__side{display:grid;gap:22px;align-content:start;margin-top:22px;min-width:0}
@media (min-width:1100px){
  .tool-stage .zs-result{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);column-gap:clamp(32px,3.4vw,56px);align-items:start}
  .tool-stage .zs-result>*{grid-column:1}
  .tool-stage .zs-result>.zs-result__title,.tool-stage .zs-result>.zs-result__rx{grid-column:1 / -1}
  .tool-stage .zs-result>.zs-result__side{grid-column:2;grid-row:3;margin-top:16px}
}
/* другие тесты: строки бланка, как список тестов раздела, только короче */
.zs-next .zs-next__title{margin:0 0 6px;font:400 12.5px/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
/* .zs-next .zs-next__list… — сильнее .prose ul>li: во встроенном тесте (таблица в статье) без маркеров и отступов списка статьи */
.zs-next .zs-next__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink);font-family:var(--f-ui)}
.zs-next .zs-next__list>li{margin:0;padding:0;border-bottom:1px solid var(--rule-2)}
.zs-next .zs-next__list>li::before{content:none}
.zs-next .zs-next__list a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:8px 4px;font:600 16px/1.3 var(--f-ui);color:var(--link)}
.zs-next .zs-next__list a::after{content:"→";content:"→" / "";flex:none;font:400 16px/1 var(--f-mono);color:var(--ink-3)}
.zs-next .zs-next__list a:hover{text-decoration:none;background:rgba(226,235,228,.55)}

/* заглушка */
.zs-soon{padding:clamp(18px,2.4vw,32px);background:var(--box);border:clamp(6px,.7vw,10px) solid var(--case)}
.zs-soon p{margin:8px 0 0;max-width:var(--measure);font:400 16px/1.55 var(--f-ui);color:var(--ink-2)}
.zs-soon .zs-soon__title{margin:0;font:700 clamp(21px,1.8vw,26px)/1.25 var(--f-ui);color:var(--ink)}

/* ---------- «к врачу»: талон с корешком и линией отрыва ---------- */
.referral{display:grid;grid-template-columns:minmax(0,1fr);background:var(--box);box-shadow:0 0 0 1.5px var(--ink);font-family:var(--f-ui)}
.referral__main{padding:20px 22px 22px}
.referral__title,.referral__main .referral__title{margin:0;font:700 clamp(21px,1.7vw,25px)/1.25 var(--f-ui);color:var(--ink)}
.referral__main p{margin:10px 0 0;font:400 16px/1.55 var(--f-ui);color:var(--ink-2)}
.referral__main .referral__more{margin-top:4px}
.referral__more a{display:inline-flex;align-items:center;min-height:48px;font-weight:600}
.referral__offers{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.referral__btn{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:56px;padding:10px 16px;background:var(--ink);color:var(--paper);font:600 16px/1.25 var(--f-ui)}
.referral__btn small{font:400 13px/1.3 var(--f-ui);color:#c9d3cd}
.referral__btn:hover{background:var(--link-hover);color:#fff;text-decoration:none}
.referral__mark{display:block;margin-top:4px;font:400 11.5px/1.3 var(--f-mono);color:var(--ink-3)}
/* предупреждение 38-ФЗ, ст. 24, ч. 7: полоса на всю ширину, не меньше 5 % высоты блока, кегль не меньше текста блока */
.referral__warn{margin:0;padding:12px 22px;min-height:32px;border-top:1.5px dashed var(--ink);background:#fff;font:700 16px/1.35 var(--f-ui);text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.referral__stub{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin:0;padding:9px 22px 10px;border-top:1.5px dashed var(--ink);font:400 12px/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.referral--compact .referral__main{padding:16px 18px 18px}
.referral--compact .referral__main .referral__title{font-size:19px}

/* «срочно к врачу» */
.urgent{padding:18px 22px 20px;background:var(--box);border-top:3px solid var(--red);box-shadow:0 0 0 1px var(--rule-2);font-family:var(--f-ui)}
.urgent__title{margin:0;font:700 clamp(20px,1.6vw,23px)/1.25 var(--f-ui)}
.urgent__list{margin:12px 0 0;padding-left:1.15em;font:400 15.5px/1.5 var(--f-ui)}
.urgent__list li+li{margin-top:6px}
.urgent__soon{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--rule-2);font:600 15px/1.5 var(--f-ui);color:var(--ink)}
.urgent__where{margin:12px 0 0;font:400 14.5px/1.5 var(--f-ui);color:var(--ink-2)}

/* ---------- список тестов раздела: строки бланка ---------- */
.tool-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.tool-list li{border-bottom:1px solid var(--rule-2)}
.tool-list__row{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr) auto;align-items:baseline;gap:4px 24px;padding:14px 4px;color:var(--ink)}
a.tool-list__row:hover{text-decoration:none;background:rgba(226,235,228,.55)}
.tool-list__name{font:700 19px/1.3 var(--f-ui)}
a.tool-list__row .tool-list__name{color:var(--link)}
.tool-list__about{font:400 15px/1.45 var(--f-ui);color:var(--ink-2)}
.tool-list__go{font:400 18px/1 var(--f-mono);color:var(--ink-3)}
.tool-list__here{font:400 12.5px/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--red);white-space:nowrap}
@media (max-width:720px){
  .tool-list__row{grid-template-columns:minmax(0,1fr) auto}
  .tool-list__about{grid-column:1;grid-row:2}
  .tool-list__go,.tool-list__here{grid-column:2;grid-row:1 / span 2;align-self:center}
}
.tool-tests{margin-top:var(--sec)}
.tool-faq__list h3{margin:26px 0 8px;font:700 20px/1.3 var(--f-ui)}
.tool-faq__list h3:first-child{margin-top:0}

/* ---------- телефон: тест на всю ширину экрана, чтобы карта ID-1 в натуральную величину помещалась ---------- */
@media (max-width:640px){
  .tool-stage,.prose .zs-tool{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
  .zs-panel,.zs-soon{border-width:5px 0;padding:16px var(--gutter)}
  .zs-steps,.zs-tool>.zs-wait,.zs-tool>noscript{padding-left:var(--gutter);padding-right:var(--gutter)}
  /* встроенный тест: .prose ol (0,1,1) иначе снимает отступ, и шкала шагов липнет к краю экрана */
  .prose .zs-steps{padding-left:var(--gutter);padding-right:var(--gutter)}
  .zs-tool>.zs-result{padding-left:var(--gutter);padding-right:var(--gutter)}
}

/* ---------- печать листа А4 (ZS.print): только .zs-print-sheet, лист без полей ---------- */
@page zs-a4{size:A4;margin:0}
@media print{
  .zs-print-sheet{page:zs-a4}
  /* ZS.print() ставит лист прямым потомком body: в потоке, без смещения; остальное убирается, а не прячется */
  html.zs-printing body>*:not(.zs-print-sheet){display:none!important}
  html.zs-printing body{margin:0;padding:0;background:#fff}
  html.zs-printing .zs-print-sheet{position:static;margin:0;box-shadow:none;border:0}
  .tool-side,.tool-tests,.zs-actions,.zs-steps,.zs-fs{display:none}
  /* обычная печать (меню браузера, Ctrl+P), если тест не подложил свой лист (ZS.onPrint: таблица, бланк сетки): текст страницы.
     От теста печатается только итог, когда он на экране, — без рамки короба, кнопок, «к врачу» и списка тестов */
  html:not(.zs-has-result) .zs-tool,.zs-tool button,.btn,.zs-result__side,.tool-list,.zs-next{display:none}
  .zs-panel{padding:0;border:0;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){.zs-tool *{animation:none!important;transition:none!important}}