/* ============================================================
   TREE VIEW — финальная версия CSS
   Структура (порядок секций фиксирован, не менять):
     1. OVERLAY / TOOLBAR / CANVAS / EDGES (каркас)
     2. CARD (внешний вид .tree-node) + рейл + порты
     3. SECTIONS базовые (заголовки, прогресс, чипы)
     4. SECTION --calendar  (точный вид по референсу)
     5. SECTION --task
     6. SECTION --result + чипы текст/visual
     7. УТИЛИТЫ / СКРЫТИЕ ненужного
   ============================================================ */


/* =========================================================
   1. OVERLAY / TOOLBAR / VIEWPORT
   ========================================================= */
.tree-overlay{
    position:fixed; inset:0;
    display:none; z-index:9999; overflow:hidden;
    background:#ffffff;
    color:#1a2030;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
.tree-overlay.is-open{ display:block; }

.tree-viewport{
    position:absolute; inset:0;
    overflow:hidden;
    background:#ffffff;
    cursor:grab;
}
.tree-viewport.is-panning{ cursor:grabbing; }
.tree-viewport.is-zoom-low .tree-card{ box-shadow:none; }

.tree-canvas{
    position:absolute; top:0; left:0;
    width:1px; height:1px;
    overflow:visible;
    transform-origin:0 0;
    will-change:transform;
    backface-visibility:hidden;
    background:transparent;
}
/* Бесконечная dot-grid подложка */
.tree-canvas::before{
    content:"";
    position:absolute;
    left:-50000px; top:-50000px;
    width:100000px; height:100000px;
    background-image:radial-gradient(circle,#d7dbe3 1px,transparent 1px);
    background-size:24px 24px;
    background-repeat:repeat;
    pointer-events:none;
    z-index:0;
}
.tree-canvas > *{ position:absolute; z-index:1; }


/* ---------- TOOLBAR (плавающая) ---------- */
.tree-toolbar{
    position:absolute;
    top:12px; left:50%;
    transform:translateX(-50%);
    display:flex; align-items:center; gap:6px;
    padding:6px 8px;
    background:#ffffff;
    border:1px solid #e5e8ef;
    border-radius:10px;
    box-shadow:0 4px 16px rgba(0,0,0,0.08);
    z-index:10;
    user-select:none;
}
.tree-toolbar__btn{
    background:#f4f6fa;
    border:1px solid #dfe3ec;
    color:#1a2030;
    padding:6px 12px;
    border-radius:6px;
    cursor:pointer;
    font-size:13px;
    line-height:1;
}
.tree-toolbar__btn:hover{ background:#eceff5; }
.tree-toolbar__btn.is-primary{
    background:#3e7bd6; border-color:#3568bb; color:#fff;
}
.tree-toolbar__btn.is-primary:hover{ background:#2e69bf; }
.tree-toolbar__btn.is-danger{
    background:#ffeaea; border-color:#f5c2c2; color:#a61b1b;
}
.tree-toolbar__btn.is-danger:hover{ background:#ffd9d9; }
.tree-toolbar__spacer{
    width:1px; height:18px;
    background:#e5e8ef;
    margin:0 4px;
}
.tree-toolbar__close{
    background:transparent; border:none;
    width:28px; height:28px;
    border-radius:6px;
    font-size:16px;
    color:#6b7280;
    cursor:pointer;
}
.tree-toolbar__close:hover{ background:#f4f6fa; color:#1a2030; }


/* ---------- EDGES (SVG-связи между узлами) ---------- */
.tree-edges{
    position:absolute; left:0; top:0;
    width:1px; height:1px;
    overflow:visible;
    pointer-events:none;
    z-index:0;
}
.tree-edge{
    fill:none;
    stroke:#9aa3b2;
    stroke-width:2;
    pointer-events:stroke;
    cursor:pointer;
}
.tree-edge:hover{ stroke:#3e7bd6; }
.tree-edge.is-selected{ stroke:#3e7bd6; stroke-width:3; }


/* ---------- TOAST / LOADING / EMPTY ---------- */
.tree-loading{
    position:absolute;
    top:60px; left:50%;
    transform:translateX(-50%);
    background:#222a3a;
    color:#fff;
    padding:8px 14px;
    border-radius:8px;
    font-size:13px;
    z-index:10001;
    box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.tree-hidden{ display:none !important; }

.tree-empty{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    color:#6b7280;
    pointer-events:none;
}
.tree-empty__hint{ font-size:12px; opacity:.7; margin-top:4px; }


/* ---------- INSPECTOR (правая панель) ---------- */
.tree-inspector{
    position:absolute;
    top:60px; right:12px;
    width:280px;
    background:#ffffff;
    border:1px solid #e5e8ef;
    border-radius:10px;
    padding:14px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    display:none;
    z-index:5;
}
.tree-inspector.is-open{ display:block; }
.tree-inspector__row{ display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.tree-inspector__label{ font-size:11px; color:#6b7280; text-transform:uppercase; letter-spacing:.05em; }
.tree-inspector__input,
.tree-inspector__select{
    width:100%;
    padding:6px 10px;
    border:1px solid #dfe3ec;
    border-radius:6px;
    font-size:13px;
    background:#f8f9fc;
    color:#1a2030;
    outline:none;
}
.tree-inspector__input:focus,
.tree-inspector__select:focus{ border-color:#3e7bd6; background:#fff; }


/* =========================================================
   2. CARD (внешний контейнер узла)
   ========================================================= */
.tree-node{
    position:absolute;
    width:320px;
    box-sizing:border-box;
    padding:14px 14px 16px 18px;
    border-radius:22px;
    border:1.5px solid #c8ccd3;
    background:rgba(220,224,230,0.55);
    color:#1c2230;
    font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    font-size:14px;
    line-height:1.35;
    box-shadow:0 12px 28px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10);
    display:flex;
    flex-direction:column;
    gap:10px;
    user-select:none;
}
.tree-node.is-selected{ outline:4px solid #3e7bd6; outline-offset:3px; }
.tree-node.is-dragging{ box-shadow:0 18px 40px rgba(0,0,0,0.30); cursor:grabbing; }


/* ---------- Левый акцентный рейл ---------- */
.tree-card__rail{
    position:absolute;
    left:6px; top:14px; bottom:14px;
    width:3px;
    border-radius:3px;
    background:linear-gradient(180deg,#ff9a3d 0%,#ff7a1a 50%,#b34a00 100%);
    pointer-events:none;
    z-index:1;
}


/* ---------- HEADER (#id + статус-селект) ---------- */
.tree-card__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:30px;
    margin:0;
}
.tree-card__header-id{
    font-weight:700;
    font-size:14px;
    color:#5b6373;
    background:rgba(255,255,255,0.55);
    border:1px solid rgba(0,0,0,0.06);
    border-radius:8px;
    padding:3px 10px;
    line-height:1;
}
.tree-card__header-spacer{ flex:1; }
.tree-card__header-status-select{
    height:26px;
    padding:3px 10px;
    border-radius:999px;
    background:#dcefe2;
    border:1px solid #b8dcc4;
    color:#1c2230;
    font-size:13px;
    line-height:1;
    cursor:pointer;
    outline:none;
    appearance:none;
    -webkit-appearance:none;
}
.tree-card__header-status-select:hover{ background:#cfe5d7; }


/* ---------- Порты для соединений ---------- */
.tree-node__port{
    position:absolute;
    width:10px; height:10px;
    border-radius:50%;
    background:#9aa3b2;
    border:2px solid #fff;
    box-shadow:0 1px 3px rgba(0,0,0,0.25);
    cursor:crosshair;
    opacity:0;
    transition:opacity .15s ease;
    z-index:3;
}
.tree-node:hover .tree-node__port{ opacity:1; }
.tree-node__port--top   { top:-5px;    left:calc(50% - 5px); }
.tree-node__port--right { right:-5px;  top:calc(50% - 5px);  }
.tree-node__port--bottom{ bottom:-5px; left:calc(50% - 5px); }
.tree-node__port--left  { left:-5px;   top:calc(50% - 5px);  }


/* =========================================================
   3. SECTIONS — базовые правила (общие для всех плашек)
   ========================================================= */
.tree-card__section{
    border-radius:14px;
    overflow:hidden;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    position:relative;
}
.tree-card__section-head{
    display:flex; align-items:center; gap:8px;
    padding:10px 14px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    cursor:pointer;
    user-select:none;
}
.tree-card__section-icon{ font-size:14px; }
.tree-card__section-title{ flex:1; }
.tree-card__section-chevron{ opacity:.6; font-size:12px; transition:transform .15s ease; }
.tree-card__section.is-collapsed .tree-card__section-chevron{ transform:rotate(-90deg); }
.tree-card__section.is-collapsed .tree-card__section-body{ display:none; }
.tree-card__section-body{
    padding:10px 14px 12px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

/* Editable-поля внутри секций */
.tree-card__editable{
    background:transparent;
    border:none;
    outline:none;
    color:inherit;
    font:inherit;
    padding:0;
    line-height:1.35;
    word-break:break-word;
}
.tree-card__editable.is-empty::before{
    content:attr(data-placeholder);
    color:#9aa3b2;
    pointer-events:none;
}
.tree-card__row-title{ font-weight:600; font-size:14px; }
.tree-card__row-text { font-size:14px; }
.tree-card__row-meta { font-size:12px; opacity:.7; }

/* Прогресс-бары (общие) */
.tree-card__progress{
    height:5px;
    background:#e6ecf3;
    border-radius:4px;
    position:relative;
    overflow:hidden;
}
.tree-card__progress::after{
    content:"";
    position:absolute; left:0; top:0; bottom:0;
    width:var(--p,0%);
    border-radius:4px;
    background:#9aa3b2;
    transition:width .25s ease;
}


/* =========================================================
   4. SECTION --calendar (плашка «ЗАПИСЬ КАЛЕНДАРЯ»)
   Точно по референсу: голубовато-серая шапка + кремовое тело,
   без текста публикации/прогресса/рейла/«#1».
   ========================================================= */
.tree-card__section--calendar{
    background:#ffffff;                   /* кремовое тело */
    border:1px solid #cdd6e0;
    border-radius:14px;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.tree-card__section--calendar .tree-card__section-head{
    background:#dfe6ef;                   /* голубовато-серая шапка */
    color:#1c2230;
    border-bottom:1px solid #cdd6e0;
    padding:11px 14px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.06em;
}
.tree-card__section--calendar .tree-card__section-icon{
    width:18px; height:18px;
    display:inline-block;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a6b8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>") center/contain no-repeat;
    /* спрятать исходный emoji */
    font-size:0; color:transparent;
}
/* removed: legacy --calendar body override (bg+min-height) */
/* removed: was hiding all rows in --calendar section after declarative refactor */


/* =========================================================
   5. SECTION --task (плашка «ЗАДАЧА»)
   Тёмно-коричневая шапка + светлое тело.
   ========================================================= */
.tree-card__section--task{
    background:#ffffff;
    border:1px solid #d8ccbf;
    border-radius:14px;
    box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.tree-card__section--task .tree-card__section-head{
    background:#f5efe8;
    color:#2a1a10;
    padding:9px 14px;
    font-size:11px;
    letter-spacing:.1em;
    border-bottom:none;
}
.tree-card__section--task .tree-card__section-icon{ color:#2a1a10; }
.tree-card__section--task .tree-card__section-chevron{ color:#2a1a10; }
.tree-card__section--task .tree-card__section-body{
    background:#ffffff;
    color:#2a1a10;
    font-size:13px;
    line-height:1.45;
    padding:12px 14px;
}


/* =========================================================
   6. SECTION --result (плашка «РЕЗУЛЬТАТ») + чипы текст/visual
   Мятная шапка + белое тело + зелёные чипы и зелёный прогресс.
   ========================================================= */
.tree-card__section--result{
    background:#ffffff;
    border:1px solid #c6e2cf;
    border-radius:14px;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    overflow:hidden;
}
.tree-card__section--result .tree-card__section-head{
    background:#dcefe2;
    color:#1c2230;
    border-bottom:1px solid #c6e2cf;
    padding:11px 14px;
    font-size:12px;
    letter-spacing:.08em;
}
.tree-card__section--result .tree-card__section-icon{ color:#2e8a55; }
.tree-card__section--result .tree-card__section-chevron{ color:#5a8a6f; }
.tree-card__section--result .tree-card__section-body{
    background:#ffffff;
    color:#1c2230;
    padding:12px 14px;
}
.tree-card__section--result .tree-card__row-text,
.tree-card__section--result .tree-card__row-meta{
    background:transparent;
    color:#1c2230;
    font-size:14px;
    line-height:1.4;
}

/* Зелёный прогресс */
.tree-card__section--result .tree-card__progress{
    height:5px;
    background:#e6ecf3;
    border-radius:4px;
}
.tree-card__section--result .tree-card__progress::after{
    background:linear-gradient(90deg,#2e8a55 0%,#4ddc92 100%);
}

/* Чипы «текст / visual» */
.tree-card__checks{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:4px;
}
.tree-card__check{
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:26px;
    padding:3px 10px;
    border-radius:999px;
    background:#dcefe2;
    border:1px solid #b8dcc4;
    color:#1c2230;
    font-size:13px;
    line-height:1;
}
.tree-card__check:hover{ background:#cfe5d7; }
.tree-card__check-box{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:16px; height:16px;
    border-radius:4px;
    background:#34c77b;
    color:#ffffff;
    font-size:11px;
    font-weight:700;
}


/* =========================================================
   7. УТИЛИТЫ / СКРЫТИЕ ненужного
   ========================================================= */
/* Жесточее зум: при сильном уменьшении гасим тени узлов */
.tree-viewport.is-zoom-low .tree-node{ box-shadow:none; }

/* Класс для скрытия элементов из JS-кода */
.tree-hidden{ display:none !important; }

/* Безопасные значения, чтобы случайные глобальные стили
   Bitrix24 не ломали внутренние блоки оверлея. */
.tree-overlay,
.tree-overlay *{
    box-sizing:border-box;
}
.tree-overlay button{ font-family:inherit; }
.tree-overlay input,
.tree-overlay select,
.tree-overlay textarea{
    font-family:inherit;
    color:inherit;
}
/* === cleanup: deprecated tree-card decorations (after declarative refactor) === */
.tree-card__progress,
.tree-card__progress::after,
.tree-card__checks,
.tree-card__check,
.tree-card__check-box,
.tree-card__row-meta,
.tree-card__section--task .tree-card__row-meta,
.tree-card__section--calendar .tree-card__row-meta,
.tree-card__section--result .tree-card__progress,
.tree-card__section--result .tree-card__progress::after { display: none !important; }

/* === sync calendar section visuals with task/result === */
.tree-card__section--calendar .tree-card__section-body{
    background:#ffffff;
    color:#1c2230;
    padding:12px 14px;
}
.tree-card__section--calendar .tree-card__row-text,
.tree-card__section--calendar .tree-card__row-meta{
    background:transparent;
    color:#1c2230;
    font-size:14px;
    line-height:1.4;
}

/* Edge hitbox for click-to-delete */
.tree-edge-group { cursor: pointer; }
.tree-edge-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; }
.tree-edge-group:hover .tree-edge { stroke: #e53935; stroke-width: 3; }
.tree-edge-group.is-selected .tree-edge { stroke: #e53935; stroke-width: 3; }

/* ===== Date chip on node header ===== */
.tree-card__date-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin-left: 6px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  background: #efefef;
  color: #888;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
  position: relative;
}
.tree-card__date-chip:hover { background: #e4e4e4; color: #555; }
.tree-card__date-chip[data-has-date="true"] {
  background: #e3f2fd;
  color: #1976d2;
  border-color: #bbdefb;
}
.tree-card__date-chip[data-has-date="true"]:hover { background: #d6ebfb; }
.tree-card__date-chip-icon { font-size: 12px; line-height: 1; }
.tree-card__date-chip-label { white-space: nowrap; }
.tree-card__date-chip-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  z-index: 1;
  border: 0;
  padding: 0;
  margin: 0;
}
.tree-card__date-chip-clear {
  display: none;
  position: relative;
  z-index: 2;
  margin-left: 2px;
  padding: 0 4px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  opacity: .6;
  cursor: pointer;
}
.tree-card__date-chip-clear:hover { opacity: 1; background: rgba(0,0,0,.08); }
.tree-card__date-chip[data-has-date="true"] .tree-card__date-chip-clear { display: inline-block; }

/* Inspector hidden (replaced by toolbar) */
.tree-inspector { display: none !important; }

.tree-card__date-chip-input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  background: transparent;
}


/* ---- Timeline (chain of period segments) ---- */


/* ---- Timeline status colors + today line ---- */
.tt-today { position:absolute; top:-4px; bottom:-4px; width:0; border-left:2px dashed #dc2626; pointer-events:none; z-index:6; }


/* ===== STEP 7: branches & card auto-layout ===== */
.tt-branch{ position:absolute; left:0; top:0; pointer-events:none; overflow:visible; z-index:2; }
.tt-branch path{ fill:none; stroke:#8a6a3b; stroke-width:2; stroke-linecap:round; opacity:.85; }
.tree-card.is-top   { transform: translate(-50%, -100%); }
.tree-card.is-bottom{ transform: translate(-50%, 0); }


/* ===== STEP 10: resize handle on right edge of segment ===== */
.tt-resize-handle{
  position:absolute; top:0; right:-3px; width:6px; height:100%;
  cursor: ew-resize; z-index:7; background:transparent;
}
.tt-resize-handle:hover{ background:rgba(0,0,0,.12); }

/* Шаг A — resize handles для отрезков */

/* ====== Шаг B-new: свободная плашка отрезка ====== */
.tt-period-bar{
  position: absolute;
  height: 48px;
  min-width: 160px;
  border-radius: 26px;
  background: linear-gradient(90deg,#3f5ef6 0%,#7fb0ff 100%);
  box-shadow: 0 12px 32px rgba(63,94,246,.35);
  color:#fff;
  display:flex; align-items:center;
  padding: 0 22px 0 56px;
  user-select:none;
  cursor:grab;
  font: 500 14px/1 "Inter","Segoe UI",Arial,sans-serif;
  z-index: 3;
}
.tt-period-bar.is-dragging{ cursor:grabbing; opacity:.92; }
.tt-period-bar__icon{
  position:absolute; left:10px; top:50%; transform: translateY(-50%);
  width:34px; height:34px; border-radius:10px;
  background: rgba(255,255,255,.20);
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
}
.tt-period-bar__label{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  letter-spacing: .2px;
}
.tt-period-bar__handle{
  position:absolute; top:0; bottom:0; width:10px;
  cursor:ew-resize; background:rgba(255,255,255,.25);
  z-index:4; border-radius:10px;
  opacity:0; transition:opacity .15s;
}
.tt-period-bar:hover .tt-period-bar__handle{ opacity:1; }
.tt-period-bar__handle--left{  left:0;  border-radius:26px 0 0 26px; }
.tt-period-bar__handle--right{ right:0; border-radius:0 26px 26px 0; }

/* пунктирная связь period→node */
.tt-period-link{ stroke:#5b6ef0; stroke-width:1.5; stroke-dasharray:4 4; fill:none; opacity:.65; }

/* ---- Period→card attach lines (steps 5–8) ---- */
.tt-link-line   { stroke:#8b5cf6; stroke-width:2; stroke-dasharray:6 4; fill:none; pointer-events:none; }
.tt-link-detach { fill:#fff; stroke:#8b5cf6; stroke-width:2; cursor:pointer; }
.tt-link-detach:hover { fill:#ef4444; stroke:#ef4444; }
.tt-link-x      { fill:#8b5cf6; font:700 12px sans-serif; pointer-events:none; user-select:none; }
.tt-link-detach-x { fill:#8b5cf6; font:700 12px sans-serif; pointer-events:none; user-select:none; }
.tt-link-detach:hover + .tt-link-x { fill:#fff; }
.tt-link-detach:hover + .tt-link-detach-x { fill:#fff; }

/* ===== Шаг 11: точки-порты + временная нить + подсветка карточки ===== */

/* Точки-порты на полосе */
.tt-bar-port {
  fill: rgba(139, 92, 246, 0.35); /* бледно */
  stroke: #8b5cf6;
  stroke-width: 1.5;
  cursor: crosshair;
  transition: fill 120ms ease, r 120ms ease;
}
.tt-period-bar:hover ~ .tt-bar-port,    /* если порты живут вне полосы */
.tt-bar-port:hover,
.tt-bar-port.is-active {
  fill: #8b5cf6;
  r: 8;
}

/* Временная "нить" во время drag */
.tt-link-temp {
  stroke: #8b5cf6;
  stroke-width: 2;
  stroke-dasharray: 4 4;
  fill: none;
  pointer-events: none;
  opacity: 0.85;
}

/* Подсветка карточки-кандидата при drag нити */
.tree-card.tt-card-drophint {
  outline: 3px solid #8b5cf6;
  outline-offset: 2px;
  border-radius: 12px;
}

/* ===== Фикс кликов/ховера для портов и линий ===== */
/* SVG-контейнер .tree-edges в базовом CSS имеет pointer-events:none + z-index:0,
   из-за чего кружки-порты ложатся под полосами и не ловят pointerdown.
   Поднимаем сам SVG над полосами и включаем события точечно на интерактивных элементах. */
.tree-edges { z-index: 5; }
.tt-bar-port { pointer-events: all; }
.tt-link-group, .tt-link-group * { pointer-events: all; }


/* =====================================================================
   PORTS v2 — точки-порты на полосе периода (div-based)
   Спека: edge (left/right) — связь период↔период
          mid  (top/bottom)  — связь период↔карточка, центр через left:50%
   ===================================================================== */

/* Базовый класс */
.tt-bar { position: relative; }

.tt-bar-port {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.2);
    pointer-events: all;
    cursor: crosshair;
    transition: transform .12s ease, box-shadow .12s ease;
    z-index: 6;
    box-sizing: border-box;
}

/* --- EDGE (краевые, связь период<->период) --- */
.tt-bar-port--edge { background: #3b82f6; }
.tt-bar-port--edge.is-left  { left: -6px;  top: 50%; transform: translateY(-50%); }
.tt-bar-port--edge.is-right { right: -6px; top: 50%; transform: translateY(-50%); }
.tt-bar-port--edge.is-left:hover  { transform: translateY(-50%) scale(1.25); }
.tt-bar-port--edge.is-right:hover { transform: translateY(-50%) scale(1.25); }

/* --- MID (центральные, связь период<->карточка). Центр через left:50% — "бегает" сам --- */
.tt-bar-port--mid { background: #f59e0b; }
.tt-bar-port--mid.is-top    { left: 50%; top: -6px;    transform: translateX(-50%); }
.tt-bar-port--mid.is-bottom { left: 50%; bottom: -6px; transform: translateX(-50%); }
.tt-bar-port--mid.is-top:hover    { transform: translateX(-50%) scale(1.25); }
.tt-bar-port--mid.is-bottom:hover { transform: translateX(-50%) scale(1.25); }

/* --- Состояния --- */
.tt-bar-port.is-dragging      { box-shadow: 0 0 0 4px rgba(59,130,246,.30), 0 0 0 1px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.2); }
.tt-bar-port.is-drop-target   { box-shadow: 0 0 0 4px rgba(34,197,94,.50),  0 0 0 1px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.2); }
.tt-bar-port.is-incompatible  { box-shadow: 0 0 0 4px rgba(239,68,68,.50),  0 0 0 1px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.2); }

/* =====================================================================
   EDGES v2 — слой нитей
   ===================================================================== */
.tree-edges { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.tree-edges path,
.tree-edges line { pointer-events: stroke; }

/* Нити период<->период */
.tree-edge--p2p {
    stroke: #3b82f6;
    stroke-width: 2;
    fill: none;
}

/* Нити период<->карточка */
.tree-edge--p2c {
    stroke: #f59e0b;
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 6 4;
}

/* =====================================================================
   ×-кнопка на нити (разрыв связи)
   ===================================================================== */
.tree-edge-x {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    color: #ef4444;
    border: 1px solid rgba(0,0,0,.15);
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 11px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    pointer-events: all;
    cursor: pointer;
    z-index: 7;
    user-select: none;
}
.tree-edge-x:hover { background: #fee2e2; }