/* [блок] - рабочее пространство. Дизайн-система общая с [блок].офис:
   монохром, скобки как единственный графический мотив, liquid glass.

   Файл отдаётся ДО входа в систему, вместе со страницей входа. Поэтому
   комментарии здесь не должны упоминать ни устройство хранилищ, ни их
   количество, ни названия. */
:root{
  --sans:-apple-system,"Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --ink:#0b0b0d; --ink2:#47474e; --mut:#7c7c84; --ghost:#ababb2;
  --bd:rgba(11,11,13,.09); --bd2:rgba(11,11,13,.16);
  --bg2:#f1f1f4;
  --glass:rgba(255,255,255,.55); --glass2:rgba(255,255,255,.78);
  --blur:saturate(160%) blur(20px);
  --shadow-panel:0 1px 1px rgba(11,11,13,.03), 0 18px 44px -18px rgba(11,11,13,.22);
  --shadow-float:0 2px 6px rgba(11,11,13,.05), 0 22px 48px -16px rgba(11,11,13,.28);
  /* Кольцо фокуса. Было rgba(...,.14) - контраст 1.36:1, то есть кольца
     фактически не было: человек, идущий по странице с клавиатуры, не
     видел, где он стоит. Теперь тёмное и толще. */
  --ring:0 0 0 2px #fcfcfe, 0 0 0 4px rgba(11,11,13,.85);
  --r-ctl:10px; --r-card:16px;
  --ok-bg:#e2f2e6; --ok-tx:#1d6f42;
  --warn-bg:#f9efd6; --warn-tx:#8a5a0b;
  --bad-bg:#fbe7e5; --bad-tx:#a3352d;
  --info-bg:#e9edfb; --info-tx:#3b3f9e;
}
*{box-sizing:border-box}
/* Отступ страницы обнуляем явно. Правила body в файле не было вовсе, и
   восьмипиксельный отступ браузера давал 34 пикселя лишней прокрутки под
   полотном - а колесо над полотном перехвачено, то есть докрутить нечем. */
body{margin:0}
/* Атрибут hidden обязан прятать ВСЕГДА. Браузер объявляет [hidden]{display:none}
   в своей таблице, и любое наше правило с классом её перебивает: .srow задаёт
   display:flex, и строка карточки, помеченная hidden, продолжала показываться.
   Ловится это только глазами, потому что в разметке всё правильно. */
[hidden]{display:none !important}
.pg{font-family:var(--sans);color:var(--ink);background:#e9e9ec;min-height:100vh;
  -webkit-font-smoothing:antialiased;position:relative;padding-bottom:40px}
.pg::before{content:"";position:fixed;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 34% at 16% 12%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
    radial-gradient(50% 44% at 86% 8%, rgba(199,199,207,.55), rgba(199,199,207,0) 72%),
    radial-gradient(46% 40% at 78% 88%, rgba(214,212,206,.6), rgba(214,212,206,0) 70%),
    radial-gradient(38% 34% at 8% 78%, rgba(186,186,196,.42), rgba(186,186,196,0) 70%);}
.pg > *{position:relative;z-index:1}
.pg ::selection{background:rgba(11,11,13,.85);color:#fff}

/* ---------- логотип ---------- */
.glogo{display:inline-flex;align-items:baseline;color:var(--ink);text-decoration:none;
  font-weight:600;letter-spacing:-.02em;line-height:1;white-space:nowrap;font-size:17px}
.gl-br{display:inline-block;font-weight:300}
.gl-dot{display:inline-block;width:.1em;height:.1em;background:currentColor;border-radius:.5px;margin:0 .05em .04em}
.gl-suffix{display:inline-block;font-weight:300;color:var(--ink);margin-left:.02em}

/* ---------- топбар ---------- */
header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  margin:14px 16px 0;padding:11px 18px;
  background:linear-gradient(160deg,var(--glass2),var(--glass));
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:var(--shadow-panel), inset 0 1px 0 rgba(255,255,255,.9);
  border-radius:var(--r-card);position:relative;z-index:30}
/* Без переноса ссылки шапки («процедуры», «к разделам») на телефоне рисуются
   ЗА белой карточкой, прямо на фоне, и последняя уходит за край экрана: со
   страницы становится некуда уйти. */
.who{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;
  gap:14px;font-size:13px;color:var(--ink2)}
.rolebadge{display:inline-block;padding:3px 10px;border-radius:999px;
  background:rgba(11,11,13,.85);color:#fff;font-family:var(--mono);font-size:11px}
.linkbtn{font:inherit;font-family:var(--mono);font-size:12px;color:var(--mut);
  background:none;border:none;padding:2px;cursor:pointer}
.linkbtn:hover{color:var(--ink)}
.linkbtn::before{content:"[ ";opacity:0;transition:opacity .18s}
.linkbtn::after{content:" ]";opacity:0;transition:opacity .18s}
.linkbtn:hover::before,.linkbtn:hover::after{opacity:1}

/* ---------- вкладки разделов ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.levbar{display:flex;gap:8px;margin:16px 0 0;flex-wrap:wrap}
.lev{display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;
  border:1px solid transparent;background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  font:inherit;font-size:13px;color:var(--ink2);cursor:pointer;white-space:nowrap;
  transition:background .16s,color .16s,box-shadow .16s}
.lev:hover{background:rgba(255,255,255,.82)}
.lev.act{background:var(--ink);color:#fff;box-shadow:0 8px 20px -10px rgba(11,11,13,.6)}
.lev .num{font-family:var(--mono);font-size:11px;opacity:.7}
.lev .lk{font-size:11px;font-family:var(--mono)}
.lev.open .lk{color:var(--ok-tx)}
.lev.act.open .lk{color:#8fe3a3}

/* ---------- панель ---------- */
.panel{margin-top:14px;padding:20px 22px;border-radius:var(--r-card);
  background:linear-gradient(170deg,rgba(255,255,255,.92),rgba(250,250,253,.84));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--shadow-panel), inset 0 1px 0 rgba(255,255,255,.95)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mut);margin:0 0 4px}
.ptitle{font-size:21px;font-weight:600;letter-spacing:-.02em;margin:0 0 4px}
.psub{font-size:13.5px;color:var(--ink2);margin:0;line-height:1.55}
.phead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- замок ---------- */
.lockbox{max-width:400px;margin:26px auto 18px;text-align:center}
.lockmark{font-family:var(--mono);font-size:30px;letter-spacing:.12em;color:var(--ghost);margin:0 0 12px}
.lockt{font-size:17px;font-weight:600;margin:0 0 6px}
.locks{font-size:13.5px;color:var(--ink2);margin:0 0 18px;line-height:1.55}
.factors{display:flex;flex-direction:column;gap:9px;margin:0 0 16px;text-align:left}
.fct{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--bd);
  border-radius:var(--r-ctl);background:#fff;font-size:13px}
.fct .fno{font-family:var(--mono);font-size:10.5px;color:var(--mut);
  border:1px solid var(--bd2);border-radius:5px;padding:1px 5px;flex:none}
.fct .fst{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ghost)}
.fct.done{background:var(--ok-bg);border-color:rgba(29,111,66,.2)}
.fct.done .fst{color:var(--ok-tx)}
.inp{width:100%;font:inherit;font-size:14px;padding:11px 13px;border:1px solid var(--bd2);
  border-radius:var(--r-ctl);background:#fff;color:var(--ink);outline:none;text-align:center;
  letter-spacing:.3em;font-family:var(--mono)}
.inp:focus{box-shadow:var(--ring)}
.inp.err{border-color:rgba(163,53,45,.5);animation:shake .32s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.btn{font-family:inherit;background:var(--ink);color:#fff;padding:11px 22px;border:none;
  border-radius:12px;font-size:14px;font-weight:500;cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(11,11,13,.55);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.99)}
.btn.w{width:100%;margin-top:12px}
.btn.sm{padding:8px 15px;font-size:13px;border-radius:var(--r-ctl);box-shadow:none}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--bd2);box-shadow:none}
.btn.ghost:hover{background:rgba(11,11,13,.05)}
.btn.danger{background:var(--bad-tx)}
.errline{font-size:13px;color:var(--bad-tx);background:var(--bad-bg);
  border:1px solid rgba(163,53,45,.22);border-radius:var(--r-ctl);padding:8px 12px;margin:12px 0 0}
.hintline{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ghost);
  margin:16px 0 0;padding-top:13px;border-top:1px solid var(--bd)}

/* ---------- группы и записи ---------- */
.grpbar{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 0}
.grp{padding:7px 13px;border-radius:999px;border:1px solid var(--bd);background:#fff;
  font:inherit;font-size:12.5px;color:var(--ink2);cursor:pointer}
