/* CrossKit scenario workflows (P1) */

.wf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin:22px 0 26px}
.wf-card{display:block;background:#fff;border:1px solid #e6ebf2;border-radius:14px;padding:20px 22px 22px;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.wf-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(31,42,68,.10);border-color:#c7d4ea}
.wf-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.wf-icon{width:38px;height:38px;border-radius:10px;background:#eef2ff;color:#2b6cff;display:flex;align-items:center;justify-content:center;font-size:17px}
.wf-steps{font-size:12px;color:#6b7280;border:1px solid #e6ebf2;border-radius:999px;padding:3px 10px}
.wf-card h2{font-size:18px;margin:0 0 8px;color:#1f2a44}
.wf-desc{margin:0 0 10px;font-size:14px;line-height:1.6;color:#4b5563}
.wf-outcome{margin:0 0 12px;font-size:13px;color:#1f7a45;background:#eafaf0;border:1px solid #b6e8c8;border-radius:8px;padding:8px 10px}
.wf-steplist{margin:0 0 14px;padding-left:20px;font-size:13px;color:#4b5563;line-height:1.8}
.wf-cta{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#2b6cff}

.wf-note{margin-top:26px;background:#f7f9fc;border:1px solid #e6ebf2;border-radius:12px;padding:18px 20px}
.wf-note h2{font-size:16px;margin:0 0 8px;color:#1f2a44}
.wf-note p{margin:0;font-size:14px;line-height:1.7;color:#4b5563}

/* detail page */
.wf-runbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:#f7f9fc;border:1px solid #e6ebf2;border-radius:12px;padding:14px 16px;margin:18px 0 22px}
.wf-runbar-text strong{display:block;font-size:14px;color:#1f2a44}
.wf-runbar-text span{font-size:13px;color:#6b7280}
.wf-runbar-acts{display:flex;flex-wrap:wrap;gap:8px}

.wf-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.wf-step{display:flex;gap:14px;background:#fff;border:1px solid #e6ebf2;border-radius:12px;padding:16px 18px}
.wf-step.done{border-color:#b6e8c8;background:#f6fdf9}
.wf-step.active{border-color:#c7d2fe;box-shadow:0 0 0 3px rgba(43,108,255,.08)}
.wf-step-num{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:#eef2ff;color:#2b6cff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.wf-step.done .wf-step-num{background:#eafaf0;color:#1f7a45}
.wf-step-body h2{font-size:16px;margin:0 0 6px;color:#1f2a44}
.wf-step-body p{margin:0 0 10px;font-size:14px;color:#4b5563;line-height:1.6}
.wf-step-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wf-step-state{font-size:12px;color:#1f7a45}

.wf-done{margin-top:20px;background:#eafaf0;border:1px solid #b6e8c8;border-radius:12px;padding:18px 20px}
.wf-done h2{font-size:17px;margin:0 0 8px;color:#1f7a45}
.wf-done p{margin:0 0 12px;font-size:14px;color:#2b3654}

/* floating "resume workflow" pill shown on a tool page opened from a workflow */
.ck-wf-pill{position:fixed;right:16px;bottom:88px;z-index:1150;display:none;align-items:center;gap:8px;background:#fff;border:1px solid #c7d2fe;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;color:#2b6cff;box-shadow:0 6px 18px rgba(31,42,68,.14);text-decoration:none}
.ck-wf-pill.show{display:inline-flex}
.ck-wf-pill i{font-size:12px}

html.ck-dark .wf-card,
html.ck-dark .wf-note,
html.ck-dark .wf-runbar,
html.ck-dark .wf-step{background:#171a21;border-color:#2a2f3a}
html.ck-dark .wf-card h2,
html.ck-dark .wf-note h2,
html.ck-dark .wf-step-body h2,
html.ck-dark .wf-runbar-text strong{color:#f2f4f9}
html.ck-dark .wf-desc,
html.ck-dark .wf-steplist,
html.ck-dark .wf-note p,
html.ck-dark .wf-step-body p,
html.ck-dark .wf-runbar-text span{color:#a8b0c0}
html.ck-dark .wf-icon{background:#1e1b4b;color:#a5b4fc}
html.ck-dark .wf-outcome{background:#122b1c;border-color:#2f6b47;color:#8ee0ab}
html.ck-dark .wf-step.done{background:#12251a;border-color:#2f6b47}
html.ck-dark .ck-wf-pill{background:#1d212a;border-color:#3a4a7a;color:#8ea9ff}

@media (max-width:600px){
  .wf-grid{grid-template-columns:1fr}
  .wf-runbar{flex-direction:column;align-items:flex-start}
  .wf-step{padding:14px}
  .ck-wf-pill{right:10px;bottom:80px}
}