/* Caminho.DEV — the live sales-enquiry process in the /business-automation hero
   (assets/js/flow-demo.js). Applies only once the script has taken the drawing over
   (.is-live), so without it — or with reduced motion — the picture in pages.css stands. */

.mp-proc.is-live { --fd-ok: #16a34a; --fd-run: var(--mp-accent); }

/* Header: a live badge that turns green when a run completes. */
.mp-fd-live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 8px; padding: 4px 10px; border-radius: 99px;
  font-size: .64rem; font-weight: 700; color: var(--fd-run); background: var(--mp-soft); white-space: nowrap; transition: background .3s, color .3s; }
.mp-fd-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: mpFdBlink 1s ease-in-out infinite alternate; }
.mp-fd-live[data-state="done"] { color: #0f7a3a; background: #e6f7ec; }
.mp-fd-live[data-state="done"] i { animation: none; }
@keyframes mpFdBlink { from { opacity: .35; } to { opacity: 1; } }

/* Steps: idle (faded), running (lit, ringed), done (ticked). */
.mp-proc.is-live li { transition: background .3s, border-color .3s, box-shadow .3s, opacity .3s; }
.mp-proc.is-live li[data-state="idle"] { opacity: .62; }
.mp-proc.is-live li[data-state="idle"] .mp-proc-ok,
.mp-proc.is-live li[data-state="run"] .mp-proc-ok { background: #eef1f7; }
.mp-proc.is-live li:not([data-state="done"]) .mp-proc-ok svg { opacity: 0; transform: scale(.4); }
.mp-proc.is-live .mp-proc-ok { position: relative; transition: background .3s; }
.mp-proc.is-live .mp-proc-ok svg { transition: opacity .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.mp-proc.is-live li[data-state="run"] { opacity: 1; background: #fff; border-color: #bcd0fb; box-shadow: 0 0 0 4px rgba(37, 99, 235, .08), 0 10px 24px -14px rgba(31, 45, 96, .4); }
.mp-proc.is-live li[data-state="run"] .mp-proc-ico { background: var(--fd-run); color: #fff; }
.mp-proc.is-live .mp-proc-ico { transition: background .3s, color .3s; }
.mp-proc.is-live li[data-state="done"] { border-color: #cfeedb; }
.mp-fd-spin { position: absolute; inset: 3px; border-radius: 50%; border: 2px solid #d6def0; border-top-color: var(--fd-run);
  opacity: 0; animation: mpFdSpin .7s linear infinite; }
.mp-proc.is-live li[data-state="run"] .mp-fd-spin { opacity: 1; }
@keyframes mpFdSpin { to { transform: rotate(360deg); } }

/* The connector: the drawn line, with a pulse that runs down it into the next step. */
.mp-fd-pulse { position: absolute; left: 28.5px; top: -18px; width: 6px; height: 6px; border-radius: 50%; background: var(--fd-run);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .2), 0 0 10px rgba(37, 99, 235, .6); opacity: 0; pointer-events: none; z-index: 2; }
.mp-fd-pulse.go { animation: mpFdPulse .5s cubic-bezier(.5, 0, .5, 1) forwards; }
@keyframes mpFdPulse { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }
.mp-proc.is-live li[data-state="done"] + li::before { background: var(--fd-ok); }
.mp-proc.is-live li[data-state="done"] + li::after { border-color: var(--fd-ok); }

/* The detail drawer under the running step: one open at a time, so the card holds its height. */
.mp-fd-detail { grid-column: 1 / -1; height: 0; overflow: hidden; opacity: 0; margin-top: -12px;
  transition: height .35s ease, opacity .25s ease, margin-top .35s ease; }
.mp-fd-detail.on { height: 68px; opacity: 1; margin-top: 0; }
.mp-fd-head { display: flex; align-items: center; gap: 6px; font-size: .64rem; font-weight: 700; color: var(--mp-ink); margin-bottom: 6px; }
.mp-fd-head svg { width: 13px; height: 13px; color: var(--fd-run); }
.mp-fd-wait i { width: 4px; height: 4px; border-radius: 50%; background: var(--mp-muted); animation: mpFdBlink .6s ease-in-out infinite alternate; }
.mp-fd-wait i:nth-of-type(2) { animation-delay: .2s; } .mp-fd-wait i:nth-of-type(3) { animation-delay: .4s; }
.mp-fd-fields { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3px 12px; }
.mp-fd-fields span { display: flex; gap: 6px; align-items: baseline; min-width: 0; font-size: .64rem; }
.mp-fd-fields small { flex: none; width: 42px; color: var(--mp-muted); font-size: .58rem; }
.mp-fd-fields b { min-width: 0; color: var(--mp-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-fd-fields b.is-typing::after { content: ''; display: inline-block; width: 1.5px; height: .8em; margin-left: 1px; vertical-align: -1px;
  background: var(--fd-run); animation: mpFdBlink .4s steps(2) infinite; }

.mp-fd-chips { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 4px; }
.mp-fd-chip, .mp-fd-skel { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px; font-size: .6rem; font-weight: 600; }
.mp-fd-chip { color: #0f7a3a; background: #e6f7ec; animation: mpFdPop .35s cubic-bezier(.3, 1.6, .5, 1); }
.mp-fd-chip svg { width: 11px; height: 11px; stroke-width: 2.6; }
.mp-fd-skel { width: 96px; background: linear-gradient(90deg, #eef1f7 25%, #f8f9fd 50%, #eef1f7 75%); background-size: 200% 100%; animation: mpFdShimmer 1s linear infinite; }
.mp-fd-skel:nth-child(2) { width: 110px; } .mp-fd-skel:nth-child(3) { width: 130px; } .mp-fd-skel:nth-child(4) { width: 100px; }
@keyframes mpFdShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes mpFdPop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

.mp-fd-doc { display: flex; align-items: center; gap: 10px; padding-top: 6px; }
.mp-fd-doc > i { flex: none; display: grid; place-items: center; width: 34px; height: 40px; border-radius: 6px; background: #fdecec; color: #d1424a;
  box-shadow: inset 0 0 0 1px #f6cfd2; }
.mp-fd-doc > i svg { width: 16px; height: 16px; }
.mp-fd-doc > span { flex: 1; min-width: 0; }
.mp-fd-doc b { display: block; font-size: .66rem; color: var(--mp-ink); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-fd-bar { display: block; height: 6px; border-radius: 99px; background: #eef1f7; overflow: hidden; }
.mp-fd-bar i { display: block; width: 0; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #60a5fa, var(--fd-run));
  transition: width 1.4s cubic-bezier(.4, .1, .3, 1); }
.mp-fd-sent { display: flex; align-items: center; gap: 5px; font-size: .6rem; color: #0f7a3a; animation: mpFdPop .3s ease; }
.mp-fd-sent svg { flex: none; width: 11px; height: 11px; stroke-width: 2.6; }

.mp-fd-task { display: flex; align-items: center; gap: 10px; padding-top: 6px; animation: mpFdPop .35s cubic-bezier(.3, 1.6, .5, 1); }
.mp-fd-cal { flex: none; width: 46px; border-radius: 8px; overflow: hidden; text-align: center; border: 1px solid var(--mp-line-2); background: #fff; }
.mp-fd-cal small { display: block; font-size: .52rem; font-weight: 700; color: #fff; background: #e5484d; padding: 1px 0; text-transform: uppercase; }
.mp-fd-cal b { display: block; font-size: .7rem; color: var(--mp-ink); padding: 3px 0; }
.mp-fd-task > span:last-child b { display: block; font-size: .7rem; color: var(--mp-ink); }
.mp-fd-task > span:last-child small { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: .6rem; color: var(--mp-muted); }
.mp-fd-task svg { width: 11px; height: 11px; }

/* The run-complete moment: a soft green wash over the card. */
.mp-proc.is-live .mp-proc-card { transition: box-shadow .4s; }
.mp-proc.is-live .mp-proc-card.is-complete { box-shadow: 0 0 0 3px rgba(22, 163, 74, .14), 0 24px 60px rgba(31, 45, 96, .14); }

/* The log card: last run ticking, today's count, a bar per run (blue while running). */
.mp-fd-log { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--mp-line); }
.mp-fd-log small { display: block; font-size: .56rem; color: var(--mp-muted); }
.mp-fd-log b { display: block; font-size: .74rem; color: var(--mp-ink); font-variant-numeric: tabular-nums; }
.mp-fd-log span:last-child { text-align: right; }
.mp-fd-last.is-run { color: var(--mp-accent); }
.mp-proc-aside.is-live .mp-proc-dots i { transition: background .4s; animation: mpFdGrow .4s ease; }
.mp-proc-aside.is-live .mp-proc-dots i.is-run { background: linear-gradient(90deg, #93b4fb, var(--mp-accent), #93b4fb); background-size: 200% 100%;
  animation: mpFdShimmer 1s linear infinite; }
@keyframes mpFdGrow { from { transform: scaleX(0); } to { transform: none; } }

@media (max-width: 640px) {
  .mp-fd-live { display: none; }
  .mp-fd-detail.on { height: 80px; }
  .mp-fd-fields { grid-template-columns: minmax(0, 1fr); }
}

/* Keep the header to one line so the card never changes height mid-run. */
.mp-proc.is-live .mp-proc-top b { white-space: nowrap; min-width: 0; }
.mp-proc.is-live .mp-proc-top { flex-wrap: nowrap; }
.mp-fd-fin { margin-top: 5px; }

/* Reduced motion (.is-calm): the run still steps through every stage, but nothing moves —
   no travelling pulse, spinning, typing caret, shimmer or pop. Content fades in instead. */
.mp-proc.is-calm .mp-fd-pulse { display: none; }
.mp-proc.is-calm *, .mp-proc.is-calm *::before, .mp-proc.is-calm *::after { animation: none !important; }
.mp-proc.is-calm .mp-fd-detail { transition: opacity .4s ease; }
.mp-proc.is-calm .mp-fd-detail > * { animation: mpFdFade .4s ease both !important; }
.mp-proc.is-calm .mp-fd-chip, .mp-proc.is-calm .mp-fd-sent, .mp-proc.is-calm .mp-fd-task { animation: mpFdFade .4s ease both !important; }
.mp-proc.is-calm .mp-fd-bar i { transition: width 1.4s linear; }
.mp-proc.is-calm .mp-proc-ok svg { transition: opacity .3s; transform: none !important; }
.mp-proc.is-calm .mp-fd-skel { background: #eef1f7; }
@keyframes mpFdFade { from { opacity: 0; } to { opacity: 1; } }

/* ── The integration flow (/api-integrations) ── */
/* Xero: the API call as a tiny request log. */
.mp-fd-api { display: grid; gap: 5px; padding-top: 4px; }
.mp-fd-api code { display: flex; align-items: center; gap: 6px; font: 600 .6rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #3b4466; }
.mp-fd-api code i { font-style: normal; font-size: .54rem; font-weight: 800; padding: 2px 5px; border-radius: 4px; }
.mp-fd-req i { color: #fff; background: #13b5ea; }
.mp-fd-res { animation: mpFdPop .3s ease; }
.mp-fd-res i { color: #0f7a3a; background: #e6f7ec; }
.mp-fd-api .mp-fd-bar { height: 4px; }

/* Sheets: a header, last order's row, and the new row filling cell by cell. */
.mp-fd-sheet { display: grid; margin-top: 2px; border: 1px solid #d6e9dc; border-radius: 6px; overflow: hidden; font-size: .56rem; }
.mp-fd-sheet > span { display: grid; grid-template-columns: .7fr .7fr 1.3fr .8fr; }
.mp-fd-sheet i { font-style: normal; padding: 3px 6px; min-height: 17px; border-left: 1px solid #e3efe7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mp-ink); }
.mp-fd-sheet i:first-child { border-left: 0; }
.mp-fd-sh { background: #e8f5ec; } .mp-fd-sh i { font-weight: 700; color: #188038; }
.mp-fd-old { border-top: 1px solid #e3efe7; } .mp-fd-old i { color: var(--mp-muted); }
.mp-fd-new { border-top: 1px solid #e3efe7; background: #f3fbf5; }
.mp-fd-new i { transition: background .4s; }
.mp-fd-new i.on { font-weight: 600; background: #dff3e5; animation: mpFdFade .3s ease; }

/* Slack: the bot posts to the channel after a typing indicator. */
.mp-fd-slack { display: flex; align-items: flex-start; gap: 8px; padding-top: 4px; }
.mp-fd-av { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #4a154b; color: #fff; font-weight: 800; font-size: .74rem; }
.mp-fd-slack > span:last-child { min-width: 0; }
.mp-fd-slack b { display: block; font-size: .64rem; color: var(--mp-ink); }
.mp-fd-slack b small { font-weight: 500; color: var(--mp-muted); font-size: .56rem; }
.mp-fd-msg { display: block; margin-top: 2px; font-size: .62rem; color: #3b4466; animation: mpFdFade .3s ease; }
.mp-fd-dots { display: inline-flex; gap: 3px; margin-top: 5px; }
.mp-fd-dots i { width: 5px; height: 5px; border-radius: 50%; background: #9aa3c0; animation: mpFdBlink .5s ease-in-out infinite alternate; }
.mp-fd-dots i:nth-child(2) { animation-delay: .17s; } .mp-fd-dots i:nth-child(3) { animation-delay: .34s; }
.mp-proc.is-calm .mp-fd-res, .mp-proc.is-calm .mp-fd-msg, .mp-proc.is-calm .mp-fd-new i.on { animation: mpFdFade .4s ease both !important; }