.farout { display: none; flex: 1; min-width: 0; flex-direction: column; min-height: 0; }
.tasks.fa-open .farout { display: flex; }

.fa-head { font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: .04em; margin-bottom: 6px; }
.fa-bands { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 8px; }
.fa-band {
  font: inherit; font-size: 9px; padding: 3px 7px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 9px;
  background: transparent; color: var(--text-muted);
}
.fa-band:hover { background: var(--surface-alt); }
.fa-band.on { background: var(--text); color: var(--surface); border-color: var(--text); }
.fa-band.dead { opacity: .3; cursor: default; }
.fa-band.dead:hover { background: transparent; }

.fa-scroll { flex: 1; overflow-y: auto; padding-right: 4px; border-radius: 6px; min-height: 60px; }
.fa-scroll.drop-active { background: #eef5fc; outline: 1px dashed var(--accent-border); }
.fa-empty { font-size: 10px; color: var(--text-muted); padding: 10px 4px; line-height: 1.5; }

#faroutBtn.on { border-color: var(--text); color: var(--text); }