/* ── Animated workflow widget ─────────────────────────────────────
   Reusable "wf-widget" block: title + tool badges + a canvas with
   nodes wired by curved SVG paths and travelling pulses. Originally
   inlined in ai-automation.html; extracted so blog posts can drop
   the same live-flow visual in their body.

   Consumers set widget colors via <style> or a scoped block if they
   want per-workflow tinting. Defaults below cover most cases. */

:root {
  --wf-hubspot: #ff7a59;
  --wf-msft: #0078d4;
  --wf-gsheet: #34a853;
  --wf-slack-red: #E01E5A;
  --wf-slack-purple: #611f69;
  --wf-amber: #d97706;
  --wf-ai: #7c3aed;
  --wf-fail: #9aa5b1;
}

.wf-widget {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  box-shadow: 0 14px 35px rgba(15, 124, 130, 0.10);
  padding: 1.6rem 1.4rem 1.2rem;
  margin: 2rem 0 2.5rem;
}
.wf-head {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  margin-bottom: 0.4rem;
}
.wf-title {
  font-size: 1rem; font-weight: 700;
  display: flex; align-items: center; flex-wrap: nowrap; min-width: 0;
  color: var(--text-main);
}
.wf-title > span:first-child { white-space: nowrap; color: var(--accent); }
.wf-n8n {
  display: inline-flex; align-items: center; flex: none;
  margin-left: 0.45rem; vertical-align: middle;
  background: var(--bg-main); border: 1px solid var(--border-soft);
  border-radius: 999px; height: 26px; padding: 0 0.6rem; box-sizing: border-box;
}
.wf-n8n:first-of-type { margin-left: 0.65rem; }
.wf-n8n img { height: 13px; width: auto; display: block; }
/* Dark mode: keep chips light so dark logo wordmarks stay legible */
html[data-theme="dark"] .wf-n8n { background: #eef2f5; border-color: transparent; }
@media (max-width: 900px) {
  .wf-title { flex-wrap: wrap; row-gap: 0.35rem; }
  .wf-title > span:first-child { white-space: normal; }
}

.wf-sub {
  color: var(--text-muted); font-size: 0.85rem;
  line-height: 1.55; max-width: 46rem; margin: 0 0 1rem;
}

.wf-canvas-wrap { overflow-x: auto; }
.wf-canvas { position: relative; }
svg.paths {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
svg.paths path.link {
  fill: none; stroke: var(--border-soft); stroke-width: 2;
}
svg.paths path.link.writeback {
  stroke-dasharray: 5 6; opacity: 0.7;
}

.wf-canvas .node {
  position: absolute;
  width: 178px; min-height: 72px;
  background: var(--card-bg);
  border: 1.5px solid var(--border-soft);
  border-radius: 14px;
  padding: 0.5rem 0.68rem 0.55rem;
  box-shadow: 0 6px 16px rgba(31, 41, 51, 0.06);
  transition: all 0.25s;
}
.wf-canvas .node .tag {
  font-size: 0.56rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 0.35rem;
  margin-bottom: 0.2rem;
}
.wf-canvas .node .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.wf-canvas .node.src .dot { background: var(--wf-hubspot); }
.wf-canvas .node.dst .dot { background: var(--wf-msft); }
.wf-canvas .node.sheet .dot { background: var(--wf-gsheet); }
.wf-canvas .node.cron .dot { background: var(--wf-amber); }
.wf-canvas .node.ai .dot { background: var(--wf-ai); }
.wf-canvas .node.slack .dot { background: var(--wf-slack-red); }
.wf-canvas .node h4 {
  font-size: 0.77rem; font-weight: 600; line-height: 1.3;
  color: var(--text-main); margin: 0;
}
.wf-canvas .node p {
  font-size: 0.63rem; color: var(--text-muted);
  margin: 0.18rem 0 0; line-height: 1.35;
}
.wf-canvas .node.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(15, 124, 130, 0.14), 0 10px 24px rgba(15, 124, 130, 0.18);
  transform: translateY(-2px);
}
.wf-canvas .node.reject {
  border-color: var(--wf-fail);
  box-shadow: 0 0 0 4px rgba(154, 165, 177, 0.18);
}

.wf-canvas .pulse {
  position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(15, 124, 130, 0.18), 0 0 14px rgba(15, 124, 130, 0.6);
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 5;
}
.wf-canvas .pulse.eur {
  background: var(--wf-msft);
  box-shadow: 0 0 0 5px rgba(0, 120, 212, 0.16), 0 0 14px rgba(0, 120, 212, 0.55);
}
.wf-canvas .pulse.sheetp {
  background: var(--wf-gsheet);
  box-shadow: 0 0 0 5px rgba(52, 168, 83, 0.16), 0 0 14px rgba(52, 168, 83, 0.5);
}
.wf-canvas .pulse.cronp {
  background: var(--wf-amber);
  box-shadow: 0 0 0 5px rgba(217, 119, 6, 0.16), 0 0 14px rgba(217, 119, 6, 0.5);
}
.wf-canvas .pulse.aip {
  background: var(--wf-ai);
  box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.16), 0 0 14px rgba(124, 58, 237, 0.5);
}
.wf-canvas .pulse .lbl {
  position: absolute; left: 50%; top: -20px;
  transform: translateX(-50%);
  font-size: 0.6rem; font-weight: 700;
  color: var(--accent); white-space: nowrap;
}
.wf-canvas .pulse.eur .lbl { color: var(--wf-msft); }
.wf-canvas .pulse.aip .lbl { color: var(--wf-ai); }
.wf-canvas .pulse.sheetp .lbl { color: var(--wf-gsheet); }

.wf-narration {
  display: flex; align-items: center; gap: 0.55rem;
  background: var(--bg-main);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 0.5rem 0.9rem;
  font-size: 0.75rem;
  margin-top: 0.9rem;
  min-height: 2.3rem;
  color: var(--text-main);
}
.wf-narration .live {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex: none;
  animation: wf-blink 1.6s infinite;
}
@keyframes wf-blink { 50% { opacity: 0.25; } }
.wf-narration.skipped .live { background: var(--wf-fail); animation: none; }

.wf-foot {
  display: flex; flex-wrap: wrap; gap: 0.9rem;
  align-items: center; justify-content: space-between;
  margin-top: 1rem;
}
.wf-legend {
  display: flex; gap: 0.85rem;
  font-size: 0.64rem; color: var(--text-muted);
  flex-wrap: wrap;
}
.wf-legend i {
  display: inline-block;
  width: 9px; height: 9px; border-radius: 50%;
  margin-right: 0.26rem;
}
.wf-cta {
  font-family: inherit; font-size: 0.78rem; font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.5rem 1.15rem;
  border: 1px solid var(--accent);
  background: var(--accent); color: #fff;
  transition: all 0.15s;
  display: inline-block;
}
.wf-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(15, 124, 130, 0.25); }

@media (prefers-reduced-motion: reduce) {
  .wf-canvas .pulse { display: none !important; }
  .wf-narration .live { animation: none; }
}