/* ДНЖ · днж-практики.рф · toc.css (редизайн 2026)
   Конструктор теории изменений: стартовая страница, экран шага с вопросом,
   панель обоснованности, вертикальная схема связей.
   Требует tokens.css. Подключается из index.html. */

/* ───────── старт ───────── */
.toc-hero{
  background:var(--grad-hero); color:#fff; border-radius:var(--r-lg);
  padding:40px 44px 34px; margin-bottom:18px; position:relative; overflow:hidden;
  box-shadow:var(--shadow-panel);
}
.toc-hero::after{
  content:""; position:absolute; right:-120px; top:-160px; width:520px; height:520px;
  background:radial-gradient(circle, rgba(255,93,0,.4) 0%, transparent 68%); pointer-events:none;
}
.toc-hero .kicker{
  display:inline-block; font-size:var(--fs-1); font-weight:700; text-transform:uppercase;
  letter-spacing:var(--tracking-caps); background:rgba(255,255,255,.16); color:#FFD2B4;
  border-radius:var(--r-pill); padding:5px 12px; margin-bottom:18px; position:relative;
}
.toc-hero h2{font-size:44px; line-height:1.08; font-weight:800; letter-spacing:-.02em; margin:0 0 14px; position:relative}
.toc-hero p{position:relative; max-width:80ch; margin:0 0 10px; color:#EDDCF6; font-size:18px; line-height:1.55}
.toc-hero p+p{font-size:16px; color:#E3CDF2; margin:0}

.toc-benefits{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin-bottom:30px}
.toc-benefit{background:#fff; border-radius:var(--r); padding:22px 24px; box-shadow:var(--shadow)}
.toc-benefit i{display:block; height:10px; width:44px; border-radius:var(--r-pill); margin-bottom:14px}
.toc-benefit h4{font-size:var(--fs-6); color:var(--ink); margin-bottom:8px}
.toc-benefit p{font-size:15px; line-height:1.6; color:var(--ink-2)}

.toc-list-hd{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin:30px 0 14px}
.toc-list-hd h3{font-size:26px; color:var(--violet); letter-spacing:var(--tracking-tight); margin-bottom:6px}
.toc-list-hd .note{margin:0}
.toc-list-hd .btn{margin-left:auto}

.toc-table{background:#fff; border-radius:var(--r); box-shadow:var(--shadow); overflow:auto}
.toc-tr{
  display:grid; grid-template-columns:minmax(210px,1fr) 118px 236px 392px; gap:16px;
  align-items:center; padding:16px 22px; border-bottom:1px solid var(--line-2); min-width:1060px;
}
.toc-tr.hd{padding:12px 22px; background:var(--bg-2)}
.toc-tr.hd div{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--mut)}
.toc-tr:last-child{border-bottom:0}
.toc-tr .nm{font-size:16.5px; font-weight:700; color:var(--violet); margin-bottom:3px}
.toc-tr .mt{font-size:13px; color:var(--mut)}
.toc-tr .pr{font-size:14px; font-weight:700; color:var(--ink); margin-bottom:5px; white-space:nowrap}
.toc-bar{height:5px; border-radius:var(--r-pill); background:var(--line-2); overflow:hidden}
.toc-bar i{display:block; height:5px; border-radius:var(--r-pill); background:var(--violet)}
.toc-ev-cell{text-align:center}
.toc-ev{
  display:inline-block; padding:6px 12px; border-radius:var(--r-pill);
  font-weight:700; font-size:13px; background:var(--violet-l); color:var(--violet);
  white-space:nowrap; cursor:help;
}
.toc-tr .acts{display:flex; gap:8px; justify-content:flex-end}
.toc-tr .acts .btn{width:124px; padding:11px 10px; white-space:nowrap; text-align:center}

.toc-docs{background:#fff; border-radius:var(--r); box-shadow:var(--shadow); padding:26px 28px; margin-top:30px}
.toc-docs h3{font-size:var(--fs-6); color:var(--violet); margin-bottom:14px}

/* ───────── шапка документа ───────── */
.toc-doc-top{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.toc-doc-top .back{margin:0; white-space:nowrap}
.toc-doc-top .who{font-size:var(--fs-3); color:var(--mut)}
.toc-doc-top .acts{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.toc-doc-top .acts .btn{padding:10px 18px; white-space:nowrap}

/* ───────── прогресс по шагам ───────── */
.toc-progress{
  background:#fff; border-radius:var(--r-md); padding:14px 16px; margin-bottom:18px;
  box-shadow:var(--shadow); display:flex; gap:18px; flex-wrap:wrap; align-items:center;
}
.toc-phase{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.toc-phase>b{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--mut); white-space:nowrap}
.toc-phase.act>b{color:var(--violet)}
.toc-phase .dots{display:flex; gap:6px; flex-wrap:wrap}
.toc-stepbtn{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px;
  border:1.5px solid var(--line); background:#fff; color:var(--mut);
  border-radius:var(--r-md); font-size:14px; font-weight:700; cursor:pointer;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.toc-stepbtn:hover{border-color:var(--violet)}
.toc-stepbtn.filled{border-color:#D9CBE6; background:#F7F2FA; color:var(--violet)}
.toc-stepbtn.act{border-color:var(--violet); background:var(--violet); color:#fff; padding:0 14px}
.toc-stepbtn span{font-weight:600; font-size:13.5px}

/* ───────── экран шага ───────── */
.toc-step-wrap{display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap}
.toc-step-main{flex:1 1 560px; min-width:0}
.toc-kicker{font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--violet-m); margin-bottom:8px}
.toc-question{
  font-size:33px; line-height:1.14; font-weight:800; letter-spacing:-.02em;
  color:var(--orange); margin:0 0 12px; max-width:26ch;
}
.toc-hint{font-size:16px; line-height:1.62; color:var(--ink-2); margin:0 0 14px; max-width:64ch}
.toc-pill-btn{
  display:inline-flex; align-items:center; gap:8px; background:#fff; border:1.5px solid #E2D5EC;
  color:var(--violet); border-radius:var(--r-pill); padding:8px 16px; font-weight:700; font-size:13.5px; cursor:pointer;
}
.toc-ex{display:grid; gap:10px; margin-top:12px}
.toc-ex-card{background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:14px 16px}
.toc-ex-card .lb{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:var(--tracking-caps); margin-bottom:6px}
.toc-ex-card .t{font-size:16px; font-weight:700; color:var(--ink); margin-bottom:4px}
.toc-ex-card .w{font-size:13.5px; line-height:1.5; color:var(--mut)}
.toc-ex-card.good{border-color:var(--ok-b); border-left:5px solid var(--ok)}
.toc-ex-card.good .lb{color:var(--ok)}
.toc-ex-card.bad{border-color:var(--err-b); border-left:5px solid var(--err)}
.toc-ex-card.bad .lb{color:var(--err)}

.toc-from{background:var(--violet-l2); border:1.5px solid #E2D5EC; border-radius:12px; padding:16px 18px; margin-top:20px}
.toc-from .lb{font-size:14.5px; font-weight:700; color:var(--violet); margin-bottom:4px}
.toc-from .note{margin:0 0 12px}
.toc-from .row{display:flex; gap:8px; flex-wrap:wrap}
.toc-from button{
  display:inline-flex; align-items:center; gap:8px; background:#fff; border:1.5px solid #D9CBE6;
  color:var(--ink); border-radius:var(--r-md); padding:10px 14px; font-size:14px; font-weight:600;
  cursor:pointer; text-align:left; max-width:100%;
}
.toc-from button:hover{border-color:var(--violet)}
.toc-from button b{color:var(--violet); font-weight:800}
.toc-from button.free{border-style:dashed; color:var(--mut); border-color:#C9BFD8}

/* карточки-ответы */
.toc-cards{display:grid; gap:16px; margin-top:20px}
.toc-card{
  background:#fff; border:1.5px solid var(--line); border-left:5px solid var(--violet);
  border-radius:14px; padding:16px 18px; display:grid; gap:12px;
  box-shadow:0 2px 4px rgba(45,5,64,.06), 0 18px 36px -24px rgba(45,5,64,.24);
  transition:box-shadow var(--dur) var(--ease);
}
.toc-card.flash{box-shadow:0 0 0 3px var(--orange)}
.toc-card-hd{display:flex; align-items:center; gap:10px}
.toc-num{font-size:12px; font-weight:800; color:var(--violet); background:var(--violet-l); border-radius:var(--r-pill); padding:3px 10px}
.toc-src{font-size:12px; color:var(--mut)}
.toc-src a{color:inherit}
.toc-card-del{
  margin-left:auto; width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line);
  background:#fff; color:var(--mut); font-size:16px; line-height:1; cursor:pointer;
}
.toc-card-del:hover{border-color:var(--err); color:var(--err)}
.toc-card .toc-title{
  width:100%; border:0; border-bottom:2px solid #EDE6F3; border-radius:0;
  padding:4px 2px 8px; font-size:20px; font-weight:700; color:var(--ink);
  line-height:1.3; outline:none; font-family:inherit;
}
.toc-card .toc-title:focus{border-bottom-color:var(--violet)}
.toc-card .toc-desc{
  width:100%; border:1.5px solid var(--line); border-radius:var(--r-md); padding:10px 14px;
  font-size:14.5px; line-height:1.6; min-height:88px; resize:vertical; color:var(--ink-2); font-family:inherit;
}
.toc-count{display:flex; gap:10px; align-items:center; margin-top:5px; font-size:12.5px; color:var(--mut)}
.toc-count b{font-weight:600}
.toc-count.near b,.toc-count.near{color:#9E3A00}
.toc-links{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; padding-top:4px; border-top:1px dashed var(--line-2)}
.toc-links .lb{font-size:13px; font-weight:700; color:var(--violet); padding-top:8px}
.toc-chips{display:flex; gap:6px; flex-wrap:wrap; flex:1; min-width:0; padding-top:4px}
.toc-chip{
  display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--line); background:#fff;
  color:var(--ink-2); border-radius:var(--r-pill); padding:6px 12px; font-size:13px; cursor:pointer; text-align:left;
}
.toc-chip i{width:7px; height:7px; border-radius:50%; background:#D8D1E2; flex:none}
.toc-chip.on{border-color:var(--violet); background:var(--violet-l); color:var(--violet); font-weight:700}
.toc-chip.on i{background:var(--violet)}
.toc-warn{font-size:13px; color:#9E3A00; background:var(--orange-l); border-radius:var(--r-sm); padding:8px 12px}
.toc-indrow{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.toc-indrow .lb{font-size:13px; font-weight:700; color:var(--violet)}
.toc-ind{display:inline-block; border-radius:var(--r-pill); padding:3px 10px; font-size:12px; font-weight:600; background:#F1E8F7; color:var(--violet)}
.toc-add{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.toc-add .btn.dash{background:#fff; border:1.5px dashed #C9BFD8; color:var(--violet); box-shadow:none}
.toc-nav{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:24px; padding-top:18px; border-top:1px solid var(--line)}

/* ───────── панель обоснованности ───────── */
.toc-side{flex:0 0 336px; max-width:100%; position:sticky; top:18px}
.toc-side .box{background:#fff; border-radius:var(--r); padding:20px 22px; box-shadow:var(--shadow)}
.toc-side .lb{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--mut); margin-bottom:10px}
.toc-side .about{font-size:13.5px; line-height:1.55; color:var(--ink-2); margin:12px 0 0}
.toc-side hr{border:0; border-top:1px solid var(--line-2); margin:18px 0}
.toc-side h4{font-size:16.5px; color:var(--ink); margin-bottom:4px}
.toc-side .sub{font-size:13.5px; color:var(--mut); line-height:1.5; margin-bottom:12px}
.toc-checks{display:grid; gap:4px}
.toc-checks label{
  display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.45;
  color:var(--ink); padding:9px 11px; border-radius:9px; cursor:pointer;
  transition:background var(--dur) var(--ease);
}
.toc-checks label:hover{background:var(--bg-2)}
.toc-checks label.on{background:var(--violet-l2)}
.toc-checks input{margin-top:2px; accent-color:var(--violet); width:16px; height:16px; flex:none}
.toc-side textarea{
  width:100%; border:1.5px solid var(--line); border-radius:var(--r-md); padding:10px 12px;
  font-size:13.5px; line-height:1.55; min-height:96px; resize:vertical; color:var(--ink);
  margin-top:12px; font-family:inherit;
}
.toc-evex{display:grid; gap:8px; margin-top:10px}
.toc-evex div{background:var(--bg-2); border:1px solid var(--line-2); border-radius:9px; padding:9px 12px; font-size:13px; line-height:1.45; color:var(--ink-2)}

/* ───────── схема ───────── */
.toc-scheme-page{background:#2C0340; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-panel)}
/* Схема занимает всю ширину окна: у <main> снимается ограничение (класс ставит toc.js). */
#app>main.toc-wide{max-width:none; padding-left:18px; padding-right:18px}
.toc-scheme-bar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:14px 22px; background:#210230; color:#fff}
.toc-scheme-bar .t{font-size:17px; font-weight:700; white-space:nowrap}
.toc-scheme-bar .s{font-size:13px; color:#CBB6DD; white-space:nowrap}
.toc-scheme-bar .seg{display:flex; gap:6px; background:rgba(255,255,255,.08); border-radius:var(--r-pill); padding:4px; flex-wrap:wrap}
.toc-scheme-bar .seg button{
  border:0; background:transparent; color:#E6D8F2; border-radius:var(--r-pill);
  padding:7px 14px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.toc-scheme-bar .seg button.act{background:#fff; color:var(--violet)}
.toc-scheme-bar .right{margin-left:auto; display:flex; gap:8px; align-items:center}
.toc-scheme-bar .zoom{font-size:13px; color:#CBB6DD; white-space:nowrap}
.toc-scheme-bar .icon{
  width:34px; height:34px; border-radius:9px; border:1px solid rgba(255,255,255,.25);
  background:transparent; color:#fff; font-size:17px; cursor:pointer;
}
.toc-scheme-bar .ghost-d{
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25);
  border-radius:var(--r-md); padding:9px 16px; font-weight:700; font-size:14px; cursor:pointer; white-space:nowrap;
}
.toc-scheme-bar .light{background:#fff; color:var(--violet); border:0; border-radius:var(--r-md); padding:9px 18px; font-weight:700; font-size:14px; cursor:pointer; white-space:nowrap}
/* по высоте схема тоже тянется до низа окна, чтобы цепочка была видна целиком */
.toc-scheme-body{display:flex; align-items:stretch; height:calc(100vh - 260px); min-height:520px}
.toc-canvas-wrap{flex:1; min-width:0; overflow:auto; padding:22px}
.toc-canvas{position:relative}
.toc-canvas-frame{position:absolute; left:0; top:0; transform-origin:0 0}
.toc-canvas-frame svg{position:absolute; left:0; top:0; display:block}
.toc-band{position:absolute; left:0; width:200px}
.toc-band .k{font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--lavender)}
.toc-band .n{font-size:20px; font-weight:700; color:#fff; margin-top:4px; line-height:1.2}
.toc-node{
  position:absolute; background:#fff; border:1.5px solid var(--line); border-radius:14px;
  padding:14px 16px; cursor:pointer; display:flex; flex-direction:column; gap:5px; overflow:hidden;
  box-shadow:0 10px 24px -18px rgba(0,0,0,.6);
  transition:opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.toc-node .num{font-size:12px; font-weight:700; color:var(--mut)}
.toc-node .t{font-size:15.5px; font-weight:700; line-height:1.3; color:var(--ink)}
.toc-node .d{font-size:13px; line-height:1.45; color:var(--mut); flex:1; min-height:0; overflow:hidden}
.toc-node .ev{display:flex; gap:7px; align-items:center; font-size:12px; font-weight:700}
.toc-node .ev i{width:8px; height:8px; border-radius:50%; flex:none}
.toc-node.dim{opacity:.26}
.toc-node.sel{border-color:var(--orange); box-shadow:0 12px 30px -10px rgba(255,93,0,.55)}
.toc-read{flex:0 0 380px; background:#fff; padding:24px; overflow:auto}
.toc-read .k{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--mut); margin-bottom:10px}
.toc-read .t{font-size:21px; font-weight:700; color:var(--violet); line-height:1.25; margin-bottom:10px}
.toc-read .d{font-size:14.5px; line-height:1.6; color:var(--ink-2); margin-bottom:14px}
.toc-read .srcbox{background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-md); padding:12px 14px; margin-bottom:16px}
.toc-read .srcbox b{display:block; font-size:12.5px; color:var(--violet); margin-bottom:4px}
.toc-read .srcbox span{font-size:13.5px; color:var(--ink-2); line-height:1.5}
.toc-chain{display:grid; gap:8px}
.toc-chain div{display:flex; gap:10px; align-items:baseline}
.toc-chain b{font-size:12px; font-weight:700; color:var(--mut); min-width:84px}
.toc-chain span{font-size:13.5px; color:var(--ink); line-height:1.45}

/* ───────── адаптив ───────── */
@media (max-width:1100px){
  .toc-side{position:static; flex:1 1 100%}
  .toc-read{flex:1 1 100%}
  .toc-scheme-body{flex-wrap:wrap; height:auto; min-height:0}
  .toc-scheme-body .toc-canvas-wrap{min-height:60vh}
  #app>main.toc-wide{padding-left:16px; padding-right:16px}
}
@media (max-width:700px){
  .toc-hero{padding:26px 22px}
  .toc-hero h2{font-size:32px}
  .toc-question{font-size:26px}
}