.grp:hover{background:rgba(11,11,13,.04)}
.grp.act{background:rgba(11,11,13,.85);color:#fff;border-color:transparent}
.grp .cnt{font-family:var(--mono);font-size:10.5px;opacity:.65;margin-left:5px}

.rows{margin-top:14px;border:1px solid var(--bd);border-radius:14px;overflow:hidden;background:#fff}
.rw{display:flex;align-items:center;gap:14px;padding:13px 15px;border-bottom:1px solid var(--bd)}
.rw:last-child{border-bottom:none}
.rw:hover{background:rgba(11,11,13,.018)}
.rw-main{min-width:0;flex:1}
.rw .t{font-weight:600;font-size:14px;margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rw .m{font-family:var(--mono);font-size:11px;color:var(--mut);margin:4px 0 0;
  display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.secret{font-family:var(--mono);font-size:12.5px;background:var(--bg2);border-radius:6px;
  padding:2px 8px;color:var(--ink);letter-spacing:.02em}
.secret.hid{color:var(--ghost);letter-spacing:.14em}
.rw-act{display:flex;gap:6px;flex:none}
.iact{font:inherit;font-family:var(--mono);font-size:11px;color:var(--mut);background:#fff;
  border:1px solid var(--bd);border-radius:8px;padding:5px 9px;cursor:pointer;white-space:nowrap}
.iact:hover{color:var(--ink);border-color:var(--bd2);background:rgba(11,11,13,.03)}
.iact.warn:hover{color:var(--bad-tx);border-color:rgba(163,53,45,.35);background:var(--bad-bg)}

.tag{display:inline-block;font-size:11px;font-weight:500;padding:2px 9px;border-radius:999px;white-space:nowrap}
.tag.ok{background:var(--ok-bg);color:var(--ok-tx)}
.tag.warn{background:var(--warn-bg);color:var(--warn-tx)}
.tag.bad{background:var(--bad-bg);color:var(--bad-tx)}
.tag.info{background:var(--info-bg);color:var(--info-tx)}
.tag.mut{background:rgba(11,11,13,.06);color:var(--mut)}

.empty{padding:46px 30px;text-align:center;color:var(--mut);font-size:14px}
.empty::before{content:"[ ]";display:block;font-family:var(--mono);font-size:26px;
  color:var(--ghost);margin-bottom:10px;letter-spacing:.1em}

/* ---------- сводка «Безопасность» ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:18px}
.card{padding:15px 16px;border:1px solid var(--bd);border-radius:14px;background:#fff}
.card .cl{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);margin:0 0 8px}
.card .cv{font-size:26px;font-weight:600;letter-spacing:-.02em;margin:0;line-height:1}
.card .cd{font-size:12.5px;color:var(--ink2);margin:6px 0 0;line-height:1.45}
.sect{margin-top:22px}
.sect h3{font-size:14px;font-weight:600;margin:0 0 4px}
.sect .sd{font-size:12.5px;color:var(--mut);margin:0 0 10px}

.log{border:1px solid var(--bd);border-radius:14px;overflow:hidden;background:#fff}
.lg{display:flex;gap:12px;padding:10px 14px;border-bottom:1px solid var(--bd);
  font-size:12.5px;align-items:baseline}
.lg:last-child{border-bottom:none}
.lg .lt{font-family:var(--mono);font-size:11px;color:var(--mut);flex:none;width:96px}
.lg .lw{font-weight:600;flex:none;width:78px}
.lg .lx{color:var(--ink2);min-width:0}

/* ---------- отметки списка ---------- */
.chk{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--bd);
  font-size:13.5px;cursor:pointer}
.chk:last-child{border-bottom:none}
.chk .bx{width:17px;height:17px;border:1px solid var(--bd2);border-radius:5px;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;background:#fff}
.chk.on .bx{background:var(--ink);border-color:var(--ink)}
.chk.on .cx{color:var(--mut);text-decoration:line-through}
.chk .cm{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ghost);flex:none}

/* ---------- модалка ---------- */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-back{position:absolute;inset:0;background:rgba(11,11,13,.42)}
.modal-box{position:relative;width:440px;max-width:100%;max-height:86vh;overflow:auto;
  background:#fff;border-radius:var(--r-card);padding:22px 22px 20px;box-shadow:var(--shadow-float)}
.fl{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);margin:0 0 6px;display:block}
.fi{width:100%;font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--bd2);
  border-radius:var(--r-ctl);background:#fff;color:var(--ink);outline:none;margin:0 0 14px}
.fi:focus{box-shadow:var(--ring)}
select.fi{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.mrow{display:flex;gap:10px;margin-top:4px}
.mrow .btn{flex:1}
.warnbox{font-size:12.5px;background:var(--warn-bg);color:var(--warn-tx);
  border:1px solid rgba(138,90,11,.22);border-radius:var(--r-ctl);padding:10px 12px;margin:0 0 14px;line-height:1.5}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:300;
  background:rgba(11,11,13,.92);color:#fff;font-size:13px;padding:10px 18px;border-radius:999px;
  box-shadow:var(--shadow-float);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:translateX(-50%) translateY(-4px)}

.demo{margin:14px 16px 0;padding:9px 16px;border-radius:var(--r-ctl);
  background:var(--info-bg);color:var(--info-tx);font-size:12.5px;
  border:1px solid rgba(59,63,158,.18);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.demo b{font-weight:600}
.demo code{font-family:var(--mono);background:rgba(255,255,255,.7);padding:1px 6px;border-radius:5px}

@media (max-width:640px){
  .rw{flex-wrap:wrap}
  .rw-act{width:100%}
  .lg .lt{width:auto}
  .lg{flex-wrap:wrap}
}

/* ---------- вход ---------- */
.loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.loginbox{width:380px;max-width:100%;padding:30px 28px 26px;border-radius:var(--r-card);
  background:linear-gradient(170deg,rgba(255,255,255,.94),rgba(250,250,253,.86));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--shadow-float), inset 0 1px 0 rgba(255,255,255,.95);text-align:center}
.loginbox .glogo{font-size:22px;margin-bottom:6px}
.loginbox .sub{font-size:13px;color:var(--mut);margin:0 0 22px}
.loginbox form{text-align:left}
.loginbox .fl{margin-top:2px}
.fi-c{letter-spacing:.34em;text-align:center;font-family:var(--mono)}
.codehint{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ghost);
  margin:-8px 0 14px}

/* ---------- хаб ---------- */
.hubhead{text-align:center;margin:34px 0 4px}
.hubhead .glogo{font-size:30px}
.hubsub{text-align:center;font-size:13.5px;color:var(--mut);margin:8px 0 0}
.grid{display:grid;gap:14px;margin:30px auto 0;width:100%;max-width:940px}
.gh{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);padding:0 0 2px 4px;font-weight:700}
.tile{position:relative;aspect-ratio:1/1;display:flex;flex-direction:column;padding:16px;
  border-radius:var(--r-card);text-decoration:none;color:inherit;overflow:hidden;
  background:linear-gradient(170deg,rgba(255,255,255,.92),rgba(250,250,253,.82));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--shadow-panel), inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .18s ease,box-shadow .18s ease}
a.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-float), inset 0 1px 0 rgba(255,255,255,.95)}
.tile .tm{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--mut);margin:0 0 auto}
.tile h2{font-size:15px;font-weight:600;line-height:1.22;margin:0 0 6px;letter-spacing:-.01em}
.tile p{font-size:11.5px;color:var(--ink2);line-height:1.45;margin:0;flex:1}
.tile .go{margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--ink)}
.tile .go::before{content:"[ "}.tile .go::after{content:" ]"}
.tile.wip{opacity:.6}
.tile .soon{margin-top:10px;font-family:var(--mono);font-size:10.5px;color:var(--ghost)}
.cell-empty{aspect-ratio:1/1;border:1px dashed rgba(11,11,13,.1);border-radius:var(--r-card)}
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)!important;max-width:440px}
  .gh,.cell-empty{display:none}
}
@media (max-width:430px){
  .grid{grid-template-columns:1fr!important;max-width:300px}
  .tile{aspect-ratio:auto}
}

/* ---------- строка выдачи раздела (экран «Люди») ---------- */
.grow{display:flex;align-items:center;gap:10px;padding:4px 0;font-size:13px}
.grow .gname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grow .gsel{flex:none;width:64px;font:inherit;font-size:12.5px;padding:3px 6px;
  border:1px solid var(--bd2);border-radius:7px;background:#fff;color:var(--ink)}
.grow.off .gname{color:var(--ghost)}
.grow.blocked{opacity:.4;pointer-events:none}

/* ══════════════════ раздел «Документы»: карта обязательств ══════════════════
   Состояние узла различается ФОРМОЙ рамки, а не цветом: раздел монохромный, и
   цвет здесь пришлось бы придумывать - а придуманный цвет читается хуже, чем
   выученная форма. Рядом с формой всегда стоит текстовая подпись состояния:
   форму надо запомнить, текст читается сразу. */

.dcount{text-align:right;flex:none;line-height:1.15}
.dcount .dnum{font-size:30px;font-weight:600;letter-spacing:-.03em}
.dcount .dof{font-size:14px;color:var(--mut);margin-left:5px}
.dcount .dlab{display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ghost);margin-top:3px}
.dcount.sm .dnum{font-size:22px}

.blockers{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.blk{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:9px 13px;border:1px solid var(--bd2);border-left:3px solid var(--ink);
  border-radius:var(--r-ctl);background:#fff;font:inherit;text-align:left;
  cursor:pointer;transition:background .15s}
.blk:hover{background:rgba(11,11,13,.045)}
.blk .bst{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut)}
.blk .bt{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.blk .bp{font-size:11.5px;color:var(--ghost)}

.mapbox{margin:18px 0 0;padding:4px 0;overflow-x:auto}
/* Схема шире своей панели: у «налоговой» и «первого рубля» она 1086 точек
   при доступных 1044, и правый край отрезался МОЛЧА - на последнем шаге
   пропадала половина коробки. max-width вместе с height:auto ужимает картинку
   по месту (viewBox отработает сам), а не обрезает её. */
.mapbox svg{display:block;color:var(--ink);max-width:100%;height:auto}
/* Подпись столбца схемы: то самое слово «шаг N», которым схема сшита с картой
   шагов и лестницей. Раньше схема о шагах молчала вовсе. */
.cst{font-family:var(--mono);font-size:9.5px;fill:currentColor;opacity:.5;
  letter-spacing:.08em}

.edge{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.28}
.edge.hot{opacity:.5;stroke-width:1.6}

.node{cursor:pointer}
.node rect{fill:#fff;stroke:currentColor;stroke-width:1.4}
.node .nt{font-size:12.5px;font-weight:600;fill:currentColor;letter-spacing:-.01em}
.node .ns{font-family:ui-monospace,monospace;font-size:10px;fill:currentColor;opacity:.55}
.node .nb{font-family:ui-monospace,monospace;font-size:9.5px;fill:currentColor;opacity:.75;
  letter-spacing:.06em;text-transform:uppercase}
.node:hover rect{fill:rgba(11,11,13,.05)}
.node:focus{outline:none}
.node:focus rect{stroke-width:2.4}

/* формы состояний */
.node.st-ok rect{stroke-width:1.8}                                  /* сплошная плотная */
.node.st-defect rect{stroke-dasharray:5 3}                          /* пунктир */
.node.st-missing rect{stroke-dasharray:1.5 3.5;fill:transparent}    /* точки, пусто внутри */
.node.st-decision rect{stroke-dasharray:9 3 2 3}                    /* штрих-пунктир */
/* держит остальное - единственный сильный акцент во всём разделе */
.node.blocker rect{stroke-width:2.2}
.node.blocker .nt{font-weight:600}

.side{position:fixed;right:16px;bottom:16px;width:min(440px,calc(100vw - 32px));
  max-height:min(76vh,760px);overflow-y:auto;z-index:60;
  padding:20px 22px;border-radius:var(--r-card);
  background:linear-gradient(170deg,rgba(255,255,255,.97),rgba(250,250,253,.93));
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow-float);
  /* Размер тянется за правый нижний угол - это умеет сам браузер. */
  resize:both;min-width:320px;min-height:150px;
  max-width:calc(100vw - 24px)}
/* Шапка карточки: ручка для перетаскивания, «к краю» и крестик. Липнет к
   верху при прокрутке, чтобы закрыть было можно из любого места карточки. */
.shead{position:sticky;top:-20px;z-index:3;display:flex;gap:6px;
  justify-content:flex-end;align-items:center;cursor:grab;
  margin:-20px -22px 2px;padding:8px 12px 6px;
  background:linear-gradient(to bottom,rgba(252,252,254,.97) 70%,rgba(252,252,254,0))}
.shead:active{cursor:grabbing}
.scx{flex:none;width:27px;height:27px;padding:0;font:inherit;font-size:17px;
  line-height:1;color:var(--mut);background:transparent;border:1px solid transparent;
  border-radius:8px;cursor:pointer}
.scx:hover{color:var(--ink);border-color:var(--bd2);background:#fff}
.scx:focus-visible{outline:none;box-shadow:var(--ring)}
.scd{font-size:11px}
/* Прилипшая карточка: правый край во всю высоту. Для длинных карточек и
   будущего просмотра файлов. */
.carddock .side{top:12px;bottom:12px;right:12px;left:auto;
  width:min(560px,calc(100vw - 24px));height:auto;max-height:none;
  resize:horizontal}
.side .sname{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px}
.side .sw{font-size:13.5px;color:var(--ink2);margin:0 0 14px;line-height:1.55}
.srow{display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--bd);font-size:13px}
.srow .sk{flex:none;width:110px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mut);padding-top:2px}
.srow .sv{color:var(--ink2);line-height:1.5;min-width:0}
.side .btn{margin-top:14px}

/* ══════════════ ВХОДЯЩЕЕ ═════════════════════════════════════════════════
   Пометка рода узла. Не значок и не цвет (их в разделе нет), а слово в рамке -
   такой же служебный знак, как «держит». Читается и голосом, и на бумаге. */
.lin{flex:none;font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink2);padding:1px 6px;
  border:1px solid var(--bd2);border-radius:999px}
/* Отправитель прямо в строке: «требование» без «от кого» через месяц не
   опознать, а открывать ради этого карточку по каждой строке - долго. */
.lfrom{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;
  color:var(--ink2);white-space:nowrap}
/* Ряд «число плюс вид дней» в форме входящего: три органа об одном ответе
   стоят вместе, иначе «10» и «рабочих» читаются как два разных вопроса. */
.qrow{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.qnum{width:88px;font-variant-numeric:tabular-nums}
.qpick{display:inline-flex;align-items:center;gap:6px;font-size:13px;
  color:var(--ink2);cursor:pointer}
.qpick input{margin:0}

/* ══════════════ СРОКИ СКОПОМ (вид «что горит») ═══════════════════════════
   Поле даты идёт ПОД своей строкой и с отступом слева: так видно, что оно
   относится к строке над ним, а не к следующей. Ряд из двадцати семи полей в
   столбик читается сверху вниз одним движением - ради этого всё и делалось. */
/* Держатель в строке списка. Тем же начертанием, что и прочие пометки строки:
   читают строку ради названия документа, а имя отвечает на второй вопрос -
   «с кого спросить», - и лезть вперёд названия ему нечего. */
.lho{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;
  color:var(--ink2);white-space:nowrap}
/* «Держателя нет» пишем ТОЛЬКО у держащих: у остальных отсутствие держателя -
   обычное дело, и полсотни одинаковых пометок сделали бы список нечитаемым. */
.lho.none{color:var(--ghost)}

.dbtop{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink2)}
.dbfill{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:baseline;
  margin-left:6px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ghost)}
