/* ─────────────────────────────────────────────────────────────────────────────
   agentflow.css — the agentic-workflow simulator (agents.html).
   Loaded after case.css and built from the same tokens: true black, hairlines,
   three type voices, flat except live state. The only glow on the page is the
   signal travelling a wire and the step it is sitting on.
   Mounts on any [data-agentflow] element (assets/js/agentflow.js).
   ───────────────────────────────────────────────────────────────────────── */

/* ── hero: short on purpose, so the canvas is in the first viewport ───────── */
.ihero.afHero{padding-top:clamp(6.4rem,13vh,8.2rem);}
.ihero.afHero h1{font-size:clamp(2.6rem,6.2vw,5rem);line-height:.92;text-wrap:balance;}
.ihero.afHero .lead{max-width:60ch;margin-top:1.3rem;}

.af{padding:clamp(2rem,5vh,3rem) var(--padx) clamp(4rem,9vh,6rem);}
.af_in{max-width:var(--maxw);margin:0 auto;}
/* controls inherit the page voice first; each one's own rule below then wins on order */
.afTab,.afRun,.afChip,.afReset,.afN{font:inherit;color:inherit;}

/* ── workflow picker: three titles on a hairline, not three cards ─────────── */
.afTabs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);}
.afTab{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  appearance:none;background:none;border:0;border-top:1px solid transparent;margin-top:-1px;
  text-align:left;padding:1.05rem 1.2rem 1.2rem 0;color:var(--dim);cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease);}
.afTab b{display:block;font-family:var(--disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.3rem,2.5vw,1.9rem);line-height:.95;letter-spacing:.02em;}
.afTab span{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.12em;text-transform:lowercase;color:var(--dim);}
.afTab:hover{color:var(--text);}
.afTab[aria-selected="true"]{color:var(--text);border-top-color:var(--text);}

/* ── the panel: one machined object ───────────────────────────────────────── */
.afPanel{margin-top:.4rem;border:1px solid var(--line2);border-radius:14px;background:var(--term);
  display:grid;grid-template-columns:minmax(0,1fr) 19.5rem;
  grid-template-areas:"bar bar" "stage side";}

.afBar{grid-area:bar;display:flex;align-items:center;gap:.9rem;min-height:3.2rem;
  padding:.6rem .7rem .6rem 1.1rem;border-bottom:1px solid var(--line);}
.afBar_dots{display:flex;gap:.4rem;}
.afBar_dots i{width:9px;height:9px;border-radius:999px;background:var(--dimmer);display:block;}
.afBar_file{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.afBar_file b{font-weight:400;color:var(--text);}
.afState{margin-left:auto;display:flex;align-items:center;gap:.55rem;white-space:nowrap;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);}
.afState i{width:6px;height:6px;border-radius:999px;background:var(--dimmer);display:block;
  transition:background .3s var(--ease);}
.af_in[data-state="running"] .afState,.af_in[data-state="waiting"] .afState,.af_in[data-state="done"] .afState{color:var(--text);}
.af_in[data-state="running"] .afState i{background:var(--text);animation:afBlink 1.1s var(--ease) infinite alternate;}
.af_in[data-state="waiting"] .afState i,.af_in[data-state="done"] .afState i{background:var(--text);}
@keyframes afBlink{to{opacity:.25;}}

/* run control: the one red thing while nothing is moving */
.afRun{appearance:none;cursor:pointer;white-space:nowrap;border-radius:999px;
  background:var(--red);border:1px solid var(--red);color:#000;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.62rem 1.15rem;transition:background .25s var(--ease),border-color .25s var(--ease),
  color .25s var(--ease),transform .25s var(--ease);}
.afRun:hover{background:var(--red-soft);border-color:var(--red-soft);transform:translateY(-2px);}
.afRun.is-ghost{background:transparent;border-color:var(--text);color:var(--text);}
.afRun.is-ghost:hover{border-color:var(--red);color:var(--red-soft);}
.afRun[hidden]{display:none;}

/* ── stage: the canvas and what feeds it ──────────────────────────────────── */
.afStage{grid-area:stage;position:relative;min-width:0;background-color:#000;border-radius:0 0 0 13px;
  background-image:radial-gradient(rgba(255,255,255,.085) 1px,transparent 1.3px);background-size:22px 22px;
  display:flex;flex-direction:column;}
