/* Стили редакторов методов */

.tool { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.tool__bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.tool__bar .spacer { flex: 1; }
.tool__hint { font-size: 12.5px; color: var(--text-dim); }
.tool__stage { flex: 1; overflow: auto; padding: 18px; min-height: 0; background: var(--bg-canvas); }
.tool__note { font-size: 12.5px; color: var(--text-dim); background: var(--accent-soft); border-radius: 10px; padding: 9px 12px; margin-bottom: 14px; }

/* ----- универсальная доска зон с drag and drop ----- */
.board { display: grid; gap: 14px; align-items: stretch; }
.board--2x2 { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
.board--cols { grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); }
.board--3 { grid-template-columns: repeat(3, minmax(200px, 1fr)); }
.board--wrap { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.zone {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; min-height: 170px; overflow: hidden;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.zone.drop-target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: #fbfcff; }
.zone__head { padding: 10px 13px 9px; border-bottom: 1px solid var(--border); }
.zone__title { display: flex; align-items: center; gap: 8px; font-weight: 640; font-size: 13.5px; }
.zone__badge { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.zone__count { margin-left: auto; font-size: 11.5px; color: var(--text-faint); background: var(--surface-3); border-radius: 20px; padding: 1px 8px; }
.zone__desc { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; line-height: 1.4; }
.zone__list { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.zone__add { margin: 0 10px 10px; }

.item {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 10px; font-size: 13px; cursor: grab; position: relative; user-select: none; touch-action: none;
  box-shadow: 0 1px 2px rgba(20,25,45,.04); transition: box-shadow .12s, transform .06s, opacity .12s;
}
.item:hover { box-shadow: var(--shadow-1); }
.item.dragging { opacity: .35; }
.item__text { outline: none; min-height: 18px; line-height: 1.45; word-break: break-word; cursor: text; }
.item__text:focus { background: var(--accent-soft); border-radius: 5px; }
.item__meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.item__del { position: absolute; top: 4px; right: 4px; opacity: 0; width: 22px; height: 22px; font-size: 13px; }
.item:hover .item__del { opacity: 1; }
.item__handle { color: var(--text-faint); font-size: 11px; letter-spacing: 2px; }
.item--flying {
  position: fixed; z-index: 500; pointer-events: none; box-shadow: var(--shadow-drag);
  transform: rotate(-1.4deg); cursor: grabbing; opacity: .97;
}
.drop-line { height: 2px; background: var(--accent); border-radius: 2px; margin: -3px 0; }

.mini-input { border: 1px dashed var(--border-strong); background: transparent; border-radius: 9px; padding: 7px 9px; width: 100%; outline: none; font-size: 13px; }
.mini-input:focus { border-style: solid; border-color: var(--accent); background: var(--surface); }

/* ----- таблицы (матрицы, RICE, Парето, CBA, RACI) ----- */
.tbl-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; }
table.tbl { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
table.tbl th, table.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
table.tbl thead th { background: var(--surface-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); font-weight: 650; position: sticky; top: 0; z-index: 3; white-space: nowrap; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl tbody tr.dragging { opacity: .35; }
table.tbl tbody tr.drop-above td { box-shadow: inset 0 2px 0 var(--accent); }
table.tbl tbody tr.drop-below td { box-shadow: inset 0 -2px 0 var(--accent); }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tbl td.grip { width: 26px; color: var(--text-faint); cursor: grab; user-select: none; text-align: center; touch-action: none; }
table.tbl td.rank { width: 34px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
table.tbl .cell-input { width: 100%; border: 1px solid transparent; background: transparent; border-radius: 7px; padding: 4px 6px; outline: none; }
table.tbl .cell-input:hover { border-color: var(--border); }
table.tbl .cell-input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 2px var(--accent-soft); }
table.tbl .cell-input.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl tfoot td { background: var(--surface-2); font-weight: 600; }
.winner { background: #eefaf2 !important; }
.winner td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.score-pill { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; font-weight: 640; }
.score-bar { display: inline-block; height: 6px; border-radius: 3px; background: var(--accent); opacity: .85; min-width: 2px; }
.col-del { width: 34px; }

/* ----- секции и сетки ----- */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.panel__title { font-size: 13px; font-weight: 640; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.panel__title .spacer { flex: 1; }
.stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; min-width: 130px; }
.stat__label { font-size: 11.5px; color: var(--text-dim); }
.stat__value { font-size: 19px; font-weight: 660; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat__value.small { font-size: 15px; }

/* ----- дерево (WBS, 5 почему, дерево решений) ----- */
.tree { display: flex; flex-direction: column; gap: 6px; }
.tree-node { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 8px 10px; display: flex; align-items: flex-start; gap: 8px; position: relative; }
.tree-node.drop-target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tree-node.dragging { opacity: .35; }
.tree-row { display: flex; align-items: flex-start; gap: 8px; }
.tree-children { margin-left: 26px; padding-left: 16px; border-left: 2px dashed var(--border-strong); display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.tree-grip { cursor: grab; color: var(--text-faint); user-select: none; padding-top: 2px; touch-action: none; }
.tree-main { flex: 1; min-width: 0; }
.tree-acts { display: flex; gap: 2px; opacity: 0; }
.tree-node:hover .tree-acts { opacity: 1; }
.tree-badge { font-size: 11px; padding: 1px 7px; border-radius: 20px; background: var(--surface-3); color: var(--text-dim); }

/* ----- узловой канвас (дерево решений, Исикава) ----- */
.node-canvas { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; min-height: 460px; }
.node-canvas__inner { position: relative; width: 2400px; height: 1400px; }
.node-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.node-canvas svg path, .node-canvas svg line { stroke: var(--border-strong); stroke-width: 1.8; fill: none; }
.node-canvas svg text { font: 11px var(--font); fill: var(--text-dim); }
.dnode {
  position: absolute; width: 186px; background: var(--surface); border: 1.5px solid var(--border-strong);
  border-radius: 12px; padding: 8px 10px; box-shadow: var(--shadow-1); cursor: grab; user-select: none;
  touch-action: none;
}
.dnode.dragging { box-shadow: var(--shadow-drag); z-index: 20; }
.dnode.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dnode--decision { border-color: #93a5f7; background: #f6f8ff; }
.dnode--chance { border-color: #f3c98b; background: #fffaf2; }
.dnode--outcome { border-color: #9adcb9; background: #f4fdf8; }
.dnode__type { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.dnode__label { font-size: 12.5px; font-weight: 580; outline: none; margin: 2px 0 4px; word-break: break-word; }
.dnode__row { display: flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--text-dim); }
.dnode__row input { width: 62px; padding: 2px 5px; border: 1px solid var(--border); border-radius: 6px; font-size: 11.5px; text-align: right; }
.dnode__ev { font-weight: 660; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.dnode__acts { position: absolute; top: 3px; right: 3px; display: flex; gap: 1px; opacity: 0; }
.dnode:hover .dnode__acts { opacity: 1; }
.dnode__acts .icon-btn { width: 22px; height: 22px; font-size: 12px; }
.dnode.best { box-shadow: 0 0 0 3px #d6f3e4, var(--shadow-1); }

/* ----- рыбья кость ----- */
.fishbone {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 18px 18px 26px; overflow-x: auto;
  display: grid; grid-template-columns: minmax(520px, 1fr) 220px; gap: 24px; align-items: center;
}
.fish-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fish-svg .spine { stroke: var(--border-strong); stroke-width: 3; }
.fish-svg .rib { stroke: var(--border-strong); stroke-width: 1.6; stroke-dasharray: 4 3; }
.fish-svg .spine-arrow { fill: var(--border-strong); }
.fish-body { display: flex; flex-direction: column; }
.fish-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.fish-spine-gap { height: 54px; }
.fish-head { background: #fff1f1; border: 1.5px solid #f3c3c3; border-radius: 12px; padding: 14px; text-align: center; }
.fish-head__label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: #b4585a; font-weight: 650; }
.fish-head__text { font-size: 14px; font-weight: 620; outline: none; margin-top: 4px; }
.bone { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.bone.drop-target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bone__head { padding: 8px 11px; font-weight: 620; font-size: 13px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 7px; }
.bone__list { padding: 9px; display: flex; flex-direction: column; gap: 7px; min-height: 48px; }

/* ----- Гантт / PERT ----- */
.gantt { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; }
.gantt__grid { display: grid; grid-template-columns: 250px 1fr; min-width: 720px; }
.gantt__side { border-right: 1px solid var(--border); }
.gantt__side-head, .gantt__time-head { height: 40px; background: var(--surface-2); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 12px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); font-weight: 650; position: sticky; top: 0; z-index: 4; }
.gantt__row { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.gantt__row.critical { background: #fff7f6; }
.gantt__row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; outline: none; }
.gantt__lanes { position: relative; }
.gantt__lane { height: 40px; border-bottom: 1px solid var(--border); position: relative; }
.gantt__lane:nth-child(even) { background: var(--surface-2); }
.gantt__tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
.gantt__tick-label { position: absolute; top: 12px; font-size: 11px; color: var(--text-faint); padding-left: 6px; white-space: nowrap; }
.gbar {
  position: absolute; top: 8px; height: 24px; border-radius: 7px; background: #c9d5fd; border: 1px solid #9fb4fa;
  cursor: grab; display: flex; align-items: center; padding: 0 8px; font-size: 11.5px; color: #2a3b8f; overflow: hidden;
  touch-action: none;
}
.gbar.critical { background: #ffd9d4; border-color: #f3ada4; color: #8f3a2a; }
.gbar.dragging { box-shadow: var(--shadow-drag); }
.gbar__handle { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.gbar__handle--l { left: 0; } .gbar__handle--r { right: 0; }
.gbar__progress { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(79,110,247,.28); }

/* ----- прочее ----- */
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); margin-top: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.pareto-chart { display: flex; align-items: flex-end; gap: 4px; height: 170px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); position: relative; overflow: hidden; }
.pareto-bar { flex: 1; min-width: 10px; background: var(--accent); border-radius: 4px 4px 0 0; opacity: .85; position: relative; }
.pareto-bar.vital { background: var(--ok); }
.pareto-line { position: absolute; inset: 12px; pointer-events: none; }
.hat-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.hat-tab { padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; font-size: 12.5px; }
.hat-tab.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.matrix-scroll { overflow-x: auto; }
.pairwise { display: grid; gap: 10px; }
.pairwise__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.pairwise__side { font-size: 13px; }
.pairwise__side.right { text-align: right; }
.pairwise__slider { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 230px; }
.pairwise__slider input { width: 100%; accent-color: var(--accent); }
.pairwise__val { font-size: 11.5px; color: var(--text-dim); }
.badge-cr { padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge-cr.good { background: #e6f7ee; color: #1d7a52; }
.badge-cr.bad { background: var(--danger-soft); color: #b0393d; }
.kano-axes { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.raci-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); margin-top: 10px; }
.raci-cell { display: flex; gap: 3px; justify-content: center; }
.raci-btn { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 11.5px; font-weight: 650; color: var(--text-faint); }
.raci-btn.on[data-role="R"] { background: #dbeafe; border-color: #9fbdf5; color: #21489c; }
.raci-btn.on[data-role="A"] { background: #ffe3d3; border-color: #f2b48c; color: #9a4b1c; }
.raci-btn.on[data-role="C"] { background: #e7e0fb; border-color: #bda9f0; color: #55349c; }
.raci-btn.on[data-role="I"] { background: #d8f5e3; border-color: #9adcb9; color: #1d6b48; }
.warn-line { font-size: 12.5px; color: #9a5b12; background: #fdf4e3; border-radius: 9px; padding: 8px 11px; margin-top: 10px; }
.ok-line { font-size: 12.5px; color: #1d6b48; background: #e9f8f0; border-radius: 9px; padding: 8px 11px; margin-top: 10px; }

/* подсказка в пустом редактируемом поле */
[data-ph]:empty::before { content: attr(data-ph); color: var(--text-faint); font-weight: 400; }
.item__text[contenteditable="false"] { cursor: inherit; }

/* числовое поле с подписью внутри карточки доски */
.field-inline { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-faint); }
.field-inline input { width: 46px; }

/* ----- плоскость с осями (матрицы 2×2) ----- */
.plane-wrap { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: minmax(360px, 58vh) 34px; gap: 6px; }
.plane {
  position: relative; display: grid; grid-template-areas: "q1 q2" "q3 q4";
  grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface);
}
.plane__quadrant { padding: 10px 12px; position: relative; }
.plane__quadrant:nth-child(1) { border-right: 1px dashed var(--border-strong); border-bottom: 1px dashed var(--border-strong); }
.plane__quadrant:nth-child(2) { border-bottom: 1px dashed var(--border-strong); }
.plane__quadrant:nth-child(3) { border-right: 1px dashed var(--border-strong); }
.plane__q-title { font-size: 12.5px; font-weight: 650; color: #46506a; }
.plane__q-hint { font-size: 11.5px; color: #66708a; margin-top: 2px; max-width: 220px; line-height: 1.35; }
.plane__field { position: absolute; inset: 0; }
.plane__axis { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--text-faint); }
.plane__axis--y { flex-direction: column; height: 100%; padding: 6px 0; }
.plane__axis--y > span { writing-mode: vertical-rl; transform: rotate(180deg); }
.plane__axis--x { padding: 0 6px; }
.plane__axis-name { font-weight: 650; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.dot {
  position: absolute; transform: translate(-50%, 50%); background: var(--surface);
  border: 1.5px solid var(--accent); color: var(--text); border-radius: 20px;
  padding: 5px 11px; font-size: 12.5px; cursor: grab; box-shadow: var(--shadow-1);
  max-width: 210px; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  touch-action: none;
}
.dot:hover { z-index: 5; box-shadow: var(--shadow-2); }
.dot.dragging { box-shadow: var(--shadow-drag); z-index: 10; cursor: grabbing; }
.dot__text:focus { outline: none; }
.plane-mini { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 78px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.plane-mini__dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); transform: translate(-50%, 50%); }

/* ----- документ ----- */
.doc-stage { display: grid; gap: 14px; padding: 16px; }
.doc-stage[data-mode="split"] { grid-template-columns: 1fr 1fr; }
.doc-stage[data-mode="edit"] .doc-preview, .doc-stage[data-mode="read"] .doc-edit { display: none; }
.doc-stage[data-mode="edit"], .doc-stage[data-mode="read"] { grid-template-columns: minmax(0, 860px); justify-content: center; }
.doc-edit {
  width: 100%; min-height: 100%; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; font: 13.5px/1.65 var(--mono); resize: none; outline: none; background: var(--surface);
}
.doc-edit:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.doc-preview { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; background: var(--surface); overflow: auto; }

/* общий стиль отрендеренного markdown */
.md { line-height: 1.65; color: var(--text); word-break: break-word; }
.md h1 { font-size: 22px; margin: 0 0 10px; }
.md h2 { font-size: 17px; margin: 18px 0 8px; }
.md h3 { font-size: 14.5px; margin: 14px 0 6px; }
.md p { margin: 8px 0; }
.md ul, .md ol { margin: 8px 0; padding-left: 20px; }
.md li { margin: 3px 0; }
.md blockquote { margin: 10px 0; padding: 6px 14px; border-left: 3px solid var(--border-strong); color: var(--text-dim); background: var(--surface-2); border-radius: 0 8px 8px 0; }
.md code { background: var(--surface-3); padding: 1px 5px; border-radius: 5px; font: 12.5px var(--mono); }
.md pre { background: #1f2433; color: #eef1f8; padding: 12px 14px; border-radius: 10px; overflow-x: auto; }
.md pre code { background: transparent; color: inherit; padding: 0; }
.md table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 13px; }
.md th, .md td { border: 1px solid var(--border); padding: 6px 9px; text-align: left; }
.md th { background: var(--surface-2); }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.md img { max-width: 100%; border-radius: 10px; }
.md a { color: var(--accent-ink); }
.md .md-tasks { list-style: none; padding-left: 4px; }
.md--card { font-size: 12.5px; }
.md--card h1 { font-size: 16px; } .md--card h2 { font-size: 14px; } .md--card h3 { font-size: 13px; }
.md--card pre { font-size: 11px; padding: 8px; }

/* ----- изображение ----- */
.img-drop {
  border: 2px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface);
  min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; color: var(--text-dim);
}
.img-drop.drop-target, .img-frame.drop-target { border-color: var(--accent); background: var(--accent-soft); }
.img-frame {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-3);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  max-height: 62vh; min-height: 220px;
}
.img-frame--card { min-height: 0; flex: 1; max-height: none; height: 100%; }
.img-view { width: 100%; height: 100%; max-height: 62vh; display: block; }
.img-frame--card .img-view { max-height: none; }
.viewport.drop-files::after {
  content: "Отпустите — добавлю изображение"; position: absolute; inset: 14px;
  border: 2px dashed var(--accent); border-radius: var(--radius-lg); background: rgba(79,110,247,.06);
  display: grid; place-items: center; color: var(--accent-ink); font-weight: 600; pointer-events: none; z-index: 40;
}


/* ---------- методы на узком экране ---------- */
@media (max-width: 860px) {
  .tool__bar { padding: 9px 12px; gap: 6px; }
  .tool__bar .tool__hint { display: none; }
  .tool__stage { padding: 12px; }
  .tool__note { font-size: 12px; padding: 8px 10px; }

  /* квадранты и колонки складываем в одну ленту */
  .board--2x2, .board--3, .board--wrap { grid-template-columns: 1fr; }
  .board--cols {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 8px; -webkit-overflow-scrolling: touch;
  }
  .board--cols > .zone { flex: 0 0 82vw; scroll-snap-align: start; }
  .zone { min-height: 0; }
  .zone__list { min-height: 44px; }

  /* таблицы прокручиваются, а не растягивают страницу */
  .tbl-wrap { max-width: 100%; }
  table.tbl { font-size: 12.5px; }
  table.tbl th, table.tbl td { padding: 7px 8px; }
  .stat-row { gap: 8px; }
  .stat { min-width: 0; flex: 1 1 140px; padding: 8px 10px; }
  .stat__value { font-size: 17px; }

  /* документ: редактор и предпросмотр друг под другом */
  .doc-stage[data-mode="split"] { grid-template-columns: 1fr; grid-template-rows: minmax(220px, 45vh) auto; }
  .doc-edit { min-height: 220px; }

  /* плоскость с осями */
  .plane-wrap { grid-template-rows: minmax(280px, 52vh) 28px; grid-template-columns: 26px minmax(0, 1fr); }
  .plane__q-title { font-size: 11.5px; }
  .plane__q-hint { display: none; }
  .dot { font-size: 11.5px; padding: 4px 9px; max-width: 42vw; }

  /* попарные сравнения в AHP */
  .pairwise__row { grid-template-columns: 1fr; gap: 6px; text-align: center; }
  .pairwise__side.right { text-align: center; }
  .pairwise__slider { min-width: 0; width: 100%; }
  .hat-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .hat-tab { white-space: nowrap; }

  /* деревья и графы */
  .node-canvas { min-height: 320px; }
  .tree-children { margin-left: 12px; padding-left: 10px; }
  .fishbone { grid-template-columns: 1fr; padding: 12px; }
  .fish-svg { display: none; }           /* косточки бессмысленны в одну колонку */
  .fish-row { grid-template-columns: 1fr; }
  .fish-spine-gap { height: 12px; }
  .legend { font-size: 11.5px; gap: 10px; }
}

@media (max-width: 860px) {
  .gantt__grid { min-width: 0; }
  .gantt__row { padding: 0 8px; gap: 6px; font-size: 12.5px; }
  .gantt__row .chip { display: none; }
  .gantt__side-head, .gantt__time-head { padding: 0 8px; font-size: 10.5px; }
}

/* тени по краям подсказывают, что таблица прокручивается вбок */
.tbl-wrap {
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(20, 25, 45, .13), rgba(20, 25, 45, 0)) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(20, 25, 45, .13), rgba(20, 25, 45, 0)) right center / 12px 100% no-repeat scroll;
}

@media (max-width: 860px) {
  /* ручку перетаскивания строк убираем: пальцем всё равно тянется полотно,
     а место в узкой таблице дороже */
  table.tbl td.grip, table.tbl th:first-child:empty { display: none; }
  table.tbl td.rank, table.tbl th.rank { width: 24px; }
}