.dbf{font:inherit;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink2);background:#fff;cursor:pointer;
  border:1px solid var(--bd2);border-radius:var(--r-ctl);padding:3px 9px}
.dbf:hover{background:rgba(11,11,13,.05);color:var(--ink)}
.dbf:focus-visible{outline:none;box-shadow:var(--ring)}
.dbrow{display:block;margin:3px 0 0;padding-left:13px}
.dbin{font:inherit;font-size:12.5px;color:var(--ink);background:#fff;
  border:1px solid var(--bd2);border-radius:var(--r-ctl);padding:5px 9px;
  font-variant-numeric:tabular-nums}
.dbin:focus-visible{outline:none;box-shadow:var(--ring)}
/* Заполненное поле отличается от пустого НАЧЕРТАНИЕМ рамки, а не цветом:
   цвета в разделе нет, а «я это уже трогал» - главный вопрос на третьем
   десятке строк. */
/* Только по метке от скрипта: :placeholder-shown у поля даты не срабатывает
   никогда (плейсхолдера у него нет вовсе), и правило с ним пометило бы
   заполненными ВСЕ двадцать семь полей разом - ровно наоборот смыслу. */
/* Два пикселя, а не полтора: на экране с масштабом 1.25 полтора и один
   слипаются в одну точку устройства, и разница пропадает вовсе. */
.dbin[data-filled]{border-color:var(--ink);border-width:2px}
.dbfoot{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--bd)}
.dbfoot .btn{margin:0}
.dbn{font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut)}
.dbn b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* ══════════════ ИСТОРИЯ УЗЛА В КАРТОЧКЕ ══════════════════════════════════
   Свёрнута: каждый день нужна последняя правка, а весь квартал - раз в
   полгода, при разборе. Развёрнутая история длиннее самой карточки и
   отодвинула бы файлы с заметками за край экрана. */
.shist{margin-top:10px;border-top:1px solid var(--bd);padding-top:9px}
.shsum{display:flex;gap:8px;align-items:baseline;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut)}
.shsum:hover{color:var(--ink)}
.shsum:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}
.shn{font-size:10px;color:var(--ghost)}
.shlist{list-style:none;margin:9px 0 0;padding:0;display:flex;
  flex-direction:column;gap:7px}
.shrow{display:flex;gap:10px;align-items:baseline;font-size:12px;line-height:1.45}
/* Время столбцом слева и одинаковой ширины цифрами: строки читаются сверху
   вниз по датам, а не выискиванием даты в каждой. */
.sht{flex:none;font-family:var(--mono);font-size:10px;color:var(--ghost);
  font-variant-numeric:tabular-nums}
.shw{min-width:0;color:var(--ink2)}
.shmore{margin:9px 0 0;font-size:11.5px;color:var(--mut)}

/* ══════════════ СНЯТО С КАРТЫ ════════════════════════════════════════════
   Хвост списка, а не работа на сегодня: это ответ на редкий вопрос «а куда
   делось». Кнопка возврата прижата вправо, чтобы её нельзя было задеть,
   пробегая глазами перечень. */
.glist{list-style:none;margin:10px 0 0;padding:0;display:flex;
  flex-direction:column;gap:2px}
.gitem{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;
  padding:10px 0 0;border-top:1px solid var(--bd)}
.gt{font-size:13.5px;color:var(--ink)}
.gm{font-family:var(--mono);font-size:10px;color:var(--ghost);
  letter-spacing:.03em}
.gform{margin-left:auto}
.gform .btn{margin:0}

/* ══════════════════ ПОЛОТНО документов ══════════════════════════════════
   Одна SVG во весь экран, внутри одна группа с одним преобразованием. Всё,
   что здесь есть, - это состояние формой рамки (как и у процедур), три
   крупности и подсветка связей у выбранного узла. Цвета в разделе по-прежнему
   нет: карту читают формой и текстом. */

.cvbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:20px;
  flex-wrap:wrap;padding:12px 22px;margin:0 16px;border-radius:var(--r-card);
  background:var(--glass2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow-panel)}
.cvans{flex:none}
.cvq{margin:2px 0 0;font-size:19px;font-weight:600;letter-spacing:-.02em}
/* Подпись под ответом: КАКАЯ процедура держится и сколько держит ИМЕННО
   ЕЁ. Раньше рядом с ответом стояло число по всем процедурам разом. */
.cvsub{margin:2px 0 0;font-size:12px;color:var(--mut)}
/* «держит» в строке списка: в карточке это видно, а в списке не было -
   хотя список и есть то, что печатают и читают голосом. */
.ldoc .lhold{font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  color:var(--ink);font-weight:600;white-space:nowrap}
.cvnums{display:flex;gap:18px;flex:1 1 auto;min-width:0;flex-wrap:wrap}
/* Счётчик разваливался на три строки: голый текст знаменателя оказывался
   отдельным элементом флекса. Числитель и знаменатель теперь в одной строке. */
.cvn{display:flex;flex-direction:column;line-height:1.1;font-size:13px;color:var(--mut)}
.cvn .cvv{display:block;white-space:nowrap}
.cvn b{font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.02em;
  display:inline}
.cvn i{font-family:var(--mono);font-size:9.5px;font-style:normal;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ghost);margin-top:3px}
/* Панель переносится по строкам. Кнопок стало больше (назад, к центру,
   переключатель обзора из двух, списком), и в одну строку на ноутбуке они
   уже не влезают: «списком» уезжала за правый край экрана. */
.cvtools{display:flex;gap:7px;align-items:center;flex:1 1 auto;flex-wrap:wrap;
  justify-content:flex-end;min-width:0}
.cvfind{width:170px;font:inherit;font-size:13px;padding:6px 11px;border-radius:var(--r-ctl);
  border:1px solid var(--bd2);background:#fff;color:var(--ink)}
.cvfind:focus{outline:none;box-shadow:var(--ring)}

.canvas{position:relative;margin:12px 16px 0;height:calc(100vh - 190px);min-height:260px;
  user-select:none;-webkit-user-select:none;
  /* Высоту ниже переставляет скрипт по фактическому верху полотна: полоса
     сверху переносится на вторую строку и формула «экран минус 190» перестаёт
     сходиться. min-height здесь нарочно НЕБОЛЬШОЙ - он перебивает height, и
     при 430 полотно вылезало за нижний край окна вместе с прокруткой. */
  border-radius:var(--r-card);overflow:hidden;border:1px solid var(--bd);
  background:
    radial-gradient(60% 50% at 50% 42%, rgba(255,255,255,.85), rgba(255,255,255,.35) 70%),
    #eeeef1;
  cursor:grab;touch-action:none}
.canvas.grabbing{cursor:grabbing}
/* ⚠️ ИМЕННО svg.cv, А НЕ .cv. Тем же коротким именем названо число в карточке
   сводки «Безопасности» (<p class="cv">), и правило про высоту 100% доставалось
   ему тоже: в сетке карточка растянута по строке, значит высота у неё
   определённая, и число занимало карточку целиком, а подпись под ним вылезала
   ЗА рамку и наезжала на следующий заголовок. Два раздела, один класс, и
   ломается тот, кого правили позже. */
svg.cv{display:block;width:100%;height:100%;color:var(--ink)}
/* Подсказка лежит ПОВЕРХ карты, поэтому ей нужна своя подложка: без неё
   строка читалась вперемешку с названиями документов, проходящими под ней. */
.cvhint{position:absolute;left:14px;bottom:10px;margin:0;font-family:var(--mono);
  font-size:10px;letter-spacing:.04em;color:var(--mut);pointer-events:none;
  padding:5px 11px;border-radius:99px;background:var(--glass2);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.6);max-width:calc(100% - 28px)}

/* связи. Тонкие и НЕ масштабируются: при отдалении линия должна остаться
   линией, а не исчезнуть в четверть пикселя. */
.stem{stroke:currentColor;opacity:.16;stroke-width:1.1;vector-effect:non-scaling-stroke}
.stem.trunk{opacity:.3;stroke-width:1.6;vector-effect:non-scaling-stroke}
.dep{stroke:currentColor;opacity:0;stroke-width:1.4;vector-effect:non-scaling-stroke;
  transition:opacity .16s}
.dep.cross{stroke-dasharray:6 4}
.dep.on{opacity:.62}

/* центр */
.hub{cursor:pointer}
.hub rect{fill:#fff;stroke:currentColor;stroke-width:2.6;
  vector-effect:non-scaling-stroke}
.hub .ht{font-size:22px;font-weight:600;fill:currentColor;letter-spacing:-.02em}
.hub .hs{font-family:var(--mono);font-size:11px;fill:currentColor;opacity:.5}
.hub .hn{font-family:var(--mono);font-size:11px;fill:currentColor;opacity:.75}
.hub:focus{outline:none}
.hub:focus rect,.hub.sel rect{stroke-width:4}

/* ветки */
.branch{cursor:pointer}
.branch rect{fill:#fff;stroke:currentColor;stroke-width:1.8;
  vector-effect:non-scaling-stroke}
.branch .bwho{font-family:var(--mono);font-size:9.5px;fill:currentColor;opacity:.45;
  letter-spacing:.1em;text-transform:uppercase}
.branch .bt{font-size:15px;font-weight:600;fill:currentColor;letter-spacing:-.015em}
.branch .bn{font-family:var(--mono);font-size:10px;fill:currentColor;opacity:.6}
.branch .bh{font-family:var(--mono);font-size:10px;fill:currentColor;opacity:.85}
.branch:hover rect{fill:rgba(11,11,13,.05)}
.branch:focus{outline:none}
.branch:focus rect,.branch.sel rect{stroke-width:3.4}
/* пустая ветка нарисована пунктиром: её видно, и видно, что в ней ничего нет */
.branch.br-empty rect{stroke-dasharray:2 4;fill:transparent}
.branch.br-empty .bt{opacity:.55}
.branch.br-holds rect{stroke-width:2.6}

/* документы: форма рамки = состояние, ровно как в процедурах */
.doc{cursor:pointer;transition:opacity .16s}
/* non-scaling-stroke ОБЯЗАТЕЛЕН. Состояние документа в монохромном разделе
   кодируется ФОРМОЙ рамки, а форма масштабировалась вместе с картой: на
   рабочей крупности обводка выходила 0.77 пикселя, а пунктир состояния «нет»
   0.83 через 1.93 - четыре разных состояния становились одной серой ниткой.
   У линий связи это правило стояло с самого начала, у коробок его забыли. */
.doc rect{fill:#fff;stroke:currentColor;stroke-width:1.4;
  vector-effect:non-scaling-stroke}
.doc .nt{font-size:13px;font-weight:600;fill:currentColor;letter-spacing:-.01em}
.doc .ns{font-family:var(--mono);font-size:10px;fill:currentColor;opacity:.55}
.doc .nb{font-family:var(--mono);font-size:9.5px;fill:currentColor;opacity:.75;
  letter-spacing:.06em;text-transform:uppercase}
.doc:hover rect{fill:rgba(11,11,13,.05)}
.doc:focus{outline:none}
.doc:focus rect,.doc.sel rect{stroke-width:3.2}
.doc.st-ok rect{stroke-width:1.8}
.doc.st-defect rect{stroke-dasharray:5 3}
.doc.st-missing rect{stroke-dasharray:1.5 3.5;fill:transparent}
.doc.st-decision rect{stroke-dasharray:9 3 2 3}
.doc.blocker rect{stroke-width:2.4}
/* узел, который держит многое, крупнее подписью: важность СЧИТАЕТСЯ из числа
   заблокированных шагов, а не назначается вручную */
.doc.heavy .nt{font-size:15px}
.doc.dim{opacity:.42}

/* три крупности. Издалека подписи документов не читаются и только шумят -
   вместо них видны ветки, названия которых наоборот укрупняются. */
