/* Сетка Амслера: стили теста. Только классы .zs-amsler-… (и html.zs-amsler-printing на время печати бланка); общее — core.css.
   Сетка — «бланк Амслера»: белый лист с чёрной клеткой или оригинальный вариант, белая клетка на чёрном.
   Отметки различаются узором, а не только цветом: штриховка — кривые линии, точки — размыто, крест — линий нет. */

/* ---------- доска: выбор вида отметки, сетка, счётчик (уходит на весь экран целиком) ---------- */
.zs-amsler-board{position:relative}
.zs-amsler-types{margin:4px 0 12px}
.zs-amsler-type{display:inline-flex;align-items:center;gap:8px}
.zs-amsler-sw{flex:none;display:inline-block;width:18px;height:18px;box-shadow:inset 0 0 0 1px currentColor;background-color:#fff}
.zs-amsler-sw--1{background:repeating-linear-gradient(45deg,#b5352a 0 2px,#f3d9d6 2px 5px)}
.zs-amsler-sw--2{background:radial-gradient(circle,#4a4f4c 1.4px,transparent 1.8px) 0 0/5px 5px,#c5c9c6}
.zs-amsler-sw--3{background:linear-gradient(45deg,transparent 44%,#255ca0 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,#255ca0 44% 56%,transparent 56%),#d3deec}

.zs-amsler-stage{display:flex;justify-content:center;align-items:center;padding:clamp(14px,2.2vw,28px);background:#fff;box-shadow:0 0 0 1px var(--rule-2)}
.zs-amsler-stage--dark{background:#000;box-shadow:0 0 0 1px #000}
.zs-amsler-grid{display:block;flex:none;max-width:none;overflow:visible;cursor:crosshair;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.zs-amsler-grid:focus{outline:none}
.zs-amsler-grid:focus-visible{outline:2px solid var(--red);outline-offset:6px}

/* сама сетка: линии 1 CSS px, точка 2 мм */
.zs-amsler-bg{fill:#fff}
.zs-amsler-lines{fill:none;stroke:#000;stroke-width:1px}
.zs-amsler-dot{fill:#000}
.zs-amsler-cur{fill:none;stroke:var(--red);stroke-width:2.5px;visibility:hidden;pointer-events:none}
/* курсор клетки — только при работе с клавиатуры: после касания или щелчка рамку легко принять за отметку */
.zs-amsler-grid:focus-visible .zs-amsler-cur{visibility:visible}
.zs-amsler-stage--dark .zs-amsler-bg{fill:#000}
.zs-amsler-stage--dark .zs-amsler-lines{stroke:#fff}
.zs-amsler-stage--dark .zs-amsler-dot{fill:#fff}
.zs-amsler-stage--dark .zs-amsler-cur{stroke:#ff8a7e}

/* узоры отметок */
.zs-amsler-f1{fill:rgba(181,53,42,.2)}
.zs-amsler-s1{fill:#b5352a}
.zs-amsler-f2{fill:rgba(110,116,112,.42)}
.zs-amsler-s2{fill:#3f4441}
.zs-amsler-f3{fill:rgba(37,92,160,.22)}
.zs-amsler-s3{fill:none;stroke:#255ca0;stroke-width:.6}
.zs-amsler-stage--dark .zs-amsler-f1{fill:rgba(255,120,105,.28)}
.zs-amsler-stage--dark .zs-amsler-s1{fill:#ff7869}
.zs-amsler-stage--dark .zs-amsler-f2{fill:rgba(210,214,211,.38)}
.zs-amsler-stage--dark .zs-amsler-s2{fill:#d2d6d3}
.zs-amsler-stage--dark .zs-amsler-f3{fill:rgba(120,175,255,.3)}
.zs-amsler-stage--dark .zs-amsler-s3{stroke:#8dbbff}
.zs-amsler-mark{pointer-events:none}

.zs-tool .zs-amsler-count{margin:10px 0 0;font:500 15px/1.4 var(--f-ui);color:var(--ink);font-variant-numeric:tabular-nums}
.zs-tool .zs-amsler-info{margin:10px 0 0;font:400 14.5px/1.5 var(--f-ui);color:var(--ink-2)}
.zs-tool .zs-amsler-info.is-warn{color:var(--red)}
.zs-tool .zs-amsler-hint{margin:8px 0 12px;font:400 14px/1.5 var(--f-ui);color:var(--ink-3);max-width:62ch}
.zs-amsler-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
@media (hover:none),(pointer:coarse){.zs-amsler-keys{display:none}}
/* «Дальше» внутри доски — только на весь экран: без него пришлось бы выходить из режима ради следующего глаза */
.zs-amsler-next{display:none;margin:0;min-height:48px}

/* весь экран: доска по центру, сетка во всю ширину (у сетки свои поля, у кнопок — 16 px от краёв экрана).
   Подписи кнопок короткие, счётчик и кнопки — одна полоса: сетке остаётся не меньше места, чем в обычном режиме */
.zs-amsler-short{display:none}
.zs-tool .zs-amsler-count.is-warn{color:var(--red)}
.zs-amsler-board:fullscreen{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 0;background:var(--box);overflow:auto}
.zs-amsler-board:-webkit-full-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 0;background:var(--box);overflow:auto}
.zs-amsler-board.is-pseudo-full{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 0;background:var(--box);overflow:auto}
.zs-amsler-board:fullscreen .zs-amsler-stage{align-self:stretch;margin:0}
.zs-amsler-board:-webkit-full-screen .zs-amsler-stage{align-self:stretch;margin:0}
.zs-amsler-board.is-pseudo-full .zs-amsler-stage{align-self:stretch;margin:0}
.zs-amsler-board:fullscreen .zs-amsler-types{margin:0 16px 10px;max-width:calc(100% - 32px)}
.zs-amsler-board:-webkit-full-screen .zs-amsler-types{margin:0 16px 10px;max-width:calc(100% - 32px)}
.zs-amsler-board.is-pseudo-full .zs-amsler-types{margin:0 16px 10px;max-width:calc(100% - 32px)}
.zs-amsler-board:fullscreen .zs-amsler-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px;align-self:stretch;margin-top:10px;padding:0 16px}
.zs-amsler-board:-webkit-full-screen .zs-amsler-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px;align-self:stretch;margin-top:10px;padding:0 16px}
.zs-amsler-board.is-pseudo-full .zs-amsler-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px;align-self:stretch;margin-top:10px;padding:0 16px}
.zs-amsler-board:fullscreen .zs-amsler-count{margin:0}
.zs-amsler-board:-webkit-full-screen .zs-amsler-count{margin:0}
.zs-amsler-board.is-pseudo-full .zs-amsler-count{margin:0}
.zs-amsler-board:fullscreen .zs-amsler-row{justify-content:center;margin:0}
.zs-amsler-board:-webkit-full-screen .zs-amsler-row{justify-content:center;margin:0}
.zs-amsler-board.is-pseudo-full .zs-amsler-row{justify-content:center;margin:0}
.zs-amsler-board:fullscreen .zs-amsler-row>button{padding:8px 14px;font:600 14.5px/1.2 var(--f-ui)}
.zs-amsler-board:-webkit-full-screen .zs-amsler-row>button{padding:8px 14px;font:600 14.5px/1.2 var(--f-ui)}
.zs-amsler-board.is-pseudo-full .zs-amsler-row>button{padding:8px 14px;font:600 14.5px/1.2 var(--f-ui)}
.zs-amsler-board:fullscreen .zs-amsler-long{display:none}
.zs-amsler-board:-webkit-full-screen .zs-amsler-long{display:none}
.zs-amsler-board.is-pseudo-full .zs-amsler-long{display:none}
.zs-amsler-board:fullscreen .zs-amsler-short{display:inline}
.zs-amsler-board:-webkit-full-screen .zs-amsler-short{display:inline}
.zs-amsler-board.is-pseudo-full .zs-amsler-short{display:inline}
.zs-amsler-board:fullscreen .zs-amsler-next{display:inline-flex}
.zs-amsler-board:-webkit-full-screen .zs-amsler-next{display:inline-flex}
.zs-amsler-board.is-pseudo-full .zs-amsler-next{display:inline-flex}

/* телефон боком: экран низкий, поэтому кнопки уходят по сторонам сетки, а не над ней и под ней —
   сетке достаётся вся высота экрана (amsler.js вычитает только то, что стоит над сеткой и под ней) */
@media (orientation:landscape) and (max-height:540px){
  .zs-amsler-board{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto 1fr;column-gap:8px;align-items:start}
  .zs-amsler-board:fullscreen{display:grid;padding:0 12px;align-content:center}
  .zs-amsler-board:-webkit-full-screen{display:grid;padding:0 12px;align-content:center}
  .zs-amsler-board.is-pseudo-full{display:grid;padding:0 12px;align-content:center}
  .zs-amsler-types{grid-column:1;grid-row:1 / 3;display:flex;flex-direction:column;margin:0;width:auto}
  .zs-amsler-type{justify-content:flex-start;max-width:9em;padding:6px 8px;font-size:13.5px;line-height:1.2;white-space:normal;text-align:left}
  .zs-amsler-stage{grid-column:2;grid-row:1 / 3;min-width:0;margin:0;padding:6px 0}
  .zs-amsler-board:fullscreen .zs-amsler-stage{padding:6px 0}
  .zs-amsler-board:-webkit-full-screen .zs-amsler-stage{padding:6px 0}
  .zs-amsler-board.is-pseudo-full .zs-amsler-stage{padding:6px 0}
  .zs-amsler-bar{grid-column:3;grid-row:1 / 3;display:flex;flex-direction:column;align-items:stretch}
  .zs-amsler-board:fullscreen .zs-amsler-bar{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0}
  .zs-amsler-board:-webkit-full-screen .zs-amsler-bar{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0}
  .zs-amsler-board.is-pseudo-full .zs-amsler-bar{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0}
  .zs-amsler-board:fullscreen .zs-amsler-types{margin:0;max-width:none}
  .zs-amsler-board:-webkit-full-screen .zs-amsler-types{margin:0;max-width:none}
  .zs-amsler-board.is-pseudo-full .zs-amsler-types{margin:0;max-width:none}
  .zs-tool .zs-amsler-count{margin:0 0 8px;max-width:9.5em;font-size:13.5px}
  .zs-amsler-row{flex-direction:column;align-items:stretch;margin:0}
  .zs-amsler-row>button{max-width:10.5em;padding:6px 10px;font-size:13.5px;white-space:normal;overflow-wrap:normal;text-align:left}
}

/* телефон: сетка во всю ширину экрана, чтобы влезло больше клеток по 5 мм */
@media (max-width:640px){
  .zs-amsler-stage{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding:12px 0;box-shadow:0 1px 0 var(--rule-2),0 -1px 0 var(--rule-2)}
  .zs-amsler-types{display:flex;width:auto}
  .zs-amsler-type{flex:1 1 0;justify-content:center;padding:8px 6px;font-size:13.5px;flex-direction:column;gap:5px;text-align:center}
  .zs-amsler-board:fullscreen .zs-amsler-types{align-self:stretch}
  .zs-amsler-board:-webkit-full-screen .zs-amsler-types{align-self:stretch}
  .zs-amsler-board.is-pseudo-full .zs-amsler-types{align-self:stretch}
}

/* ---------- печать: подсказка на подготовке ---------- */
.zs-amsler-printbox{margin-top:24px;padding-top:16px;border-top:1px dashed var(--rule-2)}
.zs-tool .zs-amsler-printbox p{margin:0 0 10px}

/* ---------- итог ---------- */
.zs-tool .zs-amsler-alarm{margin:0 0 12px;padding:12px 14px;border-top:3px solid var(--red);background:rgba(181,53,42,.07)}
.zs-tool .zs-amsler-prev{font-size:15px;color:var(--ink-2)}
.zs-amsler-thumbs{display:flex;flex-wrap:wrap;gap:16px 28px;margin:16px 0 4px}
.zs-amsler-thumb{margin:0;width:min(200px,calc(50% - 14px))}
.zs-amsler-thumb figcaption{margin-top:6px;font:500 14px/1.35 var(--f-ui);color:var(--ink-2)}
.zs-amsler-grid--thumb{width:100%;height:auto;cursor:default;box-shadow:0 0 0 1px var(--rule-2)}
.zs-amsler-grid--thumb .zs-amsler-lines{stroke:#7d837f}
.zs-amsler-grid--thumb .zs-amsler-mark.is-new{stroke:#000;stroke-width:.7;stroke-dasharray:1.2 .7}
.zs-amsler-printlink{margin-top:4px}
/* кнопки .btn по высоте 46 px: доводим до 48 px, чтобы попадать пальцем */
.zs-amsler-print,.zs-amsler-printlink,.zs-amsler-ics,.zs-amsler-forget{min-height:48px}

/* ---------- бланк А4: на экране не виден, печатается только по кнопке ---------- */
.zs-amsler-sheet{display:none}
@media print{
  html.zs-amsler-printing body>*:not(.zs-amsler-sheet){display:none!important}
  html.zs-amsler-printing body{margin:0;padding:0;background:#fff}
  /* в потоке, а не absolute из core.css: именованная страница zs-a4 (А4 без полей) действует только на блоки в потоке */
  html.zs-amsler-printing .zs-amsler-sheet{position:static!important;display:block;width:210mm;height:296mm;box-sizing:border-box;padding:14mm 20mm 10mm;overflow:hidden;
    background:#fff;color:#000;font:400 10.5pt/1.4 var(--f-ui);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .zs-amsler-sheet__head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:2mm;margin-bottom:4mm;border-bottom:.4mm solid #000}
  .zs-amsler-sheet__head strong{font-size:20pt;line-height:1.1}
  .zs-amsler-sheet__head span{font-size:10pt}
  .zs-amsler-sheet__how{margin:0 0 6mm;padding-left:5mm}
  .zs-amsler-sheet__fig{display:flex;justify-content:center}
  .zs-amsler-sheet__grid{display:block;width:100mm;height:100mm;max-width:none;overflow:visible}
  /* viewBox бланка в миллиметрах: .3 — это 0,3 мм. vector-effect из атрибута сетки на экране здесь отменяется:
     с non-scaling-stroke Chrome пишет в PDF волосяную линию (толщина 0), а принтер печатает её в одну точку */
  .zs-amsler-sheet__grid .zs-amsler-lines{stroke:#000;stroke-width:.3;vector-effect:none;shape-rendering:auto}
  .zs-amsler-sheet__ctl{width:100mm;margin:6mm auto 0}
  .zs-amsler-sheet__bar{display:block;width:100mm;height:9mm;overflow:visible}
  .zs-amsler-sheet__barbg{fill:#fff}
  .zs-amsler-sheet__ticks{fill:none;stroke:#000;stroke-width:.25}
  .zs-amsler-sheet__num{font:400 3.2px var(--f-ui);fill:#000}
  .zs-amsler-sheet__ctl p{margin:1.5mm 0 0;font-size:9pt}
  .zs-amsler-sheet__log{width:100%;margin-top:7mm;border-collapse:collapse;font-size:10pt}
  .zs-amsler-sheet__log th,.zs-amsler-sheet__log td{height:8mm;padding:0 3mm;border:.3mm solid #000;text-align:left;font-weight:400}
  .zs-amsler-sheet__log th{height:7mm;font-weight:600}
  .zs-amsler-sheet__foot{margin:5mm 0 0;font-size:9.5pt}
}