/* ================================================================
   7. MIND-MAP TREE
   ================================================================ */
.tree-wrap { position: relative; min-width: max-content; }
.canvas.is-outline .tree-wrap { min-width: unset; }

.connectors { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

.tree, .tree ul { list-style: none; display: flex; gap: 16px; position: relative; }
.tree { padding-top: 4px; }
.tree li { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.tree li > ul { margin-top: 38px; }
.tree li.is-collapsed > ul { display: none; }

/* Odd-depth subtrees: vertical stack */
.tree ul[data-vlevel] {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 16px;
}
.tree ul[data-vlevel] > li {
  flex-direction: column;
  align-items: flex-start;
  position: relative;          /* anchor for absolutely-positioned L3 fan */
}
/* Even-depth subtrees (inside vertical): float to the right of parent card,
   absolutely positioned so they don't widen the vertical column */
.tree ul[data-vlevel] > li > ul:not([data-vlevel]) {
  position: absolute;
  top: 0;
  left: calc(100% + 28px);
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  margin-top: 0;
  white-space: nowrap;         /* keep horizontal row from wrapping */
}

/* ================================================================
   RADIAL MIND-MAP layout
   ================================================================ */
.tree.is-radial { display: block; position: relative; }
.tree.is-radial > li {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 210px;
  list-style: none;
}

/* ================================================================
   8. NODE CARD (mind-map)
   ================================================================ */
.node {
  position: relative; width: 210px; padding: 11px 13px;
  background: var(--bg-surface); border: 1px solid var(--bg-line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  transition: transform .18s, border-color .2s, background .2s;
}
.node:hover { background: var(--bg-elevated); border-color: #4a5568; transform: translateY(-1px); }
[data-theme="light"] .node:hover { border-color: #b5afa8; }
.node.is-critical {
  border-color: var(--critical);
  background: linear-gradient(180deg, var(--critical-soft), transparent 60%), var(--bg-surface);
  box-shadow: 0 0 0 1px var(--critical) inset, 0 10px 24px -14px rgba(224,80,64,.35);
}
.node.is-done .node__title { color: var(--done); }
.node.is-done::before { content:"✓"; position:absolute; top:9px; right:11px; font-size:10px; color:var(--done); }
.node { border-color: var(--accent-soft); }

.node__head { display: flex; align-items: flex-start; gap: 7px; }
.node__id { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: var(--accent); padding-top: 2px; flex-shrink: 0; }
.node__title { font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.25; color: var(--ink-100); flex: 1; }
.node__desc { margin-top: 7px; font-size: 13px; line-height: 1.45; color: var(--ink-300); }

.node__dates {
  margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--bg-line);
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 9px; letter-spacing: .05em; color: var(--ink-300); text-transform: uppercase;
}
.node__dates label { display: block; flex: 1; }
.node__dates label + label { text-align: right; }
.node__dates label b { display: block; margin-top: 2px; font-weight: 600; color: var(--ink-100); font-size: 10px; text-transform: none; }
.node__dates input[type="date"] {
  width: 100%; margin-top: 2px; padding: 1px 0; color: var(--ink-100);
  font-family: var(--font-mono); font-size: 10px;
  border-bottom: 1px dashed var(--accent-soft); cursor: text; color-scheme: dark;
}
[data-theme="light"] .node__dates input[type="date"] { color-scheme: light; }
.node__dates input[type="date"]:focus { border-bottom-color: var(--accent); }
.node__dates input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.7); cursor: pointer; opacity: .5; }

.node__deps { margin-top: 7px; font-size: 9px; letter-spacing: .07em; color: var(--ink-400); text-transform: uppercase; }
.node__deps b { color: var(--accent); font-weight: 600; }

[contenteditable="true"] { outline: 0; cursor: text; border-bottom: 1px dashed var(--accent-soft); }
[contenteditable="true"]:focus { border-bottom-color: var(--accent); }
[contenteditable="true"]:empty::before { content: attr(data-placeholder); color: var(--ink-400); }

.node__actions {
  display: flex; margin-top: 9px; padding-top: 9px;
  border-top: 1px dashed var(--bg-line); gap: 5px; justify-content: flex-end;
}
.node-action {
  display: inline-grid; place-items: center; width: 24px; height: 24px;
  border-radius: var(--radius-sm); border: 1px solid var(--bg-line);
  color: var(--ink-300); font-size: 9px; transition: all .15s;
}
.node-action:hover { color: var(--ink-100); border-color: #4a5568; }
.node-action.is-danger:hover { color: var(--danger); border-color: var(--danger); }

.node__toggle {
  position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--bg-elevated); border: 1px solid var(--bg-line);
  color: var(--ink-200); display: grid; place-items: center; font-size: 10px; z-index: 2;
  transition: transform .2s, background .2s, color .2s;
}
.node__toggle:hover { color: var(--ink-100); }
.node.is-critical .node__toggle { border-color: var(--critical); color: var(--critical); }
li.is-collapsed > .node > .node__toggle i { transform: rotate(-90deg); }
.node__toggle i { transition: transform .2s; }

.is-hide-desc  .node__desc  { display: none; }
.is-hide-dates .node__dates { display: none; }

.add-child {
  margin-top: 13px; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--accent); color: var(--bg-deep);
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  transition: transform .15s; z-index: 2;
}
.add-child:hover { transform: translateY(-1px); }