/* ДАЛЬНИЙ ПЛАН УБИРАЕТ ПОДПИСИ, А НЕ ПРЕДМЕТЫ.
   Так устроен семантический зум везде, где он работает: на общем плане карты
   видны кварталы, а не названия улиц - но кварталы никуда не деваются.
   Мы сначала прятали документы целиком, и обзор переставал отвечать на вопрос
   «где густо, где пусто» - ровно тот, ради которого обзор и открывают.
   Прежняя беда была не в коробках, а в том, что держащие ЗАЛИВАЛИСЬ чёрным
   поверх чёрного текста; заливки больше нет, держащий помечен толщиной, а
   толщина теперь не масштабируется. */
.cv.z-far .doc .nt,.cv.z-far .doc .ns,.cv.z-far .doc .nb{display:none}
.cv.z-far .doc rect{stroke-width:1}
.cv.z-far .doc.blocker rect{stroke-width:2.6}
.cv.z-far .stem:not(.trunk){opacity:.08}
.cv.z-far .branch .bwho,.cv.z-far .branch .bn{display:none}
/* Крупность подписей на обзоре считается от того, во что она превратится на
   экране: при вписывании всего полотна масштаб около 0.22, и подпись в 30
   пикселей станет шестью - то есть исчезнет. Отсюда пятьдесят с лишним.
   Но укрупнённое «Учредительные документы» вылезает далеко за свою коробку и
   наезжает на соседей, поэтому издалека показывается КОРОТКОЕ имя в одно
   слово - оно в ту же ширину помещается. */
.bs{display:none}
.cv.z-far .branch .bt{display:none}
.cv.z-far .branch .bs{display:block;font-size:34px;font-weight:600;
  fill:currentColor;letter-spacing:-.02em}
.cv.z-far .hub .ht{font-size:44px}
.cv.z-far .hub .hs,.cv.z-far .hub .hn{display:none}
/* «держат N» - единственное, что на обзоре и нужно: он отвечает на вопрос,
   ради которого раздел открывают. Крупность считается от масштаба вписывания
   (около 0.2), поэтому число крупнее подписи. */
/* Счёт держащих на общем плане - отдельной подписью ПОД именем, по центру.
   Прежний вариант (по правому краю коробки) на укрупнённом имени налезал
   прямо на буквы. */
.bhs{display:none}
.cv.z-far .branch .bh{display:none}
.cv.z-far .branch .bhs{display:block;font-family:var(--mono);font-size:19px;
  fill:currentColor;opacity:.75;letter-spacing:.04em}
.cv.z-far .branch .bhs.bempty{opacity:.4}
.cv.z-far .branch.br-empty rect{stroke-dasharray:6 10}
/* Подпись состояния на среднем плане ОСТАЁТСЯ. Прятали её ради чистоты, а
   получалось, что на той единственной крупности, с которой раздел
   открывается, состояние документа не прочитать ничем: ни словом, ни формой.
   Прячем только «держит N» - это уточнение, без него читать можно. */
.cv.z-mid .doc .nb{display:none}
.cv.z-mid .branch .bwho{display:none}
.cv.z-mid .branch .bt{font-size:17px}

/* режим «списком»: то же содержимое без полотна. Обязателен для печати и
   телефона - карту нельзя ни распечатать, ни прочитать голосом. */
.listonly{display:none}
body.listmode .canvas,body.listmode .cvhint{display:none}
body.listmode .listonly{display:block}
/* Прячем ТОЛЬКО кнопки обзора карты (.seg-zoom). Раньше рядом с ними стоял
   второй переключатель вида, и правило «в режиме списка убрать кнопки обзора»
   уносило вместе с ними ВЫХОД ИЗ СПИСКА. Второго переключателя больше нет -
   вид переключается полосой наверху, которая не прячется никогда, - но
   правило остаётся точным: оно про обзор карты, а не про вид. */
body.listmode .cvtools [data-zoom],body.listmode .cvtools .seg-zoom,
body.listmode .cvtools [data-home],body.listmode .cvtools [data-back]{display:none}
.ptitle.sm{font-size:17px}
.panel.lb{padding-top:16px;padding-bottom:16px}
.ldocs{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.ldoc{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;width:100%;text-align:left;
  padding:8px 12px;border:1px solid var(--bd);border-radius:var(--r-ctl);
  background:#fff;font:inherit;cursor:pointer}
.ldoc:hover{background:rgba(11,11,13,.04)}
.ldoc .lst{flex:none;width:132px;font-family:var(--mono);font-size:10px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
/* min-width:0 обязателен: без него длинное название не сжимается, а выталкивает
   «держит N» за правую рамку строки, поверх края панели. */
.ldoc .lt{font-size:13.5px;font-weight:600;flex:1 1 auto;min-width:0}
/* Срок в строке. Стоит всегда: и когда он есть, и когда его не поставили. */
.ldoc .ldue{flex:none;font-family:var(--mono);font-size:10px;color:var(--ink2);
  white-space:nowrap}
.ldoc .ldue.none{color:var(--ghost)}
.ldoc .lw{flex:none;font-family:var(--mono);font-size:10px;color:var(--ghost)}

/* Содержательные поля документа под строкой списка и шапка печатного листа.
   На экране не показываются: там то же самое открывается карточкой по клику,
   и дублировать его в списке значило бы утроить длину страницы. */
.lprint,.printonly{display:none}
.lprint{margin:1px 0 9px;padding:0 12px 0 13px;font-size:11px;line-height:1.45}
.lpw{margin:0 0 3px}
.lpr{margin:0 0 2px;display:flex;gap:8px}
.lpr > span{flex:none;width:118px;font-family:var(--mono);font-size:9px;
  letter-spacing:.06em;text-transform:uppercase}
.phead1{margin:0 0 12px}
.ph1t{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em}
.ph1s{margin:3px 0 0;font-size:10.5px;line-height:1.4}
.lstep{margin:12px 0 0}

/* ══════════════════ СРОЧНОСТЬ: ДВА СРОКА, ТРИ СТУПЕНИ ════════════════════
   Цвета здесь нет, как и во всём разделе. Срочность несёт КРУГ - единственная
   круглая вещь на карте: всё остальное прямоугольное (коробка, штрих рамки,
   срез угла). Круг закреплён за сроками навсегда, как толщина рамки закреплена
   за «держит».

   Место - такой же носитель смысла, как форма: верхний значок ВСЕГДА задача,
   нижний ВСЕГДА сам документ. Слева от подписей, в поле, которое не занято
   ничем другим. Габарит коробки не меняется никогда: подписи стоят на x+26 и
   у горящего узла, и у спокойного.

   Спокойного значка нет: спокойных узлов большинство, и одинаковые значки на
   них утопили бы тревогу. Спокойно = отсутствие чернил. */
.fire{fill:currentColor}
.fire circle,.fire path{vector-effect:non-scaling-stroke}
/* Худшая беда одним значком - только на обзоре, где подписей нет вовсе. */
.fire-worst{display:none}
.cv.z-far .fire-worst{display:block}
.cv.z-far .fire-task,.cv.z-far .fire-doc{display:none}
.cv.z-far .fire-worst{transform-box:fill-box;transform-origin:center}
.doc .dfire{font-family:var(--mono);font-size:9.5px;fill:currentColor;
  letter-spacing:.02em}
/* На средней крупности третья строка сокращается до одного худшего слова -
   она и так печатается одним словом, поэтому правило только про обзор. */
.cv.z-far .doc .dfire{display:none}
.branch .bfire{font-family:var(--mono);font-size:11px;fill:currentColor}

/* Значок в обычном тексте: список, карточка, бумага. */
.fglyph{width:11px;height:11px;flex:none;vertical-align:-1px;margin-right:5px}
.lfire{display:inline-flex;align-items:baseline;font-family:var(--mono);
  font-size:10px;letter-spacing:.02em;color:var(--ink)}
/* Горит - НАЧЕРТАНИЕМ, не цветом: на бумаге цвета нет, а вес шрифта есть. */
.lfire[data-fire="burn"]{font-weight:700}
.ldoc .lfire{flex:none}
.srow .lfire{font-size:11px}
.sv .fglyph{margin-right:4px}

/* Счётчик в полосе и кнопка «что горит». Ноль пишется нулём, а не прячется:
   исчезнувший счётчик читается как «поломалось», а не как «всё спокойно». */
.cvn.cvfire b{font-variant-numeric:tabular-nums}
.firebar{margin:14px 0 0}
.firegroup{margin:0 0 18px}
.firegroup h3{font-size:14px;font-weight:600;margin:0 0 8px;letter-spacing:-.01em}
.firenone{font-size:13px;color:var(--ink2);margin:0}
body.firemode .canvas,body.firemode .cvhint,body.firemode #aslist{display:none}
body.firemode .fireonly{display:block}
.fireonly{display:none}

/* ВИД «МОЁ» - четвёртый, и устроен он как третий: отбирает узлы, а не
   показывает все. Отбор здесь по держателю, а порядок - по тому, что требует
   действия раньше. */
.mineonly{display:none}
body.minemode .canvas,body.minemode .cvhint,
body.minemode #aslist,body.minemode #asfire{display:none}
body.minemode .mineonly{display:block}
body.minemode .cvtools [data-zoom],body.minemode .cvtools .seg-zoom,
body.minemode .cvtools [data-home],body.minemode .cvtools [data-back]{display:none}
body.firemode .cvtools [data-zoom],body.firemode .cvtools .seg-zoom,
body.firemode .cvtools [data-home],body.firemode .cvtools [data-back]{display:none}

/* Заполнители срока: «неделя», «месяц», «убрать». Мелкие, рядом с полем даты. */
.qquick{display:flex;gap:6px;margin-top:6px}
.qq{border:1px solid var(--bd2);background:#fff;border-radius:99px;
  font:inherit;font-size:11px;padding:3px 10px;color:var(--ink2);cursor:pointer}
.qq:hover{background:rgba(11,11,13,.05);color:var(--ink)}
.qq:focus-visible{outline:none;box-shadow:var(--ring)}

/* Задачи в верхнем хранилище: строка, крестик и форма заведения. */
.taskrow{display:flex;align-items:center;gap:8px}
.taskx{flex:none;border:0;background:none;font:inherit;font-size:11.5px;
  color:var(--mut);cursor:pointer;padding:6px 8px;border-radius:var(--r-ctl)}
.taskx:hover{background:rgba(11,11,13,.05);color:var(--ink)}
.taskx:focus-visible{outline:none;box-shadow:var(--ring)}
.taskadd{display:flex;gap:8px;margin:12px 0 0}
.taskadd .inp{flex:1 1 auto}

/* Лестница шагов процедуры. Видна ВСЕГДА - и на компьютере, и на телефоне, и
   на бумаге: карта шагов отвечает «сколько шагов и где горит», лестница - «что
   делать», схема - «кто от кого зависит». */
.steps{display:block;margin-top:14px}
/* Полоса слева ГРУППИРУЕТ шаг: без неё три десятка строк подряд читались одним
   списком, а заголовок «шаг 2» терялся среди них. Переход по карте шагов
   делает полосу тёмной - это и есть ответ «ты здесь». */
.steps .lstep{margin:14px 0 0;padding-left:11px;box-shadow:inset 1px 0 0 var(--bd);
  scroll-margin-top:14px}
.steps .lstep:target{box-shadow:inset 2px 0 0 var(--ink)}
.steps .lstep:focus{outline:none}

/* ══════════ КАРТА ШАГОВ: ПЯТЬ КОРОБОК ВМЕСТО ДВАДЦАТИ ЧЕТЫРЁХ ════════════
   «Блок-схемы всё равно каша, не понимаю» - и это правда: у «первого рубля»
   двадцать четыре коробки и двадцать три стрелки, которые не помещаются на
   экран и не читаются целиком. Схема отвечала на редкий вопрос, а занимала
   главное место.

   Здесь тот же разбор на шаги, но крупно: одна коробка на шаг, и в ней ровно
   то, ради чего на процедуру смотрят - сколько документов, сколько готово,
   держит ли что-нибудь, горит ли срок. Каждая коробка - ссылка на свой шаг
   ниже, то есть полоса работает оглавлением.

   Разметкой, а не картинкой: переносится на узком экране, читается голосом,
   обходится клавишами, печатается. Схема осталась - но по кнопке. */
.smap{margin:16px 0 0}
.smsteps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:stretch;gap:8px}
.smsteps li{display:flex;align-items:center;gap:8px}
/* Стрелка между шагами нарисована рамками, а не знаком: знак «вправо» чтение с
   экрана произносит вслух посреди перечня, а смысла в нём нет - порядок и так
   в номерах. */
.smsteps li + li::before{content:"";flex:none;width:7px;height:7px;
  border-top:1.3px solid var(--bd2);border-right:1.3px solid var(--bd2);
  transform:rotate(45deg)}
.sms{display:flex;flex-direction:column;gap:3px;min-width:150px;
  padding:9px 12px 10px;border:1px solid var(--bd2);border-radius:var(--r-ctl);
  background:#fff;text-decoration:none;color:var(--ink)}
a.sms:hover{background:rgba(11,11,13,.045)}
a.sms:focus-visible{outline:none;box-shadow:var(--ring)}
.smn{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mut)}
.smc{font-size:12.5px;line-height:1.3}
.smx{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--mono);font-size:10px;
  color:var(--ink2)}
.smh{font-weight:600;color:var(--ink)}
.smf{display:inline-flex;align-items:center;gap:4px;color:var(--ink)}
.smw{color:var(--ghost)}
/* Итог - НЕ ШАГ, и форма у него другая: двойная рамка. Без этой коробки полоса
   читается как список дел без конца - видно, чем заняты, не видно зачем. */
.smgoal{border:3px double var(--bd2);min-width:170px}

/* Чего документ ждёт из ДРУГОЙ процедуры. Стрелкой не нарисовать - другого
   конца на схеме нет, - поэтому словами, строкой под самим документом. */
.lwait{margin:2px 0 0;padding:0 12px 0 13px;display:flex;flex-wrap:wrap;
  gap:4px 10px;align-items:baseline;font-size:11.5px;color:var(--ink2)}
.lwk{font-family:var(--mono);font-size:9px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ghost)}
.lwg{display:inline-flex;flex-wrap:wrap;gap:4px 6px;align-items:baseline}
.lwp{font-family:var(--mono);font-size:9.5px;color:var(--mut)}
.lwi{display:inline-flex;gap:4px;align-items:baseline;font:inherit;
  color:inherit;background:none;border:0;padding:0;cursor:pointer;
  text-align:left;border-bottom:1px solid var(--bd2)}
