/* Обвязка конструктора. На печать не идёт ничего из этого файла —
   всё помечено .no-print, а сам лист рисуется общим ../sheet.css.

   Правило панели: на виду ровно то, чем пользуются каждый раз — какой
   лист, добавить блок, напечатать. Всё остальное живёт под «More…».
   Одиннадцать одинаковых кнопок в ряд человек не читает: он их
   пролистывает глазами и не находит ничего. */

*{box-sizing:border-box;margin:0;padding:0}
body{background:#E4DFD3;color:var(--ink);font:400 16px/1.55 var(--f-t);
     padding:22px 16px 60px;-webkit-font-smoothing:antialiased}
@media print{ body{background:#fff;padding:0}
  .b.sel,.b:focus{outline:0 !important} }

.wrap{max-width:215.9mm;margin:0 auto}

/* ── заголовок ──────────────────────────────────────────────────────── */
.head{margin-bottom:16px}
.head h1{font:400 clamp(28px,4.4vw,38px)/1 var(--f-d);text-transform:uppercase;
         letter-spacing:.01em}
.head .lead{margin-top:8px;max-width:58ch;font-size:.95rem;color:#55605F}

/* ── помещается ли на страницу ──────────────────────────────────────
   Ни одного миллиметра в тексте: «186 mm left» не говорит человеку
   ничего. Говорит полоса и одна фраза. */
.fit{display:flex;align-items:center;gap:12px;
     border:2px solid var(--ink);border-radius:8px;padding:11px 14px;background:#FBF9F4;
     box-shadow:3px 3px 0 var(--ink)}
.fit .dot{width:12px;height:12px;border-radius:50%;background:#2FBF6B;flex:none}
.fit-txt{display:grid;gap:2px;min-width:0}
.fit .txt{font:400 17px/1 var(--f-d);text-transform:uppercase;letter-spacing:.02em}
.fit .sub{font-style:normal;font-size:.82rem;color:#66706F}
.fit .gauge{flex:1;height:8px;border-radius:5px;background:#DCD7CB;overflow:hidden;
            min-width:70px;margin-left:auto}
.fit .gauge i{display:block;height:100%;width:0;background:var(--teal);
              transition:width .2s ease}
.fit.over{background:#FDEEEA;border-color:var(--coral)}
.fit.over .dot,.fit.over .gauge i{background:var(--coral)}
.fit.over .txt{color:#AD3C2C}

/* ── панель ─────────────────────────────────────────────────────────── */
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}

select,input[type=text],input[type=number]{font:400 15px/1.2 var(--f-t);
  padding:11px 12px;border:2px solid var(--ink);border-radius:6px;background:#FBF9F4;
  color:var(--ink);max-width:100%}
select.pick{min-width:260px;box-shadow:3px 3px 0 var(--ink);cursor:pointer}
select:focus-visible,input:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

.btn{appearance:none;border:2px solid var(--ink);background:var(--paper);color:var(--ink);
     font:400 15px/1 var(--f-d);text-transform:uppercase;letter-spacing:.03em;
     padding:12px 16px 10px;border-radius:6px;cursor:pointer;text-decoration:none;
     box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s;
     white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.btn:hover{transform:translate(1.5px,1.5px);box-shadow:1.5px 1.5px 0 var(--ink)}
.btn:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.btn.go{background:var(--ink);color:var(--paper)}          /* одно главное действие */
.btn.quiet{margin-left:auto;border-color:#B6B0A3;box-shadow:none;color:#55605F;
           font-size:13px;padding:10px 13px 8px}
.btn.quiet:hover{transform:none;border-color:var(--ink);color:var(--ink)}

.tip{margin-top:11px;font-size:.87rem;color:#66706F;max-width:74ch}
.tip b{color:var(--ink)}

/* ── управление блоком прямо на листе ───────────────────────────────
   Пять кнопок вместо девяти. Ширина и число строк переехали в окно
   правки, где у них есть подписи словами, а не значки ⌃ и ⌄. */
.b>.ctl{position:absolute;top:-1px;right:-1px;display:flex;z-index:3;background:#fff;
  border:1px solid var(--ink);border-radius:0 1.5px 0 4px;
  opacity:0;pointer-events:none;transition:opacity .12s}
.b:hover>.ctl,.b:focus-within>.ctl,.b.sel>.ctl{opacity:1;pointer-events:auto}
.b>.ctl button{appearance:none;cursor:pointer;border:0;border-left:1px solid #D8D4CA;
  background:#fff;color:var(--ink);font:400 13px/1 var(--f-t);width:26px;height:23px;padding:0}
.b>.ctl button:first-child{border-left:0}
.b>.ctl button:hover{background:#F4C430}
.b>.ctl button[data-a=rm]:hover{background:var(--coral);color:#fff}
.b>.ctl button:disabled{opacity:.25;cursor:default;background:#fff}
.b:focus{outline:2px solid var(--teal);outline-offset:1px}
.b.sel{outline:2px solid var(--teal);outline-offset:1px}

.b>.ctl button.grip{cursor:grab;touch-action:none;letter-spacing:-.5px}
.b>.ctl button.grip:hover{background:var(--teal);color:#fff}
.b.ghost{opacity:.22}
.b.ghost>.ctl,.b.ghost>.rz{display:none}
.b:hover{cursor:grab}
body.dragging{user-select:none;-webkit-user-select:none;cursor:grabbing}
.flyer{position:fixed;left:0;top:0;z-index:80;pointer-events:none;background:#fff;
  transform-origin:top left;box-shadow:0 14px 34px rgba(0,0,0,.3);opacity:.96;
  border:1.1px solid var(--ink);border-radius:1.5px}
.flyer>.ctl,.flyer>.rz{display:none}
.sheet img{-webkit-user-drag:none;user-drag:none}

.b>.rz{position:absolute;right:-1px;bottom:-1px;width:16px;height:16px;z-index:3;
  background:#fff;border:1px solid var(--ink);border-radius:4px 0 1.5px 0;
  cursor:nwse-resize;touch-action:none;opacity:0;pointer-events:none;transition:opacity .12s}
.b>.rz::after{content:"";position:absolute;right:2px;bottom:2px;
  border-left:9px solid transparent;border-bottom:9px solid var(--ink)}
.b:hover>.rz,.b:focus-within>.rz,.b.sel>.rz{opacity:1;pointer-events:auto}
.b>.rz:hover{background:var(--teal)}

.szbadge{position:fixed;z-index:99;background:var(--ink);color:var(--paper);
  font:500 12px/1 var(--f-m);padding:7px 9px;border-radius:4px;pointer-events:none;
  box-shadow:0 4px 12px rgba(0,0,0,.25)}

/* граница первой страницы */
.pagebreak{position:absolute;left:0;right:0;border-top:2px dashed var(--coral);
  pointer-events:none;z-index:2}
.pagebreak span{position:absolute;right:0;top:2px;font:500 8px/1 var(--f-m);
  letter-spacing:.1em;text-transform:uppercase;color:var(--coral);background:#fff;padding:1px 3px}
.sheet{position:relative}

/* ── окна ───────────────────────────────────────────────────────────── */
dialog{border:2px solid var(--ink);border-radius:10px;padding:0;max-width:440px;width:92vw;
  background:var(--paper);color:var(--ink);box-shadow:0 20px 56px rgba(0,0,0,.32)}
dialog.wide{max-width:640px}
dialog::backdrop{background:rgba(26,29,31,.5)}
dialog form{padding:20px;display:grid;gap:13px;max-height:86vh;overflow:auto}
dialog h3{font:400 21px/1 var(--f-d);text-transform:uppercase;letter-spacing:.02em}
dialog label{display:grid;gap:6px;font-size:.85rem;color:#4A5254}
dialog label.check{grid-template-columns:auto 1fr;align-items:start;gap:9px;
  font-size:.88rem;color:var(--ink);cursor:pointer}
dialog label.check input{width:19px;height:19px;margin-top:1px;accent-color:var(--teal)}
dialog input[type=text],dialog input[type=number],dialog select{width:100%}
dialog .hint{font-size:.8rem;color:#6E6A60;line-height:1.45}
dialog .btns{display:flex;gap:9px;justify-content:flex-end;margin-top:4px}
dialog .rowbtns{display:flex;gap:9px;flex-wrap:wrap}
dialog .rowbtns .btn{font-size:13px;padding:10px 12px 8px}

/* меню действий словами, а не значками */
.menu{display:grid;gap:8px}
.menu button{appearance:none;cursor:pointer;text-align:left;display:grid;gap:2px;
  border:2px solid #C3BEB2;border-radius:7px;background:#FBF9F4;padding:11px 13px;
  color:var(--ink);font:inherit}
.menu button:hover{border-color:var(--ink);background:#fff}
.menu button:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.menu b{font:600 16px/1.2 var(--f-t)}
.menu em{font-style:normal;font-size:.82rem;color:#66706F}
.menu button.danger b{color:#AD3C2C}

.addbody{display:grid;gap:14px}
.addgrp b{display:block;font:500 11px/1 var(--f-m);letter-spacing:.13em;
  text-transform:uppercase;color:#AD3C2C;margin-bottom:7px}
.addgrp div{display:flex;flex-wrap:wrap;gap:7px}
.addgrp button{appearance:none;cursor:pointer;border:2px solid #C3BEB2;border-radius:6px;
  background:#FBF9F4;color:var(--ink);font:400 14px/1.2 var(--f-t);padding:10px 12px}
.addgrp button:hover{border-color:var(--ink);background:#fff}
.addgrp button:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

#mineList{list-style:none;display:grid;gap:8px;max-height:44vh;overflow:auto}
#mineList li{display:flex;align-items:center;gap:8px;border:2px solid #C3BEB2;
  border-radius:7px;padding:9px 11px;background:#FBF9F4}
#mineList li span{flex:1;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mineList .btn{padding:8px 10px 7px;font-size:12px;box-shadow:2px 2px 0 var(--ink)}
#mineList li.empty{justify-content:center;color:#6E6A60;font-size:.85rem;border-style:dashed}

.foot-note{max-width:215.9mm;margin:20px auto 0;font-size:.85rem;color:#55605F}
.foot-note a{color:var(--teal)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:560px){
  select.pick{flex:1 1 100%;min-width:0}
  .btn.quiet{margin-left:0}
}