/* Workflow Builder page.

   The page is built from the site's own classes: page-hero, section,
   section-subtle, section-head, grid-3, plain-card, final-cta. This file
   holds only what those don't cover: the hero's button row and video
   column, the "How a workflow decides" diagram, the details on the six step
   cards and the rule cards, and the player itself.

   Colours are the site's: ink #161727, body #434357, accent #8046e1, card
   border rgba(22,23,39,.1), subtle ground #f8f8f9. */

.wfp-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.wfp-video { max-width: 1040px; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------ the diagram
   Five columns on a wide screen -- the name match, three steps and the
   Include ending -- with the Exclude ending under the two steps that send
   records there. One column on a phone, where each step's own outcome list
   already says where a record goes. */
/* The legend sits beside the diagram, not inside it, so both carry the
   colours -- declared on .wd alone, the key's dots resolved to nothing. */
.wd, .wd-key {
  --wd-ink: #161727; --wd-body: #434357; --wd-mute: #787888;
  --wd-line: rgba(22, 23, 39, .1); --wd-blue: #8046e1;
  --wd-keep: #0f8a66; --wd-keep-bg: #e9f7f1;
  --wd-drop: #c2412d; --wd-drop-bg: #fcefec;
  --wd-amber: #a86400; --wd-amber-bg: #fdf4e5;
}
.wd { display: grid; gap: 18px; position: relative; }
@media (min-width: 1000px) {
  .wd { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 30px; }
}
.wd-node, .wd-end {
  position: relative; min-width: 0; background: #fff; border: 1px solid var(--wd-line);
  border-radius: 20px; padding: 20px;
  box-shadow: 0 1px 2px rgba(22, 23, 39, .04), 0 12px 32px -18px rgba(22, 23, 39, .18);
  display: flex; flex-direction: column; gap: 8px;
}
.wd-node b, .wd-end b { font-size: 17px; font-weight: 600; color: var(--wd-ink); }
.wd-node p, .wd-end p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--wd-body); }
.wd-k {
  align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wd-blue); background: rgba(128, 70, 225, .07); border: 1px solid rgba(128, 70, 225, .28);
  padding: 3px 10px; border-radius: 999px;
}
.wd-k.c { color: var(--wd-keep); background: var(--wd-keep-bg); border-color: rgba(15, 138, 102, .3); }
.wd-start { border-color: rgba(128, 70, 225, .35); background: #f9f7fd; }
.wd-yes { background: var(--wd-keep-bg); border-color: rgba(15, 138, 102, .3); }
.wd-yes b, .wd-yes svg { color: var(--wd-keep); }
.wd-yes svg { width: 22px; height: 22px; }

.wd-outs { list-style: none; margin: 6px 0 0; padding: 10px 0 0; border-top: 1px solid var(--wd-line);
  display: flex; flex-direction: column; gap: 6px; }
.wd-outs li, .wd-key li {
  display: grid; grid-template-columns: 9px 1fr; gap: 8px; align-items: baseline;
  font-size: 12.5px; line-height: 1.45; color: var(--wd-body);
}
.wd-outs li::before, .wd-key li::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; transform: translateY(1px);
}
.wd-outs .m::before, .wd-key .m::before { background: var(--wd-blue); }
.wd-outs .x::before, .wd-key .x::before { background: var(--wd-drop); }
.wd-outs .n::before, .wd-key .n::before { background: #e3a13b; }
.wd-outs .k::before { background: var(--wd-keep); }

/* the arrows between columns */
@media (min-width: 1000px) {
  .wd > .wd-node + .wd-node::before, .wd > .wd-node + .wd-end::before {
    content: ""; position: absolute; left: -26px; top: 50%; width: 22px; height: 2px; background: var(--wd-blue);
  }
  .wd > .wd-node + .wd-node::after, .wd > .wd-node + .wd-end::after {
    content: ""; position: absolute; left: -8px; top: calc(50% - 4px);
    border: 5px solid transparent; border-left: 7px solid var(--wd-blue); border-right: 0;
  }
  /* the two steps that send records down to Exclude */
  .wd-x .wd-outs .x { position: relative; }
  .wd > .wd-x { padding-bottom: 20px; }
  .wd > .wd-x > .wd-outs::after {
    content: ""; position: absolute; left: 50%; bottom: -31px; width: 2px; height: 30px;
    background: var(--wd-drop); opacity: .55;
  }
  .wd-drop { grid-column: 2 / span 2; }
}
@media (max-width: 999px) {
  .wd > .wd-node + .wd-node::before, .wd > .wd-node + .wd-end::before {
    content: "\2193"; position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
    font-size: 16px; line-height: 1; color: var(--wd-blue);
  }
}
.wd-drop {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px;
  padding: 14px 18px; border-radius: 16px; text-align: center;
  background: var(--wd-drop-bg); border: 1px solid rgba(194, 65, 45, .28);
}
.wd-drop b { font-size: 15px; font-weight: 600; color: var(--wd-drop); }
.wd-drop span { font-size: 13px; color: var(--wd-body); }

.wd-key {
  list-style: none; margin: 28px auto 0; padding: 0; max-width: 900px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
}
.wd-key li { font-size: 13px; }

/* ------------------------------------------------------ the six steps
   The site's own cards in its three-column grid, numbered because they are a
   sequence. A section of their own: they do not follow the video. */
ol.wg-build { list-style: none; margin: 0; padding: 0; }
.wg-build > li { display: flex; flex-direction: column; gap: 10px; }
.wg-build > li p { margin: 0; }
.wg-n { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: #8046e1; }

.wg-ui { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.wg-ctl {
  font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 8px; white-space: nowrap;
  color: #161727; background: #f8f8f9; border: 1px solid rgba(22, 23, 39, .12);
}
.wg-ctl.go { color: #fff; background: #8046e1; border-color: #8046e1; }
.wg-ctl.in { color: #0f8a66; background: #e9f7f1; border-color: rgba(15, 138, 102, .3); }
.wg-ctl.out { color: #c2412d; background: #fcefec; border-color: rgba(194, 65, 45, .28); }
.wg-ctl.amber { color: #a86400; background: #fdf4e5; border-color: rgba(168, 100, 0, .28); }

/* ------------------------------------------------------ the three rules */
.wg-pill {
  font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  color: #0f8a66; background: #e9f7f1; border: 1px solid rgba(15, 138, 102, .3);
}
.wg-pill.off { color: #787888; background: transparent; border-style: dashed;
  border-color: rgba(22, 23, 39, .2); text-decoration: line-through; }

/* ======================================================= the build, played
   A recreation of the console's workflow editor, drawn at a fixed 960x440 and
   scaled to the column by workflow-guide.js, so the pointer's path lands on
   the same controls at every width. Without the script it is the finished
   frame at natural size, inside a frame that scrolls sideways. */
/* The player sits in the hero now, outside any .wg band, so it carries the
   tokens it draws with instead of inheriting them. */
.wv {
  --bg:#11111d; --surface:#18182a; --surface-2:#1f2038;
  --ink:#f1edf6; --ink-2:#b4b4c3; --ink-3:#8c8c9e;
  --line:#282946; --line-2:#434358;
  --brand:#baa7d8; --brand-btn:#5a2ea9; --brand-soft:#22233c;
  --accent:#f3a64a; --accent-soft:#3a2710;
  --keep:#6fd3a9; --keep-soft:#10302a; --drop:#f29a87; --drop-soft:#3a1c17;
  margin-bottom: 18px; border: 1px solid var(--line-2); border-radius: 16px;
  background: var(--surface); overflow: hidden;
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .7);
}
.wv-frame { position: relative; overflow-x: auto; }
.wv.live .wv-frame { overflow: hidden; }
.wv-stage {
  position: relative; width: 960px; height: 440px; transform-origin: 0 0;
  font-family: 'Sora', sans-serif; color: var(--ink-2); user-select: none;
}

/* top bar */
.wv-bar {
  position: absolute; inset: 0 0 auto 0; height: 52px; padding: 0 16px;
  display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--line-2); background: #161727;
}
.wv-crumb { font-size: 12.5px; color: var(--ink-3); margin-right: 6px; }
.wv-tab {
  font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 8px;
  border: 1px solid transparent; color: var(--ink-2); transition: all .25s ease;
}
.wv-tab.is-hl { background: var(--brand-soft); color: var(--ink); border-color: rgba(186,167,216,.5); }
.wv-status { position: relative; flex: 1; height: 18px; margin-left: 10px; font-size: 11.5px; }
.wv-st { position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--ink-3); }
.wv-st.ok { color: var(--keep); font-weight: 600; }
.wv-save {
  position: relative; height: 32px; min-width: 116px; padding: 0 14px; border-radius: 8px;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 600;
  background: var(--brand-btn); color: #fff;
}
.wv-save > span { grid-area: 1 / 1; }

/* the steps you can add */
.wv-pal {
  position: absolute; left: 0; top: 52px; bottom: 0; width: 170px;
  padding: 16px 12px; border-right: 1px solid var(--line-2); background: #161727;
  display: flex; flex-direction: column; gap: 8px;
}
.wv-pal-k {
  height: 16px; font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.wv-chip {
  height: 30px; display: flex; align-items: center; padding: 0 10px; border-radius: 8px;
  font-size: 12px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-2);
  transition: opacity .3s ease;
}
.wv-chip.is-used { opacity: .32; }

/* the canvas */
.wv-canvas {
  position: absolute; left: 170px; top: 52px; right: 0; bottom: 0;
  background-image: radial-gradient(rgba(186,167,216,.16) 1px, transparent 1px);
  background-size: 18px 18px;
}
.wv-wires { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.wv-wire {
  fill: none; stroke: #baa7d8; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset .45s ease, opacity .2s ease;
}
.wv-wire.no { stroke: #f29a87; stroke-width: 1.6; }
.wv-lbl {
  position: absolute; font-size: 10.5px; font-weight: 600; color: var(--brand); white-space: nowrap;
  transition: opacity .3s ease;
}
.wv-lbl.no { color: var(--drop); }
.wv-lbl.dim { color: var(--ink-3); font-weight: 500; }

.wv-node {
  position: absolute; top: 112px; width: 140px; height: 112px; padding: 10px 11px;
  border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 6px;
  transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.wv-node b { font-size: 11.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.wv-node.first { border-color: rgba(186,167,216,.45); }
.wv-node.is-focus { box-shadow: 0 0 0 4px rgba(186,167,216,.22); border-color: var(--brand); }
.wv-kind {
  align-self: flex-start; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line-2); color: #dac9ef;
}
.wv-kind.name { color: var(--brand); border-color: rgba(186,167,216,.45); }
.wv-kind.confirm { color: var(--keep); border-color: rgba(111,211,169,.4); }
.wv-cov { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; font-size: 9.5px; }
.wv-cov em { font-style: normal; color: var(--ink-3); }
.wv-cov em:last-child { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.wv-cov i {
  height: 4px; border-radius: 99px; background: var(--bg); position: relative; overflow: hidden;
}
.wv-cov i::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 99px; background: var(--brand);
}
.wv-cov.low i::after { background: var(--accent); }
.wv-rule {
  align-self: flex-start; font-size: 9.5px; font-weight: 600; padding: 3px 7px; border-radius: 6px;
  color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(243,166,74,.4);
  transition: opacity .3s ease, transform .3s ease;
}

.wv-end {
  position: absolute; width: 120px; padding: 10px 8px; border-radius: 10px; text-align: center;
  font-size: 11px; font-weight: 600; line-height: 1.3; transition: opacity .3s ease;
}
.wv-end.in { height: 56px; display: grid; place-items: center; color: var(--keep);
  background: var(--keep-soft); border: 1px dashed rgba(111,211,169,.5); }
.wv-end.out { color: var(--drop); background: var(--drop-soft); border: 1px solid rgba(242,154,135,.4); }

.wv-menu {
  position: absolute; width: 196px; padding: 10px; border-radius: 12px; z-index: 3;
  background: #1c1d33; border: 1px solid var(--line-2); box-shadow: 0 18px 40px -12px rgba(0,0,0,.7);
  display: flex; flex-direction: column; gap: 4px; transition: opacity .2s ease, transform .2s ease;
}
.wv-menu-k { font-size: 11.5px; font-weight: 600; color: var(--ink); }
.wv-menu-k2 { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 2px 0 4px; }
.wv-opt { font-size: 11.5px; padding: 6px 8px; border-radius: 7px; color: var(--ink-2); transition: background .2s ease, color .2s ease; }
.wv-opt.x.is-hl { background: var(--drop-soft); color: var(--drop); }

.wv-ghost {
  position: absolute; z-index: 4; display: none; align-items: center; height: 30px; padding: 0 10px;
  border-radius: 8px; font-size: 12px; color: var(--ink); white-space: nowrap;
  background: var(--brand-soft); border: 1px solid var(--brand);
  box-shadow: 0 12px 26px -8px rgba(0,0,0,.7); transform: rotate(-2deg);
}
.wv-ghost.on { display: flex; }
.wv-cursor {
  position: absolute; z-index: 5; left: 0; top: 0; width: 20px; height: 22px;
  margin: -2px 0 0 -2px; pointer-events: none; display: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
.wv.live .wv-cursor { display: block; }
.wv-cursor::after {
  content: ""; position: absolute; left: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(186,167,216,.9); opacity: 0; transform: scale(.4);
}
.wv-cursor.down::after { animation: wvClick .45s ease-out; }
@keyframes wvClick { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.4); } }

.wv-toast {
  position: absolute; right: 16px; bottom: 16px; z-index: 3; padding: 10px 14px; border-radius: 10px;
  font-size: 12px; font-weight: 600; color: var(--keep); background: var(--keep-soft);
  border: 1px solid rgba(111,211,169,.45); transition: opacity .3s ease, transform .3s ease;
}

/* what the timeline holds back */
.wv.live [data-at]:not(.is-on) { opacity: 0; }
.wv.live .wv-node[data-at]:not(.is-on),
.wv.live .wv-rule[data-at]:not(.is-on),
.wv.live .wv-menu:not(.is-on),
.wv.live .wv-toast:not(.is-on) { transform: translateY(6px); }
/* The arrowhead is a marker, which the dash offset does not hide -- so the
   wire stays transparent until its moment and draws in from there. */
.wv.live .wv-wire:not(.is-on) { stroke-dashoffset: 1; opacity: 0; }
/* no script: the finished frame only */
.wv:not(.live) .wv-transient { display: none; }

/* controls */
.wv-ctrl {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px 14px; align-items: center;
  padding: 12px 16px; border-top: 1px solid var(--line-2); background: #161727;
}
.wv-play {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--ink); display: grid; place-items: center; cursor: pointer;
}
.wv-play:focus-visible, .wv-track:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.wv-cap { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); min-height: 1.5em; }
.wv-time { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wv-track {
  grid-column: 1 / -1; position: relative; height: 6px; border-radius: 99px;
  background: var(--surface-2); cursor: pointer;
}
.wv-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px; background: var(--brand); }
.wv-tick {
  position: absolute; top: -3px; width: 2px; height: 12px; border-radius: 2px; background: var(--line-2);
}
@media (max-width: 560px) {
  .wv-ctrl { grid-template-columns: auto 1fr; }
  .wv-time { grid-column: 2; justify-self: end; margin-top: -4px; }
}

@media (prefers-reduced-motion: reduce) {
  .wv *, .wv *::after { transition: none !important; animation: none !important; }
}