/* THE CALL FLOW, DRAWN (2026-10-20): the ONE look of a call flow, on the public Templates page
   (site/templates/flow.html) and on the dashboard's Call flow page (site/receptionist/app-desktop/flow-editor.js).
   The markup comes from /assets/call-flow-render.js; this is its stylesheet. Everything is prefixed tp-.

   THE SITE'S OWN COLOURS, NO LITERAL ACCENT HERE. Every colour is a token the site already has, chained from
   the public pages' set (--card --line --ink --mut, the brand accent --org-ink / --org-btn that
   alg-brand.css flips to sapphire / violet on askmuse.ca) to the dashboard's (--alg-brand, --alg-amber,
   --alg-success-*), and every tint is a color-mix of those, so light and dark come from the same variables.
   The dashboard scopes its own --alg-* names onto the base tokens (index.html, ".tp-scope"). A page that
   defines none of them gets a plain blue-and-slate fallback, never orange.
   Gate: tests/call-flows-site.cjs (no orange literal in this file or templates.css; the primary button is
   the site's primary variable) and tests/dash-call-flow.cjs. */
:root,.tp-scope{
  --tp-surf:var(--card,#fff);
  --tp-line:var(--line,#dfe6f1);
  --tp-ink:var(--ink,#16233b);
  --tp-ink2:var(--ink3,#475569);
  --tp-mute:var(--mut,#5a6b85);
  --tp-accent:var(--org-ink,var(--org-deep,var(--alg-brand,#0a3a86)));
  --tp-btn:var(--org-btn,var(--org,var(--alg-brand,#0f52ba)));
  --tp-ok:var(--alg-success-ink,var(--ok,var(--mint,#047857)));
  --tp-amb:var(--alg-amber,var(--amber,#b7791f));
  --tp-bgc:var(--bg,var(--tp-surf));
}
:root,.tp-scope{
  --tp-acc-soft:color-mix(in srgb,var(--tp-accent) 12%,var(--tp-surf));
  --tp-blue:var(--tp-accent);
  --tp-blue-soft:var(--tp-acc-soft);
  --tp-ok-soft:color-mix(in srgb,var(--tp-ok) 13%,var(--tp-surf));
  --tp-amb-soft:color-mix(in srgb,var(--tp-amb) 13%,var(--tp-surf));
  --tp-amb-line:color-mix(in srgb,var(--tp-amb) 48%,var(--tp-surf));
  --tp-ok-line:color-mix(in srgb,var(--tp-ok) 40%,var(--tp-surf));
  --tp-edge:color-mix(in srgb,var(--tp-ink) 40%,var(--tp-surf));
  --tp-dot:color-mix(in srgb,var(--tp-ink) 17%,var(--tp-surf));
  --tp-pill-on-bg:var(--tp-ink);
  --tp-pill-on-fg:var(--tp-surf);
  --tp-shadow:color-mix(in srgb,var(--tp-ink) 14%,transparent);
}

/* the list: a vertical timeline of numbered cards */
.tp-flow{list-style:none;margin:0 0 8px;padding:0;position:relative;max-width:760px}
.tp-step{position:relative;margin:0 0 22px 26px;background:var(--tp-surf);border:1px solid var(--tp-line);border-radius:14px;padding:11px 13px;color:var(--tp-ink)}
.tp-step:before{content:"";position:absolute;left:-17px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--tp-accent);box-shadow:0 0 0 4px var(--tp-acc-soft)}
.tp-step:after{content:"";position:absolute;left:-12px;top:calc(50% + 8px);width:2px;height:calc(100% + 14px);background:repeating-linear-gradient(var(--tp-line) 0 4px,transparent 4px 8px)}
.tp-step:last-child:after{display:none}
.tp-step[data-kind="urgent"]{border-color:var(--tp-amb-line);background:var(--tp-amb-soft)}
.tp-step[data-kind="urgent"]:before{background:var(--tp-amb);box-shadow:0 0 0 4px var(--tp-amb-soft)}
.tp-step[data-kind="after"]{border-color:var(--tp-ok-line)}
.tp-step[data-kind="after"]:before{background:var(--tp-ok);box-shadow:0 0 0 4px var(--tp-ok-soft)}
.tp-step[data-kind="rails"],.tp-step[data-kind="hours"]{border-style:dashed}
.tp-step[data-tap]{cursor:pointer}
.tp-step[data-tap]:hover{border-color:var(--tp-accent)}
.tp-step.is-off{opacity:.6;border-style:dashed}
.tp-k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--tp-accent);font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tp-step[data-kind="urgent"] .tp-k{color:var(--tp-amb)}
.tp-step[data-kind="after"] .tp-k{color:var(--tp-ok)}
.tp-step b{display:block;font-size:14.5px;margin:2px 0;line-height:1.3;overflow-wrap:anywhere}
.tp-step p{margin:0;font-size:12.5px;color:var(--tp-ink2);line-height:1.4}
.tp-say{margin-top:7px;background:color-mix(in srgb,var(--tp-ink) 5%,var(--tp-surf));border-radius:9px;padding:7px 9px;font-size:12px;font-style:italic;color:var(--tp-ink);line-height:1.4;overflow-wrap:anywhere}
.tp-say i{font-style:normal;font-weight:700;color:var(--tp-mute);margin-right:4px}
.tp-chipsrow{margin-top:7px;display:flex;gap:6px;flex-wrap:wrap;font-size:11.5px}
.tp-pill{border-radius:999px;padding:2px 9px;background:var(--tp-blue-soft);color:var(--tp-blue)}
.tp-pill[data-tone="skip"]{background:var(--tp-amb-soft);color:var(--tp-amb)}
.tp-pill[data-tone="ok"]{background:var(--tp-ok-soft);color:var(--tp-ok)}
.tp-pill[data-tone="cond"]{background:var(--tp-blue-soft);color:var(--tp-blue)}
/* a small badge on a box or a card: Required (locked), Optional, Off */
.nb{display:inline-flex;align-items:center;gap:3px;font-size:9px;letter-spacing:.04em;text-transform:uppercase;font-weight:800;border-radius:999px;padding:1px 7px;background:var(--tp-blue-soft);color:var(--tp-blue);line-height:14px;vertical-align:middle}
.nb[data-tone="off"]{background:color-mix(in srgb,var(--tp-ink) 9%,var(--tp-surf));color:var(--tp-ink2)}
.nb[data-tone="own"]{background:var(--tp-pill-on-bg);color:var(--tp-pill-on-fg)}
.nb svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tp-k .nb{font-size:10px}

/* the diagram */
.tp-canvas{position:relative;height:clamp(400px,calc(100vh - 440px),720px);border:1px solid var(--tp-line);border-radius:16px;overflow:hidden;background-color:var(--tp-surf);
  background-image:radial-gradient(var(--tp-dot) 1px,transparent 1px);background-size:18px 18px}
.tp-svg{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.tp-svg.is-drag{cursor:grabbing}
.tp-edge{fill:none;stroke:var(--tp-edge);stroke-width:1.5}
.tp-edge[data-tone="warn"]{stroke:var(--tp-amb)}
.tp-arrow{fill:var(--tp-edge)}
.tp-elab rect{fill:var(--tp-surf);stroke:var(--tp-line)}
.tp-elab text{fill:var(--tp-ink2);font:500 10.5px Inter,system-ui,sans-serif}
.tp-elab[data-tone="warn"] rect{fill:var(--tp-amb-soft);stroke:var(--tp-amb-line)}
.tp-elab[data-tone="warn"] text{fill:var(--tp-amb)}
.tp-pt rect{fill:var(--tp-surf);stroke:var(--tp-line)}
.tp-pt text{fill:var(--tp-ink);font:700 12px Inter,system-ui,sans-serif}
.tp-pt[data-end="start"] rect{fill:var(--tp-pill-on-bg);stroke:var(--tp-pill-on-bg)}
.tp-pt[data-end="start"] text{fill:var(--tp-pill-on-fg)}
.tp-node,.tp-measure .tp-node{background:var(--tp-surf);border:1px solid var(--tp-line);border-radius:12px;padding:8px 10px;box-shadow:0 2px 8px var(--tp-shadow);color:var(--tp-ink);font-family:Inter,system-ui,sans-serif;width:100%}
.tp-node .nk{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tp-accent);font-weight:800}
.tp-node b{display:block;font-size:12.5px;line-height:1.22;margin-top:2px;overflow-wrap:anywhere}
.tp-node small{display:block;font-size:10.5px;color:var(--tp-ink2);margin-top:3px;line-height:1.28;overflow-wrap:anywhere}
.tp-node[data-kind="urgent"]{border-color:var(--tp-amb-line);background:var(--tp-amb-soft)}
.tp-node[data-kind="urgent"] .nk{color:var(--tp-amb)}
.tp-node[data-kind="after"]{background:var(--tp-ok-soft);border-color:var(--tp-ok-line)}
.tp-node[data-kind="after"] .nk{color:var(--tp-ok)}
.tp-node[data-kind="hours"]{background:var(--tp-acc-soft);border-style:dashed}
.tp-node[data-kind="rails"]{border-style:dashed;background:color-mix(in srgb,var(--tp-ink) 5%,var(--tp-surf));box-shadow:none}
.tp-node[data-kind="rails"] .nk{color:var(--tp-ink2)}
.tp-node[data-tap]{cursor:pointer}
.tp-node[data-tap]:hover{border-color:var(--tp-accent)}
.tp-node[data-tap]:focus-visible{outline:2px solid var(--tp-accent);outline-offset:2px}
.tp-node.is-off{opacity:.55;border-style:dashed;box-shadow:none}
.tp-measure{position:absolute;left:-9999px;top:0;width:176px;visibility:hidden;pointer-events:none}
.tp-ctl{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;gap:6px;z-index:2}
.tp-ctl button{width:40px;height:40px;border-radius:10px;border:1px solid var(--tp-line);background:var(--tp-surf);color:var(--tp-ink);font:700 17px Inter,system-ui,sans-serif;cursor:pointer;line-height:1;padding:0}
.tp-add{position:absolute;right:10px;bottom:10px;z-index:2;background:var(--tp-surf);border:1px solid var(--tp-line);border-radius:10px;padding:10px 13px;min-height:40px;font:600 12.5px Inter,system-ui,sans-serif;color:var(--tp-ink2);cursor:pointer;box-shadow:0 2px 8px var(--tp-shadow)}
.tp-add.is-soon{opacity:.75;border-style:dashed}
.tp-addnote{position:absolute;right:10px;bottom:58px;z-index:3;max-width:250px;background:var(--tp-surf);border:1px solid var(--tp-line);border-radius:12px;padding:10px 12px;font-size:12px;line-height:1.4;color:var(--tp-ink2);box-shadow:0 6px 20px var(--tp-shadow)}
.tp-ctl button:focus-visible,.tp-add:focus-visible{outline:2px solid var(--tp-accent);outline-offset:2px}
/* DRAG TO REORDER and the + INSERT POINTS (2026-10-20, the dashboard only: they exist when the page passes opts.reorder / opts.insert).
   Tokens only, like the rest of this file. */
.tp-grip{position:absolute;right:2px;top:2px;width:26px;height:26px;border-radius:8px;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;
  display:grid;grid-template-columns:4px 4px;grid-auto-rows:4px;gap:3px 4px;align-content:center;justify-content:center;opacity:.55}
.tp-grip i{display:block;width:4px;height:4px;border-radius:50%;background:var(--tp-ink2)}
.tp-grip:hover,.tp-node:focus-visible .tp-grip{opacity:1;background:var(--tp-acc-soft)}
.tp-node:has(.tp-grip){position:relative}
.tp-node:has(.tp-grip) .nk{padding-right:26px}
.tp-svg.is-reorder,.tp-svg.is-reorder *{cursor:grabbing!important}
.tp-svg foreignObject .tp-node{transition:transform .16s ease,box-shadow .16s ease}
.tp-svg foreignObject.is-lifted .tp-node{box-shadow:0 18px 36px var(--tp-shadow),0 0 0 3px var(--tp-accent);border-color:var(--tp-accent);transform:scale(1.045) rotate(-.8deg)}
.tp-ghost{fill:color-mix(in srgb,var(--tp-ink) 4%,var(--tp-surf));stroke:var(--tp-line);stroke-width:1.5;stroke-dasharray:5 4}
.tp-slot{pointer-events:none}
.tp-drop{fill:color-mix(in srgb,var(--tp-accent) 16%,var(--tp-surf));stroke:var(--tp-accent);stroke-width:2;stroke-dasharray:6 4;pointer-events:none}
.tp-slot-t{fill:var(--tp-accent);font:700 13px Inter,system-ui,sans-serif;pointer-events:none}
.tp-ins{cursor:pointer;outline:none}
.tp-ins-hit{fill:transparent}
.tp-ins-c{fill:var(--tp-surf);stroke:var(--tp-accent);stroke-width:1.5;transition:fill .12s}
.tp-ins path{fill:none;stroke:var(--tp-accent);stroke-width:1.9;stroke-linecap:round}
.tp-ins:hover .tp-ins-c,.tp-ins:focus-visible .tp-ins-c{fill:var(--tp-accent)}
.tp-ins:hover path,.tp-ins:focus-visible path{stroke:var(--tp-surf)}
.tp-ins:focus-visible .tp-ins-c{stroke-width:3.2}
.tp-svg.is-reorder .tp-ins{visibility:hidden}
/* the list */
.tp-flow.has-reorder .tp-step.has-grip{padding-right:52px}
.tp-flow .tp-step .tp-grip{right:4px;top:4px;width:44px;height:44px;border-radius:12px}
.tp-step{transition:transform .16s ease,box-shadow .16s ease}
.tp-step.is-lifted{z-index:4;box-shadow:0 18px 36px var(--tp-shadow),0 0 0 3px var(--tp-accent);border-color:var(--tp-accent);cursor:grabbing;transition:box-shadow .16s ease}
.tp-step.is-pressing,.tp-canvas.is-pressing{transform:scale(.99)}
body.tp-dragging{-webkit-user-select:none;user-select:none;cursor:grabbing}
.tp-flow.is-reorder .tp-insrow{visibility:hidden}
.tp-insrow{position:relative;list-style:none;height:0;margin:0;padding:0}
.tp-insb{position:absolute;left:calc(26px + (100% - 26px)/2 - 22px);top:-33px;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;z-index:2;color:var(--tp-accent)}
.tp-insb:after{content:"+";position:absolute;inset:8px;border-radius:50%;border:1.5px solid var(--tp-accent);background:var(--tp-surf);display:grid;place-items:center;font:700 17px/1 Inter,system-ui,sans-serif;padding-bottom:2px;box-sizing:border-box}
.tp-insb:hover:after,.tp-insb:focus-visible:after{background:var(--tp-accent);color:var(--tp-surf)}
.tp-insb:focus-visible{outline:2px solid var(--tp-accent);outline-offset:-4px;border-radius:50%}
.tp-droprow{position:absolute;left:26px;right:0;height:6px;border-radius:3px;background:var(--tp-accent);pointer-events:none;z-index:3}
.tp-droprow:after{content:attr(data-label);position:absolute;left:50%;top:-11px;transform:translateX(-50%);background:var(--tp-accent);color:var(--tp-surf);font:700 12px/1 Inter,system-ui,sans-serif;padding:5px 11px;border-radius:999px}
.tp-listnote{margin:0 0 10px;max-width:760px;background:var(--tp-surf);border:1px solid var(--tp-line);border-radius:12px;padding:10px 12px;font-size:12.5px;line-height:1.4;color:var(--tp-ink2)}

/* READABLE MODE (2026-10-20, the dashboard only: opts.big): boxes 250 px wide with 16 px text, so a business owner reads them without
   zooming. Fit never draws them below 90%. The public page does not carry .tp-big and is drawn as it was. */
.tp-big .tp-node,.tp-measure.tp-big .tp-node{border-radius:14px;padding:12px 14px 13px;box-shadow:0 2px 10px var(--tp-shadow)}
.tp-big .tp-node .nk{font-size:12px;gap:7px;letter-spacing:.05em}
.tp-big .tp-node b{font-size:16.5px;line-height:1.28;margin-top:4px}
.tp-big .tp-node small{font-size:15px;line-height:1.35;margin-top:5px}
.tp-big .nb{font-size:11px;line-height:16px;padding:1px 8px}
.tp-big .nb svg{width:11px;height:11px}
.tp-big .tp-elab text{font:600 12.5px Inter,system-ui,sans-serif}
.tp-big .tp-pt text{font:700 14px Inter,system-ui,sans-serif}
.tp-big .tp-node:has(.tp-grip) .nk{padding-right:34px}
.tp-big .tp-grip{width:34px;height:34px;right:3px;top:3px;grid-template-columns:5px 5px;grid-auto-rows:5px;gap:3px 5px;opacity:.7}
.tp-big .tp-grip i{width:5px;height:5px}
.tp-big .tp-node:has(.tp-hear) small{padding-right:40px}
.tp-measure.tp-big{width:250px}
.tp-big.tp-flow .tp-step{padding:14px 16px;min-height:64px;border-radius:16px}
.tp-big.tp-flow .tp-k{font-size:12px}
.tp-big.tp-flow .tp-step b{font-size:17px;line-height:1.3}
.tp-big.tp-flow .tp-step p{font-size:15px;line-height:1.4}
.tp-big.tp-flow .tp-say{font-size:14.5px}
.tp-big.tp-flow.has-reorder .tp-step.has-grip{padding-right:62px}
.tp-big.tp-flow .tp-step .tp-grip{width:48px;height:48px;right:6px;top:8px;opacity:.7}
.tp-big.tp-flow .tp-step .tp-grip i{width:5px;height:5px}
.tp-big.tp-flow .tp-step.has-grip{touch-action:pan-y;-webkit-touch-callout:none}
.tp-big.tp-flow .tp-step.has-grip .tp-grip{touch-action:none}
/* Hear it: a round play button on a question */
.tp-hear{position:absolute;right:8px;bottom:8px;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--tp-accent);background:var(--tp-surf);color:var(--tp-accent);display:grid;place-items:center;padding:0;cursor:pointer}
.tp-hear svg{width:15px;height:15px;fill:currentColor;margin-left:2px}
.tp-hear:hover,.tp-hear:focus-visible,.tp-hear.is-speaking{background:var(--tp-accent);color:var(--tp-surf)}
.tp-hear:focus-visible{outline:2px solid var(--tp-accent);outline-offset:2px}
.tp-node:has(.tp-hear){position:relative}
.tp-step .tp-hear{right:12px;bottom:12px;top:auto;width:44px;height:44px}
.tp-step:has(.tp-hear) .tp-say{margin-right:58px;min-height:44px;box-sizing:border-box}
.tp-step:has(.tp-hear){padding-bottom:14px}
.tp-big.tp-flow .tp-step .tp-hear svg{width:18px;height:18px}
/* a box on screen in the "Try a call" preview */
.tp-node.is-now,.tp-step.is-now{box-shadow:0 0 0 3px var(--tp-accent),0 10px 26px var(--tp-shadow);border-color:var(--tp-accent)}
/* a box being edited right in place (the dashboard builds the editor; see flow-editor.js inlineHTML) */
.tp-node.is-editing,.tp-step.is-editing{border-color:var(--tp-accent);box-shadow:0 0 0 3px var(--tp-acc-soft),0 12px 30px var(--tp-shadow);cursor:default}
.tp-ed{-webkit-user-select:text;user-select:text;cursor:default}
/* a branch lane ("If new caller" ...): a side box with a coloured edge */
.tp-node[data-kind="branch"]{background:var(--tp-acc-soft);border-color:var(--tp-accent);border-style:solid}
.tp-step[data-kind="branch"]{background:var(--tp-acc-soft);border-color:var(--tp-accent)}
.tp-step[data-kind="branch"]:before{background:var(--tp-accent)}
/* + points glow while a question from the palette is being carried */
.tp-canvas.is-placing .tp-ins-c{fill:color-mix(in srgb,var(--tp-accent) 22%,var(--tp-surf));stroke-width:2.6}
.tp-canvas.is-placing .tp-ins.is-target .tp-ins-c{fill:var(--tp-accent)}
.tp-canvas.is-placing .tp-ins.is-target path{stroke:var(--tp-surf)}
.is-placing .tp-insb:after{background:color-mix(in srgb,var(--tp-accent) 22%,var(--tp-surf))}
.is-placing .tp-insb.is-target:after{background:var(--tp-accent);color:var(--tp-surf)}
@media(min-width:1000px){
  .tp-canvas{height:clamp(480px,calc(100vh - 360px),780px)}
}
@media(prefers-reduced-motion:reduce){.tp-canvas *,.tp-step{transition:none!important;animation:none!important}}