/* experience_editor/tree.css – Tree nodes, depth tinting, active states */
.experience-editor__tree-actions { display: flex; gap: var(--space-1); }
.experience-editor__tree-body:has(.tree-node) > .empty-state { display: none; }

.experience-editor .tree-node {
  --depth: 0;
  --indent: calc(var(--depth) * var(--ee-tree-indent-step) * 1px);
}

/* ── Depth tinting: compounding neutral wash per nesting level ── */
/* Each children container adds 6% of --border-subtle. Nesting compounds: */
/* depth 2 ≈ 12%, depth 3 ≈ 17%, depth 5 ≈ 27% — visible and readable. */
/* Uses --border-subtle (warm stone on warm themes, cool slate on cool). */
.experience-editor .tree-node__children {
  background: color-mix(in srgb, var(--border-subtle) 30%, transparent);
}

/* ── Node row ── */
.experience-editor .tree-node__row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--ee-tree-node-height);
  padding: 0 var(--space-3);
  padding-left: calc(var(--indent) + var(--space-3));
  position: relative;
  transition: background var(--duration-fast) var(--ease-out);
}
/* Semi-transparent hover so depth tint shows through */
.experience-editor .tree-node__row:hover {
  background: color-mix(in srgb, var(--border-subtle) 12%, transparent);
}

/* ── Active node: outline ring + bolder weight (Solution A) ── */
.experience-editor .tree-node__row--active {
  background: var(--accent-subtle);
  font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--accent-primary);
  border-radius: var(--radius-md);
}

/* ── Toggle + spacer (auto-visibility via :has) ── */
.experience-editor .tree-node__toggle {
  display: none; /* shown by :has() when children exist */
  align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: none; background: none;
  color: var(--text-secondary);
  cursor: pointer; padding: 0; flex-shrink: 0;
  outline: none;
}
.experience-editor .tree-node:has(> .tree-node__children > .tree-node) > .tree-node__row-zone > .tree-node__row > .tree-node__toggle,
.experience-editor .tree-node:has(> .tree-node__row-zone > .tree-node__row .tree-node__count:not([hidden])) > .tree-node__row-zone > .tree-node__row > .tree-node__toggle {
  display: flex;
}
.experience-editor .tree-node:has(> .tree-node__children > .tree-node) > .tree-node__row-zone > .tree-node__row > .tree-node__spacer,
.experience-editor .tree-node:has(> .tree-node__row-zone > .tree-node__row .tree-node__count:not([hidden])) > .tree-node__row-zone > .tree-node__row > .tree-node__spacer {
  display: none;
}
.experience-editor .tree-node__arrow {
  font-size: 14px;
  transition: transform var(--duration-fast) var(--ease-out);
}
.experience-editor .tree-node__toggle[aria-expanded="true"] .tree-node__arrow {
  transform: rotate(90deg);
}
.experience-editor .tree-node__spacer { width: 18px; flex-shrink: 0; }

/* ── Link + badge + name ── */
.experience-editor .tree-node__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1; min-width: 0;
  text-decoration: none;
  color: var(--text-primary);
  outline: none;
}
.experience-editor .tree-node__badge {
  display: flex;
  align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: var(--accent-primary);
  color: var(--text-on-accent);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.experience-editor .tree-node__badge .material-symbols-rounded { font-size: 16px; }
.experience-editor .tree-node__name {
  font-size: var(--text-xs);
  line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Child count badge (shown on collapsed DM nodes) ── */
.experience-editor .tree-node__count {
  font-size: 10px;
  line-height: 1;
  color: var(--text-tertiary);
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* ── Non-draggable nodes (DMs) — preserve handle space for alignment ── */
.experience-editor .tree-node--no-drag .tree-node__drag-handle {
  visibility: hidden;
  pointer-events: none;
}

/* ── Element nodes: smaller name to distinguish from parent DMs ── */
.experience-editor .tree-node[data-node-type="element"] .tree-node__name {
  color: var(--text-secondary);
}

/* ── Removal types: muted + "Deprecated" badge ── */
.experience-editor .tree-node--removal > .tree-node__row-zone > .tree-node__row { opacity: 0.6; }
.experience-editor .tree-node--removal > .tree-node__row-zone > .tree-node__row:hover { opacity: 0.8; }
.experience-editor .tree-node__removal-badge {
  font-size: 9px;
  line-height: 1;
  color: var(--text-tertiary);
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Channel toggles in step editor ── */
.ee-channels { padding: var(--space-3) 0; }
.ee-channels__label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}
.ee-channels__toggles { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ee-channels__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.ee-channels__toggle:has(input:checked) {
  background: var(--accent-muted);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}
.ee-channels__toggle--blocked { opacity: 0.4; cursor: not-allowed; }
.ee-channels__toggle-input { display: none; }
.ee-channels__toggle-label { line-height: 1; }

/* ── 3-tier badge modifiers (Solution A, Decision 1) ── */
.experience-editor .tree-node__badge--container {
  background: var(--text-secondary);
  color: var(--text-on-accent);
}
.experience-editor .tree-node__badge--interactive {
  background: var(--accent-primary);
  color: var(--text-on-accent);
}
.experience-editor .tree-node__badge--reference {
  background: var(--surface-base);
  color: var(--text-secondary);
  box-shadow: inset 0 0 0 1.5px var(--text-secondary);
}

/* ── Header icon-button active modifier (e.g. Build Mode toggle) ── */
.experience-editor .icon-btn--active {
  background: var(--accent-primary);
  color: var(--text-on-accent);
}
.experience-editor .icon-btn--active:hover {
  background: var(--accent-primary);
  color: var(--text-on-accent);
}

/* ── Build Mode + smart add-cluster (Solution A, Decision 5) ── */
.experience-editor .tree-node__row-zone { position: relative; }
.experience-editor .tree-node__row-zone:hover .tree-node__row {
  background: color-mix(in srgb, var(--border-subtle) 12%, transparent);
}

/* Build Mode menu — uses the canonical .context-menu primitive; this rule
   only adds the hover-trigger + bridging behavior. Position is set inline
   by tree-build-mode (cursor-anchored). The cursor sits at the menu's
   bottom-left so moving up enters the menu without a hover gap. */
.experience-editor .tree-node__add-cluster {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.experience-editor.build-on .tree-node__row-zone:hover .tree-node__add-cluster,
.experience-editor.build-on .tree-node__add-cluster:hover {
  opacity: 1;
  pointer-events: auto;
}

/* Active row hover — must come AFTER the build-mode `.tree-node__row-zone:hover
   .tree-node__row` rule above (same specificity 0,4,0; source order is the
   tiebreaker). Without this, the build-mode neutral hover wash flattens the
   active row's accent bg. */
.experience-editor .tree-node__row-zone:hover .tree-node__row--active,
.experience-editor .tree-node__row--active:hover {
  background: var(--accent-muted);
}