.lwi:hover{border-bottom-color:var(--ink)}
.lwi:focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
/* Закрытая опора приглушена, но состояние при этом СКАЗАНО СЛОВОМ рядом:
   приглушённость одна значила бы «плохо видно», а не «уже есть». */
.lwi.done{opacity:.55}
.lws{font-family:var(--mono);font-size:9.5px;color:var(--mut)}

/* Вся схема - по кнопке. Раз в месяц, при споре «а это точно после того?»,
   она незаменима; каждый день она мешает. */
.fullmap{margin:16px 0 0;border-top:1px solid var(--bd);padding-top:10px}
.fmsum{cursor:pointer;font-size:13px;color:var(--ink2);padding:2px 0}
.fmsum:hover{color:var(--ink)}
.fmsum:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}
.fmn{font-family:var(--mono);font-size:10px;color:var(--ghost);margin-left:8px}

/* ══════════ ПОЛОСА ВИДОВ: ОДНА НА ВЕСЬ РАЗДЕЛ ═══════════════════════════
   Четыре представления одних и тех же данных стояли вразнобой: три кнопками
   среди одиннадцати одинаковых органов в правом углу, четвёртое серой ссылкой
   в шапке. Человек не видел, что это один раздел, и не находил выхода из
   списка. Здесь они рядом, подписаны словом «вид», текущий выделен. */
.viewbar{display:flex;align-items:baseline;gap:2px;flex-wrap:wrap}
.vbl{font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mut);margin-right:8px}
.vb{font:inherit;font-size:13px;line-height:1;padding:7px 12px;border:0;
  background:none;color:var(--ink2);cursor:pointer;border-radius:var(--r-ctl);
  text-decoration:none;display:inline-block}
.vb:hover{background:rgba(11,11,13,.05);color:var(--ink)}
.vb:focus-visible{outline:none;box-shadow:var(--ring)}
.vb.on{background:var(--ink);color:#fff;font-weight:600;cursor:default}
.vb.on:hover{background:var(--ink)}
.procbar{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.pbn{font-family:var(--mono);font-size:10.5px;color:var(--mut);margin-left:auto}

/* Инструменты карты живут НА КАРТЕ, в её углу, а не в полосе раздела. */
.cvpanel{position:absolute;right:12px;top:12px;z-index:5;display:flex;
  align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;
  max-width:calc(100% - 24px);padding:6px;border-radius:var(--r-card);
  background:rgba(252,252,254,.86);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--bd)}
body.listmode .cvpanel,body.firemode .cvpanel,body.minemode .cvpanel{display:none}

/* Полоса журнала: за какой срок смотрим и сколько строк спрятано. Числа
   говорятся вслух - журнал, который что-то прячет молча, перестаёт быть
   журналом. Строки проверок помечены словом, а не цветом. */
.logbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:0 0 10px}
.lgl{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut)}
.lgp{font-size:12.5px;text-decoration:none;color:var(--ink2);
  border-bottom:1px solid transparent;padding-bottom:1px}
.lgp:hover{border-bottom-color:var(--bd2)}
.lgp.on{font-weight:600;color:var(--ink);border-bottom-color:var(--ink)}
.lgt{font-size:12px;color:var(--ink2);margin-left:6px}
.lgn{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ghost)}
.tst{margin-left:7px;font-family:var(--mono);font-size:9px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mut);border:1px solid var(--bd2);
  border-radius:99px;padding:1px 6px;white-space:nowrap}
.lg.istest{opacity:.72}
.log{max-height:none}

/* ══════════════════ КЛАВИАТУРА И ЧТЕНИЕ С ЭКРАНА ═══════════════════════
   Раздел обходят не только мышью: карту читают голосом и ходят по ней
   табуляцией. Всё, что видно глазом, обязано иметь второй канал. */

/* Заголовок страницы и другие подписи, которые нужны чтению с экрана, но на
   экране были бы повтором. НЕ display:none: спрятанное так не читается вовсе. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Ссылка-пропуск: полотно это семьдесят пять остановок табуляции, и без неё до
   списка добираются полминуты. Видна только когда на неё встал фокус. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:10px 16px;
  background:#fff;border:1px solid var(--ink);border-radius:var(--r-ctl);
  font-size:13px;text-decoration:none;color:var(--ink)}
.skip:focus{left:16px;top:16px;box-shadow:var(--ring)}

/* КОЛЬЦО ФОКУСА НА ПОЛОТНЕ - ОТДЕЛЬНОЙ ОБВОДКОЙ, а не толщиной рамки.
   Толщину уже носят состояние документа и пометка «держит», и правила
   состояния перебивали :focus по специфичности: больше половины коробок при
   обходе с клавиатуры не менялись вообще. Обводка не спорит ни с чем и видна
   на любом состоянии. */
.fring{display:none;fill:none;stroke:currentColor;stroke-width:2.5;
  stroke-dasharray:none;vector-effect:non-scaling-stroke;pointer-events:none}
.cv .hub:focus .fring,.cv .branch:focus .fring,.cv .doc:focus .fring,
.cv .hub.sel .fring,.cv .branch.sel .fring,.cv .doc.sel .fring{display:block}
/* Мышь фокус не рисует: кольцо нужно тому, кто идёт клавиатурой. */
.cv .hub:focus:not(:focus-visible) .fring,
.cv .branch:focus:not(:focus-visible) .fring,
.cv .doc:focus:not(:focus-visible) .fring{display:none}
.cv .hub.sel .fring,.cv .branch.sel .fring,.cv .doc.sel .fring{display:block}

/* ПРИГЛУШЁННОЕ ОСТАЁТСЯ РАЗЛИЧИМЫМ. Было 0.18 у «не относится к выбранному» и
   0.10 у «не нашлось» - это контраст 1.2:1, то есть узла на экране просто нет.
   Приглушить значит отодвинуть на второй план, а не стереть: на карту смотрят,
   чтобы увидеть ЦЕЛОЕ, и растворять две трети узлов ради одного - обман.
   Отфильтрованное поиском вдобавок уходит из обхода клавиатурой (это делает
   скрипт: tabindex и aria-hidden), потому что стоять на невидимом нельзя. */
/* Сами числа стоят там, где объявлены .dim и .nomatch (ниже по файлу):
   держать их в двух местах значит однажды поправить не то. */

/* На касании поля ввода должны быть не меньше 16px: меньше - и Safari на iOS
   приближает страницу, после чего карта уезжает вбок. */
@media (pointer:coarse){
  .qf input[type=text],.qf input[type=date],.qf input[type=number],
  .qf select,.qf textarea,.cvfind{font-size:16px}
}

/* ══════════════════ БУМАГА ═══════════════════════════════════════════════
   Лист живёт отдельно от экрана: на нём нет ни клика, ни карточки, ни того,
   кто рядом объяснит. Поэтому в печати меняется не только состав, но и
   ЧЕРНОТА (серое в девять процентов на бумаге пропадает вовсе) и разрывы
   страниц (иначе ветка режется пополам ровно по границе листа). */
