/* flows-explain: every workflow says what it does (flow-explain.js). Scoped to fx- classes. */
.fx-line{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:var(--ink-soft);font-weight:400;max-width:52ch;white-space:normal}
.fx-badges{display:inline-flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.fx-badge{display:inline-block;padding:2px 7px;border-radius:999px;font-size:11px;line-height:1.4;font-weight:500;background:var(--green-wash);color:var(--green);white-space:nowrap}
.fx-badge.acct{background:var(--gold-wash);color:var(--gold)}
.fx-badge.out{background:var(--red-wash);color:var(--red)}

.fx-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.fx-strip p{flex:1 1 320px;margin:0;font-size:14px;line-height:1.5;color:var(--ink)}
.fx-strip .fx-badges{margin-top:0}

.fx{display:grid;gap:14px}
.fx-purpose{margin:0;font-size:16px;line-height:1.55;color:var(--ink);max-width:70ch}
.fx-walk{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.fx-step,.fx-lane{margin-left:calc(var(--d,0) * 22px)}
.fx-step{display:grid;grid-template-columns:34px 1fr;gap:8px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:14px;line-height:1.5;color:var(--ink)}
.fx-step:last-child{border-bottom:0}
.fx-step.off>div{color:var(--ink-dim)}
.fx-n{font:500 12px/1.9 var(--mono);color:var(--ink-dim)}
.fx-lane{padding:8px 0 2px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--green)}
.fx-src{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-soft)}
.fx-src i{font-style:normal;font-weight:600;margin-right:2px}
.fx-src.desk i{color:var(--green)}
.fx-src.account i{color:var(--gold)}
.fx-src.outside i{color:var(--red)}

.fx-access{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:10px}
.fx-access li{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.fx-acc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.fx-access p{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.fx-ok{margin:0 0 6px;font-size:14px;color:var(--ink-soft)}
.fx-sub{margin:16px 0 8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}
.fx-note{margin:6px 0 0}
.fx-side-switch{margin-top:10px}

.fx-log{list-style:none;margin:0;padding:0}
.fx-log li{display:grid;grid-template-columns:110px minmax(90px,160px) 1fr;gap:10px;padding:9px 16px;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.45}
.fx-log li:last-child{border-bottom:0}
.fx-log .t{font:12px/1.6 var(--mono);color:var(--ink-dim)}
.fx-log li.k-skip span:last-child{color:var(--red)}
.fx-log li.k-done span:last-child{color:var(--green)}

@media (max-width:640px){
  .fx-step,.fx-lane{margin-left:calc(var(--d,0) * 12px)}
  .fx-log li{grid-template-columns:1fr;gap:2px;padding:9px 12px}
  .fx-purpose{font-size:15px}
}