/* Role diagrams on the DV page: block diagrams that build up step by step. */
.fx{grid-column:1/-1;margin:0;padding:6px 26px 22px;border-top:1px dashed var(--rule);background:linear-gradient(rgba(236,226,201,.5),rgba(236,226,201,.15))}
.fx svg{display:block;width:100%;height:auto;margin-top:12px}
.fx figcaption{color:var(--muted);margin-top:10px;max-width:70ch;font-size:var(--t-small)}
.fx .b2{fill:#fffaf0;stroke:#8a7a5a;stroke-width:1.2}
.fx .b3{fill:rgba(168,72,31,.13);stroke:#a8481f;stroke-width:1.2}
.fx .t1{font:500 12.5px var(--sans);fill:var(--ink)}
.fx .t2{font:400 10.5px var(--mono);fill:var(--muted)}
.fx .t3{font:500 10.5px var(--mono);fill:var(--cu);letter-spacing:.12em;text-transform:uppercase}
.fx .w{fill:none;stroke:#7d6e50;stroke-width:1.5}
.fx .w.cu{stroke:#a8481f;stroke-width:2}
.fx .w.bad{stroke:#b3392b;stroke-dasharray:5 4;stroke-width:1.8}
.step{opacity:0;transition:opacity .45s}
.step.on{opacity:1}
@media (max-width:820px){
  .fx{padding:6px 14px 18px}
}
.fx .t2,.fx .t3{font-size:var(--t-label)}
@media (max-width:640px){
  .fx{overflow-x:auto}
  .fx svg{min-width:640px}
  .fx::before{content:"Swipe to see the whole diagram →";display:block;margin-top:10px;font:400 var(--t-label) var(--mono);color:var(--cu)}
}