/* Workflows, a piece and its stills (template-parts/demo-workflow.php, the piece's own markup): the builder's tree as
   the app draws it (gs.front.app workflows/builder ChainView, StepStats), every card with its counts, the add-a-step
   menu (StepPickerModal) and one path's whole block of numbers. Loaded after demo.css (inc/demo.php
   GS_DEMO_PIECE_STYLES). Every rule is scoped to the piece's views (.gsd-v-workflow); the full window prints none of
   these classes and reads none of these rules. The tree never changes its geometry while it runs: a count keeps the
   room of its final digits and a conversion fades in where it already stands, so the pane never moves and the loop's
   seam never jumps. */

/* ---- the tree ---------------------------------------------------------------------------------------------------- */
/* live, the tree with its counts fills the pane from the people to End, so the canvas keeps a little less padding */
.gsd.gsd-v-workflow:not(.gsd-still) .gsd-wf{padding-top:12px;padding-bottom:12px}
.gsd.gsd-v-workflow .gsd-wk{display:flex;flex-direction:column;align-items:center;width:100%;max-width:720px}
.gsd.gsd-v-workflow .gsd-wk .gsd-e{height:9px}
.gsd.gsd-v-workflow .gsd-wk-br>.gsd-e{height:8px}
.gsd.gsd-v-workflow .gsd-wk .gsd-fork{height:22px}
.gsd.gsd-v-workflow .gsd-wk .gsd-merge{height:18px}
/* a card: the builder's node, the channel's hairline on its top edge; a compact card (a visit, a wait) keeps its one
   count at the end of its row, a dashed one waits */