@page{margin:14mm}
@media print{
  .canvas,.cvtools,.cvhint,header,.side,.qedit,.cvfound,
  .skip,.vh{display:none !important}
  /* Печатаем ТО, ЧТО НА ЭКРАНЕ. Правило «показать список» стояло с
     !important и перебивало режим: лист, который несут юристу из вида «что
     горит», выходил с хвостом из всех 57 документов. */
  .listonly{display:block !important}
  body.firemode .listonly{display:none !important}
  body.firemode .fireonly{display:block !important}
  /* Свой лист: «что на мне» несут не юристу, а себе - на планёрку. */
  body.minemode .listonly{display:none !important}
  body.minemode .mineonly{display:block !important}
  .lprint,.printonly{display:block}
  .pg{background:none;padding:0;min-height:0}
  .wrap{max-width:none;margin:0;padding:0}
  .panel,.cvbar{border:1px solid #000;background:none;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    break-inside:avoid;page-break-inside:avoid}
  .cvbar{position:static;margin:0 0 12px;padding:10px 14px}
  .phead{break-after:avoid;page-break-after:avoid}
  li{break-inside:avoid;page-break-inside:avoid}
  .ldoc{border:1px solid rgba(0,0,0,.5);background:none;
    break-inside:avoid;page-break-inside:avoid}
  /* На бумаге нет ни наведения, ни выбора: приглушённое серое здесь означает
     только «плохо видно». Всё, что несёт смысл, - чёрным. */
  .eyebrow,.psub,.hintline,.dof,.dlab,.lst,.lw,.lfname,.lfn,.lpr > span,
  .ldoc .lst,.ldoc .lw,.cvn,.cvsub,.fmeta,.lfire,.firenone,.gm,.lho,
  .lin,.lfrom{color:#000}
  /* «Вернуть на карту» на бумаге - кнопка, которую нельзя нажать. Строка
     снятого документа при этом остаётся: «документ убрали» и «документа не
     было» - разные ответы, и на листе для юриста они нужны оба. */
  .gform{display:none}
  /* То же с простановкой сроков: на листе двадцать семь пустых полей даты -
     это двадцать семь пустых рамок, в которые нечем писать. Сами строки
     остаются: «держит и срока нет» - главное, ради чего лист и печатают. */
  .dbrow,.dbtop,.dbfoot{display:none}
  .ldoc,.lprint,.psub,.ph1s{color:#000}
  /* Схема процедуры шире листа и обрезалась по правому краю: у SVG стоят и
     viewBox, и жёсткие width/height в точках. Снимаем точки - viewBox
     отработает сам. */
  .mapbox{overflow:visible}
  .mapbox svg{width:100% !important;height:auto !important;max-width:100%}
}

@media (max-width:760px){
  .canvas{display:none}
  .listonly{display:block}
  /* Полотна на телефоне нет вовсе, поэтому кнопка «полотно» здесь была
     мёртвой: подсвечена, нажимается, ничего не происходит. Убираем её и
     говорим словами, что показывается списком. */
  .vb[data-view="map"]{display:none}
  /* Пальцем в кнопку высотой в двадцать три точки не попасть, а именно с
     телефона сроки и проставляют - стоя, между делами. Растим до размера
     пальца только на узком экране: на компьютере тот же размер выглядел бы
     криком. */
  .dbf{padding:9px 13px}
  .dbin{padding:9px 10px;width:100%;max-width:230px}
  .viewbar::after{content:"на телефоне только списком";
    font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ghost);margin-left:8px}
  /* Полоса видов липнет к верху: без этого выйти из режима можно было,
     только промотав полсотни строк вверх. */
  .viewbar{position:sticky;top:0;z-index:20;background:#e9e9ec;
    margin:0 -8px;padding:8px 8px 6px}
  .procbar .pbn{margin-left:0}
  /* Схема процедуры в коробке шириной с телефон читается только елозаньем
     пальцем вбок в три приёма. Вместо неё - те же шаги списком. Прячем вместе
     с кнопкой: кнопка, открывающая пустоту, хуже отсутствующей. */
  .mapbox,.fullmap{display:none}
  /* Коробки шагов на телефоне идут в столбик, стрелка между ними смотрит
     вниз - иначе она указывает вбок там, где ничего нет. */
  .smsteps{flex-direction:column;align-items:stretch}
  .smsteps li{flex-direction:column;align-items:stretch}
  .smsteps li + li::before{align-self:center;transform:rotate(135deg)}
  .sms{min-width:0}
  /* На телефоне полотна нет, поэтому кнопки обзора не нужны. А выход из
     списка нужен ТЕМ БОЛЕЕ: без него человек заперт в одном представлении. */
  .cvtools [data-zoom],.cvtools .seg-zoom,.cvtools [data-home],
.cvtools [data-back]{display:none}
  /* Липкая полоса съедала пятую часть экрана: заголовок, три счётчика и поле
     поиска висели поверх всего, а список читался в оставшуюся щель. */
  .cvbar{margin:0 8px;padding:10px 14px;position:static}
  .cvnums{gap:10px}
  .cvn{flex-direction:row;gap:5px;align-items:baseline}
  /* Меньше 16px в поле ввода - и Safari на iOS приближает страницу при касании,
     после чего карта уезжает вбок и обратно её не отмотать. А жёсткие 170
     точек рядом с кнопкой «завести документ» не помещались в ширину телефона,
     и полоса разъезжалась на лишнюю строку. */
  .cvfind{font-size:16px;width:auto;flex:1 1 120px;min-width:0}
  /* Место под ответ поиска на телефоне не резервируем: пустые 96 точек
     выталкивали кнопку «завести документ» на отдельную строку, и полоса
     занимала четверть экрана до первой строки списка. */
  .cvbar .cvfound{min-width:0}
  .who{width:100%;justify-content:flex-start}
  /* Состояние отдельной строкой ПОД названием: в 132 точки на телефоне
     «есть, но с дефектом» занимало половину строки, а название ломалось на
     три. Порядком (order) двигаем только показ, разметка та же. */
  .ldoc .lst{width:auto;flex-basis:100%;order:2}
  .ldoc .lhold,.ldoc .lw{order:3}
}

/* ── правка карты: быстрая в карточке и полный экран устройства узла ────────
   Форма живёт ВНУТРИ той же карточки, что и просмотр: чтобы поменять состояние
   документа, уходить с полотна не нужно. Это и есть разница между картой и
   отчётом - отчёт правит тот, кто его писал, карту правит тот, кто работает. */

.wrap.narrow{max-width:760px}
.err{font-size:13px;color:var(--bad-tx);background:var(--bad-bg);
  border-radius:var(--r-ctl);padding:9px 13px;margin:12px 0 0}

.qf{display:block;margin:14px 0 0}
.qf > span{display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:5px}
.qf input[type=text],.qf input[type=date],.qf input[type=number],
.qf select,.qf textarea{width:100%;font:inherit;font-size:13.5px;
  padding:8px 11px;border:1px solid var(--bd2);border-radius:var(--r-ctl);
  background:#fff;color:var(--ink)}
.qf textarea{resize:vertical;line-height:1.5}
.qf input:focus,.qf select:focus,.qf textarea:focus{outline:none;box-shadow:var(--ring)}
.qf.qcheck{display:flex;align-items:center;gap:9px}
.qf.qcheck > span{margin:0;font-family:var(--sans);font-size:13.5px;
  text-transform:none;letter-spacing:0;color:var(--ink)}
.qf .hint{display:block;margin-top:5px;font-size:11.5px;font-style:normal;
  color:var(--ghost);line-height:1.45}

.deps{display:flex;flex-wrap:wrap;gap:6px;max-height:230px;overflow-y:auto;
  padding:10px;border:1px solid var(--bd);border-radius:var(--r-ctl);background:#fff}
.dep1{display:flex;align-items:center;gap:6px;font-size:12.5px;
  padding:4px 9px;border:1px solid var(--bd);border-radius:99px;cursor:pointer}
.dep1:hover{background:rgba(11,11,13,.04)}

.sbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;align-items:center}
.qedit{margin-top:4px}
/* Кнопки формы прибиты к низу карточки. Форма длиннее видимой части карточки:
   при max-height 72vh «Сохранить» и «Отмена» лежали ниже её края, и до них надо
   было догадаться домотать. Кнопка, которой не видно, - это кнопки нет. */
.qedit .sbtns{position:sticky;bottom:0;margin-top:14px;
  padding:12px 0 4px;background:linear-gradient(to bottom,
    rgba(252,252,254,0) 0, rgba(252,252,254,.96) 14%, rgba(252,252,254,.98) 100%)}

/* Папка в списке: третий уровень дерева. Отступом и линией слева, а не
   раскраской - раздел печатают чёрно-белым. Заголовок мелкий и одноцветный:
   папка это полка, а не документ, и спорить с названиями документов за
   внимание она не должна. */
.lfold{margin:10px 0 0;padding-left:12px;border-left:2px solid var(--bd)}
.lfname{display:flex;gap:9px;align-items:baseline;margin:0 0 4px;
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mut)}
.lfn{font-size:10px;color:var(--ghost)}
.lfold .ldocs{margin:0}

/* ══════════════════ ФАЙЛЫ И ЗАМЕТКИ В КАРТОЧКЕ ══════════════════════════
   Цвета здесь нет, как и во всём разделе: раздел печатают чёрно-белым.
   Различаем размером, отступом и словом. */
.sfiles .sv,.snotes .sv{width:100%}
.flist{list-style:none;margin:0 0 10px;padding:0}
.fitem{display:flex;flex-direction:column;gap:2px;padding:8px 0;
  border-bottom:1px solid var(--bd)}
.fitem:last-child{border-bottom:none}
.fname{font-size:13.5px;font-weight:500;color:var(--ink);word-break:break-word}
.fname:hover{text-decoration:underline}
.fmeta{font-family:var(--mono);font-size:10px;color:var(--ghost);letter-spacing:.03em}
.fnote{font-size:12.5px;color:var(--ink2);font-style:italic}
.facts{display:flex;gap:10px;align-items:center;margin-top:3px}
.finline{display:inline}
.flink{font:inherit;font-size:11.5px;color:var(--mut);background:none;border:none;
  padding:0;cursor:pointer;text-decoration:underline}
.flink:hover{color:var(--ink)}
.flink:focus-visible{outline:none;box-shadow:var(--ring)}
/* «Снять» - действие, которое не отменить кнопкой. Отличаем НАЧЕРТАНИЕМ, а не
   красным: в чёрно-белой печати цвет пропадает, а насыщенность остаётся. */
.flink.danger{font-weight:600;color:var(--ink)}
.fempty{display:block;font-size:12.5px;color:var(--mut);line-height:1.45;
  margin-bottom:8px}
.fup{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding-top:9px;
  border-top:1px dashed var(--bd2)}
.ffile{font:inherit;font-size:12px;color:var(--ink2)}
.ffile::file-selector-button{font:inherit;font-size:12px;padding:5px 10px;
  margin-right:9px;border:1px solid var(--bd2);border-radius:var(--r-ctl);
  background:#fff;color:var(--ink);cursor:pointer}
.fcap{font:inherit;font-size:12.5px;padding:6px 10px;border:1px solid var(--bd2);
  border-radius:var(--r-ctl);background:#fff;color:var(--ink);width:100%}
.fcap:focus,.ffile:focus{outline:none;box-shadow:var(--ring)}
.frow{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.flvl{font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mut);display:flex;gap:6px;align-items:center}
.flvl select{font:inherit;font-size:12px;padding:4px 7px;border:1px solid var(--bd2);
  border-radius:var(--r-ctl);background:#fff;color:var(--ink);text-transform:none;
  letter-spacing:0}

.nitem{display:flex;flex-direction:column;gap:2px;padding:7px 0;
  border-bottom:1px solid var(--bd)}
.nitem:last-of-type{border-bottom:none}
.nhead{font-family:var(--mono);font-size:10px;color:var(--ghost);letter-spacing:.03em}
.nbody{font-size:13px;color:var(--ink2);line-height:1.5;white-space:pre-wrap;
  word-break:break-word}
.nadd{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding-top:9px;
  border-top:1px dashed var(--bd2)}
.nadd textarea{font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--bd2);
  border-radius:var(--r-ctl);background:#fff;color:var(--ink);resize:vertical;
  line-height:1.45;width:100%}
.nadd textarea:focus{outline:none;box-shadow:var(--ring)}
.nadd .btn{align-self:flex-start;margin-top:0}

/* ЧЕМ КОНЧИЛОСЬ. Цвета в разделе нет: успех и отказ различаются СЛОВОМ и
   толщиной левой черты, а не зелёным против красного. На чёрно-белой печати, в
   ксероксе и при любом виде цветовой слепоты читается одинаково. */
.sflash{margin:0 0 14px;padding:9px 12px;font-size:12.5px;line-height:1.45;
  color:var(--ink2);background:rgba(11,11,13,.04);border-radius:var(--r-ctl);
  border-left:2px solid var(--bd2)}
.sflash[data-flash="no"]{color:var(--ink);font-weight:500;
  border-left:5px solid var(--ink)}
/* Полоса стоит В ПОТОКЕ, между полосой ответа и полотном. Поверх полотна она
   вставала ровно на кнопку «вернуться к карте» (та же точка, та же высота) и
   закрывала её собой, а на телефоне и в режиме «списком» полотно скрыто
   целиком - и признак пропадал вместе с ним, хотя правка с телефона работает.
   Высоту полотна скрипт считает от его фактического верха, поэтому лишняя
   строка сверху ничего не ломает. */
.cvflash{margin:10px 16px 0;padding:9px 15px;font-size:12.5px;line-height:1.45;
  color:var(--ink2);border-radius:var(--r-card);background:var(--glass2);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow-panel);
  border-left:2px solid var(--bd2)}
.cvflash[data-flash="no"]{color:var(--ink);font-weight:500;
  border-left:5px solid var(--ink)}

/* Отказ на странице устройства узла. Тот же монохром: раздел печатают. */
.errmono{font-size:13px;color:var(--ink);background:rgba(11,11,13,.05);
  border-radius:var(--r-ctl);padding:9px 13px;margin:12px 0 0;
  border-left:5px solid var(--ink);font-weight:500}
.panel.danger{border-color:var(--bd2)}
.panel.danger .psub{color:var(--ink2)}

/* Держащий узел на средней крупности - лёгкая подложка, НЕ заливка чёрным.
   Заливка currentColor красила коробку в тот же цвет, что и текст внутри: на
   скриншоте владельца это выглядело как зацензуренный документ. На обзоре
   документов теперь нет вовсе, там отвечает счёт «держат N» у ветки. */
/* Держащий узел помечаем ТОЛЩИНОЙ рамки, а не заливкой. Заливка перебивала
   прозрачность у состояния «нет» (по специфичности и порядку в файле), и
   «нет» переставало отличаться от «есть с дефектом» - то есть пометка
   важности стирала пометку состояния. */
.cv.z-mid .doc.blocker rect,.cv.z-near .doc.blocker rect{stroke-width:3.2}
.cv.z-far .branch.br-holds rect{stroke-width:4}

/* Поиск: совпадения остаются, остальное гаснет. Гасим, а не прячем - форма
   карты должна оставаться узнаваемой, иначе теряешься. */
.doc.nomatch,.branch.nomatch{opacity:.34}
.doc.hit rect,.branch.hit rect{stroke-width:3.4}
.cvfound{font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:var(--mut);min-width:96px}

/* Возврат к карте. Появляется сам, когда центр ушёл за край, - и исчезает,
   когда вернулся. Кнопка, которая висит всегда, читается как деталь оформления
   и её перестают замечать; кнопка, которая появилась, читается как ответ. */
.backhome{position:absolute;left:50%;top:18px;transform:translateX(-50%);
  z-index:20;font:inherit;font-size:13px;padding:8px 16px;border-radius:99px;
  border:1px solid var(--bd2);background:var(--glass2);color:var(--ink);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--shadow-float);cursor:pointer}
.backhome:hover{background:#fff}

/* Карточка на узком экране ложится ВНИЗ во всю ширину, а не встаёт сбоку.
   Сбоку она занимает 400 из 800 пикселей - то есть ровно половину полотна, - и
   накрывает собой тот самый узел, ради которого её открыли. */
@media (max-width:960px){
  /* Возню, растяжку и прилипание к краю на узком экране выключаем целиком:
     карточка и так занимает всю ширину, двигать её некуда, а тянущийся
     уголок только мешает прокрутке пальцем. !important здесь нарочно - место
     карточке задаёт скрипт инлайн-стилями, и перебить его больше нечем. */
  .side{left:8px !important;right:8px !important;top:auto !important;
    bottom:8px !important;width:auto !important;height:auto !important;
    max-height:46vh;resize:none}
  .carddock .side{top:auto !important;max-height:46vh}
  /* Кнопки карточки прибиты к её низу. Карточка ложится внизу экрана на 46
     процентов высоты, и «Закрыть», «Править», «Устройство» оказывались ниже
     видимой части: надо было догадаться прокручивать ВНУТРИ карточки, а не
     страницу. Кнопка, которой не видно, - это кнопки нет. */
  .side > .sbtns{position:sticky;bottom:-20px;margin-top:12px;
    padding:10px 0 12px;background:linear-gradient(to bottom,
      rgba(255,255,255,0) 0, rgba(253,253,255,.96) 18%, rgba(253,253,255,.99) 100%)}
  .scd{display:none}
  .shead{cursor:default}
}

/* Переключатель обзора: два положения, подсвечено текущее. Это индикатор
   состояния, а не команда, поэтому у активного сегмента фон, а не рамка -
   рамку в этом разделе уже носит состояние документа. */
.seg{display:inline-flex;gap:0;border:1px solid var(--bd2);border-radius:var(--r-ctl);
  overflow:hidden}
.seg .btn{border:0;border-radius:0;box-shadow:none}
.seg .btn + .btn{border-left:1px solid var(--bd2)}
.seg .btn[aria-pressed="true"]{background:var(--ink);color:#fff}
.cvtools [data-back][disabled]{opacity:.35;cursor:default}

/* Подпись текущей крупности. Висит в углу полотна постоянно. */
.cvlevel{position:absolute;left:14px;top:10px;margin:0;font-family:var(--mono);
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);
  pointer-events:none;padding:5px 11px;border-radius:99px;background:var(--glass2);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.6)}

/* Строка списка, не попавшая в поиск. Гасим так же, как узлы полотна: список
   это то же представление тех же данных, и вести себя оно обязано так же. */
.ldoc.nomatch{opacity:.42}
/* Ветка целиком без совпадений гаснет вместе со строками: иначе семнадцать
   нетронутых заголовков заставляют искать три подсвеченные строки глазами. */
.panel.lb.nomatch{opacity:.3}

/* ── БАЗА КОНТАКТОВ ──────────────────────────────────────────────────────
   Цвета в разделе нет и не будет: состояние держится на слове, а не на
   оттенке. «Можно писать», «связан», «отписался» - подписи, и они читаются
   одинаково на любом экране и у любого человека. */

/* Полоса заведения: имя обязательно, остальное по желанию. Контакт с визитки
   должен заводиться за полминуты, а дозаполняться потом в карточке. */
.newbar{margin-top:16px;padding-top:16px;border-top:1px solid var(--bd)}
.nb-line{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
/* СТОЛБИКОМ, А НЕ СТРОКОЙ. Подпись и орган внутри <label> шли строкой, и под
   органом оставалась щель строки текста - разная у списка и у кружков. Из-за
   неё подпись «метки» стояла на два с половиной сантиметра ниже подписи
   «можно ли писать», а кнопка проваливалась под обе. */
.nb-f{flex:1 1 170px;min-width:0;display:flex;flex-direction:column}
.nb-wide{flex:2 1 240px}
.nb-bottom{margin-top:12px}
.nb-tags{flex:3 1 320px;min-width:0}
.nb-tagfind{max-width:200px;margin-bottom:8px}
.nb-line .fl{display:block;margin-bottom:4px}
/* Одна высота у всех органов полосы. Без неё ряд «кружки - список - кнопка»
   выравнивается по трём разным линиям, и это видно с первого взгляда. */
.nb-line .fi,.nb-line .btn{height:40px}
/* НИЖНИЙ ОТСТУП БАЗОВОГО ПОЛЯ - ПРИЧИНА ВСЕХ ПЕРЕКОСОВ В РЯДАХ.
   У .fi стоит margin-bottom:14px: он задуман для форм в столбик, где поля идут
   одно под другим. В горизонтальном ряду этот отступ становится невидимой
   подставкой под органом - поле уезжает вверх относительно соседей, а кнопка
   рядом с ним выглядит проваленной. Отсюда и «всё на разном уровне»: ни одно
   выравнивание не помогало, потому что выравнивались коробки, а не то, что
   человек видит. Гасим отступ везде, где органы стоят в строку или в сетку. */
.nb-line .fi,.filters .fi,.touchform .fi,.touchnext .fi,
.chan .fi,.ff .fld .fi,.flt-row .fi{margin-bottom:0}
.nb-tags .chips{min-height:40px;align-items:center}
.nb-line .btn{flex:none}

/* Метки-чипы. Обычные галочки: без скрипта они просто все на месте и
   работают, со скриптом - отбираются набором. */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:0;padding:6px 12px;
  border:1px solid var(--bd2);border-radius:999px;background:#fff;
  font-size:12.5px;cursor:pointer;user-select:none;line-height:1.2}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip:hover{background:rgba(11,11,13,.04)}
/* Отмеченный кружок. Классом .on, а не только через :has(): подсветка выбора -
   не украшение, а единственный признак того, что отбор применён, и в браузере
   без :has() экран молча врал бы, что не отобрано ничего. Класс ставит скрипт;
   у меток-ссылок он стоит прямо в разметке и работает без скрипта вовсе. */
.chip.on,.chip:has(input:checked){background:var(--ink);color:#fff;
  border-color:transparent}
a.chip{text-decoration:none;color:inherit}
a.chip.on{color:#fff}
.chip:has(input:focus-visible){box-shadow:var(--ring)}
.chip:has(input:disabled){opacity:.5;cursor:default}
.chip-add{font-family:var(--mono);font-size:11px;color:var(--mut)}

/* Строка совпадений. Появляется по ходу набора номера и отвечает на вопрос
   «а он у нас уже есть» ДО заведения, а не после. */
.matchline{margin:10px 0 0;font-family:var(--mono);font-size:11.5px;
  color:var(--ink2);line-height:1.5}
.matchline a{color:var(--ink)}

/* ОТБОР ТРЕМЯ СЛОЯМИ, а не одним рядом из шести списков.

   Ряд был ровно тем случаем, когда всё одного размера и потому ничего не
   видно: поиск, метка и редкий «в СРМ: продюсер» стояли как равные, и глаз
   каждый раз перечитывал их все. Теперь сверху то, чем пользуются постоянно,
   под ним метки нажатием, а редкое убрано под «ещё отбор» - и открывается
   само, если им всё-таки пользуются. */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:18px 0 0}
/* Высота задана явно у поля, списка и кнопки разом: подобранные по отступам
   они расходились на несколько пикселей, и ряд «поиск - порядок - Найти»
   стоял ступенькой. */
.filters .fi,.filters .btn{height:36px}
.filters .fi{width:auto;flex:0 1 auto;padding:8px 11px;font-size:13px}
.filters .btn{padding-top:0;padding-bottom:0}
.flt-q{flex:1 1 300px;min-width:0}
.flt-sort{flex:0 0 auto;min-width:12.5rem}
.flt-tags{flex:1 1 100%;display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.flt-more{flex:1 1 100%;margin-top:2px}
.flt-more summary{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--mut);cursor:pointer;padding:2px 0;list-style:none;width:max-content}
.flt-more summary::-webkit-details-marker{display:none}
.flt-more summary::before{content:"[ + ] "}
.flt-more[open] summary::before{content:"[ - ] "}
.flt-more summary:hover{color:var(--ink)}
.flt-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}

