/* ═══════════════════════════════════════════════════════════════════
   Справочник сотрудника. Всё вложено в .cp-handbook, чтобы не
   пересекаться со стилями остального приложения.
   ═══════════════════════════════════════════════════════════════════ */

.cp-handbook{
  --hb-serif:'Newsreader',Georgia,'Times New Roman',serif;
  --hb-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--cp-text);
  font-size:15.5px;
  line-height:1.65;
}

/* ── Раскладка: оглавление слева, текст справа ── */
.cp-hb-layout{ display:grid; grid-template-columns:242px minmax(0,1fr); gap:32px; align-items:start; }
/* Без этого широкая схема распирает колонку и текст уезжает за край экрана */
.cp-hb-layout > *{ min-width:0; }
.cp-hb-body{ min-width:0; overflow-wrap:anywhere; }
.cp-hb-toc{ position:sticky; top:0; align-self:start; max-height:calc(100vh - 48px); overflow-y:auto; padding-right:4px; }
.cp-hb-toc-title{ font-size:11px; font-weight:800; letter-spacing:.9px; text-transform:uppercase;
  color:var(--cp-faint); margin:0 0 10px 10px; }
.cp-hb-toc ol{ list-style:none; margin:0; padding:0; counter-reset:hbchapter; }
.cp-hb-toc li{ counter-increment:hbchapter; }
.cp-hb-toc a{ display:flex; gap:9px; padding:7px 10px; border-radius:9px; text-decoration:none;
  color:#344054; font-size:13.5px; font-weight:600; line-height:1.35; transition:background .12s,color .12s; }
.cp-hb-toc a::before{ content:counter(hbchapter); color:var(--cp-faint); font-family:var(--hb-mono);
  font-size:11px; font-weight:500; min-width:14px; padding-top:2px; }
.cp-hb-toc a:hover{ background:#f6f7f9; color:var(--cp-text); }
.cp-hb-toc a.on{ background:#eef2ff; color:var(--cp-accent); }
.cp-hb-toc a.on::before{ color:var(--cp-accent); }

/* ── Текст ── */
.cp-handbook section{ padding-top:34px; scroll-margin-top:16px; }
.cp-handbook section:first-child{ padding-top:4px; }
.cp-handbook h2{ font-family:var(--hb-serif); font-weight:500; font-size:30px; line-height:1.15;
  letter-spacing:-.3px; margin:0 0 8px; color:var(--cp-text); }
.cp-handbook .h2-num{ font-family:var(--hb-mono); font-size:11.5px; font-weight:500;
  color:var(--cp-accent); display:block; margin-bottom:9px; letter-spacing:.5px; }
.cp-handbook h3{ font-size:16px; font-weight:800; letter-spacing:-.2px; margin:30px 0 10px; }
.cp-handbook h4{ font-size:14px; font-weight:700; margin:20px 0 6px; }
.cp-handbook p{ margin:0 0 13px; max-width:68ch; }
.cp-handbook .sub{ color:var(--cp-muted); font-size:15px; max-width:66ch; margin:0 0 20px; }
.cp-handbook ul{ padding-left:20px; margin:0 0 16px; max-width:68ch; }
.cp-handbook li{ margin-bottom:6px; }
.cp-handbook code{ font-family:var(--hb-mono); font-size:.86em; background:#f4f5f9;
  border:1px solid #eef0f6; border-radius:5px; padding:1px 5px; }
.cp-handbook .num{ font-variant-numeric:tabular-nums; }

/* ── Схемы ── */
.cp-handbook .diagram{ background:#fff; border:1px solid var(--cp-border); border-radius:14px;
  padding:20px 16px; margin:0 0 8px; overflow-x:auto; box-shadow:0 1px 3px rgba(16,24,40,.06); }
.cp-handbook .diagram pre.mermaid{ margin:0; background:none; text-align:center; border:none; padding:0; }
.cp-handbook .diagram pre.mermaid:not([data-processed]){
  font-family:var(--hb-mono); font-size:12px; color:var(--cp-faint); white-space:pre-wrap; text-align:left;
}
.cp-handbook .caption{ font-size:13px; color:var(--cp-muted); margin:0 0 24px; font-weight:600; }
.cp-hb-scrollhint{ font-size:12px; color:var(--cp-faint); font-weight:600; margin:-2px 0 22px; }
.cp-hb-diagfail{ padding:14px 16px; border-radius:12px; background:var(--cp-warn-bg);
  border:1px solid #fedf89; color:var(--cp-warn); font-size:13px; font-weight:600; margin-bottom:16px; }

/* ── Карточки ── */
.cp-handbook .grid{ display:grid; gap:14px; margin-bottom:20px; }
.cp-handbook .grid-2{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.cp-handbook .grid-3{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.cp-handbook .card,
.cp-handbook .role{ background:#fff; border:1px solid var(--cp-border); border-radius:14px;
  padding:18px 20px; box-shadow:0 1px 3px rgba(16,24,40,.06); }
.cp-handbook .role-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.cp-handbook .role-badge{ font-size:11px; font-weight:800; padding:3px 10px; border-radius:7px;
  background:#eef2ff; color:var(--cp-accent); white-space:nowrap; }
.cp-handbook .role-badge.r-adm{ background:var(--cp-err-bg); color:var(--cp-err); }
.cp-handbook .role-badge.r-sm{ background:#f4f4f5; color:var(--cp-muted); }
.cp-handbook .role-badge.r-mgr{ background:#f4f4f5; color:#344054; }
.cp-handbook .role-badge.r-ex{ background:var(--cp-ok-bg); color:var(--cp-ok); }
.cp-handbook .role p{ font-size:14px; margin:0 0 10px; color:#3d4759; }
.cp-handbook .role ul{ font-size:13.5px; padding-left:18px; margin:0; color:var(--cp-muted); }
.cp-handbook .role li{ margin-bottom:4px; }

/* ── Таблицы ── */
.cp-handbook .tablewrap{ border:1px solid var(--cp-border); border-radius:14px; overflow:hidden;
  box-shadow:0 1px 3px rgba(16,24,40,.06); margin:0 0 20px; background:#fff; }
.cp-handbook .tablescroll{ overflow-x:auto; }
.cp-handbook table{ border-collapse:collapse; width:100%; font-size:14px; }
.cp-handbook th{ text-align:left; background:#fafbfc; color:var(--cp-faint); font-size:11px;
  font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:12px 16px;
  border-bottom:1px solid var(--cp-border); white-space:nowrap; }
.cp-handbook td{ padding:13px 16px; border-bottom:1px solid #f2f4f7; vertical-align:top; color:#3d4759; }
.cp-handbook tr:last-child td{ border-bottom:none; }
.cp-handbook td strong{ color:var(--cp-text); }

/* ── Плашки ── */
.cp-handbook .chip{ display:inline-block; font-size:11.5px; font-weight:700; padding:2px 9px;
  border-radius:6px; white-space:nowrap; }
.cp-handbook .c-ok{ background:var(--cp-ok-bg); color:var(--cp-ok); }
.cp-handbook .c-wait{ background:var(--cp-warn-bg); color:var(--cp-warn); }
.cp-handbook .c-stop{ background:var(--cp-err-bg); color:var(--cp-err); }
.cp-handbook .c-acc{ background:#eef2ff; color:var(--cp-accent); }

/* ── Заметки ── */
.cp-handbook .note{ border-radius:12px; padding:14px 17px; margin:0 0 20px; font-size:14.5px;
  border:1px solid var(--cp-border); background:#f7f8fa; max-width:68ch; }
.cp-handbook .note p:last-child{ margin-bottom:0; }
.cp-handbook .note-title{ font-weight:800; font-size:13px; margin-bottom:4px; display:block; }
.cp-handbook .n-warn{ background:var(--cp-warn-bg); border-color:#fedf89; color:var(--cp-warn); }
.cp-handbook .n-stop{ background:var(--cp-err-bg); border-color:#fecdca; color:var(--cp-err); }
.cp-handbook .n-ok{ background:var(--cp-ok-bg); border-color:#a6f4c5; color:var(--cp-ok); }

/* ── Шаги ── */
.cp-handbook ol.steps{ list-style:none; counter-reset:hbstep; padding:0; margin:0 0 22px; max-width:68ch; }
.cp-handbook ol.steps > li{ counter-increment:hbstep; position:relative; padding-left:42px; margin-bottom:17px; }
.cp-handbook ol.steps > li::before{ content:counter(hbstep); position:absolute; left:0; top:-1px;
  width:27px; height:27px; border-radius:9px; background:#eef2ff; color:var(--cp-accent);
  font-family:var(--hb-mono); font-size:13px; display:flex; align-items:center; justify-content:center; }
.cp-handbook ol.steps h4{ margin:0 0 3px; }
.cp-handbook ol.steps p{ margin:0; font-size:14.5px; color:#3d4759; }

/* ── Расчёт ── */
.cp-handbook .calc{ background:#fff; border:1px solid var(--cp-border); border-radius:14px;
  overflow:hidden; box-shadow:0 1px 3px rgba(16,24,40,.06); margin:0 0 20px; max-width:560px; }
.cp-handbook .calc-row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:12px 20px; border-bottom:1px solid #f2f4f7; font-size:14.5px; }
.cp-handbook .calc-row:last-child{ border-bottom:none; }
.cp-handbook .calc-row .k{ color:var(--cp-muted); }
.cp-handbook .calc-row .v{ font-family:var(--hb-mono); font-size:14px; color:var(--cp-text); white-space:nowrap; }
.cp-handbook .calc-row.total{ background:#fafbfc; font-weight:800; }
.cp-handbook .calc-row.total .k{ color:var(--cp-text); }
.cp-handbook .calc-row .hint{ display:block; font-size:12px; color:var(--cp-faint); font-weight:500;
  font-family:inherit; }

/* ── Словарь и подвал ── */
.cp-handbook dl{ margin:0; max-width:68ch; }
.cp-handbook dt{ font-weight:800; font-size:14.5px; margin-top:15px; }
.cp-handbook dd{ margin:3px 0 0; color:#3d4759; font-size:14.5px; }
.cp-handbook .foot{ margin-top:52px; padding-top:20px; border-top:1px solid var(--cp-border);
  font-size:13px; color:var(--cp-faint); max-width:68ch; }

@media (max-width:1100px){
  .cp-hb-layout{ grid-template-columns:1fr; gap:0; }
  .cp-hb-toc{ position:static; max-height:none; margin-bottom:22px;
    border-bottom:1px solid var(--cp-border); padding-bottom:16px; }
  .cp-hb-toc ol{ display:flex; flex-wrap:wrap; gap:5px; }
  .cp-hb-toc a{ border:1px solid var(--cp-border); background:#fff; }
}
@media (max-width:700px){
  .cp-handbook h2{ font-size:25px; }
  .cp-handbook .grid-2,.cp-handbook .grid-3{ grid-template-columns:1fr; }
  .cp-handbook .diagram{ padding:14px 10px; }
  /* mermaid вписывает схему инлайновым max-width и делает её нечитаемой на телефоне.
     Возвращаем натуральный размер — карточка прокручивается вбок. */
  .cp-hb-toc a{ font-size:13px; }
}