.gsd.gsd-v-workflow .gsd-wk-c{position:relative;display:flex;flex-direction:column;width:min(100%,300px);border:1px solid var(--gsd-line);border-radius:12px;background:var(--gsd-bg);box-shadow:0 1px 2px rgba(20,21,28,.04)}
.gsd.gsd-v-workflow .gsd-wk>.gsd-wk-c{width:min(100%,320px)}
.gsd.gsd-v-workflow .gsd-wk-br>.gsd-wk-c{width:min(100%,340px)}
.gsd.gsd-v-workflow .gsd-wk-c.gsd-wk-li{box-shadow:inset 0 2px 0 -1px var(--gsd-li),0 1px 2px rgba(20,21,28,.04)}
.gsd.gsd-v-workflow .gsd-wk-c.gsd-wk-em{box-shadow:inset 0 2px 0 -1px var(--gsd-em),0 1px 2px rgba(20,21,28,.04)}
.gsd.gsd-v-workflow .gsd-wk-c.gsd-wk-cw{border-style:dashed;background:color-mix(in srgb,var(--gsd-bg) 76%,transparent);box-shadow:none}
.gsd.gsd-v-workflow .gsd-wk-h{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:44px;padding:6px 12px 6px 10px}
.gsd.gsd-v-workflow .gsd-wk-ic{position:relative;display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;background:var(--gsd-sunk);color:var(--gsd-text)}
.gsd.gsd-v-workflow .gsd-wk-ic svg{width:16px;height:16px}
/* the step tile's tones, the builder's: LinkedIn, email, AI and actions, CRM and routing; the flow keeps the plain tile */
.gsd.gsd-v-workflow :is(.gsd-wk-li .gsd-wk-ic,.gsd-wk-ic.gsd-wk-li){background:var(--gsd-li-soft);color:var(--gsd-li);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gsd-li) 22%,transparent)}
.gsd.gsd-v-workflow :is(.gsd-wk-em .gsd-wk-ic,.gsd-wk-ic.gsd-wk-em){background:var(--gsd-em-soft);color:var(--gsd-em);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gsd-em) 26%,transparent)}
.gsd.gsd-v-workflow .gsd-wk-ic.gsd-wk-ai{background:var(--gsd-ai-soft);color:var(--gsd-ai);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gsd-ai) 20%,transparent)}
.gsd.gsd-v-workflow .gsd-wk-ic.gsd-wk-crm{background:var(--gsd-ok-soft);color:var(--gsd-ok);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gsd-ok) 22%,transparent)}
.gsd.gsd-v-workflow .gsd-wk-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.gsd.gsd-v-workflow .gsd-wk-t b{font:600 13px/1.2 var(--gsd-sans);color:var(--gsd-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsd.gsd-v-workflow .gsd-wk-t small{font:400 11.5px/1.2 var(--gsd-sans);color:var(--gsd-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsd.gsd-v-workflow .gsd-wk-n{font:400 11.5px/1 var(--gsd-sans);font-style:normal;color:var(--gsd-mute);white-space:nowrap}
.gsd.gsd-v-workflow .gsd-wk-n .gsd-wk-v{font-weight:600;color:var(--gsd-text)}
/* a count: tabular digits (demo.js keeps a live count in the room of its final number) */
.gsd.gsd-v-workflow .gsd-wk-v{font-variant-numeric:tabular-nums}
/* the counts under a card: the builder's dashed rule, what the step sent, then its conversions (each with its rate
   against what it sent), a reply or an accept in the product's green */
.gsd.gsd-v-workflow .gsd-wk-ns{display:flex;flex-wrap:wrap;gap:2px 12px;padding:4px 12px 5px 48px;border-top:1px dashed var(--gsd-line);font:400 11.5px/15px var(--gsd-sans);color:var(--gsd-mute);white-space:nowrap}
.gsd.gsd-v-workflow .gsd-wk-ns b{font-weight:600;color:var(--gsd-text)}
/* under 820 px of pane (a tablet's hero) the counts start at the card's edge, so an email's three still fit one line;
   under 720 a live arm keeps what it sent and its reply (the opens stay in the stills), so no line wraps and the tree
   keeps its height in the pane */
@container gsd (max-width:819px){
  .gsd.gsd-v-workflow .gsd-wk-ns{padding-left:12px}
}
@container gsd (max-width:719px){
  .gsd.gsd-v-workflow:not(.gsd-still) .gsd-wk-br .gsd-wk-ns>span:not(:first-child):not(.gsd-wk-ok){display:none}
}
/* the arms share their rows, so a card stands level with its neighbour; the shorter one's counts take the room */
.gsd.gsd-v-workflow .gsd-wk-br :is(.gsd-wk-ns,.gsd-wk-sb){flex:1}
.gsd.gsd-v-workflow .gsd-wk-ok b{color:var(--gsd-ok-ink)}
/* the arms: the builder's chips (the event's icon, the time limit's timer), a Wait pill with the people in it now */
.gsd.gsd-v-workflow .gsd-wk-brs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%}
.gsd.gsd-v-workflow .gsd-wk-br{display:grid;grid-row:span 7;grid-template-rows:subgrid;justify-items:center;align-content:start;min-width:0;padding:0 7px}
.gsd.gsd-v-workflow .gsd-wk-bl{display:inline-flex;align-items:center;gap:5px;height:22px;max-width:100%;padding:0 9px 0 7px;border:1px solid var(--gsd-line);border-radius:999px;background:var(--gsd-bg);font:600 11px/1 var(--gsd-sans);color:var(--gsd-text);white-space:nowrap}
.gsd.gsd-v-workflow .gsd-wk-bl svg{width:13px;height:13px;color:var(--gsd-mute)}
.gsd.gsd-v-workflow .gsd-wk-br-b .gsd-wk-bl{border-style:dashed}
.gsd.gsd-v-workflow .gsd-wk-br-b>.gsd-e{background:repeating-linear-gradient(180deg,var(--gsd-faint) 0 5px,transparent 5px 9px)}
.gsd.gsd-v-workflow .gsd-wk-p{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 6px 0 10px;border:1px solid var(--gsd-line);border-radius:999px;background:var(--gsd-bg);font:600 11.5px/1 var(--gsd-sans);color:var(--gsd-text);white-space:nowrap}
.gsd.gsd-v-workflow .gsd-wk-p svg{width:13px;height:13px;color:var(--gsd-mute)}
.gsd.gsd-v-workflow .gsd-wk-p em{display:inline-flex;padding:3px 5px;border-radius:999px;background:color-mix(in srgb,var(--gsd-ai) 12%,transparent);font:500 10.5px/1 var(--gsd-mono);font-style:normal;color:var(--gsd-ai-ink)}

/* ---- the run: the tree drawn, then live once started ------------------------------------------------------------- */
.gsd.gsd-v-workflow .gsd-go .gsd-wk-c[data-t]:not(.gsd-on){transform:scale(.94)}
.gsd.gsd-v-workflow .gsd-go :is(.gsd-wk-r,.gsd-wk-ns>span)[data-t]:not(.gsd-on){transform:none}
.gsd.gsd-v-workflow .gsd-go .gsd-wfp.gsd-started :is(.gsd-wk>.gsd-e,.gsd-wk-br:not(.gsd-wk-br-b)>.gsd-e){background:linear-gradient(180deg,var(--gsd-faint) 0 35%,var(--gsd-ink) 50%,var(--gsd-faint) 65%);background-size:100% 300%;animation:gsd-down 1.6s linear infinite}
.gsd.gsd-v-workflow .gsd-go .gsd-wfp.gsd-started .gsd-wk-c:not(.gsd-wk-cw) .gsd-wk-ic::after{content:"";position:absolute;inset:-3px;border-radius:10px;border:1.5px solid currentColor;opacity:0;animation:gsd-sent 3.6s ease-out infinite}
.gsd.gsd-v-workflow .gsd-go .gsd-wfp.gsd-started .gsd-wk>.gsd-wk-c:nth-of-type(2) .gsd-wk-ic::after{animation-delay:.6s}
.gsd.gsd-v-workflow .gsd-go .gsd-wfp.gsd-started .gsd-wk-br>.gsd-wk-c:first-of-type .gsd-wk-ic::after{animation-delay:1.2s}
.gsd.gsd-v-workflow .gsd-go .gsd-wfp.gsd-started .gsd-wk-br-b>.gsd-wk-c:first-of-type .gsd-wk-ic::after{animation-delay:1.8s}
.gsd.gsd-v-workflow .gsd-go .gsd-wfp.gsd-started .gsd-wk-br>.gsd-wk-c:last-of-type .gsd-wk-ic::after{animation-delay:2.4s}
.gsd.gsd-v-workflow .gsd-go .gsd-wfp.gsd-started .gsd-wk-br-b>.gsd-wk-c:last-of-type .gsd-wk-ic::after{animation-delay:3s}

/* ---- the add-a-step menu (part=nodes): the + under a step open, the sheet with the step types by category --------- */
.gsd.gsd-v-workflow .gsd-wk-ins{position:relative;display:block;width:100%;height:40px}
.gsd.gsd-v-workflow .gsd-wk-ins::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--gsd-faint)}
.gsd.gsd-v-workflow .gsd-wk-ip{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:26px;height:26px;margin:-13px 0 0 -13px;border:1.5px solid var(--gsd-ai);border-radius:50%;background:var(--gsd-bg);color:var(--gsd-ai);box-shadow:0 0 0 4px color-mix(in srgb,var(--gsd-ai) 12%,transparent)}
.gsd.gsd-v-workflow .gsd-wk-ip svg{width:14px;height:14px}
.gsd.gsd-v-workflow .gsd-wk-pk{width:min(100%,680px);margin-top:4px;border:1px solid var(--gsd-line);border-radius:14px;background:var(--gsd-bg);box-shadow:var(--gsd-sh)}
.gsd.gsd-v-workflow .gsd-wk-pkh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px 2px 18px}
.gsd.gsd-v-workflow .gsd-wk-pkh b{font:600 14px/1.2 var(--gsd-sans);color:var(--gsd-ink)}
.gsd.gsd-v-workflow .gsd-wk-pkh svg{width:16px;height:16px;color:var(--gsd-mute)}
.gsd.gsd-v-workflow .gsd-wk-pkb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 0;padding:0 12px 12px}
.gsd.gsd-v-workflow .gsd-wk-pkc{min-width:0;padding:0 6px}
.gsd.gsd-v-workflow .gsd-wk-pkc:nth-child(2n){padding-left:14px;border-left:1px solid var(--gsd-line2)}
.gsd.gsd-v-workflow .gsd-wk-pkt{margin:10px 6px 4px;font:600 10.5px/1.2 var(--gsd-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--gsd-faint)}
.gsd.gsd-v-workflow .gsd-wk-pkc li{display:flex;align-items:center;gap:10px;min-width:0;padding:4px 6px;border-radius:7px;font:550 12.5px/1.25 var(--gsd-sans);color:var(--gsd-ink);white-space:nowrap}
.gsd.gsd-v-workflow .gsd-wk-pkc li .gsd-wk-ic{width:24px;height:24px;border-radius:7px}
.gsd.gsd-v-workflow .gsd-wk-pkc li .gsd-wk-ic svg{width:14px;height:14px}
@container gsd (min-width:780px){
  .gsd.gsd-v-workflow .gsd-wk-pkb{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gsd.gsd-v-workflow .gsd-wk-pkc+.gsd-wk-pkc{padding-left:14px;border-left:1px solid var(--gsd-line2)}
}

/* ---- one path's numbers (part=stats): the block the builder prints under a card ---------------------------------- */
.gsd.gsd-v-workflow .gsd-wk-sb{padding:8px 14px 10px 48px;border-top:1px dashed var(--gsd-line);font:400 11.5px/1.4 var(--gsd-sans);color:var(--gsd-mute)}
.gsd.gsd-v-workflow .gsd-wk-sr{display:flex;justify-content:space-between;gap:10px;margin-top:3px}
.gsd.gsd-v-workflow .gsd-wk-sr b{font-weight:600;color:var(--gsd-text);white-space:nowrap}
.gsd.gsd-v-workflow .gsd-wk-sr.gsd-wk-st{margin-top:0;font-weight:600;color:var(--gsd-text)}
.gsd.gsd-v-workflow .gsd-wk-cv{margin-top:7px;padding-top:6px;border-top:1px dashed var(--gsd-line)}
.gsd.gsd-v-workflow .gsd-wk-cvt{margin-bottom:1px;font:600 10px/1.3 var(--gsd-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--gsd-faint)}
/* each card ends where its numbers end: the LinkedIn message has no In progress row (nobody is), so it is not stretched
   to the email's height with an empty band under its last row */
.gsd.gsd-v-workflow[data-gsd-part=stats] .gsd-wk-br>.gsd-wk-c{align-self:start}

/* ---- a still: a slice that stops above End ends on an edge that fades ------------------------------------------- */
.gsd.gsd-v-workflow[data-gsd-part=steps] .gsd-wk-br>.gsd-e:last-child,
.gsd.gsd-v-workflow[data-gsd-part=approval] .gsd-wk>.gsd-e:last-child{height:24px;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
/* the steps slice is marked whole (mark=steps): its two last edges stop short, so their fade ends inside the ring */
.gsd.gsd-v-workflow[data-gsd-part=steps] .gsd-wk-br>.gsd-e:last-child{height:12px}

/* ---- mark: the ring stands off the tree, the arms and the sheet; a count or a block wears its own -------------- */
.gsd.gsd-v-workflow .gsd-wk[data-gsd-hl]{border-radius:10px;outline-offset:6px}
.gsd.gsd-v-workflow .gsd-wk[data-gsd-hl]::before{inset:-6px;border-radius:16px}
.gsd.gsd-v-workflow .gsd-wk-brs[data-gsd-hl]{border-radius:12px;outline-offset:4px}
.gsd.gsd-v-workflow .gsd-wk-brs[data-gsd-hl]::before{inset:-4px;border-radius:16px}
.gsd.gsd-v-workflow .gsd-wk-pk[data-gsd-hl]{outline-offset:4px}
.gsd.gsd-v-workflow .gsd-wk-pk[data-gsd-hl]::before{inset:-4px;border-radius:18px}
.gsd.gsd-v-workflow :is(.gsd-wk-ns,.gsd-wk-sb)[data-gsd-hl]{border-radius:0 0 11px 11px;outline-offset:-2px}
.gsd.gsd-v-workflow .gsd-wk-n[data-gsd-hl]{padding:3px 5px;margin:-3px -5px;border-radius:6px}
.gsd.gsd-v-workflow .gsd-wk-p em[data-gsd-hl]{outline-offset:1px}

/* ---- a still read beside the page's words (a block's cell, about 600 px): every label at 13 px or more ------------ */
@container gsd (min-width:420px){
  .gsd.gsd-still.gsd-v-workflow .gsd-wk-c{width:min(100%,300px)}
  .gsd.gsd-still.gsd-v-workflow .gsd-wk-h{min-height:56px;padding:8px 12px 8px 10px}
  .gsd.gsd-still.gsd-v-workflow .gsd-wk-t b{font-size:14px;white-space:normal;text-wrap:balance}
  .gsd.gsd-still.gsd-v-workflow .gsd-wk-t small{font-size:13px;white-space:normal}
  .gsd.gsd-still.gsd-v-workflow :is(.gsd-wk-n,.gsd-wk-ns,.gsd-wk-sb){font-size:13px;line-height:18px}
  .gsd.gsd-still.gsd-v-workflow .gsd-wk-ns{padding:6px 12px 7px}
  .gsd.gsd-still.gsd-v-workflow .gsd-wk-sb{padding:9px 14px 11px}
  .gsd.gsd-still.gsd-v-workflow .gsd-wk-cvt{font-size:11.5px}
  .gsd.gsd-still.gsd-v-workflow :is(.gsd-wk-bl,.gsd-wk-p){height:26px;font-size:13px}
  .gsd.gsd-still.gsd-v-workflow .gsd-wk-p em{font-size:12px}
  .gsd.gsd-still.gsd-v-workflow .gsd-wk-pkh b{font-size:15px}
  .gsd.gsd-still.gsd-v-workflow .gsd-wk-pkt{font-size:11.5px}
  .gsd.gsd-still.gsd-v-workflow .gsd-wk-pkc li{font-size:13.5px}
}

/* ---- phones: two arms of about 170 px. A card keeps its name and its counts, a live card's subtitle gives way under
   the fork, and the tree stands in the pane's own height -------------------------------------------------------- */
@container gsd (max-width:599px){
  .gsd.gsd-v-workflow .gsd-wk-br{padding:0 4px}
  .gsd.gsd-v-workflow .gsd-wk-h{grid-template-columns:24px minmax(0,1fr) auto;gap:8px;min-height:42px;padding:6px 10px 6px 8px}
  .gsd.gsd-v-workflow .gsd-wk-ic{width:24px;height:24px;border-radius:7px}
  .gsd.gsd-v-workflow .gsd-wk-ic svg{width:14px;height:14px}
  .gsd.gsd-v-workflow .gsd-wk-t b{font-size:12.5px;white-space:normal}
  .gsd.gsd-v-workflow .gsd-wk-t small{font-size:11px;white-space:normal}
  .gsd.gsd-v-workflow .gsd-wk-n{font-size:11px}
  .gsd.gsd-v-workflow .gsd-wk-ns{padding:4px 10px 5px 40px;font-size:11px}
  /* under the fork a card is about 170 px: its name alone over its counts, one count a line */
  .gsd.gsd-v-workflow .gsd-wk-br .gsd-wk-h{grid-template-columns:24px minmax(0,1fr);min-height:0}
  .gsd.gsd-v-workflow:not(.gsd-still) .gsd-wk-br .gsd-wk-t small{display:none}
  .gsd.gsd-v-workflow .gsd-wk-br .gsd-wk-ns{flex-direction:column;gap:1px;padding-left:10px}
  .gsd.gsd-v-workflow .gsd-wk-bl{height:auto;min-height:22px;padding:3px 8px 3px 6px;font-size:11px;line-height:1.25;white-space:normal;text-align:left}
  .gsd.gsd-v-workflow .gsd-wk-pkb{grid-template-columns:minmax(0,1fr);padding:0 8px 10px}
  .gsd.gsd-v-workflow .gsd-wk-pkc:nth-child(2n){padding-left:6px;border-left:0}
  .gsd.gsd-v-workflow .gsd-wk-pkc ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 4px}
  .gsd.gsd-v-workflow .gsd-wk-pkc li{gap:8px;padding:4px;white-space:normal}
  .gsd.gsd-v-workflow .gsd-wk-sb{padding:7px 10px 9px 40px}
  .gsd.gsd-v-workflow .gsd-wk-br .gsd-wk-sb{padding-left:10px}
}
@container gsd (max-width:419px){
  .gsd.gsd-still.gsd-v-workflow :is(.gsd-wk-n,.gsd-wk-ns,.gsd-wk-sb,.gsd-wk-bl,.gsd-wk-p,.gsd-wk-t small){font-size:12px}
  /* the steps and paths slices on a phone: each branch's label on one line, a step smaller ("Connection accepted") */
  .gsd.gsd-still.gsd-v-workflow:is([data-gsd-part=steps],[data-gsd-part=paths]) .gsd-wk-bl{white-space:nowrap;font-size:11px}
  .gsd.gsd-still.gsd-v-workflow .gsd-wk-pkc li{font-size:12.5px}
}

/* the header's two states, Waits for your OK and Active, share one cell and cross-fade in place, so neither moves and
   the sender profile beside them stays where it is */
.gsd.gsd-v-workflow .gsd-stats{display:inline-grid;flex:none}
.gsd.gsd-v-workflow .gsd-stats>.gsd-stat{grid-area:1/1;justify-self:start}
.gsd.gsd-v-workflow .gsd-go .gsd-ph .gsd-stats>.gsd-stat[data-t]:not(.gsd-on){position:static}
/* in a still only the pill that is on takes room (its gsd-on is printed with the moment, template-parts/demo.php), so
   the one on sits at the header's end and a header with none on keeps one row */
.gsd.gsd-still.gsd-v-workflow .gsd-ph .gsd-stat:not(.gsd-on){display:none}
.gsd.gsd-still.gsd-v-workflow .gsd-ph .gsd-stats:not(:has(.gsd-on)){display:none}
/* a phone's stats still: the cards keep their names and numbers, not their subtitles, so neither wraps to three lines */
@container gsd (max-width:479px){
  .gsd.gsd-v-workflow[data-gsd-part=stats] .gsd-wk-t small{display:none}
}