/* A campaign-builder canvas with explicit conditions and alternate routes. */
.campaign-tree.case-scene { padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; min-height: 0; color: #203b60; container-type: inline-size; }
.tree-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; color: #7a8ca5; }
.tree-toolbar>div { display: flex; align-items: center; gap: 8px; }
.tree-brand-dot { width: 7px; height: 7px; border-radius: 50%; background: #f4d35b; flex-shrink: 0; }
.tree-toolbar strong { font-size: 12px; color: #38557f; font-weight: 600; line-height: 1.3; }
.tree-mode { font-size: 8px; padding: 4px 7px; background: #eef2fb; border: 1px solid #dce4f3; border-radius: 5px; color: #6e88b4; }
.tree-toolbar .scene-motion-toggle { display: none; font-size: 9px; border-color: #d5dfec; }
.has-js .tree-toolbar .scene-motion-toggle { display: inline-flex; }
.tree-canvas { position: relative; height: 754px; margin-top: 19px; isolation: isolate; }
.tree-canvas::before { content: ''; position: absolute; inset: -10px -12px; z-index: -1; pointer-events: none; background-image: radial-gradient(#b4c6e270 .7px,transparent .7px); background-size: 20px 20px; mask-image: radial-gradient(ellipse at 50% 48%,#000 25%,transparent 74%); }
.tree-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tree-edges { fill: none; stroke: #cad7ea; stroke-width: 1.25; }
.tree-edges path { transition: stroke .4s,stroke-width .4s,opacity .4s; }
.tree-edges path[data-state='complete'] { stroke: #86a7e6; stroke-width: 1.6; }
.tree-edges path[data-state='active'] { stroke: #426dce; stroke-width: 1.8; }
.tree-edges path[data-tree-edge='followup-replied'] { stroke-dasharray: 3 4; }
.tree-traveler-halo { fill: #f4d35b; opacity: .2; }
.tree-traveler { fill: #f4d35b; }
.tree-traveler,.tree-traveler-halo { visibility: hidden; }
.campaign-tree.is-traveling .tree-traveler,.campaign-tree.is-traveling .tree-traveler-halo { visibility: visible; }
.tree-block { position: absolute; border: 1px solid #d4dfef; background: #fffefb; border-radius: 10px; box-shadow: 0 6px 18px #203d6707; transition: color .5s,border-color .5s,background .5s,box-shadow .5s; }
.tree-block::before,.tree-block::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border: 1px solid #b9cbe6; border-radius: 50%; background: #fffefb; }
.tree-block::before { top: -4px; }
.tree-block::after { bottom: -4px; }
.tree-entry { top: 14px; left: 30%; width: 40%; height: 46px; display: flex; justify-content: center; align-items: center; gap: 9px; background: #f1f5fc; }
.tree-entry::before { display: none; }
.tree-entry>span { width: 7px; height: 7px; border-radius: 50%; background: #f4d35b; flex-shrink: 0; }
.tree-entry strong { font-size: 12px; line-height: 1.3; font-weight: 500; }
.tree-action { display: flex; align-items: center; gap: 12px; height: 88px; padding: 17px 19px; font-family: Manrope,sans-serif; color: #29466f; text-align: left; cursor: pointer; }
.tree-action:disabled { cursor: default; opacity: 1; }
.tree-invitation { left: 24%; top: 100px; width: 52%; height: 76px; }
.tree-linkedin-message { left: 1.5%; top: 345px; width: 44%; }
.tree-email { left: 54.5%; top: 345px; width: 44%; }
.tree-followup { left: 54.5%; top: 635px; width: 44%; height: 80px; }
.tree-channel { width: 39px; height: 42px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid #dce5f4; border-radius: 10px; background: #eff3fc; color: #315dbe; transition: color .5s,background .5s,border-color .5s; }
.tree-linkedin { font-size: 23px; font-weight: 700; line-height: 1; }
.tree-channel svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.tree-action>span:nth-child(2) { display: grid; gap: 6px; min-width: 0; }
.tree-action strong { font-size: 17px; line-height: 1.2; font-weight: 600; letter-spacing: -.3px; }
.tree-action>span:nth-child(2)>span { font-size: 9px; line-height: 1.5; color: #8b9db7; transition: color .5s; }
.tree-check { position: absolute; right: 11px; top: 10px; font-style: normal; font-size: 8px; color: #6f91d0; opacity: 0; transition: opacity .5s; }
.tree-condition { left: 30%; width: 40%; height: 60px; padding: 12px 18px; display: flex; align-items: center; justify-content: center; gap: 12px; background: #f3f6fc; border-color: #c7d6ec; }
.condition-short { display: none; }
.tree-loop-label { position: absolute; top: 488px; left: 81%; font-size: 7px; color: #93a8c7; background: #fafaf6; padding: 2px 4px; }
.tree-connected { top: 220px; }
.tree-replied { top: 480px; }
.tree-diamond { width: 15px; height: 15px; flex-shrink: 0; transform: rotate(45deg); border: 1px solid #8da9d6; border-radius: 3px; background: #e5ecfa; }
.tree-condition>span:last-child { display: grid; gap: 5px; }
.tree-condition strong { font-size: 12px; line-height: 1.3; font-weight: 600; }
.tree-condition>span:last-child>span { font-size: 8px; color: #8fa2bf; line-height: 1.4; }
.tree-branch { position: absolute; z-index: 1; display: grid; place-items: center; min-width: 35px; height: 24px; padding: 4px 8px; border: 1px solid #d8e2f0; border-radius: 6px; background: #fafbf9; color: #8c9eba; font: 500 9px/1.2 Manrope,sans-serif; transform: translateX(-50%); }
button.tree-branch { cursor: pointer; }
button.tree-branch:disabled { opacity: 1; cursor: default; }
.branch-connected-yes { top: 302px; left: 23.4375%; }
.branch-connected-no { top: 302px; left: 76.5625%; }
.branch-reply-yes { top: 564px; left: 23.4375%; }
.branch-reply-no { top: 564px; left: 76.5625%; }
.tree-branch[aria-pressed='true'],.tree-branch[data-active='true'] { border-color: #c3d1ee; color: #3159b6; background: #edf2fd; }
.tree-branch[aria-pressed='true']::before,.tree-branch[data-active='true']::before { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #f4d35b; left: -3px; top: -3px; }
.tree-stop { left: 1.5%; top: 635px; width: 44%; height: 80px; display: flex; align-items: center; gap: 11px; padding: 15px 17px; background: #f1f5fc; }
.tree-stop::after { display: none; }
.tree-stop-icon { width: 31px; height: 34px; display: grid; place-items: center; flex-shrink: 0; border-radius: 8px; border: 1px solid #d1dff2; background: #e6edf9; color: #6f8dbe; font-size: 12px; }
.tree-stop>span:nth-child(2) { display: grid; gap: 5px; }
.tree-stop strong { font-size: 13px; line-height: 1.3; font-weight: 600; }
.tree-stop>span:nth-child(2)>span { color: #8a9db9; font-size: 8px; line-height: 1.5; }
.tree-block[data-state='active'] { border-color: #2c56cb; box-shadow: 0 10px 25px #264eb918; }
.tree-action[data-state='active'] { color: #fffef7; background: #2853cb; }
.tree-action[data-state='active'] .tree-channel { color: #fffef7; background: #456dd4; border-color: #7393e5; }
.tree-action[data-state='active']>span:nth-child(2)>span { color: #c9d7ff; }
.tree-condition[data-state='active'] { background: #edf2fc; }
.tree-condition[data-state='active'] .tree-diamond { border-color: #d3b446; background: #f4d35b; }
.tree-block[data-state='complete'] .tree-check { opacity: 1; }
.tree-stop[data-state='active'] { color: #3157b2; border-color: #b5c8ed; background: #edf2fc; }
.tree-stop[data-state='active'] .tree-stop-icon { border-color: #f4d35b; background: #f4d35b; color: #3155a9; }
.tree-stop[data-state='active'] .tree-check { opacity: 1; }
.tree-action:focus-visible,.tree-branch:focus-visible,.sequence-replay:focus-visible { outline: 3px solid #d3ad36; outline-offset: 4px; }
.sequence-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #dfe6ef; padding-top: 9px; font-size: 9px; line-height: 1.5; color: #8398b7; }
.sequence-replay { display: none; align-items: center; justify-content: flex-end; gap: 5px; min-height: 44px; border: 0; padding: 8px 0 8px 10px; background: transparent; color: #5072b2; font: 500 9px/1.4 Manrope,sans-serif; cursor: pointer; }
.has-js .sequence-replay { display: flex; }
.sequence-replay>span:first-child { font-size: 16px; }
.campaign-tree figcaption { font-size: 8px; line-height: 1.6; text-align: center; margin: 7px 0 0; color: #99a6b8; }
@container(max-width:600px) {
  .tree-action { padding-inline: 14px; gap: 10px; }
  .tree-action strong { font-size: 15px; }
  .tree-action>span:nth-child(2)>span { font-size: 8px; }
  .tree-channel { width: 32px; height: 37px; }
  .tree-linkedin { font-size: 20px; }
  .tree-condition { padding-inline: 13px; gap: 10px; }
  .tree-condition strong { font-size: 11px; }
  .tree-condition>span:last-child>span { font-size: 7px; }
  .tree-diamond { width: 13px; height: 13px; }
  .tree-entry strong { font-size: 11px; }
  .tree-stop { padding-inline: 12px; gap: 9px; }
  .tree-stop strong { font-size: 12px; }
  .tree-stop-icon { width: 27px; height: 30px; }
}
@container(max-width:440px) {
  .tree-toolbar { gap: 8px; }
  .tree-toolbar strong { font-size: 11px; }
  .tree-mode { display: none; }
  .tree-canvas { margin-top: 16px; }
  .tree-entry { left: 24%; width: 52%; }
  .tree-entry strong { font-size: 10px; }
  .tree-invitation { left: 20%; width: 60%; }
  .tree-action { gap: 8px; padding-inline: 11px; }
  .tree-action strong { font-size: 13px; }
  .tree-action>span:nth-child(2)>span { font-size: 7px; }
  .tree-channel { width: 27px; height: 32px; border-radius: 8px; }
  .tree-channel svg { width: 18px; height: 18px; }
  .tree-linkedin { font-size: 18px; }
  .tree-condition { padding-inline: 8px; gap: 8px; }
  .tree-condition strong { font-size: 10px; }
  .condition-full { display: none; }
  .condition-short { display: inline; }
  .tree-loop-label { left: 81%; font-size: 6px; padding-inline: 2px; }
  .tree-condition>span:last-child>span { font-size: 6px; }
  .tree-diamond { width: 10px; height: 10px; border-radius: 2px; }
  .tree-stop { gap: 8px; padding-inline: 10px; }
  .tree-stop strong { font-size: 11px; }
  .tree-stop>span:nth-child(2)>span { font-size: 7px; }
  .tree-stop-icon { width: 24px; height: 28px; font-size: 10px; }
  .tree-branch { min-width: 32px; font-size: 8px; }
  .sequence-bottom { font-size: 8px; }
}
@container(max-width:315px) {
  .tree-entry strong { font-size: 9px; }
  .tree-action { padding-inline: 9px; gap: 7px; }
  .tree-action strong { font-size: 12px; }
  .tree-channel { width: 24px; height: 29px; }
  .tree-action>span:nth-child(2)>span { font-size: 6px; }
  .tree-condition strong { font-size: 9px; }
  .tree-condition { padding-inline: 7px; gap: 7px; }
  .tree-condition>span:last-child>span { font-size: 6px; }
  .tree-stop { gap: 6px; padding-inline: 8px; }
  .tree-stop strong { font-size: 10px; }
  .tree-stop>span:nth-child(2)>span { font-size: 6px; }
  .tree-stop-icon { width: 21px; height: 26px; }
  .sequence-bottom { font-size: 7px; }
}
@media(pointer:coarse) { button.tree-branch::after { content: ''; position: absolute; inset: -10px -7px; } }
@media(prefers-reduced-motion:reduce) { .campaign-tree * { animation: none!important; transition: none!important; } }