/* =========================================================
   Workflow Builder — the node is the page.

   Prefix wf-, layered on pages/products/products.css (pr-), which
   carries the type scale, the sections, the product surface, tags,
   fields, the FAQ, the final CTA and the reveal contract.

   THE ONE DESIGN DECISION. The brief's last line is "do not explain the
   Workflow Builder with screenshots — let the Workflow Builder become
   the visual language of the page." So there is exactly one drawing
   primitive here, .wf-node, and every section is built from it: five
   nodes in the hero, two in a micro-story, eleven in the complete
   workflow, twenty in the library. Sixteen sections, one vocabulary.

   PORTS ARE NAMED, NOT COLOURED. Next, Fallback, Success, Failure are
   words with a dot beside them, never a dot alone (§8.4) — on a page
   whose whole subject is which path execution took, that matters more
   than anywhere else on the site.
   ========================================================= */

.wf { --rose: #ffe8e4; --rose-ink: #b23a2c; --canvas: #fafaf8; }

/* This headline is long. At the shared .82fr column and 64u it breaks to
   FOUR lines ending on one word; the two halves measure 523 and 599 against
   a 505px column. A wider column and 57u gives 474 and 533 against 546 —
   two lines, which is what every other product page does. */
.wf .pr-hero__cols { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); }
.wf .pr-h1 { font-size: calc(57 * var(--u)); line-height: calc(68 * var(--u)); }

/* =========================================================
   THE NODE — one card, used about seventy times
   ========================================================= */
