/* =========================================================================
   Шаблоны и развёртки (assets/js/tpl.js): панель с размерами слева, лист
   справа. Подключается только страницами этих инструментов — партиалом
   inc/calc/*.php, поэтому main.css не растёт.

   Цвета панели берутся из переменных портала и работают в обеих темах.
   Лист всегда белый: это бумага, а не часть интерфейса.
   ========================================================================= */

/* Статья узкая, поэтому поля стоят над листом, а не сбоку: листу нужна
   вся ширина колонки. Группы полей сами встают в два-три столбца. */
.rig{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);margin:1.4em 0}

.panel{border-radius:14px;padding:16px;background:var(--bg-2);border:1px solid var(--line);
  display:grid;gap:16px 22px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));align-items:start}
.panel__g{margin:0;min-width:0}
.panel__h{display:block;margin:0 0 8px;font:700 .68rem/1.2 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3)}
.panel__h--in{margin-top:6px}

/* фишки-переключатели */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:8px 11px;border-radius:8px;font-size:.86rem;font-weight:600;
  color:var(--fg-2);background:var(--bg-3);border:1px solid transparent;
  transition:background .15s,color .15s,border-color .15s}
.chips label:hover{color:var(--fg)}
.chips input:checked + label{background:rgba(255,152,0,.14);color:var(--accent-ink);
  border-color:rgba(255,152,0,.55)}
.chips input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}
.chips label small{font:600 .7rem/1 var(--mono);color:var(--fg-3)}

/* числовые поля и ползунки */
.numf{margin:0 0 12px}
.numf:last-child{margin-bottom:0}
.numf label{display:block;margin:0 0 5px;font-size:.84rem;color:var(--fg-2)}
.numf__i{position:relative;display:block}
.numf__i input{width:100%;padding:9px 12px;padding-inline-end:42px;border-radius:8px;
  background:var(--bg-3);border:1px solid var(--line);color:var(--fg);
  font:700 1rem/1.2 var(--mono);appearance:textfield}
.numf__i input:focus{outline:2px solid var(--accent);outline-offset:1px}
.numf__i i{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);
  font:600 .78rem/1 var(--mono);font-style:normal;color:var(--fg-3);pointer-events:none}
.numf__n{display:block;margin-top:4px;font-size:.76rem;color:var(--fg-3);line-height:1.4}

.sld{margin:0 0 14px}
.sld:last-child{margin-bottom:0}
.sld__t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-bottom:6px;font-size:.84rem;color:var(--fg-2)}
.sld__v{font:700 .95rem/1 var(--mono);color:var(--fg)}
.sld input[type=range]{width:100%;accent-color:var(--accent)}

.panel__acts{display:flex;flex-wrap:wrap;gap:8px;grid-column:1/-1}
.panel__acts .btn{flex:0 1 auto}