.afIn{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:1rem 1.1rem 0;position:relative;z-index:3;}
.afIn_k{font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-right:.35rem;}
.afChip{appearance:none;cursor:pointer;border-radius:999px;border:1px solid var(--line2);
  background:#000 linear-gradient(180deg,rgba(255,255,255,.03),transparent);color:var(--lead);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.52rem .85rem;transition:border-color .25s var(--ease),color .25s var(--ease),background-color .25s var(--ease);}
.afChip:hover{border-color:rgba(255,255,255,.4);color:var(--text);}
.afChip[aria-pressed="true"]{border-color:var(--text);color:#000;background:var(--text);}

.afCanvas{position:relative;height:500px;flex:0 0 auto;}
.afSvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}

/* wires */
.afW{fill:none;stroke:rgba(255,255,255,.17);stroke-width:1.4;
  transition:stroke .45s var(--ease),opacity .45s var(--ease);}
.afW.is-sub{stroke-dasharray:3 5;}
.afW.is-on{stroke:rgba(236,238,241,.82);}
.afW.is-dim{opacity:.28;}
/* idle drift: small dots moving the way the work moves */
.afF{fill:none;stroke:rgba(255,255,255,.4);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:.1 16;animation:afDrift 1.5s linear infinite;transition:opacity .45s var(--ease);}
.afF.is-on,.afF.is-dim{opacity:0;}
@keyframes afDrift{to{stroke-dashoffset:-16.1;}}
.af_in.is-off .afF,.af_in.is-off .afThink{animation-play-state:paused;}
.afPort{fill:#000;stroke:rgba(255,255,255,.34);stroke-width:1.2;transition:opacity .45s var(--ease);}
.afPort.is-dim{opacity:.28;}
/* the live signal */
.afTrail{fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;}
.afDot{fill:var(--red);filter:drop-shadow(0 0 5px var(--red));}
/* the agent thinking: a segment running its own border */
.afThink{fill:none;stroke:var(--red);stroke-width:1.7;stroke-linecap:round;stroke-dasharray:15 85;
  opacity:0;transition:opacity .35s var(--ease);filter:drop-shadow(0 0 4px rgba(255,42,51,.8));}
.afThink.is-on{opacity:1;animation:afOrbit 1.7s linear infinite;}
@keyframes afOrbit{to{stroke-dashoffset:-100;}}
.afWires{transition:opacity .4s var(--ease);}
.afWires.is-enter{opacity:0;}

/* nodes */
.afN{position:absolute;left:0;top:0;appearance:none;background:none;border:0;padding:0;z-index:2;
  color:var(--text);cursor:pointer;touch-action:pan-y;transition:opacity .45s var(--ease);}
.afN_box{display:grid;place-items:center;width:58px;height:58px;border-radius:14px;
  background:var(--bg2) linear-gradient(180deg,rgba(255,255,255,.04),transparent);
  border:1px solid rgba(255,255,255,.2);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .5s var(--ease);}
.afIc{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;
  stroke-linejoin:round;opacity:.7;transition:opacity .3s var(--ease);}
.afN_lbl{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);
  width:max-content;max-width:114px;text-align:center;pointer-events:none;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;
  color:var(--lead);}
.afN--trigger .afN_box{border-radius:999px 14px 14px 999px;}
.afN--sub .afN_box{width:46px;height:46px;border-radius:999px;}
.afN--sub .afIc{width:19px;height:19px;}
.afN--sub .afN_lbl{max-width:88px;}
.afN--agent .afN_box{width:184px;height:76px;grid-template-columns:auto 1fr;gap:.75rem;
  padding:0 1rem;justify-items:start;text-align:left;}
.afN--agent .afIc{width:30px;height:30px;opacity:.9;}
.afN_who{display:block;min-width:0;width:100%;}
.afN_who b{display:block;font-family:var(--disp);font-weight:400;font-size:1.42rem;line-height:1;
  letter-spacing:.03em;text-transform:uppercase;}
.afN_who i{display:block;margin-top:.3rem;font-style:normal;font-family:var(--mono);font-size:.52rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;transition:color .3s var(--ease);}
@media(hover:hover){
  .afN{cursor:grab;}
  .afN:hover .afN_box{border-color:rgba(255,255,255,.5);}
  .afN:hover .afIc{opacity:1;}
}
.afN:focus-visible{outline:0;}
.afN:focus-visible .afN_box{outline:2px solid var(--red);outline-offset:3px;}
.afN.is-drag{cursor:grabbing;z-index:5;}
.afN.is-live .afN_box{border-color:var(--red);box-shadow:0 0 9px var(--red);}
.afN.is-live .afIc,.afN.is-done .afIc{opacity:1;}
.afN--agent.is-live .afN_box{border-color:rgba(255,255,255,.2);box-shadow:none;}
.afN--agent.is-live .afN_who i{color:var(--text);}
.afN.is-done .afN_box{border-color:rgba(236,238,241,.62);}
/* stopped for a person: the red moves to the button they press */
.af_in[data-state="waiting"] .afN.is-live .afN_box{border-color:var(--text);box-shadow:none;}
.afN.is-dim{opacity:.28;}
.afN.is-enter{opacity:0;}
.afN.is-enter .afN_box{transform:scale(.82);}
.afN.is-leave{opacity:0;pointer-events:none;}

.afReset{position:absolute;right:1rem;top:.9rem;z-index:3;appearance:none;background:#000;cursor:pointer;
  border:1px solid var(--line2);border-radius:999px;padding:.45rem .8rem;color:var(--lead);
  font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;
  transition:.25s var(--ease);}
.afReset:hover{border-color:var(--text);color:var(--text);}
.afReset[hidden]{display:none;}

/* ── caption: what is happening, in plain words ───────────────────────────── */
.afCap{position:sticky;bottom:0;z-index:6;display:flex;align-items:center;gap:1.1rem;
  min-height:5rem;padding:.95rem 1.1rem;border-top:1px solid var(--line);background:#000;
  border-radius:0 0 0 13px;}
.afCap_k{flex:0 0 7.6rem;white-space:nowrap;font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;line-height:1.4;
  text-transform:uppercase;color:var(--dim);}
.afCap_t{flex:1 1 auto;min-width:0;font-size:.98rem;line-height:1.45;font-weight:300;color:var(--text);
  max-width:60ch;text-wrap:pretty;}
.afCap_t.is-swap{animation:afSwap .32s var(--ease);}
@keyframes afSwap{from{opacity:0;transform:translateY(5px);}}
.afCap_a{flex:0 0 auto;display:flex;align-items:center;}
.afCap_a:empty{display:none;}
.afAsk{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  color:var(--red-soft);border-bottom:1px solid var(--red-deep);padding-bottom:.2rem;transition:.25s var(--ease);}
.afAsk:hover{color:var(--red);border-color:var(--red);}

/* ── side: the instructions it was given, and what it did with them ───────── */
.afSide{grid-area:side;min-width:0;border-left:1px solid var(--line);display:flex;flex-direction:column;}
.afSide h3{font-family:var(--mono);font-weight:400;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);padding:1.05rem 1.15rem .75rem;}
.afRules{list-style:none;padding:0 1.15rem 1rem;counter-reset:afr;}
.afRules li{position:relative;counter-increment:afr;padding:.62rem 0 .62rem 1.6rem;
  border-top:1px solid var(--line);font-size:.86rem;line-height:1.45;font-weight:300;color:var(--lead);
  transition:color .35s var(--ease);}