/* Сколько человек ждут звонка. Одно нажатие из любого места экрана - и число
   считается по всей базе, а не по текущему отбору: иначе оно исчезало бы ровно
   тогда, когда человек отобрал что-то другое, то есть когда напомнить и надо. */
.dueline{margin:12px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;border:1px solid var(--bd2);border-radius:var(--r-ctl);
  background:#fff;font-size:13px}
.dueline b{font-family:var(--mono);font-size:15px;font-weight:600}
.dueline .m{color:var(--mut);font-size:12.5px}

/* Договорённость о созвоне в форме записи разговора: она там и рождается. */
/* Договорённость - ОТДЕЛЬНОЙ СТРОКОЙ под записью разговора. Без указания
   занять всю ширину она вставала пятым органом в тот же ряд и уезжала вправо,
   на свою собственную высоту: подпись, поле даты и «о чём» висели в воздухе
   рядом с кнопкой «Записать». */
.touchnext{flex:1 1 100%;display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-top:12px;padding-top:12px;border-top:1px dashed var(--bd)}
.touchform .fi,.touchform .btn{height:38px}
.touchnext .fl{flex:none;margin:0}
.touchnext input[type=date]{flex:0 0 auto;width:auto}
.touchnext input[name=next_touch_note]{flex:1 1 220px;min-width:0}

/* Две коробки. На узком экране встают одна под другой: половина ширины
   телефона - это не коробка, а колонка из переносов. */
.boxes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media(max-width:900px){.boxes{grid-template-columns:1fr}}
.box{padding:18px 20px;border-radius:var(--r-card);background:var(--glass2);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--bd);box-shadow:var(--shadow-panel);min-width:0}
.box-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.box-head h3{font-size:17px;font-weight:600;margin:0;letter-spacing:-.01em}
.box-cnt{font-family:var(--mono);font-size:20px;color:var(--ghost);
  font-variant-numeric:tabular-nums;line-height:1}
.box .rows{margin-top:12px}
.box .empty{padding:34px 20px;font-size:13px}
.boxfoot{margin:10px 2px 0;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;color:var(--ghost);display:flex;gap:12px;flex-wrap:wrap}
.rw-link{text-decoration:none;color:inherit}
.rw-link:hover{background:rgba(11,11,13,.03)}

/* Выгрузка: колонки выбирает человек. Книга из двадцати столбцов, где нужны
   три, - это лист, который нельзя отдать никому, потому что в нём лишнее. */
.exp summary{font-size:14px;font-weight:600;cursor:pointer;margin-bottom:6px}
.exp .psub{margin-bottom:12px}
.expcols{max-width:100%}