/* --- лист --- */
.scope{border-radius:14px;overflow:hidden;background:#2a2f34;border:1px solid var(--line);min-width:0}
.tpl{padding:16px;display:flex;flex-direction:column;align-items:center;gap:14px}
.tpl:empty{display:none}
.tpl__warn{margin:0;padding:14px 16px;border-radius:10px;width:100%;
  background:rgba(239,83,80,.14);border:1px solid rgba(239,83,80,.5);color:#fff}
.tpl-svg{max-width:100%;height:auto;display:block;border-radius:2px;
  box-shadow:0 8px 24px rgba(0,0,0,.55)}
/* листы 1:1 у развёртки — только на бумагу: на экране их заменяет чертёж */
.tpl--pages{display:none}
.tpl__note{margin:0;padding:10px 16px;font-size:.84rem;line-height:1.45;color:#d5dade;
  border-top:1px solid rgba(255,255,255,.12)}
.tpl__note:empty{display:none}

.hud{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:1px;background:var(--line);border-top:1px solid var(--line)}
.hud:empty{display:none}
.hud__i{background:var(--bg-2);padding:10px 12px;min-width:0}
.hud__k{display:block;font:600 .64rem/1.25 var(--mono);letter-spacing:.08em;
  color:var(--fg-3);margin-bottom:4px}
.hud__v{font:700 1.02rem/1.1 var(--mono);color:var(--fg);white-space:nowrap}
[dir=rtl] .hud__v,[dir=rtl] .numf__i input,[dir=rtl] .sld__v{direction:ltr;text-align:end;unicode-bidi:isolate}
.hud__v small{font-size:.68em;color:var(--fg-3);font-weight:600}
.hud__i--main .hud__v{color:var(--accent-ink);font-size:1.2rem}

/* линии шаблона: единица — миллиметр */
.t-paper{fill:#fff}
.t-line{stroke:#000;stroke-width:.7;fill:none}
.t-cut{stroke:#c62828;stroke-width:.5;fill:none;stroke-linejoin:round}
.t-cut--k{stroke:#000;stroke-width:.45}
.t-hatch{stroke:#c4c4c4;stroke-width:.35}
.t-fill{stroke:none}
.t-tick{stroke:#555;stroke-width:.25}
.t-tick--b{stroke:#000;stroke-width:.45}
.t-edge{stroke:#9a9a9a;stroke-width:.3;stroke-dasharray:2 1.6;fill:none}
.t-end{stroke:#bdbdbd;stroke-width:.3;fill:none}
.t-axis{stroke:#1565c0;stroke-width:.4;stroke-dasharray:6 2 1 2;fill:none}
.t-mark{fill:#000}
.t-ruler path{stroke:#000;stroke-width:.4;fill:none}
/* текст на листе всегда слева направо: порядок фразы держит изолят из скрипта */
.tpl-svg text,.cn-svg text{direction:ltr}
.t-txt{fill:#333;font:3.2px var(--font)}
.t-txt--h{font-weight:700;letter-spacing:.25px}
.t-txt--s{font-size:2.6px;fill:#555}
.t-txt--w{font-size:5px;font-weight:700;fill:#b9b9b9;letter-spacing:1.4px}

/* обзорный чертёж развёртки: масштаб любой, линии не толстеют */
.cn-draw{padding:16px}
.cn-svg{display:block;width:100%;height:auto;max-height:70vh;background:#fff;border-radius:2px}
.cn-svg path,.cn-svg rect,.cn-svg circle{vector-effect:non-scaling-stroke}
.c-blank{fill:#f3f5f6;stroke:#9aa3ab;stroke-width:1;stroke-dasharray:6 4}
.c-part{fill:#ffe0b2;stroke:#000;stroke-width:1.6;stroke-linejoin:round}
.c-aux{fill:none;stroke:#607d8b;stroke-width:1;stroke-dasharray:3 3}
.c-axis{fill:none;stroke:#1565c0;stroke-width:1;stroke-dasharray:10 3 2 3}
.c-dot{fill:#000}
.c-txt{fill:#111;font-family:var(--font);font-weight:700;
  paint-order:stroke;stroke:#fff;stroke-width:.25em;stroke-linejoin:round}

/* Печать: на бумагу уходит только лист, и уходит в натуральную величину —
   размеры заданы в миллиметрах прямо в разметке, экранное сжатие снимается.
   Класс tpl-print ставит скрипт на время печати: лист получает tpl-sheet,
   его предки — tpl-keep, всё остальное гаснет. */
@media print{
  html.tpl-print body *:not(.tpl-keep):not(.tpl-sheet):not(.tpl-sheet *){display:none!important}
  html.tpl-print .tpl-keep,
  html.tpl-print .tpl-sheet{display:block!important;margin:0!important;padding:0!important;
    border:0!important;background:none!important;box-shadow:none!important;
    max-width:none!important;width:auto!important;overflow:visible!important;position:static!important}
  html.tpl-print .tpl-sheet .hud,
  html.tpl-print .tpl-sheet .tpl__warn,
  html.tpl-print .tpl-sheet .tpl__note{display:none!important}
  html.tpl-print .tpl,
  html.tpl-print .tpl--pages{display:block!important;padding:0}
  html.tpl-print .cn-draw{padding:0;break-after:page;page-break-after:always}
  html.tpl-print .cn-svg{max-height:240mm}
  html.tpl-print .tpl-svg{max-width:none!important;height:auto;box-shadow:none;border-radius:0;
    margin:0 0 6mm;break-inside:avoid;page-break-inside:avoid}
  /* плитка развёртки — ровно лист: 180 × 255 мм встаёт и на A4, и на Letter */
  html.tpl-print .tpl--pages .tpl-svg{margin:0;break-after:page;page-break-after:always}
  html.tpl-print .tpl--pages .tpl-svg:last-child{break-after:auto;page-break-after:auto}
  html.tpl-print body{background:#fff!important}
  @page{margin:8mm}
}