/* ───────────────────────── agents ─────────────────────────
   A flow is a canvas on the desktop — cards placed where you dropped them,
   wired by curves. None of that is reachable with a thumb, and a pinch-zoom
   canvas would be the literal translation rather than the useful one. So the
   same tasks are read top to bottom, in the order a run reaches them, and
   each wire survives as a line saying what comes next — which is what the
   curve was telling you in the first place. */
#flowbar { flex: 0 0 auto; display: flex; gap: 5px; overflow-x: auto;
           padding: 2px max(12px, var(--safe-r)) 8px max(14px, var(--safe-l));
           scrollbar-width: none; }
#flowbar::-webkit-scrollbar { display: none; }
#flowbar:empty { display: none; }
#flowhead { flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
            padding: 0 max(14px, var(--safe-r)) 10px max(16px, var(--safe-l)); }
#flow-name { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
             flex: 0 1 auto; }
#flow-note { font-size: 12px; color: var(--muted); white-space: nowrap;
             overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
#flow-note.bad { color: var(--bad); }
#flow-note.doing { color: var(--doing); }
#flow-run { flex: 0 0 auto; background: var(--accent); color: var(--accent-ink);
            border: 0; border-radius: var(--r-pill); padding: 8px 18px;
            font-size: 13px; font-weight: 600; cursor: pointer;
            transition: filter var(--ease), opacity var(--ease); }
#flow-run:hover { filter: brightness(1.06); }
#flow-run:disabled { opacity: .35; }
/* On means "this flow may run any command and edit any file", which is not a
   thing to learn about afterwards. */
#flow-free { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--doing);
             background: var(--wash-2); border-radius: var(--r-pill);
             padding: 3px 9px; white-space: nowrap; }

#flowlist { flex: 1 1 auto; overflow-y: auto; min-height: 0;
            overscroll-behavior: contain;
            padding: 0 max(16px, var(--safe-r)) calc(16px + var(--safe-b))
                       max(16px, var(--safe-l)); }
#flowlist > * { max-width: var(--read); margin-inline: auto; }
.flow-empty { color: var(--muted); font-size: 14.5px; text-align: center;
              padding: 12vh 24px; line-height: 1.6; }

.fcard { background: var(--wash); border-radius: var(--r-md);
         margin-bottom: 8px; overflow: hidden;
         transition: background var(--ease); }
.fcard.open { background: var(--surface); box-shadow: var(--shadow); }
.fhead { display: flex; align-items: center; gap: 10px; width: 100%;
         background: none; border: 0; padding: 12px 14px; cursor: pointer;
         text-align: left; }
.fdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
        background: var(--muted); }
.fdot.running { background: var(--doing); animation: pulse 1.2s infinite; }
.fdot.ok { background: var(--ok); }
.fdot.failed { background: var(--bad); }
@media (prefers-reduced-motion: reduce) { .fdot.running { animation: none; } }
.ftxt { flex: 1 1 auto; min-width: 0; }
.ftitle { font-size: 14px; font-weight: 550; white-space: nowrap;
          overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.fsub { font-size: 11.5px; color: var(--muted); white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis; line-height: 1.45; }
.fsub .gone { color: var(--bad); }
.fcaret { font-size: 11px; color: var(--muted); flex: 0 0 auto; }

.fbody { padding: 0 14px 14px; }
.fsection { font-size: 10px; font-weight: 650; letter-spacing: .1em;
            text-transform: uppercase; color: var(--muted); margin: 10px 0 6px; }
.fprompt { font-size: 13px; color: var(--dim); line-height: 1.6;
           white-space: pre-wrap; word-break: break-word; }
.fsay { font-size: 13.5px; line-height: 1.6; word-break: break-word;
        margin: 6px 0 10px; }
.fnote { font-size: 12px; color: var(--muted); margin: 4px 0; }
.fnote.bad { color: var(--bad); }
.fruns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.frun { background: var(--wash-2); color: var(--dim); border: 0;
        border-radius: var(--r-pill); padding: 8px 14px; font-size: 12.5px;
        font-weight: 550; cursor: pointer;
        transition: background var(--ease), color var(--ease); }
.frun:hover { background: var(--accent); color: var(--accent-ink); }
.frun:disabled { opacity: .35; }
/* What the wire said: which tasks this one hands its answer to. */
.fnext { font-size: 11.5px; color: var(--muted); margin-top: 10px;
         line-height: 1.5; }
.fnext .when-failure { color: var(--bad); }