.afRules li::before{content:counter(afr);position:absolute;left:0;top:.74rem;font-family:var(--mono);
  font-size:.56rem;letter-spacing:.1em;color:var(--dimmer);transition:color .35s var(--ease);}
.afRules li::after{content:'';position:absolute;left:-1.15rem;top:-1px;bottom:0;width:1px;background:var(--text);
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease);}
.afRules li.is-hit{color:#fff;font-weight:400;}
.afRules li.is-hit::before{color:var(--text);}
.afRules li.is-hit::after{transform:scaleY(1);}
.afSide h3.afLog_h{border-top:1px solid var(--line);}
.afLog{list-style:none;padding:0 1.15rem 1.1rem;flex:1 1 auto;min-height:6.5rem;}
.afLog li{display:flex;gap:.75rem;padding:.3rem 0;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.14em;line-height:1.5;text-transform:uppercase;color:var(--dim);animation:afSwap .32s var(--ease);}
.afLog li b{flex:0 0 auto;font-weight:400;color:var(--dimmer);}
.afLog li:last-child{color:var(--text);}
.afLog li.afLog_e{color:var(--dimmer);text-transform:none;letter-spacing:.06em;animation:none;}
.afNote{padding:.8rem 1.15rem .95rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.52rem;
  letter-spacing:.14em;line-height:1.6;text-transform:uppercase;color:var(--dimmer);}

/* no-JS: the same idea as a short list */
.afStatic{border:1px solid var(--line2);border-radius:14px;padding:1.4rem 1.5rem 1.6rem;margin-top:1rem;}
.afStatic ol{margin:1rem 0 0 1.1rem;color:var(--lead);font-size:.95rem;line-height:1.7;}

/* ── the four parts: a hairline spec strip, each with its node shape ──────── */
.afParts h2,.afWhen h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:.94;letter-spacing:.01em;}
.afParts h2 .hl,.afWhen h2 .hl{color:var(--red);}
.afParts_g{display:grid;grid-template-columns:repeat(4,1fr);margin-top:2.6rem;border-top:1px solid var(--line2);}
.afPart{padding:1.5rem 1.6rem 1.7rem 0;border-bottom:1px solid var(--line);}
.afPart + .afPart{padding-left:1.6rem;border-left:1px solid var(--line);}
.afPart svg{display:block;width:84px;height:44px;fill:none;stroke:var(--text);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:1.25rem;}
.afPart h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:1.7rem;line-height:.98;
  letter-spacing:.02em;margin-bottom:.7rem;}
