:root{
  --paper:#FFFFFF;
  --paper2:#FCFBF9;
  --ink:#17181C;
  --ink-soft:#5A5C63;
  --muted:#9A9BA3;
  --line:#B9BAC2;
  --accent:#3B4CD1;
  --accent-soft:#EDEFFC;
  --cut-bg:#F1F1F0;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#101114;
    --paper2:#17181C;
    --ink:#ECEAE3;
    --ink-soft:#A8A9B0;
    --muted:#75767D;
    --line:#4A4C55;
    --accent:#8C97F2;
    --accent-soft:#1E2140;
    --cut-bg:#1B1C1F;
  }
}
:root[data-theme="dark"]{
  --paper:#101114;
  --paper2:#17181C;
  --ink:#ECEAE3;
  --ink-soft:#A8A9B0;
  --muted:#75767D;
  --line:#4A4C55;
  --accent:#8C97F2;
  --accent-soft:#1E2140;
  --cut-bg:#1B1C1F;
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans',system-ui,sans-serif; line-height:1.4;}
button{font-family:inherit;}
code,.mono{font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums;}

.stamp{display:flex; align-items:center; gap:18px; padding:16px 24px; border-bottom:1.5px solid var(--ink);}
.stamp-code{font-family:'IBM Plex Mono',monospace; background:var(--accent); color:#fff; font-weight:600; font-size:.85rem; padding:6px 12px; border-radius:5px; flex:none;}
.stamp-title h1{font-family:'Manrope',sans-serif; font-size:1.15rem; font-weight:800; margin:0; text-wrap:balance;}
.stamp-title p{margin:2px 0 0; font-size:.78rem; color:var(--ink-soft);}
.backlink{color:var(--accent); text-decoration:none; font-size:.78rem; margin-right:8px;}
.backlink:hover{text-decoration:underline;}
.stamp-actions{margin-left:auto; display:flex; align-items:center; gap:12px; flex:none;}
.savebadge{font-size:.72rem; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace;}
.ghostBtn{border:1px solid var(--line); background:var(--paper2); color:var(--ink-soft); border-radius:6px; padding:6px 10px; font-size:.75rem; cursor:pointer;}
.ghostBtn:hover{color:var(--ink); border-color:var(--ink);}

.legend{display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:10px 24px; border-bottom:1px solid var(--line); font-size:.76rem; color:var(--ink-soft);}
.legend[hidden]{display:none;}
.legend-item{display:flex; align-items:center; gap:6px;}
.legend .sample{display:inline-block; width:26px; height:14px; border-radius:3px; background:var(--paper2); flex:none;}
.legend .sample.normal{border:1.5px solid var(--ink);}
.legend .sample.important{border:3px solid var(--ink);}
.legend .sample.weak{border:1.5px solid var(--ink); text-decoration:underline wavy;}
.legend .sample.planned{border:1.5px dashed var(--ink);}
.legend .sample.cut{border:1.5px solid var(--muted); background:var(--cut-bg);}
.legend-hint{font-style:italic;}
#editFlowBtn{margin-left:auto;}
.viewToggle{margin-left:auto; display:flex; gap:6px; flex:none;}
.viewToggle[hidden]{display:none;}
.viewBtn{border:1px solid var(--line); background:var(--paper2); color:var(--ink-soft); border-radius:6px; padding:5px 10px; font-size:.75rem; cursor:pointer;}
.viewBtn:hover{color:var(--ink); border-color:var(--ink);}
.viewBtn.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}

.canvas{overflow-x:auto; padding:18px 24px 80px; max-width:980px; margin:0 auto;}
.loading{color:var(--ink-soft); text-align:center; padding:60px;}

/* ---- home: doc picker ---- */
.home{max-width:760px; margin:0 auto; padding:28px 24px 80px;}
.home h2{font-family:'Manrope',sans-serif; font-size:.95rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin:0 0 14px;}
.doclist{display:grid; gap:12px;}
.doccard{display:block; text-decoration:none; color:var(--ink); background:var(--paper2); border:1.5px solid var(--line); border-radius:10px; padding:16px 18px; transition:border-color .12s ease, transform .12s ease;}
.doccard:hover{border-color:var(--ink); transform:translateY(-1px);}
.doccard .code{display:inline-block; margin-bottom:6px;}
.doccard h3{font-family:'Manrope',sans-serif; font-size:1rem; font-weight:800; margin:0 0 4px;}
.doccard p{margin:0; font-size:.82rem; color:var(--ink-soft);}
.doccard .stub{display:block; margin-top:8px; font-size:.76rem; color:var(--muted); font-style:italic;}
.more-soon{margin-top:16px; font-size:.8rem; color:var(--muted); font-style:italic;}

/* ---- shared row content (both view modes) ---- */
.row{display:flex; flex-wrap:wrap; align-items:flex-start; gap:5px 7px; padding:4px 6px; border-radius:6px;}
.row:hover{background:var(--paper2);}
.row.root .title{font-family:'Manrope',sans-serif; font-weight:800; font-size:1rem;}

.chevron{width:16px; height:16px; flex:none; border:none; background:transparent; color:var(--ink-soft); cursor:pointer; font-size:.65rem; display:inline-flex; align-items:center; justify-content:center; transition:transform .12s ease; padding:0; margin-top:3px;}
.chevron.open{transform:rotate(90deg);}
.chevron.leaf{visibility:hidden;}

.code{font-family:'IBM Plex Mono',monospace; font-size:.65rem; color:var(--accent); font-weight:600; flex:none; margin-top:3px;}
.count{font-family:'IBM Plex Mono',monospace; font-size:.65rem; color:var(--muted); background:var(--paper2); border:1px solid var(--line); border-radius:20px; padding:0 6px; flex:none; margin-top:2px;}

.titlewrap{flex:1 1 220px; min-width:120px;}
.title{font-weight:600; font-size:.86rem; outline:none; border-radius:3px; padding:1px 2px; overflow-wrap:anywhere;}
.title:hover, .title:focus{background:var(--accent-soft);}

.info{font-size:.76rem; color:var(--ink-soft); margin:2px 0 4px 22px; overflow-wrap:anywhere;}
.info .stat{font-family:'IBM Plex Mono',monospace; font-size:.7rem; outline:none; padding:1px 2px; border-radius:3px; display:block;}
.info .note{outline:none; padding:1px 2px; border-radius:3px; display:block; margin-top:2px;}
.info .stat:hover, .info .stat:focus, .info .note:hover, .info .note:focus{background:var(--accent-soft);}
.info .note:empty::before{content:"+ примечание"; color:var(--muted); font-style:italic;}
.info .stat:empty::before{content:"+ цифры"; color:var(--muted); font-style:italic;}

.linkchips{display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-top:1px;}
.linkchip{font-size:.72rem; color:var(--accent); background:var(--accent-soft); border-radius:20px; padding:2px 9px; text-decoration:none; white-space:nowrap;}
.linkchip:hover{text-decoration:underline;}

.itemtools{display:flex; gap:3px; flex:none; margin-left:auto; margin-top:1px;}
.iconbtn{border:1px solid var(--line); background:var(--paper); color:var(--ink-soft); width:19px; height:19px; line-height:1; border-radius:4px; font-size:.72rem; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0;}
.iconbtn:hover{color:var(--ink); border-color:var(--ink);}

.addline button{border:1px dashed var(--line); background:transparent; color:var(--ink-soft); border-radius:5px; padding:2px 8px; font-size:.7rem; cursor:pointer;}
.addline button:hover{color:var(--ink); border-color:var(--ink);}

/* ---- mode H: horizontal growth — outline with bracket connectors (dendrogram-style) ---- */
#canvas.mode-h ul.tree, #canvas.mode-h ul.children{list-style:none; margin:0; padding:0;}
#canvas.mode-h ul.children{padding-left:20px; margin-left:8px; border-left:1px solid var(--line);}
#canvas.mode-h ul.children[hidden]{display:none;}
#canvas.mode-h li.node{position:relative; margin:1px 0;}
#canvas.mode-h ul.children > li.node{padding-top:0;}
#canvas.mode-h ul.children > li.node::before{content:""; position:absolute; left:-20px; top:14px; width:20px; height:0; border-top:1px solid var(--line);}
#canvas.mode-h .addline{margin:2px 0 2px 20px; padding-left:20px; position:relative;}
#canvas.mode-h .addline::before{content:""; position:absolute; left:0; top:11px; width:20px; height:0; border-top:1px solid var(--line);}

/* ---- mode V: vertical growth — top-down fan-out (org-chart style) ---- */
#canvas.mode-v{overflow-x:auto; max-width:none; width:100%; margin:0;}
#canvas.mode-v ul.tree, #canvas.mode-v ul.children{list-style:none; margin:0; padding:0; display:flex; width:max-content; min-width:100%; justify-content:center;}
#canvas.mode-v ul.children[hidden]{display:none;}
#canvas.mode-v ul.children{padding-top:24px; position:relative;}
#canvas.mode-v li.node{position:relative; padding:24px 12px 0 12px; display:flex; flex-direction:column; align-items:center; text-align:center;}
#canvas.mode-v > ul.tree > li.node{padding-top:0;}
#canvas.mode-v li.node::before, #canvas.mode-v li.node::after{content:""; position:absolute; top:0; right:50%; width:50%; height:24px; border-top:1px solid var(--line);}
#canvas.mode-v li.node::after{right:auto; left:50%; border-left:1px solid var(--line);}
#canvas.mode-v li.node:only-child{padding-top:0;}
#canvas.mode-v li.node:only-child::before, #canvas.mode-v li.node:only-child::after{display:none;}
#canvas.mode-v > ul.tree > li.node::before, #canvas.mode-v > ul.tree > li.node::after{display:none;}
#canvas.mode-v li.node:first-child::before{border:none;}
#canvas.mode-v li.node:last-child::after{border:none;}
#canvas.mode-v li.node:last-child::before{border-right:1px solid var(--line); border-radius:0 6px 0 0;}
#canvas.mode-v li.node:first-child::after{border-radius:6px 0 0 0;}
#canvas.mode-v ul.children::before{content:""; position:absolute; top:0; left:50%; width:0; height:24px; border-left:1px solid var(--line);}
#canvas.mode-v .info{margin-left:0; text-align:left;}
#canvas.mode-v .row{background:var(--paper2); border:1px solid var(--line); border-radius:7px;}
#canvas.mode-v .row.root{background:var(--ink); border-color:var(--ink);}
#canvas.mode-v .row.root .title{color:var(--paper);}
#canvas.mode-v .addline{margin-top:4px;}

/* ---- mode flow: mermaid diagram (nodes + arrows, not a tree) ---- */
#canvas.mode-flow{max-width:1200px;}
.flowsvghost{overflow:auto; padding:20px 4px; text-align:center;}
.flowsvghost svg{max-width:none;}
.flowerror{color:var(--dead,#AD4536); font-size:.82rem; padding:20px;}
.floweditor{width:100%; min-height:320px; font-family:'IBM Plex Mono',monospace; font-size:.8rem; line-height:1.5; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--paper2); color:var(--ink); resize:vertical;}
.floweditbar{display:flex; gap:8px; margin-top:8px;}
.floweditbar[hidden]{display:none;}
.flownotes{margin-top:24px; padding-top:14px; border-top:1px dashed var(--line);}
.flownotes h4{margin:0 0 10px; font-family:'Manrope',sans-serif; font-size:.8rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;}
.flownote{padding:6px 10px; margin-bottom:4px; background:var(--paper2); border-radius:6px; border-left:3px solid var(--accent);}
.flownote-title{font-weight:600; font-size:.82rem; outline:none; border-radius:3px; padding:1px 2px;}
.flownote-text{font-size:.78rem; color:var(--ink-soft); margin-top:2px; outline:none; border-radius:3px; padding:1px 2px;}
.flownote-title:hover, .flownote-title:focus, .flownote-text:hover, .flownote-text:focus{background:var(--accent-soft);}

@media (max-width: 720px){
  .stamp{flex-wrap:wrap;}
  .legend{flex-direction:column; align-items:flex-start;}
  .viewToggle{margin-left:0;}
}