/* Workflows (workflows.js): the Onboarding tab on a customer page and the Workflows page. Foundation language: hairline rules, mono for values, status as words. Both themes and phone width. */
.wf-wrap,.wf-page{max-width:1100px}
.wf-lead{max-width:80ch;margin:0 0 10px}
.wf-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.wf-msg{margin:4px 0 8px;min-height:1px;max-width:80ch}
.wf-gap{max-width:90ch;margin:0 0 10px}
.wf-gap ul{margin:6px 0 0;padding-left:20px;display:grid;gap:3px}
.wf-gap.c-crit-b,.wf-err{border-left:3px solid var(--crit);background:var(--critBg)}
.wf-err p{margin:6px 0 0}
.wf-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
.wf-panel{border:1px solid var(--bd2);border-radius:var(--r);background:var(--sf);padding:12px 14px;margin:0 0 12px;min-width:0}
.wf-panel h3{margin:0 0 6px;font-size:13px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wf-checks{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:5px}
.wf-checks li{display:flex;gap:8px;align-items:flex-start}
.wf-ok{color:var(--ink)} .wf-todo{color:var(--ink3)}
.wf-chk{display:inline-block;width:16px;text-align:center;font:700 12px var(--mono)}
.wf-ok .wf-chk{color:var(--ok)}
.wf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px 14px;margin:0 0 12px}
.wf-fld{display:grid;gap:4px;align-content:start;min-width:0}
.wf-fld label{font-size:12px;color:var(--ink2)}
.wf-fld .sel{width:100%}
.wf-sm{max-width:220px;margin:6px 0 0}
.wf-e{font-size:12px}
.wf-grp{border-top:1px solid var(--bd);padding:10px 0 4px;display:grid;gap:4px;max-width:90ch}
.wf-chk-l{display:flex;align-items:flex-start;gap:6px;cursor:pointer;min-height:var(--ctl-hit,22px)}
.wf-chk-l>span{padding-top:2px}
.wf-seats{margin:6px 0 0;padding-left:18px;display:grid;gap:2px}
.wf-cards{margin:8px 0 12px}
.wf-start{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0 0}
.wf-start .sel{min-width:240px}
.wf-filter{margin:0 0 8px;display:flex;gap:6px;flex-wrap:wrap}
.wf-t td .role{display:block;text-transform:none;letter-spacing:0;font-size:11px;color:var(--ink3);overflow-wrap:anywhere}
.wf-t td.n{text-align:right}
.wf-t tr.wf-go,.wf-t tr.wf-pr{cursor:pointer}
.wf-t tr.wf-go:hover td,.wf-t tr.wf-pr:hover td{background:var(--sel)}
.wf-t tr.wf-go:focus-visible,.wf-t tr.wf-pr:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.wf-t tr.wf-skip td{opacity:.6}
.wf-t tr.wf-pd>td{background:var(--bg);white-space:normal;display:table-cell}
.wf-pd div{margin:2px 0}
.wf-w{font-size:11.5px;overflow-wrap:anywhere;color:var(--ink2)}
.wf-ins{border-left:3px solid var(--warn);background:var(--warnBg);padding:6px 10px;margin:6px 0;max-width:90ch}
/* a run */
.wf-status{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:4px 0 10px}
.wf-steps{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.wf-step{border:1px solid var(--bd2);border-left-width:4px;border-radius:var(--r);background:var(--sf);padding:10px 12px;min-width:0}
.wf-s-succeeded{border-left-color:var(--ok)} .wf-s-failed{border-left-color:var(--crit)} .wf-s-awaiting_approval{border-left-color:var(--warn)} .wf-s-running{border-left-color:var(--acc)}
.wf-s-skipped,.wf-s-pending,.wf-s-rolled_back{border-left-color:var(--bd2)}
.wf-s-skipped{opacity:.7}
.wf-cur{background:var(--sf2);box-shadow:0 0 0 1px var(--warn) inset}
.wf-s-failed.wf-cur{box-shadow:0 0 0 1px var(--crit) inset}
.wf-sh{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wf-n{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:50%;border:1px solid var(--bd2);font:600 11px var(--mono);color:var(--ink2)}
.wf-st{margin:4px 0 4px 30px;max-width:86ch}
.wf-step>.wf-sa,.wf-step>.gap,.wf-step>.wf-rev,.wf-step>.wf-det,.wf-step>.wf-ins,.wf-step>p{margin-left:30px}
.wf-sa{margin-top:8px;margin-bottom:0}
.wf-det{margin-top:6px;font-size:12px}
.wf-det summary{cursor:pointer;color:var(--ink2)}
.wf-det>div{margin:3px 0}
.wf-rev{border:1px solid var(--bd2);border-radius:var(--r);background:var(--bg);padding:8px 12px;margin-top:8px;max-width:640px}
.wf-rev p{margin:4px 0}
.wf-rev-on{border-color:var(--warn)}
.wf-secret{margin:8px 0;padding:10px 12px;border:1px solid var(--bd2);border-radius:var(--r);background:var(--sf);font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere;user-select:all}
.wf-rev-gone{opacity:.8}
.wf-log{margin-top:6px}
.wf-log summary{cursor:pointer;color:var(--ink2);margin-bottom:6px}
.wf-evs{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:12px}
.wf-ev.c-crit{color:var(--crit)} .wf-ev.c-warn{color:var(--warn)} .wf-ev.c-ok{color:var(--ink)} .wf-ev.c-mute{color:var(--ink3)}
.wf-ev .m{margin-right:6px}
/* kill switches and requests */
.wf-sws,.wf-reqs{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.wf-sw .role{display:block;font-size:11.5px;color:var(--ink3);text-transform:none;letter-spacing:0;max-width:80ch}
.wf-req{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;border-top:1px solid var(--bd);padding-top:6px}
.wf-req .role{display:block;font-size:11.5px;color:var(--ink3)}
/* the template editor */
.wf-tsteps{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:6px}
.wf-ts{display:grid;grid-template-columns:auto minmax(0,1fr) 190px auto;gap:8px;align-items:center;border:1px solid var(--bd);border-radius:var(--r);padding:6px 8px;background:var(--bg)}
.wf-ts.wf-off{opacity:.55}
.wf-ts .role{display:block;font-size:11px;color:var(--ink3);text-transform:none}
.wf-tbtn{display:flex;gap:4px}
.wf-pk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto auto;gap:8px;align-items:center;margin:0 0 6px}
.wf-gr{display:flex;gap:8px;align-items:center;justify-content:space-between;max-width:520px;border-bottom:1px solid var(--bd);padding:2px 0}
.wf-ta{width:100%;max-width:90ch;font-family:var(--mono);font-size:12px;line-height:1.5}
@media (max-width:719px){
  .wf-cols{grid-template-columns:1fr}
  .wf-ts{grid-template-columns:1fr 1fr}
  .wf-ts .wf-chk-l{grid-column:1 / -1}
  .wf-pk{grid-template-columns:1fr 1fr}
  .wf-start .sel{min-width:0;width:100%}
  .wf-st,.wf-step>.wf-sa,.wf-step>.gap,.wf-step>.wf-rev,.wf-step>.wf-det,.wf-step>.wf-ins,.wf-step>p{margin-left:0}
  .wf-sa .btn{flex:1 1 100%}
  .wf-btns .btn{flex:1 1 auto}
  .wf-t tr.wf-pd>td:first-child{display:none}
}