.afPart p{font-size:.92rem;line-height:1.6;color:var(--lead);max-width:34ch;}

.afWhen_g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:2rem 4rem;align-items:start;}
.afWhen p{font-size:clamp(1rem,1.35vw,1.14rem);line-height:1.6;color:var(--lead);max-width:54ch;}
.afWhen p + p{margin-top:1.1rem;}
.afWhen p b{font-weight:500;color:var(--text);}

.afEnd .lead{margin-top:1.4rem;max-width:52ch;}
.afEnd_or{margin-top:1.3rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);}
.afEnd_or a{color:var(--text);border-bottom:1px solid var(--line2);padding-bottom:.15rem;text-transform:lowercase;
  transition:.25s var(--ease);}
.afEnd_or a:hover{color:var(--red-soft);border-color:var(--red);}

/* ── narrower ─────────────────────────────────────────────────────────────── */
/* ── the 30-second film, above the simulator ──────────────────────────────── */
.afFilm{padding:clamp(2.4rem,6vh,3.6rem) var(--padx) 0;}
.afFilm_in{max-width:var(--maxw);margin:0 auto;}
.afFilm video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;
  border:1px solid var(--line2);border-radius:14px;}
.afFilm figcaption{margin-top:.9rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;line-height:1.5;
  text-transform:uppercase;color:var(--lead);}
.afFilm figcaption span{color:var(--dim);}

@media(max-width:1040px){
  .afPanel{grid-template-columns:minmax(0,1fr);grid-template-areas:"bar" "stage" "side";}
  .afStage,.afCap{border-radius:0;}
  .afSide{border-left:0;border-top:1px solid var(--line);}
  .afRules li::after{display:none;}
  .afLog{min-height:0;}
  .afParts_g{grid-template-columns:repeat(2,1fr);}
  .afPart:nth-child(3){padding-left:0;border-left:0;}
  .afWhen_g{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .af,.afFilm{padding-left:1rem;padding-right:1rem;}
  .afTab{padding-right:.6rem;}
  .afTab span{display:none;}
  .afBar{padding-left:.9rem;gap:.6rem;}
  .afBar_dots{display:none;}
  .afBar_file span{display:none;}
  .afRun{padding:.82rem 1.05rem;}
  .afIn{padding:.9rem .8rem 0;gap:.45rem;}
  .afIn_k{flex:0 0 100%;}
  .afChip{padding:.72rem .8rem;}
  .afN_lbl{max-width:96px;}
  .afN--agent .afN_box{width:156px;height:70px;padding:0 .8rem;gap:.6rem;}
  .afN--agent .afIc{width:26px;height:26px;}
  .afN--sub .afN_box{width:42px;height:42px;}
  .afN--sub .afN_lbl{max-width:80px;}
  .afCap{flex-wrap:wrap;gap:.35rem .8rem;padding:.85rem .9rem;min-height:6.6rem;align-content:center;}
  .afCap_k{flex:0 0 100%;}
  .afCap_t{font-size:.94rem;flex:1 1 100%;}
  .afCap_a{margin-top:.35rem;}
  .afParts_g{grid-template-columns:1fr;}
  .afPart,.afPart + .afPart{padding-left:0;border-left:0;}
}

@media(prefers-reduced-motion:reduce){
  .afF,.afThink.is-on,.af_in[data-state="running"] .afState i{animation:none!important;}
  .afF{stroke-dasharray:.1 16;}
  .afCap_t.is-swap,.afLog li{animation:none!important;}
  .afN,.afN_box,.afW,.afWires{transition:none!important;}
}