/* Карточка человека. */
.cardmarks{display:flex;gap:6px;flex-wrap:wrap;flex:none}
.ff{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.fld{min-width:0}
.fld-wide{grid-column:span 2}
@media(max-width:640px){.fld-wide{grid-column:span 1}}
.fld .fl{display:block;margin-bottom:4px}
.fld .hint{display:block;margin-top:4px;font-family:var(--mono);font-size:10.5px;
  color:var(--ghost)}
.fi-nar{width:auto;min-width:170px}
.cardform textarea.fi{resize:vertical;font-family:inherit}

/* Способы связи. Их несколько - два номера и три почты у человека обычное
   дело, и «телефон2, телефон3» отдельными полями всегда кончается тем, что
   четвёртый писать некуда. */
.chans{display:flex;flex-direction:column;gap:8px}
.chan{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chan input[type=radio]{flex:none;margin:0}
.chan select.fi{flex:0 0 120px;width:auto}
.chan input.fi{flex:1 1 180px;min-width:0}

.touchform{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.touchform input.fi{flex:1 1 260px;min-width:0}
.who-min{font-family:var(--mono);font-size:10px;color:var(--ghost);margin-left:8px}

/* НЕОБРАТИМОЕ ПОДТВЕРЖДАЕТСЯ НА СТРАНИЦЕ, А НЕ ОКОШКОМ БРАУЗЕРА.
   Окошко confirm() браузер гасит сам - и после пары показов, и по галочке
   «не показывать больше диалоги». Погашенное окошко возвращает «нет», нажатие
   молча отменяется, и кнопка выглядит сломанной. Здесь второй шаг - обычная
   раскрывашка: работает и без скриптов, и когда диалоги запрещены. */
.danger{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;
  margin-top:14px;max-width:560px}
.danger-one{flex:1 1 240px;min-width:0}
.danger-one form{margin:0}
/* ОБЕ КНОПКИ ОДНОЙ ВЫСОТЫ И НА ОДНОЙ ЛИНИИ.
   Подпись раскрывашки - это <summary>, а не <button>: собственные отступы
   .btn.sm перебивали её правило по весу селектора (два класса против одного),
   и она вырастала на полтора сантиметра выше соседки. Задаём обе разом и с
   запасом по весу. */
.danger .danger-one > .btn,
.danger .danger-one > .danger-sum{height:40px;line-height:38px;padding:0 14px;
  display:block;width:100%;text-align:center;margin-top:0}
.danger-sum{list-style:none;cursor:pointer}
.danger-sum::-webkit-details-marker{display:none}
.danger-one[open] .danger-sum{background:rgba(11,11,13,.05)}
.danger-box{margin-top:10px;padding:12px 14px;border:1px solid var(--bd2);
  border-radius:var(--r-ctl);background:#fff}
.danger-box p{margin:0 0 10px;font-size:12.5px;color:var(--ink2);line-height:1.5}
/* Обращение рядом с полным именем: в списке нужны оба. Показывали только
   обращение, и человек, найденный по фамилии, появлялся строкой, в которой
   этой фамилии нет вовсе. */
.alias{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--mut)}


/* ---------- витрина ботов ----------

   Раздел монохромный, как и всё пространство. Единственное, что здесь
   выделяется тоном, - подстановка вида {progress} внутри текста: её нельзя
   потерять при правке, и она обязана быть заметна в сплошной строке.
   Выделяем её НЕ цветом, а фоном и рамкой: цвета в разделе нет. */

.bstats{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.bstats > div{flex:1 1 96px;padding:10px 13px;border:1px solid var(--bd);
  border-radius:var(--r-ctl);background:rgba(255,255,255,.5)}
.bstats b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.15}
.bstats span{display:block;font-size:11.5px;color:var(--mut);margin-top:2px}
.bnote{font-size:12.5px;color:var(--mut);margin:12px 0 0}

.blist{margin-top:6px}
.brow{display:flex;align-items:center;gap:14px;padding:12px 4px;
  border-top:1px solid var(--bd);text-decoration:none;color:inherit}
.brow:first-child{border-top:0}
.brow:hover{background:rgba(255,255,255,.55)}
.brow:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-ctl)}
.bmain{min-width:0;flex:1 1 240px}
.bt{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.bd{display:block;font-size:12.5px;color:var(--mut);margin-top:2px;line-height:1.45}
.bmono{font-family:var(--mono);font-size:11px}
.bnums{display:flex;flex-wrap:wrap;gap:6px;flex:none;max-width:52%}
.bnum{font-size:11px;color:var(--ink2);border:1px solid var(--bd);
  border-radius:999px;padding:2px 9px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.bnum b{font-weight:600}
.bnum.weak{color:var(--mut);border-style:dashed}
/* «вшито в код» - не украшение, а признак работы, которой ещё не было.
   Поэтому обводка плотнее обычной, но по-прежнему без цвета. */
.bnum.wired{border-color:var(--bd2);color:var(--ink)}
.bnum.ph{font-family:var(--mono);font-size:10.5px;background:rgba(11,11,13,.05)}
.bgo{display:flex;align-items:center;gap:10px;flex:none}
.btos{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;max-width:260px}
.bto{font-size:11px;color:var(--ink2);border:1px solid var(--bd);border-radius:7px;
  padding:2px 8px;text-decoration:none;white-space:nowrap}
a.bto:hover{border-color:var(--bd2);color:var(--ink)}
.bto.weak{color:var(--mut);border-style:dashed}
.bchev{color:var(--ghost);flex:none}

/* --- экран: телефон и разбор --- */
.bsplit{display:grid;grid-template-columns:340px minmax(0,1fr);gap:14px;
  align-items:start}
@media(max-width:900px){.bsplit{grid-template-columns:1fr}}
.bphone{padding:14px 14px 16px}
.pbar{display:flex;align-items:center;gap:9px;padding:0 2px 10px;
  border-bottom:1px solid var(--bd);margin-bottom:12px}
.pav{width:24px;height:24px;border-radius:50%;background:var(--ink);flex:none}
.pname{font-size:13px;font-weight:600}
.pnote{margin-left:auto;font-size:11px;color:var(--mut)}
.bubble{background:var(--bg2);border-radius:14px;padding:12px 13px;font-size:13px;
  line-height:1.5;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.bubble.weak{color:var(--mut);font-style:italic;white-space:normal}
.bubble b,.bubble strong{font-weight:600}
.bubble code,.bubble pre{font-family:var(--mono);font-size:12px}
.bubble pre{white-space:pre-wrap;margin:6px 0}
.bgap{height:6px}
.ph{font-family:var(--mono);font-size:11.5px;background:rgba(11,11,13,.07);
  border:1px solid var(--bd);border-radius:5px;padding:0 4px}
.bkb{margin-top:9px;display:grid;gap:6px}
.kbtn{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.75);
  border:1px solid var(--bd);border-radius:var(--r-ctl);padding:9px 11px;
  font-size:12.5px;text-decoration:none;color:inherit;line-height:1.35}
a.kbtn:hover{border-color:var(--bd2);background:#fff}
.kbtn:focus-visible{outline:none;box-shadow:var(--ring)}
.kbl{min-width:0;flex:1;word-wrap:break-word;overflow-wrap:anywhere}
.kgo{color:var(--ghost);flex:none;font-size:12px}
.kbtn.dead{border-style:dashed;color:var(--mut)}

.bside{display:grid;gap:14px;min-width:0}
.bblock{margin-top:0;padding:15px 17px}
.blab{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut);margin-bottom:9px;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.bkey{font-family:var(--mono);font-size:10.5px;letter-spacing:0;
  text-transform:none;color:var(--ink2);border:1px solid var(--bd);
  border-radius:6px;padding:1px 7px}
.bfield{background:rgba(255,255,255,.72);border:1px solid var(--bd);
  border-radius:var(--r-ctl);padding:10px 12px;font-size:12.8px;line-height:1.55;
  white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;
  max-height:260px;overflow-y:auto}
.bmeta{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.bwarn{font-size:12px;color:var(--ink2);border-left:2px solid var(--bd2);
  padding-left:10px;margin:10px 0 0;line-height:1.5}
.bwhere{font-family:var(--mono);font-size:10.5px;color:var(--ghost);margin:9px 0 0}

.btable{display:grid;gap:2px}
.btrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--bd)}
.btrow:first-child{border-top:0}
@media(max-width:640px){.btrow{grid-template-columns:1fr;gap:5px}}
.bcell{min-width:0;font-size:12.5px}
.bcell.bl{font-weight:600;word-wrap:break-word;overflow-wrap:anywhere}
.bcell.br{display:flex;flex-wrap:wrap;gap:5px}
.bcell.bm{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}


/* ---------- витрина ботов: правка ---------- */

.bform{display:block}
.bform .bfield{width:100%;font:inherit;font-size:12.8px;line-height:1.55;
  resize:vertical;min-height:120px}
.bform textarea.bfield:focus-visible{outline:none;box-shadow:var(--ring)}
.bctrl{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.b1,.b2{font:inherit;font-size:12.5px;font-weight:600;border-radius:var(--r-ctl);
  padding:8px 15px;border:1px solid var(--ink);cursor:pointer}
.b1{background:var(--ink);color:#fff}
.b2{background:transparent;color:var(--ink)}
.b1.sm,.b2.sm{padding:5px 10px;font-size:11.5px}
.b1:focus-visible,.b2:focus-visible{outline:none;box-shadow:var(--ring)}

/* строка кнопки: поле подписи слева, куда ведёт справа */
.brow2{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:8px 0;border-top:1px solid var(--bd)}
.brow2:first-of-type{border-top:0}
.bline{display:flex;gap:6px;align-items:center;flex:1 1 260px;min-width:0}
.binp{flex:1;min-width:0;font:inherit;font-size:12.5px;padding:7px 10px;
  border:1px solid var(--bd);border-radius:var(--r-ctl);
  background:rgba(255,255,255,.72);color:var(--ink)}
.binp:focus-visible{outline:none;box-shadow:var(--ring)}


/* ---------- витрина ботов: макеты ----------

   Цвета здесь по-прежнему нет. Состояние макета - включён он или черновик -
   несут ТРИ носителя сразу: слово («черновик»), плотность обводки метки и
   приглушённость всей строки. Один носитель на состояние не годится: в
   монохроме приглушённость легко списать на вкус вёрстки, а ошибка тут стоит
   дорого - человек правит черновик, считая, что правит живого бота. */

.bbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px 17px}
.bbarL{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0;
  flex:1 1 320px}
.bbarL .blab{margin:0}
.bbarN{font-size:14px;font-weight:600;letter-spacing:-.01em}
.bbarR{display:flex;align-items:center;gap:9px;flex-wrap:wrap;flex:none}
.bbarR .bline{flex:none}

.bsel{font:inherit;font-size:12.5px;padding:6px 9px;border:1px solid var(--bd);
  border-radius:var(--r-ctl);background:rgba(255,255,255,.72);color:var(--ink);
  max-width:260px}
.bsel:focus-visible{outline:none;box-shadow:var(--ring)}

.bgrid2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
@media(max-width:640px){.bgrid2{grid-template-columns:1fr}}
.bform .binp{width:100%;margin-top:8px}
.bgrid2 .binp{margin-top:0}

/* строка списка макетов - не ссылка целиком: внутри свои кнопки и своя
   ссылка на название, и вложенная ссылка в ссылке браузером не берётся */
.brow.static{cursor:default}
.brow.static:hover{background:transparent}
.brow.off .bt a,.brow.off .bd{color:var(--mut)}
.brow .bt a{color:inherit;text-decoration:none;border-bottom:1px solid var(--bd)}
.brow .bt a:hover{border-color:var(--ink)}
a.bchev{text-decoration:none}

/* четыре колонки: отметка, слово, метки, действие */
.btrow.bt4{grid-template-columns:auto minmax(0,1fr) auto auto}
@media(max-width:760px){.btrow.bt4{grid-template-columns:auto minmax(0,1fr)}}
.btrow.bt4 .bd{margin-top:3px;font-weight:400}
.btrow input[type=checkbox]{width:15px;height:15px;accent-color:var(--ink);
  cursor:pointer}