/* =========================================================
   Triggers & Actions — the event is the page.

   Prefix tr-, layered on pages/products/products.css (pr-), which
   carries the type scale, the sections, the product surface, the FAQ,
   the final CTA, the reveal contract — and, since this page and
   Workflow Builder draw the same diagrams, the node, its ports and the
   four connector shapes.

   THE DISTINCTION THE BRIEF ASKS FOR. Workflow Builder is where you
   build the logic. AI Agents is where intelligence does the work. This
   page is narrower than either: something happened, and the next thing
   happened because of it. So the page never shows a builder and never
   shows a dashboard. Every section is one automation, drawn, with the
   green travelling only down the path that execution actually took.

   SHAPE CARRIES THE TYPE. The brief sets a node language — circle for
   a trigger, diamond for a condition, square for an action, a clock
   for a delay, an arrow for an external system. .pr-gl draws those in
   CSS and sits at the head of every node's kind label, beside the word.
   Shape AND word, so neither the shape nor the green is ever the only
   thing saying what a node is (§8.4).
   ========================================================= */

.tr { --canvas: #fafbfd; }

/* Two clauses, and at the shared .82fr column the first one breaks after
   "every" — a 92px orphan under a 505px line. .96fr holds "Turn every
   event" and "into the next action." on two lines at 544px. */
.tr .pr-hero__cols { grid-template-columns: minmax(0, .96fr) minmax(0, 1fr); }
.tr .pr-h1 { font-size: calc(58 * var(--u)); line-height: calc(69 * var(--u)); }



/* the same final state for this page's own two connectors (§9.8) */
@media (prefers-reduced-motion: reduce) {
  .tr-seam > i::after { width: 100%; }
}



/* =========================================================
   01 TRIGGER / LOGIC / ACTION — the page in one table
   ========================================================= */
/* no subgrid: the header and every row declare the same three tracks,
   which is one line more and works everywhere */
.tr-grid { border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; overflow: hidden; }
.tr-grid__h, .tr-grid__r { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(8 * var(--u)); }
.tr-grid__h { padding: calc(15 * var(--u)) calc(22 * var(--u)); border-bottom: 1px solid var(--rule); background: #fcfcfb; }
.tr-grid__r { align-items: center; padding: calc(20 * var(--u)) calc(22 * var(--u)); }
.tr-grid__r + .tr-grid__r { border-top: 1px solid var(--rule); }
.tr-grid__r > * { min-width: 0; }
/* the arrow between the three cells. It is a decoration, so it is a
   pseudo-element on the cell and never reaches the accessibility tree. */
.tr-grid__r > :not(:last-child) { position: relative; padding-right: calc(26 * var(--u)); }
.tr-grid__r > :not(:last-child)::after { content: ""; position: absolute; top: 50%; right: calc(8 * var(--u)); width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-top: 2px solid var(--divider); border-right: 2px solid var(--divider); transform: translateY(-50%) rotate(45deg); }
.is-in .tr-grid__r > :not(:last-child)::after { border-color: var(--brand-ico); transition: border-color .5s var(--ease) calc(var(--i, 0) * 160ms + 260ms); }
.tr-cell { display: grid; gap: calc(7 * var(--u)); }
.tr-cell b { font-size: calc(16.5 * var(--u)); font-weight: 600; letter-spacing: -.015em; }

/* =========================================================
   02 TRIGGER SOURCES — the library, and the one that is playing
   ========================================================= */
.tr-srcs { display: grid; grid-template-columns: calc(298 * var(--u)) minmax(0, 1fr); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; overflow: hidden; box-shadow: var(--shadow); }
.tr-lib { display: grid; align-content: start; gap: calc(4 * var(--u)); padding: calc(16 * var(--u)); border-right: 1px solid var(--rule); background: #fcfcfb; }
.tr-lib__k { padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)); }
.tr-src { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: calc(11 * var(--u)); row-gap: calc(9 * var(--u)); width: 100%; padding: calc(12 * var(--u)) calc(13 * var(--u)); border: 1px solid transparent; border-radius: var(--r-sm); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease); }
.tr-src:hover { background: #fff; border-color: var(--rule); }
.tr-src > b { font-size: calc(15 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.tr-src[aria-selected="true"] { background: #fff; border-color: var(--brand-ico); }
.tr-src[aria-selected="true"] .pr-gl { color: var(--brand-ink); }
.tr-src .bar { grid-column: 1 / -1; height: calc(3 * var(--u)); border-radius: 999px; background: var(--rule); overflow: hidden; }
.tr-src .bar > i { display: block; width: 100%; height: 100%; border-radius: 999px; background: var(--brand-ico); transform: scaleX(0); transform-origin: left; }
.tr-src:not([aria-selected="true"]) .bar { visibility: hidden; }

.tr-view { display: grid; align-content: start; gap: calc(22 * var(--u)); padding: calc(26 * var(--u)) calc(28 * var(--u)) calc(30 * var(--u)); min-width: 0; }
/* the panel itself has to space its own three parts; the gap on .tr-view
   only separates the panel from the Replay button below it. The grid here
   is (0,1,0) and .pr-panel[hidden] upstairs is (0,2,0), so hiding still
   wins — which is the whole reason that rule is written that way. */
.tr-panel { display: grid; align-content: start; gap: calc(20 * var(--u)); }
.tr-view__head { display: grid; gap: calc(9 * var(--u)); }
/* __head, not .tr-view: a bare `h3`/`p` descendant selector is (0,1,1)
   and silently beats .pr-node__t (0,1,0), which would retype every node
   title in the panel at 16px prose (§14.1) */
.tr-view__head h3 { font-family: var(--font-head); font-size: calc(26 * var(--u)); line-height: calc(33 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.tr-view__head p { font-size: calc(16 * var(--u)); line-height: calc(25 * var(--u)); color: var(--prose); max-width: calc(560 * var(--u)); }
.tr-evs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(9 * var(--u)) calc(24 * var(--u)); max-width: calc(620 * var(--u)); }
.tr-evs > li { display: flex; align-items: center; gap: calc(9 * var(--u)); font-size: calc(14.5 * var(--u)); font-weight: 500; color: var(--text); }
.tr-evs > li::before { content: ""; flex: none; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; border: 2px solid var(--brand-ico); }
.tr-replay { justify-self: start; }

/* =========================================================
   03 ONE EVENT, MANY ACTIONS — and what each one produced
   ========================================================= */
.tr-out { width: 100%; margin-top: calc(13 * var(--u)); padding: calc(13 * var(--u)) calc(14 * var(--u)); border: 1px solid var(--rule); border-radius: calc(10 * var(--u)); background: #fff; }
.tr-out__m { margin-top: calc(7 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 500; }
.tr-out__ok { display: flex; align-items: center; gap: calc(7 * var(--u)); margin-top: calc(10 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-ink); }
.tr-out__ok i { display: grid; place-items: center; flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; background: var(--brand); }
.tr-out__ok .i { width: calc(9 * var(--u)); height: calc(9 * var(--u)); stroke-width: 3; color: var(--brand-ink); }
.tr-flow { display: grid; justify-items: center; }
.tr-flow .pr-trio, .tr-flow .pr-fan, .tr-flow .pr-gather { max-width: calc(880 * var(--u)); }

/* =========================================================
   04 CONDITIONS, DELAYS, ESCALATIONS
   ========================================================= */
.tr-split { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); column-gap: calc(56 * var(--u)); align-items: start; }
.tr-split.flip > :first-child { order: 2; }
.tr-defs { display: grid; gap: calc(26 * var(--u)); margin-top: calc(34 * var(--u)); }
.tr-defs > div { display: grid; gap: calc(9 * var(--u)); padding-top: calc(22 * var(--u)); border-top: 1px solid var(--rule); }
.tr-defs h3 { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(19 * var(--u)); font-weight: 600; letter-spacing: -.02em; }
.tr-defs > div > p { font-size: calc(16 * var(--u)); line-height: calc(25 * var(--u)); color: var(--prose); }
.tr-eg { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-top: calc(3 * var(--u)); }
.tr-eg > li { padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: 999px; background: var(--grey); font-size: calc(13 * var(--u)); font-weight: 600; color: var(--text); }

/* =========================================================
   05 THE EXECUTION LOG
   ========================================================= */
.tr-log { display: grid; }
.tr-log > li { border-bottom: 1px solid var(--rule); }
.tr-log > li:last-child { border-bottom: 0; }
.tr-log__r { display: grid; grid-template-columns: calc(66 * var(--u)) calc(20 * var(--u)) minmax(0, 1fr) auto; align-items: center; column-gap: calc(13 * var(--u)); padding: calc(13 * var(--u)) 0; }
.tr-log time { font-size: calc(12.5 * var(--u)); color: var(--faint); font-variant-numeric: tabular-nums; }
.tr-log__r > i { display: grid; place-items: center; width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; background: var(--brand); }
.tr-log__r > i .i { width: calc(11 * var(--u)); height: calc(11 * var(--u)); stroke-width: 2.8; color: var(--brand-ink); }
.tr-log b { font-size: calc(15.5 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.tr-log em { font-style: normal; font-size: calc(13 * var(--u)); font-weight: 600; color: var(--brand-ink); white-space: nowrap; }
/* two rows carry the detail the panel would expand to show. A native
   <details> does it with no script, so it still opens with JS blocked. */
.tr-log details > summary { list-style: none; cursor: pointer; }
.tr-log details > summary::-webkit-details-marker { display: none; }
.tr-log details .tr-log__r { padding-right: calc(24 * var(--u)); }
.tr-log details > summary { position: relative; }
.tr-log details > summary::after { content: ""; position: absolute; top: 50%; right: calc(4 * var(--u)); width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-right: 2px solid var(--divider); border-bottom: 2px solid var(--divider); transform: translateY(-75%) rotate(45deg); transition: transform .25s var(--ease); }
.tr-log details[open] > summary::after { transform: translateY(-25%) rotate(-135deg); }
.tr-log details > div { padding: 0 calc(24 * var(--u)) calc(15 * var(--u)) calc(100 * var(--u)); }
.tr-log__det { display: grid; gap: calc(6 * var(--u)); padding: calc(13 * var(--u)) calc(15 * var(--u)); border-radius: calc(9 * var(--u)); background: var(--grey); font-size: calc(13.5 * var(--u)); line-height: calc(20 * var(--u)); color: var(--prose); }
.tr-log__det code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: calc(12.5 * var(--u)); color: var(--text); }

/* =========================================================
   06 SIMPLE / FLEXIBLE
   ========================================================= */
.tr-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(22 * var(--u)); }
.tr-mode { display: grid; align-content: start; gap: calc(10 * var(--u)); padding: calc(30 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; }
.tr-mode > p { font-size: calc(16 * var(--u)); line-height: calc(25 * var(--u)); color: var(--prose); }
.tr-mode .pr-chain { margin-top: calc(22 * var(--u)); }
.tr-mode .pr-node { width: calc(230 * var(--u)); }

/* =========================================================
   07 THE REAL EXAMPLE
   ========================================================= */
.tr-req { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1fr); column-gap: calc(56 * var(--u)); align-items: center; }
/* hospital-wide.webp is a wide room: reception on the left, the inpatient
   bay on the right. The story here is the bay, so the frame is portrait
   and the crop sits over the bed, the consultant and the nurse. */
.tr-req figure { overflow: hidden; border-radius: var(--r-card); }
.tr-req img { width: 100%; height: calc(470 * var(--u)); object-fit: cover; object-position: 78% 46%; }
.tr-said { display: grid; gap: calc(6 * var(--u)); }
.tr-said q { font-family: var(--font-head); font-size: calc(19 * var(--u)); line-height: calc(26 * var(--u)); font-weight: 500; letter-spacing: -.025em; quotes: none; }
.tr-ack { display: grid; gap: calc(10 * var(--u)); padding: calc(16 * var(--u)); border: 1px solid var(--brand-ico); border-radius: calc(13 * var(--u)); background: var(--brand-soft); }
.tr-ticket { display: grid; gap: calc(5 * var(--u)); padding-top: calc(12 * var(--u)); border-top: 1px solid rgba(13, 141, 204, .5); }
.tr-ticket > div { display: flex; align-items: baseline; justify-content: space-between; gap: calc(14 * var(--u)); font-size: calc(13.5 * var(--u)); }
.tr-ticket dt { color: var(--muted); }
.tr-ticket dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.tr-staff { width: 100%; margin-top: calc(13 * var(--u)); padding: calc(15 * var(--u)) calc(16 * var(--u)); border: 1px solid var(--rule); border-radius: calc(10 * var(--u)); background: #fff; }
.tr-staff b { display: block; margin-top: calc(7 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.tr-staff dl { display: grid; gap: calc(5 * var(--u)); margin-top: calc(11 * var(--u)); }
.tr-staff dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: calc(12 * var(--u)); font-size: calc(13.5 * var(--u)); }
.tr-staff dt { color: var(--muted); }
.tr-staff dd { font-weight: 600; }
.tr-staff dd.on { color: var(--brand-ink); }
.tr-staff.solo { max-width: calc(320 * var(--u)); margin: calc(26 * var(--u)) auto 0; }

/* =========================================================
   THE FINAL SEAM — event, a line, action (§9.5)
   ========================================================= */
.tr-seam { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(22 * var(--u)); max-width: calc(560 * var(--u)); margin: calc(56 * var(--u)) auto 0; }
.tr-seam > span { flex: none; font-size: calc(11.5 * var(--u)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tr-seam > i { position: relative; flex: 1 1 auto; height: 2px; background: var(--rule); }
.tr-seam > i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--brand-ico); transition: width 1.6s var(--ease) .2s; }
.tr-seam.is-in > i::after { width: 100%; }

/* =========================================================
   PREV / NEXT

   The eight product pages before this one each carry their own copy of
   this block under their own prefix (.wf-nav, .ag-nav, .iv-nav …). It is
   the same twenty lines eight times. It lives in products.css now as
   .pr-pnav and this page uses it from there; the other eight should come
   onto it when someone is next in those files.
   ========================================================= */
.tr-back { margin-top: calc(26 * var(--u)); }

/* =========================================================
   MOTION (§9) — every drawing is complete at rest
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* the horizontal wires inside a source panel redraw each time the
     panel is shown, so a switch reads as the event travelling again */
  .tr-panel:not([hidden]) .pr-hwire > i::after { animation: trDraw .6s var(--ease) var(--wd, 0ms) backwards; }
  @keyframes trDraw { from { width: 0; } }
  .tr-panel:not([hidden]) .pr-node { opacity: 1; transform: none; animation: trRise .45s var(--ease) var(--wd, 0ms) backwards; }
  @keyframes trRise { from { opacity: 0; transform: translateY(6px); } }
  /* the bar under the source that is playing */
  .tr-srcs.is-cycling .tr-src[aria-selected="true"] .bar > i { animation: trFill 5200ms linear forwards; }
  @keyframes trFill { to { transform: scaleX(1); } }
  /* the log writes itself a line at a time */
  .pr-js .tr-log > li { opacity: 0; }
  .pr-js .is-in .tr-log > li { opacity: 1; transition: opacity .4s var(--ease) calc(var(--i, 0) * 230ms); }
  .pr-js .tr-out { opacity: 0; transform: translateY(calc(8 * var(--u))); }
  .pr-js .is-in .tr-out { opacity: 1; transform: none; transition: opacity .5s var(--ease) calc(var(--i, 0) * 170ms + 900ms), transform .5s var(--ease) calc(var(--i, 0) * 170ms + 900ms); }
}

/* =========================================================
   Below 1180 --u is 1px. Stack, don't shrink (§10).

   The brief is explicit about this one: "do not shrink complex desktop
   diagrams onto mobile — convert them into vertical flows." So the fan
   and the gather become a single column, and the three branches of
   section 03 become three sequential steps rather than three columns
   4px apart.
   ========================================================= */
@media (max-width: 1179px) {
  .tr .pr-hero__cols { grid-template-columns: minmax(0, 1fr); }
  .tr .pr-h1 { font-size: clamp(32px, 7.4vw, 48px); line-height: 1.08; }

  /* a 3-wide table of 110px columns is unreadable; one event per row,
     with the three cells stacked and the arrow turned downward */
  .tr-grid__h, .tr-grid__r { grid-template-columns: minmax(0, 1fr); }
  .tr-grid__h { display: none; }
  .tr-grid__r { row-gap: 18px; padding: 20px; }
  .tr-grid__r > :not(:last-child) { padding-right: 0; padding-bottom: 20px; }
  .tr-grid__r > :not(:last-child)::after { top: auto; bottom: 4px; right: auto; left: 0; transform: rotate(135deg); }

  .tr-srcs { grid-template-columns: minmax(0, 1fr); }
  .tr-lib { grid-auto-flow: column; grid-auto-columns: max-content; gap: 6px; padding: 12px; border-right: 0; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
  .tr-lib::-webkit-scrollbar { display: none; }
  .tr-lib__k { display: none; }
  .tr-src { grid-template-columns: auto auto; row-gap: 6px; white-space: nowrap; }
  .tr-view { padding: 20px 18px 24px; gap: 18px; }
  .tr-view__head h3 { font-size: 21px; line-height: 28px; }
  .tr-view__head p { font-size: 15px; line-height: 23px; }
  .tr-evs { grid-template-columns: minmax(0, 1fr); }

  .tr-out { max-width: 320px; }


  .tr-split { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .tr-split.flip > :first-child { order: 0; }
  .tr-defs { margin-top: 24px; gap: 20px; }
  .tr-defs > div { padding-top: 18px; }

  .tr-log__r { grid-template-columns: 20px minmax(0, 1fr) auto; row-gap: 3px; }
  .tr-log time { grid-column: 2 / -1; grid-row: 2; }
  .tr-log details > div { padding: 0 0 14px 33px; }

  .tr-modes { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tr-mode { padding: 22px; }
  .tr-mode .pr-node { width: 100%; max-width: 320px; }

  .tr-req { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .tr-req img { height: 260px; }

  .tr-seam { margin-top: 36px; gap: 14px; }
  .tr-back { margin-top: 22px; }
}

/* The draw animation grows the blue overlay along the wire. Vertical wire,
   vertical growth — animating width on a 2px-wide line is invisible. */
@media (max-width: 1179px) and (prefers-reduced-motion: no-preference) {
  .tr-panel:not([hidden]) .pr-hwire > i::after { animation-name: trDrawY; }
  @keyframes trDrawY { from { height: 0; } }
}