#flows-list { display:grid; gap:12px; margin-top:12px; }
.flow-card { border:1px solid var(--cp-border); border-radius:4px; padding:16px; background:var(--cp-surface); min-width:0; overflow-wrap:anywhere; }
.flow-card[data-state='started'] { border-left:3px solid var(--cp-success); }
.flow-card[data-state='stopped'] { border-left:3px solid var(--cp-danger); }
.flow-card[data-state='unknown'],.flow-card[data-state='suspended'] { border-left:3px solid var(--cp-warning); }
.flow-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.flow-heading h5 { font:500 15px var(--font-display); margin:0; line-height:1.5; }
.flow-state { padding:4px 8px; border:1px solid var(--cp-border); border-radius:4px; font:450 12px var(--font-display); background:var(--cp-surface-soft); color:var(--cp-text-muted); }
.flow-state[data-state='started'] { color:var(--cp-success); }
.flow-state[data-state='stopped'] { color:var(--cp-danger); }
.flow-state[data-state='unknown'],.flow-state[data-state='suspended'] { color:var(--cp-warning); background:var(--cp-warning-soft); }
.flow-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.flow-actions button { font-family:var(--font-display); }
#flows-meta { font-size:12px; line-height:1.5; color:var(--cp-text-muted); margin:8px 0; overflow-wrap:anywhere; }
#flows-status { font-size:12px; line-height:1.6; color:var(--cp-text-muted); margin:8px 0; overflow-wrap:anywhere; }
#flows-status[data-error='true'] { color:var(--cp-danger); }
@media(max-width:700px) { .flow-card { padding:12px; } }

/* A flow that cannot run yet is a warning, not a failure: it names what the person must allow. */
.flow-connections { margin:10px 0 0; padding:10px 12px; border-radius:4px; background:var(--cp-warning-soft); border:1px solid var(--cp-warning); color:var(--ink); font-size:12px; }
.flow-card a.cp-action-button { display:inline-block; text-decoration:none; }

.flow-runs { margin-top:12px; padding-top:10px; border-top:1px solid var(--cp-border); }
.flow-run { margin:3px 0; font-size:12px; font-family:ui-monospace,monospace; }
.flow-run[data-status='succeeded'] { color:var(--cp-success); }
.flow-run[data-status='failed'] { color:var(--cp-danger); }
.flow-run[data-status='cancelled'] { color:var(--cp-muted); }