/* Таблица Сивцева на экране и для печати: стили теста. Только классы .zs-chart-… (общее — core.css).
   Метафора: щит с таблицей в кабинете — белое поле, подписи D слева и V справа моноширинным, красная указка под знаком.
   Печать листа: html.zs-chart-printing + div.zs-chart-print в body, свои @page (А4 и А3), всё остальное скрыто. */

/* ---------- шапка шага: расстояние, размер знака, переключатели ---------- */
.zs-chart-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 20px;margin:0 0 12px}
.zs-panel .zs-chart-meta{margin:0;max-width:var(--measure);font:400 15px/1.5 var(--f-ui);color:var(--ink-2)}
.zs-chart-meta strong{color:var(--ink);font-weight:700}
.zs-chart-links{display:flex;flex-wrap:wrap;gap:0 18px}
.zs-chart-link{min-height:48px;padding:6px 0;background:none;border:0;color:var(--link);font:600 14.5px/1.2 var(--f-ui);cursor:pointer}
.zs-chart-link:hover{color:var(--link-hover)}
.zs-chart-opts{display:flex;flex-wrap:wrap;gap:0 28px;margin:0 0 8px}
/* виджет внутри .prose статьи: её нумерация «1.» у списков не должна ложиться на шкалу шагов (там свои номера) */
.prose .zs-chart-root .zs-steps>li{padding-left:0}
.prose .zs-chart-root .zs-steps>li::before{content:none}
.zs-chart-opt{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px}
.zs-chart-opt__l{min-width:5.5em;font:400 12.5px/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.zs-chart-opt .zs-switch{margin:0 0 10px}

/* ---------- таблица: белое поле щита ---------- */
.zs-chart-screen{--pad:clamp(10px,2vw,28px);position:relative;padding:0 var(--pad) 22px;background:#fff;color:#000;box-shadow:0 0 0 1px var(--rule-2);outline:0}
.zs-chart-rows{position:relative;margin:0 auto}
.zs-chart-row{display:flex;align-items:center}
.zs-chart-d,.zs-chart-v{flex:0 0 7.2ch;font:400 13px/1.2 var(--f-mono);color:#555;white-space:nowrap;font-variant-numeric:tabular-nums}
.zs-chart-v{text-align:right}
.zs-chart-d i,.zs-chart-v i{font-style:normal}
.zs-chart-signs{flex:1 1 auto;min-width:0;display:flex;justify-content:center}
.zs-chart-svgw{position:relative;display:block;line-height:0}
.zs-chart-svg{display:block;fill:#000;cursor:pointer}   /* перенесённая строка: по svg на линию, отступ сверху задаёт JS */
.zs-chart-ptr{position:absolute;display:block;background:var(--red);border-radius:1px;pointer-events:none}
.zs-chart-ptr b{position:absolute;left:50%;top:100%;width:0;height:0;border-style:solid;border-color:transparent transparent var(--red)}
/* рамка «знак + указка» для прокрутки в видимую часть; невидима */
.zs-chart-ptrbox{position:absolute;display:block;visibility:hidden;pointer-events:none}
/* строка-образец для замера ширины под знаки */
.zs-chart-probe{height:0;overflow:hidden;visibility:hidden;flex:0 0 auto}
/* перенесённая строка: тонкая скобка слева собирает её линии в одну строку таблицы */
.zs-chart-row.is-wrap .zs-chart-svgw::before{content:"";position:absolute;left:-14px;top:0;bottom:0;border-left:2px solid #d4d4d4}
.zs-chart-headrow{display:none}
/* узкий экран: подписи без «D=» и «V=», над столбцами — шапка «D, м» и «V» */
.zs-chart-screen--narrow .zs-chart-d,.zs-chart-screen--narrow .zs-chart-v{flex-basis:4.6ch;font-size:12px}
.zs-chart-screen--narrow .zs-chart-d i,.zs-chart-screen--narrow .zs-chart-v i{display:none}
.zs-chart-screen--narrow .zs-chart-headrow{display:flex;margin-bottom:12px}
/* по строке: одна строка посреди поля */
.zs-chart-screen.is-row .zs-chart-rows{display:flex;flex-direction:column;justify-content:center;min-height:clamp(220px,44vh,560px)}
.zs-chart-screen.is-row .zs-chart-headrow{position:absolute;top:0;left:0;right:0}

.zs-chart-miss{padding:16px 0 0;font:400 14px/1.5 var(--f-ui);color:var(--ink-2)}
.zs-chart-miss:empty{display:none}
.zs-panel .zs-chart-miss p{max-width:var(--measure);margin:0 0 8px}
.zs-panel .zs-chart-miss .zs-chart-warn{padding-left:12px;border-left:3px solid var(--red);color:var(--ink)}

/* кнопки вверху поля: видны и во весь экран, знаков не закрывают */
.zs-chart-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 calc(-1 * var(--pad)) 26px;padding:10px var(--pad);border-bottom:1px solid var(--rule)}
.zs-chart-status{flex:1 1 6em;min-width:0;font:400 13px/1.3 var(--f-mono);color:#555;text-align:center}
.zs-chart-bar .zs-fs{min-height:48px}
/* в колонке статьи крупные строки переносятся: кнопка «на весь экран» над таблицей */
.zs-chart-fsnote{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:-26px calc(-1 * var(--pad)) 24px;padding:10px var(--pad);background:var(--mint);border-bottom:1px solid var(--mint-rule);font:400 15px/1.45 var(--f-ui);color:#1c1c1c}
.zs-chart-fsnote[hidden]{display:none}
.zs-chart-fsnote__t{flex:1 1 22em;max-width:var(--measure)}
.zs-chart-fsnote .zs-chart-fsgo{min-height:48px;background:#fff}

.zs-chart-screen:fullscreen{display:flex;flex-direction:column;overflow:auto;box-shadow:none}
.zs-chart-screen:-webkit-full-screen{display:flex;flex-direction:column;overflow:auto;box-shadow:none}
.zs-chart-screen.is-pseudo-full{display:flex;flex-direction:column;box-shadow:none}
/* во весь экран кнопки всегда под рукой: панель прилипает к верху поля (прокрутка к указке учитывает её высоту, scroll-padding из JS) */
.zs-chart-screen:fullscreen .zs-chart-bar{position:sticky;top:0;z-index:2;background:#fff}
.zs-chart-screen:-webkit-full-screen .zs-chart-bar{position:sticky;top:0;z-index:2;background:#fff}
.zs-chart-screen.is-pseudo-full .zs-chart-bar{position:sticky;top:0;z-index:2;background:#fff}
.zs-chart-screen:fullscreen .zs-chart-rows{width:100%;margin:auto 0}
.zs-chart-screen:-webkit-full-screen .zs-chart-rows{width:100%;margin:auto 0}
.zs-chart-screen.is-pseudo-full .zs-chart-rows{width:100%;margin:auto 0}
.zs-chart-screen:fullscreen.is-row .zs-chart-rows{flex:1 0 auto}
.zs-chart-screen.is-pseudo-full.is-row .zs-chart-rows{flex:1 0 auto}
.zs-panel .zs-chart-hint{margin-top:12px}
.zs-panel .zs-chart-gowarn{max-width:var(--measure);margin:12px 0 0;padding-left:12px;border-left:3px solid var(--red);font:400 14px/1.5 var(--f-ui);color:var(--ink)}
.zs-chart-gowarn:empty{display:none}

/* ---------- итог: строка для каждого глаза ---------- */
.zs-chart-fields{display:flex;flex-wrap:wrap;gap:12px 24px;margin:4px 0 16px}
.zs-chart-field{display:flex;flex-direction:column;gap:6px;font:600 15px/1.3 var(--f-ui)}
.zs-chart-sel{min-width:220px;min-height:48px;padding:8px 12px;border:1.5px solid var(--ink);border-radius:0;background:#fff;color:var(--ink);font:600 17px/1.2 var(--f-mono)}
.zs-chart-sel:focus{outline:2px solid var(--link);outline-offset:2px}
.zs-panel .zs-chart-err{margin:6px 0 0;color:var(--red);font:600 15px/1.4 var(--f-ui)}
.zs-chart-err:empty{display:none}

/* ---------- лист для печати: настройки слева, превью листа справа ---------- */
.zs-chart-print-box{margin-top:24px}
.zs-chart-pgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
@media (min-width:760px){.zs-chart-pgrid{grid-template-columns:minmax(0,1fr) minmax(200px,290px);align-items:start;column-gap:clamp(22px,3vw,40px)}}
.zs-panel .zs-chart-pinfo{font:400 15px/1.5 var(--f-ui);color:var(--ink-2)}
.zs-panel .zs-chart-pwarn{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)}
.zs-chart-prev{display:flex;justify-content:center;align-items:flex-start;gap:14px}
.zs-chart-sheet{flex:0 1 290px;min-width:0;margin:0}
.zs-chart-prev--2 .zs-chart-sheet{flex-basis:50%}
.zs-chart-sheet__in{padding:7.857% 7.143%;background:#fff;box-shadow:0 0 0 1px var(--rule),0 16px 26px -18px rgba(20,30,25,.55)}
.zs-chart-sheet--a3 .zs-chart-sheet__in{padding:5.219% 5.051%}
.zs-chart-sheet svg{display:block;width:100%;height:auto}
.zs-chart-print-box .zs-calib__hint{margin-top:12px}
.zs-chart-sheet figcaption{margin-top:8px;font:400 12px/1.3 var(--f-mono);color:var(--ink-3);text-align:center;text-transform:uppercase;letter-spacing:.06em}

@media (max-width:640px){
  .zs-chart-screen{--pad:8px}
  .zs-chart-bar{gap:6px;margin-bottom:18px}
  .zs-chart-fsnote{margin-top:-18px;font-size:14px}
  .zs-chart-bar .zs-fs{padding:8px 9px;font-size:13px}
  .zs-chart-arrow{min-width:48px}
  .zs-chart-status{order:9;flex-basis:100%;text-align:left}
  .zs-chart-status:empty{display:none}
  .zs-chart-opts{gap:0 18px}
  .zs-chart-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  .zs-chart-sel{min-width:0;width:100%}
}

/* ---------- печать ---------- */
.zs-chart-print{display:none}
@page zs-chart-a4{size:A4 portrait;margin:16.5mm 15mm}
@page zs-chart-a3{size:A3 portrait;margin:15.5mm 15mm}
@media print{
  html.zs-chart-printing body>*:not(.zs-chart-print){display:none!important}
  html.zs-chart-printing,html.zs-chart-printing body{width:auto!important;min-width:0!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;overflow:visible!important;background:#fff!important}
  html.zs-chart-printing .zs-chart-print{display:block!important}
  .zs-chart-page{break-after:page;page-break-after:always;break-inside:avoid;page-break-inside:avoid}
  .zs-chart-page:last-child{break-after:auto;page-break-after:auto}
  .zs-chart-page--a4{page:zs-chart-a4}
  .zs-chart-page--a3{page:zs-chart-a3}
  .zs-chart-page svg{display:block}
  /* обычная печать статьи: без кнопок и превью листа */
  .zs-chart-bar,.zs-chart-fsnote,.zs-chart-opts,.zs-chart-links,.zs-chart-print-box{display:none}
}