/* Tool Flow (slice 1): plain SVG arrows + Next badges / strip (advisory) */
.tf-host { position: relative; }
svg.tf-arrows { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 2; }
.tf-arrow { fill: none; stroke: #0f766e; stroke-width: 1.8; opacity: .8; }
.tf-arrow.is-hl { stroke: #c2410c; stroke-width: 2.6; opacity: 1; }
.tf-head { fill: #0f766e; }
.tool-bubble, .pt-bubble { position: relative; z-index: 3; }
.tool-bubble.tf-next { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #16a34a; }
.tf-next-badge {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: #16a34a; color: #fff;
  font-size: 0.56rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; border-radius: 999px;
  padding: 0 5px; line-height: 1.5; pointer-events: none; white-space: nowrap;
}
.tool-flow-next {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; padding: 8px 12px;
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; font-size: 0.82rem;
}
.tool-flow-next.hidden { display: none; }
.tf-strip-title { font-weight: 800; color: #166534; margin-right: 4px; }
.tf-step { border: 1px solid #86efac; background: #fff; border-radius: 999px; padding: 3px 10px; font: inherit; cursor: pointer; color: var(--text, #0f172a); }
.tf-step:hover, .tf-step:focus-visible { background: #dcfce7; outline: none; }
.tf-strip-hint { margin-left: auto; font-size: 0.72rem; }
/* Editor: connect mode */
.pt-connect-btn[aria-pressed="true"] { background: #ccfbf1; border-color: #0f766e; color: #115e59; }
#pt-map.is-connecting .pt-bubble { cursor: crosshair; }
.pt-bubble.is-connect-from { outline: 2px dashed #0f766e; outline-offset: 2px; }
.pt-connect-hint { font-size: 0.75rem; color: #115e59; }
.pt-insp-edges { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; flex-basis: 100%; font-size: 0.76rem; }
.pt-edge-chip { display: inline-flex; align-items: center; gap: 2px; background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 999px; padding: 0 2px 0 8px; }
.pt-edge-chip button { border: 0; background: transparent; cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0 4px; color: #64748b; }
.pt-edge-chip button:hover { color: #b91c1c; }
@media (prefers-reduced-motion: reduce) { .tf-arrow { transition: none; } }