.wf-node { position: relative; display: grid; align-content: start; gap: calc(9 * var(--u)); width: calc(216 * var(--u)); padding: calc(14 * var(--u)) calc(15 * var(--u)); border: 1px solid var(--rule); border-radius: calc(12 * var(--u)); background: #fff; box-shadow: 0 1px 2px rgba(17, 19, 24, .05); transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.wf-node:hover { border-color: var(--lime-ico); box-shadow: 0 2px 4px rgba(17, 19, 24, .07), 0 calc(10 * var(--u)) calc(22 * var(--u)) calc(-16 * var(--u)) rgba(17, 19, 24, .18); transform: translateY(calc(-2 * var(--u))); }
.wf-node.wide { width: calc(250 * var(--u)); }
.wf-node.sm { width: calc(184 * var(--u)); padding: calc(12 * var(--u)) calc(13 * var(--u)); }
.wf-node.fill { width: 100%; }

.wf-node__k { display: flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(10.5 * var(--u)); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.wf-node__k .i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.wf-node__t { font-size: calc(15.5 * var(--u)); line-height: calc(21 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.wf-node__cfg { display: flex; align-items: center; gap: calc(7 * var(--u)); padding-top: calc(9 * var(--u)); border-top: 1px solid var(--rule); font-size: calc(12 * var(--u)); color: var(--muted); }
.wf-node__cfg::before { content: ""; flex: none; width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; border: 2px solid var(--divider); }

/* the ports. A word first, a dot second — never the dot alone */
.wf-ports { display: grid; gap: calc(5 * var(--u)); padding-top: calc(9 * var(--u)); border-top: 1px solid var(--rule); }
.wf-ports > li { display: flex; align-items: center; justify-content: flex-end; gap: calc(8 * var(--u)); font-size: calc(10.5 * var(--u)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wf-ports > li::after { content: ""; flex: none; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--divider); }
.wf-ports .ok::after { background: var(--lime-ico); }
.wf-ports .no::after { background: var(--rose-ink); }
.wf-ports .no { color: var(--rose-ink); }

/* node states, each with something other than colour saying so */
.wf-node.on { border-color: var(--lime-ico); box-shadow: 0 0 0 calc(3 * var(--u)) var(--lime-soft); }
.wf-node.on .wf-node__k { color: var(--lime-ink); }
.wf-node.ai { border-color: var(--lime-ico); }
.wf-node.ai .wf-node__k { color: var(--lime-ink); }
.wf-node.alt { border-color: var(--rose-ink); background: var(--rose); }
.wf-node.alt .wf-node__k, .wf-node.alt .wf-node__t { color: var(--rose-ink); }
.wf-node__flag { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(4 * var(--u)) calc(9 * var(--u)); border-radius: 999px; background: var(--lime); font-size: calc(10.5 * var(--u)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; justify-self: start; }
.wf-node__flag.warn { background: var(--amber); color: var(--amber-ink); }
.wf-node__flag.bad { background: var(--rose); color: var(--rose-ink); }

/* a strip of fake editor lines, for the custom-code node only */
.wf-code { display: grid; gap: calc(5 * var(--u)); padding: calc(11 * var(--u)); border-radius: calc(7 * var(--u)); background: var(--grey); }
.wf-code > i { display: block; height: calc(4 * var(--u)); border-radius: 999px; background: var(--divider); }
.wf-code > i:nth-child(1) { width: 72%; }
.wf-code > i:nth-child(2) { width: 46%; background: var(--lime-ico); }
.wf-code > i:nth-child(3) { width: 84%; }
.wf-code > i:nth-child(4) { width: 38%; }

/* =========================================================
   THE CONNECTORS — three shapes, drawn in CSS
   ========================================================= */
.wf-link { display: grid; justify-items: center; height: calc(34 * var(--u)); }
.wf-link > i { display: block; width: 2px; height: 100%; background: var(--divider); }
.wf-link > i::after { content: ""; display: block; width: 2px; height: 0; background: var(--lime-ico); transition: height .8s var(--ease) var(--wd, 0ms); }
.is-in .wf-link > i::after { height: 100%; }
.wf-link.sm { height: calc(24 * var(--u)); }

/* one in, two out */
.wf-split { position: relative; width: 100%; height: calc(46 * var(--u)); }
.wf-split > i { position: absolute; background: var(--divider); }
.wf-split > i:nth-child(1) { top: 0; left: calc(50% - 1px); width: 2px; height: calc(22 * var(--u)); }
.wf-split > i:nth-child(2) { top: calc(22 * var(--u)); left: 25%; right: 25%; height: 2px; }
.wf-split > i:nth-child(3) { top: calc(22 * var(--u)); left: calc(25% - 1px); width: 2px; bottom: 0; }
.wf-split > i:nth-child(4) { top: calc(22 * var(--u)); right: calc(25% - 1px); width: 2px; bottom: 0; }
.is-in .wf-split > i { background: var(--lime-ico); transition: background .5s var(--ease) var(--wd, 0ms); }
.is-in .wf-split > i:nth-child(2) { transition-delay: calc(var(--wd, 0ms) + 200ms); }
.is-in .wf-split > i:nth-child(3), .is-in .wf-split > i:nth-child(4) { transition-delay: calc(var(--wd, 0ms) + 400ms); }

/* two in, one out */
.wf-join { position: relative; width: 100%; height: calc(46 * var(--u)); }
.wf-join > i { position: absolute; background: var(--divider); }
.wf-join > i:nth-child(1) { top: 0; left: calc(25% - 1px); width: 2px; height: calc(24 * var(--u)); }
.wf-join > i:nth-child(2) { top: 0; right: calc(25% - 1px); width: 2px; height: calc(24 * var(--u)); }
.wf-join > i:nth-child(3) { top: calc(24 * var(--u)); left: 25%; right: 25%; height: 2px; }
.wf-join > i:nth-child(4) { top: calc(24 * var(--u)); left: calc(50% - 1px); width: 2px; bottom: 0; }
.is-in .wf-join > i { background: var(--lime-ico); transition: background .5s var(--ease) var(--wd, 0ms); }

/* the two labels that sit on a fork's legs */
.wf-legs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; width: 100%; margin-top: calc(-6 * var(--u)); margin-bottom: calc(10 * var(--u)); }
.wf-legs > span { font-size: calc(10.5 * var(--u)); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

/* =========================================================
   LAYOUTS BUILT FROM THEM
   ========================================================= */
/* a plain top-to-bottom run */
.wf-chain { display: grid; justify-items: center; }
/* one node, a fork, two nodes */
.wf-tree { display: grid; justify-items: center; width: 100%; }
.wf-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; gap: calc(16 * var(--u)); width: 100%; }
.wf-pair > * { justify-self: center; }

/* the canvas a workflow sits on */
.wf-canvas { padding: calc(30 * var(--u)) calc(26 * var(--u)) calc(34 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--canvas); background-image: radial-gradient(var(--divider) 1px, transparent 1px); background-size: calc(22 * var(--u)) calc(22 * var(--u)); }
.wf-canvas__bar { display: flex; flex-wrap: wrap; gap: calc(7 * var(--u)); margin-bottom: calc(26 * var(--u)); }
.wf-canvas__bar > li { display: flex; align-items: center; gap: calc(7 * var(--u)); padding: calc(7 * var(--u)) calc(13 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: calc(12 * var(--u)); font-weight: 600; color: var(--muted); }
.wf-canvas__bar .i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); color: var(--faint); }
.wf-canvas__bar .on { border-color: var(--lime-ico); background: var(--lime); color: var(--ink); }
.wf-canvas__bar .on .i { color: var(--lime-ink); }

/* the standard micro-story: words one side, nodes the other */
.wf-story { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1fr); column-gap: calc(56 * var(--u)); align-items: center; }
.wf-story.flip > :first-child { order: 2; }
.wf-story__note { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(26 * var(--u)); padding: calc(8 * var(--u)) calc(15 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: calc(11.5 * var(--u)); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.wf-story__note .i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: var(--lime-ink); }

/* nodes arrive in order, like execution (§9.4) */
.pr-js .wf-node { opacity: 0; transform: translateY(calc(8 * var(--u))); }
.pr-js .is-in .wf-node { opacity: 1; transform: none; transition: opacity .45s var(--ease) calc(var(--i, 0) * 170ms), transform .45s var(--ease) calc(var(--i, 0) * 170ms); }

/* =========================================================
   THE THREE SHORT STORIES
   ========================================================= */
.wf-tales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(32 * var(--u)); }
.wf-tale { display: grid; align-content: start; justify-items: center; gap: calc(10 * var(--u)); }
.wf-tale__head { display: grid; gap: calc(8 * var(--u)); width: 100%; margin-bottom: calc(14 * var(--u)); }
.wf-tale__head p { font-size: calc(15 * var(--u)); line-height: calc(23 * var(--u)); color: var(--muted); text-wrap: pretty; }
.wf-tale .wf-node { width: 100%; }

/* =========================================================
   EXTERNAL SYSTEMS
   ========================================================= */
.wf-out { display: grid; justify-items: center; }
.wf-out__ring { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(14 * var(--u)); width: 100%; margin-top: calc(26 * var(--u)); }
.wf-out__ring > li { display: flex; align-items: center; gap: calc(11 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; font-size: calc(15 * var(--u)); font-weight: 600; }
.wf-out__ring .i { color: var(--lime-ink); }
.wf-out__ring span { margin-left: auto; font-size: calc(12.5 * var(--u)); font-weight: 600; color: var(--faint); }

/* =========================================================
   THE COMPLETE WORKFLOW
   ========================================================= */
.wf-flow { display: grid; justify-items: center; padding: calc(34 * var(--u)) calc(26 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--canvas); background-image: radial-gradient(var(--divider) 1px, transparent 1px); background-size: calc(22 * var(--u)) calc(22 * var(--u)); }
.wf-flow .wf-pair { max-width: calc(620 * var(--u)); }
.wf-stack { display: grid; justify-items: center; }

/* =========================================================
   TEST AND LOGS
   ========================================================= */
.wf-run { display: grid; }
.wf-run > li { display: grid; grid-template-columns: calc(22 * var(--u)) minmax(0, 1fr) auto; align-items: center; column-gap: calc(14 * var(--u)); padding: calc(13 * var(--u)) 0; border-bottom: 1px solid var(--rule); }
.wf-run > li:last-child { border-bottom: 0; }
.wf-run i { display: grid; place-items: center; width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; background: var(--lime); }
.wf-run i .i { width: calc(11 * var(--u)); height: calc(11 * var(--u)); stroke-width: 2.6; color: var(--lime-ink); }
.wf-run .warn i { background: var(--amber); }
.wf-run .warn i .i { color: var(--amber-ink); }
.wf-run b { font-size: calc(15.5 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.wf-run em { font-style: normal; font-size: calc(13 * var(--u)); font-weight: 600; color: var(--muted); }
.wf-run .warn em { color: var(--amber-ink); }
.wf-acts { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); margin-top: calc(22 * var(--u)); }
.wf-acts > li { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(10 * var(--u)) calc(18 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: calc(14 * var(--u)); font-weight: 600; }
.wf-acts .on { border-color: var(--lime-ico); background: var(--lime); }

/* =========================================================
   THE HUMAN BREAK
   ========================================================= */
.wf-people { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(56 * var(--u)); align-items: center; }
.wf-people figure { width: calc(300 * var(--u)); }
.wf-people img {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(to bottom, #000 76%, rgba(0, 0, 0, 0) 100%);
}

/* =========================================================
   THE NODE LIBRARY
   ========================================================= */
.wf-lib { display: grid; gap: calc(30 * var(--u)); }
.wf-lib__row { display: grid; grid-template-columns: calc(190 * var(--u)) minmax(0, 1fr); column-gap: calc(32 * var(--u)); align-items: start; padding-bottom: calc(26 * var(--u)); border-bottom: 1px solid var(--rule); }
.wf-lib__row:last-child { border-bottom: 0; padding-bottom: 0; }
.wf-lib__row > .pr-k { padding-top: calc(5 * var(--u)); }
.wf-blocks { display: flex; flex-wrap: wrap; gap: calc(9 * var(--u)); }
.wf-blocks > li { display: flex; align-items: center; gap: calc(9 * var(--u)); padding: calc(10 * var(--u)) calc(15 * var(--u)); border: 1px solid var(--rule); border-radius: calc(10 * var(--u)); background: #fff; font-size: calc(14 * var(--u)); font-weight: 600; box-shadow: 0 1px 2px rgba(17, 19, 24, .04); }
.wf-blocks .i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: var(--faint); }

/* =========================================================
   PREV / NEXT
   ========================================================= */
.wf-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16 * var(--u)); max-width: calc(880 * var(--u)); margin: calc(60 * var(--u)) auto 0; text-align: left; }
.wf-nav a { display: grid; align-content: start; gap: calc(6 * var(--u)); padding: calc(24 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; transition: border-color .2s var(--ease), background .2s var(--ease); }
.wf-nav a:hover { border-color: var(--lime-ico); background: var(--lime-soft); }
.wf-nav b { font-family: var(--font-head); font-size: calc(23 * var(--u)); font-weight: 500; letter-spacing: -.028em; }
.wf-nav > a > span:last-child { font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); color: var(--muted); }
.wf-nav .wf-nav__next { text-align: right; justify-items: end; }
.wf-back { margin-top: calc(26 * var(--u)); }

/* =========================================================
   Below 1180 --u is 1px. Stack, don't shrink (§10).
   ========================================================= */
@media (max-width: 1179px) {
  .wf .pr-hero__cols { grid-template-columns: minmax(0, 1fr); }
  .wf .pr-h1 { font-size: clamp(32px, 7.4vw, 48px); line-height: 1.08; }
  .wf-node, .wf-node.wide, .wf-node.sm { width: 100%; max-width: 320px; }
  .wf-canvas, .wf-flow { padding: 18px 14px 22px; background-size: 18px 18px; }
  .wf-canvas__bar { margin-bottom: 18px; }

  .wf-story { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .wf-story.flip > :first-child { order: 0; }
  .wf-story__note { margin-top: 18px; }

  /* a fork of two full-width cards is just two cards; keep the pair side
     by side but let the node shrink inside it */
  .wf-pair { gap: 10px; }
  .wf-pair .wf-node { max-width: none; padding: 11px 12px; }
  .wf-pair .wf-node__t { font-size: 14px; line-height: 19px; }
  .wf-pair .wf-node__k { font-size: 9.5px; letter-spacing: .07em; }
  .wf-split, .wf-join { height: 34px; }
  .wf-split > i:nth-child(1) { height: 16px; }
  .wf-split > i:nth-child(2), .wf-split > i:nth-child(3), .wf-split > i:nth-child(4) { top: 16px; }
  .wf-join > i:nth-child(1), .wf-join > i:nth-child(2) { height: 18px; }
  .wf-join > i:nth-child(3), .wf-join > i:nth-child(4) { top: 18px; }
  .wf-link { height: 24px; }

  .wf-tales { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .wf-out__ring { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .wf-people { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .wf-people figure { width: min(58%, 220px); }

  .wf-lib__row { grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding-bottom: 20px; }
  .wf-lib { gap: 22px; }
  .wf-blocks > li { font-size: 13px; padding: 9px 13px; }

  .wf-nav { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .wf-nav a { padding: 20px; }
  .wf-nav .wf-nav__next { text-align: left; justify-items: start; }
  .wf-nav b { font-size: 20px; }
}